4
Hot or Not? Current Web Design Trends
The Web is ever-evolving. Because it is not restricted by any boundary other than the browser and the designer’s imagination, there is a constant stream of new ideas and concepts that mix the visually appealing with the functional.
New trends are always emerging, the most significant of which explore new possibilities and build upon existing techniques to reveal something even more remarkable. In 2010, we saw the grid layout mature through minimal CMS and blog design, an explosion of large typography and textured backgrounds to mimic print design, the death of Google ad blocks, and the widespread use of Facebook widgets.
With the release of HTML5 and CSS3 compatibility in some browsers and devices, design in 2011 focuses far more on user interface, adaptive design, and using the entire screen. Not everything about these trends is good though. Let’s take a look at some of the most recent trends and what makes them hot…or not.
Full-Screen Design
Just about everyone has a wide-screen monitor these days, and most mobile devices are supporting the landscape orientation. Full-screen design aspires to take advantage of this extra space, where in earlier years the Grid 960 layout was a popular system used to standardize design for the 1024×768 screen resolution.
Today, the average visitor to a website is likely viewing it from an iPhone, iPad or desktop monitor using 1680×1050 or higher. A lot can go wrong if this is not executed properly, however. You want your designs to fill the entire page no matter what resolution the viewer is in. One trick being used is the Viewport Meta tag, which allows designers to control the size of the design’s visible area on the viewer’s chosen device. This is an extremely hot trend that will continue to grow and expand as mobile computing becomes more common in the next couple years.
(http://www.miraclestudios.in/)
Adaptive Design
Following in the wake of full-screen design is the adaptive design trend, which optimizes layouts through CSS3 or SASS to adapt to a user’s screen size. Adaptive design allows designs using a more classic blog layout with a sidebar or multiple columns to rearrange itself if the viewing device is narrower than the original design, such as the case with an iPhone or other Smartphone browser in portrait mode. This trend is not limited to HTML sites – CMS themes and Flash sites are also taking advantage of this hot trend.
One-Page and Touchscreen Designs
(http://www.reverenddanger.com/)
(http://www.20thingsilearned.com/)
As more and more people buy tablet PCs and iPads, one-page designs are springing up everywhere. When combined with other trends such as full-page design and adaptive design, one-page designs are extremely hot. Through the use of device-detection techniques, designers are creating touch-ready designs that are optimized for Wi-Fi connections and take advantage of device-specific interface controls such as zooming and swiping. One-page designs offer the advantage of keeping the user engaged, and replace conventional paged navigation with a more interactive experience.
Where one-page sites can go horribly wrong is when they are designed to scroll but the page is not designed as one complete entity – in other words, each page link jumps to a specific spot and the page layout does not take the viewport into account. This can lead to poorly aligned content and bad user experience, leaving this trend a bit luke-warm. Expect to see it expand in the future though, as our understanding of mobile design and browser compatibility for these devices matures.
Big Bold Letters
In 2009 we saw the beginning of the typography craze in web design when mimicking retro print design became hugely popular. With innovations such as Cufon and Typekit, designers were able to dynamically include any font they desired in a design, without using images. This helped spur the focus on content readability and art-directed blog posts. The problem with these solutions is that they were not SEO friendly, even though they sped up the design process considerably. Today, Typekit and Google fonts offer a new format for using fonts in design that are SEO friendly, with large heavy fonts in retro and classic styles still reigning supreme in 2011. Additionally, designers are opting for larger typefaces throughout content to make text easier to read.
A Return to 3D, in HD
The variety of resolutions available is really changing the way designers create art for the web. This translates into high-definition icons, buttons and web elements that look pixel perfect on a mobile device and a 32” monitor and take advantage of space to add depth of field.
Web 2.0 developed the icon trend in huge ways, but limited it to small sizes and later took on a flat style as designers moved away from images to use CSS. As we come into a new decade, Web 2.0 is quickly becoming obsolete. As bandwidth increases and image resolution is fine-tuned for smaller file sizes, the trend of doing everything small, flat and compact is over, and a hot new trend of big, crisp and beautiful is unfolding.
Background Ads
One of the worst trends to become more prolific in past months is the background ad. Designed to be more visually appealing, or meld with a site’s design better than a banner ad, the background ad is an overwhelmingly in-your-face marketing tactic that is only effective because of its placement – if you click anywhere other than the design’s interface elements, the background ad will pick up your click and send you away to view the target URL. I predict this trend will not last long as the full-screen and interactive trends will allow designers and marketers to come up with ad placement that is less intrusive.
Trends are started every day, but the above styles and techniques set the foundation for bigger and better things to come, even the ones that currently pose a problem. After all, problems are what inspire solutions. What are some web design trends you have noticed gaining popularity? Which ones do you think will last, and why?
