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.
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.
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).
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.
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.
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.