Lesson 01

Design or Development?

Design and development are two paradigms that often get confused with each other. Before we start designing a website and its subsequent pages, we'll need a better idea of what design actually entails and how it differs from development.

Let's Learn

Lesson 02

Working with Design Tools

To begin designing a website and the different pages within it, we'll start by learning how to navigate a design tool called Figma. There are many options available for designing and prototyping a web app, but Figma is free and relatively user-friendly.

Let's Learn

Lesson 03

Design Systems and Components

To ensure our site has a consistent feel and style, we'll implement something called a design system. We'll use this system to generate a series of components that can be reused, making our design and development more efficient.

Let's Learn

Lesson 04

Prototyping our App

If your design is done, you can use Figma to quickly prototype user experiences. In this last lesson of the unit, we'll go over how to create a high-fidelity mock-up for users to play with and how to get helpful feedback on your site's design and interface.

Let's Learn