Tutorial: How to Replicate Design From Scratch (Justis Website By Halo Lab)

I replicate and explore UI designs to show you how they are made. → Learn how to create designs that really pop!

What are we design today?

Let's replicate a hero section of Justice Website by Halo Lab.

✨ This is a completely free tutorial… → But if you want to explore the source Figma file, become a coffee price member ($5).

As a member:

• You get source files for all tutorials (Figma).
• Get members-only content.

So let's do it!

01. Background and grid

Key points and details

• Make a background → Add a fill
• Create a grid → Use rectangles → Add border color to them → Place 3 dots on the grid
• Copy and highlight 5 rectangles → Place them over the grid → Set gradient to fill and stroke

02.Visual element

Key points and details

1. Create a rectangle → Bend it on both sides → Add gradient and noise

03. Logo, menu and button

Key points and details

• Add a logo → Set negative letter-spacing value to the text  → Add a gradient and shadow to the dot
• Place menu items in the center → Set positive letter-spacing value for the items
• Add a button → Use negative letter-spacing value → Use no fill and add border color

04. Heading, icon and subheading

Key points and details

• Add a heading → Split the words → Use negative letter-spacing value
• Create an icon → Create one half of the shape → Mirror it and union the parts → Add a dot on top and subtract → Place the shape inside a circle
• Add a subheading below → Use negative letter-spacing value

05. Spiral

Key points and details

• Create a curve/spiral → Use the pen tool or add a wave shape → Split it into 2 parts → Add a gradient to the stroke

06. Button and card

Key points and details

• Add another larger filled CTA button → Add a fill → Use negative letter-spacing value in text
• Create a part of next section card
• Apply a negative letter-spacing value to the heading → Decrease line-height and make it compact
• Create some ellipses
• Place a number inside an ellipse → Add a shadow so that it is cast on top of the "#" symbol

07. The "Pop" part

Key points and details

• Let's make the letter "S" stand out. → Add a bounding box.
• Add cursor tags below the heading → Add some direct speech into them → Create shadows

Hand-drawn & Adjustable Decorative Elements for UI design [Figma]

Make your designs pop. Get the ultimate set of hand-drawn & decorative elements for your next UI design project, such as underlines, highlights or scribbles.

I want to make my designs pop!

08. Value/decorative elements

Key points and details

• On the left, place the Miro and Figma logos with ractangles → Add shadows to make them pop
• On the right, place an avatar → Apply a shadow and cast it on another icon
• Add a plus icon to a circle
• Add some content → Ensure visual hierarchy with contrast → Use a negative letter-spacing value

09. Final touch / vignetting

Key points and details

• Create vignettes → Draw some ellipses → Add layer blur to them → Place 6 over the grid and 2 over the heading

This is it!

Thank you for reading this tutorial. Let's have a look at the result. But first...

Join 200+ subscribers.

Get new posts delivered straight to your inbox.

👉 Subscribe, become a part of the community and learn how to make your UI/UX design really pop! It's free. No spam. Just valuable content.

Let's become friends

👉 Follow me on Twitter!

The result ↓↓↓