Mobile App Design from scratch with Sketch 3 : UX and UI
4.4 (825 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
20,987 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mobile App Design from scratch with Sketch 3 : UX and UI to your Wishlist.

Add to Wishlist

Mobile App Design from scratch with Sketch 3 : UX and UI

The new, improved and updated best-selling step by step guide to learn how to design a great mobile app.
Best Seller
4.4 (825 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
20,987 students enrolled
Last updated 9/2017
English
English [Auto-generated]
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 10.5 hours on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create an engaging mobile app design from start to finish
  • Turn your idea into a fully designed product
  • Use a design software (Sketch) like a pro
  • Create graphic illustrations even if you've never drawn anything in your life
View Curriculum
Requirements
  • No specific skills required
  • You need to have a mac (Sketch, the design software we’ll be using is available on mac only)
  • If using a Windows computer, you need to make sure you are running the OS X virtual environment on your computer
Description

WELCOME TO THE NEW, IMPROVED AND UPDATED VERSION OF THE BEST SELLING MOBILE APP DESIGN COURSE ON UDEMY

This course is not just about creating a pretty app, it’s about designing an app that works great and happens to be beautiful. We'll teach you a complete design workflow that will allow you turn your idea into a fully designed and engaging mobile app using Sketch 3.

Learn to design engaging apps with this beginners mobile app design course 

  • Master the ins and outs of Sketch 3
  • Design a beautiful and user-friendly interface for your app
  • Learn UX Research techniques to craft an engaging app
  • Learn Design best practices to build your product efficiently
  • Outline your visual concept


A skill that will change your life
Mobile apps are everywhere, transforming our personal and profesionnal lives. And what makes an app successful is how well it is conceived. The demand for people able to design such engaging and well thought apps is constantly growing. That's why mobile app designers are averaging over $100k a year.
With Sketch 3 and this course, you'll have the skills to produce professional designs even if you have zero previous experience.

Content and Overview

This course is efficiency oriented and is taught with an example. Each lesson represents a step in the design process that will be applied to the app we will be building and that we'll help you apply to your own idea. You don't need any previous experience as a designer, we'll teach you everything you need to know along the way.

We'll begin by teaching you what UX is, how it affects the UI design and how you can use UX research techniques to craft a great app. We'll show you how to efficiently build a quick first version of your app and how to preview it on a device. This will get you used to Sketch and we'll give you exercises to build up your design skills.
We'll then work on the visual concept of your app, you'll learn about colors, fonts and how to properly use them. This will allow us to create the final design of our app, beautiful and functional. In this section we'll dive deep into Sketch amazing functions and best practices.
You'll even learn how to design an icon for the app and showcase your finished app !

By the end of this course you'll...

  • Be able to explore your idea in depth to find the right way to build your app
  • Have a full proficiency in design software
  • Have a very good understanding of design principles and how to use them
  • Be able to build graphic illustrations and icons even if you've never drawn anything in your life
  • Know how to choose the flow and navigation of your app
  • Know how to create a very clear layout that will serve your content
  • Know how to create the identity of your app and how to choose and use colors and fonts
  • Be completely autonomous as a designer
  • Save a lot of money and time by not needing to work with a freelance designer
Who is the target audience?
  • This course will benefit entrepreneurs, developers, and designers looking to move into the mobile applications market
  • This course is not about learning how to code an app but is focused on learning how to design an app that makes sense
Compare to Other Sketch Software Courses
Curriculum For This Course
69 Lectures
10:25:57
+
Prerequisites: download the course files + have a mac
30 Lectures 07:30:38

Welcome to the course!

0:00 Introduction
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
Preview 02:15

In this video I'll explain how to get the most out of this course.

0:00 Introduction
0:07 What we'll be making
0:48 Organization of the course
1:34 Personal project
2:42 Download the attached file
Preview 03:24

In this video we'll cover the definition and distinction between UX and UI.

0:00 Introduction
0:38 UX and UI
0:55 UX
1:10 UI
1:22 UX/UI distinction - cereals example
1:45 UX/UI distinction - sample app
2:24 Where to find the answers
Abstract
  • UX (User eXperience): deals with the overall experience associated with the use of a product = WHY
  • UI (User Interface): specific interface of the product = WHAT
Preview 02:54

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.

Install Sketch

  0:00 Introduction 
  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 

Article by Jean-Marc Denis

Article by Meng To

Article by Nick Schmidt

Article by Khoi Vinh

Article by Meng To 2

Article by Meng To 3

  4:38 Complete Beginner? 
  4:51 Sketch is good for your clients 
  5:25 Install Sketch 
Abstract

Sketch vs Photoshop

  1. Built for UI design
  2. Intuitive and efficient
  3. Vector based
  4. Exporting made easy
  5. Lighter in terms of HD space and memory footprint
  6. Cheaper: $50 once vs $25/month for Photoshop
Preview 06:48

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:00 Introduction
0:37 Design is the art of solving problems
1:30 Lean Startup and Customer development

Lean Startup principles

Lean Startup by Eric Ries

Customer Development manifesto

Startup Owner's Manual by Steve Blank

1:55 Iteration
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
Abstract
  • Design is the art of solving problems. Before anything else you have to understand you problem
  • Work by iterations. An iteration is made of 3 steps: Hypothesis / Test / Learnings/Refine
  • Focus on one (or 2) problems at once
Preview 05:35

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.


0:00 Introduction
0:52 Personas
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

Abstract

Personas

  • Personas are models used to represent your users and to keep them in mind
  • Build a proto persona first
  • Then go talk to your target

Interview tips

  • Talk to your target
  • 1-1
  • Define your goals and keep them in mind
  • Get ready to hear things you don't want to hear
  • Ask open ended questions
  • Rephrase what people tell you
  • Look for insights and write them down
  • Validate with currency
Preview 08:57

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:00 Introduction
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
Abstract

Find a lot of solutions

  • Focus on quantity
  • Do a semantic exploration (sun with 10 branches)
  • Look at other products that solve similar problems
  • Look at common human behaviors when trying to solve a similar problem
  • Think about what your target is already using
  • Think about the key issues that affect the problem
  • Try to solve the opposite problem
  • Solve a similar problem in a different field
  • Brainstorm with monetization in mind
  • Prioritize your ideas by asking which ones are the most efficient and the most feasible

Find THE solution

  • Prioritize your ideas by asking which ones are the most efficient and the most feasible
  • Get out of the building to get feedback on these ideas
  • Pick the main feature, what all the app will be focused and oriented towards
  • Only keep the sub-features that are needed to make the main feature work
Preview 07:45

In this lesson we'll learn how to write user narratives in order to figure out how our app will work.

0:00 Introduction
0:37 User Narratives
2:28 Start with a goal story
2:58 Break into small stories
4:36 Desire Engine

Nir Eyal's blog

5:34 Trigger
6:10 Action
6:16 Variable reward
8:13 Commitment
9:41 Feed narrative
10:40 Explore narrative
11:35 Notifications narrative
11:47 Profile narrative
Abstract

User Narratives

  • The persona is the voice of the story
  • Start with a goal story: As [user persona] I want to [accomplish something] so that [some benefit happens]
  • Break into smaller stories
  • Write the stories on post its and stick them to the wall
  • Remove as much friction as possible, make the first steps of the flow very easy

Desire Engine (canvas in this lesson folder)

  • Trigger: something that triggers the use of the product. External (like an email or a notification) then Internal.
  • Action: what the user does with your product
  • Variable reward: give the user a reward that varies after he has done the action to get him hooked
  • Commitment: action that makes the user more likely to come back and that improves the service for the next go around
Preview 13:47

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.

0:00 Introduction
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
4:46 Narratives
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
30:24 Saving
31:15 Camera Flow screen 2
36:30 Camera Flow screen 3
Abstract

Definition

  • Mockups (or wireframes) = blueprint of your app
  • Mockups allow you to create a layout that serve your content.
  • For each screen you're designing ask yourself what the user is going to do with the content.
  • Most common actions with content: create, consult, share and edit

Building your mockups

  • Plan the flow according to your user stories
  • Not more than 1 or 2 steps in a screen
  • Below each screen write in 1 or 2 sentences what the user is supposed to do in the screen
Preview 42:39

In this lesson we'll continue working on our mockups.

0:00 Introduction
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
24:10 Conclusion
Preview 24:37

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:00 Introduction
0:29 Good artists copy, great artists steal

Don't copy, steal by Meng To

0:46 Gimmebar

Gimmebar

1:45 Gimmebar plugin

Gimmebar chrome plugin

2:20 Start collecting inspiring things

Dribbble

Behance

6:30 UI inspiration

Pttrns

Mobile patterns

UX Archive

Android app patterns

Android niceties

Android UX

8:03 Sidebar

Sidebar

8:32 Conclusion
Abstract
  • Don't be afraid to steal ideas.
  • Collect inspiration all the time. Use Gimmebar
Preview 08:51

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.

0:00 Introduction
1:10 Typography basics
2:09 Kerning

Kerning game

2:45 Tracking
4:03 Leading
5:08 Text alignement
6:56 The Measure
7:32 Typefaces

Typeface Classifications

9:56 Mixing typefaces

Medium.com

10:49 Typefaces and mobile apps
11:11 Finding cool fonts

Google Fonts

Google webfonts that don't suck

More Google webfonts that don't suck

ilovetypography.com

Myfonts bestsellers

11:53 Identify a font

What The Font

Font plugin

13:21 Add a new font to your font book
Abstract
  • Typography is both verbal and visual

Elements of a typeface

  • Type size (cap height): overall height of capital letters
  • Ascender: upward tail on letters like h, l, t, b, d, and k
  • Descender: downward tail for letters like g, q, and y
  • Counter: white space located inside letters like o and p
  • X Height (corpus size): height of the letter x
  • Baseline: the line upon which most letters "sit"

Typography basics

  • Kerning: space between individual characters
  • Tracking (letter spacing): space between letters in a line/block of text
  • Leading: vertical space between lines of text
    • Body text: 1.2-1.5x size of the font
    • Title: 1.1-1.2x size of the font
  • Text Alignement
    • Left: default, easiest to use
    • Center: for titles
    • Right: for buiness cards or letters
    • Justified: alignment on the left and right sides. Be careful of rivers of white space (reduce tracking).
  • The Measure: optimum width of a paragraph: 52-78 characters
    • Small measure less leading, wide measure more leading.

Typeface

  • Typeface design for a set of characters
  • Font: specific size, weight and style of a typeface
  • Typefaces families
    • Serif: typeface with serifs (small lines attached to the end of a stroke in a letter or a symbol) + combination of thin and thick strokes. Easy to read
    • Sans Serif: typeface without serif and with even strokes. Easy to read
    • Script: typeface that imitates handwriting. Only for titles

Mixing Typefaces

  • Avoid using fonts from the same family
  • Play with size, weight, color

Mobile apps

  • One typeface for the text
  • One typeface for the title/logo
Preview 15:32

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:00 Introduction
0:45 How colors are formed
1:26 Subtractive colors
3:03 RGB Model
4:48 Hex code
5:57 HSB
6:26 Hue
8:10 Saturation
9:20 Brightness
10:17 Alpha
11:18 Homework: play with colors

Color game

Abstract

Subtractive colors

  • When light hits an object, you attribute it a color depending on what part of the color spectrum the object absorbs or reflects.
  • Primary subtractive colors Cyan, Magenta and Yellow

Additive colors

  • Objects that generate light, like digital screens, create colors by mixing Red, Green and Blue lights
  • Primary additive colors, Red, Green and Blue (RGB model)

RGB Model

  • Intensity of each color ranges from 0 (no light) to 255 (full intensity)
  • A Hexadecimal value is a number between 1 and 16 represented by a number or letter from 0 to F (0123456789ABCDEF)
  • Hex code: each color intensity is represented by 2 hex values -> #FF0000 = pure red

HSB model

  • Hue: a color in its purest form
    • The Hue scale ranges from 0 to 360
  • Saturation: purity of the hue
    • 0% (desaturated) to 100% (fully saturated)
    • x axis of the color picker
  • Brightness: how light or dark a hue is
    • 0% (dark) 100% (bright)
    • y axis of the color picker

Alpha

  • Alpha is the opacity of the color
  • 0% (full transparency) 100% (full opacity)
Preview 11:29

In this video I'll tell you about the meaning of colors to help you choose a base color.

0:00 Introduction
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

Cole Townsend

5:52 Warm, cool and neutral colors
6:16 Warm colors
6:40 Red
7:50 Yellow
8:34 Orange
9:50 Cool colors
10:17 Blue
11:20 Green
12:08 Purple
12:58 Neutral colors
13:17 Black
13:59 White
15:03 Cheat Sheet
15:21 Style guide
Abstract

Color Theory

  • Color theory was developed by painters therefore relies on the subtractive color system
  • Primary colors for color theory: Blue, Red and Yellow
  • Secondary colors are created by mixing primary colors 2 by 2 Orange, Green and Purple
  • Tertiary colors are created by mixing a primary color to a tertiary color, e.g red-orange

Tints, shades and tones

  • Tint : add light to a hue
  • Shade: add black to a hue
  • Tone : add grey to a hue

Color Scheme

  • Choice of colors used in the designs
  • Framework to come up with color schemes
  1. Select a base color
  2. Select secondary colors using harmony principles
  3. Adjust tints, shades and tones

Colors meanings

  • Warm colors: red, orange and yellow. Arousing and stimulating. Advance to the foreground
  • Red: fire & blood, love & passion, Energy, strength, power, romance, determination, action, confidence, courage, vitality, desire, danger
  • Yellow: sunshine, hope, joy, cheerfulness, wisdom, intellectual energy.
  • Orange: energy, joy, tropics, enthusiasm, creativity, success, determination, attraction, encouragement, stimulation, strength
  • Cool colors: green, blue and purple. Calming and relaxing. Tend to recede
  • Blue: sky, sea, stability, depth, expertise, trust, intelligence, calm
  • Green: nature, growth, renewal, fertility, freshness, and hope, healing, wealth, money, stability, endurance, harmony, safety. Used a lot to signify validation
  • Purple: royalty, power, nobility, luxury, wisdom, ambition, extravagance, creativity, mystery, magic
  • Neutral colors: Black, White, Grey. Often serve as the backdrop, combined with brighter colors
  • Black: death, darkness and mystery, power, strength, authority, prestige.
    • Good anchor color for media content. Don't use it if you have a lot of text
    • Use Dark grey instead of pure black for text.
  • White: cleanliness, purity, perfection, space, objectivity, goodness, innocence, purity, virginity, health
  • White and light grey is great as a background color if you have a lot of content.
Preview 15:55

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:00 Intro
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
2:42 Kuler

Kuler

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

Colour Lovers

Color Collective

Dribbble

12:53 Homework: go ahead and try to create a few color schemes
Asbtract

Traditional color schemes

  • Monochromatic scheme: different tones, shades and tints within a specific hue
  • Complementary scheme: colors opposite to each other on the color wheel
  • Split complementary scheme: one hue plus two others equally spaced from its complement
  • Analogous scheme: colors adjacent to each other on the color wheel
  • Triadic scheme: colors that are evenly spaced around the color wheel
  • Tetradic scheme: four colors arranged into two complementary pairs

Create a color scheme

  • Use Kuler
  • 2 easy and effective ways to create a color scheme
    • 1 color + shades/tints of this color + 1 color at least three spaces away on the color wheel
    • 1 color + shades/tints of this color to create neutral colors
Preview 13:08

A quick your of Sketch to get things started.

0:00 Intro
0:40 Toolbar
1:34 Layers list
1:40 Creating geometric shapes
3:25 Layer options
3:38 Inspector
3:55 Canvas
Abstract

Toolbar at the top

  • Right click to add tools to the toolbar

Layers

  • Layers list in the right panel
  • Every object is a layer
  • Shapes Shortcuts:
    • R rectangle
    • O oval
    • U rounded rectangle
    • L Line
  • Set default style by selecting a shape and going to Edit > Set style as default
  • Hold shift while resizing to keep proportions
  • Hold alt while resizing to resize both sides symmetrically
  • Right click on the layer name to access the layer options

Inspector on the right

  • The inspector allows you to modify the properties of the selected layer

Canvas

  • Infinite canvas
  • Create artboards (presets or custom) by clicking the art board button in the toolbar
Preview 05:58

We'll start the design of the UI with the navigation (the top bar and the bottom bar)

0:00 Intro
0:19 Flat vs Skeumoprhism
0:52 Artboard dimensions
1:47 Retina vs non retina, pixels and points
3:22 Screen sizes

Screensizes

Dimensions converter

4:36 1x vs 2x
5:33 Designing the navigation system
6:04 Top bar
22:39 Bottom bar
33:02 Conclusion
Abstract
  • Skeuomorphism design imitates the aspect of real life objects
  • Flat design is more simple, uses less effects and focus more on content
  • 1pt = 1px non retina = 4px retina
  • 1x = design non retina / 2x = design retina
  • Hold alt when an element is select and hover over another element to display the distance between the two
  • Give a recess look:
    • gradient with the darkest color at the bottom
    • glow (white shadow) at the bottom
    • inner shadow (dark) at the top and the bottom
  • Hold the cmd key to select a layer inside a group
  • Hold alt+cmd and click to get a drop down menu with every layer under your mouse
Preview 33:19

Being able to preview your designs on the device you're designing for is crucial. I'll show you how to do that.

0:00 Introduction
0:10 Sketch Mirror
1:00 Skala

Skala

Preview 03:13

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:00 Introduction
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
6:27 SketchMine

SketchMine

7:23 The Noun Project

The Noun Project

8:42 SVG and Sketch
9:32 Conclusion
Abstract
  • Use icons from templates and icons set
  • Flatten the icon before your resize it
  • Use a dark shadow at the bottom and a white inner shadow at the top to make an object come out of the screen
Preview 09:43

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.

0:00 Introduction
1:00 Home icon
2:48 Boolean operations
7:35 Explore icon
11:43 Camera icon
15:40 Notif icon

The Noun Project

20:26 Profile icon
Abstract
  • You can create almost any graphic representation by assembling simple shapes

Boolean operations

  • Use them to combine shapes
  • Boolean operations in sketch are non destructive
  • Union: merges shapes
  • Subtract: subtracts the shapes at the top from the one below it
  • Intersect: displays the intersection between the shapes
  • Difference: remove the overlapping part

Pixel view

  • Use it if you need to be more precise
  • View > Show pixels

Vector edit mode

  • Double click on a shape to make the vector points appear

  • Hold cmd + click to add a vector point in the middle of a segment
Preview 23:23

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:00 Introduction
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
8:53 Photo
10:04 Likes
12:37 Comments
16:21 Box model
17:08 Like button
22:45 Comment button
Abstract
  • Use the magnifying glass to select a color from an existing element
  • Content -> Padding -> Border -> Margin

Masks

  • Masks are used to selectively show parts of other layers
  • Right click on the layer you want to use as a mask
  • All the layers above the mask will be affected
  • Unless you right click on them and select ignore underlying mask
  • Or unless you put the mask and the layers you want clipped inside a group
Preview 25:57

In this video we’ll design the camera flow screens.

0:00 Introduction
0:39 Create a new page
1:06 Camera Flow 1st screen
19:00 Camera Flow 2nd screen
36:00 Camera Flow 3rd screen
53:40 Conclusion
Preview 54:26

*** 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!

0:00 Introduction
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
16:53 Title
17:39 Styling the bottom bar
18:25 Bottom bar icons
Asbtract

3 ways to design an app

  • Standard: use only standard UI kit elements
  • Custom: use only custom elements
  • Hybrid: mix between the standard and custom

Layout / Visual hierarchy

  • Use grey rectangles to create the layout of your app and make sure the visual hierarchy is well balanced
  • Position everything carefully
  • Once your pleased with your layout, replace the grey rectangles by the real elements

Link Style

  • You can link the style of an element to use it later on for another element by clicking the link button at the top of the inspector and clicking the + button
Preview 28:19

In this video we'll replace the layout (the grey rectangles) with the final elements of our redesign.

0:00 Introduction
0:04 User picture and user name
3:24 Photo
4:34 Likes
7:16 Comments
9:14 Buttons
13:25 Scrolled screen
Preview 17:11

In this lesson your job will be to recreate the designs I’ve prepares for the redesign of the camera flow.
We’ll also learn a bit more about the vector tool.

0:00 Introduction
0:10 Exercise
1:07 Vector tool
3:00 Vector point modes
6:00 Scissor tool
7:10 Vector game

Vector game

Abstract

Vector tool

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

Point modes

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

Scissor tool

If you don’t have it in your tool bar, right click > customize toolbar

Allows you to cut a segment between 2 vector points

Preview 07:38

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:00 Introduction
0:25 Easy way to export
0:38 Export mode
1:08 Export
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
16:01 Conclusion

Abstract

Talk with the developer before exporting

Export file

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

Style Guide

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

Export

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

Preview 16:34

Now that you have a great design for your app, let's create an icon that will represent it.

0:00 Introduction
1:12 Icon template
1:34 Getting started
2:13 Camera icon
5:04 Camera icon gradient
5:36 Camera icon long shadow

Long shadow article

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
32:09 Prepo

Prepo

33:10 Inspiration

Inspiration

Abstract
  • Find one simple graphic element that represents your app
  • If you can't find any graphic element, use the first letter of the name of your app
  • Export without the mask
Preview 33:27

Two easy and beautiful ways to show your designs in context.

0:00 Introduction
0:21 Using a minimal iPhone template
1:56 Using a realistic iPhone template
4:50 Using real pictures

Placeit

Preview 06:48

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

HackDesign

Designer News

Preview 00:49
+
Introduction to the course
5 Lectures 08:43

Before we dive in, download the course files and make sure you have access to a Mac.

Prerequisites : have a Mac + download course material
00:20

Welcome to the course ! Let's get to know each other.

In this video we’ll explain who we are and what you can expect from this course.

Preview 02:34

In this video we'll introduce you to Sketch, the awesome design software we'll be using to design our app. And we'll show you how to install it on your Mac.

Sketch : the design software we'll use in this course
02:48

In this course we'll explain how the course works and how to get the most out of it.

Preview 02:30

Before we dive in, download the materials needed for the course. 

Everything you need to get started
00:31
+
UX Research techniques
6 Lectures 33:11

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.

We'll start by explaining the definition and distinction between UX and UI. We'll see why it's important to take time to work on User eXperience.

Preview 03:58

Design is the art of solving problems. And you can't hope to craft a good product with a good design if you don't understand what problem you're solving.

We'll help you make sure you're tackling a real problem that you truly understand.

What Problem are you solving ?
04:36

Knowing your users is crucial. You can't create a great app 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.

Understand your users
05:56

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.

Find the right solution and feature
06:15

In this lesson you'll learn how to write user narratives in order to figure out how your app will work.

Storytelling design
04:13

To make sure we're building an engaging app, we need to think in terms of psychology. And that's we'll do in this lesson, using a great tool called the Hook Model.

A bit of psychology
08:13
+
Your App version 1 - The basics of mobile app design
10 Lectures 46:52

In this section we'll show you how to quickly and efficiently turn your idea into a first version of your app. This will allow us to start learning how to use Sketch.

In the first video of this section, we'll give you a general overview of Sketch, the design software we'll use throughout the course.

Walkthrough Sketch 3
03:20

To create a functional design, you need to understand what an app is made of. That's what we'll show you along with the necessary iOS guidelines.

iOS Guidelines
05:45

The most efficient way to build the first version of your app is to use standard elements and then customise them. In this lesson we'll show how to handle and chose the elements. Let's play LEGO !

Playing LEGO
08:24

In this video, we'll use and explain the basic text functionalities of sketch while showing you how to integrate text in your designs.

Text Basics
04:09

In this course we'll start working with colors in a very practical way.

Color basics
03:21

In this lesson we'll see how to use the alignments and grid tools that will help us create clear designs.

Alignements & Grid
04:46

In this part of the course, we'll show you 2 useful ways to handle images in sketch and tell you why you should choose one or the other

Preview 02:14

Buttons are essential for the user to interact with your app. So let's see how to create them and deal with them.

Design buttons
06:36

Ok, we've already learned a lot, it's time to practice and work a little bit on your own now!

Time for practice - Camera flow
03:54

In this video we'll show you how we completed the exercise from the previous lesson.

Exercise correction - Camera flow
04:23
+
Your App version 1 - Preview, icon and basic export
3 Lectures 10:33

In this lesson we'll show you how to preview your designs on your device.

Preview on your device with Sketch Mirror
02:21

It's time to show the first version of your app to the world, let's see how to do that.

Export Artboards
04:04

What use is your app if don't have an icon for it ? Let's design a first version of your icon!

App Icon design v1
04:08
+
Your App version 2 - Visual concept
5 Lectures 20:57

In this new section, we'll start working on the the v2 of your app and its beautiful and fully designed interface. We'll begin by talking about the visual concept of your app.

In the first lesson of this section we'll talk about inspiration, where and how to find it and current design trends.

Inspiration and Trends
03:41

Let's take a few minutes to understand how the color picker works in Sketch.

Colors and color picker
03:40

Now that we know how the color picker works, let’s choose the colors we’ll use in our app and create a color scheme.

Good Practice : Color Palettes
04:09

In this optional video we'll talk about color Harmony and how to mix colors together.

Color Harmony (optional)
05:01

How to choose fonts ? how to mix typefaces ? All you need to know to handle text in your app.

Typography
04:26
+
Your App version 2 - Diving deep into Sketch and Design best practices
5 Lectures 31:04

In this course, while continuing or work on the design of our app, we'll show you how to use a great tool in Sketch: Text Syles.

Good Practice : Text Styles
03:37

In this video, we'll learn more advanced Sketch functionalities like boolean operations, vector editing, etc. by drawing icons from scratch.

Preview 09:37

Symbols is one of the greatest functionality in Sketch for mobile app designers, we'll explain you why and how to use them.

Good practices : Symbols
07:34

We've been through a lot of features that are built IN sketch. Let’s now have a look at what has been built ON it : Plugins.

Save time with plugins
03:53

In this video we'll complete our Styleguide and practice our skills by upgrading the camera flow.

Styleguide & Practice
06:23
+
Your App version 2 - Getting your app ready for the world
5 Lectures 23:58

In this video we'll show you how to export elements individually. We'll also use a great new tool to prepare the specs for the developer.

Export & Specs
06:48

Now that your app looks great, let’s create a more complex and graphic icon.

This will allow us to build up our graphic design skills. And this will also be the opportunity for you to put your Sketch knowledge into practice.

App Icon v2 and graphic design practice
09:24

You know the screenshots you see on the app store, they look cool right? That's what we'll do here !

App Store Screenshots v2
04:43

Your app is gorgeous, let’s see how we can show it to the world.

Product showcase
02:08

Congratulations!

We have a little gift for you!

Conclusion
00:55
About the Instructor
Maxime Cormier
4.4 Average rating
824 Reviews
20,987 Students
1 Course
Entrepreneur and designer

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.

Adrien Dupuy
4.4 Average rating
824 Reviews
20,987 Students
1 Course
Full stack Designer

I either design website, mobile apps or furniture.
I created apps in different categories such as social media and social networks.

I'm also mentoring startups on UX + UI in french #1 accelerator and also an official Google Launchpad mentor.

You could find all the links on adriendupuy dot com


Beside making cool products, i also love to cook and ride motorcycles.