Wireframes to mockups with Fireworks
Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients
12 Add notes
Annotate your wireframe, so that it’s easily understandable. Number the items on the wireframe by adding a label and write your description for each at the bottom of the page. Remember to add where links are going to, and include a clear description of behaviour. Full size versions of these examples are found within the project files.
13 Start designing
Now it’s time to start designing how the page will actually look. Start by adding the elements from the wireframe that we created in step 12. Then apply the branding, colour, background images and fonts using your annotated wireframe as a guide. Experiment with these until you’re happy with the result.
14 Tweak until done
Now you’re free to play around with the exact positioning of things. The sizes and proportions can also be tweaked. Your wireframes shouldn’t restrict your creative process, just ensure that the page has everything that needs to be there. Your notes should help you decide if something was put in an exact place for a reason and track why decisions were made.