In this chapter we’ll talk about the guidelines for visual designers.

Your essential tooling

  • Pen and paper
  • Sketch
  • Whatever works to make things pretty

Your guidelines

  • Make sure all content is delivered
  • Start from the wireframes in the order of the backlog
  • Start with the most important screens first.
  • Use a grid system
  • Use a lot of white and space
  • Please inform us beforehand when using fonts which need to be commercially purchased. - Please make sure the font is compatible for web
  • Google fonts are leading
  • Please use layers for different items so it’s easy to break up and use. Don’t overdue layers however.
  • For logos, symbols or icongraphy please use vectors where possible, so we can make it responsive and use it on different devices.
  • Upload all screens to InvisonApp in order to show it to the team and allow collaboration and feedback.
  • Make a styleguide and try to keep it in check

Process as a designer

  • Read the ‘Design questionaire’, which includes the general feel and emotion of the designs.
  • Check the mockups and the design briefing.
  • If there is a briefing via Jing or via screencast make sure to check that out.
  • Design the most important screens first.
  • Upload the screens to invisionapp and ask everyone to collaborate and provide feedback.
  • Make sure you’ve designed active, hover, focus states.

Delivering to designer

  • Fill in the ‘Design questionaire’
  • Provide mockups with a design briefing per screen.
  • Provide all possible content to the designer. - Provide logo’s in vector (.EPS/.AI/.SVG) - Styleguide
  • If possible, deliver a video explaining the product the screens.
  • Deliver possible inspiration, which can be competitor websites, or just things which are considered pretty or to get the point across.

Default sketch grid

  • Canvas size: 1400px
  • Columns: 12
  • Content width: 1200px (1176px with margin left and right 12px)
  • Gutters: 24px
  • Column-width: 76px
  • Baseline: 12px

Resources

Stock

Fonts

Sketch

Mock-ups

Palettes

Inspiration