Designing a website
Introduced| English | Meaning |
|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | information architecture |
| wireframe/ˈwaɪəfreɪm/ | A simplified plan of a page or interface showing its structure and placement of elements before detailed styling. |
| visual hierarchy/ˈvɪʒuːəl ˈhaɪərɑːki/ | The arrangement of visual elements to show their relative importance and guide attention. |
| whitespace/ˈwaɪtspeɪs/ | whitespace |
A new member cannot find the meeting place
- A school club homepage shows a large photo, but the room and meeting time are hidden. The visitor leaves without knowing how to join.
- Start with the audience and a task you can observe: “Find this week's meeting time and room.” Ask a classmate to try it before deciding the design works.
Which task gives a participant an observable goal?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Finding specific information gives a result you can observe and check.
Write an observable task for a new club member visiting the website.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Example: “Find where the robotics club meets this Thursday.”
Give information a useful home
- Information architecture 信息架构 groups content and connects pages. List the information a visitor needs, then choose clear page and link names.
- A short route helps, but there is no universal three-click rule. A clear longer path can be easier than a short path with confusing labels.
Sketch a structure you can test
- A wireframe 线框图 is a simple page sketch. Use boxes for layout, but include realistic labels and key content so a partner can understand the choices.
- A template can save time if it fits the tasks. Check its navigation, readability and content space rather than accepting every section it supplies.
For a new member, put “Thursday, 4 pm, room 12” near a clearly labelled “How to join” link. A returning member may need the current project instead. Test both tasks rather than assuming one homepage suits everyone.
What should a useful early wireframe make easy to discuss?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
A wireframe tests organisation; realistic labels help a participant understand the proposed route.
Show what matters first
- Visual hierarchy 视觉层次 uses headings, size, spacing and contrast to show relationships. Whitespace 留白 separates groups so they are easier to scan.
- Use a readable heading for each section and a clear label for each action. Colour should support the structure, not be the only sign that something is clickable.
Giving every item equal strong emphasis always creates a clear hierarchy.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Hierarchy communicates priority and relationships. Equal emphasis can make the important action hard to find.
Match the design tool to its main purpose.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
These tools operate at different levels: route, page layout and visual grouping.
Test the task, not just the appearance
- Give a partner the task without explaining where to click. Record where they hesitate, which label they choose and whether they find the right answer.
- Change the confusing part and repeat the task. A task test can reveal a problem that a screenshot does not show.
A good-looking page is not proof of a usable route. Do not invent a user quote or call your own opinion user research. Keep actual observations separate from your interpretation.
Which belong in a task-test record? Select all that apply.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Record what happened. Interpretation can follow, but fictional observations must not be presented as research.
Turn findings into a design decision
- Create a page list, one wireframe and a short record of two task tests. Explain one revision using what the participants actually did.
- Keep the first version and the revised version so your reasoning is visible. Check the task brief for any required design evidence.
Audience → observable task → content structure → wireframe → task test → revision. Templates and click counts are tools, not guarantees.
Arrange the stages of this first design-and-test cycle.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
The task informs the sketch, the sketch supports testing, and the observations inform revision. Later iterations may revisit earlier decisions.
A clear four-click route works in testing; a confusing two-click route does not. What should you conclude?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Click count is one observation, not a universal verdict on usability.