• 20 hours
  • Hard

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/30/21

Explore Sketch templates & finalize our prototype screens

The course so far

Let's recap what we have done so far:

  1. Developed a paper prototype

  2. Linked the screens using Paper

  3. Learned the basics of Sketch

Now, we are ready to create a high fidelity prototype where each screen will have the same professional look as a real app on the app store. As a result, we'll be able to get customers to use our app and get real feedback.

Sketch Resources

To help us create professional looking screens, we are going to look online at the huge range of free Sketch resources. Now that we have learned the basics of Sketch, we'll be able to browse and download some fantastic looking resources. We'll have enough skills to copy, paste and edit these files to shape them into the professional looking app we want.

Type "Sketch resources" into Google, and you'll see a long list of website that offer free resources from other designers that you can use. It's a great community, and many people love to take the work they have done and make it available publicly for others to speed them up. Maybe someday it will be you uploading resources for the world to avail of! For now, let's start with one of the most popular sites - https://www.sketchappsources.com- and have a look around.

In the mobile category, I start browsing to look for a resource that has:

  • A calendar for booking

  • Some user profiles for the sitters

  • A login page

I find this resource a good candidate. Kudos to Tushar Merwanji for creating it! Download this resource and open it. You'll see it is a Sketch file. Our goal now is to identify professional looking elements we can copy out for our high-fidelity (professional looking) prototype screens.

Creating the Bookings Screen

Let's begin with the end in mind.

This is the screen we are about to create.

The finished Booking screen
The finished Booking screen

We can get started quickly:

  1. Insert a symbol with the Bookings menu and place it at the bottom.

  2. In the HomeKit section, I copy and paste a status bar out of the Sketch resource into my artboard. The status bar looks like this:A status bar

  3. Beneath the status bar, I create a text layer for My Bookings.

  4. I create two lines (each 16 pixels long) and align them to make a plus sign! 

Now my screen is starting to shape up:

Artboard with menu bar, status bar and a heading
Artboard with menu bar, status bar and a heading

Now, I want to add two bookings, each of which will show as a row:

Two bookings - each appears as a row
Two bookings - each appears as a row

In the Apple Music > Library > Artists section of the Sketch iOS10 GUI resource, I find something similar:

Copied and pasted out of the resource
Copied and pasted out of the free resource

I now add some text and a couple of icons, and I have the screen that I want for two bookings! I think it is interesting for you to see that I am genuinely hacking here. By pasting professional looking elements and then adding things I know (text, shapes, lines, icons, images) I can get a screen that looks great.

Creating the Calendar Screen

I see an artboard called 'Calendar - Date Selected,' and there are two layer groups (which look like the screenshot below with other layers hidden). I paste these into my Calendar artboard for BabySittr.

Choosing layer groups I want
Choosing layer groups I want from 'Calendar - Date Selected'

To see how this Choose Date screen was created, have a look at the screenshot below:

How Pick Date screen was created
How Pick Date screen was created

Pick Time and Date Screen

Sometimes, you don't see the elements you want in a resource that you download. That is to be expected, and sometimes you just have to create them yourself.

I did this with the dropdowns in the Pick Start Time and Duration screen.

These dropdowns are just:

  • A rectangle with some radius

  • A text layer for the text "8:00 PM"

  • Two lines in red that are joined to make a V shape

Creating my own dropdowns
Creating my own dropdowns

Summary

Although there are lots of elements being created, and you can follow along in the video, the most important thing is the process.

  1. I use some carefully chosen Sketch resources that I can copy and paste elements from.

  2. I also use my Sketch skills to edit these layers and to add text, lines or shapes to complete what I need to create professional looking screens.

  3. I use symbols, grouping and duplicated artboards to make creating an additional screen not that much work.

Additional Resources

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement