Web Design Trends 2016Karlen Trimino
The flat design revolution has been gaining momentum with surprising speed over the last few years. Considering its inherent simplicity, it’s not hard to see why: it makes any interface feel a little more intuitive, it works well with responsive design and modern framework, and, or course, it looks amazing.
Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.
Microsoft was one of the first to apply this design style to its interface, seen by some as a backlash against the popular skeuomorphic design that Apple kicked off with its iOS interface. Instead of converting a real-life object, such as a calendar, into a tiny realistic illustration, advocates of flat design identify apps with simple, icon-like images.
In spite of flat’s success, some designers started noticing legitimate flaws that weren’t being addressed in the design community. While flat gained a lot of steam due to its welcome minimalism, it went a bit too far in the austere direction. The characteristics of some 3D effects turned out to be excessive and adversely impacted the user experience.
Thus, it was inevitable that another change would occur. That’s where we are today with the dawn of flat design 2.0.
Flat Design’s usability problems
All of flat’s usability problems can be summed up in the following statement: Flat typically trades in a user’s needs for hip aesthetics.
In other words, designers designing for an interface to be “flat” will put a greater emphasis on keeping things minimal, non-3D, and vibrant/bold instead of putting the user experience first. That’s usually where all bad things in the design world start, and that’s why flat has evolved to 2.0.
Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose.
While minimalism often appears simple on the outside, a lot of thought, practice and time goes into the production and development of a minimalistic piece. So, here are some ways you can get the most out of minimalism.
The relationship between visual elements such as photographs and typographical elements is important to get just right. A good design often ensures that no one element vastly overpowers the other with no good reason. In this publication example from Mother Design, the more simple photographs have been paired with large, attention-grabbing pull quotes, while the more textured and complicated images have been paired with a small piece of body copy creating a balanced harmony between each page.
Web animation was once thought of as frivolous ornamentation, but as technology advances and internet connections accelerate, almost all designers are coming to understand the practical benefits. Those that ignore animation altogether will soon be left behind.
Animations are being used more and more to enhance a site’s storytelling, making the experience more interactive and entertaining. However, you can’t just stick animation in anywhere. Consider carefully whether it adds to your site’s story elements and personality.
Since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user’s attention. Thanks to advances in bandwidth and data compression, users won’t suffer from slow load times either. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.
Galleries and slideshows
Galleries and slideshows are an effective way to showcase multiple images without overburdening the users. These are great for photography sites, product showcases, and portfolios.
One reason for the ongoing popularity of sliders is the lively feel they generate through the motion of the slides on the screen. This sense of action keeps site visitors engaged and alert. In addition, sliders allow web designers to display more than one image on what is usually important design “real estate” – instead of reserving the best spot on the page for just one image, why not share it between several great visuals? In short, slideshow galleries show versatility in a dynamic and inviting way.
Not everyone agrees with this evaluation, though. The anti-sliders camp argues that slideshow galleries may confuse the site’s hierarchical layout and lead viewers out of focus. Too often designers also make the mistake of uploading too many files to the slider gallery, slowing down the loading time and overall harming the user experience.
At the bottom line there is also the question of personal taste. Some people absolutely love the effect of slideshows on a web page while others are not so thrilled with it. At Wix, we believe that slideshow galleries can be a real visual treat on your website if you use them properly. If you think slideshows are perfect for your website, let’s continue with a few expert tips for designing beautiful slideshow galleries.
Responsive web design has become incredibly popular in recent years thanks to the rise of mobile internet usage.
It’s safe to say responsive design isn’t going anywhere soon, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. But responsive web design does come with some issues if not carried out properly, the most important being performance.
Mobile phones today have the ability to render just about anything that appears on a desktop. There’s even a workaround to support Flash through the cloud if you use an iPhone. And even though most of my mobile experience takes place inside apps, I still need to use a browser. And I’m not alone. There are millions of web pages accessed through mobile every day simply because there’s no alternative at that specific time and place. For me issues happen mostly when I click a link from a Google search or visit an affiliate referred from Facebook.
Even some of the content farms with those lovely slide shows (supposedly optimized for any device) don’t always render correctly. It’s sad to see these sites have not been properly optimized for mobile browsing. This in turn results in a huge potential loss of advertising revenue.
Performance is important not only to UX, but also to Google in the wake of the Mobile Friendly update which released in April 2015. Responsive web design is also highly compatible with minimalism, thanks to the necessity to keep page weight down. It’s also great to work with cards and responsive design as they can easily restructure in order to fit any breakpoint or screen size.