Wireframes to mockups with Fireworks
Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients
04 Analyse your navigation
Once you’ve sketched in your header content, it’s important to think about multiple levels of navigation. This will be largely dictated by your site map as to how many you will need. In this case our website will need a second level of navigation for the different menus and offers, so add to your sketch.
05 Important elements
From our prioritised list in step two we can identify that the most important elements are: where the restaurant is, what the phone number is for takeaways and show them how great the food is. So add a box for each of the elements to the sketch, in an easy-to-spot location just under the navigation.
06 Calls to action
Now we are going to add in the calls to action that we identified in step two. From the aims and objectives in step one it’s clear that ‘Order Take Away’, ‘Book Table’ and ‘See Special Offers’ are clear calls to action, so you’ll need to add each of them to the sketch, in any order that you see fit.
07 Add interactive elements
Back in step one we identified that we would have a rotating banner as an interactive element. So in the placeholder for the food picture that we added in step five, change that to a rotating banner for offers and dishes. Then split the location box into a Google map and address.
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.