Wireframing for Responsive Websites

Introduction

• Empathize with users and define problems.
• Ideate on solutions and bring ideas to life through wireframes.
• Focus on responsive website design, making sure layouts adjust based on device and screen size.

Basics of Wireframing

• Responsive Websites: Different layouts for different devices (desktop vs mobile).
• Common Website Layouts:
  • Single Column Layouts: Logical order, often used on mobile.
  • Multi-column Layouts: Multiple columns, used on desktops with focal points.
  • Box Layouts: Organize content in various sized boxes, used in e-commerce.
  • Featured Image Layouts: Focus on one large image or video.
  • Asymmetrical Layouts: Imbalanced design to emphasize certain aspects.
  • Grid of Cards: Series of uniform cards for content-heavy sites.
  • Tiered Layer Cake Layout: Stacked layers with different numbers of columns.

Designing Wireframes

• Paper Wireframes: Start with sketches on paper for quick iterations.

  • Represent text with lines, images with squares and Xs.
  • Explore multiple wireframes for the same screen.
  • Example: Library website homepage with navigation, hero image, book covers.

• Digital Wireframes: Transition to tools like Adobe XD.

  • Start with layer cake structure for desktop homepages.
  • Use features like repeat grid for efficient duplication.
  • Create digital wireframes for different screen sizes, emphasizing responsive design.

Responsive Design

• Responsive Web Design: Adjusts layout based on device to improve usability.

  • Importance: Enhances user experience, drives mobile traffic, saves time/money.
  • Example: Vietnamese recipe site with different layouts on desktop vs mobile.

• Components in Responsive Design:

  • Hamburger Menus: Icon-based navigation for mobile.
  • Cards: Organized content, easy scanning.
  • Carousels: Scrollable image feeds to fit more content above the fold.

Accessibility and Refinement

• Accessibility Features:

  • Headings: Improve navigation for screen readers.
  • Landmarks: Map regions for assistive tech.
  • Initial Focus: Attract attention to primary tasks.

• Gestalt Principles in Wireframes:

  • Similarity: Similar looking elements perceived to have the same function.
  • Proximity: Elements close together seem related.
  • Common Region: Elements within a border are grouped together.

Conclusion

• Explore different layouts and design principles.
• Create wireframes for all important pages at various screen sizes.
• Apply accessibility features and gestalt principles for effective design.
• Transition from paper to digital wireframes ensuring a good user experience across devices.