Day 7 - Website UI Design I

2022-10-07

Figma Mockup Design

This is the next logical step after wireframing. It’s when you design the basics of your layout and apply your design system + add assets such as images.

We will be aiming for medium resolution designs. You can and should create mobile versions for at least one of your pages, especially if you’re attempting any challenging layouts to make sure that they render well. This will also help your development process by giving you a better visual of how your site content needs to flow.

What is a mockup?

A mockup is a depiction of what something will more or less look like when finished. Generally you’ll put a mockup onto a template of a screen to show it in context.

Important Points

Use the grid
Apply a design system soon after starting
Stick with your design system
Group items logically (and don’t be afraid to ungroup and change things)
Make use of plugins to speed up your process
Look to web pages that you would like to emulate, especially while learning

Activity: Mockup a card design (30min)

In a new figma file, create a desktop sized artboard
Set up a 12 column grid layout
Create a simple card design that would be able to be duplicated on the 12 column layout
- follow material design guidelines
- or model it off of a card design from a website that you frequent

Components

It’s good to learn how components work by building your own first. However for fast production of mockups, you can use prebuilt component UI libraries. When you get to the development phase, this speed can be continued by using corresponding css frameworks. o

Short doc on making a component in figma

Activity: Turn your card into a component (15Min)

Use the card you designed in our first Activity
Turn it into a component
Duplicate the component to make a 3 card pattern
Change the information in the cards so that they are distinct

UI Kits to try

Keep in mind that many of these will have a limited free version and a premium full version