Website design tips - The process

wireframe-planning

Websites are a large part of any business and thus require a design suited to meet the needs of the business and their users. Sounds simple enough in theory but the design aspect can be difficult, especially if you are inexperienced.

Every website that we build follows a step-by-step process that provides us with the initial resources to produce the right outcome at each step which then leads to the final design. Each project has a unique outcome, but they all followed similar steps.

To make it easier for you we have compiled the following tips to ensure your website can match the needs of your business:

1. Research
2. Structure and site map
3. Layout
4. Content
5. Imagery and Brand
6. Usability
7. Responsiveness
8. Inspiration

1. Research

The first thing you want to do is highlight what you want your website to accomplish, e.g. is it to informative (passive) - details your product and services or interactive (active) - has call to actions like an ecommerce to sell your computer product?

Next, is to identify your target audience. Try to understand their demographic and ensure your website caters to it.

If your demographic was 16-23 year olds for example, you would need to ensure your website is responsive on mobiles as this demographic frequently use mobile devices to browse. However, considering that we are now in the mobile-first era, even without this demographic it is highly recommended to ensure every website you build is mobile responsive.

Your design must appeal to your demographic, if insufficient research is carried out your business could suffer by incurring increased bounce rates, decreased clicks and lower rankings on search engines, to name a few.

2. Structure and site map

Content is king, is a common saying and good web sites are build on it, so having a good information architecture is vital to how your site performs and feeds to search engines.

Look at the content you want to display, organise them into a logical categories and create a site map; a general menu structure with options. Below is an example of simple site structure that has been mapped and is flexible to growth.

site structure

  • Your site map needs to be clear and user friendly, do not frustrate the users due to difficult navigation.
  • Consider how big you want your website and menu to be and how much content you have for your audience.
  • You can have multiple layered navigation and show only the most common menu upfront.
  • Think of growth and how it will expand as it happens.

Your site map may be vastly bigger than this, but that shouldn't be an issue as long as the arrangement of items is straight forward.

3. Layout

Once you have decided the plan for your site map create a wireframe for your website. Concentrate on the layout of the website, do not start considering images or colours to use at this stage. Only focus on laying out your main content - key information in key location!

Think about where you want your logo, search bar, banners and other elements to sit on your pages and whether you want a main image and videos on the home page as well, organise the components into a neat layout. Our Development Manager, Vishal Govinden created this simple example with the content key elements layed out in a logical manor based on initial research.

 CTUK sample Wireframe vgo

He has a keen eye for design which won him a Design Competition in 2006, so rest assured you can trust his advice.

Ensure to have a good balance of space for text and image space to make it easy for the reader to digest.

4. Content

Many may not consider this to be essential to their design but 59% of global consumers prefer beautifully designed content. If the content is seen to be too long 41% of consumers stop reading altogether.

Content is very essential to your design and website, keep it concise and informative. Make your message clear and easy to distinguish, let it add value to your consumers’ lives. Read more on how to make your content stand out.

5. Imagery and Brand

After everything else has been completed start to think about imagery and colour for your website. You can either take images yourself if you want a cheaper alternative, otherwise get a professional. If you do decide to take them yourself, get a good camera to ensure they are of high quality. Low quality and awkwardly angled pictures do not draw consumers in.

If you decide to use a professional, have them take multiple photos which at a later date could be used to keep the website updated.

“If a brand has been done properly it will have and represent the essence of the business” Vishal Govinden, Development Manager, Consider This UK.

Branding is a visual representation of your business, so make sure you have clean and accurate brand continuity carried across your site to maintain consistency and reinforce the professional side of your company.

When looking at colour and images think about the culture of the audience you are trying to appeal to.

6. Usability

Consistency is key, list all the elements such as buttons and hover states that you plan to use. If you have clickable elements in rounded rectangles then all buttons should be the same shape.

Avoid using this shape or visual cue for any other than a button, a subtle indicator such as this will subconsciously train the user.

Take time to consider your menu type; hamburger menus have become the trend, however in relation to usability they are not as intuitive as a simple header navigation. The less complex the journey for your users the better the experience you create.

7. Responsiveness

Ensure that your website can be used across multiple devices as many users are on mobile devices such as phones, tablets and iPads, as well as PCs or laptops.

Remember, a website can look professional while also being unresponsive, thus making it difficult for users, frustrating and eventually losing them.

To ensure your website does not have any weaknesses, use a software that shows how the website is displayed on different devices. Then adjust as required which will help prevent your visitors leaving your site before you want them to.

Of the companies who designed their website specifically for mobiles, 62% had an increase in their sales. Therefore, if you spend time on the design for alternative devices your efforts could be rewarded, if done correctly.

8. Inspiration

If you struggle with inspiration take some more advice from Vishal, who says:

“Inspiration comes from everything around us, we implement everyday life into sites and enhance interactivity”.

You can also take inspiration from other websites in and out of your industry or from templates. Dribbble, Behance and Awwwards contain the designs of hundreds of website, so have a browse and be inspired.

Vishal says, “The process as a whole is about listening and understanding the need, then delivering the solutions that captures the essence of the business and the comfort of the user.”

If you need help with the design and/or creation of your web page or brand, please get in touch. We have completed hundreds of projects and have the right people to create a successful website and/or brand for your business regardless of the industry.

Pin it