Wireframes to mockups with Fireworks
Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients
Page wireframes from rough concept to Fireworks mockups
Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients
Documenting your initial layout ideas can save projects time and money, without having to invest a lot of time and effort. When working in teams, designers can do their thing while programmers can get on creating the functionality. In that situation it’s important that the front and back ends meet up without any surprises. By documenting your layout and interface ideas with wireframes, splitting tasks up between different people becomes much easier.
Wireframes are also really simple to understand so clients can get an idea of structure without being distracted by colour and branding. By separating the visual styling from the interface, you can focus on how users will interact with the site functionality and content rather than how good it looks, which can help designers avoid generic designs.
In this tutorial we’ll create a homepage wireframe for a restaurant website and translate that into a design.
This article originally appeared in Web Designer issue 170, authored by Jo York. You can download the tutorial files by clicking here
01 Capture requirements
Let’s work out what elements are going to go on the page. Start by listing the aims and objectives of the site, as well as any nice interface elements or features that you want to add. In this case we’ll add a rotating banner with special offers and new dishes, and an interactive Google map for the location.
02 What’s important?
After you’ve made your list of what’s on the page, number them in order of priority. Cut them out if you prefer and move the order around until you’re happy and then number them. Identify what you want the user to do and tell them, ie ‘Order Take Away’. These are referred to as calls to action, mark these on our list.
03 Start sketching
We are going to mark out the key content areas of our page and fill in the detail later. Begin by sketching the outline of your page and then add a representation of the logo and a box to show the top-level navigation. Drawing out a rough sketch now will help you see which layout works best before you start developing.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Great topic!
Very useful and well explained.
Very useful topic.
The concept is sound (we use this process all the time) but the tool is not really one that I would go with. We use Visio and Axure for our wireframes and prototypes. Visio is great for static screens and Axure is like Visio on steroids in that it allows interactivity with a semi-functional html option.
Discussing the needs of the site and mixing it in with the needs of the users is critical and no designing should be done before there is a good grasp of what both sides want and need from the site.
Thanks Mark. Nice effort here.
I concur with Ken – understanding and agreement, and then design.
That said, what’s unfortunate is the majority of low-budget outfits skip this step. Which in turn leads to clients who believe that all there is to an effective website is a design. Design is just one sliver of the battle, eh?
On the other hand, there are higher end outfits that do this step but lack the biz knowhow necessary to differentiate wants from needs. Needless to say, there are plenty of not-so-useful sites that in fact meet client wants. Unfortunately, it’s biz needs that are the most important.
It’s very nice topic. I’ve found it usefull for me, thx!!!!
Really very useful topic for designers! Thanks…
Very nice topic for a designer like me… Thanks.
Insightful information for a budding designer
Nice and most timely for us.
We are in the process of putting together a mock-up site with Adobe Fireworks.
Thanks
I came across your article via a Twitter tweet and I think it is excellent. A lot of designers wan to immediately jump into creating “pretty pictures” and don’t want to the initial homework upfront. Planning is everything. Without a clear plan and effective layout, all the pretty images in the world won’t help your web design. Thank you for this article.