Information architecture – the basis of web design
The science behind web design
Information Architecture (IA), also called “Information Design” or “Info-design” is the fastest growing part of website science. It is the framework around which every website is built.
The practice has shown that no matter how valuable information is, it can remain completely useless if it is “buried” under poorly organized menus or is surrounded by inappropriate context.
The information architecture forms the core of a website, around which all its other components are built: the general vision of the site, its functionalities, navigation schemes, user interface, etc.
The information architecture of a site consists of the process of precise structuring of information, its organization in clear navigation schemes, and its attractive presentation through intuitive and unambiguous visual elements.
The purpose of a site’s information architecture is to allow the information on it to be accessible, understandable, and manageable.
The stages in information architecture (IA)
The information architecture process is based on detailed preliminary research and analysis. These studies should be carried out within the organization that owns the site and aim to define the main (if not all) functions that the site should perform.
In short, these analyzes should answer the following questions:
- What will be the purpose of the site?
- What will be his short and long-term development plans?
- To whom will the site be directed?
- What functions will the site perform?
- What will make this site unique?
- Why will people visit this site?
- What would keep them coming back to it?
On this basis, the research process should end with several clear and specific documents related to:
- The purposes of the site,
- Existing competition
- Content and functionalities of the site
- Site navigation structure
- Visual concept and placement of elements
Defining the goals
Defining goals is like buttoning the first button! If you button it wrong, all the other buttons will be wrongly buttoned as well.
In essence, this is an answer to the question “Why should this site be built?”
Typically, defining the site’s goals requires multiple conversations with key people related to the company’s core activities, as well as the people making the final decisions.
Thorough familiarity with the company’s marketing, sales, and advertising materials certainly provide a useful start. Understanding the mission, the main directions of the company’s development, and its business plan are also important elements on the way to defining the goal.
At this stage, conversations with “ordinary” employees of the company can also be useful, since in many cases knotty problems, hidden opportunities, unrealized potential or simply good ideas may have remained hidden from the management.
Defining the target group of users
This phase aims to reveal who the potential users of the site will be, as well as their goals and motivations. Developing different scenarios along these lines can be extremely useful.
Defining the user profile is so important because it will be the basis for determining how the site will be built. This includes visual elements, metaphors used, color schemes, and even font sizes.
Obviously, a site designed for teenagers, for example, will require a much different set of design techniques than a site designed for entrepreneurs and businessmen.
Competitive research
Good knowledge of competing sites is important. Apart from everything else, it helps you check whether your own ideas about such a site are correct or not.
Creating a list of competing sites is not difficult. A simple keyword search in a serious search engine like Google is often enough for this.
Analyzing the results of this search is not such an easy task, however, because it requires the definition of clear evaluation criteria, which is usually more difficult than it seems.
The development of evaluation criteria includes a number of purely technical elements (such as loading time, page size, approach to navigation, etc.), but also includes a set of rather subjective criteria, such as user expectations, their value system etc.
Another set of evaluation criteria relates to the functionalities offered by competing sites: internal search, database management, contact forms, interactive elements, etc.
The step following the definition of the criteria is the definition of the relative weight of each one of them. For some types of projects, for example, load time may be of primary importance, while for others, the feature set may be critical. It is difficult to give general rules to follow here.
Organizing the content
In order to define and structure the content of the site and its internal interrelationships, at this stage the information architect must develop the following set of documents:
- Sitemap: It accurately reflects the structure of the content. It usually looks like a graphic showing the layout of the different parts of the site.
- Content Map: It shows how the different parts of the site relate and interact with each other. If the site map reflects the logical structure, then the content map shows the logical connections. A sitemap is a static element, while a content map is a dynamic element. The content map represents the hypothetical path that users would have to navigate to explore the entire site.
- Layout grid: the layout grid is, generally speaking, a drawing in which the location of the various functional elements in the future site is reflected. This grid defines and shows the visual relationship between the different areas on each of the pages on the site. It’s easiest to explain what a structural grid is by showing this on an example site:
- Prototype: The prototype, until recently called a graphic original, is essentially an illustration of how the site will look in reality. It is based on the structural grid, but already includes all the visual elements in the future site, the chosen color scheme, etc. In most cases, the prototype is created with specialized software (usually Photoshop or tools like Figma), but in some cases, it can be directly developed using HTML and CSS.
The development of the structural (layout) grid and the prototype aim to show how the information should be visualized on the screen. However, exactly what information will be presented depends on the …
Content development
We mainly distinguish four types of content:
- Static content,
- Dynamic content,
- Functional content and
- Interactive content.
A classic example of static content is the company slogan, copyright information on the site, terms of use of the information, etc.
Typical representatives of dynamic content are articles, price lists, news pages, and other publications.
Functional content links to active pages involving entering passwords, filling out contact forms, and more.
Interactive content is where visitors themselves can add to or change the content of parts of the site. Typical examples of this are the introduction of advertisements, participation in forums and social networks, as well as the execution of transactions related to reservations, online payments, etc.
After the overall structure of the content is ready, it is time to define the functional requirements for the site.
In this phase, all active functionalities requiring programming in languages other than HTML and going beyond the pure visualization of information are specified. This includes active elements such as order forms, online surveys, site search systems, forums, photo galleries, announcement systems, online catalog management, restricted areas, etc.
Metaphors
What exactly are metaphors? By definition, metaphor is the use of words or symbols to achieve a meaning different from the original meaning of the word or symbol. In this way, the transfer of meaning from one object to another is achieved.
In information architecture, metaphor is a way of conveying the internal structure of information, by means of external (visible) components, such as graphic elements, icons, menus, placement in page space, etc.
Organizational metaphors
An organizational metaphor is when the structure of the site is subordinated to the organizational structure of the company. For example, an organizational metaphor is when on a website, say of a commercial company, we see sections such as “Sales”, “Management”, “Marketing”, “Advertising”, “Human Resources”, etc.
Product metaphors
A product metaphor is used when the structure of the site is subordinate to the structure of the products included in it. So, for example, we are talking about a product metaphor when the menu items on a website for example for electronics, we see things like “Monitors”, “Motherboards”, “Printers”, etc.
Functional metaphors
We speak of functional metaphors when the structure of a site is subordinated to the functions that the visitor can perform in its various parts. An example of such structuring of a site is a menu of the type “Purchases”, “Sales”, “Search”, “Order”, etc.
Visual metaphors
Visual metaphors use visual symbols replacing verbal (textual) elements. An example of such a metaphor is using an image of a magnifying glass for a link to the site’s search engine, a portrait of the Mona Lisa for a gallery entry, or, say, a megaphone for a link to a forum.
Layout grid
Let’s go back to the layout grid again because the effectiveness of the content strongly depends on it. Its development is a step bringing us closer to the visitor. Although invisible, it is this grid or the arrangement of elements on the page, that is the first thing a visitor sees when entering the site. Therefore, it is extremely important that it is designed so that the visitor:
- Be acutely aware of how to find what you’re looking for,
and - To be directed where we would like it to go.
Defining the layout grid involves a precise and well-thought-out division of the “living space” of the page in a way that gives optimal space for all the elements provided on the site: menu, illustrations, advertising banners, logo, content, explanations, etc.
Let’s recall again what the layout grid was:
Now that we already know a lot about our site – its purpose, the group of people it is aimed at, its functionalities, its content and the placement of elements on the page, we are ready (just now!) to proceed to the graphic design itself.
Site vision
All the work done so far must now be realized in electronic form using graphics programs and programming languages such as HTML, PHP, JavaScript, ASP, etc.
Unfortunately, many colleagues start building their sites straight from here … and that’s why their sites often fail.
But wait a minute! We are still in the process of information design and we should not forget that good usability is our ultimate goal! Even when “unleashing” all your creative energy in graphic design, we should not forget that visitors have very specific habits and expectations in relation to a site.
This is especially true for navigation. It should be as simple, predictable, and conservative as possible. If you’re designing a graphic button, make it look like a button. If you want to place a company logo, let it be where the logo is usually placed – in the upper left corner.
Look, it’s like designing a new car. All drivers know where the gear lever, steering wheel, or brake pedal should be located. If you try to “creatively” move the pedals, and install the steering wheel on the back seat or the gear lever to the left of the driver, then the car you designed will surely fail completely.
The same goes for graphic design. Some elements on the site simply have mandatory places and must be in their places! Like I said, especially when it comes to navigation, suppress your creative urges. Drive your imagination away from conventional conventions.
Don’t expect visitors to “get used” to your “unusual” design. This will never happen!
The key words in designing any site are two: clarity and predictability.
Color schemes
Working with colors is an extremely broad topic and it is impossible to even partially explain it in one article. However, colors are of paramount importance to the success of a site, so here we will try to briefly mention only the most basic principles.
Colors are a powerful “weapon” in web design. However, like any other weapon, their unwise use can be very dangerous.
When it comes to colors, two questions come to the fore:
- Which colors?
and - How many colors?
While there is no magic formula that will turn your page into a design masterpiece, there are still some basic rules that can at least prevent you from making serious mistakes.
Which colors should I use?
Finding the right color combination is often a big problem for beginners (and not only them). That’s why it’s a good idea to stick to one of several basic color schemes.
According to these rules, colors can be combined by two main methods: similarity (analogy) or opposition (contrast).
Combinations based on analogy use colors that are different shades of the same base color. They are usually located next to each other on the “color wheel”
Combinations based on the opposition (complementary or contrasting schemes) use colors that are located opposite each other on the “color wheel”.
How many colors should I use?
As we have already said, there is no magic formula. However, if you don’t want to have serious color problems, try to use no more than four colors on your site.
But be careful! White is also a color and so is black! So if you have a white page background and your text is black, you already have two colors used and only two more to go.
Well, well, that’s just a rule. It’s not the law! You can break it sometimes, especially if you have good reasons for doing so. Remember also that usually grayscale colors are perceived well and do not add to the “total”. That gives you more freedom, doesn’t it?
