“Look at this website,” my coworker said with his eyes rolled. I swivel my chair and peer at his screen. The website features a multi-colored word art title with a textured background that may have been popular twenty years ago. We both groan at the lack of professionalism the site shows.
We’ve all experienced the frustration of seeing bad design. Our gut reaction as designers is “someone ought to fix it.” Sometimes, we take it upon ourselves to fix it.
Several years ago, I saw a popular website that was promoting goods made in the US. The content was great, the navigation worked, but the styling of the website was appalling. There were boxes upon boxes, unnecessary drop shadows and weird illustrations that didn’t really make sense to me. I decided right there and then that I was going to redesign the site and then send the site owner my work.
I spent a weekend coming up with a new design for the site. “This is so much better,” I thought as I stepped back from it. I emailed it to the owner, happy with the result.
A few days later, I got an email back. It went something like this: “Your designs are lovely, and I really like the ideas you came up with. But I’m really proud of the little drawings I did for this site, and I want to keep them.” I was exasperated. The drawings on the current site were, in my opinion, terrible.
It was then that I realized something. Even though my execution of the website was more modern and professional, the site owner clearly wanted her personal mark on it. I realized that maybe she wanted the website to be funky and unpolished. I was the arrogant designer, coming in and telling her to change something that she clearly did not want to change.
Jared Spool, keynote speaker at the User Experience Professionals’ Association Conference (held yesterday), spoke about this exact topic. In his presentation, a designer named Tyler Thompson saw the boarding pass for Delta Airlines, which can be difficult to comprehend at first glance, and decided to redesign it so that it could be “better.”
Tyler’s design is beautiful. It uses modern fonts and rich colors. The flight, gate, seat and zone are clear to the customer. But Jared pointed out a few things about this design: the colors bleed out to the edge, it uses white stock, and it uses high-definition fonts that require printing at 300dpi. Delta’s low-resolution, thermal printers can’t do these things.
If Delta were to actually use Tyler’s design, it would have to replace 10,000+ boarding pass printers, change paper size and add cutting for bleeds on top of creating a new supply chain for colored inks.
Which design is better now? It’s easy to create designs without understanding the real constraints, but the best design is the end is one that satisfies real world needs. As Jared said, “to improve design, we must work on both the intention and the skills of rendering.” We can’t only improve the rendering.
Both my own website redesign from years ago and Jared’s talk have taught me that we, designers, need to have a little bit of humility. We can’t just tell someone how to do something “right” if we don’t know the context around which the original design was created. It’s easy to be nit-picky, and there are circumstances where better design is absolutely called for. But it’s time we stop to understand what situation we’re in so that we can do things with the right intention and execution.
Many web-based companies are choosing to align their web and mobile interfaces so that their visual branding is the same on all platforms. The result is that websites begin to include mobile elements in their interface. Below are examples of how mobile design is influencing the web.
1. Basement Menus: YouTube is now using the “hamburger” icon to represent a hidden menu (usually to the left of the icon).
2. Circular profile icons were/are a mobile trend. (Designers sometimes places profile icons on top of product images in mobile to save on screen space). Now they’re on web too. [Below: Etsy]
3. Pinterest uses the default iOS 6 share icon for its share button. This icon has become universal to people to frequently use mobile software.
4. No, that’s not a screenshot of my phone. That’s responsive web below. Designers are choosing to optimize their websites for mobile, as well as using mobile-looking buttons and text fields for say…login screens.
5. Disclosure arrows are used in mobile to indicate that you can tap on a row or cell. They also show up on twitter (web) to let you know that you can see more Tweets, Following, Followers, etc.
Take a look at this site. The screen moves with your mouse. The buttons on the cell phone light up when you tap them. The buttons on the actual hardware are also links. Pretty awesome.
All in all, a very cool webpage.
Got Milk? (click to see website)
This is a great example of a website that really uses interactive elements to its advantage. The animation isn’t overdone, and it doesn’t come off as corny. The graphics are also very realistic and clean. The best part, though, has to be the sound. When the milk bottle spins, it makes that heavy glass-on-table scraping noise. It makes the whole experience real.
I learned a lot making this website.