Renowned designer Charles Eames once said “The details are not the details. They make the design.” This quote has always held true for any kind of design, but it also seems to be the best summation of this year’s design trends. In studying the latest web trends, we noticed a heightened awareness of the finer details that create not only an aesthetically pleasing website but also a more self-explanatory one.
Flat Design 2.0
In recent years, interface design styles have undergone many dramatic changes, most recently shifting from skeuomorphic design to flat design. Skeuomorphic design is a style where interface elements are made to look like their physical counterparts. For example, take a look at Apple’s old version of iCal which uses very specific details such as the stitching, shadows, and remnants of torn paper to make it look like a real-life calendar. On the other hand, flat design strips away the shadows, gradients, and other details that were prevalent in skeuomorphic design in favor of a more minimalistic look. Using the same example of Apple’s calendar, you can see how the flat design version is a complete departure from its skeuomorphic predecessor–sections are distinguished by strong pops of colors and lines rather than drop shadows. However, there is now a growing consensus that flat design might have chosen form over functionality in stripping away the drop shadows and highlights. Sometimes these details can be helpful to the user, especially when trying to distinguish a button from a colored rectangle. Designers are now advocating for the next evolution of flat design that reintroduces shadows and highlights in a much more subtle and minimal way, with the end goal of making interfaces more self-explanatory to the user.
In a previous post last year, we mentioned that Morgan Stanley declared mobile usage has surpassed desktop usage and we have only seen this trend continue. This data has spurred many to think about designing websites for mobile usage first over desktop usage. This shift will most likely place a greater emphasis on the content, from the placement of content to the actual content itself, seeing as layouts for mobile should be designed for greater readability on the go. So for example, perhaps you might cut down on the number of images you show on the mobile version of your site versus the desktop version so that the pages load faster and the user can access the content sooner. If you take a look at the Apple Watch website, you can see how it has been designed in such a way that you get just as rich of an experience on the mobile site as you would the desktop version. If you take an even closer look, some images have been omitted while others are placed into sliders on the mobile site, but you don’t get a sense that you’re missing out on any vital information. One thing to note is that even when you’re browsing the Apple Watch website on desktop, you can shrink your browser down to get the mobile version, making it a truly responsive site.
The user experience of a site can determine whether a site visitor becomes a customer or a one-time user. A site’s user experience is the culmination of many microinteractions, which are moments when a user interacts with a product to complete a single task. The more thoughtful the microinteraction, the easier the user experience, and as a result, the happier the customer. As an example, notice what happens when the user clicks on the download button. The download button transforms into a progress bar to show the percentage downloaded, and when the download fails, there is also a visual indication of where it stopped. The task is simple: download a file. However, if you think about it, there are so many questions that come up after the download button has been clicked. How long will the download take? How can I view the download progress? A good microinteraction, such as the one in the example below, will assuage the user’s concerns by providing effective feedback for their actions.
Microinteractions and animations often go hand-in-hand, so unsurprisingly, with the heightened attention to microinteractions comes a closer look at animations. Though you may not have noticed them, so many of the sites you visit on a daily basis use animations. While some animations seem to exist simply for the purposes of delighting the user, others can be educational, providing instant feedback to the user as to what they can expect from their actions in a more human way. If we revisit the microinteraction example again, we can see how animations help make this microinteraction more fluid and human. Having the download button expand into a progress bar is not required for it to function properly, but what this does is seamlessly indicate what the next step will be. You may have also noticed that the download arrow becomes the progress bar indicator which has been animated to look like it’s straining as it approaches the point where the download will fail. By personifying the indicator, we identify more closely with that product.
Variety in Imagery
In 2015, we saw an explosion of stock photography sites that redefined the stock photo–instead of the canned smiles and awkward lighting indicative of the classic cheesy stock photo, these sites feature beautiful and natural photos that look as though they are straight from your photographer friend’s Instagram account. The proliferation of these sites are part of a bigger movement to have sites with a more personal feel. Stock photos are just one part of it–more and more sites feature other types of imagery like custom illustrations, icon sets, and photos. Take a look below at how Dropbox employs custom illustrations on its site. Whether intentional or not, the illustrations makes the technology seem more approachable and in turn, easier to understand. While this aesthetic would not work for every company out there, it’s a refreshing approach to website imagery. Stock images won’t be going away anytime soon, but the bar for what constitutes good stock will be raised a lot higher.
As the user hovers over the artwork, a grey overlay subtly appears over the image, the name of the piece, the artist, and the price shows up after, followed by the “Add to Cart” button which slides up from the bottom of the tile. Once the user clicks “Add to Cart”, a bright red circle appears next to the shopping cart in the top right corner to indicate that the item has been successfully added to the cart. Because of these microinteractions, the user now knows how to purchase an art piece, all without any written instruction.