Here at Jet Cooper, projects are led by cross-functional teams (referred to internally as pods),  comprised of a lead designer, lead developer, and a product manager. We work very closely together, quite literally sitting side-by-side, right from day one to conceptualize and deliver great mobile and web products to ensure a superb user experience. For web-based products, a huge part of this collaboration takes place in the browser.

Designing in the Browser

The browser is  where our vision really comes to life and, despite extensive research and prototyping, where our assumptions are truly tested. It’s one of the most exciting parts of the process, a point where we get to validate and improve upon everything from UI interactions to responsive breakpoints and content strategy. It’s a time for designer and developer to iterate on design ideas in a live environment together and to continue to refine what was started in static mockups.

Recently, Carson, one of our lead developers, and I (as a lead designer) have been working extensively together on projects and we’re often discussing ways in which we can be of more help to each other. Considering the fact that in many agencies  design and development happen in isolation or through independent freelancers who have been hired by a third party, we think of this as a huge step forward towards greater designer and developer collaboration.

So we got together for a bit of a chinwag (proof it is a real word) and came up with the following 5 tips each. It’s our hope that these tips, which come from our own personal experience working and learning together, will be of use to other designers and developers looking for ways to work more effectively together. 

James’ tips for designers:

  1. Know as much about HTML/CSS as you can: Even if you are not proficient in writing production code yourself, learning basic functionality and terminology will go a long way in helping you communicate your ideas/vision.
  2. “Inspect Element” is your new best friend: When giving feedback to a developer it helps to be as precise and technical as possible. Open up Inspect Element before you raise an issue and have a look at solving the problem yourself first (ie. set your desired box shadow properties) – that way you can bring a semi proven recommendation and not just a list of errors. Oh and don’t forget to screenshot EVERYTHING!
  3. Be flexible: Not everything can always look and function exactly as you had imagined it would once it’s in the browser. You have to remain true to the project’s goals but be flexible in how those are met – It’s about the project succeeding, not your initial ideas.
  4. Stay involved: Just because you have checked off your “final approval” deliverable doesn’t mean you can sit back and relax. Your feelings of ownership should encompass the final product and not just the comps you created.
  5. Be as supportive as possible: Developers are often working on crazy deadlines and with real time issues and restrictions that you did not have to face. It’s up to you to be as supportive as possible in this phase by remaining engaged, coming up with new design solutions and providing new assets as quickly as possible.

Carson’s tips for developers:

  1. Don’t fight the designer: Just like they would in Photoshop, they will find small areas to improve on their designs. While it may seem tedious, these small decisions can make or break the continuity of a design.
  2. Give your input: If you haven’t up until this point in the project, in-browser collaboration is the best opportunity to give your creative input.
  3. Don’t just say no: Simply saying no doesn’t get you anywhere. Be specific about why an approach wouldn’t work. Moving a button “over there on mobile” could add unnecessary syntax. Changing the width of a column could break the entire page’s grid. Be constructive, rather than a downer.
  4. Keep the design system in check:  Similar to tip number 2, this is a great time to reel the designer back in a little. When they suggest a new button style for a call to action but you already have three identified in your style guide, they better have a damn good reason for it.
  5. Remember, designers are not trying to make you do extra work: For a few years I thought every time a designer changed something it was because they loathed my existence and wanted me to stay later in the night to get the work done. I was an idiot. You both want to create a spectacular user experience. You both work on the same team on the same objectives. More often than not, a design needs to be altered in the browser before you can hit your goals.

Why it matters

It’s important to remember how truly crucial this stage in the process really is. Once you start to see a design take shape in the browser there is a never ending flow of decisions you must make right until you ship. No design is ever completed in Photoshop and good collaboration between two very talented individuals is a surefire way to ensure that your project’s vision won’t be compromised by new considerations or unforeseen limitations. After all, as the old saying goes, two brains are better than one.

If you feel like we’ve missed anything, feel free to add to the conversation by commenting below, or tweet us @woodifred and @cshold.

For a steady stream of design insights, make sure to follow us @JetCooper.

  • Mike Bonds

    This is a fantastic little post about collaberation. Understanding the mindset of both your fellow Designers and Developers is key in creating and maintaining a great working relationship. Working so closely together is a great way to learn the nuances of both practices and to understand what it takes to create an excellent product. Many agencies could really benefit from this approach!

  • Rob

    Great article.

    The relationship between design and development is crucial. Both disciplines meeting together early in the process greatly improves the results. Both members feel part of the process and can equally contribute ideas to the product.

    Sometimes “No” just means “Not right now” and can be shelved for a future release.

    Keeping the discussion open(on both sides) allows for new opportunities to emerge.

    Sitting face to face with development can be a luxury – take advantage.

    Help development drive the product home until launch day.

  • http://carolannbonner.com/ carolann

    Great read, all very true.