How does an application UI design compare to architecture?

One can fairly compare the process of designing an application’s user interface either for PC or mobile devices to the architecture of a building. In this article, I will try to make simple comparisons between the two professions. My goal will be to match the different steps of an application UI design with those of a more familiar and a much older domain; Architecture.

What do we need to design and build?

Each building has a role and a goal in a cityscape. Choosing to design and build a new commercial or residential infrastructure is usually meant to fulfill a need. The initial brief that is focused on the goal of the project can put the Architect in a specific thinking framework. Form that initial need (or goal) the Architect can immediately understand the type of solutions he/she must bring to the design and the different challenges to overcome. Equally, an application project in the mind of a client or project owner should have a clear goal. The goal can be set by answering a simple question: what is the place and role of this new app in the world of similar software? The new project`s “raison d’être” should be defined by its goal. Like the Architect, the UI designer can immediately shift his/her reasoning process to a specific direction; As the Architect knows now if the project will be a high rise, a residential bloc or a family house, among other things, the designer should also understand, if for instance the application will be for business or entertainment, for the general public or a group of specific professionals. The design reasoning can therefore begin…

Where this new application will be installed?

The application, like a high rise, a residential bloc or a house, it is usually built in an environment that will certainly have its technical specifications. The landscape and environment present to the Architect, advantages as well as limitations when it comes to make design choices and compromises. For example, designing an infrastructure to fit in a crowded downtown is a different thinking and technical process from designing it for a newly developed or empty area of the city. In the same way, conceiving the UI of an application to run on a desktop PC or on a mobile device require two different design approaches. The technical specifications can be many, but for the UI design process, we need to know what type of graphic ecosystem the device will have. The device’s graphic specifications will most of the time dictate the graphic environment for the application. On the other hand, and unlike Architecture, one can imagine an application that is flexible enough to live in multiple graphic and technological environments. However, and despite its flexibility, the application need to be thought for a primary device type.

Who will be using the infrastructure; the application?

Understanding the typical users’ profile of an application is one major factor that influence its usability and user interface design. Users interact with the application based on their skills, habits, cultural references and technological background. Moreover, the user might be using the application in a typical space and under certain conditions. Many other factors come into play and could influence the user`s habits and reflexes. For that, a designer needs to establish the “typical portraits” of the application users the same way an architect needs to have in mind what type of occupants will inhabit and use the conceived infrastructure. Among other factors, the study of the users’ profiles can influence the division and management of the spaces, the structures’ shapes, the type of accesses etc. This study can also help, later in the process, setting a tone to the look and feel of the project.

The initial structure’s sketches

Keeping the type of application and the users’ profile in mind, and with a list of established features, the designer can start sketching the initial interfaces. The sketches are rough but communicative, just like an architecture hand drawn layout; they show the division of spaces and the visual hierarchy of features. Sketching the user interfaces allow for fast and direct discussions between the designer and the client or project owner. An architecture drawing of the infrastructure’s layout gives a fast and clear preview of the best ways to efficiently divide the global space, establish easy and comfortable accesses to the features as well as move around the rooms/areas. It can also show to the client that the global project goal is understood and well thought. Thus the quick sketches of the application`s UI help the designer as well as the project owner, preview the layout, make crucial decisions and bring the important modifications early on in the design process, with minimum time and energy...

Creating the wireframes of the layout

The wireframes are cleaner versions of the hand drawn and revised sketches. Also they are more technical. Wireframes help previewing the layout and usability of the application in a way that is close enough to the final result. They primarily show the division of spaces and the placement of features but with more precision and refinement. They are usually produced on a computer. Architects create wireframes to technically represent the building’s structure using the layouts they have sketched. By first showing the wireframes to their clients instead of realistic 3D renderings, they help them visualize a precise version of the structure’s elements while avoiding distracting them with colors or finish styles. Yet wireframes, just like hand drawn sketches, allow for fast revisions, alterations and improvements. Finally, in this design stage, just like the Architect, the designer can help the client or project owner visualize and approve the crucial elements of the app design; its technical layout and usability.

Designing the color mock-ups

The final stage of the UI design process is creating based on the technical wireframes, a realistic rendering of the application look and feel. We can call this process skinning the wireframes or dressing them… Unlike popular belief, the look and feel choices in a design process should not only be based on aesthetics preferences or a specific design trend. It is a process where the choice of the colors scheme, the fonts, the contrasts and visual details, are also appropriate to the type of application and its users’ profile. The finished mock-ups are just like the realistic 3D renderings of an Architecture project. They preview in the most accurate and true to life way, how the whole infrastructure will look like when built. Sometimes more than one look and feel is suggested. The client or project owner can now choose one of the renderings with the help and advises of the designer. The choice should also be done with the users’ profiles in mind…

Designing the UI of an application has many similarities with Architecture. It is a process where the project interface and structure should be seriously thought and analyzed when represented visually.

However, one major and important practice to favor when designing or reviewing an application UI is to avoid personal tastes.

UI design has certainly an artistic flavor in it, the same applies to Architecture. However, these two domains produce practical and usable products. For that, the choices made for the look and feel of an application should be driven more by a rational process with the end user in mind rather than only aesthetics.

At the end of the day, it is only the users of the application (or the building) that need to feel at home.