Skip to content

Instantly share code, notes, and snippets.

@CarlMungazi

CarlMungazi/design-guidelines.md

Last active April 1, 2019 13:32
Show Gist options
  • Save CarlMungazi/9a8644dd3d8a34e96023b664dec4bcb0 to your computer and use it in GitHub Desktop.
Save CarlMungazi/9a8644dd3d8a34e96023b664dec4bcb0 to your computer and use it in GitHub Desktop.
Download ZIP
Design guidelines
Raw
design-guidelines.md

Typography

  • Use font sizes between 15-25px for body text
  • Use bigger font sizes for headlines. Decrease font-weight as font-size increases.
  • Use 120-150% of font-size for line-height
  • Allow 45-90 characters per line. Increase font-size and/or whitespace or use a multi-column to help with this
  • Use sans-serif fonts for UI elements and most other things. Use serif fonts for content and long text sections
  • Do not put text on images you do not control
  • Text shadows can improve legibility
  • 4:5:1 contrast ratio for text below 24px and 3:1 for text above 24px
  • Do not mix text effects which add emphasis. For example, do not underline and italicise text which is also bold
  • Title and body text should be different
  • Color, font-size, font-weight and other text effects help establish visual hierarchy
  • Title text should be 1.5 times bigger than body text
  • Use dynamic type to allow mobile users to change font-size to their preference
  • General rule: do not center body text or title text
  • If mixing serif and sans-serif fonts, use very different fonts

Colors

  • Use one base colour (not pure white, black or grey). Create a colour palette from this
  • Have one or two highlight colours but use them sparingly
  • Use main colour to draw attention to most important things like call-to-action buttons
  • Never use pure black, opt for a darker shade of grey. Equally, never use pure grey, opt for a shade of grey. However, off-white looks dirty, so pure white works better
  • If you use fewer colours, use other effects to establish visual hierarchy
  • https://cdn2.hubspot.net/hubfs/2799924/Design-Infographics/Color-Theory-Infographic-Toptal.pdf

Images

  • Use text on images if the image is dark and the text is lighter. You can also overlay the image with a different colour.
  • When putting text on images, use a big font but watch your font-weight
  • Put text in opaque boxes/different colour boxes to make it stand out
  • You can also blur the image if you want to put text over it
  • Use the floor fade (image gets darker at the bottom) and put text at the bottom of the image

Icons

  • Use icons to list features or show a series of steps. Can also be used for actions (send a message icon) or links but if using them for this, make sure the icon is recognisable and labelled
  • Icons should not take center stage but complement everything else
  • Use icon fonts whenever possible because they scale better

Spacing & Layout

  • Use whitespace between elements, element groups and sections
  • Define visual hierarchy using whitespace
  • Define where the user should look first, establish the flow of content and then use whitespace to build that flow

Forms

  • Make forms one column because multiple columns disrupt a user's vertical momentum
  • Align labels at the top of input labels instead of the side. Make sure they're close to their input labels. This avoids confusing the user
  • Avoid capitalising form labels because it is difficult to read and scan
  • If your select element has six options or fewer, place them side-by-side
  • Do not use placeholders as label because it can cause usability issues. See this
  • Define where the user should look first, establish the flow of content and then use whitespace to build that flow
  • Place checkboxes (and radios) underneath each other for scannability
  • Make your CTA buttons descriptive. Use "Sign Up" instead of "Submit", for example
  • Use in-line errors to show the user where the error occured. Also provide a reason for the error
  • Don't validate the user's input whilst they are typing unless it is useful.
  • Don't hide basic helper text (like telling the user how many characters they should have in their password). You could place it next to the input when the user is focused on that particular input field
  • Make clear the difference between primary CTAs (sign up button, for example) and secondary CTAs (cancel button). You could use a ghost button for the secondary CTA and a colour for the primary CTA
  • When limiting the length of the user's input, such as a post code, make the length of the input field proportionate to the expected input
  • Instead of using asterisks to denote required fields, put "Optional" next to fields which are not mandatory
  • Group related information, especially in long forms
  • Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded
  • If you can automatically grab user data via their location, voice, SMS etc, use this. Automating data entry lessens the load on the user's consciousness

Miscellaneous

  • Shadows should be natural. Remember: light comes from above, so your shadows should be at the bottom of elements
  • General rule: lines should be 1px wide. And dividers should be subtle and not pure white or black
  • When using a grid, separate each grid line by at least 8px

Design Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment