Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Popular Web Design Trends 2011  

Popular Web Design Trends 2011

Web design in 2011 offers a wider range of tools in the designer’s arsenal and more flexibility to experiment with web design elements.  On the other hand, sites have to work harder against competition to generate more traffic, more clicks and more sales or responses. In this article, we will see how popular web design trends have impacted the look, feel and user-friendliness of websites.

  1. Hand-drawn Design
  2. Mega Design Elements - Fonts, Headers & Footers
  3. Parallax 3-D Effects
  4. Mobile-friendly Websites
  5. Use of CSS3, HTML5 and jQuery 
  6. Social Networking Integration
  7. Minimalism
  8. Magazine-style Layouts

1. Hand-drawn Web Design

Hand-drawn design is not only used by  illustrators, artists, writers, designers, photographers,  advertising agencies, film-makers and others in creative fields,  but is also being used for fashion and tourism sites, scientific,  medical  and corporate sites to convey a feel of innovation, flexibility and distinctiveness.  Hand-drawn design is being used effectively for portfolio sites, to make a personal statement and set a website apart. 

Hand-drawn elements in web design range from:

Hand-drawn Headers and Footers

The footer is designed on the lines of the site’s artistic header and both work well for this designer’s portfolio site. The penciled circles, handwritten text and casual highlighting in the site give emphasis to specific points or sections. Note how the footer calls attention to the contact information in an artistic way.

Header

Footer

Click here for more examples.


 

2. Mega Design Elements - Mega Fonts, Headers & Footers

Making a visual statement with big, bold headers and fonts catches the viewer’s eye and can sustain interest long enough for him to scroll or click further.  Earlier, such mega headers provided a welcome change from the narrow headers we had become accustomed to, but like all trends they too are becoming commonplace to the jaded web visitor. 

Mega Fonts

The huge variety of fonts available in web design allows designers to experiment with big, bold typography, use several font sizes and combine fonts with different font families to judiciously grab attention and get the point across quickly, whether it is to the interested primary audience or to the web-skimmer in a hurry.   Mega fonts can be used effectively in conjunction with photographs and images too and can be made interesting with textures, highlights and hand-written text.

Ashfalldesign.com

 

Mega Headers

Visualbox 

Visualbox makes a dramatic appearance with a huge edge-to-edge logo against stark black that provides relief from the vivid colors of the rest of the site. The header uses up most of the space above the fold.

Creative and Mega Footers

The footer invites the web visitor to stay a little longer on the website by providing him or her with an opportunity to interact and engage with the website while just leaving the page. Thoughtful footer design will do much to enhance a website’s functionality, ease of navigation, and creative appeal.

Multiple-use footers: Far from being a design afterthought, the footer has evolved from being to being a useful space for

  • site navigation – providing useful links to more information on the site
  • sitemap
  • contact forms, contact details
  • cross-links to significant pages to increase page views and clicks
  • social networking icons
  • partner sites
  • global navigation
  • graphic imagery providing design continuity
  • more portfolio links
  • branding
  • statutory information, copyrights, disclaimers etc
  • information on the company/people behind the website
  • a call to action
  • a personalized sign-off

Lines like “Where am I?” or “Looking for something?” call attention to the sitemap on the footer. Footers are highly informative, illustrative, sometimes casual and chatty, with networking links, tags, hosting and copyright information and other relevant links.

Mecannical

Mecannical has a well-designed footer where the eye is immediately led to the cartoon with blurb which prompts reader interest in the site-map.  Copyright info is provided semi-tongue-in-cheek, and this acts as a disarming door-opener to the engineer-designer offering his own services to a prospective client. A neatly laid out contact form and a Send button with a rocket taking off provides a creative call to action. 

Click here for more examples.


 

3. 3D Feel With Parallax Scrolling

Using JavaScript and CSS techniques, web designers can create the illusion of 3-dimensional depth by animation of images in multiple layers, with parallax scrolling. The foreground images move faster than the background images, creating the 3D feel. Horizontal or vertical parallax scrolling can be used to amazing effect in single page portfolio websites, website headers, footers and other parts of the site.

Example of 3-D feel with parallax scrolling

YessBMX  - Go on the ride of your life!

Rastapenatal.com.br

This site gives the user an actual feel of the room.  On hover, the impression of depth becomes even more dramatic… down to the lights lighting up one by one.   Go right in to experience the real thing!

Click here for more examples.


 

4. Mobile-Friendly Websites

Customers are using the web on-the-go to make quick decisions, whether it’s browsing for information, finding a restaurant, making decisions about travel, buying clothes, planning a new house,  checking out a favorite TV program or keeping in touch on Facebook. That’s why it’s crucial to have a user-friendly version of your website that’s accessible to mobile users.

Here are a few things to keep uppermost in your mind for mobile web design:

  1. Keep it simple
  2. Remove clutter – cut content to minimum
  3. Think of what your user is looking for and make it easy to get that information
  4. Design for fingertip navigation
  5. Re-design website navigation for mobile usage\Use icons large and speak with images
  6. Single-column layouts work well
  7. Experiment with horizontal as well as vertical formats
  8. Use rich images and large logos for memorability – games, movies etc can be shown with rich colors, textures and depth
  9. Put networking logos upfront for easy sharing

Visit Savannah

Tyler Michaud

Click here for more examples.


 

5. Use of CSS3, HTML5 and jQuery

Websites have to be mobile-friendly, cross-browser-compatible and accessible on a large variety of devices like mobile phones and tablets. They need to be able to present all kinds of media including audio, video, galleries, walkthroughs and photos providing vivid experiences. Web designers are using CSS3, HTML5 and jQuery to address these issues and provide an option to Flash.  Thanks to JavaScript, dynamic websites are no longer the preserve of Flash-based websites. jQuery is a JavaScript library that simplifies web development.

Although Flash provides a great way to showcase dynamic content, it is possible to create zoom effects and Flash-like animations that are smoother and more subtle using CSS3, HTML5 and jQuery, without waiting for a page to reload each time. The <video> tag in HTML5 allows videos to be easily embedded and played in web pages without additional software. You can create text/images with moving backgrounds, character animation, galleries, slideshows and image sliders, auto-playing featured content sliders, flipbooks, etc.


This illustrated site features an animated man that moves smoothly downwards with vertical scrolling, providing alternative navigation and leading the eye to important elements like the Twitter bird at the bottom of the screen, and on through the rest of the site, to the portfolio slideshow and more social networking icons at the bottom of the page.


This handy flipbook from Google presents attractive illustrations, animations on some pages and informative text on browsers and the web. It features page navigation in the footer and a menu in the header, and allows quick and easy sharing on social networking sites.

Click here for more examples.


 

6. Social Media Integration

Social media integration is the syncing of all social media profiles on various social media platforms and aligning their functionality with that of a company’s main website.

Social media platforms:

  • increase web traffic and clicks through social sharing
  • provide social branding
  • increase brand visibility through social media marketing and promotion
  • enable customers to give feedback

To use social media effectively on your website,

  • Consider its positioning, color, approach, size, style. The customer should be able to find social networking buttons quickly and like what he sees
  • Call attention without distracting from what’s important in the site

www.danielmarques.me

This site lets the visuals speak - on hover they act as a personal introduction to the artist, his portfolio and his interests.  See the upfront emphasis on the social networking icons here.  

Edgepoint Church

A huge Twitter icon with shadow on the intro slideshow of a church website and more social networking icons on the side! Shows the importance of social media in any community.

Click here for more examples.


 

7. Minimalism

Simple, clean design with easy navigation and a total lack of clutter to distract the viewer’s attention – that’s what distinguishes minimalist websites.  Minimalism also translates well into mobile websites which necessarily have to be stripped of clutter to get the point across quickly.

www.polargold.de

This site makes effective use of color, textured fonts, white space and graphics to create an impressive effect, with an expanding menu that reveals text, a touch of color on the action line “We are hiring!” and  an understated Facebook icon  which stands out against the white space.  On rollover, the menu fonts turn to text with textured color.

FinelySliced.com.au

Click here for more examples.


 

8. Magazine-style Web Design

Magazine style layouts lend themselves to media and corporate sites where there is a large amount of content. They require careful organization, presentation and updating of content to ensure that the most important and most relevant information is given precedence over other less important features. The user should not be bombarded with “information overload”, and neat, well- planned navigation paths should lead her easily to the content she is looking for.

www.sandiegoitalianfilmfestival.com

Click here for more examples.


Popular web design trends in 2011 include hand-drawn design, mega design elements, parallax 3-D effects, mobile-friendly websites, use of CSS3, HTML5 and jQuery, social networking integration, minimalism, magazine-style layouts. These trends have impacted the look, feel and user-friendliness of websites.

Our observation is: some of these trends have been around earlier too. However, now that several more sophisticated tools and technologies are available, web designers have greater freedom of experession - the freedom to experiment with new looks, fonts, image manipulation and much more. At all times, our focus should be on the user and his or her "take" from the website, and strive to make each site we work on more user-friendly, communicate the most important messages effectively, plan the navigation and have a strategy for the addition of new content.  

It’s been an exciting year with more possibilities opening up still further in web design. Let’s see what tomorrow holds!

Hope you enjoyed this article. Don’t forget to share your thoughts!


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Related Articles, Tips & Ideas

Cool Website Menu Ideas

Logo Design Ideas

Brochure Design Tips

Text Ideas in Design

Logo Design Tips

Featured Template
Template # 53148
Type: Joomla
Price: $75