Top 10 Web design tips

Blend modes

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?

Make pricing easy to find

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.

Create a self-selection experience

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 scrolling

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?

Test and iterate

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.

Shape outside

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!

Set expectations

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.

Anticipate mistakes

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:

  • Prevent mistakes before they happen
  • Provide ways to fix them after they happen You see a lot of mistake-prevention techniques in ecommerce and form design. Buttons remain inactive until you fill out all fields. Forms detect that an email address hasn’t been entered properly. Pop-ups ask you if you really want to abandon your shopping cart (yes, I do, Amazon—no matter how much it may scar the poor thing). Anticipating mistakes is often less frustrating than trying to fix them after the fact. That’s because they occurbefore the satisfying sense of completion that comes with clicking the “Next” or “Submit” button can set in. That said, sometimes you just have to let accidents happen. That’s when detailed error messages really come into their own. When you’re writing error messages, make sure they do two things:
  • Explain the problem. E.g., “You said you were born on Mars, which humans haven’t colonized. Yet.”
  • Explain how to fix it. E.g., “Please enter a birthplace here on Earth.” Note that you can take a page from that same book for non-error situations. For instance, if I delete something, but it’s possible to restore it, let me know that with a line of copy like “You can always restore deleted items by going to your Trash and clicking Restore.” The principle of anticipating user error is called the poka-yoke principle. Poka-yoke is a Japanese term that translates to “mistake-proofing.”

Clear out the clutter.

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:

  • Trim the fat. Audit your designs for the essentials. If an element doesn’t add to or improve the overall experience, remove it. If an element can live on another screen, move it there.
  • Limit pull-out menus. Pull-out menus (drop-downs, fold-outs, etc.) are a good way to reduce clutter, but don’t just sweep your problems “under the rug.” If possible, try to limit these hidden menus to seven items. Don’t:
  • Use sidebars. New visitors probably won’t use them. Plus, if all the options don’t fit in your main navigation menu, you need to simplify your navigation structure anyway (see below).
  • Use sliders. The motion and new images in a slider are distracting and they weaken your control over what your users see. It’s better to showcase only your best images, all of the time.

Use ample white space.

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:

  • Surround your most important elements with negative space. The more negative space around something, the more attention it receives.
  • Avoid boring layouts with secondary visuals. Other aesthetic elements like color or typography (see below) can pick up the slack visually when there’s a lot of negative space. Don’t:
  • Emphasize the wrong element. Surround only top-priority elements with negative space. For example, if your goal is conversions, surround your email or sales CTA with negative space—not your logo or sales pitch.
  • Use busy backgrounds. By definition, backgrounds are supposed to go largely unnoticed. If your background doesn’t have enough negative space, it will steal attention from your main elements.
;