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

Your essential tooling

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

Your guidelines

  • Start from the wireframes in the order of the story backlog
  • Start with the most important screens first.
  • Use a grid system
  • Make sure designs are scalable
  • Please inform us beforehand when using fonts which need to be commercially purchased. And please make sure the font is compatible for web
  • Please use layers for different items so it’s easy to break up and use.
  • 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
  • Make sure all content is delivere

Process as a designer

  • Read the ‘Design questionaire’, which includes the general feel and emotion of that the clients would like to have communicated.s
  • 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