Lecture on the Design Process for Responsive Websites

Overview

• Completion of high-fidelity prototype for a mobile app focused on social good.
• Transition to designing a corresponding responsive website.

Design Process

• Review and Inform: Review app designs to inform the website design.
• Sequential Project Handling: Tackling one project at a time allows for deep user understanding and effective design system setup.
• Use Case: Important to understand the different use cases for the mobile app and the responsive website.

Case Study: American Red Cross

• Website Use Case: Educate and involve users.
• Mobile App Use Case: Drive blood donations with functionalities like scheduling and managing appointments.
• Brand Consistency: Similar look and feel across platforms, e.g., using red for buttons.

Designing a Responsive Website

• Defining Use Cases: Identify distinct use cases for the website compared to the mobile app.
• Choosing Screen Size: Design for the screen size most used by your target audience.
  • Mobile-first approach assumed for this course.

Information Architecture (IA)

• Definition: Organization and structuring of content to make it accessible and easy to navigate.
• Importance: Helps users find information and makes the product easy to use.
• Example: E-commerce website with poor IA leads to user frustration.

Creating a Sitemap

• **Steps to Create a Sitemap: **
  1. Research common pages on similar websites.
  2. Recall user information and needs.
  3. Decide on website structure (sequential, hierarchical, etc.).
  4. Create homepage and main categories.
  5. Add subcategories (child pages).

Sketching and Layouts

• Design Approach: Start with small screen sizes and progress to larger sizes.
• Use Case Consideration: Differentiate needs from mobile app design.
• Crazy Eights Exercise: Quick idea generation tool.
• Common Layouts:
  • Single column, multi-column, box, featured image, asymmetrical layouts.

Wireframes

• Types: Paper and digital.
• Process: Start with paper for initial ideas; transition to digital for refined designs.
• Scaling: Adapt wireframes for larger screens using grid paper or digital tools.

Prototyping

• Low-Fidelity Prototypes: Connect screens to test main user flows.
• Usability Study: Gather feedback to improve designs.
• High-Fidelity Prototypes: Add visual elements and refine interactions.

Usability Studies

• Purpose: Understand ease of task completion and gather user feedback.
• Steps: Plan, conduct, analyze, iterate.

Finalizing Designs

• Mockups and Hi-Fi Prototypes:
  • Include visual elements for final product feel.
  • Adapt design elements for different screen sizes.

Portfolio and Case Studies

• Portfolio Importance: Showcase design projects and processes.
• Case Study Components: Include project goals, challenges, user insights, and design artifacts.

Conclusion

• Completion of a dedicated mobile app and responsive website as a major milestone.
• Importance of portfolios for presenting work to recruiters and managers.