Adult Web Design

Web Design Trends

25.10.2013
Trends in web design can change and fade almost as quickly as they become fashionable. But so far in 2013, a handful of trends have really seemed to take web design by storm, and seem to be sticking.
Today, we’re going to examine ten trends in modern web elements and showcase some great examples of each — everything from Retina Support and Infinite Scrolling, to Simple Square Grids and Digital QR Codes. Some trends have survived since 2012 and others are just becoming popular. Whether you’re a professional web designer or a small business owner, keeping up with these trends can help your site, or your clients’ sites.
 
Fixed Header Bars
Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitors scroll down your page this will offer constant support for navigation and a trip back to the home page. This trend has been around for a while but now we are seeing this in full force.
 
Unique Content
Web designers have been paying more attention to the information site visitors are interested in and designing around content instead of dropping content into a finished design. Content first design is often simple or minimalist as a way to provide visitors with exactly what they’re looking for. Developing a website built around content is more likely to drive traffic — and conversions for ecommerce sites — than sites where content was added after the design.
 
Simple Square Grids
One of the things I've been noticing more and more is designs with simple square, non-uniform grids like the Windows 8 "metro" design. The resemblance of these examples and the Windows new UI is very strong, however this style is not new in the editorial world. Magazines have been using this layout approach for decades.Another interesting point, in my opinion, is that this style evolves from the grid system that Pinterest made popular. The only difference is the removal of the cards metaphor, making usage of other artifices like typography and different colors to link image and text.
 
Retina Support
Apple introduced its Retina Display in 2012 in the iPhone 4, iPad, and MacBook Pro laptops. Retina Display is Apple’s brand name for its liquid crystal displays with a much higher pixel density. Apple claims the Retina Display pixel density is high enough that human eyes are unable to notice pixilation at a typical viewing distance. Many 2013 web developers have adopted higher resolution imagery and CSS responsive design to accommodate users browsing on Apple devices with Retina Displays. Retina.js is another useful way to deliver high-resolution images to Retina Display devices.
 
Infinite Scrolling
Many popular social media sites like Pinterest, Tumblr, and Facebook support infinite scrolling — the ability for a site to automatically load more content when a user scrolls all the way to the bottom of the page. Designers have been adopting the infinite scrolling effect to improve user experience by eliminating pagination and loading the content users want without forcing them to load additional pages.
 
Vintage Typography
Big, bold retro-style type is extremely popular right now. The style works great for projects where you are lacking strong visuals, or in combination with sharp images by creating interest with lettering.
This trend is one that has been around for quite some time and never seems to get old. What changes is the way we see the classic type styling being used.
Right now, vintage typography is most commonly a focal point in a minimalist design scheme. In addition, designers are really playing up vintage type and very little color, such as black and white palettes or a handful of muted colors. (A few years back, vintage typography was popular in conjunction with bold colors.)
 
Flat Icons
With flat as the de-facto top trend of 2013, most designers are jumping at a chance to use it in some way. Icons are one of the most popular choice because of their flexibility. A designer can use flat elements in combination with some other “less flat” elements in the overall site design, something that is becoming more and more common as flat design extends to “almost flat design.”
In addition to flat icons, flat buttons are also popular for designers looking to incorporate a touch of the trend to projects. Even Yahoo includes flat-styled buttons and icons within its site framework, which is not innately flat.
 
Sliders
When it comes to displaying photography or a portfolio, it’s hard to find a site that does not use some type of a slider. (Increasingly, they are becoming popular with video too.) Most sliders work on an auto scroll that users can stop or pause and feature a large display image and smaller images or buttons that advance through images.
Sliders work with a variety of other design styles – the featured style here has three versions which can work for flat or skeuomorphic projects. This tool is a simple and effective way to showcase a lot of work, while maintaining visual dominance.
 
Digital QR Codes
The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick Response Code and has developed from the older UPC barcodes. You will find these tagged everywhere from restaurants to event venues and automobile sales lots.
But very recently I have found a couple of websites with these codes built right into the design. This isn’t something you would normally consider since they are often found in print. But QR codes could become trendy as data transmission becomes quicker over time. You can see a brilliant example of this technique on Keith Cakes contact page.
 
Parallax
Another scrolling effect that was also popular in 2012, and remains popular this year, is “Parallax,” when two or more parallel objects move at different speeds. With increased browser support, Parallax has become an even more popular way to add depth and interactivity to a site design.
 
App Style Interface Design
The popularity and familiarity of mobile app design has found its way into web design. App style interfaces in web design are intuitive to most users and can help make responsive design appear more familiar when rendered on mobile devices.