Welcome

0% COMPLETE
1.0 Welcome (0:59) 1.1 Building credibility from day one

1.1 Building credibility from day one

(4:54)

1.2 Join the community (1:32)

1.3 Create accounts (1:45)

1.4 Download and import files

1.5 Course walkthrough (3:47)

Overview

2.0 Welcome to Overview (0:32)

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

Lesson Summary
2.3 Project overview (13:34)
At the Designership, the main focus is on helping individuals reach their career goals whether they
are aiming to secure their first full-time role, advance into senior positions, or win freelance projects.

Sitemaps Showing continuous growth and upskilling is essential for building credibility and attracting potential
employers, recruiters, and clients. Many Designership students actively communicate their learning
3.0 Welcome to Sitemaps (0:26)
journey to their networks, making themselves more desirable in the industry.

3.1 What is a sitemap (5:32)

Employers prefer ambitious, passionate, self-driven designers who are always upskilling.

Sharing your learning journey can set you apart in a competitive industry.

Completing activities or challenges in your course can help you showcase your dedication to
personal growth.

Providing updates on platforms like LinkedIn can be a great way to inform your network about
your professional development.

Specific guidance on how to share your progress includes creating a post on LinkedIn about your
new courses or skills learnt. The step-by-step instructions include preparing a personalized
announcement, adding a designed student card, and sharing it on your LinkedIn profile. This
transparent communication about your learning endeavors is beneficial for your professional
advancement and future opportunities.
 (4:54)

0% COMPLETE
1.2 Join the community (1:32) 1.3 Create accounts

1.3 Create accounts (1:45)

1.4 Download and import files

1.5 Course walkthrough (3:47)

Overview

2.0 Welcome to Overview (0:32)

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps
Lesson Summary
3.0 Welcome to Sitemaps (0:26)
To complete the course, you will need several different accounts for various tools:

3.1 What is a sitemap (5:32)

It is recommended to use the same email address for all these accounts and log them into a
dedicated account tracking page. Remember to create the following accounts:
3.2 How to create a sitemap
(12:07)
Figma and FigJam
3.3 Create your sitemap (25:21)
Whimsical

Webflow

Maze.co

Zoom

Google Sheets

In order to keep track of the different accounts, you can store all login details in one place. You can
copy and paste the email you use for all the accounts into a designated section for easy reference.
After setting up the accounts, make sure to access Module 1 Lesson 3 to proceed further toward
your learning journey.
 0% COMPLETE
1.3 Create accounts (1:45) 1.4 Download and import files

1.4 Download and import files

1.5 Course walkthrough (3:47)

Overview

2.0 Welcome to Overview (0:32)

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

Download
3.2 How to create a sitemap
(12:07) UX:UI Design Course Files 1.3.zip

3.3 Create your sitemap (25:21)

Lesson Summary
To get started with the course, ensure you import the 11 Figma files into a New Project within your
Figma account. The zip file includes:

10 exercise files, each corresponding to a module.

1 solutions file for reference on completed UI designs.

Remember:

Do not open the solutions file until you finish the project to maintain your learning journey.

You can download all the necessary files for the project from the provided link.
 0% COMPLETE
1.4 Download and import files 1.5 Course walkthrough

1.5 Course walkthrough (3:47)

Overview

2.0 Welcome to Overview (0:32)

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

Lesson Summary
3.2 How to create a sitemap
After setting up all your accounts and onboarding materials, you are about to embark on a
(12:07)
comprehensive course divided into 10 modules:
3.3 Create your sitemap (25:21)
Module 1: Welcome Stage - Focuses on onboarding, setting up logins, and making
announcements about upskilling.
Userflows
Module 2: Overview - Aims to understand the complete project from the perspective of a UX
designer beyond just pixel pushing.

Module 3: Creating a Site Map - Develops a detailed understanding of the project and
constructs the site map for the application.

Module 4: User Flows - Builds upon the site map to identify interactions between different
pages.

Module 5: Wireframes - Visualizes the layout, information architecture, and user flow through
pages.

Module 6: Lean Branding Workshop - Guides on quickly building a brand direction regardless
of design background.

Module 7: Foundational Styles - Helps set up primary brand colors and visual direction for the
project.

Module 8: Technical Concepts - Teaches essential technical considerations for designing digital
interfaces.

Module 9: UI Designs - Focuses on fleshing out the user interface designs.

Module 10: Test case Creation - Involves testing your designs with real users for feedback and
iteration.

By completing this course, you will gain a comprehensive understanding of the design process from
briefing to testing, ensuring you can execute designs effectively.
 0% COMPLETE

Overview 2.0 Welcome to Overview

2.0 Welcome to Overview (0:32)

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Lesson Summary
Welcome to the overview module. This module is designed to provide you with contextual
Userflows
knowledge about the practical project that will be the focus of the entire course. The key points we
4.0 Welcome to Userflows (0:27) will cover include:

4.1 What is a userflow (4:12) Exploring the differences between UX and UI skill sets.

4.2 How to create a userflow

Understanding the brief of the project.

Discussing the goals we aim to achieve by the end of the course.

By delving into these topics, we will build a solid foundation for the work we will be doing
throughout the course. Let's begin this journey together.

Complete and Continue

Overview

0% COMPLETE
2.0 Welcome to Overview (0:32) 2.1 Differences between UI & UX

2.1 Differences between UI & UX

(2:38)

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Userflows
Lesson Summary
4.0 Welcome to Userflows (0:27) In this lesson, you will learn the differences between UX (User Experience) and UI (User Interface)
design, which are crucial for creating effective digital products.
4.1 What is a userflow (4:12)
Here's a quick summary:
4.2 How to create a userflow
(26:09) UI Design is similar to the interior design of a home, focusing on the appearance and layout. It

involves using colors, typography, and visual elements to enhance the aesthetic appeal of a
digital interface.

UX Design deals with how the product functions and interacts with users, aiming to ensure a
comfortable and effective user experience. This includes understanding user needs, creating
functional designs, and testing these designs to improve usability.

Specifically, in UX and UI roles, typically held by more senior designers, you'll explore several key
aspects:

User Research : Understanding user behaviors, needs, and motivations.

Product Strategy : Developing approaches that fulfill both user needs and business goals.

Information Architecture and User Flows : Organizing content and designing pathways that
users will navigate through.

UI Design : Integrating visual components to build intuitive and attractive user interfaces.

Usability Testing : Assessing the design by real user interaction to ensure its effectiveness.

Mastering both UI and UX is essential for a career in digital product design, offering the skills
needed to progress professionally and stay competitive in the industry.

Master UX Research in 10 hours

UX research is an entire topic on it's own. Master it within 10
hours.

Buy Now $650

 2.1 0%
COMPLETE
Differences between UI & UX
(2:38) 2.2 The Brief

2.2 The Brief (25:36)

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Userflows

4.0 Welcome to Userflows (0:27)

Lesson Summary
4.1 What is a userflow (4:12)
This lesson delves into the process of analyzing technical project briefs. We will cover:

4.2 How to create a userflow

Project Overview: Introduces the problem faced by the company's founder and the
(26:09)
development of a smarter accommodation booking platform.

4.3 Create your userflows (28:47) Problem Statement: Highlights the lack of comprehensive control and relevant information in
accommodation booking platforms, resulting in travelers spending more time due to
insufficient information.

Research Findings: Offers insights into travelers' accommodation booking experiences and
preferences, identifying a market gap for streamlined booking processes.

Deliverables: Include job stories targeting specific traveler categories like newlyweds, focusing
on user persona and personalized accommodation options.

Your goal is to empathize and process the insights to form an initial strategy before moving forward.

Complete and Continue

 Previous Lesson Complete and Continue

(2:38)

0% COMPLETE
2.2 The Brief (25:36) 2.3 Project overview

2.3 Project overview (13:34)

Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Userflows

4.0 Welcome to Userflows (0:27)

4.1 What is a userflow (4:12)

Complete and Continue

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

 0% COMPLETE

Sitemaps 3.0 Welcome to Sitemaps

3.0 Welcome to Sitemaps (0:26)

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Userflows

4.0 Welcome to Userflows (0:27)

4.1 What is a userflow (4:12)

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Lesson Summary
Welcome to the site maps module. In this module, we're going to cover:
Wireframes

5.0 Welcome to Wireframes What site maps are

(0:33)
How to create site maps

5.1 What is a wireframe (3:43)

An activity for you to create your own site map

Join us to explore the world of site mapping!

Sitemaps

0% COMPLETE
3.0 Welcome to Sitemaps (0:26) 3.1 What is a sitemap

3.1 What is a sitemap (5:32)

3.2 How to create a sitemap

(12:07)

3.3 Create your sitemap (25:21)

Userflows

4.0 Welcome to Userflows (0:27)

4.1 What is a userflow (4:12)

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes Lesson Summary

5.0 Welcome to Wireframes This lesson emphasizes the importance of thoroughly understanding the project brief before diving
(0:33) into design details. Initially, grasping the core problem, its significance, and the strategic approach to
the solution is vital. This high-level planning ensures that the project remains on track and minimizes
5.1 What is a wireframe (3:43)
the need for major changes later, especially before advancing to UI specifics.
5.2 Sketches vs low-hi-fi
wireframes vs rapid prototyping (5:19) Key aspects of this lesson include:

Design Planning : Mapping out key pages and their interconnections early in the process is

crucial for a seamless user experience. Creating a site map at the start allows for a
comprehensive view of the app or website structure, aiding in aligning stakeholders and
setting a clear path forward.

Sitemaps : These are essential not only for UX designers to visualize the flow but also for SEO
specialists to optimize URL structures for better search engine visibility and user navigation.
Sitemaps, including HTML versions, are particularly useful for ensuring all pages are accessible
and indexed efficiently, as seen on major websites like Zillow, Airbnb, and Booking.com.

SEO and Accessibility : SEO specialists use site maps to enhance URL structures, making
them more user and search engine friendly, which enhances the site's visibility and
functionality.

In conclusion, sitemaps play a critical role, serving multiple purposes from UX design to SEO
optimization. They are fundamental tools for effective planning, strategizing, and aligning
stakeholders, and should be prioritized even under tight deadlines.
 3.0 Welcome to Sitemaps (0:26)

0% COMPLETE
3.1 What is a sitemap (5:32) 3.2 How to create a sitemap

3.2 How to create a sitemap

🔔🔔🔔 Read this BEFORE watching the lesson:
(12:07)

3.3 Create your sitemap (25:21)

We are constantly updating our website, so what you see on our current site might be different to
what is shown in the video. To view the same version of our website as you see in this video,
please use this link .

Userflows

The link shows an older version of our site, with the help of Archive.org which is the internet's 'time
4.0 Welcome to Userflows (0:27)
machine'. When you open our site, you can close the banner at the top, by clicking the x in the top

4.1 What is a userflow (4:12)

right corner.

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

Lesson Summary
Creating a sitemap is a foundational step in the UX/UI design process, acting as a blueprint that
organizes and structures a website's content into a clear hierarchy. This essential tool helps
designers visualize the overall structure and navigation flow of the website before starting the
actual design work, ensuring the site is user-friendly, easy to navigate, and logically organized to
enhance the user experience.

When developing a sitemap, it’s crucial to begin with the main pages or top-level categories and
then expand to sub-pages and deeper content layers. Each page should be clearly labeled and
structured logically for the user. For instance, an e-commerce site might categorize its content
under headings like "Home," "Shop," "About Us," and "Contact," with further subdivisions under
"Shop" for different product categories. The sitemap should also reflect a thoughtful consideration
of the user’s journey, promoting intuitive and efficient navigation throughout the site.
 3.2 0%
COMPLETE
How to create a sitemap
(12:07) 3.3 Create your sitemap

3.3 Create your sitemap (25:21)

Userflows

4.0 Welcome to Userflows (0:27)

4.1 What is a userflow (4:12)

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

Lesson Summary
5.2 Sketches vs low-hi-fi In this lesson you will need to create your own sitemap for the Accom.ai platform. Your task will
wireframes vs rapid prototyping (5:19) involve:

5.3 F Pattern (2:16)

Review job stories provided by the client to determine if they justify having their own page

5.4 F pattern challenge (14:43) Not all job stories translate into individual pages; some may be components or features within
existing pages

Bold job stories that warrant dedicated pages and create a site map reflecting the different
included pages

Create separate site maps for logged-in and logged-out users to align features and
functionality based on user status
 0% COMPLETE

Userflows 4.0 Welcome to Userflows

4.0 Welcome to Userflows (0:27)

4.1 What is a userflow (4:12)

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

Lesson Summary
5.4 F pattern challenge (14:43)
Welcome to the User Flows module. In this module, we will explore the concept of user flows:

5.5 My IA priority framework We will discuss what user flows are.

(5:05)
We will learn how to create user flows.

5.6 IA priority challenge (13:17) You will have the opportunity to create your very own user flow for the acom.ai project.
 0% COMPLETE
4.0 Welcome to Userflows (0:27) 4.1 What is a userflow

4.1 What is a userflow (4:12)

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

Lesson Summary
5.5 My IA priority framework A site map is a valuable tool to outline the high-level structure of a website, app, or mobile app.
(5:05) However, diving straight into wireframing or design after a site map may not be the best approach
for all projects. User flow, on the other hand, provides a visual representation of the path a user
5.6 IA priority challenge (13:17)
takes to accomplish a goal or task within a product. Here is a breakdown of the differences

5.7 Create your wireframes (48:16) between a site map and a user flow:

A site map focuses on high-level page flows and how pages are structured;

User flows delve into interactions, decisions, and states for specific flows within an application.

Creating a user flow is crucial in the UX design process as it:

Helps in identifying technical and non-technical issues upfront;

Allows stakeholders to visualize the user journey and pinpoint areas for improvement;

Facilitates discussions around technical limitations early on;

Unveils overlooked states or screens;

Encourages the optimization of experiences towards business objectives.

User flows should be established early in the design process, especially for experiences involving
complex logic or decision-making. It is essential to update and refine user flows as new information
becomes available throughout the design process.
 4.0 Welcome to Userflows (0:27)

0% COMPLETE
4.1 What is a userflow (4:12) 4.2 How to create a userflow

4.2 How to create a userflow

(26:09)

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)
Lesson Summary
In this lesson, we will explore how to create user flows using two popular social media platforms,
5.6 IA priority challenge (13:17)
Twitter and Instagram, as our case studies.

5.7 Create your wireframes (48:16)

Please keep in mind that a userflow is a very fluid tool. The sole purpose of it is to help you
understand how an experience unfolds and the relationships between the different stages. Don't
5.8 What is the - Fogg behaviour
model (9:30) get too caught up with fiddling around with Figjam features.

Complete and Continue

 4.2 0%
COMPLETE
How to create a userflow
(26:09) 4.3 Create your userflows

4.3 Create your userflows (28:47)

Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

Lesson Summary
5.7 Create your wireframes (48:16) In this lesson, we will focus on creating a userflow for the 'Search and Booking' experience for the
Accom.ai platform.
5.8 What is the - Fogg behaviour
model (9:30) By designing a userflow, we can effectively plan out the interactions, decision points, and potential
obstacles that users may encounter during the process. This helps us identify areas for
5.9 Fogg behaviour model -

Challenge (14:35) improvement and ensure a seamless and intuitive user experience.

When creating a userflow for the 'Search and Booking' experience, we will first need to define the
key steps and interactions involved in this process. This may include actions such as entering search
criteria, viewing search results, selecting accommodation options, reviewing details, and completing
the booking. Each step in the userflow should be clear, concise, and logically connected to the next,
guiding the user towards their end goal effectively.
 0% COMPLETE

Wireframes 5.0 Welcome to Wireframes

5.0 Welcome to Wireframes

(0:33)

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30) Lesson Summary
5.9 Fogg behaviour model - Welcome to the wireframes module where we will delve into the world of ideation. This module
Challenge (14:35) covers:

5.10 Optimize your wireframes

What are wireframes?
(2:47)

Effective ways to create wireframes

Lean Branding Implementing engagement and growth models for optimization during ideation

Developing your own wireframes for the project

Let's get wired and start exploring the exciting world of wireframes!
 5.0 0%
COMPLETE
Welcome to Wireframes
(0:33) 5.1 What is a wireframe

5.1 What is a wireframe (3:43)

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35) Lesson Summary

5.10 Optimize your wireframes Now that the web app's structure and complex flows are understood, the focus shifts to
(2:47) understanding how each page is laid out. A wireframe is a fundamental visual layout of a website or
application, emphasizing functionality, layout, and user experience:

Lean Branding
Wireframes outline structure and content.
6.0 Welcome to Lean Branding
(0:33)
They are created using simple shapes, lines, and labels.

Wireframes can be low-fidelity with basic elements or high-fidelity with refined details.

Wireframes come in various forms:

Lo-fi wireframes: Hand-drawn sketches or digital mock-ups with basic elements.

Mid to high-fi wireframes: Created using software like Whimsical or Figma, with more detail.

The decision to opt for lo-fi or high-fi wireframes depends on project complexity and stakeholder
involvement:

Simple projects with minimal stakeholders may start with lo-fi wireframes for the layout's
general feel.

Complex projects with multiple stakeholders might utilize mid to high-fi wireframes for
approval before design.

Wireframes are pivotal for visualization and problem-solving:

They facilitate layout and structure visualization, aiding in issue awareness and design
adjustments.

Wireframing before detailed design work helps maintain focus on solving UX/UI problems
without the distraction of visuals.

Quick and easy wireframe creation allows for rapid iteration and idea testing to optimize
design concepts efficiently.
 (0:33)

0% COMPLETE
5.1 What is a wireframe (3:43) 5.2 Sketches vs low-hi-fi wireframes vs rapid prototyping

5.2 Sketches vs low-hi-fi

wireframes vs rapid prototyping (5:19)

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)
Lesson Summary
When creating wireframes, there are different approaches one can take:

Lean Branding
Lo-fi wireframes are simple sketches representing layout and structure, often used for

6.0 Welcome to Lean Branding

brainstorming internally. They are quick to create and great for projects with high deadlines or
(0:33) low complexity.

6.1 My lean branding process

Mid-fi wireframes are more detailed than lo-fi, with visual cues for icons, buttons, and text,
aiding clarity in specific requirements.

High-fi wireframes are the most detailed, created using design software, and include accurate
visual details like topography, iconography, and images. They are suitable for presenting to
stakeholders and clients in complex projects.

Rapid prototyping involves quickly creating functional prototypes with interactivity, aiming to
gather real insights from users. It helps to identify issues early on in the design process.

Each type of wireframe serves different purposes:

Lo-fi wireframes are ideal for brainstorming ideas quickly and should be kept for personal use
only.

Mid-fi wireframes work well for teams wanting a general idea of layout and experience without
needing exact details.

High-fi wireframes are great for presenting a polished concept to stakeholders, providing a
clear visualization of the experience.

Rapid prototyping is a fast and cost-effective way to get feedback from users, particularly
beneficial for early-stage startups.

Understanding the various levels of wireframes enables individuals to select the appropriate type
based on their specific needs, whether it's idea generation, concept testing, or final design
presentation.
 5.2 0%
COMPLETE
Sketches vs low-hi-fi
wireframes vs rapid prototyping (5:19) 5.3 F Pattern

5.3 F Pattern (2:16)

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding Lesson Summary

When designing for digital devices, it is crucial to consider how users interact with content and
6.0 Welcome to Lean Branding
interfaces. Understanding the F-pattern, a well-documented concept for digital content
(0:33)
consumption, can help in designing engaging interfaces. Here are three key examples showcasing
6.1 My lean branding process
the F-pattern in action:
(1:06)

Google Search Results: The layout is optimized for the F-pattern, with the top result being
6.2 What is a lean brand strategy
the most relevant. Users scan down the left-hand side of the page, reading titles until they find
what they need.

Social Media Feeds: Platforms like Facebook and Twitter use the F-pattern for their news
feeds. Most recent content is at the top, and users scroll down scanning the left side for posts
of interest.

Landing Pages: Landing pages, aimed at converting visitors into customers, strategically place
elements. A headline communicates value at the top, with supporting subheadings and
graphical elements on the right, as users scan the left side for more details.

By leveraging the F-pattern, designers can enhance user engagement, retention, and ultimately
drive desired actions on digital platforms.
 wireframes vs rapid prototyping (5:19)

0% COMPLETE
5.3 F Pattern (2:16) 5.4 F pattern challenge

5.4 F pattern challenge (14:43)

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding Lesson Summary

(0:33)
In this lesson, we will be learning how to effectively utilize the F-Pattern model to optimize design
6.1 My lean branding process layouts and even content design.
(1:06)

This fundamental skill will shift the way you think about layout structures purely based on objectives
6.2 What is a lean brand strategy
(4:48)
and priorities.

6.3 Form your lean brand strategy

Take your time throughout these exercises as we will go through potential solutions afterwards.
 5.3 F Pattern (2:16)

0% COMPLETE
5.4 F pattern challenge (14:43) 5.5 My IA priority framework

5.5 My IA priority framework

(5:05)

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

Lesson Summary
(1:06) As a UX and UI designer, understanding how to prioritize elements on a page is crucial to creating
clean and effective designs. The IA priority framework introduced in this lesson helps map out the
6.2 What is a lean brand strategy
(4:48) importance of each element on a screen, leading to more efficient designs that drive user action.

6.3 Form your lean brand strategy Before prioritizing elements, having a clear objective is essential in UI design, project
(4:58) management, and life in general.

For example, when editing a photo's brightness in an app like Snapseed, the brightness scale
takes top priority, followed by the photo being edited and the menu for further actions.

On a buy page for a product like the Apple MacBook Air, the heading framing the page's
purpose ranks highest, followed by sections for selecting a model, viewing product specs,
proceeding with the purchase, and details about what's included.

Overall, aligning the layout of a page with its objective is key to creating effective designs and
prioritizing elements based on their relevance to the main goal of the screen.
 0% COMPLETE
5.5 My IA priority framework
(5:05) 5.6 IA priority challenge

5.6 IA priority challenge (13:17)

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

Lesson Summary
6.2 What is a lean brand strategy
(4:48) In this lesson the focus is on a priority framework challenge. Here are the key takeaways:

6.3 Form your lean brand strategy Understanding different objectives is crucial to aligning designs effectively.
(4:58)
Number your elements based on their priorities on achieving the screen/pages objective.
6.4 Color wheel explained (1:47)
Adjusting priorities based on objectives can impact user interactions and conversion rates.
6.5 The meaning of each color

Overall, the lesson emphasizes the importance of aligning design decisions with specific objectives
to optimize user experience and achieve desired outcomes.
 (5:05)

0% COMPLETE
5.6 IA priority challenge (13:17) 5.7 Create your wireframes

5.7 Create your wireframes (48:16)

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)
Lesson Summary
6.3 Form your lean brand strategy
Now that you have created your sitemap and userflows, the next step in the UX/UI design process
(4:58)
is to create wireframes for all the screens in your project. Wireframes serve as the blueprint for your
6.4 Color wheel explained (1:47) design, outlining the structure and layout of each screen without getting into the specifics of colors,
images, or fonts. They help you visualize the overall user interface and ensure that the layout is
6.5 The meaning of each color
intuitive and easy to navigate. Think of wireframes as the skeleton of your design, providing a clear
(4:00)
roadmap for the development of your project.

When creating wireframes, it's important to focus on functionality and usability rather than
aesthetics. Keep the layouts simple and clean, using basic shapes and placeholders to represent
different elements on the screen. This allows you to iterate quickly and make changes to the layout
without getting bogged down in intricate details. Remember, the goal of wireframing is to iron out
the structure and flow of your designs before moving on to the visual design phase. By investing
time in creating solid wireframes, you can streamline the design process and reduce the chances of
costly revisions later on.

After you have created wireframes for all your screens, take the time to review and refine them
before proceeding to the next stage of the design process. Pay a closer attention to how each
screen connects to the next in the user journey and ensure that the layout is consistent and intuitive
throughout.
 0% COMPLETE
5.7 Create your wireframes (48:16) 5.8 What is the - Fogg behaviour model

5.8 What is the - Fogg behaviour

model (9:30)

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58) Lesson Summary
Understanding the Fogg Behavior Model is essential for designers looking to create experiences
6.4 Color wheel explained (1:47)
that demand action. Developed by Dr. BJ Fogg, a behavior scientist at Stanford University, this
6.5 The meaning of each color model helps explain the factors that influence human behavior. At its core, the model states that for
(4:00)
a behavior to occur, three elements must converge: motivation, ability, and a trigger. Motivation

6.6 Meaning of each color differ in refers to the individual's desire to perform the behavior, while ability represents their capability to
different contexts (2:45) do so. Triggers, on the other hand, are cues that prompt the behavior.

One of the key advantages of employing the Fogg Behavior Model in UX/UI design is its ability to
guide designers in understanding user behavior more effectively. By analyzing what motivates
users, identifying potential barriers to action, and strategically placing triggers throughout the
design, designers can create more intuitive and engaging experiences. For example, consider a
fitness app that leverages the model by providing users with motivational messages (motivation),
simplifying the workout tracking process (ability), and sending push notifications to remind users to
exercise (trigger). This holistic approach can significantly increase user engagement and satisfaction
with the app.

In conclusion, the Fogg Behavior Model serves as a valuable framework for designers to create
user-centered experiences that drive desired behaviors. By considering the interplay between
motivation, ability, and triggers, designers can craft interfaces that not only meet users' needs but
also encourage them to take action. Whether designing a website, mobile app, or digital product,
incorporating the principles of the Fogg Behavior Model can lead to more effective and impactful
design solutions that resonate with users on a deeper level.
 5.8 0%
COMPLETE
What is the - Fogg behaviour
model (9:30) 5.9 Fogg behaviour model - Challenge

5.9 Fogg behaviour model -

Challenge (14:35)

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

Lesson Summary
6.5 The meaning of each color
The Fog Behavior Model Challenge involves identifying key moments in the Accom.ai user
(4:00)
experience that encourage visitor behavior. These actions include making a search, clicking a listing,
6.6 Meaning of each color differ in engaging with filters, making a booking, and processing payment. By applying the Fog Behavior
different contexts (2:45)
Model, these actions can be optimized strategically.

6.7 Understanding color

combinations (2:18) When focusing on encouraging visitors to make a search on the platform, it is important to
empathize with their needs and motivations. Design optimizations can include refining search fields,
providing relevant questions, and tailoring the experience to the user's specific preferences.

Have fun in diving deep into optimizing your ideas through the Fogg Behaviour Model.
 5.9 0%
COMPLETE
Fogg behaviour model -

Challenge (14:35) 5.10 Optimize your wireframes

5.10 Optimize your wireframes

(2:47)

Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)
Lesson Summary
6.6 Meaning of each color differ in
Now that you are familiar with the Fog Behavior Model and its practical applications, it's important
different contexts (2:45)
to review your wireframes and consider small optimizations to encourage user actions:
6.7 Understanding color
combinations (2:18) Reflect on what motivations, triggers, and abilities can be enhanced in the user experience.

6.8 Form your color palette (2:31)

Consider additions like displaying the number of unique accommodations added daily or
implementing a dropdown for specifying the trip intent.

Remember, all ideas are valuable, and the real impact is revealed when testing with actual
users.

Focus on minor enhancements rather than major feature additions.

Think about how to encourage users to make key actions like searching, selecting listings,
using filters, making bookings, and processing payments.

By implementing these small optimizations based on insights from the Fog Behavior Model
challenge, you can improve user engagement and drive desired actions in your designs.
 0% COMPLETE

Lean Branding 6.0 Welcome to Lean Branding

6.0 Welcome to Lean Branding

(0:33)

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)
Lesson Summary
6.8 Form your color palette (2:31) Welcome to the Lean Branding module. Throughout this module, we will cover the following topics:

6.09 Formalize your lean brand An introduction to Lean Branding.

(14:48)
Exploration of the Lean Branding process.

Project Setup Guide on forming a Lean Brand for the Acomda AI project.

Understanding the significance and utilization of color in brand and UI designs.

Step-by-step instructions to create your Lean Brand from scratch for Acomda AI.

Get ready to dive into the world of Lean Branding and develop your own unique brand for the
Acomda AI project.
 6.0 0%
COMPLETE
Welcome to Lean Branding
(0:33) 6.1 My lean branding process

6.1 My lean branding process

(1:06)

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

Lesson Summary
6.09 Formalize your lean brand
(14:48) Now that we have our wireframes ready, it's time to think about how we want to visualize it all. The
visual layer we add to our UI has several implications such as:

Project Setup
First impressions
7.0 Welcome to foundational
Accessibility
styles (0:29)

Branding

Usability

Stylistic choices in design can make a big difference. Even though designs may have the same
functionality, the presentation can give varied first impressions. It's essential to understand how
different stylistic choices can affect the product's perception.

While this isn't a branding course, a lean branding process will be shared to help build confidence in
designing UI from scratch. In the upcoming lessons, you will learn:

How to think about color

Choosing a color palette

Finding inspiration

Finalizing a direction for UI designs

Get ready to enhance your design skills!

 6.1 0%
COMPLETE
My lean branding process
(1:06) 6.2 What is a lean brand strategy

6.2 What is a lean brand strategy

(4:48)

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Lesson Summary
Project Setup Designers often face pushback because they struggle to "sell" designs to stakeholders, whether it's
a UX decision or a brand direction. The key to "selling" designs is not the final output but the
7.0 Welcome to foundational
styles (0:29) journey, narrative, story, and strategy behind reaching the end result.

7.1 Grid layouts (15:31) For instance, convincing someone to switch from one design tool to another can be challenging if

their processes are already established.

7.2 Color palette (5:49)

One effective way to sell a design change is by identifying pain points and presenting a solution
that addresses those issues. By understanding the challenges users face and offering a tool that can
alleviate those problems, designers can make a stronger case for change.

When proposing decisions or strategies, it's crucial to consider the pain points, objectives, story, and
overall needs for the brand. This helps in defining a visual direction that resonates with stakeholders,
such as clients or business leaders.

There are three key considerations when defining a brand's values and visual direction:

Define three values your brand believes in, determining how you want customers to feel.

Define three values your brand does not believe in, deciding what feelings to avoid in
customer interactions.

Identify the target audience to meet their specific needs and preferences.

Company brand values serve as guiding principles that shape a brand's identity, culture, and
behavior. Defining clear brand values is essential to establish an authentic brand identity and
connect with customers and stakeholders effectively.

Aligning visual direction with brand values and target audience helps in creating a consistent and
authentic brand identity. Different values and target markets can lead to distinct visual directions for
the same UI, catering to specific audiences with unique preferences.

In upcoming lessons, you will have the opportunity to develop your own lean brand strategy,
incorporating these principles into their design process.
 0% COMPLETE
6.2 What is a lean brand strategy
(4:48) 6.3 Form your lean brand strategy

6.3 Form your lean brand strategy

(4:58)

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

Lesson Summary
styles (0:29) Now that you have learned about my lean brand strategy and how it can influence design decisions,
it's time to create your own lean brand strategy. The steps to follow include:
7.1 Grid layouts (15:31)

Define your 3 "we are" values

7.2 Color palette (5:49)
Define your 3 "we are not" values

7.3 Typography (5:32)

Set your target market or early adopters proto persona

Here is a tip to not get too caught up on finding the perfect words but rather to focus on
understanding how to build a lean strategy to inform design choices.

It is important to pick values that resonate with your brand. For example, you can select words from
a list provided or choose your own to define your "we are" and "we are not" values. Consider
attributes of your early adopters to further refine your brand strategy.

There is no right or wrong answer in creating your lean brand strategy. You can prioritize values
that align with your brand and avoid those that don't fit. Remember, the goal is to have a starting
point for your brand direction.

For example, in setting your values, you might prioritize being innovative, efficient, and fun-filled
while avoiding being exclusive, negative, or unsafe. These values will guide your design decisions
and brand development process.

Understanding your target market, such as couples in Australia looking for accommodation, will help
you tailor your brand strategy to appeal to your desired audience. This might include photos with
couples in the photography, language that speaks to people in relationships etc. This information,
combined with your values, forms the basis of your brand strategy.

As you progress through the module, you will learn how to integrate these elements into creating a
mood board to visually represent the direction of your brand. This exercise will further solidify your
brand identity and guide your design choices.

Take your time to work through these steps and remember that refining your brand strategy is an
ongoing process. The key is to have a clear understanding of who you are, who you are not, and
who you are targeting with your brand.

Embrace the process and stay tuned for the next steps in developing your brand strategy.
 6.3 0%
COMPLETE
Form your lean brand strategy
(4:58) 6.4 Color wheel explained

6.4 Color wheel explained (1:47)

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

Lesson Summary
7.1 Grid layouts (15:31)
Now that we have a general idea of what we are looking to achieve, let's start building towards the

7.2 Color palette (5:49) colour palette. But before we do, let's first understand the fundamentals of colour with the help of
the colour wheel. The colour wheel is a visual representation of colours arranged in a circular
7.3 Typography (5:32) format, showcasing the relationships between primary, secondary, and tertiary colours.

7.4 Iconography (14:25) Primary colours: Red, blue, and yellow. These are the three basic colours that cannot be
created by mixing any other colours. They are the foundation of all the other colours on the
colour wheel.

Secondary colours: Green (blue and yellow), orange (red and yellow), and purple (red and
blue). These are created by mixing equal amounts of two primary colours.

Tertiary colours: Red-orange, yellow-orange, yellow-green, blue-green, blue-purple (blurple),

and red-purple. These are created by mixing equal amounts of a primary colour and an
adjacent secondary colour.

The colour wheel forms the foundational knowledge of colour and is an extremely simple but
effective tool to understand how to utilize colour for future projects.
 0% COMPLETE
6.4 Color wheel explained (1:47) 6.5 The meaning of each color

6.5 The meaning of each color

(4:00)

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

Lesson Summary
7.2 Color palette (5:49)
Colours are essential tools in communication, evoking strong emotions and associations.

7.3 Typography (5:32) Understanding the symbolic meanings of different colours can aid designers and marketers in
making informed decisions. Let's delve into the symbolism of various colours:
7.4 Iconography (14:25)
Red: Associated with passion, love, energy, power, and danger. It's attention-grabbing and
7.5 Shadows (1:44) used to highlight significant elements.

Blue: Signifies calmness, stability, trust, and reliability. Often utilized in corporate environments
due to its professional connotations.

Green: Symbolizes growth, nature, renewal, and environmental consciousness. In certain

cultures, it represents good luck and prosperity.

Yellow: Represents happiness, optimism, warmth, and energy. Creates a positive ambiance and
enhances mental activity.

Orange: Combines the energy of red and happiness of yellow, symbolizing enthusiasm,
creativity, and warmth. It's attention-grabbing and conveys excitement and vitality.

Purple: Traditional associations include royalty, luxury, creativity, spirituality, and mystery.
Emanates elegance and sophistication.

Pink: Often linked to love, romance, and femininity, also conveying playfulness, innocence, and
warmth.

Brown: Represents stability, reliability, earthiness, nature, organic elements, and simplicity.

Black: Symbolizes power, elegance, formality, and mystery. Commonly associated with
sophistication and authority.

White: Represents purity, innocence, cleanliness, clarity, and simplicity. Often used to convey
freshness and minimalism.

Grey: A neutral color symbolizing balance, reliability, stability, professionalism, often used in
design for conservative purposes. Light shades are common in UI design for balancing visual
elements.

These generalized representations can be a starting point, but experienced designers can break
free from these guidelines to create unique and impactful brand colors.
 6.5 0%
COMPLETE
The meaning of each color
(4:00) 6.6 Meaning of each color differ in different contexts

6.6 Meaning of each color differ in

different contexts (2:45)

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32) Lesson Summary

In this lesson, we have explored how the meaning of colors can vary in different cultures and
7.4 Iconography (14:25)
contexts. Here is a summary of the color symbolism:

7.5 Shadows (1:44)

Red:
In Western cultures, it symbolizes passion, love, and danger.
7.6 Buttons (5:39)
In Chinese culture, it represents good fortune, happiness, and prosperity.

In traffic lights, red means stop, indicating warning or potential danger.

White:
In Western cultures, it is associated with purity, innocence, and cleanliness.

In Eastern cultures like China, Japan, and Korea, white symbolizes mourning, death, and
sadness.

Green:
Commonly associated with nature, growth, and environmental awareness.

In the financial context in the United States, it signifies money and financial success.

In traffic signals, green means go, indicating safety to proceed.

Yellow:
Traditionally linked to happiness, optimism, and energy.

Used in Egyptian culture for eternal life, but in some countries, signifies cowardice or
deceit.

Blue:
Associated with calmness, stability, trust, and professionalism.

In Middle Eastern cultures, blue signifies protection and warding off evil.

The key takeaway from this lesson is the importance of considering the context of the audience
you are designing for when selecting colors. Understanding the cultural associations can help you
effectively use colors in your branding efforts.

A cheat sheet has been provided in the video description for your reference and further exploration
of color symbolism.
 6.6 0%
COMPLETE
Meaning of each color differ in
different contexts (2:45) 6.7 Understanding color combinations

6.7 Understanding color

combinations (2:18)

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

Lesson Summary
7.5 Shadows (1:44)
When designing color combinations for UI, it differs from branding due to the nuanced
requirements of UI design, like limited real estate. Color in UI design aims to capture user attention
7.6 Buttons (5:39) and indicate states or intentions of elements. Typically, the screen will be mostly neutral with color
used for buttons and other components.
7.7 Input fields (5:52)

UI design requires focus on specific elements for user attention

Color should aid in understanding element states or intentions

Mainly neutrals are used for the majority of the screen

Don't over use color for the sake of it. Remember to use it intently and in small doses.

Complete and Continue

 6.7 0%
COMPLETE
Understanding color
combinations (2:18) 6.8 Form your color palette

6.8 Form your color palette (2:31)

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

Lesson Summary
7.6 Buttons (5:39)
Now that you have a better understanding of colors, your task is to select a primary brand color for
your project in Module 6, Lesson 9:
7.7 Input fields (5:52)

By selecting your primary brand color, you are taking a significant step towards defining the visual

Technical Concepts identity of your project, so ensure the chosen color aligns with the message you want to convey to
your audience.
8.0 Welcome to technical

Use this primary brand color consistently across your project. Once you have made your selection,
move on to Lesson 9 to integrate your chosen hex code into your project, bringing you one step
closer to finalizing your brand's visual identity.
 combinations (2:18)

0% COMPLETE
6.8 Form your color palette (2:31) 6.09 Formalize your lean brand

6.09 Formalize your lean brand

(14:48)

Project Setup

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

Lesson Summary
7.7 Input fields (5:52)
It's time for you to start formalizing your lean brand for your project. This is where you will build a
moodboard that reflects the potential direction of your platform. This includes a general brand
Technical Concepts
direction with the help of interior design assets, UI design inspiration and photography styles.

8.0 Welcome to technical

concepts (0:54)
 0% COMPLETE

Project Setup 7.0 Welcome to foundational styles

7.0 Welcome to foundational

styles (0:29)

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

Lesson Summary
concepts (0:54) Welcome to the foundational styles module. In this module, we'll learn how to set up reusable styles
for our Com.ai project within Figma. This includes everything from:
8.1 What is the box model (2:02)

Grid layouts
8.2 Box model challenge (7:48)
Typography
8.3 What is flexbox (3:07)
Color palettes

Corner radiuses

Iconography

Let's dive into our styles and get started!

 7.0 0%
COMPLETE
Welcome to foundational
styles (0:29) 7.1 Grid layouts

7.1 Grid layouts (15:31)

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

Lesson Summary
8.1 What is the box model (2:02)
In this lesson we will cover the practical application of grid layouts in your UI design project. We'll

8.2 Box model challenge (7:48) cover:

8.3 What is flexbox (3:07) Importance of grid layouts in UI design for responsive web and mobile layouts.

Explanation of different types of grid layouts:

8.4 Flexbox challenge (8:32)
Fluid

Fixed

Hybrid (a combination of fluid and fixed)

Specifics on creating grid layouts for different screen sizes such as desktop, tablet, and mobile.

Exploration of the concept of keeping content centered for larger screen sizes to ensure
readability.
 0% COMPLETE
7.1 Grid layouts (15:31) 7.2 Color palette

7.2 Color palette (5:49)

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

Lesson Summary
8.2 Box model challenge (7:48)
Color plays a significant role in UI design, impacting user experience by evoking emotions,

8.3 What is flexbox (3:07) conveying meaning, and creating visual hierarchy:

8.4 Flexbox challenge (8:32) Consistent color palette throughout the design enhances recognition and cohesion.

Using the same colors for similar elements establishes brand identity and aids in memorability.
8.5 What is CSS grid (3:24)
Poor color choices can hinder memorability and user recognition, impacting overall
experience.

When colors are carefully chosen, they help users quickly identify key actions and elements,
fostering a positive experience.

Accessibility, specifically the contrast between text and background, is crucial for readability in
UI design.

Ensuring color choices align with the desired perception and brand identity is essential for
successful UI design. By following these steps, you can establish a cohesive and visually appealing
color scheme for your project.
 7.1 Grid layouts (15:31)

0% COMPLETE
7.2 Color palette (5:49) 7.3 Typography

7.3 Typography (5:32)

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

Lesson Summary
8.3 What is flexbox (3:07)
Typography is crucial in UI design and involves selecting the right fonts, considering readability and

8.4 Flexbox challenge (8:32) legibility, and aligning with brand personality. Some popular and common solutions include:

8.5 What is CSS grid (3:24) System fonts like Helvetica, Arial, or San Francisco (Apple default)

Google Fonts such as Inter, Railway, PT Sans, Work Sans, Ninito Sans, or Noto Sans
8.6 CSS grid challenge (12:24)
Fontshare, founded in 2009, with fonts used by Apple, Google, Samsung, Sony, Amazon, and
Hyundai among others

In this lesson we'll go through the application of Typography styles in Figma.

 Previous Lesson Complete and Continue
7.2 Color palette (5:49)

0% COMPLETE
7.3 Typography (5:32) 7.4 Iconography

7.4 Iconography (14:25)

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

Complete and Continue
8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

 Previous Lesson Complete and Continue
7.3 Typography (5:32)

0% COMPLETE
7.4 Iconography (14:25) 7.5 Shadows

7.5 Shadows (1:44)

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

8.4 Flexbox challenge (8:32)

Complete and Continue
8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

 Previous Lesson Complete and Continue
7.4 Iconography (14:25)

0% COMPLETE
7.5 Shadows (1:44) 7.6 Buttons

7.6 Buttons (5:39)

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

Complete and Continue
8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)
 Previous Lesson Complete and Continue
7.5 Shadows (1:44)

0% COMPLETE
7.6 Buttons (5:39) 7.7 Input fields

7.7 Input fields (5:52)

Technical Concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

Complete and Continue
8.7 What is position absolute
(3:20)

8.8 Position absolute challenge

(4:42)
 0% COMPLETE

Technical Concepts 8.0 Welcome to technical concepts

8.0 Welcome to technical

concepts (0:54)

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)
Lesson Summary
Welcome to the Technical Concepts module where we will explore essential technical concepts to
UI Design
aid in designing user interfaces for digital devices. When a developer mentions that a task is

9.0 Welcome to UI Design (0:31) challenging or time-consuming, it could be due to two main reasons:

9.1 Project file overview (2:55) They may be lazy

9.2 Header and footer breakdown

The proposed UI design is unconventional, impacting development time

This module aims to deepen your understanding of technical concepts that will contribute to your
UI design skills. While you may not apply all knowledge immediately, with more UI design
experience, you will find this knowledge valuable. Let's begin this learning journey!
 8.0 0%
COMPLETE
Welcome to technical
concepts (0:54) 8.1 What is the box model

8.1 What is the box model (2:02)

8.2 Box model challenge (7:48)

8.3 What is flexbox (3:07)

8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)

UI Design
Lesson Summary
9.0 Welcome to UI Design (0:31)
Understanding the box model is crucial for designers. This technical concept helps explain how
components on a page are structured and laid out. The box model views all components on a
9.1 Project file overview (2:55)
screen as rectangular boxes consisting of four parts:

9.2 Header and footer breakdown

(9:02)
Content

9.3 Homepage breakdown (5:59)

Padding

Border

Margin

Understanding that elements on a screen are essentially boxes within boxes simplifies design for the
digital world.
 Previous Lesson Complete and Continue
8.2 Box model challenge (7:48)

0% COMPLETE
8.3 What is flexbox (3:07) 8.4 Flexbox challenge

8.4 Flexbox challenge (8:32)

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)

UI Design

9.0 Welcome to UI Design (0:31)

9.1 Project file overview (2:55)

9.2 Header and footer breakdown

Complete and Continue
(9:02)

9.3 Homepage breakdown (5:59)

9.4 Search and booking

experience breakdown (13:52)
 8.3 What is flexbox (3:07)

0% COMPLETE
8.4 Flexbox challenge (8:32) 8.5 What is CSS grid

8.5 What is CSS grid (3:24)

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)

UI Design

9.0 Welcome to UI Design (0:31)

9.1 Project file overview (2:55)

9.2 Header and footer breakdown

(9:02)

9.3 Homepage breakdown (5:59)

Lesson Summary
9.4 Search and booking Flexbox can be used to create basic page structures, similar to Auto Layout. However, when
experience breakdown (13:52) dealing with grid-like layouts of content boxes, CSS Grid is a more suitable option:

9.5 My bookings breakdown

CSS Grid is a specific CSS layout mode designed for managing complex layouts with different
(4:40)
columns and rows.
9.6 Profile settings breakdown
It offers built-in grid settings for easy customization and responsiveness.
(2:05)

Flexbox can align content blocks horizontally but may require more manual adjustments for
grid-like layouts.

By utilizing CSS Grid, you can:

Create multi-column layouts with ease by adjusting the number of columns.

Handle responsive designs by setting breakpoints and custom settings for different views.

Set grid direction and alignment similar to Flexbox but with a focus on managing layout grids
effectively.
 Previous Lesson Complete and Continue
8.4 Flexbox challenge (8:32)

0% COMPLETE
8.5 What is CSS grid (3:24) 8.6 CSS grid challenge

8.6 CSS grid challenge (12:24)

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)

UI Design

9.0 Welcome to UI Design (0:31)

9.1 Project file overview (2:55)

9.2 Header and footer breakdown

(9:02)

9.3 Homepage breakdown (5:59)

9.4 Search and booking Complete and Continue

experience breakdown (13:52)

9.5 My bookings breakdown

(4:40)

9.6 Profile settings breakdown

 0% COMPLETE
8.6 CSS grid challenge (12:24) 8.7 What is position absolute

8.7 What is position absolute

(3:20)

8.8 Position absolute challenge

(4:42)

UI Design

9.0 Welcome to UI Design (0:31)

9.1 Project file overview (2:55)

9.2 Header and footer breakdown

(9:02)

9.3 Homepage breakdown (5:59)

9.4 Search and booking

experience breakdown (13:52)

9.5 My bookings breakdown Lesson Summary

(4:40)
Positioning elements on a webpage can be tricky in web development, but it becomes manageable
9.6 Profile settings breakdown with practice. While approaches like Flexbox and CSS Grid are more popular for positioning, there
(2:05)
are still scenarios where you may need to use position absolute for precise placement.

9.7 Authentication breakdown

(1:56)
Two examples illustrate the use of position absolute:

9.8 Desktop experience In a notification setup, where an element needs to be placed in a specific location, like the top
right corner, outside of the auto layout to maintain its position.

In a design portfolio, where a stamp in the bottom right corner needs to be rotated and placed
precisely, position absolute is used to position it outside the auto layout stack.

By utilizing position absolute in these cases, elements can be freely positioned outside of default
layout behaviors, enabling precise placement and unique design implementations that may not be
achievable through traditional layout methods.
 Previous Lesson Complete and Continue

0% COMPLETE
9.8 Desktop experience
breakdown (2:40) 9.9 Responsive views breakdown

9.9 Responsive views breakdown

(1:34)

User Testing

10.0 Welcome to usability testing

(0:30)

10.1 What is usability testing (4:08)

10.2 How to create a test plan

(11:11)

10.3 Create a test plan challenge

(22:38)

10.4 Setup your UI prototypes

(1:58)

10.5 Prototype challenge (4:31)

Complete and Continue
10.6 How to conduct a usability
test (19:05)

10.7 Conduct the test challenge

(6:54)
 0% COMPLETE

User Testing 10.0 Welcome to usability testing

10.0 Welcome to usability testing

(0:30)

10.1 What is usability testing (4:08)

10.2 How to create a test plan

(11:11)

10.3 Create a test plan challenge

(22:38)

10.4 Setup your UI prototypes

(1:58)

10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

Lesson Summary
10.8 How to iterate on designs
(2:42) Welcome to the usability testing module. In this module, you will learn:

10.9 Improve designs challenge How to set up your first usability test plan
(1:39)
Finding participants for the testing
10.10 What is Maze (6:17)
Executing the entire process from start to end

Rest assured, templates will also be shared to help you get started. Let's dive right in and get
started!
 10.00%
COMPLETE
Welcome to usability testing
(0:30) 10.1 What is usability testing

10.1 What is usability testing (4:08)

10.2 How to create a test plan

(11:11)

10.3 Create a test plan challenge

(22:38)

10.4 Setup your UI prototypes

(1:58)

10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

Lesson Summary
10.9 Improve designs challenge
(1:39) Usability tests are crucial in the UX design process, especially for critical projects where features will
be used by many people. These tests aim to minimize the chances of issues with user experience or
10.10 What is Maze (6:17)
UI design after implementation. Usability tests can take various formats, and as a designer, you must
decide on the process based on project constraints.
Wrap up!
Lean usability tests may involve informal processes, like jumping on a Zoom call with a user to
11.0 Congratulations, Certificate +
test a specific task, documenting findings, and making adjustments accordingly.

For simpler projects focused on speed, a formal process might not be a priority, and the focus
is on quick execution.

With complex projects involving larger stakeholders, a more defined plan and formal testing
process are necessary. This includes generating a brief, gaining stakeholder approval,
executing tests, and presenting findings for decision-making.

Usability tests ensure user-centric feature development by integrating customer feedback early on,
ultimately improving the overall UX. Allocating time for major testing projects can save time, reduce
post-launch changes, identify opportunities, and help designers empathize with users.
 0% COMPLETE
10.1 What is usability testing (4:08) 10.2 How to create a test plan

10.2 How to create a test plan

(11:11)

10.3 Create a test plan challenge

(22:38)

10.4 Setup your UI prototypes

(1:58)

10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)
Lesson Summary
10.10 What is Maze (6:17) Usability testing requires a test plan, which involves a brief outlining the project details and
processes. A test plan typically includes:

Wrap up!
Overview of the initiative
11.0 Congratulations, Certificate +
Scope of work
Final Words (2:15)

Clear, measurable objectives

Participant criteria

Tasks

Criteria for test success/failure

The formality of a test plan is essential for various reasons:

Assists in gathering thoughts and ensuring thorough planning

Facilitates effective alignment with stakeholders

Supports the establishment of scalable processes

Test plans are crucial for establishing clarity, aligning team members, and ensuring smooth
collaboration.

The success of a usability test plan is contingent on setting specific tasks and success criteria. These
tasks should be clear and concise, enabling participants to meet them effectively. Success criteria
are measurable targets, indicating whether test objectives are achieved. User testing serves to
identify issues before product launch, aiding in refining the design. Through detailed planning and
execution, test plans are instrumental in improving the user experience of digital products.
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 10.6 How to conduct a usability test
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
Facilitating a user test involves:

Observing, asking open-ended questions, and making participants feel comfortable providing
feedback.

After the test, analyze the data to identify patterns and areas for improvement.

Report findings clearly to stakeholders to inform design decisions.

Document and report usability test findings meticulously, recording key information and
recommendations.

Use tools like Google Sheets for organizing and sharing test data efficiently.

Summarize findings and present key successes and failures to stakeholders post-test.

To conduct a usability test:

Consider where to find participants, such as your current user base, social media, or third-
party services.

Organize schedules and bookings efficiently, consider using tools like Calendly to automate
the process.

During the test:

Set clear and measurable goals.

Choose the right participants representing your user base.

Create realistic scenarios for participants to perform.

Facilitate the session effectively.

Provide incentives like discounts or freebies to encourage participation.

Assure participants their feedback is valuable for improving the user experience.

To enhance efficiency:

Automate the onboarding process using tools like Calendly and Typeform.

Ensure clear communication and efficient management of the usability test process.

Remain flexible, allow honest feedback, and analyze results for informed decisions on
improving user experience.

Download

Usability Testing Template.csv.zip

 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 10.7 Conduct the test challenge
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
Now that you have learned how to conduct a usability test, it's time to put that knowledge into
action by following these steps:

Recruit 5 relevant participants for your test, defining a cohort and segment.

Test your prototype beforehand to ensure readiness.

Document your findings using Google Sheets.

Before executing the test successfully, consider how to manage participant bookings:

Create a Typeform and Calendly account.

In Typeform , create a new form, like a registration form to manage participants.

Add fields for name, email, and a booking section for scheduling.

Use Calendly to connect and manage scheduling for your tests.

Ensure you customize your scheduling options with Calendly to suit your availability:

Create event types, like 'usability test.'

Set locations and instructions for participants.

Configure time slots and buffer times between events.

After setting up your scheduling system, you can easily manage bookings and run your usability
tests smoothly. Remember to have all necessary materials ready before starting the tests, and best
of luck with your usability testing endeavors!
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 10.8 How to iterate on designs
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
After conducting usability tests, you may have identified areas for improvement in your designs:

Some aspects worked well, while others did not.

When analyzing the test results, focus on understanding the actual problem.

Ask follow-up questions to participants to pinpoint issues.

To address these issues:

Head to your Google Sheet to document feedback and iterate on designs.

Make adjustments in Figma based on identified problems.

Move revised designs to the final designs section once satisfied.

Here's a simplified process for iterating on designs:

Make adjustments to the design based on test feedback.

Move the final designs to a dedicated section for completion.

Copy and paste designs to finalize them after revisions.

By efficiently managing design iterations in Figma, you can implement recommendations from
usability tests effectively.
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 10.9 Improve designs challenge
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
In this challenge, found in module 10, lesson 9, the task is to select one of the solutions proposed,
based on the findings from a usability test, and iterate on the design accordingly. The goal is to
refine the design based on insights gained and make slight improvements.

Choose a design and update it based on usability test results.

Move the finalized designs to the last section of the Figma file.

Revise the design feedback section by incorporating the insights.

Make simple tweaks to enhance the design and ensure it aligns with the overall flow.

By progressing through this process—starting from the project brief, creating tests, understanding
user insights, iterating on designs, and finalizing them—you will reach a stage where the designs are
ready for development. This comprehensive approach ensures that your solutions are refined and
aligned with user needs before implementation.

Upon completing these steps, you are well on your way to developing refined and validated design
solutions. The next lesson will further build upon this foundation.
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 10.10 What is Maze
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
Congratulations on completing all the tasks in the course successfully and conducting a usability
test. Understanding manual processes before utilizing new tools is crucial as it helps in leveraging
tools effectively.

Maze.co is a product for unmoderated and remote usability testing, offering various features like
prototype testing, live website testing, feedback surveys, interview studies, card sorting, and tree
testing.
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 11.0 Congratulations, Certificate + Final Words
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for Lesson Summary

you!
Congratulations on completing the brief and mastering the technical aspects of the project. You
have accomplished the following:

Created a site map

Designed user flows

Developed an MVP

Conducted usability tests

Iterated on designs based on feedback

Now, you are encouraged to apply this new knowledge to real-world projects and share your
experiences on LinkedIn. Once you finish processing this lesson, you can receive a certificate to
showcase your expertise. Your feedback is valuable for improving courses and benefiting future
students, so please take 5-10 minutes to provide your honest thoughts. Thank you for your
dedication, and see you in the next masterclass course!
 10.40%
SetupCOMPLETE
your UI prototypes
(1:58) 11.1 Help us improve the course for you!
10.5 Prototype challenge (4:31)

10.6 How to conduct a usability

test (19:05)

10.7 Conduct the test challenge

(6:54)

10.8 How to iterate on designs

(2:42)

10.9 Improve designs challenge

(1:39)

10.10 What is Maze (6:17)

Wrap up!

11.0 Congratulations, Certificate +

Final Words (2:15)

11.1 Help us improve the course for

you!

Help us improve this course (and future courses) for you!

We listen and take action.

If you have 5 minutes, it would mean the world to us if you can share your most honest feedback
with us. Without your valuable insights into what is working well and what needs improvement
makes it incredibly hard to improve our content for you.

By taking the time to share your thoughts with us through our feedback form , you are helping
us create a better learning experience for you and everyone else. Your feedback matters, and we
truly appreciate the effort you put into helping us enhance our courses.