Gestalt principles applied in Art Direction for User Experience and User Interface
In my first text about Art Direction, I expressed my vision about this subject, winch is UX/UI are attached, that is impossible to think about interfaces treating user interface apart user experience, fact that happens sometimes, according to the project, it´s necessary treat one of them more detailed in some point. The process will change according the team, if there are specialists focused in each subject, or are hybrid positions, or even, the figure of the art director.
In the another text, I also said: “Art Direction it´s about treat the digital product or interface as one thing in a major perspective but working in little parts separated, in specific topics as user experience and user interface”. What I wanted is to resume it in one phrase:
“When we talk about Art Direction, I refer to a visual system of reading visual elements.” Anne Freitas in UX can be aplyied without UI?
This phrase complement the topic of this text which is the use of Gestalt as visual system of reading elements. “The word Gestalt, German substantive, used to refer configuration or shape has been used since the beginning of the century to refer for a set of scientific principles extract mostly of sensory perception´s experiments.”
Extract of the book Art and Perception of Rudolf Arheim
The Gestalt system was largely used in art language, but in Design reached its peak through designers and architects formed by Bauhaus in the 20´s that spread a culture of minimalist aesthetic, from this period emerged concepts like: “form follows function”, perfectly applied to information architecture and “less is more”, also perfectly applied but to user interface.
“I wanna make a parallel between the Gestalt system of identity and Art Direction in digital interfaces, applying gestalt principles in digital medias.”
I prefer this line of style to construct visual identities, I try to adapt it in a personal language of style in my interface projects, that can be noted in the use of white spaces, few colors, attention at the layout of graphic elements, this type of style is very useful in digital medias because in my opinion it highlights the points of interaction facilitating the using and experience, reducing ambiguity, etc.
In digital interface, it is impossible to think in start a project without based your layout in a type of grid, usually, I use a standard: a conteiner with 960px and 12 colums. This format is very used in terms of responsiveness projects, if you are thinking in use a different one, talk first with the responsible for producing the front-end to know the technical restrictions.
Gestalt Experiments used what they called “structural skeleton”, with the same configuration of a grid, it has the same function: propose different configurations between objects and the canvas. When we observed this relation, we talk in gestalt about forces but I prefer to refer it as points witch naturally our look, out action, our interactions are conducted, this fact is very disseminated with hit maps in user experience, but we don´t think in a unique way: interface maximizing experience because we don´t study art direction when we talk about digital interfaces.
“When we put the elements in the grid we are dealing with ‘tensions’ of look and experience. The visual experience is dynamic (…) what one person or animal see it´s just the arrangement of objects, color, shapes, movements and sizes. It is, maybe, before everything, an interaction of direct tensions. This tensions aren´t something that we see as static images.
They are independently of size, configuration, localization or color. Therefore they have magnitude and direction it can describe them as “psychological ´forces´”. Extract of the book Art and Perception of Rudolf Arheim
Look below the wireframe applied to the grid that I mentioned:
“Ate the center of all forces they balance each other and the central position conduct and is perceived as neutral, implying a psychological sense of rest.” This balance of forces implies at the layout a sense of stability, also when we talk about usability it makes the user focus the attention in just one center element, also hierarchy the elements making this one be the most important.
When you look at the layout above you see in the second scroll the boxes also have a balance between the forces product of careful distribution of elements in the grid, using its position in light asymmetric way. This layout prioritizes the reading, and a sense of elegance at the use of white spaces and colors.
In the interface, I used the colors of the guideline that I created, it have just two colors but I use a range of derivative colors, exploring the monochrome effect between tones and use the more saturate colors to emphasize the important points at the layout.
We can explore more further if you think in Design Thinking terms, we take the risk to seems much more complex than the subject really are, let´s think in just one aspect of the Design Thinking process: the largely know Double Diamond. When we use the double diamond as method, and I take the risk to say as a cognitive process of though, we are ‘diverging and converging’.
Gestalt as psychology says: “If someone wants to understand art, we have to face it as a whole. And what happens? The color and the dynamic of shapes makes us to feel how? Before we see each element, the composition makes us affirm something we can despise.”
When we talk about diverge and converge, I make the arrangement: in the diverging process begin in a point that is the main goal, we can take that as the whole, and the converging process are the parts, each step we take to get us to the main goal.
Therefore we can relate the diverging/converging as the whole for the part, Design Thinking process and Art Direction Process of though, using the Gestalt principles. Explained more detailed the Art Direction: the ux and ui as parts and the interface/product digital as the whole.
© 2017- 2018 Anne Freitas All Rights Reserved
