Pixels’ requirements for design files (for external designers):

Layouts:

  • Design needed for every desktop page template (1200px wide)
  • Design needed for every individual component / section / block (can be included in page templates)
  • Design needed for mobile front page at least (incl. menus, header and footer) (320px wide)
  • Design needed for tablet front page at least (incl. menus, header and footer) (768px wide)
  • Design needed for full mobile layouts if there are any special requirements (not following normal responsive behaviour)

 

File formats:

  • Either Figma, Adobe XD or Sketch
  • (We can also use Zeplin for design handover for developers)

 

Grid: 

  • Bootstrap grid; 12 columns, container max width 1200px
  • Clear and concise spacing system (e.g. all spacers are dividable by 8, for example)

 

UI kit:

  • Colours specified (HEX codes); if some colors use opacity (like disabled buttons), this should be specified
  • Button styles and states; normal, hover, active (pressed), disabled
  • Form inputs and states; input, select, checkbox, radio (if used). States: normal, hover (especially checkbox and radio), focus.

 

Typography:

  • H1-H5(6) styles; only one H1 per page
  • Font specifics; family, size, weight, line height

 

Assets:

  • Icons, exported as SVGs
  • Logo files, exported as SVGs
  • Font files or link to fonts (license acquired if Typekit etc. is used)
  • Images / videos used in the design