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.
Popular Web Design Trends 2011:
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
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.
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.
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.
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
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 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.
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!
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!
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:
Visit Savannah
Tyler Michaud
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 webdevelopment.
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.
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:
To use social media effectively on your website,
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.
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.
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.
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.
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
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!
