- March 13, 2014
A Healthy and Balanced Website
- @yeseniaa
- Senior Designer
Do you ever overcompensate? Maybe you’ve gone on an “unplugged vacation” to combat
device addiction or embarked on a juice cleanse after an indulgent weekend. I’ve been there often.
I’ll spare you the details of my “10-Day Sugar Detox,” but I can share a little about how I’ve overcompensated in my design work. You see, my early designs were chock-full of inconsistencies—every style I created had a unique embellishment. One day, I became fearful that I had become one of “those clueless designers” that frustrated developers write scathing articles about.
I vowed to make my designs as simple as possible, devoid of any superfluous details.
My exaggerated solution backfired. I failed to account for necessary variations and ended up with a homogenous design that didn’t meet my client’s needs. I assumed that streamlining my design was going to make my front-end developers’ jobs easier by giving them less styles to write. As it turns out, I had actually made my back-end developers’ jobs way harder by not accounting for necessary variety, leaving them to fill in the gaps during site implementation.
I didn’t realize that I could solve my problem not by doing the opposite but by finding a middle ground. What I learned then, and what I’m constantly reminded of, is that creating websites requires balance.
2–3 servings of Photoshop a day
One of the most challenging parts of creating a design system is breaking layouts down into reusable parts while not losing sight of the big picture. Even though a design system is built from a collection of components, I can’t start with the components and hope that beautiful layouts will magically come together.
When I begin a design, I don’t start with a grid, because I don’t have a clear enough understanding of what I’ll need the grid to do. Similarly, I can’t create a navigation structure without first seeing it in the context of a full page. Some criticize static comps for not accurately portraying behavior or capturing all responsive layout possibilities, but they still can provide value when it comes to seeing the big picture.
Earlier this week, Dave Thomas published a fantastic article called “Agile is Dead (Long Live Agility),” where he proposed a new method for working:
- Find out where you are
- Take a small step towards your goal
- Adjust your understanding based on what you learned
- Repeat
The idea of taking small steps towards a goal is intriguing, because doing so distributes weight across a number of techniques. At best, a static comp is a small step towards creating a beautiful, extensible website. The trick to making full-page comps useful is knowing how to find the reusable components and when to switch to other tools. Not so long ago, I used to create 12-20 static comps and then pass them off to front-end developers in an official “hand-off meeting” that would kick off their “phase.” We’re now moving toward working in parallel tracks, replacing hand-off meetings with continuous collaboration and communication.
Now, as soon as I have a general design direction, I’ll work with the developers on my team to start to identify patterns. The design phase then becomes a fluid cycle, with a combination of static designs, coded patterns, and layouts that evolve into a comprehensive design system.
This new strategy also helps us think about design in a more well-rounded manner, by allowing us to think about behavior and animations way earlier. I used to stare longingly at my static comps like Mister Geppetto, thinking, “I can’t wait until I can see you come alive!” A design system created with an equal emphasis on aesthetics and interactions ultimately makes for a more successful user experience.
Lose the weight and keep it off
All of these considerations won’t matter if our sites are too slow. We design sites for a myriad of devices with varying connection speeds. If we don’t respect our users’ time and bandwidth, we’ll lose them. Performance is also a design feature.
The problem is, making a site lightweight is often at odds with other design goals—like creating visually immersive experiences or meeting all of an organization’s rich-media ad requirements. While a stripped-down site with no images, set entirely in Arial, is certainly going to be light, it’s not going to accomplish all of our client’s business goals.
I love Clearleft’s solution to set a performance budget early and use it to make tough decisions:
The important point is to look at every decision, right through the design/build process, as something that has consequence. Having a pre-defined ‘budget’ is a clear, tangible way to frame decisions about what can and can’t be be included, and at a suitably early stage in the project. It can also potentially provide some justification to the client about why certain things have been omitted (or rather, swapped out for something else). – Mark Perkins
What I enjoy about creating a performance budget is that it forces everyone involved in the project to prioritize. Performance budgets inherently create balance, because they make everyone aware that one decision comes at the cost of another.
Strengthen your core to improve balance
One of my favorite takeaways from Clearleft’s performance article is the idea that every decision we make has a consequence. If we push too hard in one direction, we risk setting something else off-balance. With clients, we may find a solution that satisfies the needs of the marketing team but is impossible to implement. Or, we may accommodate every required ad on a page without thoroughly considering how the ads will affect a user’s reading experience. And then there’s the constant balance between business goals and user needs.
Unlike my “10-Day Sugar Detox,” finding balance in web design projects isn’t dreadful. It’s an approach that requires time to refine and get better at—a lifestyle, not a fad. The best we can do is make sure we’re constantly vetting our decisions with the people that are using, building, and maintaining the site. Talk more. Ask more questions. Try different solutions. Be balanced.