Sketch App Design - Recents
You can find the link of my previous post here:
Today I'll start designing the app with Sketch, here is the link for download:
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally…www.sketchapp.com
I'll start by creating a new Sketch file, and adding a Artboard on it.
On the right-hand side I'll choose iPhone 6 option. Also, I'll create a new sketch file from template and choose iOS UI Design, so i can copy and paste the resources.
From the template I'll copy a navigation bar, a tab bar and a status bar into my new project.
Now, I'm going to start by editing the tab bar, to do so, I'll go inside this symbol, and once I'm inside, I'll delete 2 of those items as the project just going to use 3. Then i will rename the items.
To align those icons now, I'll select the icons and place them on the centre of the bar.
And then distribute them horizontally.
After that I'll snap the titles under the icons.
Now, I’ll select a color. As this app already exists, I’ll keep the same color.
Tip: This site have a nice flat colors for you to select.
If you don’t want to create the icons yourself, this site can provide nice icons for almost every feature, you can buy then for a good price or give the credits to the author.
With the icons selected, I'll place them on the tab bar symbol, replacing the blocks.
On the navigation bar, I'll remove the edit and back buttons, use the same colors and give it a title.
That is the structure, I'll just give a light grey background on this now, because the cells are going to be white.
I'll create now, a custom cell.
This cell is going to have a Title for the number of the bus lane, a subtitle for the name of the bus lane, a image to represent the direction that the bus is going and finally a fav star, so the user can add the bus lane to the favorites.
I'll add a white rectangle, and inside that I'll add 2 text labels (one bold and other regular) and 2 images to the canvas.
Then I've duplicated the cell and changed the images, so i can have a example of a cell with both bus directions and with favorite active and inactive state.
I'm going to reuse those cells for the search view as well.
Thats it for today!
On the next post, i will create the search and feed views using Sketch.
Thanks a lot!