• 20 hours
  • Medium

Free online content available in this course.

Videos available in this course

Certificate of achievement available at the end this course

Got it!

Interpret sketches

Log in or subscribe for free to enjoy all this course has to offer!

As usual, the app development starts with the requirements. This time around we’ll work with Sketches.

Sketches are generally an outline of a design. And it’s up to us, developers, to interpret them and deliver the best implementation possible within a reasonable time frame.

How should we approach sketches and translate them into a simple design? I recommend the following frameworks:

  • Decide on the visuals

  • Identify the UI elements 

  • Conclude the functionality

Introducing the project

Imagine you were asked to create a To-Do app that allows users to log what they want to do today and be reminded of tasks for the day that haven't yet been accomplished. The first implementation needs to be done quickly, but all you get as a starting point is a sketch:

HotList main screen sketch
HotList main screen sketch

As the key purpose is to make a quick turnaround, we are going to limit it to supporting the iPhone portrait layout.

Ok, we've got a sketch...

How to approach this challenge? 😲

Let's get the ball rolling and see how we can interpret it.

Graphic design 101 for developers - Keep it simple!

Sketches are low-fidelity designs; they are outlines that need to be transformed into graphic UI. If you work with sketches, the design decisions are on you. And it's best to keep it simple!

"Simplicity is the ultimate sophistication" - Leonardo da Vinci

I trust that da Vinci knew what he was talking about. 😉

I recommend the following approach:

  • Decide on a contrast - dark on light or light on dark.

  • Pick a color palette of about 4 colors:

    • Background color

    • Primary content color

    • Secondary content color

    • Accent color

  • Pick fonts - up to 2:

    • Primary font + up to 3 variations. Common options to choose from: Regular, Bold or DemiBold, Thin or DemiThin, Italic.

    • Accent font. I'd recommend using it exclusively for app name, app tag line, or logo.

  • Define font sizes - up to 5:

    • Headers

    • Sub-headers

    • Primary text

    • Secondary text

    • Button captions

  • Put elements together using margins and spacing that account for simple presentation.

  • Ensure readability - play with font sizes and sizes of views to ensure all elements are visible and can be easily captured.

Keeping it simple allows for quick and sleek designs!

Basic visual picks for HotList
Basic visual picks for HotList

So that our screen may look like this:

Visuals applied to the main screen sketch
Visuals applied to the main screen sketch

How about icons? 🙃

We can use icons IF they are commonly understood. If not, spell it out! There's no reason to use a fancy icon that does not clearly communicate the function it's meant to serve.

And the app icon? 

The app icon is a somewhat public-facing element. As a developer, most of the time you will not have to have one until you are provided one by a visual design team.  However, it's cooler to have something representing the uniqueness of the app you are working on, especially if you are working on multiple projects at the same time.  Having a unique icon can help to easily identify your project on the home screen of your device or simulator.

Where to get an app icon?

Make one up! 💡

I recommend 2 approaches to choose from:

  • Google an icon that represents an app idea and choose the simplest one (remember the app icon needs to look good in small sizes, so the less detail, the better)

  • Use an abbreviation of the App name in an Accent font (1-3 letters).

App icon experiments
App icon experiments

What about launch screen?

Similar to an app icon, we have an option to request the visuals for the launch screen from the design team. Or, we can take initiative and come up with a simple yet impactful element of an app. It is, after all, the second element the user will see after the app icon.

The good news is we can piggyback on our app icon design efforts by using the same color selection as for the app icon design. On the launch screen we can use the following elements:

  • An app logo (if we used one in the app icon) or an app name abbreviation. 

  • The App name

  • A tagline

This will provide for a few simple combinations to choose from:

  • App icon or app name abbreviation enlarged and centered 

  • App icon + App name

  • App icon + App name + tagline

  • App name + tagline

Launch screen design experiments
Launch screen design experiments

Putting it all together

Applying the above recommendations, here's how we could transform our sketch:

Main screen
Main screen
Launch screen
Launch screen
Logo
Logo

Identifying UI elements

We can section the screen into areas:

Identifying screen areas
Identifying screen areas

Based on the sectioning above, we can identify UI elements as:

  • a panel at the top with the app name and progress update reporting current state of task completion,

  • an area to add a new task for the day with a text input,

  • a header panel for priority tasks,

  • any number of lines of priority tasks with checks,

  • a header panel for bonus tasks,

  • any number of lines for bonus tasks.

What iOS UI elements can accommodate these requirements? 

Now we need to speak the language of UIKit elements available to us. And to cover the implementation of all the content we are going to use a single element:  UITableView  

Say what?! A single UI element to implement all this variety of content?

UITableView  will be a single element that we are going to use to accommodate all the content. Table view is a complex element that incorporates an array of sub-elements that must be used within it.

As sub-elements of a table view, we'll use UIKit objects. Most of them are already familiar to you:

  • UIView

  • UILabel

  • UIButton

  • UITextField

Figuring out the functionality

Let's see what functionality we can interpret from the sketch:

  • When the app is launched it displays the progress status (the total number of tasks and relative accomplishments) and lists priority tasks and bonus tasks indicating their individual completion state.

  • It allows users to add a new task by typing into a text input.

  • There are 2 categories of tasks but no visual way to categorize a new task; however, there must be an option to move tasks from one category into the other. 

  • There's no obvious way to edit or delete tasks. Editing can be achieved by allowing the user to delete an unwanted task and add a new one in its place. Considering this we'll only need to provide a delete option.

This sounds like a good start. Next, we need to identify a data model to accommodate the tasks. We will need to manage the following information:

  • Task caption

  • Priority - top or bonus

  • Completion indicator

What if the functionality is not clear?  

If you have questions regarding functional implementation that's not clear from a sketch (and it's a minor decision), come up with a solution of your own. Alternatively, as usual, reach out to team members responsible for functional design!

Ready for the project setup?

It's all in your hands! 🤗

Go ahead and create an Xcode project - you already know how to do it! 👍

  • Create a Single View Xcode project

  • Add App Icon and App Logo to Image Assets

  • Implement the Launch screen

Image that says Keep Calm and Program On.

Let's Recap!

  • Sketches are an outline of a design.

  • Simple sketch interpretation may consist of 3 components:

    • Deciding on visuals - easy to interpret icons, simple colors, fonts, layout

    • Identifying UI elements - simple UIKit objects

      • To Identify UI components, refer to UI objects from the UIKit.

      • Create a simple App icon.

      • Compose a simple Launch screen.

    • Determining functionality - logical functions that can be derived from a sketch

      • If functionality is not clear, connect with other teams or make an assumption in the case of a simple matter.

         

In the next part of the course, we'll learn how to implement lists using tables.

Example of certificate of achievement
Example of certificate of achievement