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.

Don’t Follow Trends: Set Them!

Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.

Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.

Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Unique

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty.

Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity.

Web design isn’t art Link

Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form.

I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out.

Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different.

Web design as architecture Link

While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

Architecture

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well.

Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic.

Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build.

Venustatis Link

But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

Sydney Opera House

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark.

In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature.

New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals.

Fresh inspiration Link

So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places.

Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights.

Bill Moggridge, Designing Interactions1

When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Water splash

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought.

Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others.

Leaders and Followers Link

Twitter

Twitter2, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer

Yammer3, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook

Facebook4, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median

Social Median5, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise

Highrise6, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple

Apple’s website7 incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond

Newspond8, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp

Basecamp9, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale

Blinksale10, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

Simplebits

SimpleBits11, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

Twiek

The Twiek blog design looks like it’s heavily inspired by SimpleBits.

Conclusion Link

If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy.

Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done.

While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic.

Don’t follow trends: set them. (al)

Footnotes Link

  1. 1 http://www.designinginteractions.com/
  2. 2 http://www.twitter.com
  3. 3 http://www.yammer.com
  4. 4 http://www.facebook.com
  5. 5 http://www.socialmedian.com
  6. 6 http://www.highrisehq.com
  7. 7 http://www.apple.com
  8. 8 http://www.newspond.com
  9. 9 http://www.basecamphq.com
  10. 10 http://www.blinksale.com
  11. 11 http://www.simplebits.com
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

Advertisement

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

  1. 1

    Nice article, that was really well written and is really true of the web. I haven’t seen many “flashy” designs for utility/function based sites go very far actually.

    -2
  2. 2

    Good stuff

    0
  3. 3

    Hey! An actual article with information and junk in it… way to go smashing! I’m surprised you didn’t try and fit some RSS icons in here somewhere.

    0
  4. 4

    Juan Manuel Lemus

    November 25, 2008 2:24 pm

    Oh, Wow! My site on Smashing Magazine. I am the author of Twiek: but the site don’t uniquely inspired by SimpleBits. Twiek was inspired on A List Apart, Simple Bits, and Adobe.

    Following the best on Internet: A look to creativity.

    0
  5. 5

    HAHA really? An article on originality on this site? You guys fuel this Web 2.0 bullsh*t like nobody else, with your endless barrage of useless RSS icons, shiny gloss over everything imaginable (which subsequently HAS TO reflect on a surface), etc, etc.

    Seriously, take a look at the sites you’re featuring in this post. You’re basing originality on looks, and yet virtually every site listed (regardless of leader/follower title) looks almost the same (with a few minor exceptions).

    Get over yourselves. And here’s a message to the worshipers of all things Web 2.0: knowing how to customize a WordPress template doesn’t necessarily qualify you as a ‘designer’. This blog-style designing is completely overrated, utterly unoriginal, and the color of your RSS icon / radius of your rounded corners doesn’t make you unique.

    0
  6. 6

    Great article Dmitry! Now go update your tweets! (I didn’t even know you had a twitter account)

    0
  7. 7

    it so hard to get this message across to new clients who approach you with a plethora of sites that they love and wish to mimic..
    Great post.. and i agree with most of it – with a few changes in the Leaders and Followers category though…

    0
  8. 8

    good article

    0
  9. 9

    I don’t think “lol” actually read the post ;P….

    I think if companies, but more so the clients, understand what this article is really saying, they will get why craiglist, google, basecamp, facebook, linkedin etc… look the way they do. Simple works, sometimes flashy graphics hide a site with no real function to provide, other times it just slows it down unnecessarily.

    Now how to get clients to understand this is a different matter.

    0
  10. 10

    Wow it was a good article up until you included a set of uninteresting bland mainstream examples. What a buzzkill!

    0
  11. 11

    @lol, please understand SM features different guest authors. While many of them merely compose list blogs of show casing trends, Dmitry actually writes thought out, original articles. The sites Dmitry featured in this article all look different from each other, for obvious reasons due to their individual goals. If you think they don’t look unique enough, it’s because too many people have copied them.

    But I agree with you on your sentiment overall, just had to clarify a few things.

    0
  12. 12

    Great article for sure, its exactly what ive been saying to myself and other designers for years, but just never could put it into the words like you have.

    However, great article but some bad examples there.

    0
  13. 13

    Awesome article :)

    0
  14. 14

    And I also ‘sort-of’ agree with user “lol”. Majority of the web today have no real “unique-ness” to the structure. Most of the elements are the same on most of the websites being made today.

    Here’s a quote from me;

    What you call “the web today” you think its the best it can be, you are completely wrong. You say that “Design isn’t Art”, but yet “Art and Design is creation”. Manufactured elements of creativity from the power of one’s knowledge, to produce something that’s never been done before. For all those sites listed above, I can tell you this, the one’s that made these products are not Designers. They are stylists.

    And before you question, a stylist is someone who immitates a style and develops it. That’s what majority of you so called designers have been doing for years. There is no real creativity being shown. Yet you shine upon yourselves and others around you about your “amazing web 2.0 design” or whatever else you want to call it.

    How many of you so called “designers” know what Art/Design reall is? How many of you so called “designers” have immitated a style or an element of another layout?

    Another quote;

    People story around the subject that a God created everything, this place we live in. So therefore if a God did do so, he designed / created, manufactured from imagination. I and many other people do the same thing on a daily basis, we design, create, manufacture from imagination of things that have not been done before, so arent we the God?

    0
  15. 15

    Vitaly Friedman & Sven Lennartz

    November 25, 2008 3:41 pm

    @all: the article was updated, thank you.

    0
  16. 16

    Hey guys, thanks for the feedback :)

    To address some points above: The sites above were the pioneers — these are the guys who “set” the Web 2.0 trends you see today. All the barrage of copies you talk about are often reflections of these styles, be it Apple’s glossy buttons, aluminum gradients or 37signals’ application layout, aesthetic and product pages.

    Sure, the sites don’t look very flashy or awe inspiring, but that’s exactly the point — they don’t have to in their context. The sites above are not all the same. Just think of Twitter… and you can instantly remember the familiar clouds and cartoony feel. Think of Facebook… the minimalist interface comes to mind. I’m not even going to talk about how much the 37signals app design influenced a lot of the new web apps you see out there.

    Those guys created their own thing — they had their own inspirations. The point of my post is that today I’m seeing a lot of sites (though it’s much more prevalent in web application design) that look like copies. I think that instead they should be a little braver and try to pioneer their own style, design their own icons and come up with a layout that suits them rather than looking like every other site in their industry.

    The web application industry is getting very competitive lately, with startups popping up left and right. I think this makes it even more important to try to stand out and create a brand and identity rather than just a site. And that’s by no means an easy task.

    0
  17. 17

    Juan: It’s a nice site :) I can see the A List Apart inspiration now.

    0
  18. 18

    How can you say web design isnt art? That’s almost offensive…

    0
  19. 19

    “Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content.”

    “While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.”

    You have no idea what you are talking about, Is there any regulation on guest posts on this website? I stopped reading when I got to your rant about what “art” is, just terrible.

    0
  20. 20

    interesting article, but a very strange set of “example” sites to end it on, none of witch are unique or set a new trend at all: Facebook uncluttered?!

    Certainly the uniqueness of this site is being a blog of free glass icons and articles on uniqueness. Fun times :-)

    0

↑ Back to top