Designing a website
| English | Chinese | Pinyin |
|---|---|---|
| wireframe | 线框图 | xiàn kuāng tú |
| information architecture | 信息架构 | xìn xī jià gòu |
| visual hierarchy | 视觉层次 | shì jué céng cì |
| whitespace | 留白 | liú bái |
Argue about the structure before you write any code
- Every student site that has to be rebuilt was designed in the browser, one page at a time.
- A wireframe 线框图 shows structure without colour or content, which is the only way to argue about structure.
- Grey boxes are a feature, not a limitation: nobody argues about a font when there is no font.
Why is a wireframe drawn without colour or real content?
Nobody argues about a font when there is no font. That is the whole point of grey boxes.
Information architecture
- Information architecture 信息架构 is what goes where: the pages, and the path a visitor takes between them.
- Write down the user's task first. "Find the opening hours" is a task; "learn about us" is not.
- Every page should be reachable in about three clicks, and no page should exist that no task needs.
Which of these is a user task you can design a page around?
A task has a specific answer you can put on the page. The others cannot be finished or failed.
Write one user task for a school club website, specific enough to design a page around.
Example: "A new student wants to find out when and where the club meets this week."
Visual hierarchy
- Visual hierarchy 视觉层次 tells the eye what matters, through size, weight, spacing and contrast.
- Decoration is not hierarchy. A page where everything is emphasised has no hierarchy at all.
- Whitespace 留白 is the cheapest design tool you have, and the one students use least.
A page where every element is emphasised has strong visual hierarchy.
If everything is emphasised, nothing is. Hierarchy is created by difference.
Two homepage plans for a school club.
Designed in the browser: a banner, a welcome paragraph, some photos, and the meeting time somewhere below the fold.
Designed from the task: the visitor wants to know when and where to turn up, so that goes at the top in large type, with everything else beneath it.
Same content, same effort. The second answers the question a visitor actually arrived with, and that is what the design mark is for.
Put the design steps in the order that avoids a rebuild.
Each step constrains the next. Choosing the look first is what forces the content to bend.
Design for the audience, and say who they are before you choose anything. A club site for new members and a portfolio for employers make opposite choices about density, tone and navigation, and neither is right in the abstract.
Do not start from a template you like the look of. A template encodes someone else's information architecture, and bending your content into it produces exactly the pages that have to be redesigned in GAC017 when the database arrives.