Part 3: High-fidelity Wireframes

Introduction

This week, your task is to create high-fidelity wireframes for your UI. You'll achieve this by applying your design system to the wireframes, ensuring a seamless translation of your conceptual designs into detailed, realistic prototypes.

Instructions

1. Open your wireframe file and create a new Page named "Part 3 - High-fidelity Wireframes."
2. Optionally, copy your initial wireframes to this new page as a reference.
3. Initialize your desktop frame, choosing either Columns or Auto-Layout for structure.
4. Begin applying styles and components from your design system to the wireframes.
5. Incorporate real photos and copy (text) to bring authenticity to your High-fidelity Wireframes.

Things to Remember

• Design System Compliance: Utilize the components and guidelines outlined in your design system, including:
  • Typography
  • Colors
  • Buttons
• Interactive Component Creation: Design and create components for all interactive elements. For instance, if your project requires various types of buttons, ensure each type is represented in your design system and used in your wireframes.
• Realism: Your high-fidelity wireframes or visual prototypes should mimic a real website's appearance and feel as closely as possible.
• Static Prototypes: For this phase, you will focus solely on the visual aspects; interactive prototyping is not required.

Example

Your wireframes should closely resemble a fully designed website.

Evaluation Criteria

Basic

• [ ] The wireframe includes a new page named "Part 3 - High-fidelity Wireframes."
• [ ] Design System Library has been linked to Wireframes file.
• [ ] The high-fidelity wireframe convincingly resembles a real, live website.

Structuring

• [ ] Base frames use with Column Guides or Auto-Layout for structuring.
• [ ] There is "consistent" spacing through out the the interface.

Implementation

• [ ] The design adheres to best practices in terms of typography, colors, and button styling.
• [ ] Design components and styles from the design system are correctly applied.
• [ ] The wireframe utilizes real photos and text, enhancing its realism.

Submission and Documentation

• [ ] Figma project link is provided.
• [ ] The Websites's chosen theme is described.
• [ ] A list of all group members is included.

How to Submit

Your submission will be through Figma's sharing feature. On Brightspace in the submission comment, please include:

• The Figma project link
• Your websites's chosen theme
• The names of all team members

Make sure your professor has been added to the Figma Project with editing permissions.