Designing for 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
Make a stylesheet
Involve them in the process
The Stylesheet
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.
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.
The Stylesheet
a designer should look for when
choosing a font - specifically a font
used to convey key information and content. These are not official
guidelines.
you need to 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, 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.
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.
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.
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.
Resources
Resource name
One of our favorite when doing web design.
NHS link
To learn the why and hows.
Colour Contrast Checker
NHS link
To learn the why and hows.
WACG Guidelines
Have a look at the official guidelines.
Other Reference
To learn the why and hows.
Examples
Example
Example
Example
Example
Example
Example
Example
Have a look at our other guides
Have a look at our other guides