Design handover and standards
Designers are responsible for handing their design files to developers for development, explaining the design intentions, and providing design support to the developer as they build the website.
Designers and developers need time to do this together.
Designs for web projects are created in Sketch or Figma. The design tool doesn't matter as long as the output is fit for use by the team.
Design files must contain some baseline information to explain the design principles, and for consistency and quality.
Design file requirements
Fundamentals
Fundamentals are the underlining design principles and materials. A set of design choices, instructions and calculations to govern the project.
A build-ready, project design file should include these Fundamentals:
- Colours
- Typography
- Links and buttons
- Lists
- Icons — size and alignment
- Tables
maincontainer — breakpoints and width constraints
If your project doesn't need a required Fundamental, like buttons or definition lists, note it in the design file.
You can document additional design Fundamentals such as, shadows, blurs, overlays, avatars, images etc. — as suits your project approach.
Components
Common UI parts and patterns.
Key project components, illustrated with spacing documentation for build, e.g. Navigation, Cards, Breadcrumbs, Collapsibles, etc.
Depending on approach and budget.
Assets for export
All the exportable instances of project assets should be gathered on one page.
For example, header logo, UI icons, illustrations, social icons, etc.
Assets should be the right size, grouped, exportable or the designer should directly export them and put into a folder for the developer and note it's location on the assets page.
Dimensions should be 4px base.
Templates
The purposeful use of the design fundamentals and components.
Key page templates are chosen by the designer to illustrate.
The designs should:
- Use real or realistic content
- Note accessibility considerations
- Illustrate interactive states
Work status
Illustrate the status of your work, to help other team members understand progress, decisions and work they can undertake.
Mark templates and components with: in progress, review, develop, complete, etc.
Prototype the fundamentals
Use the typography test page to see how things are working.
Our design fundamentals are validated and adjusted collaboratively through our two mediums: the design tool (Figma or Sketch) and the web browser.
Implementing our project fundamentals immediately in the browser allows us to:
- Check colour contrast on real screens
- Test site wrappers, gutters and ‘standard’ grid layouts at different widths
- Ensure the fluid typography feels harmonious, on various devices
- Deploy something to staging right away, testing our build system in the process
- Have productive and meaningful discussions between designer and developer