Sometimes (potential) clients ask that they want their site to be Apple like. This raises a huge red flag for me. The designer that comes in, creates a layout and magically makes the site look wondrous simply does not exist. A good design is the culmination of thousands of tiny decisions made by a group of people.
So, they want an Apple style design. You look at their current site and see a news-type 3-column website plastered with ads. Let’s say you update the UI parts to be modern (and “Apple like”) there’s still the ads. IMUs, leaderboards… no matter what you do in your design the site still won’t look “good”. Every design rule (e.g. you should use the least possible amount of typefaces) gets broken when you put a random ad served by DoubleClick next to your clean layout.
But for this site, putting an IMU ad above the fold and a leaderboard on top is a necessity to survive. Selling advertising is their entire business model. That’s cool, but then the design should accomodate for this. Posing the question “Hey, our ad filled site + Apple style design; how much is it gonna cost?” is insulting to me.
Every designer knows that if you add one (just one!) element that looks out of place you basically messed up the design aesthetically. This is what happens when you add advertisements to a website1. This is why designers cringe when the client’s logo is not up to par with their standards. This is why they hate Facebook like buttons. This is why they detest Google +1 buttons. Because it’s another element that visually looks out of place.
But the ads might be necessary, and the social media buttons deliver their value: the news gets spread. These things are more important than what it looks like. If you are purely asking for a visual style you ignore the biggest part of any design and that is how it works, not the aesthetics.
Appropriate design
What is important is not beauty but appropriate design. If the appropriate design is a beautiful one (e.g. a design for a high end fashion brand) then by all means go for that. Beauty is different for everyone. Design is such a loaded word that can mean a lot of things. So let me give you an example to make things clear.
In Belgium there are a few low cost supermarkets (Lidl, Aldi, Colruyt) that intentionally design their brochures like they’re from the ’80s, using bright and primary colors to look cheap. Because that’s what they do: sell cheap in high volumes. The Lidl logo is red, yellow and blue. Aldi is blue and red. These logos use bold typefaces to stand out. Their stores look like warehouses. Coincidence? No. You should always design what’s appropriate.
Apple’s aesthetic is white, clean, airy. They use black and white and some brushed metal. Good and consistent typography. Lots of whitespace. All of their stores have white interiors with glass and steel. Hell, Steve Jobs even has a patent on the glass spiral staircases in Apple Stores. Their message is “only the best”. So if what you sell is cheap advertising, why ask for an Apple design? It’s not appropriate at all.
The Belgian newspaper Het Laatste Nieuws has an atrocious website but it’s widely read and successful. It’s owned by De Persgroep (“The Press Group”) which also owns De Tijd. The website of De Tijd looks good. It’s not that the people behind Het Laatste Nieuws can’t make their website look as good (surely they can, they’re owned by the same group). It’s that they won’t. It’s not about design ability. It’s about an appropriate design.
My job is partly based around creating beauty so it hurts a bit to say that sometimes what I would consider “ugly” design is the best design.
Production value and content quality
For argument’s sake, let’s say we are looking to recreate the Apple aesthetic on a news site. Ignoring the fact that the ads mess up the visual design, we are left with a lot of challenges. Many of these challenges have to be handled by someone else than the designer.
Basically, you’re going to need: a professional photographer with editing skills; a content team with a web copywriter who knows HTML; a designer, a front-end developer, and possibly an art director/project manager. See: that’s at least 6 people already.
The photography on Apple’s website is top notch. If you watch one of those Apple product videos with the white background and all the zooming in and out of the product, why does it look so clean? Because the products are actually 3D renders and not the real deal. Related: a little attention to production and quality can make one hell of a difference.
You can’t just take your mother’s cheap pocket camera and drop a picture into a website. Well, you can, that’s the beauty of the internet. But to achieve the Apple aesthetic you’re going to need a professional. Even if you have a good photo, you’re depending on the designer to make it fit well within the site, and on the front-end developer for the interactions surrounding the photo (zooming, slideshows). You’re dependant on the CMS [the developer] and what happens to a photo once it gets uploaded. Does it get cropped? How? Is there a miniature version of the photo on the home page and a bigger version on the detail page?
What Apple does is “layout” the pages with high res photos right on the page, in context; as if the page was a brochure. Copywriters work in tandem with designers. It means the content has been decided on before the page was made. Most websites follow a reverse pattern where templates are made and the content is dumped into these templates (see: Design the Content, a piece I wrote in 2008).
There are ways do to it right, like MSNBC’s story layouts (example). You could bring the good parts of print style design to the web, like Fast Company design does. But you can’t expect a visual “editorial” style when all you pay for is a template.
If you go with the template route where someone inputs the content in a CMS, and the content gets rendered in a fixed template for that part of the website (95%+ of modern websites) you also depend on who inputs the text. Does that person know HTML?
What do you see here in the body text? Two line breaks instead of paragraphs2 Bulleted lists are asterisks (*) instead of unordered lists. I bet the designer of this website supplied a style for bulleted lists. But it needs to be used in practice too. A Word-like interface like TinyMCE in a CMS allows anyone who can work with Microsoft Word to create content for websites. But to achieve an Apple-like quality you need someone who knows HTML, what tags to use where, which CSS classes are available for layout.
One of the sadder things is that in the classic newsroom there is someone who is responsible for this (the layouter) and nearly every newspaper seems to be able to get their printed version right, yet for the online version seemingly there is no one responsible for the actual design. A magazine like Wired, that has been lauded for it’s print layout, looks like any other website online.
At least you can argue their iPad app looks great.
How it works
Now, I’m mainly talking about design in the purely visual sense. Equally important is the information architecture. A big part of the design is already decided when you do the information architecture. This is the part of the website process where you bring all information together to create the wireframes of a website.
In my website/web application/mobile proces, I first do information architecture (IA) with wireframes and greyboxing. Here I’m solving the WHAT problem. What are we going to put where and why? What’s the interaction like? The content is laid out structurally but is not much to look at visually.
Once I get into the actual design phase it’s all about aesthetics. Basically every WHAT problem should have been solved by now so I can concentrate on the looks. From the subtle noise in the background, to the letter spacing on a heading, or the overall imagery and photography. At this point a grey box with [EYECATCHING PHOTO] in it becomes a stunning visual.
In the IA phase I hastily draw a grey box because the fact that there should be a photo on the homepage is not agreed upon yet. In the design phase I might spend half an hour tweaking the light in a model’s eyes. Because at this point I know the photo to make it to the live site. And it has to be perfect.
You can’t skip the whole IA part and merely solve the aesthetical problem. Because the way it works will define the aesthetics.
Conclusion
Don’t ask a designer for an Apple style design. You won’t be taken seriously by the designer. Any designer worth hiring will just say no to the project.
The thinking that you can just hire a designer, let them do their voodoo, and the site will look great is wrong. The design is grounded in the information architecture and thinking behind the site. Redesigning is not skinning. It starts with the foundations.
Are you looking for a designer who uses the common sense™ method? Contact me.
-
It also depends on what kind of advertisements. There’s good (Fusion Ads; the Deck); there’s doable (Google Ads); there’s bad (random image-heavy IMU’s and leaderboards like DoubleClick).
-
Interestingly enough the double line break problem also exists in De Morgen articles), but the front-end developer made it look good by doing away with the paragraph tags entirely; not semantically correct, but at least visually correct.
About the author: Johan Ronsse is a freelance interface designer living in Antwerp, Belgium. View his work, profile or ethos. He tweets as @wolfr_ and is available for exciting projects.
- Leave a comment
- Older post
- Newer post
- If you liked it, do share on: Twitter or Facebook
HLN & De Tijd are indeed owned by De Persgroep, but there’s a difference. De Tijd is part of MediaFin, HLN is more ‘core’ Persgroep.
Hosting is done by De Persgroep, but the teams behind the development are different. Hence the difference in layout.
You have put into words what I have thought many times before myself.
Oh dear me, yes. How easy it seems to slap some of that ersatz-austerity sauce and brushed-metal on any old website and expect it to be simple and elegant. Quite often, the opposite is true. Like putting lipstick on a pig, the result is often worse than what you started out with.
As to hln.be, that’s just one ugly website, no matter how you rationalize it. It looks like it was hacked. Nieuwsblad.be, which is a direct competitor, seems more like the sensible ‘mass market’ approach. As to Aldi and Lidl, I suppose they just skimp on silly things like design, except for the bare essentials of an effective corporate style. And frankly, I don’t think the websites of Delhaize or Carrefour look that much better. A funny thing I noticed is that Colruyt’s ‘Collect & Go’ website is much better designed than its main site. Perhaps because it’s a direct revenue-generator.
Toon, it’s true, I don’t really know whether HLN is hideous on purpose or not; however it feels appropriate to me. I am making analogies to prove a point.
Maybe they didn’t so much care what the site looked like, but was it the Apple UX they were after.
“There is no such thing as bad design—only inappropriate design” –Neville Brody
Well said.