In this chapter we’ll talk about the guidelines for visual designers.
Your essential tooling
- Pen and paper
- Whatever works to make things pretty
- 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