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:
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:
Primary content color
Secondary content 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:
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!
So that our screen may look like this:
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).
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
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
Putting it all together
Applying the above recommendations, here's how we could transform our sketch:
Identifying UI elements
We can section the screen into 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:
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:
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:
Priority - top or bonus
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
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.