Insights

How to Design Clean, User-Friendly, and Effective Business Websites

  • by Philippe Bodart
  • 2 months ago

Websites that look well put-together, won’t confuse visitors, and will attract them to purchase are a must these days. This should be one of the main competencies that you should focus on when establishing your business’ online presence. Especially if you think about the fact that most of your competitors also have websites. You need yours to stand out by being highly functional and clean.

Stop Designing a Website the Old Way

image

Matthew Strom, a designer of the WSJ, describes pretty well how old-way designing works. And I quote, “As my initial ideas took shape in Sketch, I was using a mouse pointer to draw rectangles full of text and images. Pixel perfection was easy and rewarding, and I had the luxury of millions of tiny adjustments.”

“I fussed over whether 10 pixels is too much space for a gutter, or if 14-point type is too small for a byline. I did designer stuff. I filled the whole page with these small, rectangular pieces. Everything was aligned to a grid. I was subconsciously selecting photography and headlines that suited my very space-conscious tendencies and ignoring the content that upset the balance”

This is the status quo of product design several years ago. Design was all important, but we have to remember that it is also subjective. As a result, there were a wide variety of website designs as there were designers. There weren’t any of the best practices and unifying factors that we see today - clean, streamlined, and audience-focused pages.

Not only that but the old way was prone to abuse. Many designers cut corners or didn’t think about the site’s users at all as long as they were getting paid. Out of that was born the demand for easier ways of designing that primary takes into consideration a website’s friendliness.

Don’t Always Resort to Designing a Website the Easy Way

Take one of the Free or not-so Free Design Templates that you can find on the Internet. Let a designer or developer tweak it a bit to your needs, and you are done. There is a huge drawback to this, though.

We’re not even talking about the fact that you will need to rely on your developer or yourselves to pick out a future-proof design template that works with all kinds of devices, small and big. The biggest drawback to this approach is that a Template does not take into account your current and future content needs.

You are building content around a design or Template, and it should be the other way around. Your design should be built around the content. It should also have the flexibility to change when your content needs are changing, i.e. you want to add a section to your website, you want to add a Feature section, etc.

Aside from that, you need to think about the future of search engines and browsers as well. The top ones at the moment, Google and Chrome, constantly moves towards prioritizing the users. Since templates can get out of date, that can be a headache. A user-friendly template today may not be anymore in a few months or years.

A template could load slower due to browser changes for example. That can impact its search engine rankings because it has become unfriendly to your visitors. All of these you have to take into consideration. There is a real need for planning your website design and taking the easy way out more often leads to problems in the long run.

Design in Code and Break the Grid

image

When you design a mockup for a website, you should know exactly how to code it. Ultimately a design, how beautiful the look and feel, needs to be working in code, and needs to be easily readable on all devices, small or large.

Page load time, the flexibility of device-widths, and support for all browsers need to be taken into consideration from the get go. So every designer needs to be a coder, not every coder needs to be a designer. And every designer should be able to code in the most advanced software languages available to the developers' community, i.e React (Facebook open source Javascript software language).

You need to have an eye for design, and love the technical challenge of coding as well. Not an easy fit, but this combination of skills guarantees that your sites will work, will be readable, maintainable and have the performance and interaction needed for a hi-tech website.

All that is well and good but what if you, the site owner, is not a web designer and coder? For sure you have your business to run and you would rather focus on that. An answer to this dilemma is to hire a professional web designer and coder or a team who can work well together. The key, however, is to make sure that you work with the right professionals.

Take Advantage of Design Systems the Smart Way

Design systems are surely a trend, and design consistency across the web is another foreseeable trend. Not that every website will look alike, quite the opposite. Design systems, design consistency, and design in code will ensure that each website will be more consistent with itself and with user expectations in terms of functionality and usability.

Design systems create a Lego-like process where everything (code) is reusable. If you update a component in the design system (and in the code) the changes populate across all similar components, without the need to copy and paste blocks of programming language. And since the components are code, it becomes quite easy to share and collaborate on it with remote colleagues.

How We Design at WebriQ Goes Mad

All our designers are coders, and they pretty much have code in mind when they design. Based on your specific requirements that are derived from your briefing document, websites that you like and dislike, your current website and your corporate branding - our designers/coders will make a mockup of the design of your future website. How this process works in detail, can be read in other Insights posts.

As a company, we have designed over 500 custom websites in the course of the last years, and yes we have done it many times the old way. With the rise of powerful design systems and well-documented style guides, we are managing to put the design in code, again from the get go. This leads to far better user experiences and websites that have better functionality and are easier to update and maintain.

We are also future-oriented. We think of the the browsers, the type of devices online visitors are likely to be using, the sources of traffic, and more when designing business websites. We ensure that we produce webpages that not only capture attention but retain that attention and help you convert your visitors into customers.