Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

What Successful Products Teach Us About Web Design

Web design is a craft that is constantly evolving and yet also sometimes sabotaged. The moment a design is released, a new version is born. In the beginning, like a baby, it seems vulnerable and weak, but in time it grows up and becomes self-sufficient. Redesigning a website for its own sake doesn’t prove anything; quite the contrary, it reveals a lack of effectiveness on the part of the designer.

Product design is a craft in which new versions come to life with increasing difficulty. We can learn a thing or two from it when designing for the Web. First, let’s look at some examples.

  • How many designs for the iPhone has Apple released since 2007? The answer is one, with only two tweaks. How many Motorola phones for Android can you find on the market right now? Thirteen, not counting the old models.
  • How many designs of the Mini Cooper do you know of? Just that one brave design that has continually evolved since 1959! How many Toyota Corolla models can you count since 1967? Nineteen.
  • Zippo lighters have retained their appeal since 1933!

Forget marketing, technical specs and hardware. Products such as the iPhone, the Mini Cooper and the Zippo lighter have become wildly successful because of their outstanding design. Such massive success springs from three sources: the designer, sticking to the scope and iteration. These aspects can help us in Web design, too. In this article, we’ll look at what we can learn from successful product design.

The Ability Of The Designer Link

Zippo lighters have remained elegant and reliable through time. (Image: cell1052)

Do you trust your instincts? You should! Because when you see a design, you judge its attractiveness in less than a second3. We all know what we like, even if we can’t always explain it. It’s about aesthetics. Aesthetics is a child of harmony, and harmony is not magic. It can be achieved when the designer embraces certain principles, such as balance, contrast and dominance. Becoming a fantastic designer, though, requires more than pure technique. It requires that you see the context and make decisions accordingly.

A couple of comments by Karim Rashid4, featured in the documentary Objectified5 are fascinating and revealing. First, Rashid talks about a stereo that he loved as a teenager:

It was a white kind of bubble stereo with these two bubble white speakers. And it was probably very inexpensive — it was a real democratic product, and it had a turntable and the whole thing built in. It was a beautiful thing. Looking back and thinking why it was a beautiful thing, it was very self-contained, and the message was very strong and very simple, and at the same time it was very human. There was a quality about it.

See? A democratic, self-contained, human, simple thing with a strong message.

Here is Rashid again on thinking outside the box:

Why do we feel like we need to keep revisiting the archetype over and over and over again? Digital cameras, for example, [whose] format, proportion, the fact that they’re a horizontal rectangle, are a model of the original silver film camera. So, in turn it’s the film that defined the shape of the camera. All of a sudden, our digital cameras have no film. So, why on earth do we have the same shape we have?

How is it that Karim Rashid extracts such clear conclusions? What hinders us from doing the same? And not just in theory. Let’s do it for real. The next time you are about to make an important design decision, stop and ask yourself, What would I do if I were Dieter Rams6 or Jonathan Ive7 or — since you’re a Web designer — Douglas Bowman8?

Asking this kind of question briefly expands our skills of judgment and makes us ultra-alert. Doing it regularly can drastically heighten our perception, values and actions as designers. Is this enough? No, but it is the beginning of a beautiful relationship with design.

And the Zippo lighter? It looks both friendly and solid, a comrade that needs your attention in order to keep working. Ιt has its own scent; it’s windproof; and above all, the sound when you flip open the lid is distinctive. And if you’ve owned a Zippo for a while, you must have noticed that it learns how you touch it when you light it.

All together, a Zippo is a product of craft — just as our designs for the Web should be. This is as simple and as hard as it sounds.

Focusing On The Scope Link

Mini Cooper9
Once a Mini, always a Mini. (Image: Shelley Gibb10)

Let’s go back to cars for a moment.

As noted earlier, the Corolla models of Toyota are nothing spectacular in their design. But what is a Toyota car known for? It’s a reliable, relatively cheap family car. Is Toyota successful? You bet!

What’s a Mini Cooper? It’s a beautiful small car that appeals mostly to young people. Is it successful? Of course, it is.

Cars are complicated machines. They do more than transport people. If a Toyota were as fancy as the Mini, then it wouldn’t be affordable. If a Mini were reimagined as a family car, then it would lose some of its charm. Oversimplification? Perhaps. But you get the point.

There’s a scope behind each product. As long as the scope is met, the product will be effective and remain on the market. The same happens in Web design.

Consider a metaphor. The closest physical product to a website is a periodical. Take Wired11 magazine (the physical magazine, that is, not the website or iPad app, which have slightly different characteristics). I’ve been reading it for more than 10 years, and if I had to describe it succinctly I would say “forward-thinking and cool.” Wired reinvents itself every once in a while and persistently fine-tunes the design, but the scope remains the same. Excellent design and illustration, superbly written long articles and a ton of clever short ones serve the main purpose: to introduce its audience to a new era. Audiences change over time, and new eras dawn, but Wired remains. Why? Because it has always respected a higher purpose. Sure, many magazines are well designed, and enough of them have great content. But you rarely find one with a unique identity, an identity that can’t be easily copied.

Your probably less complicated Web project needs to perform similarly. You must define the objectives. The design must promote them. Good content should prevail. You know the rules; make sure to follow them. Moreover, know where to stop. If it’s a new idea with vague potential or yet another feature or a last-minute change, just say no.

Websites are like breathing organisms. They evolve; new features are added and others are dropped, but they never stay still. Or at least they shouldn’t. Thus, while a promising fresh idea shouldn’t be discarded, it should be held until the next major update.

Big, ambitious, well-funded websites often seem to lose focus. Their owners try to satisfy all requests. This is a recipe for disaster, because it creates unnecessary friction between everyone working on the project. It dulls the impact of the best features and, above all, the scope. Tension fills the air. The worst days are ahead.

Such practices have led to the infamous concept of design by committee12. Simply put, if everything is important, then nothing is important.

Iterations Link

Apple Store, London13
Is what Apple does magic? I think not. (Image: Jon Rawlinson14)

Let’s talk Apple. Apple’s iconic design and its founder’s exceptional way of thinking have been overanalyzed lately.

No matter how many words we write about Steve Jobs, we still seem to explain away his success as being a kind of magic. But that’s plainly wrong. People are inclined towards the least complicated, least demanding explanation to a conundrum. It is written in our genes. We think more deeply only when there’s a serious reason to do so. (But I digress.)

So, let’s do away with what Adrian Slywotzky refers to as the “Eureka” myth15:

Apple would love us to believe it’s all “Eureka.” But Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. Because Apple knows the more you compete inside, the less you’ll have to compete outside.

If Apple iterates so painstakingly, why shouldn’t we?

Inspiration for a great design roars when it comes. And implementing the idea brings a rush of enthusiasm. And our eyes sparkle when we anticipate outstanding success. And yet it rarely works that way.

Why? Because ideas and their execution are seldom free from flaws. You know the old cliché, “There is always room for improvement.” It still stands. There is always room for improvement, and accepting that your idea is the one that needs improvement takes courage. Demolishing your next great product in order to make it better takes nerve and self-discipline. But it also makes you wiser, and can dramatically improve the product.

Iterating extensively and in detail doesn’t depend on a certain type of project or a certain budget. It’s a tricky thing, because it forces us to confront our imperfect nature as human beings. To embrace our inner flaws is to walk the road of truth and maturity, silently, without making a show that we’re doing it.

This weight might feel a little heavy on our shoulders. If it does or if you dismiss Apple’s success, consider what Oliver Reichenstein, head of Information Architects16, says about the iterations17 that his team makes in each development phase (this quote appears in the comments section):

It’s often almost impossible to explain easily why things look like they do, because we went through so many iterations, that it feels like explaining a chess game with all the ifs and whats.

The same goes when designing for the Web: there’s no excuse to avoid making as many iterations as we can.

Final Thoughts Link

When successful designers are asked where they seek inspiration, they often say something like, “Everywhere — I go for a walk and observe the world around me.” And it’s true. But what they don’t often say is that they also know what to observe and how to ignore the noise of the world.

There are many beautiful well-functioning products around us. Each has a story to tell, a story that is strongly attached to its design, its scope and the iterations that the designer took before releasing it to the world.

Take the Dyson vacuum cleaner. Its design is at least impressive, and its scope is clear (to suck dirt better than other cleaners and, thus, to make your environment healthier), and it took hundreds of prototypes for the designers to figure out how to make it work without a bag. The first Dyson vacuum cleaner was sold in 1970! To explore further and find similar products, just search for our three key words: “design scope iteration.”

Creating a lasting website is no easier than creating a lasting vacuum cleaner. But neither is it impossible. It requires a holistic approach, focus and maturity, just like the products we’ve looked at here. Not to mention, it requires a paradigm shift18.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Yiannis is a web designer, developer and author from Greece. He likes tweaking ideas and he fancies talking with smarter people than him. When he'll grow up he would like to be as good as his son. Also, he tweets regularly.

  1. 1

    Gerasimos Nikolopoulos

    January 24, 2012 7:43 am

    Yiannis, this is a spot-on article with links that can easily “eat” one work-day.

    Great job!

  2. 2

    Victor Bakker

    January 24, 2012 7:56 am

    Great article!
    “if everything is important, then nothing is important.”
    Oh so true!

  3. 3

    I read smashing magazine from a time and now i tell you question i am not check it out but Are this design work in IE6.

    the design look amazing to me.

  4. 4

    This is one of the best articles I’ve read lately regarding design; it’s eloquent and well thought out as it clearly puts into words what we as designers need to be thinking about on every project. Just because we came up with a workable solution for any design, whether it’s for a website, brochure, application or product we should always be pushing the design for the next project; continue to build on what has been done in the past and improve our solutions.

  5. 5

    Awesome article. Thanks!

  6. 6

    Manzoor Kottayil

    January 24, 2012 9:17 pm

    Excellent Article. Nice job Yiannis.
    Iam also I rarely put comments. But this article forced me to open up.

    — design is not an “Eureka” moment —

    “Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. ”

  7. 7

    Good article! Informative, thanks.

  8. 8

    Great read, this is why I come here. Keep it up lads.

  9. 9

    I rarely leave messages, but I wanted to on this one, because it was superb! So often do we here that natural talent is the reason for many successes. I fail to believe that there is some unobtainable intelligence that someone else has that earned through effort and perseverance. Cheers to you, Yiannis, for making this point.

  10. 11

    Very well put. Your article resonates with my thinking about design process and business culture.

    I love the examples you shared. From Mini Coopers to Toyotas to how film shaped the camera product.

    You just backed up my own philosophy on design.

    Design by committee is destined for failure.
    You cannot please nor design for everybody.
    Be willing to give up your ego for better design.


  11. 12

    Spot on! Simplicity is the key to great design. Its not in the number of things you put in, but in the things you consciously leave out.

    Great redesign by the way. Seeing it for the first time. I’m an super fan of serifs in titles.

    I know the bills have to get paid so its got to be tricky, but I think the ads at the top really make it look a bit crowded. Maybe a bit more space between them and the article area would have helped. But that’s just my opinion…great, great work nevertheless.

  12. 13

    Yiannis Konstantakopoulos

    January 25, 2012 2:05 am

    Thanks for the comments, I really appreciate every single word you write. Keep them coming :)

    @Matt Indeed, this is a modern version of the car. However, the concept remains the same, no?

    • 14

      The concept is not the same as the modern mini does not keep to one of the core elements of the original mini, size. the original mini was small 3 metres long and the bmw model is 3.6 metres long.
      The great thing about the old mini was it was a car that would fit a family in a spacious cabin but in a very small form all due to very clever engineering (sideways mounted engine) all BMW did was built a small hatchback (still much larger than the original mini) and made it look like a rough approximation of the original mini.

      • 15

        You’re getting away from the main point; You can look at the modern Mini and realize instantly that it’s based on the 60’s version and it remains a cool car. It was made larger to comply with current safety requirements – something the original couldn’t do.

  13. 16

    This article is excellent! The point that stuck me the most is that good design is not an “Eureka” moment — many times we don’t consider the hard work that companies put into good design. Thanks!

  14. 17

    Great article on “design”!
    However, I think something is missing… “functional”… I gave your article a command-F and you are almost saying it in the final thoughts:
    “There are many beautiful well-functioning products around us. Each has a story to tell (…) ”
    The topic of functional deign might be an article of it self, so you might want to elaborated on that in the future….


  15. 18

    Great article Yiannis! Smashing Magazine at its best :)

  16. 19

    Love your stuff. Keep it coming!

    Designers rule and coders drool :)

  17. 20

    The Mini Cooper example is misleading as you picture a modern BMW version. I expect the design classic you actually intend to refer to is Issigonis’ 1960’s original.

  18. 21

    Vigneshwar Raj

    January 25, 2012 2:40 am

    One of the finest article … !!! Enjoyed it.

  19. 22

    Dimitrios Bendilas

    January 25, 2012 2:48 am

    Yannis, this was a really great read! I agree that design is all about iterations and it can always improve. Nice flow on the article.

  20. 23

    Really nice article!


↑ Back to top