The Article below forms the second part of the writing piece assigned to one of this year’s summer interns, Constantinos Zachariou, written with the close supervision of our Team.  It compliments the previously published article – newsletter 69. We sincerely hope that readers will gain some useful tips and will find this an informative and valuable writing piece, which directly applies to the modern era of digitalisation and everyday life.

Alignment, Whitespace & Proximity

Alignment refers to the X and Y position of certain elements on the webpage and Whitespace refers to the blank sections of a web page (doesn’t necessarily have to be white).

Alignment is important to place priority on certain elements. Any piece of information that is directly in the centre is bound to be focused on more than something off to the side. The Gutenberg Diagram represents the main 4 focus points of a user and where they would focus on the most, this being the shape of a Z. Adding on, there is another pattern called the “F pattern”. The Z pattern should be utilised if there isn’t much text and the F pattern should be utilised if there is a lot of text. Additionally, there is a further phycological importance in placing elements in certain positions. For example, placing a warning message before a purchase is made, ensuring that the consumer has not made a mistake – “Are you sure you want to proceed with this purchase?”. Below this there would be two options: “Yes” or “Cancel”. Would the “Yes” be placed to the right or the left of the “Cancel” button?

Think about it like this, when flipping through the pages of a book, do people turn the pages to the right or left to progress through the book? The answer is to the right. Hence, a similar connection is made between accepting terms on a web page and flipping through the pages of a book, the right-hand side is much more favoured. Although this is a small example the general idea of can be applied in a broader sense, as most websites contain all the important buttons on the right-hand side – especially on mobile devices.

Whitespace can be utilised to make the consumer focus on sections of the web page. Typically, lighter tone colours should be used to stop the eye from focusing on the background. Too much whitespace makes the website look empty and the user would spend too much time in navigating and too little makes it too crowded as all the elements are smashed together.

Style

Style refers to modifications on the website and to the elements, in order to make the entire site more appealing. This could refer to changes in font type, font size, colour, bold, italic, underline etc. and even the theme of the website. Texture is also a sub-section of style.

There are many different styles to choose from according to the business. The website could look more childish, more professional, more simple, more complex, more unappealing, and more appealing depending on the choice of style. For most professional companies a corporate house style should be applied. There are thematic changes that will make recognising the company immediately. For example, Apple house its own iconic font of San Francisco Font. Therefore, every time one views the site they can immediately detect that this is an Apple website.

Texture usually has to do with the extra images added on or even images places as background that cause the visitor to feel more in tune with the site. Imagine looking for a resort to travel to and a dark, gritty photo appears while scrolling through pictures of the place. That makes it immediately unappealing and takes the pleasure away from resort. However, if the images show beautiful houses, a calm and sunny beach, and breath-taking pictures of the landscape then the dynamic changes. Textures could range from: smooth to hard; soft to rough; fluffy to prickly and so on. Depending on how the consumer should be made to feel, textures should adjust accordingly. It is important to note however that when creating a professional website, in general textures should be avoided, as these are more reserved for more entertainment/leisure companies that aim to provoke certain emotions like charities, travel agencies etc.

Content & Design

We covered how the fundamentals on what to focus on, when creating a web site, however we did not cover how the main content should be. The content of the site is split into three sections: Header, Main Body, and Footer. To create a functional and pleasing site these three sections need to be considered carefully.

Header

There are 4 elements that should always generally be included in the header: Logo; About; Home and Contact. These are the most common elements that will help bring structure to the website. After designing the initial draft version of the website there are many creative ways of simplifying the header to achieve a cleaner and more professional look. For example, removing the “Home” element and replacing it by making the “Logo” a button to serve the same function. Also, instead of having the elements to be written in text, icons could be used instead. The simplification process is important as there is no professionalism in a mess. The Header is the first thing that a person sees on a website and, hence, needs to portray the business in the best way possible. Simple. Efficient. Straight-to-the-point.

Main Body

The biggest errors in most websites are found in the main body. The Home page of the website should be an introduction to the company, not an extensive description of everything that can be offered. Be brief and introduce the services – do not describe them. The goal is to create a comprehensive and professional website. By limiting the amount of text at the home page then the consumer is presented with only what they need to know and hence the likelihood of them wanting to navigate the site increases. Nobody wants to scroll through pages of text as that looks unappealing, especially to the busy consumer.

Footer

The Footer serves an equally important role as the other two components, it is the placeholder of any additional pieces of information that a consumer might want access to. Here one would commonly find: FAQ, Contact Details, About Us, Shipping (depends), and any other details. The Footer is usually filled, although not fully, with hyperlinks that will lead the user to other parts of the website that will inform them further.

Harmonising the theory

All the key pieces of knowledge that would be required to construct a website have been stated above. Now the difficulty arises in combining them all in a harmonious way. Remember, our goal is to construct a clear, comprehensive, and professional website. After creating an initial draft with most elements included, now the simplifying process begins.

Replacing Text

As mentioned previously, it would be recommended to try to reduce and minimize the text on the website. Not necessarily stripping it from all text, but trying to present more visual cues (logos, clipart, icons etc).

Choosing visual cues

Never use over the top, fancy pictures that would cause confusion. Keep it simple. For example, “Contact Us” could utilise something similar to the following icon: “”. There are many different clip-arts, images, and icons that can be found online, but make sure that they are globally recognizable and would not cause confusion.

Eliminating repetition

The consumer does not need three ways to access the “About Us” page, nor to contact the business, nor for anything else. Repetition is a powerful tool if utilised correctly. Emphasis should be brought but sparingly, especially on the home page.

Expenses

Businesses are usually very hesitant to finance their website, considering a not so good investment. This is a false lap of judgment as most people nowadays hear about a business from other people and the first thing that they do is ask for their website. A poorly made website will lead to suspicion from the customer. This disappointment will often cause that potential customer to never consider a website or its respective business. Hiring a team of designers is always optable in most cases, as these are professionals with a team that know their job and can accustom a website to the very needs and requirements of any business type. However, there are some cases where designing a website could be excessively expensive to newer businesses, especially start-ups. As a result of the quick technological advancements, now creating a simple, preliminary website is a task which includes dragging and dropping. Although, this would take some time and most probably a monthly subscription from the software application that would be used, as well as studying to acquire some basic knowledge on the matter. As a result, sometimes it is better to invest in the short-term despite the difficulties, to acquire an accurate professional result that will be utilised in the longer-term.

Closing Remarks

The world is very rapidly progressing towards a much more technology-based future. This results into the increase of importance for a good website, as very rarely will someone find out about a business without the use of technology. A website represents the business and hence it is imperative that it would be as appealing as possible, as a poorly functioning and visually appearing website will result into a tainting of a company’s identity. It would be great if the phrase “don’t judge a book by its cover” was applied by the consumers. Unfortunately, first impressions last. Surely, a business must demonstrate quality of work and deliver desirable results to be successful in the long run. However, to first attract the customers, with time constraints placed on the working populace, it is of paramount importance to create a simple, effective, visually pleasing, and professional website.

Reference List

Creative Blog (March 17,2024), Why people focus on the right hand side of a design – https://www.creativebloq.com/netmag/why-people-focus-right-hand-side-design-3146267 [11/7/2023]

Interaction Design Foundation (2021), Mads Soegard, Visual Hierarchy: Organising content to follow natural eye movements –https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns [11/7/2023]

Mental Health America, How do colours in my home change my mood? Colour psychology explained – https://mhanational.org/surroundings/color-psychology-explained [11/7/2023]

UXPlanet (June 29,2020), UX Design Colour Psychology, Theory & Accessibility – https://uxplanet.org/ux-design-colour-psychology-theory-accessibility-40c095cc1077 [11/7/2023]

“THE REVITA TEAM”

Σημείωση: Τα άρθρα και τα δημοσιεύματα της εταιρείας μας, σκοπό έχουν να παραθέσουν στοιχεία για συγκεκριμένα θέματα καθώς και απόψεις που βασίζονται σε εμπειρία και γνώση που έχει αποκτηθεί. Απώτερος σκοπός μας είναι η επιμόρφωση των αναγνωστών στο σύνολο τους και όχι η παροχή συμβουλών για συγκεκριμένες περιπτώσεις. Για όλα τα προηγούμενα άρθρα της εταιρείας μας, μπορείτε να επισκεφτείτε την σελίδα μας στο Facebook, https://www.facebook.com/revitaconsult όπως και το blog στην ιστοσελίδα μας.