04/10/2023 Footer 1

RESPONSIVE DESIGN ROUNDTABLEWIREFRAMES VS . PROTOTYPES

04/10/2023 Footer 2

1. Design Discovery

2. User Research

3. Content Strategy

4. Information Architecture Wireframes

5. Visual Design

6. Implementation

DESIGN PROCESS

04/10/2023 Footer 4

• To implement a responsive site, developers need to know how the page should look at 5 different breakpoints:

1. Desktop (960px or larger)

2. Tablet Landscape (960px - typically use same layout as Desktop)

3. Tablet Portrait (768px)

4. Phone Landscape (480px)

5. Phone Portrait (320px)

DESIGNING FOR RESPONSIVE BREAKPOINTS

04/10/2023 Footer 7

PROTOTYPE PROS

• Shows how the site will work

• Less hours required for someone with good HTML skills

• Code could technically be picked up by WebDev

• Default behaviors for smaller screens are built-in to the code but are also easy to change/override

• Iterations are super fast since you can just FTP new code

• Learning curve for HTML coding

• Doesn’t lend itself to a mobile-first approach

• Limitations in how to do something in code may limit creativity

• Having default behaviors for smaller screens built-in to the code may limit creativity

AND CONS

04/10/2023 Footer 8

RESPONSIVE WIREFRAME GOTCHAS

• For large feature images/carousels, always plan for what happens on smaller screens, especially with text overlays and calls-to-action

• For sites that include a login feature, always plan for:- logged out state (aka. initial page load)- how a person will log in (go to a new page or how form fields should display)- logged in state (aka. Welcome XXX)- logged in actions (My fundraiser/events/other, Edit my Profile, Log Out)

• Account for how Social Sharing will adapt at different breakpoints

• Design any section navigation needed beyond the first level

• Plan an alternative for any tappable maps or other interactive features