Mar
5

Web Design Trends in 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.

7 Comments to “Web Design Trends in 2011”

  • Christina March 17, 2011 at 12:45 pm

    Nice post, thanks for elaborating so much, have bookmarked the page for further reference…

  • Ryan Dunn September 23, 2013 at 9:31 am

    My fiance and I are planning a wedding for either the end of summer 2010, or the spring of 2011 (depending on how much money we can save with the possibility of a baby on the way). The wedding will take place in Southern Wisconsin

    There are a couple things I feel necessary to be included in my wedding, here is my list of ‘things that have to be there’:
    * My 60 guests
    * Outside wedding ceremony
    * Bridal gown, Groom tux
    * 4 Bridesmaid dresses/Groomsmen tuxes
    * The cake
    * Flowers – Very nature oriented ceremony/reception
    * Reception (inside? outside? It’s gotta be cheap as possible)
    * Caterer (Or any way to get us food)
    * Informal Bar (this is a pretty big necessity for my guests)
    * 1 Flower girl dress/Ring bearer tux
    * And of course — The wedding rings

    Now, I know I will be able to get my friends to cover the photography/video, entertainment, and make-up/hair styling for free. I am also very creative and crafty and would love to do lots of the decorations and designs.

    So here’s my question to you? Where can I cut down my costs? Give me as many tips as you can, I want to find the cheapest ways to pull this off. I’m open to all suggestions…

    My budget is kind of unsure at the moment, but I’m thinking $5,000. (If I can spend less – great! If I have to spend much more, well, I can’t have everything – I really can’t go over $6,500)

    Thank you in advance – The more information you can give me, the better chance I’ll pick you for best answer!
    I’ve been looking at http://www.ubrides.com and it seems very cheap, but I wonder about the reliability? Is it safe to trust? I don’t want to spend $300 and not get what I’ve asked for…

    And please, anyone else with anymore ideas?

  • Chris R September 27, 2013 at 7:44 am

    So…the economy is recovering, but I am still out of work despite looking for ages! What gives? Where are all the job openings and job vacancies I keep hearing about?? Any help or advice would be greatly appreciated.

  • mavis24 October 3, 2013 at 5:44 pm

    Dell 17.3″ Intel Dual Core,4GB RAM,500GB HD, Webcam&Software is the full title.

    Please help! Is this a good computer? I’m in college. =] So I need something that can handle me writing papers! LOL But I multitask a lot, so is this computer good for that? I have a few computer games that I might play on it too, if possible. Could this computer handle it?
    Product description:

    Cool color, convenient computing. Whether it’s for work, school, or play, this smart, stylish Dell 17R notebook has the features, the software, and the value you’re looking for in your next PC.

    Fun and function–at your fingertips. This conveniently portable unit is generously equipped with a 500GB hard drive, a 4GB dual-channel DDR3 memory, and a 2.1GHz Intel Pentium B950 processor to efficiently handle any task. The colorful lid shows off your personality–choose from the fresh color options to find the one that suits your style.

    Fire up your favorite media, then enjoy it all in style with the 17.3″ diagonal HD glossy display with TrueLife. It’s also perfect for viewing and editing your cherished family photos. And, the DVD+/-RW optical drive lets you to burn family movies, personal music, and more onto CD or DVD–distribute it as thoughtful gifts!

    Thanks to Intel Centrino Wireless-N1030, this notebook helps you email, surf the Web, and visit your favorite social network sites, no matter where you are via Wi-Fi connection.

    And because this notebook is loaded with Windows 7, everyday computing is faster, simpler, and more reliable. Managing files is so much easier and speedier with enhancements like Jump Lists and improved taskbar previews. Plus, great new features like HomeGroup and Windows Media Center take you into the future of computing. From Dell.

    All this, and you get a suite of software including Adobe Photoshop Elements 9; Cook’n Recipe Organizer 9; Family Tree Maker 2011; Hasbro Family Game Night; Museum Mayhem; Punch Home & Landscape Design Suite; and more. And consider yourself protected by an included four-year subscription to Trend Micro Titanium Antivirus.

    For more information about the version of Microsoft Office included with this computer, as well as other helpful terms and definitions, please refer to the Computer Glossary tab above.

    Please refer to the Specs & Disclaimers tab above for more information about this computer.

    Includes Inspiron 17R notebook, black lid, colored lid, six-cell lithium-ion battery, AC adapter, and PC Treasures software (ships separately)
    2.10GHz Intel Pentium B950 processor (2MB Cache)
    Mobile Intel 6 Series Express Chipset
    17.3″ diagonal HD widescreen glossy WLED TrueLife display, 1600×900 resolution
    4GB Shared Dual Channel DDR3 SD RAM (maximum memory 8GB)
    500GB 5400 RPM SATA hard drive
    8X DVD+/-RW dual-layer drive
    Intel Centrino Wireless-N1030, with Bluetooth
    10/100 Ethernet LAN
    Integrated Intel HD Graphics 3000
    SRS Premium surround sound; 2.1 Audio; two 2W speakers; 3W subwoofer
    1MP HD webcam with built-in mic
    8-in-1 digital media card reader
    Two USB 3.0 ports
    HDMI, USB 2.0, eSATA/USB 2.0, VGA, RJ-45 ports
    Headphone/speaker/line-out/mic jacks
    Genuine Windows 7 Home Premium, 64-bit
    Microsoft Office 2010 Starter
    Measures approximately 16-1/2″W x 11-1/3″D x 1-1/4″H at front x 1-2/5″H at back; weighs 7.2 lbs with switch lid and battery
    UL listed adapter; 1-year LMW
    Made in China

  • kerrin marz October 9, 2013 at 3:34 am

    I am planning to open a web design company. What is the best way to get cases besides craiglist? Any other way can get quality clients?

    Thanks!

  • Larry R November 4, 2013 at 1:00 am

    Can anyone tell me good websites which describes Latest trends in Web development???

  • Mc L November 13, 2013 at 12:24 am

    I’ve searched on the web and it doesn’t really say anything. All I pretty much got right now is consumer goods. What are the modern economic developments and trends? Please help me. I’m not a cheater. But this history that I’m doing is harder than last time. Thank you.