It’s amazing to me how far we have come in web design. When I first started, the web was all text, all black and white (or green and black), and links were the most exciting new trend. And that was only in 1995! Now there are so many ways to view web pages, so many things you can do in a web application, so many features you need to think about it can get overwhelming. But these ten web design trends should help you get your sites going in 2016.
1. Responsive Web Design is here to stay.
These days it’s hard to know what someone is going to be viewing your site on. There are watches with only 272×340 pixels of visible space. And there are 4K UHD monitors with 3840×2160 pixels of visible space. I personally have both a 4K monitor and an Apple Watch that I use every day.
As a web designer, I cannot assume that the devices I use are the ones that my readers use. I also cannot assume that my customers’ devices are not smaller or larger than the ones I design on. So I have to design responsively so that my applications and pages work and look good no matter where they are viewed.
Blatant self-promotion: you can learn RWD from me with my book Sams Teach Yourself Responsive Web Design in 24 Hours.
2. Content should tell a story.
What you put on your web pages is what drives customers to view them, so content will always be critical. But the style of that content is changing.
It used to be enough that a website state just the facts, with pictures and videos to support those facts. But as more and more web pages come out it’s becoming more important to tell a story. You want people engaged in your content. Show that there are people behind the corporate facade.
3. Single-page cards are gaining in popularity.
With the advent of Material Design, more and more websites and web applications are applying the concept of “cards” to their designs. Cards are a way of modularizing the content and design so that the pages can display well on a small screen or a large one.
Most people think of cards in the form of single page blocks on cellphones. But you can create a card based design on a large screen and include many cards on the screen at once.
A good example of this is Pinterest. Pinterest pins are each a little card that includes the picture, a title, and other details about the pin. On a large monitor I might see as many as 20 pins on the screen at once, while on a small screen I just see one or two.
You can also design cards that are intended to be the only thing on the page at any given time. The key to designing cards is to keep them simple, use one nice image, use a simple, clear font, and don’t forget icons.
4. You should learn web typography.
If you’re not familiar with typography, then you should first focus on web fonts. Find a nice, readable web font for your pages and stick to that for the entire site. Don’t stick with tired font families like Arial and Times New Roman. There are many options you can find on both Adobe Typekit and Google Fonts. Don’t be afraid of web fonts.
Once you’ve got a good understanding of web fonts and how to use them, you can move on to more advanced typography. Consider the line height and word spacing of your text. Learn how to use fonts as icons and icon fonts. Don’t forget about things like straight quotes versus curly and hyphenation. If you use WordPress there is a nice plugin that can help you improve the typography of your site—WP-Typography.
5. Imagery is changing to more illustration, less photography.
In 2015 we saw a lot of sites move to beautiful background photos that took up the entire screen. But 2016 will see a bit of push back into more illustrations and sketches. Pictures that look like or are drawings will gain traction.
If you aren’t an artist, this might seem daunting. After all, there are lots of free photography sites to choose from (my favorite is Pixabay), but what about illustrations and drawings? The good news is that most sites, including Pixabay, that have photos also have illustrations.
But you’ll have to be pickier in your choices. It’s very easy to fall into a trap of grabbing images that are mostly clip art and cartoony, and that might be worse than just staying with photos. I would recommend that if you don’t do your own drawings, and can’t afford to pay someone to do them for you that you ignore this trend. You will notice that my site continues to use photos.
6. Sketches might be hard to find, but there are lots of hand-drawn icons.
Icons are a place where you can update your site to use more current trends, and get that hand-drawn or sketched look. Mind you, most of the good sets I’ve found do cost money, but they don’t cost a lot. I found one set that includes a hand drawn font as well as over 800 hand drawn icons for only $29—Hand Drawn Icons.
But beyond images, consider fonts when you’re thinking of icons. There are a lot of icon fonts that you can get for free. The most well known is Font Awesome, but it doesn’t have that hand drawn look. For hand drawn, I found a small set of 36 icons in the Jolly Icons Free Font.
7. Web pages will be more interactive.
Interactivity, especially small cards of interactivity, will be more and more common on web pages in 2016. Contact forms will be self-contained and when customers fill them out, they won’t leave the page, but just that card will change to indicate their interaction.
Interactivity is getting more and more important as the line between mobile and desktop blurs. And as that line blurs the line between what makes a web page an app and what makes an app a web page will blur as well. People expect their mobile devices to help them do things, and that is true of the apps and sites they visit on them too.
8. Videos will gain even more in popularity.
If you don’t have videos on your site right now, 2016 might be the year to consider them. I did my first professional video in 2015 (shameless self-promotion #2: HTML and CSS LiveLessons) and I’m working on a second video course right now. I’m hoping to get an RWD video series out in 2016 as well.
I must admit, I am late to the video bandwagon. I’ve struggled with the idea that videos are useful, as most of the time I am faster at reading through something than watching the video. But then I watched some videos on using Git. Git was something I’d heard of but hadn’t used. My brother felt I was making a huge mistake in not knowing Git, but every book and website I’d picked up had left me cold. I finally watched a video series because I had nothing else available. Now I use Git for nearly every project. It’s already saved my work several times. And I would not have gotten interested in it without the video tutorials to show me how.
So I am a convert. I do believe that videos are going to grow in popularity and usefulness and websites should consider them.
9. Don’t forget animation.
CSS animation is a fun way to get some visual effects and movement on your pages, especially if you don’t have the time to create a full video. And CSS animations don’t have to be big and flashy. In fact, tiny animations are going to be more and more popular. This includes simple animated transitions to move elements on and off your page as well as full animated icons and text. And since you can do this with CSS, that makes it even better.
10. Colors are going to get brighter in 2016.
Monochromatic themes have been popular for a long time, but muted tones and colors are going out in favor of brighter, more vibrant colors. Material design uses a lot of flat colors in a creative way, and 2016 seems to be a year of more interesting colors.
What do you think are the biggest web design trends in 2016?
Do I have it right? Are these web design trends things you’re going to be thinking about this year? Or are you working on something completely different?
Please post your thoughts in the comments below. And if you’ve tried to comment before and gotten the name and address required error message, well, that’s been resolved. Sorry about that!