This is a quick tutorial on how to make a nice, clean, minimal interface quickly using Sketch 3.

MinimalMonitor.png

This is my finished interface. Quick and simple, but uses some techniques that should be helpful to get started with making other awesome interfaces.

Let’s start. 

I am using an iPhone7 art board for this design.

The dial

Firstly, create a circle and then copy it so you have 2 circles. One is for the background circle and the other will become our gradient dial. I just set then to a light gray for now.

Select your top circle and hit enter (or double click it) to select the path editor. You will see 4 circles. In between 2 of the points, add a new point.

Then, delete it. You will see the circle is out of line now.

Select the 2 points at each side of the out of line section, go up to the top right hand side panel and hit ‘Open Path’.

Change the color of the path as well so you can see it against the original circle. You should now have a circle with section cut out.

Go to the Borders panel (on the right side panel), select the little cog icon to show the settings for the border.

Set the ends to the center (rounded) option to round them.

Now set the color of the border to ‘Angular Gradient’ which is the last option at the top or the pop out.
You will see 2 dots on your circle now, slide them around to the start and end of your circle. These are your gradient stops.

Set the colors for them in the color picker and you should be good to go.

The selector

Add another circle to show to current setting of the device. Give it a white background but reduce the Alpha channel (The A number or user the slider next to the eye dropper icon) a little to make it transparent.

Add some text in to it, select both the text and the circle, then use the alignment tools to center the text inside the circle.

Tap the center vertical and horizontal options (2nd and 5th option below).

Let’s add background blur!

Grab your circle and select the Gaussian Blur option from the right hand panel. From the drop down, select background blur.

This will blur anything behind the circle giving that nice Apple iOS effect.

Set the amount to what ever looks good. Mine is 4px.

Add in a bit of a shadow as well. I reduced the Y to 0 so it’s directly under the circle and pulled the alpha channel down a bit to make it less harsh.

The button

Next we will make a quick button.

Add a rounded rectangle. Give it a white (or none) background and a 1px border.

Set the radius to at least (you can go as high as you like, it will stop it at half the high anyway) half the height of your rectangle. That should give it nice rounded ends.

Add some text and center it by selecting the rectangle and text, then hitting align center vertically and horizontally again.

The back button

Lastly, let’s make a quick back button.

Grab the pen tool and make 3 points. Hold down shift as you do it to ensure the lines are at a 45 degree angle.

Go back to your border settings.

Set the thickness to about 3 or 4.

Make the ends and joins curved and your done!

Add some extra text here and there.

That’s it!  Good job!

DribbbleMinimal.png

Thanks for reading!

 

Alex Knight

UX / UI Designer – Tokyo, Japan.

www.agkdesigns.net 

Advertisements