in Design

Our Picks of the Top Design Trends of 2014

Well, 2014 is nearing its end as you can tell by all the wonderful weather we’ve been having of late (if you consider freezing your boots off on you cigarette break and washing your hair every other day because of the humidity wonderful, I mean), so we’ve figured it was about time we round up some of the most influential web design trends we’ve seen emerge and create a name for themselves this year. We’ve even covered most of them with tops of the best websites that make use of them, therefore getting them together in one place seemed like a good decision (at the time).

Without further ado (because there was enough hair pulling, biting and all around uncollegial behavior around the editorial room while we were…sharing opinions on the subject), here are our top picks in no particular order.

1. Math in Web Design

Remember when you sat in your mathematics class during your time as a computer science undergrad and thought, “I want to create websites, why do I need to remember all this math stuff?”? Well, someone finally found a use for them. Developers have gotten very creative with mathematical concepts that can be integrated into web design. Amongst the trends of 2014 that use mathematical resources we can rattle off CSS Shapes; 3D CSS and Gaussian blur.

Using CSS Shapes involves basic mathematics to begin with, but developers have gotten quite creative with the shapes they’ve created and have ended up with CSS shapes for the Infinity symbol, Pac-Man or even Talk Bubbles (see more examples at http://css-tricks.com/examples/ShapesOfCSS/). This feature is supported starting with Chrome 37 and it allows designers to wrap content around custom paths (like the aforementioned symbols, or even more traditional shapes like circles or trapezes) and let the long-lived constraint of the rectangle be forgotten.

1

3D CSS is a bit trickier, you’d need to delve a little deeper into your mathematical knowledge to get a firmer grasp on it and put it to good use by using CSS’s Transform functions. As all hard earned things, the prize is definitely something to behold, by integrating 3D objects into your website, you’re sure to benefit from the ‘wow’ effect. Check out http://desandro.github.io/3dtransforms/ and http://tridiv.com/ for more information on how to get started.

2

 

Which brings us to the Gaussian blur, also known as Gaussian smoothing, it is the result of blurring an image using a Gaussian function or, to put it mathematically, to convolving an image with a Gaussian function. The overall effect for your website is that you can blur your background images or even your foreground images on mouse over, for example, and attract visitors attention with the change. See http://css-plus.com/2012/03/gaussian-blur/ for more details.

3

2. Responsive design

4

Here’s where we hit a bit of a sore spot. Most of us argued that responsive design shouldn’t be fitted into a category of trends, but rather in a category of minimum requirements to not have everyone believe you’ve just crawled out of your web designer cave. Nevertheless, responsive design must be mentioned, the amendment that it should be mandatory has been made, now follows the illustration of the point. Well, it’s enough to look at the number of smartphone users that has been stubbornly rising in 2014 and at the Internet options that service providers are falling over themselves to offer. It’s abundantly clear that mobile visitors cannot be overlooked anymore and design and development teams Internet-wide have caught on. Responsive themes, responsive email templates, responsive editors and more are popping up like there’s not tomorrow.

3. Websites with video backgrounds

5

PayPal, Spotify, the new MySpace, Nike, Yves Rocher and Jack Daniel’s all have one thing in common, they use full video backgrounds and they do it well. As a visitor, your interest is suddenly piqued and your attention is immediately captured. Also, including video backgrounds for the visitors to see as soon as they browse to your page is a step in a right direction seeing as another budding trend of 2014 is to swap explanatory video for lengthy text (except for articles like this, of course).

4. Parallax Scrolling

6

“Weeeeee” is usually the sound that comes from the general area of my desk whenever I browse through any website that makes use of parallax scrolling. This technique is both engaging and useful by helping developers and designers create a story for their visitors. Parallax scrolling is an age-old technique that was first used in cartoons and video games, making the objects in the background move slower than those in the foreground to give the impression of movement. Now, it has successfully translated into web design and produced stunning effects.

5. CSS Animations

7

From where I’m standing, CSS Animations are one of the coolest trends to hit web design since…uhm…graphic design hit web design. CSS Animations are simple to use, without any JavaScript knowledge required beforehand, they run well, which means they’re mobile friendly as well as impressive to look at, you give the browser control of the optimization of the performance, which is a good thing because it will know when to stop running animations in tabs that aren’t currently in view an so on. And, did I mention, they’re freaking awesome? Check out more information at Using CSS animations.

6. Flat Design

8

Flat design isn’t actually new, it’s been a trend in 2013 as well, but it’s still keeping strong in 2014, with the likes of Apple’s OS X Yosemite making use of it. Flat design eliminates all illusions of three-dimensions and makes use of simple elements and typography. Due to the fact that minimal design elements are involved, websites that make use of flat design usually load faster, react better to resizing and still look good on high-definitions screens.

7. Simple colour schemes

9

This particular trend is very much in keeping with Flat design because it too focuses on giving more by doing less. Choosing simple, calm colour schemes for your website enables you to give your visitors the feeling that they’re receiving only vital information. By not crowding too much in your page, both visually and content-wise, you are sure to create a better user-experience.

8. Grid layout design

10

Grid layout design is attractive to visitors because it creates engaging visuals that help convey the message more easily than simple text. All websites that make use of this trend benefit from giving their visitors a memorable experience and getting their point across easily.

9. Infinite Scrolling Websites

11

Adding infinite scrolling to your website can make it instantly addictive as long as you keep your content fresh and in constant supply. The aim is to engage your users and not bore them, which is basically what all websites want, but using infinite scrolling gives you and edge, because most of the time, your visitors will feel the need to keep scrolling either way. Therefore, as long as you keep them well supplied with information that they’re interested it, you shouldn’t run into any snags, that’s why it’s no surprise more and more websites are turning to this trend.

10. Manipulated Imagery

12

Adding pictures to your website is by no means something new, making these pictures stand out and be memorable, however, requires a whole different skillset. Starting with colour overlays, blurred images all the way to filters, adding a personal touch to the images that you use is important and should not be taken lightly. It can make a word of a difference.

Tell us what you think. Do you agree with our picks? Would you add something else to the mix? Leave your comment below.

Anamaria

I read, I write, I sleep.

Leave a Reply