Designing Today’s Web

06-22-15 Jeremy Loyd

The newest Build Right workshop delves into the mirky depths of designing responsive websites, how to collaborate with developers, and asks us all how we can be better.

At Converge SE, Katie Kovalcin and I had the opportunity to present the newest edition to the Build Right family of workshops—Designing Today’s Web. The workshop is geared toward web designers and developers who want to learn more about improving the way we design for the responsive web. We wanted to share the struggles we all face being web designers today—to tackle the most difficult subjects. And ask ourselves how we can be better.

Collaborative Design

My natural tendency used to be to try and control the design by comping entire pages in Photoshop. My mindframe was, “I’ll give the developer an exact roadmap to follow.” What I came to realize was that the finished site rarely looked like my comp, despite spending all that time getting things perfect in Photoshop. I’d then spend several hours sitting with a developer and tweaking the site in the browser. Time after time this happened until I was able to let go of some control and take a more collaborative approach to design. The problem was that we’d spend time refining statically and then, on top of all of that, we’d end up spending more time refining in the browser. I still struggle at times to not over-refine in Photoshop or Sketch, but I remind myself that the product will be better if I just let go. In the workshop, we share some ideas from our process that helped us make the shift to this new approach.

What Else Ya Got?

We also dig into the oft-overlooked design topic of site performance and see some real examples of why it’s important. We share specific techniques that have helped us translate design to code and talk about some tips and tricks to help with the sometimes-fragile designer/developer relationship. We also talk through the process of how we like to work, starting with establishing styles using element collages, thinking through key page layouts efficiently, and reusing existing styles and modules through a project. And finally, we talk about how to create sites that are “client-proof”—keeping the design intact as content and changes to the site are made. We call out several problems that we as designers sometimes create that contribute to this problem and some possible actions we can take to avoid them.

Let Go

It isn’t easy. It’s hard to talk about our struggles as web designers, but we decided to go that route with the hope that it would help other designers. We looked at the workshop as a sort of “therapy session” where we can discuss the difficult things we face designing for the web. A workshop theme, “Letting Go,” emerged as content was developed. And the truth is, we have to let go of some of the control, assumptions, and old processes that can hinder us from creating the best websites possible—which can be even harder.