Posted 10 months ago

IOS login design

View Profile

This tutorial will assume you have some knowledge of SketchApp. We are going to design a funky IOS layout for the login view. To start we need to launch sketch and create a new project and use the Iphone 8+ art-board template *you can use any size art-board 5/6/7/8 etc. Once we have our art-board we need to draw 4 ruler lines to give a narrow gutter on the left & right hand side & the top bottom will have a wider margin again this only a rough guide.

Once we have our ruler guides in place next we need to add a background colour i have gone with deep purple #2E205E  , next we will add a large circle shape  at the bottom section of our art-board and use a darker shade of purple to make the two areas stand out.

Once you are happy with the result next up is adding our login fields the input fields these will be made up of two rectangle shapes both with a border radius of 28px to give the rounded effect and both coloured white, the login button will be much smaller and styled with the same radius 28px but styled blue in colour.

We can also add the drop-shadow effect to all our fields & buttons  making them really pop.

Next up is our empty space below for this we are going to give our users further options to login via social media, for my social icons i am using this set Iconfinder social icons

By default iconfinder uses black as the primary colour this can easily be changed to white by using the Fills option on the right when icon is selected, notice we have also put Sign in with in small in the top section and under our social icons the option to register.

Now for the final touch we need to add our logo and give our background less of a flat unloved feel! for this i have used a free to use stock image from Unsplash & for the sake of this tutorial used the Dropbox logo and tagline from their official website.

Once you have your background image we need to reduce the opacity which can be done using toolbar on right, Don't make it to subtle otherwise it wont have the same effect.
Play around with different ways to lay the contents out or with different colours. :)

Must be logged in to comment
IOS login design / Welcome to Signl