Websites are no longer just about static pages that look good when you click over to them. It’s important to apply the right design for the right purpose. It’s not the size of the boat, it’s the motion of the ocean, right? Use aesthetics wisely and be responsive to your audience. It’s not just for show. In 2010, interfaces became cleaner, and the fluff disappeared. That’s not to say that they became simple or boring, just that you could get where you needed to go more quickly. It’s just like how an IKEA catalog can make you drool, even though it’s clean lines and white-on-white. If you know what you’re doing, you don’t look like you forgot to add something; you look like you were savvy enough to leave it out intentionally.
If you’re designing a website today, make sure you’re aware of the trends below. Falling behind is like telling people that Paris Hilton and Kim Kardashian are BFFs: it will be obvious that you haven’t kept up with the times.
2011 & 2012 trends are …
- HTML5
- CSS3
- Single Page Websites with Sliders
- Parallax Scrolling
- Mobile Design
- Impressive Typography
- Big Images & Photo Backgrounds
- Textures
- Design Below the Fold
- WordPress
- Social Media Sharing
HTML5
The current version of the HTML markup language was still in development in June 2011, but it is already being used as an all-encompassing update to HTML4, XHTML1, and JavaScript. It’s an effort to standardize markup language to avoid syntax errors in web documents. HTML5 not only has new elements, such as <video> and <audio> instead of , it has done away with elements that are no longer necessary with the use of Cascading Style Sheets. HTML5 also defines how invalid documents should be processed. This ensures that all browsers will treat syntactical errors the same way. If language in the real world was updated as often as HTML, maybe we would finally all just get along. As it is, we might as well sit in front of our computer monitors and rely on this standardized markup language to understand each other, even if we never end up leaving the house again.
George Petrescu
Luca Vercellio
Lost World’s Fairs
CSS3
Not all browsers have adopted CSS3 as a whole yet, but they are slowly starting to come around. Using CSS3 is like scrapbooking vs. shoving your photos into those self-stick photo albums with plastic page protectors. Some of the new features of CSS3 include rounded corners, mega drop-down menus, animated buttons, multiple backgrounds, and a hell of a lot more. Web applications just got a lot cooler—don’t let anyone keep calling you a geek.
CSS3 Generator
Polaroids With CSS3
CSS 3.0 Maker
Single Page Websites with Sliders
The sliders that became popular in 2010 were bite-sized and held a hunk of meat between two pieces of bun. Sliders are now the trend when it comes to fitting a lot of information on one in-your-face web page. Instead of incorporating a slideshow into your website, your website becomes the slide show. Visitors to your website no longer have to drag the mouse over complicated nav bars or menus. Instead, you can capture their interest with breathtaking design elements. Oh, not interested in that one? Click on the arrow, and—voila—but wait, there’s more! Sliders let you use visuals to entice your audience. Not everyone can read, you know.
Mike Glezos Web Consulting
YouZee
topLingo – Web Design Firm
Parallax Scrolling
In an era where electronics companies are marketing 3-D televisions, why is parallax scrolling on the list of web design trends? Are we going back to the days of Sonic the Hedgehog? Well, apparently it looks pretty sweet on a web page. When a background, header, or footer uses parallax scrolling, what you get is a subtle 3-D environment. There’s something about it that draws you in and gets you involved with the website. A sense of depth develops, where you become part of the foreground to the website’s background. Depending on how you move your mouse, certain elements on the screen move as well. When your kids start complaining that you’re in your own little world every time you sit down in front of the computer, it’s because you really are.
Drupalcon 2012
Kisko Labs
Nike Better World
Mobile Design
With the increasing popularity of tablet technology and smartphones, web designers must adapt to new standards. Screen resolutions are different, and they can’t accommodate the same extravagances as computers. Instead of having to create a separate, lackluster site, CSS3 allows web designers to accommodate mobile technology into the website design. Icons should still be striking and colorful; text should be readable. A mobile website should retain the design elements of the original, just in a smaller, touch-screen-friendly format. Today, more people will be buying smartphones than personal computers. That means that websites should look just as good—if not better—on a tiny screen as on a high-definition 17-inch monitor.
Kayak
Netflix
Impressive Typography
It’s no longer a simple war between Arial and Times New Roman. In fact, Calibri is the default font on Microsoft Word 2010. With more browsers supporting font-replacement methods, web designers can integrate custom fonts into websites. Mixing bold and scrolling letters and using extra-large font sizes to grab viewers’ attention is becoming mainstream. Think bold, fun, and unique. When everyone and her mother has a website, think about how to make yours different.
Carsonified
What A Lovely Name
Finch
Big Images & Photo Backgrounds
Remember when people started playing around with dark backgrounds and striking images that popped against the negative space? (Let’s not even talk about white fonts on black backgrounds). It was impressive when it worked right. Now, images are actually being used as the backgrounds themselves. With digital SLR cameras that can take super high-quality photos, it’s easier to get huge pictures with amazing quality to take up the screen. These backgrounds can be quirky or hyper-realistic, but they draw you into the scene. You want to check out that website simply because you can’t take your eyes off the page. But make sure your image is great quality and that it doesn’t compete with your content. It still has to look like a background, even if it is larger than life. It’s all about harmony.
Bing
Living Social
Yin’s List
Textures
Along the same lines as using a high-quality photo for a background, another 2011 & 2012 web design trend uses texture all over the place. It doesn’t have to be bold; it just has to be subtly touchable. Texture is another way to add understated interest to a website and to attract the viewer to the page. The viewer will probably never even notice that your background looks like parchment paper, that the borders look like wood, or that your font looks like suede. It’s about that subconscious 3-D effect that adds depth and dimension without being overpowering. Texture is that element that turns a house into a home and a poster into a work of art.
Cake Sweet Cake
Alpine Meadows
Organic Supermarket
Design Below the Fold
It used to be a faux pas to make a user scroll down to get to anything slightly resembling important information. Click the down arrow? The horror! Since so many users don’t have to click anything anymore—in fact, they revel in putting their grimy fingers all over their screens, whether they’re using a laptop, tablet, or smartphone—feel free to put your content anywhere. Do you want to put your main message at the very bottom of the page? Probably not. But that’s common sense, no matter what your aspect ratio is. Chapter one is always at the beginning of the book. Likewise, keep your important information on top, but don’t design your website to fit a particular size.
Life Below 600 – IAmPaddy.com
37 Signals
Future of Web Apps Conference
WordPress
Tutorials for transferring a domain to WordPress are all over the place. That’s because WordPress allows you to set up your website and alter its features without really even having to know how to do it. It’s user-friendly and relatively self-explanatory. You can change the look of your website by changing the template or add a feature with a plugin. So many people are using it that if you encounter any difficulty, you can easily troubleshoot it by doing a quick internet search. WordPress is the wave of the future, and it’s a trend that’s also keeping up with the trends. It’s evolving just as quickly as everything else in the internet world, if not faster.
Scobleizer – WordPress Blog
Charles Barkley – WordPress CMS
Tasty Kitchen – WordPress Social Network
Social Media
Sharing Web development is no longer about working in a vacuum. In fact, your website may not survive if it’s not followed, liked, and tweeted about. The internet is becoming a big party. If you don’t have a blog, maybe you’re not necessarily living in the dark ages, but you’re living on Sesame Street. If your blog is not on your website’s home page, you might not be considered one of the cool kids. This is the age of connection, so your website should be integrated with social media sites. The internet is turning into a worldwide game of Six Degrees of Kevin Bacon. If you’re not making yourself known on social networking sites, you’re going to be that one lone wallflower in the corner who has fewer than 100 Facebook friends. Make sure the design elements of your web page allow viewers to easily connect with you. Make sure your marketing strategy involves networking. Few people are going to find your website on their own.
Best Buy Twitter – Twelp Force
FedEx Blog
Starbucks Facebook
Website trends in 2011 and 2012 are picking up where 2010 left off. This year, web developers and designers need to focus on intertwining their audience with their website. There are more branches involved, whether with social networking or the new devices that are becoming the norm. Many of the website trends today make it easier to design and standardize a website. Others make it easier to add function to the pretty parts. Think smooth jazz as opposed to electronic pop music. In a time when “bounce” is a bad word, the trends work to lure users in organically, simply because they have found everything they were looking for and more.
