UI/UX Design Basics

UI/UX Design Basics Course

Code: 10034-GR

📘 Course Description

Learn the foundations of User Interface (UI) and User Experience (UX) design for web and mobile applications. This course introduces best design practices, essential tools, and practical techniques to create intuitive and engaging user interfaces.

🎯 Objectives

• Understand the core principles of UI/UX design.

• Create wireframes and transform them into interactive mockups.

• Conduct usability testing to refine design quality.

✅ What You Will Learn

• Key differences between UI and UX.

• Visual design basics: typography, color theory, and layout.

• Wireframing, prototyping, and user flows.

• Tools such as Figma and Adobe XD.

• Usability testing and design iterations.

👥 Target Audience

• Aspiring UI/UX designers.

• Graphic designers transitioning to digital design.

• Front-end developers seeking design fundamentals.

• Product designers and marketing professionals.

🛠️ Required Materials

• Laptop or desktop computer.

• Internet connection.

• Access to Figma (free version) or Adobe XD.

👩‍🏫 Instruction Methods

• Instructor-led sessions and live demos.

• Hands-on practice with real-world examples.

• Peer reviews and feedback.

• Project-based learning.

⏳ Time Frame

• 4 Weeks

• 3–4 hours per week

• Total Duration: 16 hours

🗂️ Course Format

• Online or In-Person Delivery.

• Interactive design labs.

• Weekly assignments and check-ins.

• Final project presentation.

📚 Detailed Course Outline

Week 1: UI/UX Fundamentals

• Definitions and differences between UI and UX.

• Good design principles: simplicity, consistency, hierarchy.

• Visual design basics: typography, colors, spacing.

Week 2: Design Tools & Wireframing

• Introduction to Figma and Adobe XD.

• Creating low-fidelity wireframes.

• Transitioning wireframes into mid/high-fidelity mockups.

Week 3: Application & Web Interface Design

• Designing mobile app interfaces.

• Designing responsive and interactive websites.

• Prototyping for interactive previews.

Week 4: User Testing & Handoff

• Usability testing methods and tools.

• Analyzing test feedback and iterating designs.

• Handoff to developers using design specs and assets.

🎓 Learning Outcomes

By completing this course, participants will be able to:

• Build intuitive, accessible UI/UX interfaces.

• Effectively use Figma or Adobe XD.

• Test and validate designs through user feedback.

• Deliver a polished user interface for a mobile app or website.

🌟 Final Project

Design a complete user interface for a mobile application or website, including:

• Wireframes

• Interactive prototype

• Usability testing report

• Final mockups ready for development