Terrible Web Designs & How To Fix Them

Design serves an important role on the modern internet. The web is an ever-expanding wealth of information. Brilliant and wonderful things can be found every day. Social networks, businesses, games. All at your fingertips.

But not all is as it seems in the digital world. There lies an ugly, dark corner where poor content & design is shoved. My previous article: Terrible Web Designs & Where To Find Them dissected some of the poor designs created by TCRM. Today, I intend on rectifying their biggest flaw.

Their own website.

Why? Well, quite simply because this is their selling point. If you’ve got a ghastly website, then potential clients will often just turn around without even thinking.

And believe me, I want to help this business.

The thing is, we need to set some general rules before helping them. Things that need to be followed closely. A modus operandi.

I’m in no way a professional designer. But let’s just say I know what looks good, and what looks bad.

Creating a Concept

A new design for TCRM created in Photoshop.
A cleaner, and much more vibrant TCRM home page. Roughly an hour spent in Photoshop to create a design mock-up.

Visualising a design before committing is key.

In other words, creating a concept. Something that translates well to the designer. That design doesn’t have to be exact, but it should be something you can use as a functional design. The most basic thing you can do is just layout a template with boxes.

Basic, sure, but these basics are going to save you some time in the long run. Planning where content will appear will potentially stop you from over doing it.

Colour & White Space

There is a theme on TCRM: green & black with varying gradients along with a mash of different text colours.

Unfortunately, readability hasn’t been taken into account with their design. Fixing this is as easy as selecting a default font and working on an easy to view colour palette.

The current palette is a bit skew. But, this is the best I could make of their current choice of colour:

TCRM's colour palette.

As you can see, there’s an obvious re-use of very close shades of green. Then we have the solid black and solid white and an unusual choice – purple.

My solution? Keep it simple.

My improved colour palette with a much more minimalistic approach to the design.

No more lime tints & shades. Contrast is all that is needed here. A simple highlight, followed by it’s counterpart shadow.

I’ve opted in for these colours because I believe they balance each other out. But importantly, green seems to be their theme, so why not improve on it?

The ever so slight off-white is a better choice of a background colour. It gives us better breathing space – to see content more clearly. Black backgrounds can often be hard on the eye, almost as if we’re deciphering some lost code.

Continued: Typefaces & Images…

Typefaces

Reading text shouldn’t have to be boring… in fact, TCRM’s main content is text. Which has led me into a fractious state of confusion: why use such a monotonous font?

Verdana. It’s a typeface that echoes 250-word high school essays. It’s an ugly font. There’s no further criticism that needs to made.

There are a tonne of alternative fonts out there. Helvetica, for one, is an extremely popular choice. In fact, it’s so popular that you would not even realise how regularly the font is used. It’s a nuisance to find out that Helvetica was actually a choice:

body, h1, h2, h3, textarea, div#EUcookiewarning > div#EUcookiewarningColumn1 > input.EUcookiewarningbuttons {
    border-style: solid;
    font-family: Georgia,serif;
    font-family: "Courier New",Courier,monospace;
    font-family: "Times New Roman",Times,serif;
    font-family: Arial,Helvetica,sans-serif;
    font-family: Verdana,Geneva,sans-serif;
}

But with this rather confusing CSS rule, the browser is always choosing the last “font-family”. Whether there was going to be other uses for the other classes, I’m not too sure. But it’s now become wasted space.

Lato

Simple, translates well from screen to eye. I adore this typeface. But it’s not just the simplicity of the font, it varies so well.

Bold, regular and light styles can add that extra depth to headings, sub-headings and then of course, paragraphs.

Minimalistic design in the Lato font.

These are my proposed styles for typical text-based content. Thickness changing through different headings and a regular sized font throughout all paragraphs.

Uppercase characters also make great bold headings. These are going to become great focal points further down the line.

Images & Content

Apart from text’s key use for delivering information, it’s also good practice to realise the importance of imagery.

Images are supposed to be engaging. They can turn an essay into a 2 page spread magazine article. They can sell a product. But more importantly: they take the bore out of reading.

A 'graphic design' page as shown on TCRM
There’s a double whammy of bad placement of images as well as bad use of images.

So, it comes as no surprise that TCRM’s images are… lacking, for a better use of words. I don’t mean that they’re missing, they’re just not engaging. Let’s start with the example above: this is a page to demonstrate graphic design, but they seem to have opted in for clip art. Again, adding to that high school short essay vibe.

The worst part is that the images are embedded in a huge, and quite potentially, useless amount of information.

Instead, I think it would benefit both TCRM and future clients if they were greeted to a cover photo/video followed by a portfolio. Why this? Quite simply, it’s giving users a chance to see their capability as a company as well as proven work.

It is simple enough to find good looking images to fill placeholders. But in TCRM’s case it is vital that their own content is used. These images are going to sell what they do. Otherwise, there would be copyright infringement as well as fraudulent claims made against them.

Continued: Cleaning Up Bad Code…

Cleaning Up Bad Code

In my follow-up article I wrote about how there was outdated and obsolete code. In fact, they are fond of advertising their out-of-date ways in all of their sites. Right in the footer, which I detailed with this “colourful” collage:

The dreaded banners.

XHTML 1.1 was replaced by HTML5, a very widely used specification for modern websites. Not only did this take some of the unnecessary bloat away from creating a HTML document, it also created some extremely useful syntax.

Let’s just take a look at how TCRM builds their website head:

<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="dns-prefetch" href="http://www.google.com" />
<title>Business Web Design Bridgend from TCRM Technology Ltd - </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset= UTF-8" />
<meta http-equiv="reply-to" content="webmaster@tcrm.co.uk" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="description" content="Bridgend Business Web Design - Need a web site developed? Cost effective website services to Bridgend & surrounding areas. Web Design Bridgend, South Wales." />
<meta name="keywords" content="Bridgend, Business, Web, Design, Website, Designer, Local, Experienced, Cardiff, Neath, Swansea, Wales, Cost, Effective" />
<meta name="revisit-after" content="1 days" />
<meta name="abstract" content="TCRM, Web & IT Solutions in Bridgend" />
<meta name="classification" content="Web Design" />
<meta name="copyright" content="© TCRM. All rights reserved" />
<meta name="designedby" content="TCRM, Web & IT Solutions" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="google-site-verification" content="OnsIUxxjhn5SPJvKF8j0ajnzeE63A_3sDmUooJAgW7k" />
<meta name="msvalidate.01" content="D8F09D77FE0C5D1F71919115B31A0813" />
<meta name="y_key" content="b215ad0e87d4441f" />
<meta name="companyname" content="TCRM Technology Ltd" />
<meta name="norton-safeweb-site-verification" content="zwfp2k05glkemfpl-xse7iod9qudqhye92wlmd8rfdvjmy9-knvjdowyydemulan37z3-a3tbh5s0ep53i0sgj17w5fd1mpte29jvby1anj8eus5sdjlm-ixy-6as6tj" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Business Web Design Bridgend from TCRM Technology Ltd - " />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://tcrm.co.uk/facebookimage.png" />
<meta property="og:url" content="https://tcrm.co.uk/" />
<meta property="og:description" content="Bridgend Business Web Design - Need a web site developed? Cost effective website services to Bridgend &amp; surrounding areas. Web Design Bridgend, South Wales." />
<meta property="fb:app_id" content="236998203014251" />
<meta name="robots" content="index, follow" />

...

...

...

	<link rel="stylesheet" type="text/css" media="print" href="/includes-local/design/standard.css" />
	<style type="text/css" media="screen">@import "/includes-local/design/standard.css";</style>
	<style type="text/css" media="screen">@import "/includes-local/designa/topmenu.css";</style>
	<style type="text/css" media="screen">@import "/includes-local/designa/leftsidemenu.css";</style>
	<style type="text/css" media="screen">@import "/includes-local/designa/rightsidemenu.css";</style>
	<link rel="stylesheet" type="text/css" media="print" href="/includes-local/design/chrome.css" />
	<style type="text/css" media="screen">@import "/includes-local/design/chrome.css";</style>

</head>
...
</html>

There is a lot of oddments used here so I’ve taken the liberty of cutting out some of the bulk and replacing it with “…”.

Anyone who is well versed with HTML will understand that this is a nightmare. The head tag is so cluttered. What’s worse is that we’ve got repeating content.

Code For The Modern Era

Modernising this template is needed. With a majority of websites being displayed on mobile pages, it’s imperative we design for all devices.

Many designers opt-in for fully responsive design – whether this means designing their own stylesheet framework or using popular frameworks such as Bootstrap or Foundation.

With this in mind, let’s take a look at cleaning up the mess from TCRM’s head tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="TCRM Web Design | Need a website developed? Cost effective web services in South Wales">
    <title>TCRM Technology | Web Design & Graphics</title>

    <link href=".../css/bootstrap.min.css" rel="stylesheet">
    <link href=".../css/styles.css" rel="stylesheet">

    <link href=".../imgs/favicon.png" rel="shortcut icon" type="image/png"/>

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
  </head>
  <body>

  </body>
</html>

Nothing quite compares to raw simplicity. These are what I would define as key attributes to any head tag. The main thing is to understand how much jargon we’ve just trimmed down on.

For the sake of convenience I’ve highlighted lines 11 & 12. These are just the two stylesheets I intend on using – the minified bootstrap framework as well as an ‘override’ stylesheet to add our own styles.

Also, note the change of the title, this way we’re not limiting ourselves just to businesses or a single location. Company’s name and what they do, it’s not rocket science. Of course, the same applies to their description, too.

What now?

The plan is to use these mock-ups and criticisms to recreate the site. Fully.

Head to toe; the full whack.



Like what you read? Be sure to keep up with us on Facebook and Twitter. We're active and post regularly!

We use cookies to ensure that we give you the best experience on our website. By continuing to use this site, you agree to their use and you also agree to the Terms & Disclaimers.