Top 10 Web design tips

The Beta Trials

 “It is okay to launch a half-baked product. But what is not okay is to keep the product in the oven for too long.”

I recently heard marketing guru, Seth Godin, say that phrase to a web design company in New Jersey, and I think it applies beautifully to website design. I’ve seen many business owners wait to launch a site until they think it’s perfect. I’ve also seen business wait, and wait… and ultimately wait too fricking long to launch their website. Waiting until a site is ‘launch ready’ is one thing. I typically, classify a website as ‘launch ready’ when it has all of it’s core pages flushed out and the site is functional, working and tested across multiple devices. Waiting too long is when current technology and your customers pass you by. It’s essential to look at your website as a continued work in progress. Understand that you will face problems when you launch your website, but how will you know where you have to correct things if you don’t even launch the design? To keep yourself on the safer side, you can create a beta launch. This will help your customers to know that your design is ready and they can even give suggestions to make improvements to the user experience.

Pick Your Colors Carefully

You can’t add any color that looks good on your website and call it a day. Even if your colors are pleasant, they may detract from the message you want to send on your website. Modern web designs use colors to set the mood for their visitors. If you want someone to take action, use a more vibrant color pallet. If you want to convey trust, use a neutral color to set a more professional tone. Many web designs focus on two core colors in their design. If you decide to add more on top of your two colors, try and make them variations of those colors to keep in line with the rest of your site. Your colors will also help you establish a more recognizable brand. You want people to associate your brand with your colors when they live their everyday lives.

Think carefully about element placement and size

Fitts’ Law, a fundamental principle of human-computer interaction (HCI), states that: The time to acquire a target is a function of the distance to and size of the target. In other words: the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This obviously has all kinds of implications for interaction and user interface design techniques, but three of the most important are: Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is especially important with typography, menus, and other link lists, as insufficient space will leave people clicking the wrong links again and again. Make the buttons for the most common actions larger and more prominent. Place navigation (and other common interactive visual elements, like search bars) on the edges or corners of the screen. This last might seem counterintuitive, but it works because it lessens the need for accuracy: a user doesn’t need to worry about overshooting their click target. While you’re thinking about element placing and size, always keep your interaction model in mind. If your site requires horizontal scrolling rather than vertical scrolling, you’ll need to consider where and how to cue users to this unusual interaction type.

Don’t Confuse the User

Once you do launch your website, I’m sure that you’ll feel like a huge weight has been lifted. That being said, you are going to need to keep an eye out for issues. Things like an increase in bounce rate could be the indication of a very big problem. If your site is technically functional then there could be issues with the actual layout that are inhibiting your users. UX encompasses a lot of factors, some that are controllable by you, and some that are environmental or just user preference. These factors include usability, accessibility, performance, design/aesthetics, utility, ergonomics, overall human interaction and marketing. People won’t ever buy from you if they don’t even understand why they should pay attention to you.

Put home on the left, but other than that, don’t worry too much about the order of menu items

If you do have a home link, put it on the left. It’s the most common place for it, so visitors expect to find it there. As far as the rest of the menu items, research shows that the order isn’t all that important. There are two different eye tracking studies that show a low correlation between the order of menu items and success of visitors (source and source). So don’t spend a ton of time worrying about the order of things in your menu.

Keep in mind page loading time

People feel frustrated if they have to wait too long. Page loading time is extremely important: each second counts, as there is a risk that the visitor may abandon the web page. So, make sure that all the pages load quickly or show a custom page loading effects (e.g., animation) to entertain users.

Be careful linking from service pages to blog posts

If the visitor is on a service page, the goal is to convert them into a lead. If you add big opportunities to leave and go read your blog, they’ll land on pages that are less focused on lead generation. Blog posts naturally have more distractions, exits opportunities and lower conversion rates.

Choose your colors strategically.

Now that you’re familiar with the concepts of good composition, let’s talk about the specifics of that composition. We’ll start with color, a powerful tool for any designer. For one thing, every color has a different emotional connotation. If your brand identity is passionate and energetic, an exhilarating red would fit better than a tranquil blue. Aside from choosing the best colors to represent your brand, you also need to use them well, like contrasting colors off each other to establish visual hierarchy.


		
			
				
					To use color effectively in web design you have to understand how colors are formed and how they relate to each other. Harmony and balance are the keys to success.				
			
			
				
			
		



					
		
	

Just look at how Top Level designer Desinly uses orange in the web design for Oil Sands Masterclass above. First, orange is a smart choice because it’s often associated with the heavy operation equipment the company deals with. On top of that, they pair the orange beautifully with a black background to make it stand out more. They also use the same color consistently as a highlight for keywords and buttons, plus they even integrate it into the background photography. Do:

  • Establish a color hierarchy. Use a single color each for your main elements (primary), highlights (secondary) and other less-important elements (background).
  • Stick with consistent themes. Once you have an established color palette, stick with it. Keep your primary, secondary, and background colors consistent throughout your entire site. Don’t:
  • Choose your own personal favorite colors. The effects of colors have a proven effect on marketing. Research color theory and don’t waste a critical branding opportunity.
  • Clash colors. Choosing colors logically isn’t enough; they also need to go well with each other. Purple and red may both represent your brand well, but the effect is lost if they clash and make an ugly final design.

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.

Full height and full width

If we would like to set our app or website adjusted to the viewport, vh and vw units make it much easier. vh means it’s 100% of the viewport height, and vw means the 100% width of the viewport. Let’s check how it works in a real example: In the example above, I set the blue-box element to 50vw and 50vh, which means it should have a 50% of the viewport width and 50% of the viewport height, and if you resize the viewport you may notice how it adjusts. Cool, right?

;