kitchen_sink_style_guide

How developers and designers can work better together

Last week I delivered a lightening talk at WordCamp Brighton on how designers and developers can improve their working relationship. Below I’ll share the key points from the talk.

I’ve been designing websites for over 15 years. In my time I’ve designed and overseen the build of countless websites. The relationship between designers and devs is not always straight forward, as we approach the job from such different angles and with different priorities in mind.

My talk was based on my own personal experience (and that of designers and developers that I surveyed)

A key complaint of designers surveyed was a lack of communication from developers, especially in the early stages of a project…

1. Developers should get involved early

At Puree we’ve found that the most successful projects are those when the developer invests time early on. This should be during briefing, wireframing and design stages to feed back on the viability of the proposals. Developers can also suggest plugins and collaborate on ways to avoid difficult development problems before they happen. This avoids designs that are out of development scope being presented to our clients. It also enables us to work together to come up with smart design solutions to avoid tricky development issues.

Screen Shot 2016-07-27 at 11.24.50

2. Flag technical issues (early)

A good web designer has a solid understanding of how web technologies (including css) work. This knowledge ensures designs reflect what is possible in code. However designers will always rely on input from their developer to flag technical issues, and the earlier the better. This is best done where possible at the wireframing stage, to avoid surprises later on. Again this offers an opportunity to head of problems before they happen in the build stage.

In our survey, designers unanimously indicated that accuracy was an issue in coding their designs. designers had (rightfully) spent a great deal of time and thought on them and wanted them to be faithfully recreated. In particular spacing, colours and fonts often appeared to be approximated. This is an issue that can be addressed on both sides of the designer / developer partnership. At Puree we’ve invested a lot of time in getting our handovers right to make it easier for developers to recreate our designs faithfully.

Screen Shot 2016-07-27 at 11.27.14

3.Better handovers

To help our development partners realise our designs as accurately as possible we do several things:

  1. We involve our developers in the review of wireframes and designs before we send them to the client. This means when we handover there are no surprises or out of scope features.
  2. We use our ‘kitchen sink style guide’ which we produce for the developers reference for every web project

Our kitchen sink page is our attempt to make styling easier for a developer to find without wading through many layered photoshop files. We collect together all of the common page furniture and present it in one place. We type out styling so the psd doesn’t even need to be opened to find things like colour references, font sizes and radius corner sizes. We also specify things like rollover styles for buttons and navigation elements, the grid used and spacing rules. We accompany these with a clear description of how and when these should be applied. We’ve had amazing feedback on this from our regular development partners. It saves them time and makes their job easier. In addition we also receive web builds that more closely reflect our designs, which makes us very happy!

Screen Shot 2016-07-27 at 11.25.22

We’ve recently started trialling an app called Zeplin which semi – automates this style guide process. Our only word of warning with automating style guides is that this does not leave space for describing the logic with which these styles are applied, so a mixture of the two is probably a sensible approach.

I have worked for Puree on a couple of projects all of which require replicating near pixel perfect websites from their designs. This was easily achievable with their very helpful Kitchen Sink documentation which gives me quick and easy access to the entire sites’ design requirements, units and measures. Without this the projects would have taken great deal longer to complete with all the extra phone calls and emails to clarify design points. I only wish all designers would take this approach

4.Involve designers in the QA (quality assurance / testing)

Having had a site built, it can be common for this to be handed over to the end client without the designer doing a design check. We regard it as part of our job to help check a site is reflective of the designs. Designers will often notice very different things from a developer whilst testing. Whilst a dev is looking for broken links and checking forms submit correctly etc, designers will be looking for consistent application of their style guide – fonts, heading styles, colours and spacing. Our advice is for developers to make use of this eagle eye for detail and involve designers in the checking process. It will inevitably result in a better website – that both functions and looks as intended.

In summary, it’s worth remembering that both designers and developers want the same thing – a beautiful, functional and usable website for our clients. We just approach it from different angles.

Puree has a whole page on our site (see it here) dedicated to how we strive to make our working relationship with our development partners as easy and productive as possible.

What are you doing to improve your designer / developer working relationships? We’d love to hear your thoughts.

UPDATE

The video of Martine’s talk is now available to watch online at WordPress.tv  http://wordpress.tv/2016/08/15/martine-warburton-how-developers-and-designers-can-work-better-together-including-design-in-your-development-workflow/

, , , ,

No comments yet.

Leave a Reply

top