06/07/2022 Footer 1 RESPONSIVE DESIGN ROUNDTABLE WIREFRAMES VS. PROTOTYPES
Jan 27, 2015
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