For Responsive Designs, wireframes take on a whole new level of complexity. Is it better to create static wireframes for each screen width or to create an HTML prototype that demonstrates the responsive behaviors? Slide 2: The overall Design Process really doesn’t change for Responsive Design. Each phase has new considerations though: - During Design Discovery, you want to confirm device compatibility with the stakeholders and begin discussing content prioritization for smaller screens - In User Research, you may want to consider how user needs may differ when accessing the site from various devices - Content Prioritization becomes even more important for Responsive - The IA phase is where the rubber meets the road for Responsive since your wireframes need to account for various screen sizes - Same goes for Visual Design and of course, Implementation changes quite a bit! Slide 3: Example of traditional, desktop design process. Research-based wireframe is created, then designed, then implemented. Slide 4: The work multiplies for Responsive sites Slide 5: Example of static wireframes designed for a Responsive site. This is a homepage where the IA created 4 distinct wireframes to represent each breakpoint. Slide 6: Example of an HTML wireframe prototype designed for a Responsive site. This is a homepage where the IA created 1 wireframe in HTML using the Foundation responsive framework. Slide 7: Creating wireframes in HTML has some pros and cons Biggest pros = timesaver and ability to experience the site in-context (for clients, developers and usability test participants) Biggest cons = using a framework doesn’t work well for a mobile-first approach to design and creativity can be stifled Slide 8: Some lessons learned in responsive wireframing, for both static and HTML wireframes.