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