A2. Identity Design using Gestalt Theory & Principles

Reading response

Kurt Koffka, Principles of Gestalt Psychology
Eleana Gkogka,Gestalt Principles in UI Design
David Airey, Logo Design Love

I feel a bit lost and understand a little of the context after reading “Principles of Gestalt Psychology” by Kurt Koffka and I think Professor Ansari’s purpose of setting this article as a mandatory one is to let us understand the psychology behind the Gestalt effect on a deeper level. It says that science becomes valuable by “the generality and power of its theories.” I also agree with the conclusion that “science should indicate our true position in our world and give us respect and reverence for the things animate and inanimate around us.” To study science and to be more knowledgeable is to gradually learn our own limitations and inadequacy as a creature in this world and to develop a sense of awareness and respect as we understand how things in this world is ruled. The integration of quantity, order, and meaning is a good guidance for me which gives me inspiration for the aspects I should pay attention to for my future design. I have heard that quantitative changes can cause qualitative change but the claim that “the quantitative is but a particularly accurate way of representing quality” seems interesting to me. The integration function of Gestalt theory contributes to reverence for things animate and inanimate and the deepest root of Gestalt theory is the intellectual climate in which forms different ideas (10). Quantity can be qualitative if we see a group of connected facts as a whole instead of each separate individual. Gestalt theory is about figuring out each part’s function to the whole, their relative independence, and their positions within different realms, regarding the order and meaning. However, I still don’t understand why for a Gestalt, quantity and quality are the same.

After a hard time reading about Gestalt theory, I enjoyed reading the chapter of “Elements of Iconic Design,” which is more visual and understandable. After the class last Wednesday, I started sketching as many raw ideas as possible before reading any related icon design principles to prevent my creativity from being constrained. This chapter is like a guidance for me to evaluate and eliminate my crude ideas and choose a few to elaborate on. A few key points that I remember are 1. Simplicity aids memorability. I think this rule is applicable in most cases with exception — for example, I wouldn’t call starbucks’ icon simple and I’m sure people can’t draw it in seconds but it’s recognizable 2. Make the logo relevant to the client, industry to signal an appropriate message. Since the assignment for these two weeks is to design our personal brand, as a designer I would like to convey a professional and creative image and this icon is a chance for me to show my style of design. I also want my brand to be feminine, so I will avoid using thick and heavy text style. I want to integrate both my first and last name into my personal brand, which is Ariel Li and the “SinkIt” design reminds me to separate the words to avoid confusion. 3. Shape and form are more important than color. Professor Ansari also gave us the tip that always design in black and white first then worry about the color afterwards. 4. Focus on one thing to help my design stand out. I appreciate the last sentence at the end of this article and I will interpret it in my own words — when creating, I should not be concerned about whether it’ll be successful or not, I should not judge my ideas but instead focus on the present moment of visualizing our ideas. If the logo doesn’t work then I will learn so much more and faster since I make the mistakes on my own.

Eleana Gkogka’s article about Gestalt principles in the context of UI design is more practical and comprehensive for me than Kurt Koffka’s. 1. Proximity — Related items should stay close to each other for layout. 2. Common Region 3. Similarly — using anomaly to create contrast 4. Closure for icons 5. Symmetry gives us feelings of solidity and order, and should be accompanied by a healthy amount of asymmetry (a little twist in the layout or color). 6. Continuation — our mind likes a smooth path 7. Common fate — elements moving towards the same direction, at the same time in the same speed. I believe that with a good use of Gestalt principles, the visual communication will be fun with various layouts instead of dull and lengthy, and it can let the content be communicated in a more effective way.

Identity Design

I really enjoy the assignment this week, which is to design our own brand as a designer.

My preferred full name is Ariel Li and I’d like play around using these words and some relevant shapes. When I picked the name Ariel, I had my hair dyed red and Ariel is always my favorite Disney princess due to her curiosity to discover, passion for adventure, bravery, and love for the nature. I feel related to her personally, even the stubbornness. Even if later my hair turned from red to orange, then grey to pink, I still embrace my name and identity as Ariel.

All the sketches for the first round. At first I started sketching out all the ideas in my head on my iPad using the app Procreate.

Later I asked a few friends’ opinions and they pointed out a few they like. (Thank you for your time and patience with me & I value you guys’ opinions!) Thanks list — Stacey, Chloe, Rani, Roxie, Sharon, Cynthia, Catherin, Irwin, Anna, Jesse, Liad, Xuan, Paula, Ran, Lauren Busser. Here are some examples that get the attention.

A few have demonstrated their appreciation of the design using the fish tail or the whale shape but personally I feel like the fish tail reminds me of the fishy smell and there’s no need to emphasize the fish part so I decide to pass those ideas.

Later I mainly focused on iterating the idea of the circle on with the mermaid girl and the clamshell one.

iteration of the circle shape mermaid girl icon design, trying different hairstyle ( could be made as a gif with changing hairstyle too), different positions of the name and waves (or whether if there should be any). The final competitors are number 1 and 2 — some people enjoy the symmetrical design while others prefer the unconventional imbalance, which is my original first draft of the icon. I use the waves on the left side to work in concert with the “Li” on the right side. I also wonder if this design is too complex as an icon which makes it harder to be memorized, and it can be confused or remind others of Starbuck’s icon.

Iterations of the clamshell idea. I tried different font style and shape of the shell. Most people prefer pink number 4 on the left side since they feel like the fill of black color gives a dimension to the shell. Thing I need to consider are 1. the shape of the upper shell ( #3 is chubbier than #4) should the outline shape of the shell be straight or curvy? If curvy, inward or outward? 2. the shape of the lower shell (round or wavy) 3. circle or oval to confine ‘Li’ in the middle (I will choose circle to make it look like a pearl in the shell 4. the font use of Ariel and Li, and the thickness of the word (I think ‘Li’ can be designed as the gloss of the shell but not sure if it’ll still be recognizable this way) ← always give it a try!

(thinner name) Here is the 1st draft of the shell logo using Illustrator. I definitely need to be better at using the pen tool! Sometimes I made a sharp turn while it’s supposed to be a smooth curve. I also notice that the thickness of the word need to be adjusted when I change the logo to different sizes — when it’s 1 inch size, some gaps in ‘e’ and ‘l’ disappear and the pearl overlaps with ‘Li.’ I also need to learn the trick of how to make the shell symmetrical (at least the upper one)

In the process of figuring out how to let the font size change with the shell shape together and run to some errors ( a sharp thorn comes out under the letter ‘r’) I later made Ariel thicker and later replace the font of ‘Li’ — final version is the big one at the right bottom.

I later combined some ideas of the typeface I like with one shell on the side and I really like it! I think the shape of the shell needs to be drawn again and the position of the pearl, whether there should be strokes or not are also things that need to be considered.

(square end version) I made a section option of the logo, combining ‘A’ with ‘Li’ together like a little cute face with a pointy witch hat. (though this idea has only gained one vote, I still think it’s cute and simple)

round end finish

Overall I really enjoy designing for myself and I am happy and grateful to work on something I have passion for and things I am willing to dedicate my time and energy to. ❤