Graphic designer Paul Rand, known for his work in introducing and then marrying off copy and design in the 1940s, 50s, and 60s, argued that there is an essential relationship between how something looked and what it accomplished. One could say that Rand was the father of commercial form—or infusing copy with art in order to catch the attention of consumers. This type of commercial art was not seen before, and it worked so well that it became an axiom in the world of graphic design. Translated from print and then adjusted for technology, we find ourselves 50 years later and well into the next phase of web user interface (UI) design. Much like Rand, we’re simply looking for an effective way to get the audience to take an action, albeit in a world that is now ruled by high expectations, personalized experiences, and a healthy dose of control. Fortunately, there are an array of web UI designs that draw from basic commercial art principles and still keep the user experience top of mind.
6 UI Web Design Trends
Responsive: Given the growth of mobile, responsive web design puts users first and is now considered to be an industry best practice. Responsive web design can be thought of as reactive in that the images and content adjust to a variety of screen sizes while still retaining their intended appearance. The user experience across all devices is critical to responsive design, and every effort is put toward providing a seamless journey. A responsive website has both time and money efficiencies since it requires building and maintaining just one website. Additionally, Google favors sites that are optimized for mobile in its search rankings, and since all of a website’s information is presented on both mobile and desktop, engagement increases as bounce rates drop.
Flat: For customers who want a minimalist and sophisticated look, the perennial flat design is always a solid option. Some say that using flat web design is a step backward, but if you want to get closer to the fundamentals of commercial art, that might be a good thing. Flat design is the perfect format for highlighting typography and images, and when done right, it also accommodates a lot of complex information. Free from the limits and intended imitation of skeuomorphism, flat design stands on its own as a true web experience. Flat has a number of advantages as it speeds workflow, loads faster, and scales well for mobile users.
Material Design: If flat design has the ability to make you feel, all at once, like you’re either trying too hard or not hard enough, there’s a remedy for that—material design. Developed by Google, it’s like flat design on caffeine but not too much of it and not too close to bed time. Material web design makes use of the Z-axis along with shadows, bevels, and animations to add just the right amount of enhancements. Load times are faster with material design, images can be scaled without losing quality, and it works well on mobile—all of which are distinct user experience advantages for both users and web designers.
Long Scroll: You’re not still giving away the good stuff above the fold, right? Good, because long scroll design has effectively put that practice to rest. Think of it as putting down the newspaper and picking up a magazine. Perfect for storytelling, long scroll gives users a totally immersive experience free from the burden of navigating through a variety of pages. The linear and continuous flow of content allows for uninterrupted reading all on one web page. Long scroll is perfect for mobile devices, provides for the creative use of rich media, and is a good way to present information in a hierarchical form. Best of all, studies show that conversion rates are higher and bounce rates are lower with pageless sites.
Card Layouts: Pinterest, Google, and Twitter users are familiar with seeing information in individual boxes also known as the card layout or container-style design. This type of design relies heavily on images by guiding the user’s eyes toward important information. Cards are good for telling quick stories and they are also very easy to browse and manipulate. Organizations that rely on shared content will benefit greatly as each box is like its own business card. The relatively small photos and bite-sized chunks of information fit well with a responsive web design, and cards can be stacked vertically and horizontally and can be embedded with photos, videos, and music.
Hero Images: When a stunning visual is the best way to tell a story, then the oversized, or hero image, is an excellent design choice. Based on the theory that images rule when it comes to grabbing attention, single images, images with text, sliders, or animated images will all do the trick. Slow loading times are a thing of the past, and few things can quickly convey the tone of your website like a large photo, graphic, or illustration. Placed front and center on the site, hero images enable a seamless experience across devices, so they are well suited for the mobile web. Additionally, they work well with many web design patterns including long scroll, flat, and material.
From long scroll to small cards, website designers have an array of options that they can choose from to entice users and enhance their experience. By using the basic principles of commercial art and merging them with the strategic goals of an organization, you can easily adapt a style for each client. Designs come and go, but those that endure have foundations grounded in clarity, functionality, and usability.