JLV

In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Learn just enough visual design to be dangerous as a developer

Many design courses focus on the finer details, heavy theories, getting you to the 99% of being a visual designer, but often disregard the code and handoff aspect. They end up alienating developers who just wish to learn the essentials. If you’re looking to learn “just enough” UI design to be 100% self-sufficient and collaborate better with designers, this course if for you.

Design from scratch using known patterns and create wireframes

Wireframing is an important aspect of designing webpages. A wireframe is like a blueprint of how the application’s structure will look like. In this section, we’ll create a wireframe and then add elements to it.

Create your color palette using monochromatic, analogous and complimentary colors

Choosing a color theme for your web application can be daunting. This section starts off with going through some amazing resources that make the task of selecting colors easier. Then, we move on to applying said colors to the wireframes we added previously.

Design backgrounds from simple shapes and apply gradients from analogous colors

Gradients enable your design to leave a better impression compared to solid colors. These are mainly used for buttons and backgrounds but you can also use them for text layers. In this section, we’ll add a gradient to the hero section of the web page and then, create multiple variations so that we can play around with different gradient combinations.

Customize the stroke and generate new designs with Looper

Blob shapes are added to a design to make it more visually appealing. It usually acts as a backdrop for other elements such as illustrations or texts which means that most of the times it is the lowest layer in a design. In this section, you’ll learn how to create a blob using a plugin. Futhermore, we’ll also use Looper to generate stunning graphics.

Elevate your presentation with mockups and illustrations

Illustrations and mockups make a design more visually pleasing.There are several free and paid resources that provide illustrations and mockups such as Shape for the former and Angle for the latter. In this section, we’ll go through the process of adding illustrations as well as mockups and then customizing the same.

Basic rules and system for type design for maximum legibility

Both accessibility and typography are important aspects of design. This section provides instructions on creating text elements and then using the Stark plugin to test the constrast ratio of the texts to the background.

Set consistent font styles and create buttons with auto layout

Figma gives us the ability to save styles, colors and other components that can be re-used at a later time. This ensures consistency for when multiple designers work on the same design file.

Learn about layout grid, rulers and auto layout spacing

Layout grids in Figma allows one to create easily adapable and responsive layouts. In this section, we’ll learn how to create layout grids. Towards the end, we’ll add in constraints which help define the resizing behaviour of elements.

Create reusable UI elements across multiple screens

Let’s create a menu component now! Since, the menu will be reused multiple times, we’ll learn how to make it a reusable component.

Apply colors, shadows and background blur to give priority and increase clarity

Now, that we’ve added a navigation bar at the top, let’s also add a menu for smaller screens. Before we do that, we’ll add a drop shadow effect to the text as well as the button.

Design the content using a flexible card UI

After adding navigation bar and the hero section, it’s now time to add in more content to the desgin. In this section, we’ll add more text content and then, create a card layout that will contain information about a particular course.

Create list rows and columns that are flexible and reusable

In the previous section, we added a card that displays information about a particular course. In this section, we’ll add a list layout next to the card. Each of the list items will have title, a subtitle, a timestamp and lastly, a progress bar to track the progress of the user.

Customize complex icons and font icons like SF Symbols

In this section, we’ll work on adding more text content to the layout. We’ll also customize the layers and add a background as well as a separator.

Create icons from scratch using the shape and drawing tools

Icon Design refers to creating symbols that represent something. While designing an icon, we need to keep in mind that it provides a sense of clarity. In this section, we’ll go through the process of designing icons using the tools provided by Figma.

Quickly rearrange existing components into new designs

After adding text sections, it’s time to work on creating pricing cards. In this section, we’ll add in a pricing card and customize it. Additionally, we’ll also learn how to use the SkewDat plugin.

Design a sign up layout with inputs and a button

Modals can be used to relay messages as well as forms such as the login form or the sign up form. In this section, we’ll be adding in a sign up modal that has an illustration on the left and a form on the right.

Design button states and error messages

UI states are very important as these highlight the action a user is performing. While designing it’s important to keep in mind to design iterations of buttons or inputs fields that specify how an elements looks like in different states.

Design a floating modal with a success message and confetti

Once a user is done filling a form such as the sign up form or once they’ve made a payment, it’s good to show them a message either thanking them or showing them how to proceed next. In this section, we’ll be adding a success modal that shows up when a user completes the sign up form.

Revisiting backgrounds, content and design system

we’ll work on editing the existing iterations as well as the elements such as the course cards. Furthermore, we’ll be creating specific pages like the tutorials page.

Organizing your Layers

Organizing your design file makes it easier for other people who’ll be working in the same file. Having components also makes the overall design more consistent.

Setting components inside components and creating pages

we’ll take organizing the design file one step further and create pages as well as add in nested components to make the design system even more systematic.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.