Skip to content
By Carl Neumann

Three Key Factors for Good Web & App Design

Every business owner wants to grow their customer database and convert more sales. Most businesses these days have a website, but is it serving them justly? Or are customers falling by the wayside and ending up in competitors' laps? This is inevitable, but there are ways to keep people engaged on your platform and reduce the number of people jumping ship.

Recent studies by industry professionals state that visitors to your website decide whether to stay or leave within 4-8 seconds and that they base their decision largely on whether the website design appeals to them. During that time the credibility of your brand is determined.

Many factors can make the difference between an amateur design which performs poorly and a professional design which significantly outperforms. You can, however, have a beautiful design which performs poorly and vice versa.

So, how do you ensure your design has been created with the best elements to entice the user?

Here are three essential factors for a promotional item to have any chance of being successful:

Factor 1: Understand your audience

Before you start designing, you need to know who will be viewing your website. Who is your audience and user? How old are they? What are their likes and dislikes? What are their needs? What is their purchasing behaviour? Many questions can be asked.

Marketing segmentation is the process of identifying your customers and grouping them together based on how they will respond to various marketing strategies. Demographics including age, income; Geographic, Psychographic and Behaviour are the most well-known. You can tell a lot from your existing customer base as they have already purchased from you. It is vital to segment your market and know it well or you can be way off the mark in your designs and wonder why your website isn’t converting.

You need to know these things before presenting something intended to represent your business. Get it wrong, and it will be rejected; get it right, and you have their attention.

Make sure you're speaking their language.

Factor 2: Colours, lines, shapes, weights and sizes

The "psychology" of colour has been around since the ancient Egyptians observed their effect on mood and used them holistically.

We all know red is faster than any other colour right? OK, not quite. But we can agree that it can represent danger, war, power, determination. Lighter red can entice passion, desire and love.

Brown suggests stability, strength and denotes masculine qualities.

Dull yellow represents caution, decay, sickness or jealousy. Light yellow is associated with freshness, joy and intellect.

Black is associated with power, elegance, formality, death, grief and mystery. Black is a mysterious colour and can be used to create fear. It also denotes authority and strength; moreover, it's considered to be formal, elegant and prestigious (e.g. Mercedes car, black tie).

Just like colours affect people, shapes can also cause a reaction.

Sharp points and jagged lines represent danger, pain, aggression and anger; whereas a smooth or gentle wavy line can give a feeling of calmness or a harmonic rhythm.

Shapes and lines can be used to lead the eye in a direction.

Large bold in-your-face fonts can certainly capture attention, but they can also push away the reader as if you were yelling at them.

Just as the tone of one's voice in verbal communication can determine whether something sounds friendly, sad, angry or full of love, so too does the design of a website or any promotional piece.

Factor 3: Photographs, illustrations and videos

All too often we see exactly the same (or very similar) photographs repeated on various websites and promotional pieces which were purchased for one or two dollars from a photo stock website. There's nothing wrong with stock photography, but they should be chosen with care. It doesn't have to be expensive to be good; however, paying a little more goes a long way when it comes to quality photography.

The same common mistake happens with illustrations, especially when it comes to icons. We are seeing the same ones used over and over and over. Sure, keeping familiarly of icons can help the user determine what is what quickly but using icons that don't match the design will look disjointed, slapped together and cheap.

Selecting illustrations that match the colour, size, line thickness and shape as the rest of the design conveys a clear message which ties in the overall design.

Videos aren't used enough. They can be expensive to produce, but they are compelling communication tools and should be used more often than not. This is a whole other subject, but the basics of the above factors hold true for videos too.

Factors 1, 2 and 3 should always be considered when designing any promotional piece.

Let's look at two examples when we combine the three factors:

Example A

The Product:

A men's high-end leather travel bag. Retail price $1999.00

Factor 1: The Market

Men who can afford a two thousand dollar leather bag can also afford a luxury watch, a Mercedes, possibly even a yacht. They would be a company owner, investor or a shareholder in a company and most likely like to travel a lot.

Factor 2: Colours, lines, shapes, weights and sizes

We would likely use black and brown (light and dark) as the primary colours accented by gold, silver and a soft shade of blue.

The lines and shapes would be thin and smooth, nothing jagged.

The buttons would be gold or silver and would be shaped with a slight round angle on the corners. The most important button, a call to action, such as "Buy Now" or "Find Retailers" would be the soft shade of blue as it is contrasting and therefore will stand out the most amongst the other colours.

The font weight would be medium and small in size and have an elegant feel.

Factor 3: Photographs, illustrations and videos

You would hire a photographer to take photos of handsome men aged 30 and 50 with the bag in their possession. Appropriate locations would be sitting in a luxury car, at the airport in the guest lounge or on a plane in first or business class, or walking down a clean street with tall office buildings in the background.

It's unlikely to use illustrations in this promotion unless you customised some blueprints to depict how the bag is made and it's construction.

You could have a dimly lit video with carefully placed lighting giving a 360 external view of the bag and also an inside look of the bag showing off it's finer points such as its stitching and craftsmanship.

Any use of icons would be thin and charming.

Put all this together, and you'll have something that matches the quality of the product and speaks to the relevant market.

Let's look at something vastly different now:

Example B

The Product:

Average quality headphones for listening to music. Manufactured to handle loud rock or metal music rather than the deep drop-bass of hip-hop or rap.

Factor 1: The Market

15 - 55-year-olds, mostly male, who listen to rock or metal music.

Heavy music is loud aggressive and in your face. But it can also be very articulate and precise when it comes to musical ability. Heavy music fans tend to be very patriotic and defensive fans.

Factor 2: Colours, lines, shapes, weights and sizes

Black, dark grey, red with yellow accents.

A black or dark grey background would be suitable but having white text on a dark background is not desirable. We are familiar with reading black text on a white background, so it's usually best to keep large bodies of text with white backgrounds.

Black and red buttons would be used and thick, black, blocky heading typefaces for the titles.

Sharp, grungy and jagged lines should be used in graphics.

The wording would also be aggressive, maybe even some mild swear words scattered about to match the verbal tone.

Factor 3: Photographs, illustrations and videos

You would use photographs of the products resting on tables or band equipment in locations such as a recording studio, bars or live music venue with a few rock'n’roll looking individuals around the room. You would also have rock girl and/or guy sitting on a couch with a large record collection listening to music while using the headphones. The imagery would be mildly dark, but with lots of objects or coloured lights. Same goes for videos.

Using rock celebrities in photographs or videos would be ideal.

Illustrations could be used in the form of a mascot, perhaps a devilish looking character doing the metal horns and wearing the headphones. And you could also have blueprint illustrations showing how they are built.

Bonus Factor 4: Lead the eye to what's most important

What is the purpose of your app or website? Is it to get more sign-ups, more sales or more video view perhaps?

It's very common to see designs setting the person off in all directions rather than controlling their impulsive actions. Just like a Rembrandt, Vermeer or Monte painting, they each have a main subject and were usually painted to make your eyes go to one place before looking at the rest of the painting. This is done by 1. composition; where each of the parts of the painting is positioned on the canvas; 2. the lines and shapes which are angled to lead the eye in a certain direction and 3. the colours.

There is one other eye-catching element to design which paintings can't do and that's "animation." Objects which are blinking and moving amongst static objects attract attention.

Your app or website is clearly not a Rembrandt, but the basic concept is the same as a fine painting.

You need to define one clear action for the user to take above all, make sure it's the most visible item so it is seen first. This could be a "Buy Now", "Join Today" or "Sign Up" button. Or, it could be a title above a registration form. Possibly it's your phone number that's the most crucial part of the whole promotional piece.

Summary

The examples above are a basic view of how you would go about creating a design to market a product so it communicates to potential customers without failure. With these factors in place, you will reciprocate agreement from the onlooker and therefore a growing affinity for your product and brand.

Of course, there are many other factors which make a good design but the three outlined above are the starting blocks for promoting anything.

Chances are you are now looking back at your app or website thinking, "Gosh! What was my designer and I thinking when we put that together?"

Don't fret, ask our design team to give yours a good look over and suggest some changes which will get your more sales, contacts or sign-ups.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email