Architecture in Web Design: Applying Vitruvius’ Principles

Let’s make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

Let’s make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

So the question is, can we learn from architecture to make web designs better? Fortunately architecture has been studied for hundreds of years so we have plenty of resources to tap into. One of the great artisans who pioneered engineering and architecture was Marcus Vitruvius Pollio, a Roman engineer, architect and artist. In his book De Architectura he describes three fundamental principles of what great architecture should accomplish:

  • Firmatis: It should stand up robustly and remain in good condition — be durable.
  • Utilitas: It should be useful and function well for the people using it — be functional.
  • Venustatis: It should delight people and raise their spirits — be beautiful.

These three principles can be directly applied to web design as well. Every really good web site should have these same principles: durability, functionality and beauty. In the beginning web design was just one document of information, a basic text document. As the web progressed, CSS allowed web sites to separate the content so that it could be re-skinned without altering the structure of the site. Today, HTML5 semantics is allowing us to finally separate meaning from structure and style so that web sites can be durable and be ready to embrace new technologies as they come.

These principles are fundamental for web design as much as they are to architecture. We’ve all designed, developed or have used sites that do not follow these principles. Without durability a site loses its ability to grow with the times, without good function a site will never be used and without a pleasing design nobody would even stay on a site let alone revisit it. A website is complicated but I like these principles because it makes the task of designing and developing a site easier to digest. They allow you focus on what is important and not get lost in every little detail of a site.

Building for  “Firmatis”

Intel.com is one of the oldest websites - still durable despite the many redesigns

Durability is probably the most overlooked aspect of web design. Most of us never consider the life span of a website when we start to design. But durability is important even to web design because web products are starting to live longer. Some web applications and sites will probably live to be older than most of us. Now, I know what you are thinking — it’s really easy to redesign a web site — and that is true, but what if it could be even easier? If you design and develop for durability your next redesign is going to be so much easier if you don’t have to rewrite every file HTML, CSS and JS file in the structure.

Semantics and a progressive approach to web design are required for durability. Creating semantic markup – markup that describes but not specifies – is important because it allows the site to be updated quickly by any designer or developer. Most designers and developers don’t stay on a web project or even the same company for the life span of it, so by using proper semantic markup you can leave behind a good foundation for others to modify or build on without them having to know everything about the code structure.

Progressive enhancement and responsive design also play a huge part in durability. When you keep in mind that people will view the site differently in whatever browser they prefer and that it’s okay for the site’s design to render a little differently, or adjust to that browser, then your site can stand strong for a long time. If you design a site to look best in one particular browser, you not only isolate users, you also hurt its life span. When a new browser comes out that has better user adoption then the one you designed for, you will lose users, or you will have to completely redesign and rewrite for that new browser. Don’t waste time chasing browsers, flexibility in web design builds durability.

Developing “Utilitas”

develop function through usability - uxmagazine.com

Aw, usability. Over hundreds of years of building things we have come to understand that you can have the best invention ever, but if you can’t use it, it doesn’t matter. An architect has to make sure that all the doors open the right direction, that all the light switches have to be close enough to doors so people can reach them, that all doorknobs and elevator buttons must be placed so that all user can access them. Same goes for web design — even though some will argue against usability. A successful web site must be functioning and usable: the navigation needs to be clear, buttons need to have hover states, and all elements need to be accessible to all users.

Proper function and usability are probably the hardest things to develop in a website. So much of it depends on preference and the skill level of your users. Standards and conventions solve most usability problems. Just imagine if buildings didn’t have standards and conventions, if a particular architect put power outlets in the ceiling because he/she liked the way it felt or if he/she decided to go super minimalist and not use outlets at all. Standards are proven concepts, they represent years of bad functionality corrected. As designers we need to understand that the first priority of the site is to be functional to the user, to work in a comfortable, familiar fashion so that the user can accomplish their goals.

Create “Venustatis”

Example of beautiful web design - Vimeo.com

Websites should be easy on the eyes, they should appeal to people and people should be drawn to use them. A great web design should be able to spark some kind of thought or emotion simply by the color scheme, unity or composition alone. Design is a powerful tool and when done correctly can accomplish many things that function and durability can’t. Design has the unique ability to fill something in all of us, whether is be print ads or architecture.

I drive by a bunch of buildings everyday to work but there is one newly constructed building that for some reason just looks way better than all the other building around it. I have often tried to figure out why it appeals to me so much but I have never been able to quite pin point its appeal. One day on the way home from work I just had to stop and see what the inside looked like and it was just as beautiful inside as it was outside. While inside I discovered a new restaurant that I hadn’t been to. Since then, I have frequented the restaurant. I know is sounds cheesy, but the design of the building is what allowed me to discover a great new restaurant.

Web design is no different than the design of that building. A well designed and beautiful web site will attract people for no other reason and when they stop to enjoy the design they will be able to discover what is “inside”. Honestly, that is why I keep trying to use Spotify even though most of my music searches come up empty. I know I can find songs easier on GrooveShark, but Spotify is so much prettier to me so I keep coming back.

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 12

Comments are closed.
  1. I have always made this comparison myself and whole heatedly agree with what you have said here. Essentially a building is ultimately the same as a webpage. From the windows, to the doors, to the stairs, carpets, lighting, etc.
    To draw the lines here, windows are very much like images, their placement and size directly relate to the visitor and how we want them to think/feel. Doors, much like links lead to different rooms, their placement on the page/room can mean everything depending upon the other rooms purposes or needs. The space and how its filled with content (furniture) needs to facilitate movement, in a website its eye, while movement in a building its the physical flow, each require an efficient layout that is balanced. I’ll stop there.
    Great article, thanks!

  2. Infrastructure in the 21st century, particularly in the Western world, seems so driven by instant gratification, seeing the end product within a few years or a few months of project announcement. Buildings aren’t built with the use of future generations in mind. It’s built for the rewards of today.
    Building sites for clients is often pushed along with a similar drive: clients often want the flashy design, and they want it for immediate use. It can be challenging to balance creating a durable site within a nearly impossible production timeline.

  3. I certainly agree with the architectural comparisons and allusions in general.
    However the reality is that we web designers are on a vastly accelerated timeline.
    The Vatican still rocks from a durability and beauty standpoint- what about some of those slick flash sites from 5 years’ back? Not doing so well on handhelds really..

    As web designers we should certainly adopt the principles you have laid out, but in another 5 years or so, what is our World going to look like then? And what sorts of new coding methods will be in vogue that haven’t yet been imagined?

    I really appreciated your article- playing devil’s advocate here, rather than old curmudgeon..

  4. Very nice article, I agree with you on your point that web design can be inspired from the field of architecture…

    thanks for such a great article.

  5. Web Development is very nice one to expose our business to the customers or to write any articles about any product or service. And as you said interacting with the visitors is very important work we need to do.

  6. @AllyLennon – You are right, the future of web design is difficult to foresee in all details. In one of our posts we’ve tried to look into the future too (http://www.htmlcut.com/blog/what-is-the-best-psd-to-html-conversion-tool.html, Section 6 – sorry for self-promotion). And we understood that even principles themselves (e.g., how to estimate durability and functionality) may be different in 5 or over years. In fact, the websites from 1995 or so are still durable because you can browse and use them. Of course, some of them look like a museum piece but they still work – educate, sell, inform. BTW, some of them are extremely responsive and adaptive and look almost identically everywhere – just because they are developed in that so-called academic style and without the frills.

  7. It’s exactly what I teach to my students. Principles instead of patterns. Patterns are rigid, principles are flexible.
    Following principles you’re going toward new patterns proper to this particular work. If you follow only the patterns, you’re going nowhere, you’re drying your work.
    By the way, I teach drawing, painting, callygraphy and design.

  8. For anyone who would like to explore this further I would recommend reading Marc and Laura Sewell’s book “The Software Architect’s Profession.”

    I agree with your general premise. I would add that architecture is not simply an “art form” like painting, sculpture or music, it is also an engineering discipline. Systems design, be it for the web or any other target space, is or should be – in my opinion – a blend of both, and thus the analogy to architecture is very appropriate – but only if the engineering aspects are also incorporated. Looking at only the engineering side and ignoring the art is a mistake. Looking at the art and ignoring the engineering is also a mistake.

    In some ways I think your article only scratches the surface and seems focused on design of the “skin” rather than a deep design of the whole system. In the analogy dealing only with the surface of the system is similar to calling an interior designer an architect.

    I like what you say about ‘firmatis’ and I see things like separation of functions and layers leading to greater durability of the underlying system.

    I would argue that ‘utilitas’ has more to do with appropriately addressing the general function of what role the web site is designed to have (blog, web store, social network, etc.) than a simple focus on surface issues. Does the right structure and form exist for the purpose of the site. A house is not a church is not a manufacturing plant.

    I would also argue that ‘venustatis’ is much more than ‘beauty.’ Venustatis is about ‘delight.’ It’s about finding things to get a job done when and where you need it. In a building, it can be about light effects and play on texture, but it can also be about a passway that eases flow when its needed or having a closet in the right area. In a user interface it can be about a navigation tool or link to get a job done in a direct and simple way when you need it.

    Small complaints for a good article.

  9. @Egiova – Principles are important, but don’t under-estimate patterns. I would suggest reading a little of and about Christopher Alexander – an Emeritus Professor of Architecture at the University of California, Berkeley. (Suggest you Google his name.)

    He has had great influence in patterns in both architecture and computer science.

    But this speaks to my point about architecture being a blend of art and engineering. I can’t say how his work, or principles of architecture, would apply to painting or the other fine arts.

  10. Very instructive comparison. I like to analyse the interior design too by the use of textures and composition. Outstanding article.

  11. Of course then we must consider Kant’s Critique of Judgment and what “beautiful” means in a world with the popularity of virtual Walmart, e.g. Facebook, or YouTube’s interface designed to appeal to your average Fox News viewer.

    Maybe also consider the utility flaws in some of our great architecture. Frank Lloyd Wright and Rem Koolhaas come immediately to mind…