Wireframing and UI Design

Warm up: Webpage content audit

Pick a website that you like, take some time to sketch out the content associated with each section. Note the intention, goals, and routes the user has access to at each section.

This can be done digitally or by hand, basically it’s a rough map of all the content and the objectives that the content supports.

Finally, note any particular UI elements that you think do a particularly good or bad job at supporting the user objectives.

our goal is to establish the information hierarchy

Wireframes and Web Design

Key Takeaways & Final Notes

• Wireframes are used to plan, debug, analyze designs
• Wireframes are especially useful for blocking out how a site’s information hierarchy will be visually organized
• Use wireframing to prevent bad UI/UX choices down the road
• Low Fidelity Wireframes contain little to no detail
• Medium Fidelity Wireframes contain some detail depending on the stage/situation of design
• High Fidelity Wireframes/Mockups look close to the finished product
• Prototypes are wireframes/mockups with actual interactive behaviour

Sketch a few wireframes: 20*min

First do a wireframe of the site that you analyzed earlier today. Then brainstorm a list of websites that you would be intersted in building (topics, types… whatever jumps out at you).

Elements to Use

• Images: Squares with X in it
• Icons: Circle or square with an X in it
• Text: squiggles
• Headings: Functional or Semantic (Go with what makes the most sense)
• Cards, buttons, lists: squares, rounded squares, dots & numbers

Tools to Use

• Tablet, phone, or pen and paper.

Steps

1. Sketch out the webpage that you did a content audit of earlier
2. Using your tool of choice, sketch a wireframe of the entire page
3. Label shapes so it’s clear what everything represents
4. Switch gears and think of a list of sites that you want to build

Wireflows: The Processual Wireframe

A wireflow is like a flowchart version of a wireframe. It’s focused on capturing the process and task flow of particular tasks on a website.

We won’t be going into too much detail on wireflows, however we are going to outline wireflows based on one of the wireframes that we’ve sketched today.

How to create a wireflow

1. Define the user objective (1 sentence statement on what the user would be trying to do)
2. Draw the start point and what page the user is on
   • If there are multiple potential start points, you should write this down in a note
   • Generally use a square shape for the pages and stages
3. Add steps based on the steps that exist
   • diamond shapes represent decisions/questions that the user is faced with
4. Continue documenting the possible options as the UI presents them until you reach the goal

Look at at the Wireflow in the introduction of this article for an example

Wireflow Activity

Using any of the wireframes that you’ve drafted and sketched today, use figjam to create a wireflow. Alternatively, do a wireflow of a website that you like. Think of this as a follow up to the links and nodes mental model exercises from day 2.

1. Pick a wireframe, and copy into into the figjam file as your point of reference
2. Pick a task (that can be accomplished with the home page as the start point) and outline that title so it’s clear and easy to see
3. Step by step, work through everything needed to satisfy the userflow
4. Intentionally make wrong decisions, find out all aspects of the flow
5. Document other start points that exist (if they do)

Activity: Bringing it all together

Having done a content audit, a few wireframe sketches, and a wireflow, wireframe for the same content as before but come up with a completely different layout and order.

• ie: if you used a 3 card layout to display a couple of features, what is a different layout that you could use to present roughly the same content (in that case an image, at last 1 action, a title, and a description).
• ie: In your nav bar, try re-organizing the content, maybe put nav items on the left