Logical content design
A logical content order is the key to webpage design.
Content is more important to users than presentation. It pays to begin with the content and how this organises on the page.
Sort out the logical content order and you will have a top site.
Sort out the content order first
The main webpage design task is to set out the content order for the page with the most important content first.
The critical design choice for a webpage is whether one piece of content comes before/after another piece. This works for individual pages and templates. This is partly an editorial decision.
- Marshall a list of page content.
- Put this in the order of importance for the page - most valuable item first. Identify headings. It may be helpful to identify other basic elements (text, lists, images, forms, data tables) and the function of particular sections (eg summary paragraph, selection of links to related pages).
- Identify or add in navigation
Page v site
‘Hang on! I want whole website not a single page’
True. The basic unit of currenct on the web is a single page. A logical content order for different kinds of pages needs to be the main meat of a website design. Otherwise, your content may end up like the two ugly sisters in Cinderella, trying to fit into the wrong size shoe to win the prince's heart…
Every supermodel has a skeleton.
Once you have content in a logical order you can style it into an all singing, all dancing version. Content will have a meaningful shape however it is served up it . A strong view on content order will help a designer:
- Work up a presentation that genuinely reflects the website's purpose
- Concentrate on technical and touch-feely aspects of presenting your unique material.
- Work up page templates for your site
- Provide a meaningful content management function, because s/he will know which page elements need managing
Accessibility point
Putting important content first will deal with many accessibility issues in one fell swoop and avoid countless others generated by beginning with the visuals.