Lecture on Information Architecture and Wireframing

Information Architecture (IA)

• Definition: Organizes content to help users understand product navigation and location of information.
• Purpose: Ensures users find a product easy to use by designing intuitive navigation.
  • Informed by user research and market analysis.
  • Knowing users, their goals, and behaviors is key.
• Structure Example:
  • Homepage at the top, linked to different sections (e.g., products, cart, user account).
  • Subpages linked under each section (e.g., cart includes order summary, shipping, payment).
• Importance of IA:
  • Organizes and defines the structure of apps/sites.
  • Provides high-level product views.
  • Helps stakeholders review and engineers organize data.
  • Aids in product flexibility and growth.

Wireframing Basics

• Purpose: Establish basic page structure and element function before adding visual elements.
  • Focuses on structure and function over color/fonts.
• Benefits of Paper Wireframes:
  • Fastest way to capture ideas; inexpensive.
  • Allows exploration of multiple ideas.
• Process:
  • Write a list of needed information elements.
  • Draw multiple versions (at least five) to explore different structures.
  • Refine wireframes by focusing on best ideas.
• Digital Transition:
  • Ensure paper wireframe is complete with feedback before going digital.
  • Use actual text for key areas; placeholder text for bulk copy.
  • Avoid expressive content like color/images until prototyping stage.

Figma for Digital Wireframing

• Introduction to Figma:
  • A collaborative, cloud-based vector design tool.
  • Allows for wireframing, prototyping, and remote collaboration.
• Using Figma:
  • Create teams, invite members, and collaborate on files.
  • Frames are containers for designs, using shapes like rectangles and ellipses.
  • Align and resize tools help create structured wireframes.
• Components and Libraries:
  • Components are reusable design blocks.
  • Libraries hold components for consistent designs.

Gestalt Principles in Design

• Gestalt Principles: Help organize content visually for intuitive user experience.
  • Similarity: Similar elements are perceived to have the same function.
  • Proximity: Elements close together appear related.
  • Common Region: Elements within the same area are grouped together.
• Application: Use these principles to make designs intuitive and user-friendly.

Final Notes

• Transition from paper to digital wireframes should focus on refining structure.
• Save paper wireframes for portfolio use.
• Figma provides tools for creating, sharing, and refining digital designs.