Mobile App Design from scratch

Maxime Cormier, Entrepreneur and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (7h 33m)
    • 1. Trailer

      2:15
    • 2. Introduction

      2:15
    • 3. How this course works

      3:24
    • 4. UX and UI

      2:54
    • 5. Sketch vs Photoshop

      6:48
    • 6. What problem are you solving?

      5:35
    • 7. Who are your users?

      8:57
    • 8. Finding the right solution

      7:45
    • 9. Storytelling Design

      13:47
    • 10. Mockups 1/2

      42:39
    • 11. Mockups 2/2

      24:37
    • 12. Finding inspiration

      8:51
    • 13. Typograhy

      15:32
    • 14. Understand the color picker

      11:29
    • 15. Color theory 1/2 - Meanings of colors

      15:55
    • 16. Color theory 2/2 - Color harmony

      13:07
    • 17. Sketch tour

      5:58
    • 18. Designing the navigation

      33:19
    • 19. Preview on device

      3:13
    • 20. Using existing icons

      9:43
    • 21. Creating our own icons

      23:23
    • 22. Designing the home content

      25:57
    • 23. Designing the camera flow

      54:26
    • 24. Redesigning the navigation

      28:18
    • 25. Redesigning the home content

      17:11
    • 26. Redesigning the Camera Flow

      7:38
    • 27. Styleguide and Exporting

      16:34
    • 28. Designing the icon of your app

      33:27
    • 29. Showcasing your designs

      6:48
    • 30. Conclusion

      0:49

Project Description

Learn to design by recreating Instagram

Getting ready to design

  1. Download the course files

    Download this folder

    It contains 3 folders:

    • Lesson files: all the files used in the videos and that you will need for the exercises
    • Cheat sheets: abstracts of everything taught in this course
    • Templates: templates used in this course + templates you might need to design your own project
  2. Chose a personal project

    The best way to take this course is to apply the instructions given in each lesson twice. First on the Sample app, then on a personal project.

    If you don't have a personal project, identify a small problem that you or people you know have and that you could solve with a mobile app. 

    If you have a hard time coming up with an idea, try to identify the problems the apps you have on your phone are trying to solve. Chose one and start from that and try to forget how the app is currently solving this problem and what its interface looks like.

  3. Understand the difference between UX and UI

    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

  4. Read Articles about Designers who use 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

  5. Install Sketch

    Get the Full version

    Or the 15 days free trial

UX research

  1. Find your problem and customer hypothesis

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

    Write down your problem and customer hypothesis. Maximum 10 words each.

  2. Fill your proto persona

    Fill the 4 blocks of the canvas you can find in the Cheat Sheets folder.

    • Facts: factual relevant informations about the user, not necessarily demographics.
    • Pain: core problem
    • Behavior: behavior the user currently exhibit because he doesn't have our solution.
    • Goals: what is the user trying to accomplish through the behavior that our solution will do better.
  3. Get Out Of The Buillding

    Go talk to at least 10 people to test your problem hypothesis and your persona.

    Remember, you're not pitching a solution, you're trying to understand people and if/how they face the problem you've identified.

    Keep this in mind:

    • Ask open ended questions

    • Rephrase what people tell you

    • Write down insights
    • Validate with currency

    Once you've done that, refine your hypothesis and go test the new ones if the previous ones were invalidated. 

    When your hypothesis are validated, add the insights you've collected to your persona, give it a name and possibly a face.

  4. Come up with 10 ideas of a solution

    Our first idea, no matter how great it can seem at first is rarely the best idea we can have. Use the following techniques to come up with 10 ideas of a solution:

    • 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
  5. Find your ONE feature

    Talk to potential users about your solutions, help them help you to picj one, and decide what will be the key feature of the app:

    • 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
  6. Write the User Narrative of your Key Feature

    Remember the persona is the voice of the story.

    Start with a goal story of your key feature:

    • As [user persona]
    • I want to [accomplish something]
    • so that [some benefit happens]

    Break your key feature goal story 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
  7. Fill the Desire Engine Canvas

    Use Nir Eyal's Desire Engine Canvas in the Storytelling Design 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

    Warning: this exact framework might not be adapted to all projects but it's still a very good brainstorming tool.

  8. Write secondary features narratives

    Write the goal stories and smaller stories for your secondary features. If at some point you're asking yourseld if these features are necessary, it probably means that they're not.

    Organize all stories with post its on your wall or in a table in a keynote, word or excel document, as seen in the video.

Mockups

  1. Prepare the flow of the app

    Use the Mockups Template in the Templates folder.

    Prepare the screens that correspond to the steps in your narratives.

    Below each screen write in 1 sentence what the user is supposed to do in this screen.

    165ec666

  2. Choose a navigation system

    Choose a navigation system.  It should be as simple as possible (don't choose the 5 tabs if you don't have 5 distinct flows) and it should highlight your main action.

    You can chose one of the classic navigation patterns or come up with a system of your own:

    - Tabs bar (generally 3, 4 or 5), like Facebook and Instagram

    IMG_2691.PNG?1384806493

    IMG_2001.PNG?1380316532

    - Sliding Menu and floating button like Foursquare

    IMG_2855.PNG?1386629375

    IMG_2854.PNG?1386629373

    - Drop down menu like Vine

    c0ba7f2fc622004ea259513eab00057455035b58

  3. Start with your main feature

    Start the mockups with your main feature flow.

    Keep it as simple and frictionless as possible. You don't want to give your users too many choices, keep them focused on accomplishing your main action. It is the only way for them to really understand the value of the app and therefore continue using it.

    Use the bricks from the Elements artboard to build your mockups, it's like playing LEGO.

  4. Complete mockups

    Once you're happy with your main feature flow, work on the other narratives.

    Remember, Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away".

Visual concept

  1. Start collecting inspiration

    1. Read Don't copy, steal by Meng To.

    2. Create a Gimmebar account.

    3. Install the Gimmebar chrome plugin.

    4. Start collecting inspiration from Dribbble and Behance.

    5. Subscribe to Sidebar

    6. Explore these UI collections:

    Pttrns

    Mobile patterns

    UX Archive

    Android app patterns

    Android niceties

    Android UX

  2. Explore Typography

    1. Play the Kerning game.

    2. If you want, learn more about Typeface Classifications.

    3. See how Medium.com mixes typefaces

    4. Find a new font you like: 

    Google Fonts

    Google webfonts that don't suck

    More Google webfonts that don't suck

    ilovetypography.com

    Myfonts bestsellers

    5. Use What The Font or the Font plugin to identify a font you like

    6. Add a new font to your fontbook

    7. Pick one font for your logo and one font for the text of the app. If you don't know what font to use for the text, use Helvetica (Neue).

    You can try several combinations and later see what works best in context.

  3. Understand how the color picker works

    1. Make sure you understand the difference between:

    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)

    2. Understand the 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

    3. Understand the 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 (or value): how light or dark a hue is
      • 0% (dark) 100% (bright)
      • y axis of the color picker

    34fdc80b

    4. Play the Color game

  4. Choose a base color

    Watch the video about color meaning and choose a base color that suits your app.

  5. Create your color scheme

    Create the first iteration of your color scheme using Kuler and the recommendations in the video about Color Harmony.

    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

    f04afc8a

    • 1 color + shades/tints of this color to create neutral colors

    b8cbf6dc

    Find some inspiration here on Colour LoversColor Collective or Dribbble.

Designing the first version of our app

  1. Play with the shapes tool

    Open a new Sketch file and play around with the shape tool:

    • Shapes Shortcuts:
      • R rectangle
      • O oval
      • U rounded rectangle
      • L Line
    • 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
  2. Understand the difference between Flat and Skeumorphism

    Skeuomorphism design imitates the aspect of real life objects.


    Flat design is more simple, uses less effects and focus more on content.

    Two examples with Skeuomorphism on the left and flat on the right:

    e2089d74

    595bd298

  3. Build the iOS 6 version of the sample app

    Follow the videos to build the iOS 6 version of the sample app. 

    Don't start working on the UI of your personal project yet, wait untill you've finished this unit. It wouldn't make sense today to have an iOS 6 version of your app.

    The goal of this unit is to get you familiar with Sketch, and to show you, in comparison with the next unit, how Less is More.

  4. Preview your design on your Mobile Device

    Use Sketch Mirror

    Or Skala

  5. Learn to use existing icons

    Find free icons and .sketch templates and file on Sketchmine

    Find free .eps icons on The Noun Project

  6. Create your own icon

    Try to create a simple icon for your app. No the square icon that will be on the iPhone screen, I'll show you how to do that later, just a shape that could represent your app.

    Remember that you can create almost any graphic representation by assembling simple shapes.

Redesigning our app

  1. Design the navigation of your app

    Start the design of the UI of your app with the navigation.

    In the sample app we use a 5 tabs bottom bar and a top bar for the title and the refresh button.

    Depending on the navigation system you've chosen for your personal project, you might not need a bottom or a top bar. If you're feeling creative, you might not need any bar at all

    Don't hesitate to use and customize templates from the Templates folder or from Sketchmine.

  2. Prepare the layout of your app

    Use grey rectangles to create the layout of your app and make sure the visual hierarchy is well balanced.

    For now, focus on the Home and your main feature flow.

    Position everything carefully. But don't be afraid to modify this layout later as you style the different elements. Again, Design is iterative and it's normal to modify things as you progress.

    65119bb0

  3. Design your Home

    Once your pleased with your layout, replace the grey rectangles with the real elements.

    Again don't hesitate to use and modify existing elements from the files you've downloaded at the beginning of this course or from Sketchmine. But be careful to stay consistent.

    If you're not sure about how to handle a specific aspect of your UI, don't be afraid to steal from successful apps, check: 

    Pttrns

    Mobile patterns

    UX Archive

  4. Create a least one custom icon

    Creating your own icons can be an effective way to give a specific personality to your app. 

    Remember you can create almost any graphic representation by assembling basic shapes. This is especially useful if you need to create your own icons.

    You can also use the vector tool to create more complex shapes.

    If you create several icons that will be used on the same level, for instance, tab icons, slider menu icons or icons for the same kind of button, make sure they both fit in squares of the same dimensions.

  5. Design your Key Feature flow

    Remember to keep the user focused on achieving the task you want him to achieve, so don't give him too many options.

    Make sure that Call To Actions are clear and obvious. 

Getting your app out of the building

  1. Create your export file

    If you already know who will code the app talk to them first to find out how they work.

    Then create your Export file. The export file is made of two parts

    Export: the slices of elements which will be exported. Slices from a same category have to have the same size

    Bricks: design elements you and your team can use to build the screens of the app.

    59c92167

  2. Create your 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.

    7ad186c2

  3. Export your slices

    Select a layer or a group of layers, go to file>add slices for selection.

    You can also enter the export mode by clicking the export button in the toolbar on the right. Fromt here, you can create new slices and edit existing ones in the export mode

    Export slices as PNGs

    A few tips

    • 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
  4. Design the icon of your app

    Come up with at least 3 different ideas for the icon of your app:

    • 1 with the 1st letter of the name of your app
    • 2 with a simple graphic element 

    Each idea should have 2-3 variations:

    • Colors
    • Shadows
    • Sizes
    • Effects
    • ...

    Export your icon without the mask.

    ba70decb

  5. Showcase your designs

    1. Use one of the iPhone templates from the files that come with this course or from Sketchmine to showcase your designs.

    ce2aff70

    2. Place your app in context with Placeit

    529c4c93

Additional Resources

Student Projects