Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
“Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs.
This course is not just about creating a pretty app, it’s about designing an app that works great and happens to be beautiful. Working at least 30 minutes a day, you can complete this course in 2 weeks, which develops the workflow needed to turn your idea into a fully designed product.
Learn to Design Engaging Apps With This Beginners Mobile App Design Course
User Experience and App Development
In 2008, apps designed for tablets and smartphones began appearing in app distribution platforms, operated by the owners of the mobile operating systems. It’s important for mobile application developers to consider things like screen sizes and hardware specifications when creating a mobile app. The user interface (UI) design is an essential part of mobile app creation and considerable time should be taken to consider creating a valuable user experience (UX).
Apps are in high demand and developers are producing applications for multiple services and businesses, including GPS location-based services, banking, games, medical, and more. With the large number of Apps available, review websites have been created in order to make discovering apps easier. For this reason it’s important to put a lot of time into designing your UX.
Contents and Overview
With 30 lectures, over 7 hours of material, you will to develop a workflow for your idea, find the right way to build your app, and understand how to use the design principles.
This course begins by teaching you what UX is and how it affects the UI design. You’ll begin creating mockups and visual concepts for your idea. Next, you’ll begin designing the first version of your app and learning how to preview it on a device. Following the first design of your application, you’ll work on redesigning the navigation, home content, and camera flow. Once you have completed the redesign of your application, you will learn how to design an icon for the app and showcase your finished app design.
After completing this course you’ll be able to create an engaging mobile app design from start to finish, no previous experience is needed to learn the UI design principles. This course will benefit entrepreneurs, developers, and designers looking to move into the mobile applications market.
*** You need to have a Mac to take this course ***
|Section 1: Getting ready|
Prerequisites: download the course files + have a mac
Welcome to the course!
0:09 About me
0:22 Why I created this course
0:46 The goal of the course
1:05 What we'll be doing
1:50 Who is this course for
In this video I'll explain how to get the most out of this course.
0:07 What we'll be making
0:48 Organization of the course
1:34 Personal project
2:42 Download the attached file
In this video we'll cover the definition and distinction between UX and UI.
0:38 UX and UI
1:22 UX/UI distinction - cereals example
1:45 UX/UI distinction - sample app
2:24 Where to find the answers
ERRATUM: SKETCH 3 IS NOW 99$
In this video I'll introduce you to Sketch, the awesome design software we'll be using to design our app.
0:14 Why we won't be using Photoshop
0:40 Why we'll be using Sketch
1:48 Vector-based drawing rules
2:39 Sketch vs Photoshop example
3:46 More reasons to use Sketch
4:26 Articles about photoshop users switching to sketch
4:38 Complete Beginner?
4:51 Sketch is good for your clients
5:25 Install Sketch
Sketch vs Photoshop
|Section 2: UX Research|
This lesson is the first in the UX research part. The goal of this section is to help you really understand what you want to build. The first step, described in this video, is to make sure you're tackling a real problem.
0:37 Design is the art of solving problems
1:30 Lean Startup and Customer development
2:15 Hypothesis: problem + customer
2:46 Test: talk to people
3:32 Learnings/ Refine
4:14 Problems tackled by Instagram
5:01 Homework: write your problem and customer hypothesis in less than 10 words
Knowing your users is crucial. You can't hope to craft a good product if you don't understand who you're creating it for.
In this video I'll introduce you to a very handy tool that will help you understand your users: the persona.
1:29 Persona canvas
1:35 Proto persona
3:55 Interview tips
6:02 Validated persona
7:59 Homework: fill your proto persona and get out of the building
Once we've made sure we're solving a real problem for a real category of people, we can start thinking about a solution.
In this video we'll explore different techniques to come up with as many ideas as we can. We'll then work on narrowing this ideas down to one main feature.
0:56 Tips to find solution ideas
1:02 Do a semantic exploration
2:22 Look at other products that solve similar problems
2:41 Look at common human behaviors when trying to solve a similar problem
2:59 Think about what your target is already using
3:18 Think about the key issues that affect the problem
3:42 Try to solve the opposite problem
3:56 Solve a similar problem in a different field
4:25 Brainstorm with monetization in mind
4:48 Find your Main Feature
7:08 Only keep necessary sub features
Find a lot of solutions
Find THE solution
In this lesson we'll learn how to write user narratives in order to figure out how our app will work.
0:37 User Narratives
2:28 Start with a goal story
2:58 Break into small stories
4:36 Desire Engine
6:16 Variable reward
9:41 Feed narrative
10:40 Explore narrative
11:35 Notifications narrative
11:47 Profile narrative
Desire Engine (canvas in this lesson folder)
|Section 3: Mockups|
Mockups are the blueprints of our app, a necessary step to transform a concept and user stories into a real interface. In this video we'll start building the mockups of the sample app.
1:22 Mockups = Layout
1:30 Content is king
2:30 Using sketch to build mockups
3:16 Open "Mockups template 1x"
3:22 Overview of the mockups template
5.13 Bottom bar
7:24 Top bar
8:25 Changing the icons
12:43 Group and Lock navigation elements
13:49 Duplicating artboards
12:51 Inverting the tabs in the new art boards
17:22 Changing the titles
18:02 Planning the Camera Flow
24:18 Camera Flow screen 1
31:15 Camera Flow screen 2
36:30 Camera Flow screen 3
Building your mockups
In this lesson we'll continue working on our mockups.
0:06 Feed flow narratives
0:46 Feed flow screen 1
8:17 Feed flow screen 2
13:12 Explore flow screen
15:22 Explore flow screen 1
16:24 Explore flow screen 2
19:06 Explore flow screen 3
23:37 Homework: notifications and profile screens
|Section 4: Visual concept|
This lesson is the first in the visual concept section. We'll start with the beginning: finding inspiration.
Remember, "good artists copy, great artists steal".
0:29 Good artists copy, great artists steal
1:45 Gimmebar plugin
2:20 Start collecting inspiring things
6:30 UI inspiration
In this video I'll introduce you to the basics of Typography and I'll show you how you can apply what you've learned while designing.
We'll also learn how to identify a font we like and install it on our computer so we can use it in our designs.
1:10 Typography basics
5:08 Text alignement
6:56 The Measure
9:56 Mixing typefaces
10:49 Typefaces and mobile apps
11:11 Finding cool fonts
11:53 Identify a font
13:21 Add a new font to your font book
Elements of a typeface
In this video we'll talk about how colors are formed and how to handle colors on your computer. The RGB and HSB models will have no secret for you.
0:45 How colors are formed
1:26 Subtractive colors
3:03 RGB Model
4:48 Hex code
11:18 Homework: play with colors
In this video I'll tell you about the meaning of colors to help you choose a base color.
0:25 Additive and subtractive colors
1:41 Subtractive colors wheel
2:58 Tints, shades and tones
3:21 Color Scheme
3:59 Choose a base color
5:52 Warm, cool and neutral colors
6:16 Warm colors
9:50 Cool colors
12:58 Neutral colors
15:03 Cheat Sheet
15:21 Style guide
Tints, shades and tones
Once you've made up your mind about your base color, how can you decide what colors you can associate with it? The answer in this video.
0:23 Monochromatic color scheme
0:49 Complementary color scheme
1:15 Spilt complementary color scheme
1:30 Analogous color scheme
2:01 Triadic color schemes
2:14 Tetradic color schemes
4:23 Adding contrast to a color scheme
5:10 Creating a color scheme from a photo
6:13 Kuler mobile app
6:41 Create your color scheme
10:11 Homework: add the new colors to the style guide
10:37 Color inspiration
12:53 Homework: go ahead and try to create a few color schemes
Traditional color schemes
Create a color scheme
|Section 5: Designing the first version of our app|
A quick your of Sketch to get things started.
1:34 Layers list
1:40 Creating geometric shapes
3:25 Layer options
Toolbar at the top
Inspector on the right
We'll start the design of the UI with the navigation (the top bar and the bottom bar)
0:19 Flat vs Skeumoprhism
0:52 Artboard dimensions
1:47 Retina vs non retina, pixels and points
3:22 Screen sizes
4:36 1x vs 2x
5:33 Designing the navigation system
6:04 Top bar
22:39 Bottom bar
Being able to preview your designs on the device you're designing for is crucial. I'll show you how to do that.
0:10 Sketch Mirror
There's two ways you can add icons to your designs: using existing icons and designing your own. In this video I'll show you how to integrate existing icons
0:37 Refresh icon
0:49 Copying an icon from and icons set
1:00 Pasting and modifying the icon
2:02 Resizing the icon
3:02 Changing the color of the icon
3:58 Styling the icon
5:22 Changing the icon while keeping the style
7:23 The Noun Project
8:42 SVG and Sketch
In this video we'll create our own icons for the tab bar. I'll show you how you can create almost any graphic representation by assembling simple shapes.
1:00 Home icon
2:48 Boolean operations
7:35 Explore icon
11:43 Camera icon
15:40 Notif icon
20:26 Profile icon
Vector edit mode
By the end of this video the first screen of our app will be complete and you should be more at ease with sketch and its different tools.
0:03 Locking the navigation
0:31 Quick look at the mockups
0:48 User picture
1:28 Using a mask
3:22 Align elements using guides
5:39 Align elements using a grid
7:28 User name
16:21 Box model
17:08 Like button
22:45 Comment button
In this video we’ll design the camera flow screens.
0:39 Create a new page
1:06 Camera Flow 1st screen
19:00 Camera Flow 2nd screen
36:00 Camera Flow 3rd screen
|Section 6: Redesigning our app|
*** If you like the course so far, don't hesitate to rate the course! (you can always modify you review later) ***
In this video we'll craft our own redesign of Instagram!
1:55 3 ways to design an app
3:24 Top bar
4:18 Bottom bar
5:00 Layout / visual hierarchy
13:01 Styling the top bar
15:45 Refresh icon
17:39 Styling the bottom bar
18:25 Bottom bar icons
3 ways to design an app
Layout / Visual hierarchy
In this video we'll replace the layout (the grey rectangles) with the final elements of our redesign.
0:04 User picture and user name
13:25 Scrolled screen
In this lesson your job will be to recreate the designs I’ve prepares for the redesign of the camera flow.
1:07 Vector tool
3:00 Vector point modes
6:00 Scissor tool
7:10 Vector game
Click anywhere on the canvas to add a first vector point
Add another vector point and a line will connect bothe points
Hold down the mouse and drag away when you add a point to draw a curve
The two small dots connected to the new point are called control points. Their position determines the exact curve between the main points.
Hold shift to align the new point at a 45° angle
Hold the alt key, to make a circle appear, you can place your new point anywhere on the circle
Use the arrows on the keyboard to move the control point to be more precise, and count
Close the path by selecting the first point again. Or press Enter or Escape if you don’t want to close the path
Straight: no control points and therefore just straight lines.
Mirrored: Control points mirror each other; they are opposite each other and at the same distance from the main point. If a vector point is not straight, this is the default.
Asymmetric: Distance between the control points and the main point is independent, but they do mirror each other.
Disconnected: Control points are completely independent of each other.
Rounded: The point is rendered as a rounded corner with a specific radius, that you can change here
If you don’t have it in your tool bar, right click > customize toolbar
Allows you to cut a segment between 2 vector points
|Section 7: Getting your app out of the builiding|
In this lesson we’ll talk about how to export the elements you’ve designed so they can be integrated in your app. We’ll also see how you can make you and your teams's job easier by using a styleguide.
0:25 Easy way to export
0:38 Export mode
2:15 Select what to export
3:02 Trim transparent pixels
3:40 Also export as Half/Double size
4:36 Talk with the developer before exporting
5:33 Exporting the icons
8:34 Documenting our design
14:27 Export file
15:10 Style guide
Talk with the developer before exporting
Collect bricks: design elements you and your team can use to build the screens of the app
Prepare slices: Slices of elements from a same category have to have the same size
Document everything from colors to typography, buttons, content, margins, …
This style guide is for the developer
And for you and your team to keep the consistency of the design
Select a layer or a group of layers, go to file>add slices for selection
Entre the export mode by clicking the export button in the toolbar on the right
You can create new slices and edit existing ones in the export mode
Export slices as PNGs
The slide preview can be dragged outside sketch to export
If you don’t want to export everything that’s inside the slice, check “only include the following”, uncheck everything in the menu below, and recheck what you want to keep.
Trim transparent pixels will reduce the size of the slice by removing the unused pixels
Also export as Double size if designing 1x or Half size if designing 2x
@2x naming convention for retina files
Now that you have a great design for your app, let's create an icon that will represent it.
1:12 Icon template
1:34 Getting started
2:13 Camera icon
5:04 Camera icon gradient
5:36 Camera icon long shadow
8:00 Letter icon
9:35 Letter icon gradient
10:07 Letter icon long shadow
13:18 Flat instagram logo
25:24 Flat instagram logo embossed
27:44 Instagram icon redesign
29:17 Instagram icon redesign no brown
29:48 Instagram icon redesign no viewfinder
30:00 Homework: come up with your own design of the icon
Two easy and beautiful ways to show your designs in context.
0:21 Using a minimal iPhone template
1:56 Using a realistic iPhone template
4:50 Using real pictures
Thank you for taking this course.
Don't hesitate to rate this course if you've like it, I love getting feedback and it would mean a lot to me.
If you want more insights on Design and Startups; follow me on twitter: @MaximeCormier
I'm an entrepreneur and web and mobile app designer. I've created 2 startups. I teach entrepreneurship and design at SciencesPo, a top school in Paris. I'm also a UX consultant and interface designer, I work mainly with startups.
I strongly believe in the power of teaching by example and my goal is to make sure my students will be able to use the skills I teach them immediately.
30 day money back guarantee
Available on desktop, iOS and Android
Certificate of completion
Hours of video content