Learn

UX/UI Design course

Learn valuable UX & UI design skills with our free beginners course

UX Design

Lesson notes and downloads

Research

What is UX research?

UX research is the process of gathering and documenting data about a website and how people are using it.

UX research can take on many forms including:

  • Surveys
  • Polls
  • Heat maps
  • Analytics
  • Video recordings
  • Remote and in-person user testing

What is the purpose of UX research?

The purpose of UX research is to discover and document problems that exist when a user uses your website.

Where does the UX research data come from?

UX research is often put together by a UX designer using any number of methods and tools outlined above. Alternatively, the research can be provided to the UX designer by their team including a product manager or a dedicated UX research person.

Examples of UX research:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=24%3A4702

Popular UX research tools include:

Competitor analysis

What is competitor analysis?

Competitor analysis is the process of using and documenting the experience of a competitor’s website.

What is the purpose of competitor analysis?

Competitor analysis is done to observe and learn how your competition is solving the same problems you have but in a different or better way.

Where does the competitor analysis information come from?

Competitor analysis is often done by a UX designer. Alternatively, competitor analysis can be provided to the UX designer by their team including the business owner, product manager or a dedicated research person.

Examples of competitor analysis:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=41%3A4803

Lesson notes and downloads

What is a user persona?

A user persona is a document that lists key information about a typical user of your website.

What is the purpose of a user persona?

  • To influence UX design decisions
  • To influence UI design decisions
  • To identify candidates for user testing

Where does the user persona data come from?

The data for a user persona is put together by a UX designer using various methods and tools. Alternatively, the information can be provided to the UX designer by their team including a business owner, product manager or a dedicated research person.

User persona example and template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=105%3A7253

Previous

Next


Lesson notes and downloads

What is a sitemap?

A sitemap is a document that contains a ‘map’ of all pages featured within a website. It is often referred to as the ‘information architecture’.

What is the purpose of a sitemap?

The purpose of a site map is to document all pages of a website and show how they link together. The second purpose of a sitemap is to define the main and sub-navigation items of the website.

Where does the data for a sitemap come from?

As a UX designer, you will be responsible for mapping out the sitemap based on an existing website. Alternatively, if the website is new you can workshop the sitemap pages with your team including a business owner. client or product manager.

Sitemap example and template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=105%3A7225

Previous

Next


Lesson notes and downloads

What is a user flow?

A user flow is a document that maps out the flow or user journey of a user across multiple pages and actions to achieve a set task. For example, buying a product on your website.

What is the purpose of a user flow?

The purpose of a user flow is to map out every stage of the journey that a user goes through to complete a task. Additionally, the task of a user flow is to broadly map out the UI elements for each page in the journey.

Where does the data for a user flow come from?

As a UX designer, you will be responsible for mapping out the user flow based on an existing website or a competitor’s website. If the website is brand new you can workshop the user flow with your team including the business owner and or the product manager or alternative members of your team such as dedicated researchers.

User flow example and template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=105%3A6958

User flow kit:

https://www.figma.com/community/file/900373866162206210

Lesson notes and downloads

What is a wireframe?

A wireframe is a document that contains a barebones illustration of all the elements contained on a single web page.

What is the purpose of a wireframe?

The purpose of a wireframe is to document all of the elements that need to be on a web page. For example main navigation, copy, image and page content etc. A wireframe is also used to convey all of the information a UI designer needs to design the final user interface for a web page.

Where does the data for a wireframe come from?

As a UX designer, you will be responsible for mapping out a wireframe based on an existing website or a competitor’s website. If the website is brand new you can workshop the wireframe with your team including the business owner, product manager and a UX copywriter.

Wireframe example and template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=105%3A6772

Wireframe kit:

https://www.figma.com/community/file/1088059168988686975

UI Design

Lesson notes and downloads

What is UI inspiration?

Inspiration in the context of UI design is simply the act of viewing other websites to get inspiration and influence for your website design.

What is the purpose of a UI inspiration board?

A UI design inspiration board allows a UI designer to collate and document inspiration that is relevant to their project. In turn influence and lead design decisions based on references they have collected.

Where does a UI design inspiration board come from?

A UI design inspiration board is put together by a UI designer and sometimes the greater product team. It can take many forms including screenshots taken from other websites and apps on the internet or any other digital or real-life products.

UI Inspiration board example:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=103%3A6481

Lesson notes and downloads

What are frames?

Frames are the ‘canvases’ that we set up in Figma for our UI designs. Frames can be any size but most commonly we set up frames in desktop and mobile sizes.

What are layout grids?

Layout grids are the horizontal and vertical guides we set up in Figma to ensure all elements are consistently lined up within our UI design.

What is spacing?

Spacing is the unit of measurement that we use to consistently space and size our UI elements. For example, using multiples of 8, 16, 24 etc. is a good basis for the spacing and sizing of all your UI elements.

What is the purpose of frames, layout grids and spacing?

Good UI design is about consistency. We set up our frames, layout grids and spacing before we design our UI to ensure everything is consistent and lines up uniformly across all of our UI designs.

Frames, layout grids spacing template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=0%3A1

Lesson notes and downloads

What is modular and responsive design?

Modular design is the process of designing sections of our UI into self-contained boxes or modules.

What is the purpose of modular and responsive design?

The purpose of modular design is so that our UI designs can stretch, shrink and stack into several different sizes. Modular design is essential so our UI elements can ‘respond’ to the different sizes and devices your website will be viewed on in the marketplace.

Example of modular and responsive design template:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=8%3A2

Lesson notes and downloads

How many fonts should I use?

For beginners, it’s best to use just one font for your UI designs. Use just one font that has many different weights. For example, bold, medium, light etc.

Notes on UI typography:

  • Choose a classic, plain font that’s easy to read in all sizes and weights.
  • 14 pixels should be the minimum font size you use
  • Headings on mobile should be smaller than on desktop
  • Choose a font that reads well with long blocks of text

Example of UI type sets:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=14%3A736

Recommend fonts for UI design:

https://fonts.google.com/specimen/Poppins

https://fonts.google.com/specimen/Montserrat

https://fonts.google.com/specimen/Nunito

Previous

Next


About Lesson

Lesson notes and downloads

How many colours should I use in my UI design?

For beginners, it’s best to limit your colour usage to just three colours. One colour for your page background. One colour for your typography and icons. And one colour for your accents.

What is an accent colour in UI design?

An accent colour is typically a bright or contrasting colour that you use for things such as calls to action and links. The accent colour should be used sparingly in your UI designs.

How much of each colour should I use?

Your colour usage volume should approximately be:

  • 60% Page background ( white for example )
  • 30% Typography, icons etc. ( black for example )
  • 10% Accents, buttons, links etc. ( blue for example )

Examples of colour swatches and usage:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=12%3A2

Popular accent colour examples

https://colorhunt.co/palettes/popular

Lesson notes and downloads

Notes on images and icons:

  • Always use icon and image sets for your UI designs
  • For responsive design, It’s best to use images and illustrations that are ‘self-contained’ and not full bleed
  • Always use images and icons that compliment your copy
  • Include your accent colour in your images to add consistency to your UI designs

Examples of images and icon use:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=17%3A736

Free icon sets:

https://www.figma.com/community/icons

Free illustration sets:

https://www.figma.com/community/illustrations

Previous

Next


Lesson notes and downloads

What is a call to action?

A call to action is anything that is asking our user to do something, for example, a button or a link.

How many states do buttons have?

Buttons on desktop UI designs have 5 states in total:

  • Default
  • Focused
  • Hover
  • Active
  • Disabled

Examples of call to actions:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=105%3A6528

Previous

Next


About Lesson

Lesson notes and downloads

  • Always start with a Frame in Figma
  • Always set up your layout grids before you start designing
  • Use a wireframe as a basis for your UI design
  • Always use consistent sizing and spacing in your UI designs. For example multiples of 8, 16 and 24 pixels.
  • Break your page up into modules
  • Always create modules that work on desktop and mobile
  • It’s good to use one module per viewport as a guide when designing for desktop
  • Use just 3 colours for your UI designs, background colour, text and icon colour and accent colour
  • Use just one font at different weights and sizes
  • Have two sets of typestyles set up, one for desktop and one for mobile
  • Always use image and icon sets for your UI designs
  • Make sure everything is lined up with your layout grids

Example of page layout:

https://www.figma.com/file/jPnlXPo84zngyj50yc87PR/CursorUp_UX_UI_Design_course_assets-(Copy)?node-id=17%3A783

Lesson notes and downloads

  • You can share a whole file or a single frame in Figma with a link
  • Anyone can view your Figma file via most modern web browsers without a Figma account
  • You can export whole Figma frames as SVG, JPGs, PNG and PDF files
  • Always name your layers before you export individual elements in Figma
  • You can export individual elements for development in SVG, PNG, JPG and PDF file formats