Experience & Design

How the ancient and modern web design are connected

Alena Riha

Junior UI/UX Designerin

Published

August 6th, 2021

Updated

April 28th, 2022

5 min

Ancient architecture is the grandmother of web design. What can we learn from the old principles of building a structure for modern design, especially for web design? To what extent can the principles of Vitruvius help us to better understand web design and create better designs for users in general?

Who was Vitruvius?

Vitruvius was an architect and architecture theorist in the 1st century BC, who served, among others, Caesar and Augustus. He wrote "De architectura," which can be understood as the first technical book on architecture. According to him, a building should fulfill three main requirements: Firmitas (firmness), Utilitas (commodity), and Venustas (delightfulness).

Frederick O'Brien has already extensively discussed the triad of Vitruvius and better web design in his article. Here, I would also like to provide a brief overview of the triad and six additional principles of Vitruvius, and where we can find and apply them in web design.

The triad of Vitruvius

Firmness (Firmitas)

Firmness is the ability of a building to withstand the test of time, prolonged use and wear and tear, as well as weather conditions. According to Vitruvius, firmness also depends on the foundation and its materials.

Time passes much faster in the digital age than in ancient times, especially in web design. Trends change constantly. Nevertheless, we can find and apply firmness in web design. The foundation or firmness begins with the host - is the system fast enough? Also, a responsive website makes it more durable for the future - it can withstand weather conditions and adapts. We can talk about materials when we rely on "durable materials" in web design: HTML, CSS & JavaScript have been around for decades and shape our digital landscapes and ... websites in the background. Of course, websites need adjustments after some time. The firmness of a color scheme, certain elements of a page - see corporate design - help users who have been familiar with them for a long time to maintain and understand the website's goal.

Utility (Utilitas)

Buildings are built for specific reasons. The building and its elements should fulfill functions. If this is not the case, the building is likely not useful.

Utility also applies to web design. Every website has a reason why it exists. And it should ideally be useful for users. Whether it's about storytelling or weather forecasting. An online encyclopedia like Wikipedia should make it easy for users to navigate through information and find it. Blogs and news sites should publish interesting content. "A clear goal leads to a clear design," explains Frederick O'Brien. He also explains that the utility of a website can meet most, but not all, user needs.

Beauty (Venustas)

Buildings should not only be well-made and useful, but they can also look beautiful. The quality of a building, according to Vitruvius, is enhanced by its beautiful exterior.

It's no different with websites, although the aspect of beauty has become even more important in recent years than in previous years. A beautiful design invites users to linger on the website. To explore it. Color combinations, typography, images, illustrations, etc. contribute to the beauty of the website. And of course, their composition. Interaction with a beautiful design enhances the experience for users and they are likely to return.

Design Thinking Introduction

Free

What is Design Thinking and how can your organisation utilise it to your benefit.

Microconsulting

Free

You have a question and need some advice. One of our experts will be in touch and offer you expertise.

Fundamental principles

In addition to the so-called triad of Vitruvius, there are six other fundamental principles of architecture that we will discuss:

Order (Ordinatio)
Beautiful rhythm (Eurythmia)
Symmetry (Symmetria)
Disposition (Dispositio)
Decoration (Decor)
Distribution (Distributio)

1. Order

Ordinatio refers, in relation to a building, to its structure and the dimensional division. Therefore, ordinatio is closely linked to the concepts of Eurythmia and Symmetria. These should be in harmony with each other.

We can also find a so-called "measure ordinance" in web design. We should always apply it. Of course, the grid system is a great help and forms the framework. A grid helps us to define the general main dimensions of a website. From there, we have a good foundation to work with.

2. Beautiful rhythm

Eurythmia is responsible for the well-proportioned appearance when assembling the building elements and the graceful appearance. As already explained, it is in harmony with Ordinatio and Symmetria.

The graceful appearance of our elements, such as text, colour, etc., is also important in web design. Once the framework and dimensions are in place, the next step is to package everything beautifully. It should be appetising to the eye, like Venustas. Colours should be graceful together, as should texts and text sizes, as well as various other elements. And thus, the overall package too.

3. Symmetry

Symmetria, according to Vitruvius, is the individual elements of a module and their harmony with each other.

Harmony of elements, sections, typography, images, buttons, etc. "spices up" the design and is also one of the basic design principles. Symmetry on a website contributes to the beauty of the website and what we perceive as beautiful. Humans perceive everything symmetrical, whether in nature or man-made, as beautiful.

4. Disposition

Dispositio, according to Vitruvius, is the planning and conception, including the floor plan, section and perspective view, of a building.

This principle applies to web design as well. Planning and working out a concept are fundamental to a good website. We build our creative ideas and solutions on that foundation for implementation. How many pages should be created? What functions does the customer absolutely want on the website (employee search, training opportunities, registration requests, etc.)? Are there already texts? Is there a product being presented? Should it be minimalist or abstract? The more questions answered and worked out in the concept by the designer, the better it is for work efficiency and the website itself. If there is a clear goal beforehand, it can be better presented and communicated in the design.

5. Decoration

Decor is the flawless appearance from the outside, referring to the overall style and coordination of the interior and exterior. Vitruvius also mentions adhering to the rules of recognised conventions. As an example, he mentions the correct assignment of column types to certain deities in temple construction or stylistic sub-elements, such as the orientation of rooms to the cardinal points.

Again, this principle falls under Venustas. Not much different in web design. As previously mentioned, there are basic design principles here too, where designers are encouraged to follow and orient themselves. For example, it must be clear to which section a button belongs. If certain background elements are used to emphasise the purpose of a website - e.g. suggested honeycombs for an apiarist or a modified version of the logo.

There must be a clear interaction of the design. Elements and their assignment should contribute to the overall style.

6. Distribution

Distributio, according to Vitruvius, refers to the expenditure and appropriate allocation of materials in construction.

This principle is relatively clear. The customer has the expenses. How much does the website cost? How much does this or that function cost? Do I want a blog or an online shop - because there are clear price differences due to the requirements of the website?

But where are my expenses and allocations as a designer? I invest time in research, collecting materials, and of course creating the website itself. Is it within the agreed scope? Or do I need to increase the budget and add something extra? As a designer, I don't always work alone. We are a team where tasks are clearly allocated - materials and their processing are clearly allocated. Customer contact is through the project manager, with the designer responsible for design and partial conceptualisation, and then we have the developer. Or do you work alone? Even then, it is important to find an appropriate allocation for oneself.

Conclusion

We can see that the principles of Vitruvius are relevant today, just as they were in the past - in architecture and in extended fields such as design - from graphic design to web design.

As web designers, we too can internalise Vitruvius and his principles can help us recognise and create better web design.