A Journey Through Modern Design Trends

Over recent years, graphic design has seen quite a rapid change in popular trends.For the most part, current debates are focused on two styles and buzz words: ‘Skeuomorphic‘ and ‘Flat.’

Skeuomorphic describes design details that reference real life objects.

Flat describes that which is stripped of all gradients, textures, dimension, and realism.

Skeuomorphic Beginnings

Skeuomorphic design began trending with the introduction of mobile apps on a level of interaction that had never been seen before—Using the iOS calculator felt like you were holding an actual calculator in your hand, and the experience was one of tapping physical buttons. There were no mass complaints about this trend at the time, in fact, a lot of people fell in love with it. Many designers strived to achieve hyperrealistic elements and icons, while users enjoyed interacting with touch screens that could transform into a game controller, the page of a book, or even a malty beverage.

With this came an exponential rise in mobile and desktop apps, leading to advances in phone, tablet, laptop and desktop devices being used by people of all demographics. Furthermore, skeuomorphic design cues became less vital as people became more familiar with the medium. A long story short: arguments against over-the-top realism arose, and heavy skeuomorphism quickly became a thing of the recent past.

That being said, many designers are still creating beautiful skeuomorphic designs very well, just not as much for UI elements such as buttons and navigation bars. Skeuomorphs are best being used in accent illustrations, app icons, and product presentations. Now, many designers are taking advantage of a digitally educated generation of users, and using much less texture, shadow, and dimension in their designs. This makes for interfaces with less content-clouding details, more focused on color, typography, and subtle animation to enrich the user experience—all things that essentially led to this ever so popular ‘flat’ movement.

For now, flat design is the talk of the town and is a great solution for a simple user interface. It is also almost entirely capable of being made up of CSS, which translates to faster load times, responsive designs that don’t rely on hundreds of images, and is resolution independent by nature. For example the button on the left (flat) is made up of CSS and looks amazing across all layouts and resolutions, whereas the button to the right (skeuomorphic) is an image that gets blurry across multiple sizes.

17% of Web Traffic from Mobile

Many people would argue that making design desicions based on mobile limitiations is an unworthy compromise, but as we move forward, users are becoming more and more comfortable with accessing websites on-the-go. As devices become faster, screen resolutions get higher, and multi-touch technology advances, it will be pertinent to have your content just as comprehensible on a mobile device.

According to a survey by Mashable.com “People around the globe are accessing the web via their smartphones more often than ever. So far in 2013, 17.4% of web traffic has come through mobile, representing more than a 6% increase since 2012 when 11.1% of traffic came from mobile.”

Not so long ago, using the web on a phone was nearly impossible if not at least frustrating. Now, with responsive layouts, the expectation is to not have to zoom and pan, but to embrace the action of scrolling. According to our recent WordPress survey, 62% of people will only buy a responsive theme. As people have gotten more comfortable with scrolling on mobile devices, they have also become more ok with scrolling through longer desktop web pages. Here is an example of what our theme, Vertex, may have looked like on a mobile device in past years (left) and what it looks like now (right). There is very little information above the fold, but it is designed in a way that encourages scrolling rather than presenting you with a scaled down webpage.

Above and Beyond the Fold

This long-page design approach has led to debate about how much information should live above the fold, leaving designers with the challenge of deciding what and how much content should be visible prior to scrolling.

• The Pros

• The user gets everything they need to know or do upon first glance

• The Cons

• Having an overwhelming amount of unorganized content above the fold
• Requiring users to click through many pages with too little content
• Lowers the chance of scrolling through the entirety of your page

Overall, layouts are becoming less about the fold, and more about how the content hooks a viewer into the rewards of the page wherever they may be. Ultimately, you want to tell a story that people are interested in. A few current design trends that are used to do this are:

• Large, bold, engaging imagery.
• Subtle on-load animations.
• Lots of white space that allows primary content to stand out.
• Fixed headers for instant navigation no matter where you are on the page.
• Infinite scrolling of images and posts.
• Placing content surprises and Calls to Action throughout the page.

An advantage of a long, vertical layout is a smoother transition between mobile and desktop layouts, however, you can easily lose the attention of a reader with too much scrolling. As we continue to move forward, we will see mobile designs as less of an after thought and having more influence on desktop layouts. Due to constraints in current HTML and CSS standards, the reorganization of content from desktop to mobile layouts is not always perfect, so finding a nice balance between the two is important when planning out your site. Here is an example of a desktop layout that does’t quite respond to a mobile device as clearly as one may think at first glance—the images become more paired with each other, instead of with their corresponding paragraphs.

Responsive design may not be a perfected practice yet, but the industry is making steps in the right direction. Considering that desktop devices are still the primary way of accessing the internet, compromising too much for the sake of a mobile layout is probably not worth it, but back and forth refining will always lead to a better solution.

Moving Forward

As the design industry moves forward and people become more familiar with how to interact with the web, trends will continue to evolve. For now, take the opportunity to innovate through such an exciting and fast-paced industry. Next time, maybe try designing your mobile layouts before your desktop layouts, or asking for design critique from a non-designer. Trends are swaying by the day so it’s vital to keep up with the momentum. If anything is certain, people learn quickly when it comes to new design and technology. Sooner than later, hand gestures and voice commands will erase the need for many UI elements and design will continue to become more about the experience.

The next time you find yourself struggling with a design challenge, which theme to use, or design trend to go with, start by thinking of how your user is going to interact with your content across multiple devices. Organize your content so that it tells a story—let it influence how a viewer experiences the content rather than making them figure it out. A ‘clean design’ cannot always clarify your content, but an organized story can foster beautiful design and create a memorable experience.