Web Design: A Quality Perspective

Working as web QA-slash-designer for four years and counting, I think I have already encountered thousands of websites serving wide array of businesses and commerce. Normally, I get interested browsing a site if it is engaging, visually appealing, and authentic. These are the things that you would notice first before diving into content. Most of the times, we deem to base everything on what we merely see. Like, if we see something that is not amusing, obviously, we won’t get amused. If we encounter something that we think is not worth of our time, we tend to move on. If we observe something that is not right, we get anxious. Well, these are not just my beliefs— in fact, most of us would agree.

If you are to make a business online, there are things that you need to consider beforehand. It is not just about putting up every thing in place. Your audiences may get interested to your business but what makes them really “interested” is actually on the way you present it.

In this story, I am going to tell you the things that hinder your design to its full potential and how you turn your audiences to potential customers.


1. Substandard condition of your images

Let us start with images, they are in fact the most interesting element of the website that we see or we tend to look for. High-resolution pictures tend to change the game. It could induce and attract your viewers, then eventually turn them to prospective consumers. On the other hand, there are times that a picture could repel, dismay, and mislead your viewers. And we do not want to reach that point wherein our audiences would remember us solely for one reason, “disappointment”.

Disappointment comes in many forms:

Dysfunctional: blurred/stretched/grainy/pixelated/distorted
Images retrieved from Google Image Search

No matter how delicious your burger or cake is, if you will present it this way, using your low-resolution images — take it from me, I will not buy it. It doesn't look appetising seeing those obscured pixels that hindering the true form and beauty of your burger patties. Remember that our eyes always have the first taste. The less intricate your images are, the less interest they may seem to your viewers. Take note of that.


poor cropping

Yes, sure you guys are such sweet and beautiful creatures. But wait, where’s your head? where’s your neck?

Cropping plays a huge role on the overall look of your images, and will also make an impact on your general web design.

An awkward cropping will make your audiences feel uncomfortable. There are people like me who are anal-retentive, that we tend to get really anxious and sometimes upset when we see something that is not formed correctly. Proper image cropping is something that you have to master in order for your images to look precise and orderly. But careful, there are instances that we are too focused cropping out the things we think are irrelevant to our images that we tend to overlook the sense of completeness. Good cropping creates balance and emphasis to your image and also unity to your overall aesthetics.


images that have untidy and dirty details

The image looks dingy inspite of its high-resolution state. As designers or as clients, you wouldn’t want to use this image to sell your property. Well, the house looks perfectly fine. However, it is the lot that makes the entire image less appealing, as you can spot a lot of weeds and patches on it that buyers would think it will take them additional dimes to fix it. You see the importance of quality of the images are not only based on their mere resolutions. Quality go far beyond that category. This is where your “excellent attention to detail” comes in!

Always make sure that your photos are of good quality, from resolution down to the very details of your subject. It will be an advantage if you consider this point when choosing your images.


Timestamps and watermarks
Images retrieved from Google Image Search

Timestamps and watermarks are both have something to deal with legal protection. By using these, you will able to secure your photos from any kind of intellectual property infringement. You could encounter a lot of these in a photography industry. But these two are no good for design. Why? First, we are no thieves — we ask for consent or buy images that we want to use in our design. Second, having stamps on your images will either make your business outdated or unreliable. Again, it depends on your purpose why would you use your stamps. It could be for tracking purposes, like for example a fitness blog that you need timestamp to show your audiences your results in span of time. That’s okay. However, what if we used it on the site that time is not really impactful and that could only actually mislead your audience? My advise would be- if you are a designer, and your client provided you images with timestamps, you may want to confirm if they are relevant. But if you think that they are not really necessary, then please have it removed.

These stamps would only make your website questionable.


The light condition(brightness/contrast)

This one could be another lapse on your design — only if you are not aware. Your light treatment on your photos can benefit your whole design, but it could also be detrimental to your overall aesthetics. We used to balance the contrast of the images to make it look more visible and detailed. But we discounted the fact that it could suffer the resolution of the images when you adjust it from their original state, especially if too much treatment was made. It is very vital for your images to be clearly visible. Too much of light treatment is never going to be enough. I suggest you put ample amount of adjustment, and when you adjust one image out of 12 from their previous state, make sure to adjust the rest. A bad lighting makes an image substandard, and this could result to a substandard design.

2. Your bad colour scheme

Once a visitor has come to your site, you have around 8 to 10 seconds to visually appeal to the user and turn them into customers. Since color affects our feeling, perceptions, and interactions, you can use colors to make a user feel welcome, comfortable, relaxed, and secure.

On the other had — you can make a user feel like they have stumbled upon an unprofessional and dated website which may lead them to click the back button, and find something else.

Have you experienced to come along with a website that lacks beautiful contrast or too eye-striking that you had to shut it off? Just like the poor samples below:

I had to do some quick mock-ups for you to figure out what I am trying to say when I mentioned “lack of contrast”.

Disregard the other elements and focus on those colour combinations, the first example looks striking — the first two blocks(header and navigation) are clashing with two bright shades of red that creates jarring effect. If I came across this with my screen on full-brightness, I would have shut it off immediately.

In just a glance, your business has been eliminated down from the cloud.

The second one, the colours did not complement each other. The distribution did not work out well. Also, while this is a real estate website, the colours look whimsical that makes the whole service less enganging and professional. It is very important to situate your colour scheme to address the service you are designing.

Bad colour choices make bad investments.

It is relevant to play and blend the colours! Not because you were given a choice of red, it doesn’t mean you have to do default red. As designers, we have to activate our creativity and it is also our responsibility to find something that will make our designs look appropriate, and at the same time attractive. We have our discretions unless it’s specified, right? And you have to take that opportunity to make the most out of it. So keep trying until you find those perfect hexes.

When choosing colors it’s important to take into account the type of industry and target market. For instance a shopping site calls for much more intense and vivid colors than say a religious site. Your color palette, perhaps more than any other element, will invoke the most immediate emotional response in your website’s viewers

Here are some creative suggestions when choosing a shade of colour if you are designing for a specific business:

Bright Colours — These shades are obviously fun and energising.

Best for: Kid’s Clothing Botique, Kid’s Birthday Party, Childcare, and other services that you think needs to look playful.


Pastel Colours — Soft and chic shades.

Best for: Dessert Shop, Bakery, Gift Shop, Home Accessories, Baby Shops, Bridal, and other services that needs a soft, feminine and clean tone.


Dark Colours — These shades are less sophisticated and need light contrast in able to look more effective.

Best for: Legal, Corporate, Technology, and other businesses that involve serious feel.


Light Colours — Sophisticated yet professional.

Best for: Medical Industry(Not Red), Schools, Insurance, Tech Company, Food Industry, Construction, and other services that needs a trendy yet professional feel.


Trivia: Do you know that not all colours have colour? Well, scientifically, YES! But in design, that is pertaining to white and black.

I want to share the importance of the colorless: White and Black. These colors play a major role in giving a perfect contrast to your design. They provide balance to your general aesthetic, whether you’re using any colour combinations. Sometimes, the absence of colours gives other elements an emphasis to stand out. So, I strongly recommend you to add these colours to your scheme, especially if you want to make your audiences focus on your images and other media. You can use these colours to amplify objects.

Black and White — Neutral colors — used to create balance and emphasis.

Best for: Photography, Artist, and Artworks.

In web design, we have a colour system in able for you to come up with more effective and aesthetic design. For you to distribute the colours well, it is highly suggested to divide your colours into segments: Primary, Secondary, and Accent — 50%, 30%, and 20%, respectively. If there are two provided colours, make use of black and white, never do 50–50, one should always stand as your primary and everything else should be your secondary and accent.

Primary should be the dominant, of course. It is important to ensure that your primary colour is not too eye-striking because that comprises a huge percentage of your visual, and your audiences may not want to navigate on it longer.

Your secondary color should support your primary by giving it enough contrast. It is also important to know if your primary and secondary blends well or complement each other. You can use the colour wheel to help you decide with it. But decisions, most of the times, will fall under your creativity and inspirations.

The accent should be sufficient to add touch to your design. Senior designers dictate that in order to come up with a design-wise design, they used the most jolting colour on the colour scheme as accents. It’s suggested to use accents on the smallest details or elements of your design.

There’s a lot more to discuss in this category but I just want to point out how colours make a massive impact in design industry. And how can this affect the quality of your design.


3. Poor font choices

Have you seen websites or print ads that body content were written using decorative or cursive fonts? Or used more than 3 different font styles?

Disaster, isn’t?

Designers, keep in mind that readability should be the top priority when it comes to choosing a font style. You can’t treat the body content with cursive nor decorative fonts! Believe me, no one would want to decrypt your text. Also, it is recommended to use maximum of two font styles only. The more font styles and treatments you incorporate, the more repelling it could be for your viewers.

A good font style is very relevant to design for many reasons, here are some of the main ones:

  • It helps solidify a professional brand
  • It can evoke a particular emotion
  • It fits a certain style
  • It commands attention

Choosing the right font can be hard, but when you find the perfect one it can take your design from ‘good’ to ‘great’.

Let us discuss some fundamentals of typography that you need to bear in mind when designing your website.


Contrast/Legibility

Let’s talk about contrast. There are many examples of bad contrast, but the most standard and well-known issue is using a light color on a light background.

While you all are probably thinking, “I would never do something like that….” I think we don’t realize how often contrast is overlooked when we design websites. Let’s look at some examples of contrast issues we see all the time.

As I said earlier, readability should be the main purpose of your font styling — else, no matter how appealing or beautiful your font choice is, if it is not legible, then it won’t make sense.


Kerning

Next I would like to talk about the importance of:

Uh, I mean….

I know it’s easy to look at a company name you are working on and saying, “This is good enough!”. But is it really?

Look how much better everything looks with a little effort in kerning:

Mind the gap in between letters. Sometimes we tend to overlook the smallest details that could potentially make substantial improvements.


Hierarchy

Hierarchy is very important, but often overlooked. It is the arrangement of your content according to relative importance or comprehensiveness. A good hierarchy can result to a good layout!


Typestyles — Roman, Italics, Oblique, Regular, Light, Bold, Condensed, etc.

Typestyles are important to understand and allow you to change up the look of your selected typeface, while still staying consistent. This is an easy way to establish hierarchy, and accent important words! But, overdoing it could be a hassle for your audiences. Keep your choices tight up to two or three.


4. Lastly, your imbalanced layout

Your layout design works as the skeletal of your website, that’s why it is strongly recommended for us designers to make mock-ups, pre-designs or templates before we finally start working on the content. It is for us to picture and analyze the given assets and how would we want to incorporate them on our designs.

In this last segment, I will talk through some points that help or hinder the proportion of your layout.

Symmetry

Defined as the quality of being uniform on both sides of an axis. It makes your elements harmonious. However, overdoing this could make your design boring. This is where Asymmetry comes in, or the lack of symmetry. Asymmetry can be used as a design technique to generate point of interest and break monotony. Therefore, symmetry is best to use on the passive visuals: copy content, background, texture, and pattern. While assymetry work best on interactive and dynamic designs such as key visual designs, call-to-action graphics, and all that needs to be more engaging.

Whitespace

The use of whitespace — or the lack thereof — can contribute huge percentage on your layout scheme, albeit, too much or too less of it may results to lack of proportion. Utilise the padding and margin of your elements and make a justifiable balance.

Text-image pairing

This design strategy allows the viewers to lock their attention on the content by giving their sense of sight the contrast it needs to avoid weariness. Especially for content-heavy websites that requires a lot of reading , pairing with related images or graphics is important as they could serve as the icebreaker.

Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. The layout should help the content to highlight the things that matter on that particular website you are creating.


Summary

To sum up, these are the fundamental parts of your design and the importance of each element is tantamount to another. Science dictates that the probability of your audiences to engage increases when you have good visuals. Design has truly changed the world of business — maybe you’re in today, tomorrow you’re out. Just keep in mind that your presentation is the first thing that matters — and thus, must given extreme precautions.