Web Design Trends in 2011

By / Jan 4, 2011 / Tips
shares

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

How will you stay relevant as a designer in 2011? The ultimate goal of a designer is not to dazzle but to entangle. Any designer can get ‘oohs’ and ‘ahhs’ that are easily forgotten. The supreme designer is able to create an environment which charms and captivates the user to the point where he does not want to find the ‘Back’ button. Several elements come together to forge such a wonderland: harmonious color scheme, intuitive design, easily accessible information and fast response. Additionally, one can never under-estimate the power of simplicity. Of course, this has always been the case, but in 2011, you are no longer at the forgiving discretion of the desktop, or even laptop, computer. Now, your design must contend with smart phones, netbooks, tablets and the like. Are you ready?

Take a gander at the top 11 trends for 2011.

1. More CSS3 + HTML5

What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:


Now that’s shown, please understand that Flash and HTML5 are not equal opponents. There is plenty of room for both in 2011. The problem is that designers in 2010 (and before) misused Flash. Case in point, very rarely should your entire site be made of Flash, especially these days. HTML5 alleviates some of the burden we have placed on Flash. However, HTML5 cannot (yet) replace the extraordinary design elements we can achieve through Flash.

Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. Move over Photoshop (wow, Adobe just cannot rest), because CSS3 is making short work of text shadow, border radius and image transparency. If you have not already begun, now is the time to really delve into understanding CSS3 and HTML5.

2. Simple Color Schemes

Simplicity. There’s nothing quite as impacting as an honest message on a quiet backdrop. Quiet can be interpreted several different ways. Forget black and white or shades of gray. Think of green, yellow or even red as your primary color. However, limit your palette to two or three colors. Work within the shades of each color for variety. It can be truly remarkable what a few colors can do for your message. Observe:

Shades of green create this Twitter visualization tool. Side note: this site was created with XHTML/CSS and Javascript.

Red can be jarring if done incorrectly. This site gets it right by subduing the color’s overwhelming personality with easy-to-read high contrast text.

3. Mobile Ready

Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.

Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.

With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.

It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.

4. Parallax Scrolling

Parallax scrolling: not just for old school video games. As aforementioned, the hot web design trend for 2011 is creating a sense of depth. What better way to create that than with parallax scrolling? The parallax effect uses layers to present the illusion of a 3 dimensional space. It can be accomplished with some simple CSS tricks or the help of jQuery plugins like Spritely. Parallax scrolling can be most effective as a secondary element on your design, for example, as a header, footer, or background. Making it an integral part of your navigation may prove frustrating for your site visitor.

The Old Pulteney Row to the Pole website uses a top down parallax scrolling effect for the background. This adds a nice subtle amount of depth and lots of interest.

5. Designing for Touch Screens, Not Mice

Technology has become much more tactile. Usability is shifting from abstract to tangible. This means that instead of navigating your mouse to remotely connect, your destination is literally at your fingertips. Tablets, most smartphones and some desktops use touchscreens. Does your design accommodate fingertip navigation?

How much of your design is mouse-oriented? As designers, we worship mice. Our links light up when the mouse hovers over. However, there’s no hovering in touchscreen. How will your design indicate links to your visitors? What about drop-down menus? That’s also a no-go in touchscreen design.

Similarly, how will visitors peruse your site? As controversial as it may be for standard web browsing, horizontal scrolling may be more appropriate for touchscreens. Fitting nicely into this niche is a magazine-like layout where visitors virtually flip through your site.

Lastly, consider using liquid layouts as part of your commitment toward responsive design. In 2011, you are no longer dealing with screen resolution size. Visitors can change their viewing orientation from vertical to horizontal. Your design must be flexible to meet any challenge, or you will be a relic of 2010.

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. Depth Perception in Web Design

No, we are not dealing with the aerial ‘I can see your coffee cup and keyboard on your website’ design of two years ago. Depth perception is about creating dimension in your web design, so that parts of your site looks nearer than others. It conjures a faux 3D effect when done masterfully. Remember what it felt like watching the blockbuster 3D movie, Avatar? The elements jumped off of the screen, quite literally.

Although 3D technology has no yet made it to web design, you can still replicate depth in your design.

This playful website features a rotatable, 3D planet and makes use of depth with well-placed shadows and layering.

Eye-catching and smart, this celebration of Jordan (both the man and shoe) is thoroughly entertaining. The 3D elements are crisp and simple, which what makes them so stunning.

7. Large Photographic Backgrounds

Large scale backdrops will surge in 2011. These images will be high resolution, and covering the entire site. Large photos are an instant way to grab your audience– they cannot help but to see it and have an opinion about it. The background photo must be content-appropriate. Simply having a pretty image in the background without any context will disrupt your user’s experience. Trends point to soft and slightly transparent imagery that does not over shadow your content, but harmonizes with it.

This site makes use of high-resolution photos and the predominant color is yellow throughout.

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. Adventurous Domain Names & Integration

Although not in the strictest sense a web design issue, look forward to seeing more creative domain names. The once-coveted .com domain has lost a lot of its appeal– primarily because you have to think up words in Na’Vi in order to find a domain that has not been thought up yet. 2011 will see a more wide-spread venture away from .com and into more whimsical domains like .me or .us. Think of the possibilities and scoop it up before it’s gone.

.me is a great domain to use for personal portfolios, or blogs, especially if you want a seperate identity from your corporate brand.

Another example of .me integration.

9. QR: Quick Response

If you have noticed those square barcodes popping on business cards, magazines or else where, you may already know that they are a hot trend for 2011. How exactly does it translate into web design? Amazingly well, in fact.

The barcodes are called QR, short for Quick Response. Simply take a photo of the unique barcode with your camera phone. Like magic, your phone will call up the website associated with said barcode. The beautiful thing about QR is that you can use it in a myriad of ways. Feature your QR on your website, in order for site visitors to have a shortcut to your mobile site. You can also track your visitors through QR, by placing a special referral code on your URL. When you are leaving comments on sites such as this, use the QR as your avatar.

2011 is all about mobility and it will be smart to take advantage of this new medium.

qrcode

This is the QR for the author’s personal website. Create your own code here.

10. Thumbnail Design

The ever-enterprising folks at Google have introduced the average user to thumbnail browsing. Gone are the days of clicking through to see the content of a website. These days, you just click on the magnifying glass and hover (assuming you’re not on a touchscreen). Magically before you is a glimpse of what waits on the other side of your click.

If your design is Flash-based, that is definitely going to be a problem. The preview will not display those elements of your design.

As the average internet user becomes more surfing-savvy in 2011, expect to see more people navigating by these means. It is just too great of a temptation not to judge a site by its thumbnail.

11. Constant Connection/ Life Stream

Last, but certainly not least, is the focus on constant connection in web design. The internet is, by nature, a sterile environment, and we make it human by sharing our lives in an open forum. Expect to see more intimacy through the form of lifestreaming. Personal blogs and portfolios in 2011 will prominently feature live Twitter feeds (not just a link to the Twitter page). People will let you know where they are at any moment of the day via Foursquare. In fact, expect to see a dedicated lifestream for all of one’s online activity. 2011 will definitely bring out our inner, creepy stalker, no doubt about it.

A personal site that utilizes lifestreaming.

This is a business site that synthesizes a lot of information on one page.

Final Salute to 2010

Do you agree, disagree, have anything to add? We would love to hear from you.

About the Author

Jacqueline is an award winning writer for hire and brand authority. Find her on her website, and follow her updates on Twitter and Google +.

82 Comments

  1. Bertje
    January 4, 2011

    Large Photographic Backgrounds have been around for quite some time now. But besides that, great list. Thanks!

    Reply
  2. Pragmatic Design
    January 4, 2011

    Point 2 (Simple colour schemes) is an interesting point. Those of us who also design for print have been adhering to this “trend” for many years. I guess it stems back from the days before CMYK was affordable (or good), and printers offered only back and a couple of spot colours. But even now, look at most newspapers, magazines, brochures, etc, strip away the colour photos, and you’re usually left with black text and just two colours.

    Thanks for a great post – again :)

    Reply
  3. Benny
    January 4, 2011

    Really great post. I could really see a lot of these new features coming for better use in 2011, especially HTML5 and CSS3.

    Reply
  4. DTX Studios
    January 4, 2011

    Great post. Thanks for the share..

    Reply
  5. Bruno
    January 4, 2011

    Wonderful post!
    About the HTML5 vs Flash thing. I think you have a point when saying that developers/designers misused flash years back causing some people to have some kind of adversity to it. My opinion is that HTML5 cannot substitute Flash in any given time ’cause they are different things! The same as comparing PHP or MySQl with Photoshop Save for Web! Different things serve different purposes. Instead of substitution we should be worried about evolution and new aways of implementation of technology.
    Concerning “Flash doesn´t work on some cutting edge equipment” meaning: Apple. We should rephrase it to iPad and iPhone don’t work with the Flash platform.

    Nice blog! Love your posts!
    Cheers!

    Reply
  6. Sumit
    January 4, 2011

    HTML5 & CSS3 are going to be widely used tech. this year. Developer/Designer have to think what to use HTML5-CSS3 or Flash while building to get the perfect look. I like both of them :)

    Reply
  7. Jean Christophe
    January 4, 2011

    Many thanks for your post.
    I am quite agree with your point of vue and wasquite surprised and pleased to see presence of QR Code in your post.
    Many thanks ;)
    Should be great to see further this year if thnigs go as schedule in your post

    Reply
  8. Paulo Costa Monteiro
    January 4, 2011

    Nice article, showing the power of the new devices where people do surf nowadays . One thing i would add to this article is the video. Specially with the html5/video integration, i do believe that will be hot for this year!

    Reply
  9. james
    January 4, 2011

    I think it is odd that in your article you make the argument about flash, then state that a site should never be a full flash site, but yet you list 2 site examples here that are full flash websites? (iconic and the nike site). If you never checked to see if the site was in flash or not, does it really matter how a site is built if the experience is good? That or you don’t really understand what you are writing about….

    Reply
    • PixelHound
      January 4, 2011

      I wondered about this too. The experience is nice, but not an example of HTML5 CSS3. Shoot.

      Happy New Year and be inspired!

      Reply
    • Steven
      January 4, 2011

      @James: that last sentence is a bit harsh don’t you think? Those two sites serve as examples for “Large Photographic Backgrounds”, and may not apply to the other trends the author sees. Sites that do one thing really well don’t necessarily do everything you want to cover well.

      Reply
    • Tomas
      January 4, 2011

      Agree. It’s so redicilous that closed Apple banned Flash and lot of people swallowed it completly. HTML5 is a step forward from HTML4. Anyone clever that work with internet know that both is needed. HTML5 is also going to be missused and its often slower with complex things than Flash. We have to live that HTML is a mess. Use HTML5/CSS3 and it not working in IE/WinXP, format problems etc. HTML5 is just a tool among others. Make it mobile/touch ready can also be quite complex for beginners.

      Reply
    • steve
      February 4, 2011

      I was just about to reply some of the same comments. It states that Flash is on its way out and then list all Flash sites. I was first bothered by these comments but its now obvious that the only one that are not using Flash is apple.

      Reply
  10. Octavio
    January 4, 2011

    I could not agree with this “web design Trends” it just could work on small cheap sites. Also the idea of multi-platform sites has become a little bit old fashion since content structure and the navigation systems may variate depending on the devices.

    Reply
    • Rob
      January 24, 2011

      @Octavio

      I totally disagree with your reply.

      It is absolutely NOT old fashioned to prepare a site for several devices

      I agree that it might be quite difficult to optimize all the information of a large site for and desktop/laptop/pads and smartphones.

      Especially when a site is generated with a CMS (although there are possibilities to optimize a CMS site for smartphones).

      But it’s clear that navigation systems with the pseudo class :hover are dead nowadays for NO mobile device understands this interaction.

      Probably the developers will find a solution for that issue.

      But whats wrong with a navigation in valid CSS, (X)HTML(5) and jQuery?

      Thiese kind of Menus can be easily used by visitors who are using any device.

      And, maybe you are not surfing enough, but these trends are used for high-class sites for high class companies who find it of utmost importance to present themselves in a stylish manner.

      Let’s get away from those ebay, amazon and other, in my opinion, really cheap and dull looking stuff

      If you go to a restaurant or a shop, you want to enjoy the atmosphere as well and not only buy food or other items, right?

      In Germany we say “Das Auge isst mit” which means that the eye is part of the whole experience and makles it three dimensional.

      Just be open for new things and, first of all, be creative. Also in your mind.

      Regards,

      Rob van Linda

      Reply
  11. Andrea Vit
    January 4, 2011

    Livestream takes the place of the simple “page Sharing” as social integration.
    I love this post, great job!
    Greetings from Italy!

    Reply
  12. Abhinav
    January 4, 2011

    Amazing article! Great job… I rarely read long articles end-to-end, but this one kept me hooked. :D

    Reply
  13. Rob Loukotka
    January 4, 2011

    Rob from Collision Labs here,

    Thanks for featuring us in your article! Simple color palettes can go a long way, we’re happy to see people jazzed up about it.

    Looking forward to a rockin’ 2011.

    Reply
  14. Mohawk Kellye
    January 4, 2011

    This comment is random, but it’s nice to see that the author is a black female. There just aren’t too many of either in the field and it’s nice to see someone who kinda looks like me (very loosely). =)

    On the subject at hand, I enjoyed the article. My boss sent it to me. Time to follow on Twitter.

    Reply
  15. Pink Lotus Media
    January 4, 2011

    Excellent read! What an inspiring post to begin 2011. I instantly created my QR – thanks for the link!

    Reply
  16. David Devor
    January 4, 2011

    Another great article. I just found this sight last week, and it is now my home page.

    Reply
  17. Justin
    January 4, 2011

    A great read and some amazing websites here.

    Thanks
    Jus

    Reply
  18. Marco Silva
    January 4, 2011

    Good post.

    I do agree with most of the points.
    But I do not see Flash dying so soon, because it has it’s own niche.
    However… javascript frameworks are getting better and better, and will complete HTML5 and CSS3 with more complex animations.

    Cheers,

    Reply
  19. Stewart
    January 4, 2011

    As I think was previously commented, think the large photographic backgrounds have sort of been done to death now. Really good list though, looking forward to web design 2011!

    Reply
  20. Techno Lab Design
    January 4, 2011

    Nice read.
    We’ll pay attention at stuff you mentioned in the article.

    Reply
  21. Srinivas Kumar
    January 5, 2011

    Jacqueline,

    You created a great post with excellent information, i learnt a lot of web design stuff from this article.

    Thanks,
    Srinivas

    Reply
  22. Bambi Corro III
    January 5, 2011

    Thanks for the heads up! Will start implementing 3D like graphics to my future projects.

    Reply
  23. Jethro
    January 5, 2011

    Great ideas. I will have to apply some of those to my Shuttle business website

    Reply
  24. Raquel Gonzalez
    January 5, 2011

    Great post!

    Can’t wait to see some of these bad sites make some awesome changes. I’ve already implemented QR codes into marketing collateral but I think that thumbnail design and mobile are going to become the norm (if not necessity) pretty soon.

    Again, great post and great info!

    Side note: That poor infant is going to need glasses soon.

    Reply
  25. Kat
    January 5, 2011

    Surprised to see how many of these correlate to the new site the interactive agency I work for just launched! Spot on with your predictions.

    2 – Simple color scheme throughout: teal, black and white
    6 – Depth: use slide over windows to display blog posts and such. Very app-like.
    9 – Domain: Used .us for a concise and creative url that spells the agency name copio.us
    11 – Lifestream: twitter feed at top, blog feed smack dab in the middle of the homepage

    Check it out here: http://www.copio.us. Would love to hear what you think.

    Reply
  26. Mal Milligan
    January 6, 2011

    Very impressive article Jacqueline – thanks !! I was so fascinated with tori’s eye web… and your absolutely right about the CSS3 and HTML5. So many cool new possibilities for us as web designers to play with. The iflymagazine link locked up my Vista box for a minute before I could quit out of it BTW. OK Happy 2011 ! Regards – Mal

    Reply
  27. Carl Rosekilly
    January 6, 2011

    Couldn’t disagree more with your opening paragraph.

    As a designer my skills will always far outweigh my development skills, I am dominated by the right hand side of my brain, it’s just the way I’m programmed.

    I am a great believer in content being king and the fact that the user wants information NOW and that’s why we’ve seen the boom in apps, condensed information just how we like it BUT I think the challenge for the designer is to create “beauty within function”, that’s my challenge for 2011 ;-)

    Reply
  28. Jean-Christophe
    January 6, 2011

    @Jacqueline: Thank you very much for this very interesting post, especially for someone like me who is working on a new website for my organization. A question to you and maybe others: we have seen a lot of carousel (slideshows) in the past, Is it still ‘en vogue’?

    Thanks!

    Jean-Christophe

    Trend #9 in 2009: http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

    Reply
  29. Frank
    January 6, 2011

    Attention: qrcode.kaywa.com -> Non-Commercial Use Only!
    You may use http://goqr.me/ instead, they also provide a free API (see http://qrserver.com/api/documentation/ ) for commerical usage, too.

    Reply
  30. ROLANDO
    January 7, 2011

    I like it

    Reply
  31. allan
    January 13, 2011

    thanks Jacqueline for the wonderful article.the article rightly explains the complexity of web designing in 2011!!images,texts,compatibility with mobile browser etc have to be take care of while developing a web page..

    Reply
  32. Reyven
    January 14, 2011

    Great guide.

    Right, its about time to learn CSS3/HTML5 and use it to maximum capability. Adding into the web scene is the highy-anticipated release of IE9. Interesting on how the websites might perform and look like by then.

    Thanks for sharing such great list.

    Reply
  33. Rob
    January 16, 2011

    Hi,

    I just wanted to clear up some of the confusion about flash.. Although many believe that html5 will be replacing flash.. Speak for yourself. I love flash, and find it to be the most useful some lightroom galleries, controlling ajax apps(Flash/ajax bridge). Yes flash may be dead, but Flash Builder lives on in my world.

    I tend to think that people replacing Flash, with HTML5 haven’t the slightest that HTML5 is not finished yet. There are many browsers that cannot render some of the tags.. Until 2012, when the web standard will be finished Per W3c. I would rather use my favorite tool XHTML1.1,. I decided to learned it since HTML4/XHTML transition are long ago. Why skip from HTML4-HTML5.. So you can program with Iframes? And forget learning MXML/AS3. I would speak yourself, because your not the rule. Only the preference. Adobe Flash will be support more readily in the future, and no Silverlight/JavaFx will not be replace by HTML5 either. Markup languages, and RICH INTERNET APPS are a different sphere. I love both and use both. And will at least till I find something better. HTML5 is not as RICH, as flash. SEO, SWFAddress, SWFOBJECT, Flex-ajax bridge are my tools. Learn them, and you may change your narrow scope. Not trying to be arrogant. I just hate blanket statements, and gossip. Haha Facebook isn’t shutting down in Feb. Don’t believe everything on the web.. Most of it is opinions, and not the official.

    Reply
  34. Rob
    January 16, 2011

    Correction.HTML5 replacing flash.. Not stepping away from flash.. I will be stepping into Data Driven Flash, Flash-Ajax applications, and more Rich internet applictions with SEO :))

    Reply
  35. Kuakoon
    January 16, 2011

    Agree. :) Thanks for your post.

    Reply
  36. shaun
    January 17, 2011

    QR Codes died a couple of years ago in australia! otherwise a good article.

    Reply
  37. jahDsign
    January 18, 2011

    Nothing new since 2010 then…

    Reply
  38. Jason Hull
    January 22, 2011

    I think usability often trumps beauty when it comes to effectiveness of a website. I think things will simplify and so will newer sites, as we continue to improve upon what actually works and actually gets results.

    Reply
  39. Alec
    January 23, 2011

    I really, really enjoyed this post! You made some very good points about the mobile thing, and I loved the parallax background on the old putney site! Now i’m going to have to go back and completely redesign my site haha

    Reply
  40. Gina Kilby
    January 25, 2011

    Great Post… thank you! We are infact rolling out QR codes on our business cards too. Very timely. well done!

    Reply
  41. Nep
    January 28, 2011

    Totally agree !!! This is really helpful thanks for great stuff.

    Reply
  42. todd
    February 1, 2011

    One very simple question. WHY DO ALL DESIGNS KEEP USING ALL CAPS for headlines etc.? From magazines like Entertainment Weekly to Smithsonion, and even several of the website examples noted here, it’s ALL CAPS.

    About once a decade a study comes out re-proving that upper & lower case copy is more legible for children, and older folks. With accessibility becoming as important as search for sites, going back to upper & lower case copy seems like a no-brainer.

    Reply
  43. John
    February 2, 2011

    An article definitely worthy of a retweet. The most challenging part of designing web sites for 2011 will probably be making it work on all the different devices. Having a mobile version has quickly gone from a nice bonus to a necessity.

    First article of yours I’ve read and I’ll be reading more in the future.

    Reply
  44. Greg
    February 5, 2011

    Fantastic article which i’ve linked to in my most recent blog post on the same subject. However what surprises me is no one is really saying much about augmented reality in web design. Is it perceived just as a fad? Adidas did a great campaign recently which utilised it so I wouldn’t be surprised if we more design leveraging the technology.

    Reply
  45. Matt
    February 7, 2011

    Great article. I think your predictions are spot on!

    Reply
  46. Robbie Douglas
    February 10, 2011

    Interesting post, pretty much agree with all of this

    Reply
  47. Christopher
    February 10, 2011

    I really need to update my site for mobile. It gets kind of wonky on the iPad.

    Reply
  48. Theraisa K
    March 3, 2011

    I always wondered what that funky bar code thing was. Thanks for enlightening me!

    Reply
  49. Chris
    March 6, 2011

    I’d add another to the list – creative typography. We’ve seen some big movement in 2010, but now with web type available from several sources, including Google, costs and concerns about whether a user has a font installed are no longer barriers.

    Also, now that a wider variety of fonts can be used on a web page using html, web developers concerned about SEO will start moving back to text over images.

    Reply
    • Dan Excell
      April 11, 2011

      Great call.

      Reply
  50. Dan Excell
    April 11, 2011

    First and foremost, solid article. I’m still on the fence regarding the use of HTML5 and CSS3. Even though IE9 seems like leaps and bounds away from what Microsoft usually does. Trying to add a video to a webpage using HTML5 requires so much more at the present; you need multiple video formats and you always have the legacy variable (some person that is stuck on IE7 or even worse IE6). Flash fixes all of that with a simple and free plugin. On the other hand I LOVE CSS3 for all that it brings. The funny thing is that now Google does index Flash content, but like most designers I have moved on from it a while ago.

    Reply
  51. Mark C
    April 13, 2011

    Great article, looking to update my site in next month or so lots gone into my notes.
    What about video content on the home page, social/viral type introduction videos, any thoughts?

    Also I really like the backgrounds that look like they almost ‘glow’ like the COLLISION site above. Is there a name for this type of colour fade/effect. Does anyone know of any online places to find them? (I have tried having a go in photoshop but it didn’t look as good)
    Cheers
    Mark

    Reply
    • Nathan
      May 5, 2011

      I may not be answering your question correctly, but I think the background itself isn’t what communicates the “glow,” but editing the images and the buttons by adding some of the background color so it appears as though the background is glowing onto them.

      As for similar backgrounds, i’m not sure where would be a good place to locate them; though i’m sure there is a good place.

      Reply
    • Graig
      May 11, 2011

      Its the use of gradients that allows you to achieve that. and incorporating shadows works word. but do everything in very small variations. too much just looks yucky.

      Reply
  52. Fabio
    April 26, 2011

    Personally, I think some points (I’d say most) were a design tendency 1 to 4 years ago. I can agree with 1 and 3, 5 maybe, 8, 9 and 11 looks more like “I need to fill space in this article!” I’ve been using 2, 4, 6, 7 and 10 for a few years and I don’t consider myself a groundbreaking designer

    The above being said, nice article, at least to fire an interesting discussion on design issues

    Reply
  53. Graig
    May 11, 2011

    great article Jacqueline. I think that for all of use designers, it is essential go get a refresher on the resources available to us. plug-ins and components have made us resort to laziness when it comes to design. good stuff.

    Reply
  54. Duncan Padmore
    May 12, 2011

    Despite what some may say I think this is a brilliant article. Personally as I designer I have a ‘toolbox’ in my brain and when designing a new concept, the same things come to my mind. Brainstorming and making those ideas different and at the same time simple, is undoubtedly a challenge.

    I wouldn’t agree that HTML5 and CSS3 should be put into practice yet (everyone scream Internet Explorer) but it’s always good to familiarize yourself with new technologies.

    I Agree with designing your site with tablets and ipads in mind but to be honest I think the vast majority of Internet users aren’t on these things and if there’s a compromise it should be against the tablets.

    Reply
    • simon
      June 4, 2011

      Tablets, iphones, ipods and the other mobile devices are almost overtaking traditional searches, mobile search is massive – and its only going to increase. So we must cater for those devices. Great post, thanks.

      Reply
  55. Douchebag
    May 22, 2011

    i like html : D

    Reply
  56. Ajrin
    May 24, 2011

    This is truly great article. Thanks

    Reply
  57. Josh
    June 7, 2011

    Great article. This is a great jumping off point for anyone looking to maintain or create a site in 2011 that wants to stay realevent.

    One trend that I noticed, not only in this article, but overall in the sites I’ve been looking through, is the use of shapes. Traditionally we, as designers, have stayed in the realm of squares and rectangles, and it appears the new school of thought is shapes with definition (layering, shading, etc. as you called out). Of course, this trend tends to lend itself more to personal pages than business endeavors.

    Reply
  58. Team CodeBuzz
    June 24, 2011

    Great article. Great input for people like us..

    Reply
  59. Simon clavey
    October 6, 2011

    Really good article and agree with almost everything said, nice share and a really good starting point for any new designer

    Reply
  60. Some Guy
    October 17, 2011

    I noticed people stop using rounded corners mindlessly. At least in professional designs.
    Square corners forever!

    Reply
  61. Chad Tabary
    November 1, 2011

    Key point there about being mobile ready! The majority of my initial visitors to new articles now are from a mobile device!

    …and solid point about being touch screen ready. I haven’t thought that one completely through yet.

    Take care,
    Chad.

    Reply
  62. Ashley
    November 10, 2011

    Fab article, thanks!!

    Reply
  63. wilsenx
    November 11, 2011

    Great article thanks a lot.

    Reply
  64. Alex
    November 20, 2011

    Depth Perception in Web Design is something we use quite a bit. It’s really popular with several of our clients as it adds an extra dimension to the website. The results can be quite dramatic!

    Alex
    Isadora Design

    Reply
  65. Shalini
    December 1, 2011

    Thanks for Sharing!! Very creative and informative Website design trend blog. Specially for Designers its a wonderful tips.

    Really i like the point “Designing for Touch Screens, Not Mice”

    Reply
  66. Sam
    December 6, 2011

    Thanks for writing this interesting article.

    All of the examples above for full screen, emotive, interesting and RESPONSIVE (in terms of user experience) websites were all done in flash. HTML5 + Jquery simply cannot do what it needs to be able to do to replace Flash.

    The backlash is because things that were do-able for the past 10-12 years now can’t be done because of new devices that have sped up the removal of a suitable technology. The annoying thing about this whole palaver is that there is no new technology suitable to replace Flash:

    None has been specified and what is being proposed is led by programmers- cue development hell, non human readable code, mathematics only for creating things that should be done visually etc…

    I’m not sure HTML5 + Jquery will ever be able to do what you can with Flash and this is a real shame for culture and a big reason why web sites all look the same nowadays.

    If anyone can show me one decent, fast, responsive and slick image led site (that doesn’t feel home made in a bad way) made with HTML5 and Jquery I will change my mind. (but I won’t hold my breath)

    Reply
  67. Lakeside Technologies
    December 10, 2011

    One of the best articles that I’ve read in the fall 2011. Designs now have to be mobile and tablet friendly too for sure.

    Welcome 2012 :)

    Reply
  68. BCTellez
    December 15, 2011

    Great list and well written. The first two items on this list (HTML5/CSS3 and Simple Color Schemes) really cough my attention, and the rest were just great additions to the list, some of them I had not put much thought into…

    Cheers!

    Reply
  69. Fizz Web Design
    December 18, 2011

    I enjoyed reading this, I agree with another comment that maybe we’re a bit early in using css3 just yet, so Photoshop will remain king for some time yet. A site heavy in css3 will simply look totally different & rather disappointing in good old IE8 and back.
    I’m curious that high res’ pic backgrounds are being suggested. What about the impact this may have on the site loading speed and consequently the site’s SEO?

    Reply
  70. Web Design Wakefield
    January 9, 2012

    large background image trend is increasing, anyway nice article

    Reply
  71. Anita web designer York
    February 21, 2012

    Great article Jacqueline. This will give a glimpse for everyone on what’s happening on the web designing.

    Reply
  72. Nathan Giesbrecht
    June 15, 2012

    I don’t think .com domains are going to become less important any time soon. From an SEO perspective, they’ll probably rule forever.

    Reply
  73. Stephen A.
    August 8, 2012

    Really good article!

    It’s interesting to see many of these trends still alive and well in 2012, particularly the large background based sites.

    I would personally like to see more sites starting to use the depth perception (obvisouly depending on the industry/market segment they are in). Also, with regard to the QR Codes I’ve started using these quite a bit in the past 6 months and don’t see this trend changing anytime soon. I always use http://www.quickresponsecode.com to generate mine, nice clean interface and easy to use.

    Keep up the good work.

    Reply

Leave a Reply