Fundamentals of web design and color effects
In the first two articles dedicated to web design, we dealt with the website’s design and usability. The third part deals with another main topic of web design: the appearance of a site. Logos, colors and shapes characterize the perception of one’s presence on the web. In the introduction to the contents (texts, images, videos, etc.) and their arrangement, it is necessary to give the correct aesthetic value. The design of a site contributes significantly to the page’s general perception, with its contents and enhancing the company name or brand. The design guidelines will help you find the right style for your page.
The Requirements for Good Design
When you start looking after your site’s appearance, you must already have a clear idea of what the actual content will be. The content strongly influences the form. Clarify what information, services or products distinguish your page. What creates your company or your brand unique? And how does your offer differ from that of the competition? Your site’s design must be adapted to the content and image you want to give of yourself. Furthermore, in the creation phase, companies must be careful to respect the chosen corporate design.
The aesthetic aspect of a company is called corporate design and reflects, so to speak, a company’s visual identity, but often institutions, organizations, associations, and brands also own one. The composition of logos, advertising media, products and their packaging and websites is essentially determined by the corporate design already in use. It includes constants, such as colors, specific shapes, and types of fonts found in all the company’s products and communication means. So the site is generally just a part of the corporate design. Suppose you create a place for an existing company. In that case, you can already orient yourself to a corporate design, for example, using the colours of the logo or the font used on advertising materials such as brochures, announcements or press releases.
In case you want to change the appearance of a previous design or do not have any basic model, you should immediately reflect on the aspect to give to your corporate design.
Guidelines for corporate design
The corporate design reflects an accurate image and provides a high recognition value. Consequently, the corporate design ensures that all publications and media have a uniform and simple appearance. This is why the guess“form follows function” is followed, i.e. the individual elements of the design must not only provide recognition value but must also be functional. For logos and fonts, for example, the rule that they must be legible applies.
Below we present the most critical components of corporate design.
A logo is a graphic symbol and the heart of corporate design that substantially influences all other publications’ appearance. The colors of the logo are found in most, if not all, advertising materials. A logo often consists of an inscription (or at least one or more letters) and an image or symbol, but it can also be just an inscription or an image. The logo is given an unmistakable design by means of the shape of the symbol or the presentation of an inscription.
A company brand or symbol is essential to get noticed. The logo must be present on every page of your site and is typically found in the header section, the top of the site. Ideally, the symbol should be pregnant and characterizing. When creating a logo, some principles must be taken into account:
- Understandability: the logo has the function of representing a brand and highlighting and referring to the brand. For better understandability, the products or services offered can be stylized in the logo.
- Uniqueness: your logo must stand out from that of other companies. If a famous logo design is copied and fits your brand, it won’t be easy to build your own identity. There is also a risk of violating the laws on trademark law.
Crisp: Simple designs are easier to remember, and therefore a logo shouldn’t be too detailed or frivolous.
- Reproducibility: A logo is used in different ways. It must be recognizable both on business cards and on stamps as well as on large billboards. In order not to make the individual pixels visible, it is recommended to choose high definition logos, which can later be scaled without losing their quality. Furthermore, they must be available in different formats (such as jpg, png and pdf) to be used easily everywhere.
In case you want to create your logo yourself, but you don’t know how to use graphics programs, or you don’t have the right skills, you can use online services. Sites such as freelogoservices.com, logaster.com or designmantic.com provide numerous functions for creating logos. It is usually possible to receive the logo designed by you for free, but only in low quality. The variants with a better resolution, on the other hand, are paid.
Font, image language and colors
In addition to the logo, the corporate design also includes other important elements for the creation of a site. The most important are illustrated below:
- Font: the corporate font (also called corporate font) indicates the type of font used most or exclusively by the company. The font chosen must not only have a high degree of recognition and be clearly legible (even on reproductions of different sizes), but must also adapt to the image, the philosophy of the company or the effect you want to give. This font must be used in all texts and is often also found in the logo.
- The language of images: in many cases it is useful to use images that make the site varied and can awaken emotions in visitors. The set of all significant images, photos, motifs and symbols characterize the language of the images. Just like fonts, the language of images must also appear uniform and be used accordingly. Both the style and content images used should emphasize the image of the company communicated on the site. Generally, low-quality non-professional images should be avoided because they make the entire site appear as made by amateurs.
- Colors: Colors must also be used consciously. Their choice includes every shade found in the sub-pages of the site. The logo design, graphic elements, background or other compositional elements generally refer to the established colors.
The choice of colors introduced shortly before represents a wide field that must be taken into account in detail in the context of web design. Through the use of specific colors, different effects are achieved. Since colors are associated with different meanings, it is possible to enhance some characteristics of the company by means of a specific color choice. For this reason, a thoughtful choice of colors is essential in corporate design. In fact, the coloring of a site basically determines the first impression that the visitor will have of the page.
Colors in the field of web design
The significance of a site’s color composition is not to be underestimated. Colors are always, knowingly or unknowingly, associated with certain contexts and linked to specific emotions. Basically the colors are divided into warm shades (yellow, orange, red) and cold (green, blue, purple). On the other hand, black, white, gray and brown are neutral.
Each shade arouses precise sensations in the visitor: eg. red is positively connected to love, warmth, attention, energy or courage. Red is also a bright color. Negative feelings, on the other hand, are danger, fire, violence, blood, arrogance or anger. In general, the red elements in web design attract more attention. Each shade causes positive and negative sensations, so it’s best to choose the right colors for your page right away, not just for aesthetic reasons.
The Effects of Colors
The sensations that visitors associate with a color depend on the respective color and context. The meaning of a color also varies according to the culture under consideration. Below is an overview of the main colors showing which associations link to these in Western culture and for which areas they are most used in site creation:
As you can see, the world of colors is complex. Which color you want to highlight the appearance and shape to give to your site will depend on your taste. From a compositional point of view, you don’t have to use too many colors: many different colors make the site unclear and look too full. Instead, use a limited spectrum and be careful to adapt it to your theme.
Principles of Good Web Design
Even for the design of a website, the rule applies: the better the design, the easier it will be to create. It doesn’t matter if you are building a website for your company or for yourself or maybe you are developing it for someone else: the design of a page is a fundamental element for success. This is why it is advisable to budget enough time to find the right idea, conceive and improve the website. To find an appropriate and convincing structure for your page, you must consider the following points.
What is the function of the web page?
Before creating a page design, it should be clear what you want to achieve and in how long. It would therefore be helpful to ask: what is the purpose of your site? The answer is the basis of the entire project, so each component of the homepage should orient itself towards the success of the set goal. For example, a website can have the purpose of increasing the degree of popularity of the contents, therefore of promoting or informing. If the page is e-commerce, the main goal will be to get new customers or sell more products. A website is generally the business card of a company or an institution; It is important that the purpose of the site is kept in mind during the design and creation phase.
What kind of content suits your purpose best?
Think carefully about what are the topics to be presented on your site and how they can ideally be treated. Is the page mainly based on text or is the content mainly composed of images and videos? Do users need to register to fully use the site? Should a payment system be integrated? Is a comment function needed to allow users to give feedback or not? By asking yourself about these questions, you can quickly determine how expensive your project is, how long it will take and how much the costs are.
Get an idea of what measures and what contents are needed to achieve your goal through brainstorming, research and exchange of views between colleagues. This way, you will have a complete picture of the designed website, which will make it easier for you in the following steps.
The target audience of the website and user expectations
Who is the target audience of your website? Define it. Always keep your goal in mind: if you promote a product or service, you must define your target audience and adapt it to the site’s design, even if it is an information portal or a forum on a specific topic. Ultimately, whether you want to propose a commercial offer or choose an information one, every website manager should know which group you are trying to involve. In fact, only those who know their users can shape their page according to these parameters.
In many areas, standards have been set for content and its presentation. Thus, for example, on the online sales pages, you will always find a search function with practical filters. Each sector and each target group has its own characteristics that distinguish the content and presentation on the web. It is important to know this type of user expectations, especially if your site deviates from current patterns.
The structure of the sitemap
Here are some indications for deciding the structure of the web page. To carry out this task, it is advisable to create a sitemap, which is a diagram that reproduces the structure of the pages and the links of the individual pages. To get a general overview, view the hierarchy of your internet page with pen and paper or directly on your PC. By doing these, you will not only organize the content of your site but, at the same time, you will determine its navigability. In the sitemap, you establish the links of the site, sort each page according to their importance and create a brief description of the scheduled contents. Obviously, the structure of the pages must remain clear and must not contain too many sub-pages for each category.
The layout of the website
Linked to the creation of the sitemap is the draft of the website layout. In this case, this is not the final design of the site, but only the ordering and function of the content on the individual pages. By choosing the layout, you will decide for example, where to insert the menu, how users reach the sub-items of the menu and where the website logo is placed. The other elements to deal with in the layout draft will depend on the content. Other potential functions of the site to integrate and reflect on are:
- A comment function for visitors
- Links to social media, social media buttons, with which users can share and show their appreciation for the contents of the site
- Sponsor ads, banners and videos
- Affiliate links to partner companies that you promote on your site
Furthermore, you will have to think ahead of time if you want to optimize the display of your website for different devices (pc, tablet, smartphone, etc.). Generally adapting the graphics of the site to different display sizes has advantages and often it will be necessary to reorder the individual components of the page. The sitemap and layout are always connected to each other and must be planned from the beginning in the design of the individual elements.
Search Engine Optimization: SEO
Your web presence must not only be adapted for the visitor but also for search engines like Google. This can be achieved through SEO techniques, an acronym for Search Engine Optimization, in Italian search engine optimization. Through SEO, a website must be as high as possible in the search results when relevant website topics are called up. The contents of the pages are first of all, optimized for Google, the leader in the sector also in Italy. With a high ranking in Google search results, your site will be found faster and, above all, by a greater number of users. Thanks to SEO, you will therefore broaden the range of your website.
Thanks to good and relevant content, you will make sure that your site is interesting for the target audience and that it is visited often. However, there are also other methods to optimize a website for search engines and for this, there is no need to be an SEO expert. It is important that you know what your target audience is looking for on Google & co. It is essential to integrate these concepts and combinations of terms into the text as much as possible, also arranging them intelligently. These and other aspects are taken into account when indexing content by search engine software (so-called crawlers) and determine the positioning of your website.
Professional web design vs ready-made sites and CMS
Nowadays, internet pages are no longer just built by professionals. Before creating and building a website, it was still necessary to have computer programming skills; today, even amateurs can try their hand at the enterprise. Those who have no web design experience usually rely on ready-made website templates based on the Content Management System (CMS).
A CMS offers users a graphic surface with which the individual components of the page are created and sorted. Knowing a programming language is no longer necessary, although it can often help. The amount of functions made available by the individual systems varies according to the programs; the pre-existing features in a CMS depending on the chosen provider, which generally offers different packages. The more the price of an offer increases, the greater the number of features included. Alongside these, there are also free ready-made sites. Unfortunately, however, their features are generally limited, and only simple web pages can be created.
If you want to create a professional homepage, you should know the HTML and CSS languages with which you will have maximum flexibility. However, to develop an error-free and professional-looking page directly from the source code, you need industry experience. Furthermore, maintenance and updating are more complicated than CMSs.
You also have the option of entrusting the creation of your web page to a professional. Obviously, even in this case, you will need to be aware of what needs your page must meet. Finally, it will be up to you, the person in charge of the agency you have entrusted, to approach, in as much detail as possible, to your expectations. In any case, a design studied in detail has a positive influence both on the process and on the final result of the website.
Give yourself time
As soon as you know what content your website will offer, you have thought carefully about the structure and its creation, decided whether you will create the page yourself or hire someone else, you can finally establish the timing. In the case of larger projects, you can decide to manage the deadlines by stages (starting for example from the production of the basic texts for the contents and then move on to the realization of the basic design, etc.). In any case, time management should contain all the most important points and at the same time remain clear. Always keep in mind that individual sections, in some circumstances, need to be adapted or improved and a good roadmap provides enough room for such corrections. Furthermore, the timelines must be updated regularly and adapted to the new elements of the project.
The next steps
If you have considered and worked out all these aspects, you will now have completed the basic structure of your website. Subsequently, you will have to take care of the realization of the single points, paying attention to some things.
In future articles on the topic of “web design fundamentals”, you will find out how to make your page easy to use and what to consider when using logos and colors in web design.
Ease of use in Web Design
After talking about the website’s design in the first part of the articles dedicated to the fundamentals of web design, we now show you how to make your site easy to use so that it is “user-friendly”. There are more ways to structure a web page, but not all are intuitive for users. Over time, web standards have become established that users are accustomed to and that managers must, therefore, take into account when creating the page. Even its display on devices with different screen sizes affects the user experience. More and more users surf the Internet from other devices, and therefore, this factor must be taken into account to facilitate navigation and allow easy access to visitors.
Ease of use and web conventions
The ease of use of a page is a fundamental part of the discipline known as “usability engineering”, which is based precisely on the usability spoken of in the context of web browsing. In this case, usability refers to the easy use of the sites for visitors. In general, a page that is easy to understand and intuitive to navigate is considered “user-friendly”. For this, we must follow the conventions of web design and not neglect the technical characteristics necessary for proper operation.
The accessibility of a website, in English “accessibility”, plays an important role in the context of ease of use. The accessibility of a page is determined by the fact that it can be used by all users, regardless of physical, cognitive, linguistic, technical or other limitations. To find out more, you can consult the guidelines for accessibility of content on the website of the W3C organization.
What is valid for a website’s appearance also applies to its usability, so try to keep navigation easy and clear. Its speed and intuitiveness characterize a good navigation; users must immediately recognize the menu structure and understand it. A single navigation bar is sufficient in most cases, and you must avoid filling it with too many items and sub-items. If you use a drop-down menu, it must be clear. A clear and uniform navigation structure facilitates usability and ensures that visitors to the site keep an overview.
The menu items must also be recognized as such. Structure the navigation links, eg. through the use of icons. Also, you can make menu items or the mouse pointer change color when users hover over them (hover effect). Equally, care must be taken to assign names that are as short and clear as possible to the subheadings. Finally, make sure that the linked pages truly offer what the menu items predict.
The technical aspects
The technical realization of a site is significant. Fundamental for easy use of the page is the trouble-free loading of the site contents. Make sure your content is properly curated: error messages or loading errors are unprofessional and don’t make a good impression. If content needs high performance to be displayed, long and unpleasant loading times ensue. Thus, the visitor’s patience is put to the test, and on the web, it is not acceptable. Therefore, constantly check that your page is free of errors and that it is displayed without difficulty.
The requests made to users’ hardware are another technical factor to be taken into consideration. Theoretically, a website must be called upon any device that connects to the Internet and must make use of the minimum requirements required by current technology standards. Consequently, the independence of the platform and the accessibility of a page are very important. This means that a website works regardless of the operating system in use on a particular device. You don’t need to install any weird software to view the content. In addition, page loading should not require high performance. Otherwise, users using devices with slow processors will be excluded.
Responsive web design
Given the rapid spread of mobile devices with internet access, viewing a site on every device (computer, tablet, smartphone, etc.) and on every type of screen is becoming increasingly important. Previously, web pages were mainly characterized by a static layout that is fixed and which did not adapt to all kinds of screens. This meant, for example, that users only saw a small portion of the site on the small smartphone screens.
An adaptive layout is more usable since different formats are offered for the site, i.e. one for the smartphone, the tablet, and the pc. However, the respective versions only focus on standard screen sizes for some specific device models. Not being tailored to every possible screen size, space is often unnecessarily wasted when viewed on these devices.
Responsive web design is much more flexible. In fact, the page structure is modelled in a customized way to the device screen size. It is, therefore, a reactive web design (as the word “responsive” suggests) that makes the best possible use of the display space. Not for nothing has it become the current standard in the field of web design. In contrast to static or adaptive web designs, responsive web design uses a variable base scheme (also called a “grid”) that automatically adapts to the screen format in use and positions the most important information and elements. Navigation in the foreground. This guarantees high usability of the site, regardless of the device in use.
Common mistakes in web design
Mistakes are part of the learning process. However, if you want to beat the competition, even in the field of web design, it would be better to avoid some of them:
- Pop-up windows: Until recently, it was still in vogue for clicking on a link to open a new, small window. Now, this practice is no longer well regarded by users, and many disable this option completely thanks to a browser extension.
- Missing contact details: offer the user the opportunity to get in touch with you. Contact details should be found easily and without much effort.
- Links that lead nowhere: Dead links are irritating and considerably increase your site’s bounce rate, meaning users will be more likely to leave the page faster. Once your site is online, you will need to check for old or incorrect links regularly.
- Content that is no longer current: many sites have old and no longer current content. Make sure you always provide up-to-date information.
- Bad browsing: Internet speed is a factor that is taken for granted, so if a user does not quickly find out how and where they can get to by browsing the site, they simply visit another page, that of your opponents. Therefore, there should be a navigation bar in each subpage that takes visitors to all other essential sections of the site.
- Too many types of fonts and colors – sites should look harmonious and unified. Beginners tend to want to take full advantage of the huge amount of fonts and colors available, while it is essential that you do not use more than three different fonts on your page as well as do not choose more than three colors.
Other important aspects in creating a site
Creating a good web design takes time and work. But with a little patience, you will get closer and closer to your idea of a professional site. The fundamentals of web design exposed in these articles are the basis for realising a web project. There are some different other methods by which you can optimize your internet presence. To learn more, we refer you to our specific articles (e.g. the one on the best SEO tools or the five best CMS on the market).