Foundations of UI Design

Foundations of UI Design

Duration

2 Days

Course Fee

688 SGD

Apply Now

Foundations of UI Design

Course Description

In this UI Design with Figma course, participants will delve into key UI design principles, emphasising wireframing and low-fidelity prototyping techniques. Gain hands-on experience in utilising Figma’s collaborative design tools, enhancing your proficiency in creating intuitive user interfaces.

This course caters to both beginners and aspiring UI designers, offering practical insights to elevate design skills. You will discover efficient iteration processes and seamless communication methods with stakeholders.

The focus is on honing skills that contribute directly to the creation of impactful, user-centric designs. By the course’s end, you will possess a solid foundation in UI design with practical applications for fostering effective collaboration and producing aesthetically pleasing, user-friendly interfaces.

Apply Now

Target Audience

Aspiring and beginning UI Designers who want to solidify their proficiency in UI Design and Figma.

Business Development professionals who want to create simple wireframes that effectively communicate and develop unique product features.

Software developers, programmers, engineers who work closely with designers to implement digital product designs can benefit from understanding the designers’ workflow in order to deliver a more effective user experience and product.

Prerequisite

Trainees should be proficient in navigating the web and possess basic computer knowledge.

Learning Outcomes

By this end of this course, learner will be able to:

  • Explain fundamental UI design concepts and their application.
  • Interpret usability requirements and objectives for each part of a UI design
  • Navigate and utilise the interface of design software like Figma and essential tools proficiently.
  • Create detailed wireframes that effectively map out user interfaces.
  • Develop low-fidelity prototypes in Figma to visualise basic design concepts.
  • Implement interactive elements in prototypes to simulate user interaction.
  • Apply principles of design systems for consistent and scalable designs.
  • Incorporate user feedback into design iterations for improved usability.
  • Apply basic principles of responsive design in Figma.
  • Present wireframes and prototypes clearly to stakeholders or team members.
  • Utilise Figma’s collaboration features for team-based design projects.
  • Create and maintain an organised Figma file for efficient workflow.
  • Apply design thinking principles in the wireframing and prototyping process.
  • Demonstrate the ability to critique and iterate on designs based on user testing and feedback.

Course Highlights

Unlock the key to impactful UI design with our hands-on course on wireframing and prototyping. Empower yourself to create compelling user interfaces and low-fidelity prototypes efficiently. Enhance collaboration and communication within your team using Figma’s collaborative design tools.

Elevate your design skills to not only meet but exceed user expectations, ultimately contributing to business success. Ideal for beginners and aspiring UI designers, this course equips you to make a significant impact on both your professional growth and the success of the business you represent.

Course Objectives

In this course, we will focus on building skills in prototyping and UI design to help us build better products through iterative testing. You will learn:

  • Stages of development in UI Design
  • The ability to identify key user needs and usability requirements
  • How to turn usability requirements and objectives into UI Design
  • Proficiency in UI Design using Figma as a tool
  • How to develop effective prototypes that sharpen your product design
  • Heuristics and frameworks that improve UI Design effectiveness
  • How to develop a prototype test plan
  • To adapt user feedback into iterative product design
  • And much more

Course Outline

Day 1: UI Fundamentals & Wireframing Basics

  • Overview of UI vs. UX and key usability requirements
  • Discussion of usability objectives in UI
  • Examples of UI components and patterns
  • Workspace orientation: canvas, layers, and pages
  • Key tools: frames, shapes, text, and assets panel
  • Creating a Figma account and project setup
  • Practice basic tools in Figma by creating a simple UI layout
  • Understanding low-fidelity vs. high-fidelity wireframes
  • Mapping out information hierarchy and structure
  • Wireframing process in Figma
  • Creating Wireframes: Guided activity to create a basic wireframe with essential UI components.
  • Applying Design Systems: Introducing reusable components (buttons, cards, etc.) for consistent design

Day 2: Prototyping, Interaction, and Collaboration

  • Understanding the prototyping process and its role in design
  • Transitioning from wireframes to prototypes
  • Linking wireframes and creating navigation flows
  • Applying interactive elements for user simulation
  • Conducting quick usability tests and gathering user feedback
  • Iterating on designs based on findings
  • Build a basic, interactive low-fidelity prototype using wireframes.
  • Basics of responsive UI and device adaptation in Figma
  • Applying layout grids and responsive constraints in wireframes
  • Techniques for clear and compelling presentations
  • Preparing designs for stakeholder feedback
  • Real-time collaboration and comments
  • Organising files for team efficiency and project maintenance
  • Tips for constructive critique and incorporating user testing feedback
  • Iteration session: refine prototype based on group feedback

Why Learn at DesignX?

At DesignX, we are passionate in delivering quality training and want to see you succeed. Get expert advice, learning resources, and post-training support for up to 3 years.

Re-attend the Course Within 3 Years

3-year access to the courseware via our LMS

Post-Training Mentoring with Industry Experts

Certification

A Certificate of Achievement will be awarded upon successfully completing at least 75% of the course.

Trainers

Portrait of Louis Lam
Louis Lam
Louis is a user experience designer with over 8 years of experience across public and private sectors. He has served as a UX designer, developer, and consultant in places like Govtech, Hatch, several startups in Silicon Valley, and as a freelancer with varied clients like Reste Group, Katapult, and SIM. He is passionate about education and designing better experiences around schooling.

Frequently Asked Questions (FAQs)

This course is ideal for beginners and intermediate designers who want to learn UI design fundamentals and practical skills in wireframing and prototyping with Figma. It’s also suitable for product managers, developers, and other professionals who work closely with design teams.

No prior experience with Figma is necessary. This course covers Figma from the ground up, including the basic interface and essential tools. However, familiarity with UI/UX concepts is helpful but not required.

You’ll learn essential UI design principles, how to create wireframes and prototypes in Figma, add interactive elements, and collaborate with others on design projects. We’ll also cover responsive design basics, Figma’s collaboration tools, and best practices for presenting your work.

Yes, all Figma files you create during the course are yours to keep. You can export them or continue refining them after the course ends.

Figma is web-based, so you don’t need to download any software, though they also offer a desktop app. You will, however, need a Figma account, which is free and easy to set up.

Yes, participants who complete the two-day course will receive a certificate of completion. This can be useful for showcasing your skills to potential employers or clients.

Absolutely. Experienced Figma users will still benefit from our deep dive into wireframing, prototyping, design systems, and collaboration workflows. You may also gain new insights from the practical applications and interactive sessions.

A laptop, a stable internet connection, and a free Figma account. For an optimal experience, consider a secondary monitor or larger screen if possible, but it’s not required.

Yes, all participants will receive a set of resources including tutorial links, a reading list, and design templates to further support your learning after the course.

We’ll conduct mini usability tests, simulate feedback sessions, and discuss iterative design. You’ll practice revising wireframes and prototypes based on constructive feedback.

You’re welcome to use personal projects during certain activities, like prototyping and presentation exercises, to apply course concepts. However, we’ll also have structured assignments for hands-on practice.

Yes, we’ll cover both. Wireframes are basic layouts that focus on structure, while prototypes are more interactive, simulating user actions. By the end of the course, you’ll understand the purpose of each and how to use them effectively in Figma.