Trends In Web Design For 2014
As the Internet has evolved from simple text-based websites in the 1990s to full-fledged social media networks in 2013, certain trends in website design have come and gone. Here are some trends in website design that will become prominent in 2014 and beyond.
While the importance of typography and font selection has been well-known to print designers, web designers have only recently begun to recognize its importance. Good typography helps readers by helping them differentiate between headlines, quotes, and regular text. For example, sans serif fonts are generally considered better for online body copy, whereas the opposite is true for print. Because of this, websites typically use serif fonts for headlines and subheadings, to contrast with the sans serif fonts used for the body.
Parallax scrolling is a technique borrowed from computer animation, where background images appear to scroll slower than foreground images. In web design, it’s commonly used to allow a full-width background image to stay in place while the foreground appears to scroll around it, creating a pseudo-3D effect that looks extremely cool. This technique can also be used for things like interactive comics and storytelling, 3D representations of your products, or even just to make your website stand out from the crowd.
These are just some of the web design trends that will be popular in the coming years. Studying these trends will not only put you ahead of the curve in 2014, it will also help you figure out what trends might be popular ten years from now.
Because Apple’s iPhone and iPad and the vast number of Android-powered devices are so popular these days, consumers expect mobile-friendly websites. Responsive web design is about creating websites that can be viewed on all devices, from a large computer monitor to a tiny iPhone screen, by using percentage-based rather than pixel-based grids, full-width background images, and more.
Responsive web design often requires some planning on the part of the website designer. For example, many websites use sidebars for things such as archived articles and navigation. These sidebars work fine on typical computer monitors, but they won’t work well on a typical smartphone screen. Therefore, the designer must consider where elements from the sidebar will be placed when the website is viewed on a smartphone. A common approach is to move the sidebar down to the bottom of the website, which can be done automatically with the use of CSS3-style media queries.
Full-width Background Images
As responsive web design became popular, it also became popular for websites to display full-width background images, i.e., images that always scale to the size of the screen that it’s being displayed on. This allows the designer to ensure that the background image will always be seen in its entirety, without requiring the user to scroll sideways to see the full image nor showing empty space on the sides if the user’s browser width is wider than the background image.
Flat and Minimalist Designs
Comparing iOS version 6 to iOS version 7 may be the best example of flat, minimalist designs. Flat design eschews gradients and shadows, which can make websites feel cluttered, in favor of a flat aesthetic, where nothing appears to stand out. Flat minimalist designs were largely a backlash against overly busy websites and Apple’s skeuomorphic designs.
Skeuomorphic designs are commonly seen as old-fashioned and cluttered. It may have been necessary at one point to design a website button with gradients and shadows in order to look like a real-world button so that users would know to interact with it, but the ubiquity of the Internet has made that unnecessary. Instead, designers now use strongly contrasting elements and good typography to differentiate elements of the website.
- License: Royalty Free or iStock
This article ws contributed by Shanna Cramer, a web designer at http://TheWebShoppe.net. Follow http://www.pinterest.com/thewebshoppe on Pinterest for a variety of inspiring pinnable images, including website design.