Module 4 — Step 3

Site Wireframes

What is Wireframing and Why Do It?

Some Key Points

  • Purpose of Wireframing: Wireframing is a basic visual representation of a webpage’s layout, focusing on the arrangement of elements rather than design details. It ensures that the purpose of the site is achieved and helps in building sites faster.

  • Benefits of Wireframing: It aids in establishing the right hierarchy of information on a site, aligning with the desired user actions. This preliminary step prevents getting bogged down in design specifics too early.

  • F-Pattern of User Attention: Users typically navigate websites in an F-shaped pattern—first scanning horizontally, then moving down the page and scanning again, but less extensively each time. Understanding this pattern helps in placing important elements effectively.

  • Wireframing Techniques: Using pen and paper allows focus on essential elements, user interactions, and site structure without being distracted by design details like text or colour. Symbols and simple drawings represent different page elements.

  • Adapting for Audience: Tailor wireframes based on the target audience. For older users, use larger text and fewer images; for younger users, incorporate more elements and interactivity. This approach ensures the site meets the needs of its users.