Designing for development.

A guide to inclusive web development.

Making your designs look good in a mock-up is one thing, but the most successful web designers should be aware of basic development principles.

This is quick guide aims to help web designers make the jump from design to development as smooth and effective as possible.

Quick Tips

Communicate

Explain to the developer how your file is organised, where they can find the information they might need. Encourage a good relationship by helping out and talking.

Make a stylesheet

Making a stylesheet might take 2 hours of your time, but in the end it will save a lot of QA time - it makes accessibility easier to tackle and unifies a lot of the decisions.

Involve them in the process

Make sure to ask your questions in advance - is this doable? is this accessible? what is your experience with this interaction?

The Stylesheet

The most important elements
you should include in your stylesheet.

Make sure you define accessible
hover states.

From buttons to links, clickable elements and menu items, don't forget to define (or mock-up) hover states. They are essential to accessibility, and are often overlooked.

It might also be useful to define keyboard selection if your design is particularly complex, but asking the developer can give you easy answers.

Unify and explain your font leading and tracking.

Whether you use pixels, percentage or points, make that your stylesheet uses the same values, and is consistent on all screens. Assigns styles to your sizes, and specify type details such as tracking and font leading (and test it before defining).

Specify colour codes and accessible colour combinations.

If you design your own branding, check the accessible colour combinations because sending it to the client. If you receive the branding, check the colours given by the client and advise them if necessary. You are the expert!

Always specify your colour codes in the stylesheet and give a role to the colours. This allows the developer to know what to use if an information is missing, and to avoid using non-accessible colour combinations.

hover state illustrationType illustrationeyes illustrationdesktop, tablet and mobile phone illustration

Don’t forget other screens
and responsiveness.

Include design for all screens in you file, but don't forget about them in the stylesheet either. Specify font styles for mobile (and tablet), include the grid, and specify how hover interactions or desktop animations work on mobile if different.

An important element that will make your life easier (and the developer's) is using consistent and responsive spacing blocks.

If there is a form, don’t forget to design error states and to label the instructions correctly.

Add a page in your stylesheet for forms (even a newsletter sign-up) and be thorough with the different results. This includes error, mandatory fields, tick boxes, on click behaviour as well as successful result.

Depending on your target audience, focusing on clearer and bigger instructions might be something to focus on as well.

illustration

The Stylesheet

This is a guide of specific elements
a designer should look for when
choosing a font - specifically a font
used to convey key information and content. These are not official
guidelines.
These are our pieces of advice regarding elements
you need to include in your stylesheet.

Make sure you define accessible hover states.

hover state illustration

From buttons to links, clickable elements and menu items, don't forget to define, and if needed mock-up hover states. They are essential to accessibility, and are often overlooked.

It might also be useful to define keyboard selection if your design is particularly complex, but asking the developer can give you easy answers.

Unify and explain your font leading and tracking.

Type illustration

Whether you use pixels, percentage or points, make that your stylesheet uses the same values, and is consistent on all screens. Assigns styles to your sizes, and specify type details such as tracking and font leading (and test it before defining).

Specify colour codes and (if needed) accessible colour combinations.

eyes illustration

If you design your own branding, check the accessible colour combinations because sending it to the client. If you receive the branding, check the colours given by the client and advise them if necessary. You are the expert!

Always specify your colour codes in the stylesheet and give a role to the colours. This allows the developer to know what to use if an information is missing, and to avoid using non-accessible colour combinations.

Don’t forget other screens and responsiveness.

desktop, tablet and mobile phone illustration

Include design for all screens in you file, but don't forget about them in the stylesheet either. Specify font styles for mobile (and tablet), include the grid, and specify how hover interactions or desktop animations work on mobile if different.

An important element that will make your life easier (and the developer's) is using consistent and responsive spacing blocks.

If there is a form, don’t forget to design error states and to label the instructions correctly.

illustration

Add a page in your stylesheet for forms (even a newsletter sign-up) and be thorough with the different results. This includes error, mandatory fields, tick boxes, on click behaviour as well as successful result.

Depending on your target audience, focusing on clearer and bigger instructions might be something to focus on as well.

Resources

Resource name
Black circle with arrowPink circle with arrowBlue circle with arrow

One of our favorite when doing web design.

Colour Contrast Checker
Black circle with arrowPink circle with arrowBlue circle with arrow
WACG Guidelines
Black circle with arrowPink circle with arrowBlue circle with arrow

Have a look at the official guidelines.

Examples

Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Layout graphic

Have a look at our other guides

Typefaces graphic

Have a look at our other guides

Layout graphicTypefaces graphic