GrC 339
Web Design + Production

Week 2 • UX Laws, Mockups, Sprints

Animations via Giphy

This Week

• Wireframes + Sitemap (assignment submission)
• UX Laws
• Design Sprints
• Design Components
• Wireframes → Mockups

Aesthetic Usability

Users often perceive aesthetically pleasing design as design that’s more usable.

1

Photo: Clay Banks

Doherty Threshold

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

2

Photo: Adrien Delforge

Fitt's Law

The time to acquire a target is a function of the distance to and size of the target.

3

Photo: Becca Tapert

Hick's Law

The time it takes to make a decision increases with the number and complexity of choices.

4

Photo: Iwona Castiello d'Antonio

Jacob's Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

5

Photo: Bram Van Oost

Law of Common Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

6

Photo: M. W

Law of Prägnanz

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

7

Law of Proximity

Objects that are near, or proximate to each other, tend to be grouped together.

8

Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

9

Photo: Sneaky Elbow

Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

10

Mockups

Mockups aren't...

• Interactive (prototypes are)
• Final content (text/images)
• Required for all pages

Mockups do...

• Apply a color scheme
• Show intended images
• Implement typography and layout
• Create a good starting point to code
• Provide an opportunity for feedback

Best Practices

• Use a strong grid
• 1-2 typefaces (standard or Google Fonts)
• Design components, not pages
• Avoid overlays
• Avoid circular or absolute layouts
• No images of text

Difficult Layout Example

Mobile or Desktop First?

• It really depends, but justify it
• Fluid layout?
• Can you envision both?
• Odd vs even columns

Lean Methodology

Design Sprints

A design sprint is a structured, time-bound, iterative approach to solving a challenge.
 

Developed at Google in 2010, it required all team members and decision makers to work together for 5 entire days and release a prototype for testing.

General Structure

1. Define the opportunity (offering/customers/etc)
2. Determine as many solutions as possible (wireframe)
3. Select the best solution and storyboard (mockup)
4. Make a prototype
5. Code

Every step: collect feedback from stakeholders

Balsamiq Demo

+ Wireframe iteration