Create a Calendar App Design in Sketch 3
Tutorial
It’s no secret anymore that Sketch 3 is the new player in the game for creating user interface designs such as websites and apps. I’ve been using Photoshop for years and I’m still a big fan, but once you’ve started designing in Sketch, you’ll love it even more!
Enough said. Let’s create a sweet looking Calendar App Design Concept. This is how the final product should look like:
1. The Artboard
On the top left side click Insert -> Artboard or hit (A) to select the Artboard-Tool. You can either draw a canvas by hand or click on the right side on a predefined artboard. I choose iPhone 6 portrait. You should now see this:
2. Background
Go to Insert -> Shape and pick the Rectangle-Tool (R). Draw a rectangle all over the canvas. Go to Fills on right side and create a very subtle linear gradient from #508DE3 from top to #3874BB to the bottom. Set the opacity to 75%. Get rid of the border by simply uncheck the property.
Pro Tip: As the natural light source comes from the sky, you always want to make sure that the lighter color is on top and the darker on the bottom. I highly recommend reading 7 Rules for Creating Gorgeous UI from Erik D. Kennedy.
I recommend to lock the background layer so you don’t accidentally move it around. You do that by right clicking the layer and select Lock Layer.
3. The Header
We now gonna design our Header. It includes a Burger-Icon, the current Month, and a Ring-Bell-Icon.
3.1 The Month
Hit (T) or go to Insert -> Text and start typing. I choose Bryant as the Typeface, make it white, 55pt and kern it a little bit. (Character Spacing)
Make sure to align it horizontally by clicking the icon in the align palette.
Pro Tip: Kerning improves your design! Use tighter character spacing for large texts like titles or text in Logo Design.
3.2 The Icons
There are already tons of great Icon-Sets for Sketch out there. I wanted my icons to be minimalistic-outlined and found them. Download the Sketch File, open it, and copy the icons you want into your document. Place those two icons on the same height as our title. You might want to resize the icon or play around with the thickness of the border.
Pro Tip: Select an element and press (alt) to see the measures to the document edge. Hover over another element to check measures between those two elements.
4. Weekdays and Numbers
That’s a boring task since we have to add every fucking day of the month. Go ahead an create all weekdays with all the numbers. This may take a few moments… Don’t worry about font size, color or alignment. We’re gonna change that right after.
4.1 Alignment and Spacing
Sketch offers a pretty nice Alignment Palette located at the top of the right sidebar. We have already used it to center our text in step 3.1. However, you can also use it to perfectly space between elements. It takes the two most outer elements and places all elements in between in the right distance. Make use of that technique to align everything.
4.2 Text Styles
Select all weekdays and click on the right side on No Text Style and create a new Text Style called weekdays. All the weekdays now have the current style you have in the properties. The benefit of that is, that you can select one element, change a property and it will automatically adapt it to all other elements with that style. For the weekdays I have a font size of 30pt.
Now go ahead and create Text Styles for inactive weekdays (days from December and February), active weekdays (January), and one Text Style for a selected day. I’ve made the numbers bigger (41pt) than the weekdays because they should have a size like a fingertip. Set an opacity of 40% for the inactive days. You should now have something like that:
5. Spread Selection
Let’s highlight the current day and add a spread selection to give the app some uniqueness. Hit (R) for the Rectangle-Tool and draw a white rectangle around three numbers. Make sure to give it some space to breath. Add a radius of 40px and set the opacity to 30% in the Options/Inspector Panel on the right side.
On top of that, create a circle (O) exactly the same height as the rectangle we just created before. To highlight the current day, we change the font color to #4A90E2 and add another little circle underneath to indicate that we have appointments.
6. Divider, Appointments, Button
We are already done with the big part. We are now gonna create the divider, alle the appointments and the Button at the bottom.
6.1 Divider
Draw a white rectangle from all the left to the right with a height of 45px. Set the opacity to 50%. Then draw a second white rectangle 90px width and 9px height and center it vertically and horizontally. Set the opacity to around 73% and add a radius of 40px.
6.2 Appointments
The Appointment-Listing is very simple. Just add a time and with some nice spacing to the right an event-name. Again, use white as the font color and a size of 35px. Then draw a simple line (L) underneath. Make sure there is enough space between the line and the text. My line has a width of 667px and an opacity of 50%. Repeat this step for one or two more appointments. To align everything perfectly, I recommend to add a ruler. On the top right side click on View -> Show Rulers. You can then hover over the rulers to instantly see these red lines all over the canvas.
6.3 The Button
Our last step is to create the “New Appointment”-Button. Once again, it’s pretty simple. Create a rectangle (420px width, 110px height). Uncheck the fill property and change the border color to white. Select the Text-Tool and add the Buttontext. I stick to Bryant as the typeface, 36px and white.
Congratulations, we are done. Almost.
7. The Fancy Stuff
Create a new artboard, the size doesn’t matter. It just needs to be bigger than our iPhone artboard. After that, and that’s important, we’re gonna create a Symbol of our whole design.
Symbols let you reuse groups of context easily across pages and artboards.
Make sure to group the whole design. Rightclick on the folder and click Create Symbol. Duplicate that folder and drag it over to the new artboard. When you now make changes to one of the designs, it will automatically update the other one. And that’s awesome!
We’re now gonna add a some nice little details to our design. First we add a blurred background behind our calendar app. You see this style a lot on Dribbble or other platforms. Check out this great list for stock photos that don’t suck by Dustin Senos. Found one? Copy it behind your design and set the Gaussian Blur between 10 and 20px.
If you want, you can add a subtle shadow to the calendar.
It’s the first tutorial I’ve written, please be nice. If you have any questions feel free to hit me up on Twitter or Dribbble. I’m Thomas Veit, UI/UX Designer and Frontend Developer from Switzerland.
