An Event Apart: Comps vs. Code Couples’ Therapy

by Luke Wroblewski December 8, 2009

Ethan Marcotte's Comps vs. Code: Couples’ Therapy talk at An Event Apart San Francisco walked through some case studies and lessons of collaboration between Web site designers and developers.

  • Titles on business cards don’t always explain what people do. Many people integrate design and development in their work.
  • Four Ds: discovery phase (immersion in problem and needs), design (create comps), development (turn graphics into code), delivery (publish to site)
  • During translation from design to development, designers often worry something will change.
  • A successful Web design focuses on the process of transition but we usually call these handoffs. It’s the wrong implication.
  • Some mock-ups are designed for getting client approval and discussion not for final production. As a result, questions may come up about what happens when pages are experienced in different circumstances (screen sizes, browsers, etc.).
  • Include developers in early phases of the project so they can begin thinking about how to solve coding problems. Sitting in design reviews can get developers thinking about questions that may come up and gets them invested in the design.
  • Good layering in Photoshop can help developers make sense of design decisions. Can even set up hierarchies in Photoshop to show how elements are related.
  • Make sure there is adequate time in the schedule for designing the various states of elements. Variations and states of a design need to be created and shared with development team.
  • CSS-only drop down menus: "son of suckerfish" technique positions menu items off screen until they are accessed.
  • After every phase, have time set aside to review designs with developers to make sure things can get built.
  • Just because something is simple does not mean it should be disregarded. Simple things can be enhanced to be beautiful.
  • There’s no such thing as too many details. Extra artwork can help ensure development accurately reflects the design.
  • The details of what works will be specific to your team. Communication is what makes great teams work.
  • The tools you use are much less important then how you work together. Frank discussions about mistakes can help you learn from them.