State The Web of Design Current Tren 2010
Smashing Magazine
The Current State of Web Design: Trends 2010
Web design is a fickle industry. Just like every other form of artistic expression, Web design has undergone a continuous and surprisingly fast evolution. Once a playground for enthusiasts, it has now become a mature rich medium with strong aesthetic and functional appeal. In fact, we are experiencing what could be the golden era of Web design — or at least the best period thus far. We have powerful new tools at our disposal (CSS3, HTML5, font-embedding, etc.), a plethora of freely available resources, a strong design community and also (if you needed any more!) reliable support of Web standards in the major browsers.
We’re seeing better interaction design and more aesthetically pleasing designs. And we’re seeing more personal, engaging and memorable sites, too. But what exactly is making the difference? What new directions is Web design heading in today? What new techniques, concepts and ideas are becoming important? In this article, we present some observations on the current state of Web design. We describe existing and upcoming trends and explain how Web design might evolve in the coming months and years. We’ll also touch on what we as Web designers should be ready for to keep abreast of new challenges and opportunities.
Please note: this article is the first in our series on the current state of web design. To make sure you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]
1. Design For Delight
As designers, our job is to communicate ideas effectively. For every particular message, we create a context in which the message would work best, guiding users to achieving their tasks, gaining their trust or convincing them of whatever we’re communicating. Of course, there are endless ways to create this context. One of them is to design for visual aesthetics, surprise, joy, happiness — design for delight;design to be memorable and remarkable.
Attractive things work better and help focus and keep the user’s attention. Memorable design increases excitement for products and brands, leading to increased engagement. In fact, a strong, reliable emotional relationship between your clients and their audience could be the best thing that ever happens to your career.
Brizk design studio has an aesthetically stunning design, with subtle animations, beautiful typography and a clean layout. When you hover over the red bird in the footer, a small Twitter box is revealed. First-class design that is a pure delight.
Although the vast majority of brands are still silent, passive and impersonal, we’ve observed more websites trying hard to engage our senses, whether through a strong aesthetic appeal, through witty animations in the content block or simply through a little extra attention to small design elements on the “About” page. Such designs are beautiful to look at, fun to navigate but, most importantly, memorable — for the simple reason that they are different. By adding delightful personal touches to your designs, you stand out from the crowd and give visitors something to talk about and share with friends and colleagues. And that’s a good start.
You can elicit delight in a variety of settings: on your maintenance mode page, on the 404 error page, in your pre-loader, and everywhere else. The idea is to surprise visitors by giving them something pleasant to talk about.
Bounty Bev
Bounty Bev is a beverage company with a beautiful one-page design. Apart from its subtle hover effects and animations, the website has some nice extras: if you scroll down the page manually with the mouse wheel, a small pop-up appears asking you if you need a lift. The typography is strong and memorable, and the design is playful. Simple, clear and personal, the website leaves a strong positive impression.
Analog.coop
Analog provides a very personal experience to visitors. When you visit the page, it displays where you are located and tells you the members of the team who are closest to you (in our case, Alan and Jon, who are about 500 miles away in Bristol). The website has a couple of nice Easter eggs that are not visible at first glance. You might want to play around with the header and the photos of team. The page is just fun to explore.
Forrst
Beautiful design with attractive visual elements and original navigation — a design that manages to make a good lasting impression. Notice how the background of the upper area of the page changes when the browser window is resized (Parallax-effect). The “log in”-box is quite cool, too. Surprisingly, the form is built with tables for some reason.
Billy Tamplin
On his blog, Billy Tamplin focuses on the small victories in his life. Each post records a personal achievement, displaying a custom-designed merit badge and an explanation of the conquest. Billy uses this metaphor throughout the website, speaking of “super Web abilities” (Agile CSS, PHP-prepared, IE6-reinforced, etc.) and “heroic design strengths” (human-friendly aim, keen creative detail, etc.). He also has a personal portfolio on the website. Notice how well the color scheme fits the theme. The design is simple and beautiful, and the “achievement” twist is unusual and memorable.
MIX
MIX labs, a community blog for designers and Web developers, doesn’t have hidden features, appealing animations or striking hover effects. Instead, it has a consistent, visually appealing design: can you spot where and how often colorful circles are repeated throughout the website? The design emphasizes the content and has a personal touch. Simply beautiful.
Blue Sky Resumes
This website of a small team of resume writers has a couple of nice unusual extras in the design: the header contains a Flash-based cloud animation that perfectly fits the branding of the company. The website also has subtle animations and soft hover effects. And the “About” page introduces each co-worker in a quite original and memorable way.
Mailchimp
MailChimp heavily incorporates the monkey metaphor in all aspects of its design. To inform customers of recent updates, Mailchimp present an ASCII animation that tells the user something is happening in the background; this nice detail is surprising yet unobtrusive. The company also uses personal, friendly and perhaps occasionally geeky language when addressing user needs. This is the part of the image that MailChimp thoughtfully preserves in its Web application.
Further Reading
- 52 Weeks of UX: Design for Delight
This article explains the importance of designing for delight and features some websites that try to engage the user’s senses. - In Defense of Eye Candy
Research proves that attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client or co-worker scoffs at the notion that beauty is important to interface design, point their peepers here. - Looks Matter Because We All Have Feelings
Discusses the importance of emotions and aesthetics in design.
2. Keypress Navigation
As designers try to make their designs more intuitive, it is no surprise that websites are becoming more responsive. Not only does this apply to user interfaces in modern Web applications (which are becoming as robust as desktop applications — and often smarter), but with the wide adoption of JavaScript libraries, “classic” websites are becoming more robust and interactive, too. One way to make websites more responsive is through “keypress navigation,” which hasn’t been widely adopted so far. But lately we’ve observed more designs implementing this effectively. The most popular setting for such navigation is on photo websites such as Flickr or FFFFound.
The general idea is to give users keyboard shortcuts that help them perform tedious tasks, such as navigating between blog posts, moving through images in a slideshow, changing the current view (e.g. from a horizontal to vertical grid), liking articles and navigating between sections of a website. Keypress navigation is common in Flash-based designs, but we are now seeing it applied to CSS-based designs, too. Google Reader is a prime example of advanced keypress navigation, but other websites have good implementations, too.
They Make Apps
A couple of months ago, They Make Apps began offering users smooth and advanced keyboard navigation as an alternative to classic scrolling. Users could switch between both modes using a drop-down menu in the main navigation of the page. In “keyboard navigation mode,” users used the arrow keys to navigate between content blocks; the “Return” key triggered the detailed view and “Escape” returned to the main page. For some reason, this navigation isn’t available any longer.
Mad-ar.ch
Marc Anton Dahmen’s website is Flash-based, and its navigation is quite advanced: users can jump to the contact form with “c,” scale images with “-” and “+,” and then navigate and sort images and scroll through text with the vertical arrow keys.
9GAG
9GAG is a social image bookmarking website. Users can navigate to the next and previous image using “j” and “k,” respectively. The current image can be voted up using “l” (for love): no mouse scrolling necessary. In this case, a shortcut to the grid view would be useful, too.
FFFFound!
One of the first social image bookmarking websites, FFFFound offers shortcuts to jump to the top of the page (“h”), change the view of the images (“v”), browse images (“k” and “j”) and skip to the next page (“l”).
Feta
Yet another Flash-based website that lets you use the left and right arrow keys to browse items of a section, the down key to select and the up key to go back.
NY Times: Times Skimmer
The New York Times’ quick overview page has very advanced keypress navigation. Users can use the arrows to navigate sections, zoom in using “Shift,” return to the top with “t,” refresh the current section with “r” and select article using “a” and the arrows. Learning the keys is a bit time-consuming, but once you’ve got them, navigating the page is much easier.
Pictory
PictoryMag, a magazine dedicated to photo stories, also has “j” and “k” navigation to browse images.
CrushLovely
CrushLovely, a single-page portfolio, lets you use the arrow keys to navigate sections of the page.
Thinking for a Living
Thinking for a Living lets users use the left and right arrows to navigate between featured quotes.
Picnic Extraterrestre
Aside from being one of the most unusual designs we’ve seen so far, Iván Ferreiro’s Picnic Extraterrestre has quite advanced keypress navigation. The design imitates Teletext and does a pretty good job. All navigation items can be loaded using the digits shortcuts. Now that’s fun!
Coding Techniques and Tutorials
Note that when implementing keypress navigation in your design, make sure that the shortcuts you define do not conflict with common browser shortcuts, OS shortcuts, screen-reader shortcuts or user-defined shortcuts. This may sound simpler than it is. As usual, extensive testing (with savvy and novice users) before implementation will help you find issues with your shortcuts. It’s safe to assume that the arrow keys, the “j” and “k” combination and the “Escape” key are safe. On the other hand, using the “Control,” “Alt” and “Shift” keys is not recommended.
Also, regard keypress navigation as an additional (and therefore optional) feature that will not be available to users who have disabled JavaScript in their browsers. Therefore, it is highly recommended that you offer keyboard navigation as a secondary, not primary, layer of navigation. Below, you’ll find some helpful techniques, tutorials and references for implementing keypress navigation in your designs.
- Adding Keyboard Navigation with jQuery
This screencast describes how to implement keyboard navigation to move a slider backwards and forwards. The demo and code are available as well. - How to Create Keypress Navigation Using jQuery
This tutorial describes how to implement keypress navigation to browse sections of the website. - Advanced Keypress Navigation with jQuery
You could use your mouse to select links, but you can also use the arrow keys (i.e. up and down) to navigate the list. This script is a bit advanced because of the extra functionality when the user combines the mouse hover and key presses. - Using Keyboard Shortcuts in JavaScript
In this article, you’ll learn how to use JavaScript keyboard shortcuts, with and without the JQuery framework. - How to Build a Site With Keyboard Navigation: PSD to HTML
This article looks at how to add keyboard navigation to a website using a few simple lines of JavaScript. First, you’ll create a simple theme in Photoshop and then transform it into a working website that offers keyboard functions to jump pages.
Plug-Ins and Useful Resources
- js-hotkeys: Cross-Browser Javascript jQuery Plug-In for Hooking Keyboard Events
The jQuery.Hotkeys plug-in lets you easily add and remove handlers for keyboard events anywhere in your code, and it supports almost any key combination. Binding and unbinding a hot-key combination takes one line of code. - jQuery Keyboard Navigation Plug-In
The jQuery Keyboard Navigation plug-in provides the capability for page elements to be navigated and activated via the keyboard’s arrow keys. - HotKey: Programmable Keyboard Shortcuts with Prototype JS Library
HotKey provides functionality similar to that of the access key attribute but has many enhancements that allow for more granular control of keyboard-driven interfaces. - Detecting Key Strokes: Reference Table
Detecting the user’s key strokes turns out to be a specialized branch of event handling. This page details some of the more annoying problems and includes the obligatory compatibility table.
3. Print Design Influence
While designing for delight is primarily about impressing visitors with unexpected and pleasing touches to a design, modern Web designers often go one step further and experiment with the underlying details of their work, producing more creative and unique layouts. In fact, one doesn’t have to be an expert to see the growing influence of traditional print design techniques on the Web. They are often manifested in so-called “art-directed” blog posts (or “blogazines”), whereby every blog post has a unique and carefully crafted design.
The layouts of these websites often resemble those of print magazines or posters, with striking headlines, multi-column text, highlighted quotations, indented text, supporting imagery, sidenotes and footnotes. The designs usually adhere to grids and have strong, vivid typography.
Design Informer: Grid-Based Web Design, Simplified has a simple clean two-column layout that clearly separates text from illustrations. Notice the capital letters in the author’s name under the header, also visible in the quote design on the page. The content here dictates the layout.
In most cases, art-directed designs are fueled purely by the ambition and determination of their creators. Such designs are predominantly found on freelance websites (being the fruit of personal projects) and rarely found in corporate settings. The main obstacle to wider adoption of these techniques is that the creation of such designs (or rather their implementation with (X)HTML and CSS) is time-consuming. Art-directed layouts are quite difficult to code and maintain, and they often require inline CSS styling, or else designers would end up with dozens of un-semantic classes in their style sheets. Also, integrating advertisements on these pages is difficult because they put constraints on the designer’s layout. So, at the moment, these designs are more appropriate for less frequently updated websites because of the overhead.
If you decide to experiment with art-directed design, be aware that the layout of an article should be secondary and always support the content itself, not dominate it. The problem is that once you start designing a blog post, it’s easy to overdesign page elements just because you can, not because the content dictates it. In fact, the design community is having an ongoing debate on whether art-directed designs are merely “over-Photoshopped articles,” designed purely for the sake of design.
Good design is about effective communication, not decoration at the expense of legibility. As Francisco Inchauste puts it, “I think it’s a ‘pick two’ sort of scenario. The choices are: great content, great art direction and regular schedule. If you try to hit all three, one of those will begin to fall short.” Bottom line: Web designs that are heavily influenced by print design are beautiful, but only when the techniques support your article.
A Lesson on How to Be a Villain
A colorful and nicely illustrated article in a unique layout. Notice something unusual?The design has a table-based layout. The design has a CSS-layout with tabular data for the actual info-graphic bits. Sometimes that’s necessary for art-directed designs.
Evan Dinsmore: 21
A poster design for the Web. This blog post is simple, and it replaces tired plain text with vivid images. But that can be a disadvantage, too: a text-based version would be more user-friendly here.
The Bold Italic: Dr. Feel Good
A very impressive magazine-like layout, with multiple columns, imagery, headlines and a sidebar. If you had only seen this page printed out, you wouldn’t have recognized it as a Web design. The page has 40 div
containers.
A Way Back: Revised Font Stack
A very long, detailed and elaborate design. In art-directed designs, including this one, large images are often used to push the boundaries of the layout. Such images are often 800 to 1000 pixels wide, filling the width of the entire layout.
Chris Coyier: The Safari Challenge
Here is a subtler design, with big margins, multiple columns of text, footnotes and indented headings. From an aesthetic point of view, it could be a page from a book.
Kyle Fielder: Keeping Curious
A classic. Do you remember those old magazines that used big quotes and visuals to create text flow? Notice how well this headline and colophone are positioned in the question mark. A nice, simple, original design.
Sleepover: A Critical Analysis of my Shoes
A simple grid-based design with justified text, serif typography and nice shoe illustrations. Unfortunately, justified text still doesn’t look very good on the Web.
Yaron Schoen: Too Many Buttons
Sometimes art-directed blog posts require something slightly more: like a background image and bakground color, as well as a bit of CSS styling. This examples demonstrates exactly that.
The Bold Italic: Keep Off the Grass
Another remarkable example of multi-column-layouts…
The Bold Italic: Cinderella Story
… and another one. Print-design inspiration at its best.
Travis Neilson: Default Switch
A calm, simple, clean design with custom headings.
Further Reading
- The Super Freaking Amazing Future Trend of Blogs
- The Death of the Boring Blog Post?
An article about art-directed designs from here on Smashing Magazine. - Jason Santa Maria Talks About His Rethinking
- WordPress Art Direction Plug-In
- WordPress Post Styling Plug-In
- WordPress Designate Plug-in
- Jason Santa Maria: The Influence of Print Design
- HeartDirected
A gallery of art-directed designs. - Unique Article Designs
Another gallery of art-directed designs.
4. Horizontalism
Over the last year, we’ve observed a slow transformation in the orientation of text-heavy Web designs. Not only are designs gaining depth and realism, but navigation is changing as well. Some designers are augmenting traditional vertical scrolling with sliding navigation (like here), which usually scrolls in both a vertical and horizontal direction, or even pure horizontal scrolling. This is called “horizontalism.”
Websites with horizontal scroll bars have been more difficult to navigate because the mouse was designed for vertical scrolling. But the emergence of multi-touch devices forces us to rethink the usability concerns of such designs. After all, whether the user browses vertically or horizontally on such a device doesn’t really make a difference. And some plug-ins (like Scrollable and jScrollHorizontalPane) simplify the action by enabling users to navigate horizontally by using the standard vertical scroll wheel on the mouse, thus shrinking the learning curve.
Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience. Such designs are usually carefully crafted and found primarily on portfolio websites and elaborate e-commmerce websites. Whether horizontalism will expand to more types of websites remains to be seen in the months to come.
Thinking for a Living
Not only does this article discuss the advantages and disadvantages of horizontalism with regard to readability, but it also has a nice horizontal layout itself, with multiple text columns. While the orientation is unusual at the first sight, reading the post is quite pleasing and comfortable.
OurType
A belgian type foundry with horizontal Flash-based navigation. Content blocks slide horizontally.
Jung v. Matt
This website has a horizontal timeline for navigation. Notice that there is no horizontal scroll bar; visitors use the vertical scroll wheel to navigate horizontally.
Your Auxillary
One of many so-called “single-page layouts.” The full content of these websites is on a single page, which is navigated using either the keyboard, the mouse or a menu (this website uses the third option). Here we have a good (and common) combination of vertical and horizontal navigation (showing the jQuery ScrollTo plug-in in action).
One Twenty Six
This portfolio has a different kind of horizontal navigation. Apart from “Previous” and “Next” buttons, the user also gets an overview of selected content in a drop-down menu. Once they select an option, the page scrolls horizontally. Horizontal navigation with the mouse wheel would probably improve this design’s usability.
Jax Vineyards
This wine store website has interesting and unique horizontal navigation, which is triggered when you browse the wine catalogue. Both the background image and description of the wine slide horizontally. Simple CSS and JavaScript are used. A beautiful and impressive design.
C. L. Holloway
Candice Holloway’s portfolio has a nice take of horizontal layout. Her artwork is placed on a “wall”; horizontal navigation is used as a metaphor for strolling an art gallery. Also interesting: scrolling is triggered when your mouse hovers over the horizontal arrows; no clicking necessary.
Yamaha Ginza
You’ll find that designers experiment with perspective. Sometimes the orientation is diagonal…
Edpeixoto
… and sometimes the layout just hangs in the air…
ASOS
… and sometimes it’s slanted. Notice how none of the elements have perpendicular lines.
Further Reading
- Horizontalism and Readability
- Friday Focus: Slanted Web Design
A showcase of designs that tilt to one side and avoid perpendicular lines. - Horizontally Scrolling Websites: Showcase and Tutorials
- jQuery ScrollTo Plug-In
This plug-in lets users scroll through overflowing elements and the screen itself. You get many different customization options and various ways to specify the direction in which to scroll.
5. Rich, Strong Typography
Typography has played a major role in Web design for years now. Bold, strong, heavy headlines can effectively convey the purpose of an e-commerce website or portfolio, while subtler headings help structure content and improve legibility. Obviously, the big change we’re seeing today is richer, more versatile typography, partly made possible by the @font-face
attribute and the emergence of font-embedding services such as TypeKit. Rich typographic elements can now be selected and copied from the browser, which wasn’t that easy a couple of years ago.
The future is big, bold and typographic. Rich font families will be used not only for headlines but for body copy, bringing typographic practices from print over to the Web. Also, designers will experiment more with rich, sophisticated serif fonts and bold, imposing slab fonts, supported by subtle imagery. Web designers are also adding more depth to typography with the text-shadow
attribute in CSS3. Naturally, such subtleties are closely tied to the choice of layout. These typographic designs are often grid-based and borrow techniqes from print design, such as sidenotes and footnotes.
We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks inRuss Weakley’s presentation.
Kilian Muster
Kilian Muster uses quite an extended serif font stack for his design: font-family: Palatino, "Palatino Linotype", "Book Antiqua", Constantia, Times, "Times New Roman", serif;
. The posts in Kilian’s blog also have sidenotes.
extrapolish
Notice that the text on this website of a Polish Web design agency is set mostly in capitals: the navigation menu, introductory text and even contact address are in full capitals. Yet the design is calm, clean and polished.
DNA to Darwin
This website has only serif fonts throughout its design: font-family: "skolar-1","skolar-2", Georgia, Times, serif;
. Notice that the text is split into columns; we didn’t see this last year.
COG’AOKE
Again, huge, bold slab typography that makes a strong impression and engages the audience.
TRÜF
This design agency combines a bold color choice with concise, equally bold sans-serif typography.
Pioneers
This website combines vivid imagery and playful typography. The design looks more like a brochure or poster than a “classic” Web page.
Colly
Simon Collison’s subtle attention to the tiniest details make the typography literally stand out. No bold, screaming typography here; just legible, aesthetically pleasing design.
The Saint John’s Bible
This website shows serif fonts at their best. The fonts complement the theme and fit the layout perfectly. Notice how well a beautiful visual design and classic typography can work together.
Brewhouse
A nice combination of type and visuals make this page remarkable. But it’s not clear why the page has three different typefaces for the headings; two would be enough.
Tick Talk
Can this get any bolder? Big bold typography, with capital letters spread across the whole page. When scrolling the page, notice the nice background effect. A very simple and strong design.
The Sew Weekly
This blog has very playful, inviting typography (Proxima Nova for the body copy and Coquette for headlines), and all of it can be easily selected and copied. This is the power of embedded fonts (TypeKit is used here). Only serif fonts are used: font-family: "skolar-1","skolar-2", Georgia, Times, serif;
. Notice the text is split into columns — again, a trend we’ve seen only this year.
Neiman Group
The Neiman Group incorporates its brand colors into the navigation and headline of the front page. The typography is light and classic and gives the page a certain atmosphere.
Conclusion
Modern Web design is better, richer and more user-friendly. We’re seeing better use of visual design for the sake of aesthetics and a pleasing user experience. Traditional techniques from print design are increasingly being applied to the Web, be they layout techniques or rich versatile typography. Horizontal and even diagonal orientations bring a fresh perspective to the flat 2-D designs we’ve seen for years (with their text-heavy, Flash-based pages).
These developments are a sign of the upcoming era of Web design, in which designers can use new tools and techniques to their fullest potential. Web designers should look forward to the exciting and promising years to come.
Stay Tuned!
This article is the first in our series on the current state of web design. Next time, we’ll discuss other developments, such as adaptive and interactive layouts, CSS3 adoption, beauty in chaos, subtle interactivity, context-sensitive navigation and over-designed design. To make sure that you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.
(al)
Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.
- 1
- 2May 4th, 2010 6:15 am
Glad to see this post is different from webdesignerwall:http://www.webdesignerwall.com/trends/design-trends-predictions-in-2010/
Good examples!
- 3May 5th, 2010 12:16 am
Yeah, You are right
- 4May 26th, 2010 2:21 am
@Leo
How are these good examples?
Every site that I recognised is more than a year old, so this does NOT represent 2010 at all.
- 3
- 2
- 5May 4th, 2010 4:57 am
This is a good article because it actually talks about trends in the broad sense and not details like rounded corners, text shadows etc. The example sites are not cookie cutters of one another and are diverse but at the same time are a good indication of the trend. Good Job and nice roundups =]
- 6May 4th, 2010 4:58 am
This is the best article ever. Period.
- 7May 4th, 2010 4:59 am
Excelent resource!
- 8May 4th, 2010 5:00 am
You know, that “many faces of Alan Rickman” has absolutely no reason why it should have been coded in tables. That’s just lazy development – jesus, it’s 2010 guys, do it right or don’t do it at all! ;)
- 9May 4th, 2010 5:11 am
Skimmed through this – so far it seems like a good article.
What about including web trends for touch or gesture based devices such as the iPhone, iPad and Android smartphones.
- 10May 4th, 2010 5:12 am
I’m surprised you guys forgot DubLi. Other than that, an awesome collection.
- 11May 4th, 2010 5:14 am
Easily the best showcase I’ve seen in the last 5 years. Some absolutely amazing stuff in here.
- 12May 4th, 2010 5:25 am
I have to agree with Justin, this post is brilliant. Thank you for putting so much effort and time in this post!
- 13May 4th, 2010 5:25 am
U O A H!! .. simple, clean, … nice for inspiration!
- 14May 4th, 2010 5:27 am
Wow, gotta love custom typography and CSS3 effects!
- 15May 4th, 2010 5:31 am
really inspirational
- 16May 4th, 2010 5:44 am
Great inspiration – thank you!
- 17May 4th, 2010 5:47 am
I only give a comment if an article is good. So.
- 18May 4th, 2010 5:52 am
Now this type of list posts I really enjoy :)
- 19May 4th, 2010 5:53 am
Nice showcase!
- 20May 4th, 2010 5:59 am
Amazing showcase, just love it, so inspirational!
Thanks for sharing.Cheers,
- 21May 4th, 2010 6:06 am
great article :)
Horizontalism is good, i use it on my portfolio for almost 2 yearshttp://www.pudlowski.net :)
time to change it (get rid of flash), but i will keep the horizontal way of reading.- 22May 5th, 2010 10:18 am
The problem with horizontal sites is that they cannot be scrolled with a mouse wheel, and that’s a major annoyance. The Shift+Wheel should really be scrolling page horizontally, but alas it’s used for something else already.
- 22
- 23May 4th, 2010 6:09 am
I don´t believe this “trendy” stuff help us as designers.
There are some excelent websites over there, but i dont believe they would like to be called “trend setters”. They make good design. Period.
We should try to stop “Getting inspiration” (copying) and start to really learn design stuff.
Let´s go back to more reflexive articles, like the excelent “The Diyng Art of Design”.w.
- 24May 4th, 2010 11:57 am
i totally agree with you. usability seems to be missing in many of these.
- 25May 5th, 2010 7:41 am
Everything is copied in one form or another.
- 26May 6th, 2010 4:18 pm
I disagree about your disgust on copying or getting inspiration from other sites.
I am not a graphic design genius, but I do recognize the need my customers have of a nice, up-to-the-date, trendy design to gain credibility, and conversions.
So, following Stephen Covey’s advice, i think getting ideas from good designers is almost as good as being a good designer myself (or my team, for that matter).
Finally, at every respectable art school there is, students start by copying from the masters. Why web design should be different?
- 24
- 27May 4th, 2010 6:11 am
Wow. Way to go…this is the first truly ‘great’ 2010 web trends post I’ve seen. I’ll be returning for sure.
- 28May 4th, 2010 6:19 am
Nice article and some good info/examples
- 29May 4th, 2010 6:22 am
yay!! this is great inspiration. take a time to learn it, but absolutely worthed. thanks
- 30May 4th, 2010 6:48 am
I must say that the articles on Smashing Magazine are really getting better recently. This is a top notch effort! More like this please!
- 31May 4th, 2010 6:57 am
I only want to say:
RESPECT, man. - 32May 4th, 2010 7:04 am
Excellent article. I really enjoyed reading it and looking at the examples.
- 33May 4th, 2010 7:06 am
reading articles on this site is being a little bit demanding
- 34May 4th, 2010 7:21 am
Very nice post! A true telling of where design, development, and creativism is headed today!
- 35May 4th, 2010 7:32 am
Fantastic article!
- 36May 4th, 2010 7:41 am
Excellent article.. very nice to read…good information…
- 37May 4th, 2010 7:54 am
Very good collection of coming trend of design, it’s help us like me learner.
- 38May 4th, 2010 8:17 am
I love these trends. Especially how designers are taking inspiration from pint design. It looks great on the web.
I haven’t been to many sites with keypress navigation, but it seems like an efficient way to navigate.
- 39May 4th, 2010 8:24 am
Great article Vitaly!
- 41May 4th, 2010 8:30 am
Great research…
‘Keypress Navigation’ is very interesting. I think we all know about todays trends but your examples are really striking! Very nice to read and to learn from…
- 42May 4th, 2010 9:00 am
Yeah… design, design, design…. very surface level…
Pfft… Where is the section about content, copy writing, story, and what trends are they going through because of these new design trends?
This is a very familiar post with just a different spin with different frame.
- 44May 6th, 2010 4:22 pm
Hi Jae: Why don’t you do something productive, instead of complaining? For example, you could WRITE that article about content YOURSELF, ando post it to the blog. Don’t you agree?
- 45May 7th, 2010 11:28 am
Carlos, the man wrote his opinion (and it’s not about you).
I get tired of yesmen like you.Smashing is a great resource but some critics here and there won’t hurt. Au contraire.
So cut the crap, Carlos. :)- 46May 11th, 2010 8:02 pm
Carlos is right. Instead of complaining, do something about it.
And yes, constructive criticism is good and I agree that it should be given, but your friend there is not giving constructive criticism, he’s complaining in a bad attitude. That’s just wrong.
- 46
- 45
- 44
- 47May 4th, 2010 9:01 am
Very nice info. I’ll definitely come back to this one for ideas. Thanks for the article!
- 48May 4th, 2010 9:36 am
Another great example of the print influence on web design:http://www.thenewminimum.com/
- 49May 5th, 2010 10:19 am
Good one indeed.
- 49
- 50May 4th, 2010 9:39 am
Nice article and inspirational examples – A lot of hard work must have gone into researching and writing that! Thank you…
- 51May 4th, 2010 9:57 am
Great – I think you are right on the money and I think all of these trends are a positive movement in web design. There are some beautiful examples here. I do agree though that mobile design is a huge part of the web design trend it 2010 that can’t be looked past.
http://www.adamblackdesign.com/wpportfolio - 52May 4th, 2010 10:18 am
Great article! Just one comment: The “picnic extra terrest” design is classic teletext look – as is taken right from the TV screen. Might seem unusual to you, but this look is very common in Europe.
- 53May 4th, 2010 10:19 am
Hey, thanks for including my blog in the list! There surely is some other great work here.
It looks like someone else likes the article as well: dheerajir.wordpress.com/2010/05/04/the-current-state-of-web-design-trends-2010/
- 54May 4th, 2010 10:32 am
Awesome. Excellent. Thanks.
- 55May 4th, 2010 10:43 am
Really inspiring post!
Nice to see how trends evolve from year to year, it’s up to us designers to keep up with everything though :P
- 56May 4th, 2010 11:02 am
Excellent. Thanks. María Elena
- 57May 4th, 2010 11:29 am
Love it! I’m working on the navigation aspect on my portfolio right now (http://www.tkdesigns.tv/portfolio). The option is there, I just need to notify the users that it is!
- 58May 4th, 2010 11:58 am
Nice roundup, a ton of beautiful sites
- 59May 4th, 2010 12:00 pm
i guess it depends on what you mean by trends. i feel like a lot of this is just surface stuff. WAY more important things are happening:
- location-based experiences
- mobile
- user generated content
- APIs
- HTML5
- touch screen experiences / ipad
- insight-driven creative- 60May 10th, 2010 4:23 am
great comment! thx! THAT was more of what i was hoping for.
- 60
- 61May 4th, 2010 12:21 pm
Cool. Thanks for this info. I hope to see more things like this in the future. Regards.
- 62May 4th, 2010 12:33 pm
GREAT ARTICLE!! Feeling very inspired! Off to design for my client now! yayyy!
- 63May 4th, 2010 1:43 pm
It’s for more then a year of resources to learn, act and maintain the web-trend in just one article!….Simply Fantastic! Thank You very much.
Bless you for your efforts!
- 64May 4th, 2010 2:18 pm
really nice post. I enjoyed reading it!
- 65May 4th, 2010 3:28 pm
I agree with William:”I don´t believe this “trendy” stuff help us as designers.”
I think that this kind of posts are a little bit dangerous for younger designers that take it like “the” way to solve design problems.
We should Take it very carefully! I hope design art never die - 66May 4th, 2010 4:27 pm
I love how beauty flows from most of the examples and that´s the way the article helps me as designer. Knowing the “trendy” stuff = what to avoid.
Despite all that; the same problem in a similar way. - 67May 4th, 2010 5:01 pm
I really enjoyed this post just as everyone else has said. Very informative. Nice read on my cell phone.
- 68May 4th, 2010 5:05 pm
Thanks Vitaly. I’ve been waiting for an aritcle to sum up where we are in web design (2010). I guess the one trend that stands out the most is keyboard navigation. Using a print design method is also catching on, but has been around ever since print designers have been involved, as they always see in print. I like to mix it up on every project, but function always wins.
Aloha…
- 69May 4th, 2010 5:15 pm
Thank you for sharing this web design trends for 2010 and I will be using this to our sites
- 70May 4th, 2010 5:56 pm
Great read :)
- 71May 4th, 2010 6:29 pm
Isn’t this more of a collection of really hot sites rather than trends? I mean, you have fffound and mailchimp in there… ollllld.
- 72May 4th, 2010 7:07 pm
I got a lot out of this post. I’m very interested in finding that comfortable medium between information and presentation through design. That being said, I must say content is king.
- 73May 4th, 2010 7:23 pm
Really good collection of different designs, styles, and trends for 2010.
One thing I think is missing however is more of a focus on UX and Usability – personally this is a trend I’m picking as being really big in 2010, but maybe that’s just me!
Anyway, really like the article. Thanks Vitaly.
- 74May 4th, 2010 7:28 pm
Best site on the net right now that displays ALL of these tactics is a Canadian Ad Agency named Grip Limited. Check out their site at
http://www.griplimited.com
This entire article could be focused around what they’ve done. - 75May 4th, 2010 9:23 pm
This exact same article seems to be up on:
dheerajir.wordpress.com/2010/05/04/the-current-state-of-web-design-trends-2010/Even the “Conclusion” and “Stay Tuned” copy is the same.
Are you in any ways related to this other blog?
- 81May 4th, 2010 9:56 pm
well done vitaly! awesome round up and great resources for inspiration!
- 82May 4th, 2010 9:58 pm
May want to add Certtime to section #3.
All in all I think *the* trend of 2010 will be revolving around much increased font availability, i.e. TypeKit and such. The wealth of fonts that is now accessible to the web designers is absolutely ming-boggling. One just cannot not use it.
- 83May 4th, 2010 10:49 pm
that site sucks
stop redirecting traffic - 84May 5th, 2010 10:21 am
Not too SM pretty, but it’s a solid print-inspired design for sure.
- 83
- 85May 4th, 2010 10:37 pm
It’d be nice if you weren’t so blog-centric with your examples. Mailchimp is basically the only example of an application type site.
- 86May 4th, 2010 11:00 pm
Thank you for this excellent article. Great selection of sites and good commenting. I’d love to see more features like this one. So much better than those endless lists of screen snippets with no explanation.
- 87May 5th, 2010 12:01 am
Excellent article, very inspiring. Thanks!
- 88May 5th, 2010 12:15 am
Best of the best… Very detailed, very clean, very useful…
thanks for writing such a good post…. I lot of research had to be done for this article, right?
- 89May 5th, 2010 12:28 am
Lots of awesome design, good work:)
- 90May 5th, 2010 12:38 am
I want to propose one more website to Horizontalism category –http://www.bartkus.fr
- 91May 5th, 2010 1:06 am
It’s all good and well to have heavy graphics on your site (don’t get me wrong, I love those designs and this article is great) but be warned you could pay the pricehttp://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
- 92May 5th, 2010 1:15 am
Pleasant to see our collaborative work together with Pieoneers here (in typography section, pieoneers.com)
- 93May 5th, 2010 2:19 am
Amazing … All these useful tips in the same place. Perfect
- 94May 5th, 2010 3:10 am
This is a great article but maybe some discussion needs to be had about why pretty much all the examples are web portfolios of agencies and freelancers or blog posts from people who work within our industry.
How many of these trends make it through to the websites for clients that have no links with in our industry? While keyboard navigation might have no place on a law firm website, how do we convince our clients to be more embracing of these trends. Its great that our websites show the best of what we can do, that’s why we got hired right?
Why is it then that hardly any of these things make it through to none design related client sites?
- 95May 5th, 2010 3:38 am
I agree.
These websites can be beautifull as heaven, but unless you have a “designer client”, it´d hard to apply those “trends”.Please Smashing Magazine, let´s focus on problem solving, on dealing with content and thinking design, not only copying and “getting inspiration”.
- 96May 5th, 2010 10:14 am
Content is boring, presentation is not :)
- 96
- 95
- 97May 5th, 2010 3:49 am
Very Informative..! Brought out more hidden trends which over-leaped your last article for 2009 trends.
Again thanks a lots… Expecting more articles for web ppl from you.
- 98May 5th, 2010 5:21 am
A great post. I really appreciated the keyboard nav sites and The Bold Italic: Keep Off the Grass.
- 99May 5th, 2010 5:39 am
This is a great article. I got sucked in, and I’m pretty sure I lost business due to my engrossment herein. So, you know, thanks.
;)
- 100May 5th, 2010 5:45 am
Nice round-up, but the danger of such collections is, that somebody gets inspired a little bit too much – and the border to simple copying something instead of using it as a starter is a very thin one. And I bet MANY people will use this list as an inspiritaion instead of getting out and findinig it in everyday things.
- 101May 5th, 2010 9:08 am
9 of ten sites that SM has presented here are unknown/completely meaningless. These are all examples of alternative design/ideas, but to call that a trend – far fetched, isn’t it.
The site that did my head in was Temlin’s or whatever his name was. Achievements, no really? Who on this planet cares about your useless achievements like buying a new wallet? What the hell; does that even mean? Do you really believe this is important or carries any kind of significance? It is not original, it is just inane and very stupid.
Let alone that other gobshite that turned 21 ASKING people to congratulate him on twitter. What is wrong with you?
If I was a client I would think that this douchebag is sick in the head = immediate disqualification. SM would do good to have therapy cases removed from otherwise well selected lists. It devalues the rest by default. - 102May 5th, 2010 10:16 am
I’d love another article in December that looks back and sees if any of these trends were off the mark.
- 103May 5th, 2010 12:19 pm
I’m sorry, but that first hummingbird design is AWFUL. The buttons are boring and have nothing to do with the illustrations… the navigation is a great example of content-sliding gone wrong. Makes me sick thinking about the giant scroll animation…
UGH…
And I ditto the complaints about only being a sampling of mostly portfolio designs…
- 104May 5th, 2010 1:17 pm
I rather prefer to see game like web sites in the future and provide more experience.. http://bit.ly/aVHGJb
Objects moving with keys, implemented games etc.
Graphics, content and game not done yet, but I think it’s going in good direction. - 105May 5th, 2010 11:57 pm
Gosh I love the web.
- 106May 6th, 2010 12:32 am
Им бы Тему Лебедева показать!
Вот это было бы “МЕГА”! - 107May 6th, 2010 2:42 am
I agree with some comments above. Nice article, nice examples – but most of them are not the “every day business”. What about content-heavy sites (2000 pages+), regular company sites (not agencies or blogs), etc.?
- 108May 6th, 2010 7:42 am
I also noticed that modern sites are without excessive using of rounded corners. They were popular in 2009, and now less sites.
- 109May 6th, 2010 12:47 pm
Great article with great examples. The line about art directed sites sometimes being over designed for designs sake is quite poignant.
- 110May 6th, 2010 2:13 pm
The examples for each different element are simply lovely. Can’t wait for the next part :)
- 111May 6th, 2010 5:11 pm
This article was very useful, Thank you for this excellent article,Thank you for sharing this web design trends for 2010 and I will be using this to our sites….the article was very inspiring….
- 112May 6th, 2010 8:54 pm
Nice article. Really good for inspirations :)
- 113May 6th, 2010 11:21 pm
Once again, we owe Smashing Magazine for its tips.
And to the trash talkers, can’t you just shut up coz you’re getting these stuff for free.If you want to put this site down, put up an anti smashing magazine site and spend your own bucks.
- 114May 7th, 2010 5:05 am
Refreshingly educating for mind and eyes! Masterful thoughts by editor. Appreciate the research and compilation!
- 115May 7th, 2010 7:36 am
Another beautiful and informative post!
- 116May 7th, 2010 8:02 am
Print != Web.
There is a lot of pretty design here, but a lot of it is unusable. And the keypress navigation stuff seems pretty silly in the age of touch interfaces. No user is going to learn an unique keyboard navigation scheme just to use your website.
This is a great survey of trends, but I don’t really see a lot here any designer should be actively *emulating*. The Web has shown that usable trumps pretty every time.
- 117May 7th, 2010 8:13 am
Well put Buzz!!!! A majority of the above sites are done by designers gone wild.
- 118May 7th, 2010 8:16 am
nice! Me like! :))
- 119May 7th, 2010 8:44 pm
I appreciate you for the bulk and nice collection of websites. But I think the style and trend not yet changed and it still reflects 2009. Huge illustration, Letter press and minimalism. For bright color, we can’t say its a 2010 trend. We have to work for next trend, let’s do.
- 120May 9th, 2010 5:20 pm
I flat out love this trend compilation! You did a lot of research…this is one of my favorite smashing articles.
- 121May 9th, 2010 6:31 pm
Nice Article & Amazing collection :)
- 122May 9th, 2010 8:44 pm
well point out….
thanks for tips.. - 123May 10th, 2010 4:26 am
Here are 2 more exciting horizontal-floating designs (the first one is maybe the mother of all horiz. designs):
- 124May 11th, 2010 7:56 am
great sharing…loved the design treatment…
- 125May 18th, 2010 10:58 am
i’m inspired by the designs mentioned and the article too… thanks… keep posting such inspirational ones.
- 126June 19th, 2010 3:33 am
Excellent article! As an up and coming cutting-edge designer/developer in Ontario, Canada, I’m VERY excited to create!!!
- 127July 7th, 2010 1:59 am
Goodmorning Technology is a great example of horizontal design. This design is about a year old now.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- Magazine RSS Feed
197,962 readers - Follow us on Twitter
nice!!! clean!!! unique!!!