Creating low-fidelity wireframes

Great! Let’s dive into how to create low-fidelity wireframes, especially as a beginner learning UI/UX design.

---

What Are Low-Fidelity Wireframes?

Low-fidelity wireframes are basic, simplified representations of a design layout. They’re like digital sketches — no colors, no images, no fancy fonts — just structure.

Their goal is to:

• Show layout and placement of elements
• Help think through functionality
• Get feedback quickly
• Focus on “what goes where”, not how it looks

---

When to Use Low-Fidelity Wireframes

• Early in the design process (during ideation)
• When defining user flows and content layout
• To discuss ideas with clients or teams before investing in visuals
• When testing early usability

---

Tools You Can Use

• Figma (free, browser-based, highly recommended)
• Balsamiq (great for “sketchy” low-fi style)
• Pen & paper (fastest for early thoughts)
• Adobe XD (if you’re already using it)

---

Step-by-Step Guide: Creating a Low-Fidelity Wireframe in Figma

Step 1: Define the Screen You’re Designing

Ask: Is it a login screen, homepage, signup form, dashboard, or product page?

Example: Let’s design a simple course landing page.

---

Step 2: Open Figma & Set Up Your Frame

1. Go to figma.com
2. Click “+ Design File”
3. Use the Frame Tool (F) to select a device size (e.g., Desktop or iPhone)

---

Step 3: Use Basic Shapes to Block Layout

• Rectangle Tool (R) → for headers, buttons, images
• Line Tool (L) → for dividers or text lines
• Text Tool (T) → add labels like “Logo”, “Search”, “CTA Button”

Example structure:

[LOGO]    [MENU]     [LOGIN]
--------------------------------
[HEADLINE: Learn UI/UX Fast!]
[SUBTEXT: Enroll today...]
[CTA BUTTON: Get Started]

[SECTION: Key Features]
[Feature 1] [Feature 2] [Feature 3]

[TESTIMONIALS SECTION]

[FOOTER LINKS]

---

Step 4: Keep It Greyscale

• Stick to black, white, and shades of grey
• Avoid colors, gradients, or real images
• Use placeholder shapes (boxes for images, lines for text)

---

Step 5: Annotate If Needed

• Add comments like:
  • “Image goes here”
  • “Main CTA button”
  • “User will scroll here”

This helps explain your thought process when sharing.

---

Wireframe Example: Course Page (Low-Fidelity)

---------------------------------------
| LOGO  | HOME | COURSES | SIGN IN    |
---------------------------------------
|     [HERO SECTION - Image Box]      |
|     Headline: "Master UI/UX Fast"  |
|     Subtext: "100% Online Course"  |
|     [Sign Up Button] [Watch Demo]  |
---------------------------------------
|    [Box] Feature 1  [Box] Feature 2 |
|    [Box] Feature 3  [Box] Feature 4 |
---------------------------------------
|    Testimonials (Text Placeholder) |
---------------------------------------
|        [FOOTER LINKS HERE]         |
---------------------------------------

---

Tips for Beginners

• Think in blocks or sections (e.g., header, body, footer)
• Use consistent spacing and alignment
• Label everything clearly
• Don’t worry about details — focus on layout
• Start with mobile-first or desktop-first, based on your audience

---

What Comes Next?

Once your low-fidelity wireframe is done, you can:

• Get feedback from users or teammates
• Move to mid- or high-fidelity wireframes
• Start turning it into a prototype

---

NEXT LESSON – LESSON 5. UI Design Principles