We can do lots of cool stuff in CSS right now, and one of them is a blend mode. There are two properties for blend modes: mix-blend-mode, which defines blending between element and element behind it, and background-blend-mode, which defines blending between the background image and background color of the element. Let’s take a look at how it works: In the code above, we set image and header with text. The text is an element that is blended with the image. We used overlay value, but there are 15 other values that can be used. Now, let’s check the background-blend-mode code example: In this case, we can see how the background image got blended with the color. The first image is before blending, and the second one is after blending. Isn’t it amazing what we can do with CSS?
Tell me if this situation sounds familiar to you. You’re currently looking for a new SaaS product online to solve an issue you’re having. For this story, let's say a project management tool. You’ve spent the past hour vetting a couple of pieces of software, and think you’ve finally found one that looks promising. With that in mind, you now try to find pricing. So you click on the pricing page only to arrive at a page that looks something like this: At this point, you’re likely a little frustrated. You might even be wondering if this means it's too expensive. What are they trying to hide anyway? Why bother calling and asking? So now you decide to leave the site and look at the competitors. If your site follows a similar pattern, or worse, lacks a pricing page at all, you’re going to find your users following this same mindset. I can’t stress enough how important including pricing is on your website. Including it “enables visitors to complete their research (as any modern buyer wants) and ultimately, qualify or disqualify themselves, preventing your sales team from wasting time on someone who isn't a good match.” You may worry that competitors will just try to undercut you, or that your pricing is too complicated to show on your website, but in reality, you should worry more about properly educating your prospects on why your pricing is the way it is and the value you offer. If someone’s simply looking for the cheapest price possible, regardless, they are likely not a good fit for you anyway. With this in mind, let's look at a website that does make pricing stand out on their website. Trello makes it extremely easy for users to figure out what pricing tier they best fit in to and what it will cost the user. The pricing table has the features included below each tier, so comparing each is as simple as reading left to right. The green buttons utilized in the last to tiers also help draw the eye to those being more desirable options. To get started on a great pricing strategy, take a look at these sure-fire tips to help guide you.
As someone who finds themselves overwhelmed when it comes to shopping on e-commerce websites, I can’t tell you how happy I am when I find tools that can help select the right things for me. These tools, called self-selection tools, bring users through a series of questions to arrive at a specific type of result. These results could be a customized quote, product, or an answer to a very high level question (ex. ‘What is my personality type?’). Tools like this can make it immensely easier for people to understand what the best products or services are for them without them having to navigate through your website to find the answer. My favorite, seemingly simple tool is Amazon’s product recommendation selector below certain items on the site. Whenever you thumbs up or down on anything shown, the tool instantly changes other products shown in the feed that it believes are closer to what you’re looking for. Needless to say, this made finding the perfect vase a lot easier for me! A less intimidating recommendation tool to checkout is IMPACT client Yale Appliance’s product configurator for the best range oven. This essentially just matches whatever inputs you select and filters through products. Using detailed iconography, users are able to select which options work best for their situation which results in them being served the best product. This saves users countless hours searching the website and the trouble of calling a sales representative. Also, the quicker you get what your prospects to what they are looking for, the quicker they might be to purchase it. While this might be more of a later project, it's a worthwhile tool that will ultimately help differentiate your company from your competitors and offer a unique experience in your business vertical.
Parallax is a very common trend in modern web design. It’s about scrolling background content at a different speed than foreground content when we scroll the page. Let’s see how this magic can be done using CSS: In the example, you can see how our text and background image are moving differently. We used transformZ, to fasten one element and slow another one. Looks good, right?
Your website needs to be a living, evolving piece of your company, not static. There is likely always room for improvement. Improving certain areas of your website can aid in improving conversions, time on page, and pages per session, but knowing what solution might work best in improving your website is the tough part. This is where running A/B tests comes in. Taking two variations of a page and testing them against each other can reveal if certain areas are creating issues for your users. In some cases, your pages may be performing quite well, but contain outdated information. A/B testing the page can show you how much of an effect the page’s content has on session duration or possibly conversions. In other cases, you may want to see if design updates could affect a page’s performance. Simple changes such as button colors, headers, or refining copy could make incredible differences in conversion rate. All that said, other than taking a set-it-and-forget-it approach, especially if you don't know what to change, you can use tools to create A/B tests for them, multivariate tests, or even set up heat maps to see what users are doing. Each test can reveal a variety of data that identifies why users are interacting with pages in particular ways. From here, I would monitor these tests and tools on a weekly, or bi-weekly basis to see how changes you’ve made are affecting your page performance. Checking frequently also allows you to adjust sooner rather than later if things are headed in the wrong direction. I recommend checking out tools such as Lucky Orange or Hotjar for heat mapping, and A/B test tools like VWO, Omniconvert, or A/B Tasty.
There is another great feature that came with CSS, and it’s not very common. It’s shape-outside property. It decides how content will wrap around the floated element. Let’s take a look at how it works: In the code example, you can see that the text overflows the circle. We set the value of shape-outside to circle 50%, but it’s also possible to set an image, triangle, square, etc. Check it out and play with it!
Many interactions with a site or app have consequences: clicking a button can mean spending money, erasing a website, or making a disparaging comment about grandma’s birthday cake. And any time there are consequences, there’s also anxiety. So be sure to let users know what will happen after they click that button before they do it. You can do this through design and/or copy.
To err is human; to forgive, divine. Alexander Pope, "An Essay on Criticism" People make mistakes, but they shouldn’t (always) have to suffer the consequences. There are two ways to help lessen the impact of human error:
First, let’s address one of the most common beginner mistakes in web design: a cluttered screen. Most people have a list of everything they want on their website, and without knowing any better, they just throw it all on screen—and on the same page. Basically, every element you add to your web design waters down all the others. If you include too many distracting elements, your user doesn’t know where to look and you lose a coherent experience. By contrast, if you only include the necessary elements, those elements are more potent since they don’t have to share center stage.
More white space means less clutter and that’s what really matters in a minimalist, clean web design.
See how the home screen in the Intenz example by Top Level designer Slaviana features nothing but the essentials: navigation menu, logo, tagline, main call-to-action (CTA) and some sparse imagery for atmosphere and to show off the product. They feature other information of course, but present it later so their screens are never too crowded. It’s the visual equivalent of pacing. For a web design to be effective, it needs to be streamlined—there must be a clear path or paths for the user to follow. There are many different ways to achieve this (some explained below), but the first step is always to create space for high-priority elements by removing low-priority ones. Do:
How are you going to fill all that space you created after clearing out the clutter? Might we suggest filling it with nothing? Negative space (a.k.a. white space) is the technical term in visual arts for areas in an image that do not attract attention. Typically, these are empty or blank, like a cloudless sky or a monochrome wall. Although boring on its own, when used artistically, negative space can complement and enhance the main subject, improve legibility and make the image easier to “take in.”
My mantra is: simple is always better. It draws attention to what’s important for the user almost instantly. Also, simple is attractive.
In the Streamflow example by Top Level designer Hitron, the tagline and CTA take the main focus, not because they’re flashy or garish, but because of all the negative space around them. This landing screen makes it easier for the user to understand what the company does and where on the site to go next. They include gorgeous imagery of the clouds, too, but in a beautiful, minimalistic way—a clever composition with plenty of strategic negative space. Do: