Once the structure of your site has been established in your wireframes, you should start adding detail to blocked out areas. When you’re adding detail to your wireframes, you should think about a few things in particular:
- Grouping, Space, and Placement
Apply the same question of grouping, space, and placement to the elements within each area of the page. For example, in the lead story, where should the byline appear, and where should the photo credit appear? Should they be grouped together (because they are both attributions) or with the content with which they are associated? - Labels & Copy
What words do you use on buttons? What titles do you use for sections of a page? For zip code form in the weather info box, should the button say “Go” (it’s short), “Submit” (the default for buttons), or “Show Your Local Weather” (very descriptive)?
You don’t need to get too detailed, though:
- Images & Graphics
Block out areas where images or graphics will appear. Just describe what needs to be there. - Repetitive Copy
In many cases, you can use placeholder copy instead of real copy. The most common version starts with “Lorem Ipsum…”. The Subterrane web site (among many others) includes a generator for Lorem Ipsum placeholder copy. - Text Sizes
It’s best to restrict yourself to using 2-3 text sizes. You need to be able to distinguish between different levels of headings and emphasis, but you should leave subtle distinctions for visual design.