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.