Learn the basics of UI design through movies

Films, as an art form, were widespread in our society long before people began to study visual design or simply design as a discipline. The first film was released in 1888 under the title Roundhay Garden Scene. It was a short silent film (2 seconds) recorded by the French inventor Louis Leprinse.

Since then, the world has experienced many revolutions, wars, inventions and pandemics. Each of these events had a particular impact on the film industry in one way or another, making it what we know it today.

With the development of visual communication comes visual design. Since the word “design” actually refers to problem solving and not just creating attractive artifacts, each problem solving methodology has a set of fundamental laws / principles / theories / formulas on the basis of which this method is applied. It s the same with visual design.

During the decades of the development of cinema as a commercial industry, as well as studying art in colleges, people began to buy tickets to shows through digital interfaces on their devices. These devices needed to be simplified to use and learn, which was a problem in itself. To solve this problem, a new design discipline has emerged, namely user interface design.

Although this is not exactly the reason that led to the birth of a completely new field of design. But this is one of the many ways cinema and UI design can be linked. Let s jump straight to the basics of UI design using our favorite movies as an example.

Balance

This is a common thing that can be found in any stable design, unless deliberately violated it.

Balance can be understood as the distribution of the visual weight of objects, colors, textures, and space. If there is a lot of content on the screen, it should be balanced to make the design look stable.

Symmetry Is one way to achieve balance in visual design. Nature loves symmetry, which is why our eyes do too. Symmetrically balanced elements help reduce image noise and make it look familiar.

Filmmakers have long used symmetry as a powerful tool for creating visually stable footage. But balance can be achieved in asymmetrical images as well with colors, objects, space and texture.

To make the interface balanced, it is necessary to place elements on the canvas according to their weight, in order to visually stabilize all objects on the screen.

Accent (emphasis)

The accent is used in most areas of design, including architecture, landscaping and fashion design. In addition, it is actively used in cinematography. Filmmakers use all sorts of techniques to highlight the object that the audience should be looking at.

Emphasis is a strategy aimed at drawing the viewer s attention to a specific design element. This can be a content area, an image, a link, a button, etc.

In cinema, focus, contrast, and so on are used to emphasize an element. This is done in order to tell a part of the story related to the selected object.

UI design also has storytelling. When we want to bring an element into focus, we select it using one of several methods.

Hierarchy

Each person understands the meaning of the film in his own way. Our conclusions about the film depend on which films we have watched for a long time, and how they influenced our point of view. The director does not control this, but by understanding simple patterns of behavior, he can control where we will look from one point to another.

Hierarchy is the control of visual information through its location or presentation to highlight the main thing. It affects the order in which the human eye perceives what it sees.

In each film, filmmakers use some form of hierarchical scheme to move the audience s gaze from one point to another. This is usually done to tell the story in the correct order.

When users interact through screens, it s important to direct their attention in the right order. In good design, the element that comes first must be linked to the next element, and any subsequent element must be linked to its predecessor.

Most apps and sites use this principle to place items in the correct order. The parent element is usually placed either on top of the child or to the left of it.

Reiteration

When it comes to looking for patterns in unknown objects, people tend to stick to rhythms. Rhythms in the image, sound, video are formed using repetitions in the arrangement of elements on the screen.

The repetition principle simply means reusing the same or similar elements in your design. Repetition of certain design elements will bring a sense of unity, consistency and coherence.

This principle is as important in cinema as it is in any other area of ​​design. Film directors use repetition of elements to shape visual rhythm. A pattern is simply a repetition of several design elements that work in concert with each other.

A design savvy can easily see how beautifully Christopher Nolan manages to connect storytelling with visual rhythm. While Wes Anderson puts more emphasis on rhythm, even an unaware audience of these principles can easily see them.

Likewise, repetition in interfaces creates a visual rhythm that helps the user find patterns, thereby forcing the user to stay on the platform, i.e. interact with her more actively. Lists, menus, messages, and so on are examples of sections where repetition is obvious.

Proximity

When we look at history, it is important to understand what it is in order to determine its meaning. Intimacy plays a vital role in cinema when something needs to be separated from everything else in order to make it the centerpiece of the moment.

The principle of proximity is the process of ensuring that related design elements are placed together. Close proximity indicates that the elements are related to each other and become one visual unit that helps organize or structure the layout.

In cinema, this can be done with colors, focusing techniques, and object placement. Filmmakers have a different dimension as they are assisted by the Z axis.

However, despite the development of 3D in interfaces, most of them use 2D layouts, so they can easily work on any screen. Thus, space, styles, and shapes become important when forming proximity within objects in an interface.

Proportion

Typically, a canvas can have many elements that take up any part of the screen. But you need to make sure the amount of space they are currently occupying on the canvas matters a lot in terms of history, it s a good design!

Proportion is the ratio of two or more elements in a composition and how they relate to each other in size, color, quantity, degree, setting, etc.

If a particular item takes up more space than necessary, it directly affects the hierarchy and cannot convey the information needed. The character or object is given the space on the canvas that is currently needed for the story, as well as the elements of the user interface.

It would be awful if the support chat window took up the same width as the navigation bar, or if the Amazon logo took up the same space as the search bar. Proportion is directly related to hierarchy. They play their part in supporting each other along the storyline.

This is how we analyzed the principles of visual design using films as an example. The films mentioned in this article are some of my favorites, and I recommend you watch them if you haven t already. I try to notice these principles in any film I watch. I would recommend the following to you. When you re watching a movie or TV show and you like the visuals, pause the video and do a quick analysis of why it looks so good and if it has the above design principles. I think it s a little clearer now how all the design disciplines are interconnected.

Fun fact: all six principles exist in user interfaces and the movies mentioned, even if they don t talk about them directly. If you haven t noticed them, try again, it s fun.

If you are a movie fan or a designer like me, please share this article with your friends. Your likes motivate me to write more, and I would like to see your opinion in the comments ?

Write to the author in LinkedIn or Twitter…