Mobile App Design Cheat Sheet.pdf
Content
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 -‐ 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 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] -‐ Break into smaller stories -‐ Write the stories on post its and stick them to the wall -‐ Remove as much friction as we 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 Definition -‐ 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
Visual concept Inspiration -‐ Don't be afraid to steal ideas. -‐ Collect inspiration all the time. Use Gimmebar -‐ Inspiration sources: http://dribbble.com/ http://www.behance.net/ http://pttrns.com/ http://www.mobile-‐patterns.com/ http://uxarchive.com/ http://www.android-‐app-‐patterns.com/ http://androidniceties.tumblr.com/ http://androidux.com/ 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 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 (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 -‐ Mobile apps • One typeface for the text • 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 -‐ 2 easy and effective ways to create a color scheme 1. 1 color + shades/tints of this color + 1 color at least three spaces away on the color wheel 2. 1 color + shades/tints of this color to create neutral colors
Interface design Retina / non-‐retina -‐ 1pt = 1px non retina = 4px retina -‐ 1x = design non retina / 2x = design retina -‐ Check resolution: http://screensiz.es/ -‐ Convert dimensions: http://www.teehanlax.com/blog/density-‐converter/ 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: http://bjango.com/mac/skalapreview/ Sketch Shortcuts See the Sketch Keyboard Shortcuts file. -‐ Hold alt when an element is select and hover over another element to display the distance between the two Effects -‐ 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 -‐ Gradient • 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 Boolean -‐ 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 if you need to be more precise -‐ View > Show pixels Vector edit mode -‐ double click on a shape to make the vector points appear, or hit enter if the shape is selected -‐ hold cmd + click to add a vector point in the middle of a segment 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 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 -‐ Content -‐> Padding -‐> Border -‐> Margin
Style guide and exporting 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 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 -‐ Export without the mask
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] -‐ Break into smaller stories -‐ Write the stories on post its and stick them to the wall -‐ Remove as much friction as we 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 Definition -‐ 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
Visual concept Inspiration -‐ Don't be afraid to steal ideas. -‐ Collect inspiration all the time. Use Gimmebar -‐ Inspiration sources: http://dribbble.com/ http://www.behance.net/ http://pttrns.com/ http://www.mobile-‐patterns.com/ http://uxarchive.com/ http://www.android-‐app-‐patterns.com/ http://androidniceties.tumblr.com/ http://androidux.com/ 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 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 (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 -‐ Mobile apps • One typeface for the text • 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 -‐ 2 easy and effective ways to create a color scheme 1. 1 color + shades/tints of this color + 1 color at least three spaces away on the color wheel 2. 1 color + shades/tints of this color to create neutral colors
Interface design Retina / non-‐retina -‐ 1pt = 1px non retina = 4px retina -‐ 1x = design non retina / 2x = design retina -‐ Check resolution: http://screensiz.es/ -‐ Convert dimensions: http://www.teehanlax.com/blog/density-‐converter/ 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: http://bjango.com/mac/skalapreview/ Sketch Shortcuts See the Sketch Keyboard Shortcuts file. -‐ Hold alt when an element is select and hover over another element to display the distance between the two Effects -‐ 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 -‐ Gradient • 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 Boolean -‐ 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 if you need to be more precise -‐ View > Show pixels Vector edit mode -‐ double click on a shape to make the vector points appear, or hit enter if the shape is selected -‐ hold cmd + click to add a vector point in the middle of a segment 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 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 -‐ Content -‐> Padding -‐> Border -‐> Margin
Style guide and exporting 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 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 -‐ Export without the mask
