— 1) Research — 2) Mockups

—3) Visual concept — 4) Interface

1) UX Research

Set problem hypothesis: Try to write down your problem hypothesis in less than 10 words.

Set customer hypothesis: Create a proto persona with the Persona Canvas.

Test hypothesis: Talk to people to test your problem and customer hypothesis.

Interview tips:

  • Talk to your target;
  • Talk one to one;
  • 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.

Analyze learnings and Refine:

  • Analyze what you’ve learned during your conversation — Sort what’s validated and invalidated;
  • Refine persona;
  • Start over with new hypothesis.

Find a lot of solutions:

  • Write everything down and keep thinking, focus on quantity and withhold criticism;
  • 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.

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 will be focused and oriented towards;
  • Only keep the sub-features that are needed to make the main feature work;

Write 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]”; — than break into smaller stories;
  • Write the stories on post its and stick them to the wall;
  • Remove as much friction as you can, make the first steps of the flow very easy.

Use the Desire Engine:

  • 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.

2) Mockups


  • Mockups (or wireframes) = blueprint of your app;
  • Mockups allows 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.

3) Visual concept


Typography basics:

  • 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”;
  • 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 business 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 (font): 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.
  • apps: 1) One typeface for the text; 2)One typeface for the title/logo.

Color picker:

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: opacity of the color.
0% (full transparency) 100% (full opacity).

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
    good to get attention;
  • Orange: energy, joy, tropics, enthusiasm, creativity, success, determination, attraction, encouragement, stimulation, strength
    good to get attention;
  • 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 served 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.

Mixing colors:

  • 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
    – Two 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.

4) Interface design

Retina / non-retina:

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.

Preview your designs on the device you’re designing for:

  • Use Sketch Mirror (built in Sketch);
  • Or Skala;
  • Or Marvel;
  • Or InVision, there are a lot of tools.


How to 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.

Make an object come out of the screen:

  • dark shadow at the bottom;
  • white inner shadow at the top;


  • light color at the top and dark color at the bottom: convex;
  • dark color at the top and light color at the bottom: concave.

Use icons from templates and icons set.

Flatten the icon before your resize it.


  • You can create almost any graphic representation by assembling simple shapes;
  • Use boolean operations 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;

– Use the pixel view mode if you need to be more precise;

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.
  • Talk with the developer before exporting;

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.

App icon:

  • 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.

Source link


Please enter your comment!
Please enter your name here