a little shot of inspiration

Designing for developers

Designing for developers

1st June 2017

A design can look great from the outset, but be a burden for a developer.

 

In an ever growing industry it’s important for designers to consider how their design will be constructed for the web. Websites are updated constantly and it’s the developers job to implement these changes as and when. A well designed website allows for a smoother ride in the future.

Designing and developing a website go hand in hand, it’s about working as a team.

We have put together a checklist to help designers and developers work collaboratively to produce beautiful and complex websites that support simple, continuous evolution:

1. Grid system

Design within a 5-10px grid, as no-one likes a 231.57px column.

2. Limitations

Ensure both designers and developers are aware of the technology constraints of the project.

3. Web ready assets

Always export images for the web to ensure file sizes are kept to a minimum.

4. Processing assets

Make sure the developer is getting the assets in the right shapes for building.

5. File types

Ensure the type matches the image and only use transparency when required.

6. Responsive design

A combination of designer and developer expertise provides the best results.

7. Animation design

Likewise, both designer and developer should discuss this early on to streamline the development process.

8. Fonts

Provide the font size, weight, styling and colour for the main copy and each header tag used (h1, h2, h3 etc). This will ensure type consistency across the website.

9. Forward-thinking

Dynamic content should be fully scoped to ensure any future content is compatible with the design. For example: A blog will continue to grow with new articles which may include imagery. The structure should either be able to handle various image dimensions or you ensure that new articles follow a strict image size guide.

10. Coffee

Any disagreements can be solved by providing the developer with a good coffee, trust us on that one.