Web design tips

Take Advantage of Hick’s Law

Hick’s Law states that the more choices an individual has, the longer they will take to make a decision. There’s actually a fascinating study on this phenomenon in which people in a supermarket were given more or less varieties of jam to try. In the end, those who had more choices were much less likely to end up buying some jam than the ones that had less variety to choose from. How’s that important for your website? Because you might be able to boost your conversions simply by limiting the choice you give to users. Here are a few examples of what that might look like:

  • Reduce the number of menu items
  • Limit form fields
  • Focus on one call to action
  • Only display social buttons for networks you are active on
  • Stick to one goal per page There are plenty of other ways you can reduce overwhelm on your site and move users towards the choices you really want them to make. There’s actually an ebook on that.

Leverage the Fold

Whether or not there is still such a thing as the fold is part of a heated debate. Some say that because of the multitude of screen sizes these days, the fold doesn’t matter anymore. Others have a different opinion. However, the fact is that even in 2018, people spend 57 percent of their time above the fold with a sharp decline afterwards. 74 percent of their time is dedicated on the first two screenfuls. So, it seems like the fold still matters. For your website that means you need to prioritize your content and use the available space to hook users in so they continue. Here are some tips on how to do that:

  • Use a clear and descriptive headline — Explain what your site can do for visitors, highlight the benefits. Be brief and use power words. For more advice, look into our copywriting tips.
  • Include your main call to action — To improve your chances for converting, the fold is the time to start the user journey. Make sure your CTA is clear and visible.
  • Include media — Images, videos or audio help emphasize your point. We will talk more about visual content further below. Find more awesome examples of the practices above in this article.

Make Site Speed an Absolute Priority

It’s probably one of the least debated facts in the web design sphere that speed is important. Research has shown that it influences everything from bounce rate over user satisfaction to conversions and revenue. If your site is slow, visitors will not stick around. Period. Plus, because users care, search engines also do and factor your page loading speed into their rankings. For that reason, it’s paramount that you invest in making your site as fast as possible. How? The articles below will put you on the right track:

  • 10 Reasons Website Performance Matters To Your Business
  • 14 Ways To Speed Up WordPress And Decrease Page Load Time
  • 13 Performance-Boosting Site Speed Tips for WordPress
  • 10 Easy Ways to Speed Up Your WordPress Website [Case Study]

How to use CSS variables

You do not need sass or less to specify variables anymore! You can use this powerful feature in pure CSS now, specify, for example, color, and use it in many places without copying its hex code. Let’s take a look at the example, and you will learn how.

Frosted glass CSS

Frosted glass is one of the most trendy things in CSS & website UI world last time, but how can you build it? It’s easy, and now I’ll show you how! Let’s take a look at the example, and build frosted glass with us.

CSS only carousel

Do you remember times when building carousel needed skills like jQuery or javascript and much work? I do, but did you know, now you can build a carousel with CSS only? It’s possible, and now, I will show you how to do that easily.

Zoom on hover

When you create an image gallery, you want to mark somehow the hovered image very often. The great idea is to add zoom on hover to accentuate the hovered photo. Let’s take a look at how it works: In the example above, I’ve created a small images gallery and add scale property on hover to make the hovered image bigger than the others. Easy right?

Mask

If you ever did graphic design, you probably know how helpful are masks. It’s also possible to use image masks in CSS. Let’s try to make a mask for an image: In the example above, I’ve created a circle gradient mask, but you can also use an SVG graphic as a mask, by adding the URL to the file.

Element rotation

Another type of animation which can be done in CSS is rotation, it’s a little bit more dynamic, and it’s great to add some life to loader element, logo or image in the gallery. Let’s check what we can do with rotation: In the example, we can see a cat rotating four times during one cycle of the animation.

CSS animations

Animations can grab a user’s attention on the website, and this is why it’s used in web design so often. Creating it in CSS makes things much easier, let’s take a closer look at an example animation in CSS: In the code above, I’ve created a small dot that changes the position and opacity every 25% until it will get 100% and then starts once again. It’s also possible to change colors and other properties of the elements.

;