Mobile App Design from Scratch: Design Principles, and UX

A step by step guide to learn how to design a great mobile app.
89 reviews
TAUGHT BY
  • Maxime Cormier 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.

WHAT'S INSIDE
  • Lifetime access to 30 lectures
  • 7+ hours of high quality content
  • Closed captioning enabled
  • A community of 12700+ students learning together!
  • 180+ discussions
SHARE

Mobile App Design from Scratch: Design Principles, and UX

A step by step guide to learn how to design a great mobile app.
89 reviews

HOW UDEMY WORKS?

Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

Learn and practice real-world skills and achieve your goals.

COURSE DESCRIPTION

“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 Research and Design
  • Outlining Visual Concept
  • Designing the First Version
  • Redesigning Our App
  • Creating a Style Guide

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

    • No specific skills required
    • You need to have a mac
    • Over 30 lectures and 7.5 hours of content!
    • Give you a workflow that will take you from your idea to a fully designed product.
    • Explore your idea in depth to find the right way to build your app
    • Full proficiency in design software
    • Very good understanding of design principles and how to use them
    • Entrepreneurs
    • Developers
    • Product Managers
    • Designers
    • Aspiring designers/entrepreneurs
    • Students
    • Any one who wants to build or improve a mobile app

THE UDEMY GUARANTEE

30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion

CURRICULUM

  • SECTION 1:
    Getting ready
  • 1
    Prerequisites: download the course files + have a mac
    Text
  • 2
    Introduction
    02:15

    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 
  • 3
    How this course works
    03:24

    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 
  • 4
    UX and UI
    02:54

    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
  • 5
    Sketch vs Photoshop
    06:48

    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
  • SECTION 2:
    UX Research
  • 6
    What problem are you solving?
    05:35

    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
  • 7
    Who are your users?
    08:57

    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
  • 8
    Finding the right solution
    07:45

    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
  • 9
    Storytelling design
    13:47

    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
  • SECTION 3:
    Mockups
  • 10
    Mockups 1/2
    42:39

    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
  • 11
    Mockups 2/2
    24:37

    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 
  • SECTION 4:
    Visual concept
  • 12
    Inspiration
    08:51

    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
  • 13
    Typography
    15:32

    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
  • 14
    Color picker
    11:29

    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)
  • 15
    Color theory 1/2 - Meanings of colors
    15:55

    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.
  • 16
    Color theory 2/2 - Color harmony
    13:08

    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
  • SECTION 5:
    Designing the first version of our app
  • 17
    Sketch tour
    05:58

    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
  • 18
    Designing the navigation
    33:19

    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
  • 19
    Preview on device
    03:13

    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

  • 20
    Using existing icons
    09:43

    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
  • 21
    Creating our own icons
    23:23

    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
  • 22
    Designing the Home content
    25:57

    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
  • 23
    Designing the Camera flow
    54:26

    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 
  • SECTION 6:
    Redesigning our app
  • 24
    Redesigning the Navigation
    28:19

    *** 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
  • 25
    Redesigning the Home content
    17:11

    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 
  • 26
    Redesigning the Camera flow
    07:38

    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

  • SECTION 7:
    Getting your app out of the builiding
  • 27
    Styleguide and exporting
    16:34

    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

  • 28
    Designing the icon of the app
    33:27

    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
  • 29
    Showcasing your designs
    06:48

    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

  • 30
    Conclusion
    00:49

    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

UDEMY BY THE NUMBERS

5,200,000
Hours of video content
19,000,000
Course Enrollments
5,800,000
Students

RATING

  • 73
  • 8
  • 3
  • 3
  • 2
AVERAGE RATING
NUMBER OF RATINGS
89

REVIEWS

  • Phani Gundamraj
    Amazing

    Amazing course. It covered everything I was looking for. I am sure everybody will find all they need for designing an app from this course.

  • Danny Chan
    Best Course Ever

    So nice, learn soooo much. I'm building my own app after I finished this course! So Much useful infomation!

  • Ilia Sharin
    Course is good for beginners in design

    For beginners. Explains problems to solve, high level of UI/UX ways to deal with mobile interfaces. But really useless for persons already familiar with basics and wanting to go deep into details, variety of options and latest trends in mobile design.

  • Becca Sacash
    Disappointing

    This course should be called "Sketch 101" or perhaps "How to Design Instagram". It is not advertised in the course description, but you must pay $99 for a Sketch license, unless you complete the course quick enough for the free trial of the software. Furthermore, Sketch 2 is used in each of the videos, which is now outdated. Sketch 3 has a few differences which impact the ability to follow these course videos. In general, this course gives an overview of how to use Sketch 3, but mostly requires clicking and dragging elements from a generic stock artboard. Upon completion, I was hoping to have a complete understanding of how to design my own apps, but most of this course is spent designing a fake Instagram. Overall, I'm disappointed with the course.

  • Luciano Lera Bossi
    Great course!

    Thanks Maxime! Awesome course. Plenty of content & easy to understand.

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion