Posted 10 months ago

Creating awesome landings in Sketch part 02

View Profile

In this second part of the tutorial we are going to  continue working our way down the page layout :) Hopefully you have saved your current progress on SketchApp if not you can always follow the first part of this 4 part tutorial.

In the first part we created the Artboard and added the block color rectangle followed by our Unsplash image which we masked to fill the rectangle size we added, next we are going to begin adding in the navigation , font & the second content section below our header.

next we need to add our heading & sub heading text to capture our users attention and explain our product on first look.

Along the top you will find the dropdown insert and within the list is text this will allow you to begin typing, Once we have added both text areas we need to make our first text area 'CREATE SHARE LISTEN' bold and much larger than our sub heading 'LIVE SYNC PLAYLISTS WITH FRIENDS'

when our font is selected we can you use font options on the right hand side to change font type  , size , colour and more.

For now we will focus on making our heading larger  i'm using font-size 45px , colour white & font weight bold Subheading is 20px , white , regular weight

Now we have our heading's sorted and aligned in header

*you will notice ruler's appear as you move content around , for this i positioned content at the lower half of the image


Next we will add our Navigation in top right & our App logo in top left Musync, so again we follow the same method as our previous text we added.

Moving on to the second section, this will show off a sample of your app inside our Iphone template (found online) on the right and display further text / buttons.

Our second section will be used to promote our app using Screenshots & show the user more detailed information, like which devices can it be downloaded on. Using the  text tool again we will add our tagline , followed by our app badges to show it is both available on IOS and android devices.

The app badges can be found on google images with a quick search or on the official sites Android app badge /  IOS app badge 

Our mobile screenshot is using a basic Iphone template with a screenshot our product aligned inside to mimic what our app looks like.

In part 3 we will finish designing the last two sections of our template.

Must be logged in to comment
Creating awesome landings in Sketch part 02 / Welcome to Signl