We’ve seen a lot of companies moving towards a cleaner, simpler experience for website users. Whether you’re a designer, a developer, or you just love websites, you can learn something by taking a look at how they’re doing it. Get ready to be inspired!
Leaving behind the early, gaudy days of the web, which was flush with flashing gifs, animated bars, buttons, icons and dancing hamsters, animation today means creating interactive, responsive actions that enhance storytelling and provide a rich user experience.
Examples of rich animation include loading animations, navigation and menus, hover animations, galleries and slideshows, motion animation, scrolling, and background animations and videos. Check out this site from Beagle, a proposal management platform:
Rich animation can also be seen in micro interaction. For example, on LinkedIn, a user can hover over a card for a subtle popup menu of options, and then choose to skip the story or take other actions.
GIF animations have (joyfully?) resurged, and can be used for many different purposes, including comedy, demonstrations, and even just for decoration.
- Material Design
Material Design, a design language developed by Google, relies on the elements of print-based design—typography, grids, space, scale, color, and use of imagery—along with responsive animations and transitions, padding, and depth effects like lighting and shadows to provide a more realistic, engaging, and interactive user experience.
Material Design uses shadow, movement, and depth to offer a clean, modern aesthetic with a focus on optimizing UX without too many bells and whistles.
Other examples of material design include edge-to-edge imagery, large-scale typography, and intentional white space.
- Flat Design
While Material Design offers one approach to the concept of minimalism, flat design remains the classic choice for lovers of clean lines. That is, flat design is often seen as a more realistic, authentic, and comfortable digital look.
Based on the principles of white space, defined edges, vibrant colors, and 2D—or “flat” —illustrations, flat design offers a versatile style that frequently makes use of techniques like line iconography and long shadows.
- Split Screens
Best used when you have two equally important areas to promote, or you want to offer content alongside photos or media, split screens are a great new way to provide a fun and bold user experience.
By allowing users to choose their content and experience, you can create a portal-type experience that entices visitors to enter.
- Dropping the Chrome
Alluding to the chrome bumpers and embellishments on classic cars, “chrome” refers to a website’s containers—the menus, headers, footers, and borders—that encapsulate the core content.
This can be distracting, and many companies are choosing to break free of the containers and create clean, edge-to-edge layouts with no borders, headers, or footers.
- Forget the Fold
“Above the fold” is newspaper jargon for the top-half of the front page of a newspaper. Since newspapers are often folded and placed in boxes and displays, the most compelling content goes above the fold to give them the best chance of grabbing a potential reader (and their wallet).
Website design has long used the idea of a fold on the principle that scrolling was burdensome. But recently, full-screen images and content greets a user and encourages scrolling to unveil additional, more in-depth content.
- Full-Screen Video
Video can be a great way to grab visitors’ attention, and it’s often even more effective than either visuals or text. Looping videos such as those used by Apple for the Apple Watch are a unique way to set a tone and pull visitors in.
When it comes to web design, a lot of specific components will be dictated by your industry, niche, target market, and content. Your layout will depend on what visitors respond to and what makes the most sense for your message. But with these trends on hand, you’ll have all you need to create a compelling website that does what you need it to do, and that shows that you know how to keep up with the times.