Explore Composite UI Components, Local Database and User Notifications on iOS

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...

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

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!

So that our screen may look like this:

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.

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.

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).

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

Putting it all together

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

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.

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  

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

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!

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.