Responsive Design Roundtable: Wireframes vs. Prototypes
-
Upload
lacey-kruger -
Category
Technology
-
view
114 -
download
1
description
Transcript of Responsive Design Roundtable: Wireframes vs. Prototypes
![Page 1: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/1.jpg)
04/10/2023 Footer 1
RESPONSIVE DESIGN ROUNDTABLEWIREFRAMES VS . PROTOTYPES
![Page 2: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/3.jpg)
![Page 4: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/5.jpg)
![Page 6: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/6.jpg)
![Page 7: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Design Roundtable: Wireframes vs. Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c727d24a7959c2328b456d/html5/thumbnails/8.jpg)
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