Remember what the first websites used to look like? Some played music, others caused your mouse pointer to turn into a hamster, and some looked technical enough to take a rocket to the moon. Fast-forward to today. Websites not only look sleek and sexy, but they’re also easy to use. They can also solve our every need. Need to shop? Go to Amazon. Need an answer? Go to Google. Need info on a new hire? Visit their personal website.

Websites have gotten a lot better. Each year, they continue to improve. Research, as well as experience, have helped us understand what persuades people online. The knowledge on what makes a great site has grown by leaps and bounds. In 2016, web developers are building responsive sites, using UI patterns that get results, and following other trends to create beautiful sites that perform well. These new sites don’t look like the sites we had in 2006. That’s why we’re uncovering 6 trends that are changing website design forever. Before you freak out about following these trends, remember that nearly half of small businesses in the U.S. don’t have websites, according to a report by Clutch. These trends are meant to make you think about your site-- whether you’re thinking of a redesign, in the midst of one, or just want some ideas on how to improve.  

1. Need for responsive sites

It used to be that we all used the internet from a desktop computer-- many of us remember the colorful iMacs. Today, web visitors increasingly use their mobile devices to search, browse, read, and buy. According to comScore, more than 75 percent of all American adults who use the Internet view content from both desktop and mobile devices. In 2015, smartphone usage increased by 394 percent, and tablet usage increased by 1,721 percent. To cope with this change, web developers have begun using responsive design to build websites, operating from the perspective that users might use their website on mobile first. Responsive web design responds directly to the user, based on the device they’re using. What they see changes depending on what device they’re using. For example, on a smartphone, they might see a single view which they can scroll through. On their desktop, they might see multiple columns.  

2. The same UI patterns on every site

Websites are everywhere-- they practically populate our dreams. You’d think that with so many, we’d see a lot of differences between sites. Surprisingly, that’s not the case. You’ll find that the same UI patterns are emerging everywhere. Ecommerce sites, for example, often employ many of the same strategies to encourage visitors to make a purchase. Not only do they often show list prices coupled with sale prices, but they also ask visitors to create an account. In this way, they can keep interested parties engaged with the brand. Check out how similar these two product pages are, even though they’re from two brands (West Elm and Harry’s) selling very different products: At first, it seems like a tragedy, but the reason the same UI patterns emerge again and again is because they work. They’re easy for users to read, and they perform well for business purposes. It’s not a coincidence that West Elm and Harry’s use the same color for their “Add to Cart” buttons. Here are some of the UI patterns currently trending on the web:

• Hero images (large, vibrant images that take up a lot of space)
• Card layouts (cards in a grid-like array, much like Pinterest)
• Long scroll (long, scrolling pages full of information)
• Hamburger menus (menus that expand to show more options)
• Breadcrumbs (showing the path from the front page of the website)

3. Attention to the tiny details, or microinteractions

Most interactions on the web are so small that we don’t even think about them. These small engagements, based on a single task, are known as microinteractions. For example, when you check a social media post, turn off an alarm on your phone, or skip a song in your music player, you’re having a microinteraction. According to Dan Staffer, director of interaction design at Smart Design and author of a book on the subject, there’s a four-part structure for successful interactions:

• Trigger: Initiates an action
• Rules: What happens in the interaction
• Feedback: How you know what’s happening
• Loops and Modes: What happens next

The funny thing is that when a brand puts effort into improving microinteractions, we notice. Overall, the experience on the web is much better. Web developers are finding ways to make these microinteractions not only seamless, but also delightful. If you’re looking for insights on how you can improve your user experience using microinteractions, check out these ideas from Web Designer Depot.  

4. All kinds of animation

When people first started creating websites, they often used corny animations (think Clippy from Microsoft Word) for helpful tutorials. Sometimes, these animations were used solely for showing a fun-filled spirit. Animations are making a come back-- and they’ve come a long way from a talking paper clip. For example, Slack uses a fun loading animation to keep users occupied, as well as give them feedback when they’re waiting for the site to load:  

Other sites use animated background videos to add some motion and interest to an otherwise static site. Spotify animates objects while scrolling, which makes the experience fun, delightful, and engaging. Web developers are using these types of animations in today’s hottest web designs:

• Loading animations
• Hover animations
• Animations as a user scrolls
• Motion animation
• Background video animation

5. Flat design

Flat design has been in for a while, but it isn’t going anywhere. If you’re designing a new site, you should get with the times and make sure to use flat design. Flat design helps ensure that your site looks modern and crisp. Flat design prioritizes a classic, digital aesthetic, as web designers understand that a simple approach will make things easy on the user. It uses bold colors, without a lot of shading, and uses digital representations-- such as icons-- rather than photorealistic illustrations. Flat design is minimalist. For example, Stitch Fix uses simple, illustrated icons to help describe its benefits, rather than realistic images. The site uses a gray color, without any shading.

6. Use of modules and components

It used to be that when you created a website, you built pages. These pages had all the information a user would need. Pages still work, but web developers are beginning to look at web design more holistically-- not just focusing on the page. Today’s web developers increasingly use modules and components. A modular web system uses interchangeable parts that can be called in across multiple pages. Modulation works when you standardize certain components. You can think of components as building blocks, which can be brought in when you need them. For example, with modular design, you could populate some of the same information across multiple pages. Brad Frost, a leading UX designer, posits that interfaces can be thought of much like chemistry. All matter is composed of atoms, which then form molecules, which then form everything else. Design can be thought of in the same way. Frost believes that a web experience can be broken down into smaller building blocks (atoms, molecules, organisms, templates, and pages) to create a better overall experience for the user.  

How web design trends should impact you

Some web design trends are just that-- they’re trends. In a few years, some other design ideas might come in and upend what web designers believe today. However, the 5 trends we’ve outlined here are likely to stick around for a long time. As someone who runs a business website, you should be aware of what the trends are, as well as why people are using them. If you want your site to perform well, you want to be on top of it. Some trends, such as animation, are “nice to have.” They can help keep visitors engaged, and contribute to the look and feel of a modern site. Other trends, however, deserve your utmost attention. With so many people accessing the web via mobile devices, you need to ensure that your site is responsive. You can think of your website as a signal. What message will it give to users when they visit? Is it modern-looking, using flat design? Does it perform well on mobile? All of these factors will contribute to how people see your brand.