Skip to main content

✏️ Intro to UI/UX Design

Welcome to Intro to UI/UX, a self-paced course designed to help you master the fundamentals of creating user-friendly, visually engaging digital products.

This course blends theory, practice, and reflection so you not only learn what UI/UX is, but also how to apply it in real projects.

🎯 Learning Objectives​

By the end of this course, you will be able to:

  • Explain the difference between UI (User Interface) and UX (User Experience).
  • Identify the principles of good design and usability.
  • Use simple design tools to create wireframes and prototypes.
  • Critically evaluate a digital product for UI/UX strengths and weaknesses.

📚 Module 1: What is UI/UX?​

  • UI (User Interface): The look and feel — colors, typography, buttons, and layouts.
  • UX (User Experience): The journey — how intuitive, useful, and satisfying the product feels.

👉 Activity: Pick your favorite app and ask:

  • How easy is it to navigate?
  • Do you enjoy the look and feel?
  • What frustrates you?

Take 2–3 notes — we’ll come back to this later.

🧩 Module 2: Core Principles of Design​

The Five Pillars of UI/UX:

  1. Clarity – Content is easy to read and understand.
  2. Consistency – Design elements behave predictably.
  3. Feedback – The system responds to user actions.
  4. Efficiency – Tasks take minimal effort to complete.
  5. Delight – A touch of personality makes the experience enjoyable.

👉 Exercise: Look at a website of your choice. Which of the 5 pillars does it do well? Which is weakest?

✏️ Module 3: Wireframing Basics​

Wireframing is sketching the structure of a digital product without worrying about colors or styling.

  • Start with pen and paper or a free tool (Figma, Balsamiq, Excalidraw).
  • Focus on layouts and flows rather than polished design.

👉 Mini Project: Wireframe a simple login screen with:

  • A logo
  • Username + Password fields
  • Login button
  • “Forgot password?” link

🧪 Module 4: Prototyping & Testing​

A prototype is an interactive model of your design. It helps you test before you build.

  • Use tools like Figma or InVision.
  • Share your prototype with 2–3 people and ask them to complete a task.

👉 Task: Create a clickable prototype of your login screen and ask someone:
“Can you log in?”

  • Observe where they hesitate.
  • Note down feedback.

🌟 Final Project: Redesign an Everyday Experience​

Choose a simple, everyday interaction (e.g., ordering food online, signing up for a newsletter, booking a ticket).

  1. Current State: Capture screenshots and note pain points.
  2. Wireframe: Sketch your improved flow.
  3. Prototype: Build a simple clickable demo.
  4. Reflect: What did you improve? What still needs work?

📝 Wrap-Up & Next Steps​

Congratulations — you’ve completed Intro to UI/UX! 🎉

You now have:

  • A strong foundation in UI/UX concepts.
  • Experience with wireframing and prototyping.
  • A final project you can showcase.

👉 Next, deepen your skills with:

💡 Remember: Good design is not about being perfect — it’s about making things clearer, simpler, and more human.