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