— 1) UX Research — 2) Mockups
—3) Visual concept — 4) Interface design
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.
- 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 app 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.
- 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
- Don’t be afraid to steal ideas.
- Collect inspiration all the time. Use Gimmebar — Inspiration sources like Dribbble, Behance, PTTRNS, UXArchive, Mobile-patterns.
- 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.
- 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.
- 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.
- Avoid using fonts from the same family;
- Play with size, weight, color.
- Mobile apps: 1) One typeface for the text; 2)One typeface for the title/logo.
- 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.
- 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).
- 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
- 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 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;
- 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
- 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.
- 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:
- 1pt = 1px non retina = 4px retina;
- 1x = design non retina / 2x = design retina;
- Check resolution;
- Convert dimensions.
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:
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;
- 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;
- 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.
- 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.