Booklet

author

Mike V Dijssel

Design

How To Design A Beautiful Thermometer For Your Dashboard

design

Design

|

How To Design A Beautiful Thermometer For Your Dashboard

WOW, IT'S HOT IN HERE..
Designers love data. Because it is perfect to visualize and it will definitely spice up your Ul. In this tutorial I will show you how to make this temperature chart. Made with Sketch. Let's start!

CREATE THE FIRST SHAPES
First, we create our basic shapes. The base circle should be 280x280px and the indicator line on top should have a height of 30px and a 2px border. Create 2 ruler lines centered horizontally and vertically. You need those later.

ROTATE COPY INDICATOR LINES
Duplicate the indicator line. Because every tenth indicator will be larger. Select one indicator line and go to Layer > Path > Rotate Copies and choose 7. Press 'Rotate' and drag the circle to the middle of the base circle.

ROTATE COPIES ON DUPLICATED LINE
Select the other indicator line and decrease the length to 20px. Repeat the current step but choose for 79 copies at the rotate copies panel. Again drag the circle to the middle of the circle base. Now remove the lines at the bottom like this. After this select all the lines and 'Union' them.

NOW CREATE THE PROGRESS BAR
Duplicate the circle base. press CMD+K and scale the circle by 112%. Remove the fills and shadows. Add a 8 px centered border. Click the cog icon in the border panel, choose for rounded corners and created a dotted line with 450 dash and 1000 gap. Now rotate this shape by 210•.

CHANGE THE BORDER FILL OFF THE
PROGRESS BAR TO A GRADIENT
Choose for a linair gradient and drag the end points to the start and end of the progress bar like the example. The right top color of the gradient should be #FF8C02 and the begin color #FFCB99.

ADD A GRADIENT TO THE INDICATORS
Select the indicator bar we created before and change the border color to a Angular Gradient. Add color points until your got 4 of them and drag the dots in the positions like the example. The grey color I used is #BECIED and the 2 others are the colors of the previous slide.

ADD THE OTHER CONTENT LIKE THE
TEMPERATURE, AND YOU'RE DONE!
Woww, look how hot this temperature chart is. You can play with the colors to create your own variation or blend it With the other dashboard colors. Let's try!

NOW IT'S
YOUR TURN!
LET'S CREATE
Let me know in the comments if this post was useful, share your results on your story and tag me!

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets