How to design minimalistic clay mockups. Part 1. Front

How to design minimalistic clay mockups. Part 1. Front 🔸

Courtesy of @alexunderhess.design
⠀
Hey friends,
⠀
Today I would like to share with you an easy way to create a device mockup in any UI tool ✊
⠀
This mockup was created in Figma, but feel free to use what you use.
⠀
The idea is the same as in my previous post: add inner shadow and play with radius, colors, sizes ✔
⠀
In the next post I want to show a POWERFUL technique of how to create isometric shapes in Figma.
⠀
Stay tuned.

DO YOU WANT TO LEARN HOW TO CREATE MINIMAL CLAY MOCKUPS? IN ANY TOOL

START WITH SHAPE

RECTANGLE WITH ROUNDED CORNERS
400x760
RADIUS: 40

ADD INNER SHADOW

Blur 20
X -5
Y -5
Opacity 20%
Color 3754AA

ADD YOUR DESIGN

SCREEN SIZE
360x720
RADIUS: 30

DONE! ALMOST…

DUPLICATE FIRST SHAPE

MOVE IT
X +70
Y +70
Opacity 15%
Color 3754AA

ADD LAYER BLUR

BLUR:200

ADD, ROTATE AND PLAY

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.