Design the UI for a simple to-do list app

91fc8241

We're going to design our own to-do list app! You'll be able to get as creative as you'd like with the aesthetic and branding. The goal of this assignment is to help you fully learn the essentials of Sketch and get a feel for the start-to-finish app design process.

Step 1. Start Your Project by Naming Your App!
All you have to do is hit the start project button to the right and pick a name for your app. If you have any inspiration images you've been thinking about add those too! Don't worry that you don't have a finished project just yet, this is just to get you started so I can help you along! Do it now!

Step 2. Add Your Cover Photo
I teach you how to create an awesome cover photo in Video 3. Shapes, Text, and Simple Styling. This won't take you too long and your project will look awesome in the gallery. I also included a text based step by step here.

Step 3. Create Your UI and Upload It!
Include 5 essential screens for your app's user interface: the app icon, the loading screen, a main list screen with action tabs, a "compose new task" screen, and a micro-states screen. Check out the projects your classmates have made so far!

411102ee

ff09c0d2

Download the Free Trial of Sketch from Bohemian Coding
Bohemian Coding offeres a free trial for Sketch!

Download the Class Project File
We'll use this sketch file in the video lessons. It has all the wireframes and some iOS components included in it. It's highly recommended you use it as your working file, even if you want to use your own to-do app wireframes.

ce447299

f7cf2db0

ca3bd815

64612f7b

Apple's Human Interface Guidelines
This is a great resource that will introduce you to Apple's underlying theory and design principles for iOS. It's a great reference for seeing how Apple handles many common user experience and interface case. However, I like to keep in mind that sometimes the rules in this document need to be broken and if there is a good reason to do so, that's okay!

The iOS Design Guidelines by Ivo Mynttinen
This is one the most valuable resources on the web for iOS design. Not only does Ivo Mynttinen provide great commentary and explanation about the design system, he includes nuanced spec information about things like spacing on interface elements and typography.

Pttrns - Mobile Design Library
This resource is like Dribbble but specifically for mobile design. It provides high resolution screenshots that are organized by App and by category so it's really easy to find inspiration and examples of how other Apps handle specific design problems.

Noah Levin

Product Designer / Prototyping Teacher

6,564

154