Wireframes to mockups with Fireworks
Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients
08 Other content
Add any other information to the page, things like copyright notices, secondary information or service links. In this case our site is going to collect card payments so we will need terms and conditions, and privacy links at the bottom of the page. So add a footer for those elements to your sketch too.
09 The grey box method
Open up a graphics package and start translating your sketches into wireframes. Keep the styling simple; for each of your boxes on your sketches, draw a grey box in the same position and label the box with text so you know what each one represents. Make sure all the boxes line up, so everything looks neat and uniformed.
10 Add in other elements
Now you’ve got your basic content areas mapped out, add the interface elements like navigation links and the buttons. For each one of the buttons draw a box in a darker grey and label each one in white. The names of the links would be decided from your site map; as we don’t have that just number them.
11 Add headings and text
Add the headings to the content boxes and placeholder text for the Banner Item text. Then add the text to the wireframe in realistic sizes, this will give you an idea of your layout’s overall use of space. If you don’t know the actual text you want to put in at this point, use Latin or placeholder text.