In many ways, designing a user interface isn’t all that different from designing a building. Both involve guiding people through spaces, where form, function and experience intersect. Architects and designers share the same goal: to create environments that work, that invite and that orient us. Our architect-turned-designer Cam shares his thoughts on the parallels between these two design worlds.
Structure and Hierarchy
The immediate comparison between the two worlds is the structure that underpins them – the elements that hold the space together.
A hero on the homepage of a website could be compared to the main façade of a building. They are your first impressions of a space and define much of their perceived identity. Menus can be compared to corridors and staircases, forming connections between separate spaces. Buttons and CTAs are the more immediate threshold between those spaces, much like a door or opening.
The structural comparison exists at an earlier stage of development too. A site map serves a similar purpose as a spatial diagram or a floor plan in mapping out and arranging the different spaces and functions. Both are often set on grids to create a sense of order and rhythm between elements.
Many of the grid systems used in design today have their roots in the Swiss Style of modernist graphic design. Similar attitudes were applied to architecture in that period too, with a preference made for minimalism over ornamentation. Ludwig Mies van der Roher and Lilly Reich’s Barcelona Pavilion is the perfect encapsulation of this in my opinion. An icon of modernist architecture, the pavilion is organised by a formulaic grid system that informs the placement of every single element.
Space and Flow
The user is at the centre of both architectural and digital design. Where will someone go when they enter a space for the first time? Where do we want them to go?
In some cases, priority is given to the legibility of a space rather than its experiential value. In a hospital for example, the layout needs to be rational and well sign-posted: orientation and ease of navigation is the priority. The same could be said about more functional websites, where the priority is getting the user to their destination in as simple a fashion as possible.
On the other hand, both realities can use their environment to tell a story and create a strong experience for the user. The most apparent example I’ve encountered of this in my personal life is visiting the Jewish Museum in Berlin a few years ago. Architect Daniel Libeskind doesn’t want you feel comfortable in this space, reflecting the challenging nature of Jewish-German history. Angles are harsh, floors are slanted and corridors are winding. The space is an extension of the art installations and harrowing exhibits that occupy it.
Similarly, Poet David Whyte’s website creates a digital experience that further immerses you in his work. Scrolling and reading the poem takes you through a fragmented landscape that reflects the poem itself. Moving your cursor deepens the colours of the illustrations, increasing that connection with the work. The landscape is marked with individual scenes that upon clicking present you with new vistas for you to take in.
Materiality and Light
The user experience can be shaped by more than just layout. Materiality is a concept that stands out from my time studying architecture at university. It explores how chosen materials have an impact on more than just structure, also having aesthetic, tactile and environmental considerations.
To continue the exploration of the Jewish Museum in Berlin, its use of raw concrete creates a cold and harsh environment that connects the user to the subject matter. Alvar Aalto’s Villa Mairea, on the other hand, attempts to blur the line between the internal and outside spaces with a strong and deliberate use of timber elements. The timber columns used throughout the building mimic the birch trees that surround it.
The digital counterpart to this can be found in colour palettes, where colder tones of blue and grey can emulate materials like glass and concrete, while oranges and greens can create the warmth of natural materials like timber and bamboo. This consideration continues into the treatment of UI elements like the radius of a corner. A round corner feels softer and friendlier, which can help offset the effect of colder colours.
Just as architects use materials to suggest quality or emotion, designers can create tactile atmospheres within digital environments.
When you start to think of a website or an app as a kind of space, a place people enter, explore and inhabit, the line between UI and architecture starts to blur.
Both are acts of spatial storytelling. Each relies on structure to give clarity, flow to give direction and materiality to give character.
In that sense, digital designers are architects of virtual worlds. The tools may differ but the principle remains the same: thoughtful design shapes how people feel in a space, not just how they move through it.