Design Principles | Exercises


24/8/2021 - 21/9/2021 / Week 1-4
Shofwa Alyadiena / 0350019
Design Principles / Bachelor of Design (Hons) in Creative Media
Exercises

 LECTURES 

 Week 1 

Our first week's lecture started with Ms. Jinchi introducing herself. She gave us a briefing on this module and what exercises are planned for the coming weeks. Some basic rules were talked about, including plagiarism. The meetings are held in Microsoft Teams, so she guided us on how to access the files she will upload for our classes. The folders currently consist of two pre-recorded lectures, the MIB for Design Principles, and two presentations that were used in the pre-recorded lectures.


The first pre-recorded lecture was 'Introduction to Elements and Principles of Design'. In it is explained how there are seven elements in design; point, line, shape, form, texture, space, and color. There are also eleven principles; contrast, balance, emphasis, rules of third, repetition or pattern, movement, hierarchy, alignment, harmony, unity, and proportion. After watching the lecture, I understand that both the elements and principles of design are intertwined. Personally, my favorite element is color- and I believe it's rightfully one of the longer topics.


Moving on, the next lecture is about 'Contrast and Gestalt Theory'. From watching the video I can conclude that contrast in design is slightly different than contrast in general. Using the Merriam-Webster dictionary, contrast is the difference or degree of difference between things having similar or comparable natures. Contrast as a principle of design is the juxtaposition of strongly dissimilar elements, which can be represented in difference of color or shape, mostly so the creator can control what the audience will look at first. Like the image below, our eyes are attracted to the object with colors that differs from the background.



Fig. 1.1 Contrast

Gestalt theory is more complex to me. From what I understand, it's based on how our eyes perceive visual elements. Our eyes can automatically see outlines of a group of simple shapes that are near but not touching each other. One of the most common example is this image.


Fig. 1.2 Gestalt theory

From figure 1.2, you can see either two heads or one goblet- or both. Seeing two images from one design is an example for principle of figure-ground in the Gestalt theory.


 Week 2 

Since there was no classes conducted during a national holiday, we were asked to watch two more pre-recorded lectures. This time, one explains about balance and emphasis, while the other explains about repetition and movement.


I learn from Ms. Jinchi that 'balance' refers to the distribution of visual weight in a work of design. There are two kinds of balance, symmetrical and asymmetrical. A symmetrical balance would be if you imagine or add a line in the middle of the design, both the left and right side would have the same 'weight'. An asymmetrical balance is when both sides do not have equal weight.



Figure 1.3 is an example for symmetrical balance. It's easy to understand as symmetrical because both sides are identical.



Figure 1.4 is an example of asymmetrical balance that promotes movement of the eye. After that, Ms. Jinchi explained a little about composition. I've already covered this on my Digital Photography and Imaging blog, but to summarize, the Golden Ratio is a perfect guide for a balanced design. As Ms. Jinchi wrote on her presentation, the Golden Ratio can be used to bring harmony, balance, and structure to an artwork. 

The other composition guide most people would use is the 'Rule of Thirds', where you would place your work on either one-third from the left or right of the canvas. Rule of thirds helps in creating more dynamic effects. 

Emphasis is then introduced in the presentation. Emphasis is a way to create dominance and focus in a design. There are lots of elements we can use as an emphasis; colors, lines, shapes, weight, and more. 

Next, I watched the lecture about repetition and movement. Repetition can be seen everywhere in our daily lives. This principle includes rhythm and pattern, all used to make a design seem exciting and active. Repetition can be boring sometimes, which is why having variety in the pattern can help avoid that. 


Movement is the next principle I learned. It can exist when a design makes objects look as if it's moving, or when there are lines and such that make our eyes follow the path an artwork wants us to. We can create the illusion of movement by using elements such as lines, shapes, or scaling. 


We're also introduced to the principle of hierarchy. Hierarchy is the choreography of content in a composition, is what Ms. Jinchi said. From what I understand, visual hierarchy helps in making the audience read the most important information before anything else. The main element we use for achieving this hierarchy is size. The bigger a piece of a design is, the higher it is on the list of what we look at first in an image.


Last principle mentioned in the lecture to us is alignment. Alignment is the placement of our design elements, in a way that aligns horizontally or vertically in a line to the rest of the design. Alignment achieves a sense of unity and stability. Naturally, that would mean alignment mostly surrounds elements such as lines, shapes or size.


 Week 3 

The first lecture I watched explained about Harmony and Unity. They are both similar, and from what I gathered, the difference is that harmony is what makes many pieces of an image look good together, and unity is what makes all those pieces into one meaning, one focal point, and one image. 


Right after, scale and proportion were explained. Scaling is used to emphasize the importance of a piece of design by enlarging them. Another use for scaling is entertainment, where sculptures of larger-than-real-life objects can be used to play around with. 


Proportion is similar to scaling as harmony is to unity, but with the right combination of proportions, a harmonious and unified design happens. Similar to scaling, proportions helps us see what the design tries to tell the audience clearly. The bigger a piece of design is, the more important it registers as to the viewers.


The fifth pre-recorded lecture shares us information of symbols, words, and images. Symbols like hieroglyphs have been used throughout history of mankind, and is one of the oldest ways of communicating. In our modern world, symbols are known as logos. As all of you know, logos are what tells us what brand we're buying from. A brand isn't complete without its logo. 


Symbols are represented in two categories, figurative and non-figurative representations. Figurative representations are branched into two; visual and graphic symbols. Graphic symbols branch into three more sub categories; that being pictorial, abstract, and arbitrary symbols. Respectively, these three are ordered by how similar their symbols are to what they represent. 


Pictorial symbols are the closest to real life symbols. Its meaning may not be certain, but the details are there and it's obvious what it is representing. 


Abstract symbols have less similarity to what they represent in real life. Common examples taken from the lecturer's presentation such as toilet signs, "caution" signs, or "wash your hands" sign. You can tell what these symbols mean without ever seeing it before, but they have very little detail.


Fig. 1.5 Abstract Symbols Examples
(By Ms. Jinchi's Lecture Presentation)

Last, Arbitrary symbols have little to no correlation between symbol and real life product. We have to learn what these symbols mean over time. Arbitrary symbols are what we mostly see everyday used as brand logos.


Word and image are next. Imagery is a vital part of design. Using images that are relevant to the words used is important to create visual hierarchy and balance. This involves typography, where the typefaces used are also relevant to how the entire sentence wants to be presented. 


Aside from the pre-recorded lectures, we had a meeting where Ms. Jinchi reviewed all our work for hours. During these hours we received a lot of feedback on our first week's designs.




 INSTRUCTIONS 



 Task 1-E1: Contrast and Gestalt Theory 

Our task for weeks 1 and 2 is to create two designs, one of contrast and one based on Gestalt theory. 

 Visual Research 

To find inspiration, I searched for 'Gestalt Theory' and 'Contrast'. 


Fig. 2.2 Wella logo Gestalt Visual Research 2


It was hard for me to distinguish the differences between each design principle, and all the references have resulted in no inspiration. I had troubles coming up with an idea that I thought would be meaningful, and as time kept passing I decided I should just go for it and worry about the rest later. 



 Exploration 

 A. Contrast 

Fig. 3.1 Contrast Sketches (5/9/2021)

At first I drew lines, then scribbles, and I kept going until I drew a nail. I was instantly reminded of a senior's work, which was based on Malaysia's national symbol (Malayan Tiger and Hibiscus flower). The concept of a delicate flower versus a physically balanced and strong object resulted in my first sketch, being five sharp nails aiming against an open and soft flower.

The first idea combined with the thought of my cats, I remembered about how cats are always treated nicely when they're adorable and clean. On the other hand, once they start scratching people's belongings they'd get kicked out or yelled at. Especially for black cats, who are believed to be a sign of bad luck. People don't treat them well at all, and some even go as far as to abuse these cats. 

After receiving feedback for my designs, I started working on finalizing them. I used three reference to draw the claws. I continued working on the chosen design for contrast.

Fig. 3.2 Claw Reference

Fig. 3.3 Cat Paw Reference 1

Fig. 3.4 Cat Paw Reference 2

I used these two images to get a general idea of how I want my design to be proportioned. Figure 3.3 is used as a reference for the softer and closed paw, while figure 3.2 and figure 3.4 is used as reference for the sharp claws.

Fig. 3.5 Combining Paws (13/9/2021)

Fig. 3.6 Sketching (13/0/9/2021)

Once I was satisfied with how it's placed, I started coloring them in. I realize the paw with claws out weren't as skinny as the previous reference, so I reverted to the older version of the claws and cleaned it up. I kept using the smaller paw however, as there was nothing wrong with it. 

Fig. 3.7 Second Final Draft (13/9/2021)

When I was informed that other colors were allowed, I couldn't resist giving a bit of red to emphasize the sharpened claws of the black cat's paws. To rid of the empty space under that, I added different sized lines.


 B. Gestalt 

Going with the topic of cats, I remember how many times they get called a loaf of bread, and one of their idle poses is called loafing. I thought I could try messing around with that idea by applying the principle of figure-ground and closure.

Fig. 4.1 Gestalt Sketches (5/9/2021)

I ended up going with a cat resting that creates an illusion of a slice of bread. Hopefully, everyone can see what I intended. The sketch on the right came to my mind as I was thinking of animals. Octopuses has many limbs and I thought it was absurd if suddenly they were able to morph their tentacles into human fingers, but I wanted to draw it anyway.

When Ms. Jinchi reviewed these two designs she first thought of the octopus as a spider. Although I love spiders, that was not the intention. The misunderstanding of what the design is tells me that It wasn't enough to go through with, and Ms. Jinchi agrees. Thankfully, that meant I get to proceed with my cat-bread design for gestalt.

Fig. 4.2 Cleaned Up Body Lineart (13/9/2021)

I traced the original sketch I had. I purposefully drew it with lesser lines to make the overall image look neater.

Fig. 4.3 Cat Head Editing (13/9/2021)

Some adjustments were needed to be done regarding the cat's head or face as I wasn't satisfied with how the original's perspective looked. I had to move to a lower layer to add in a sketch without ruining the actual picture.
Fig. 4.4 Gestalt Draft (13/9/2021)

With almost no changes to the original draft, I was able to clean up from the first draft fairly quickly.



 Exercise 1 Final Designs 

 A. JPEG 

Fig. 5.1 Final Contrast Design JPEG (14/9/2021)

The changes from the draft to final design for contrast is that i duplicated and mirrored the smaller paws to maintain balance and changed the heart to a little bit of red. I removed the circles and lines as it wasn't needed and was distracting, but I felt like adding a little bit of red was fitting since it looks like it's alert and diverting the attention towards the claws.

Fig. 5.2 Final Gestalt Design JPEG (14/9/2021)

The difference for gestalt isn't anything major. I attached the lines to make the image look neater and more curved, resulting in a closer to natural pose of a cat.


 B. PDF 

Fig. 5.3 Exercise One PDF (14/9/2021)

I converted both images to a PDF as my final submission for exercise 1.



 Task 1-E2: Balance, Emphasis, Repetition, and Movement 


The second exercise we're required to do is creating design from two out of the four: balance, emphasis, repetition, and movement. I decided to go with repetition and movement since I had an idea in mind for repetition, and I wanted to experiment more with movement as dynamics aren't what I'm used to doing for me regular drawing. 

 Visual Research 

I relied on google's image search and clicked on images that catches my eye while also making sure I linked the original image here.


For repetition, I saw this image and it inspired me to make one with a similar symbol placement and matching colors.


When I see this photography I could feel the movement, and while it seems to include repetition as well it really accentuates the movement feel overall.



 Exploration 

 A. Repetition 

I understand that repetition also needs variety, so I thought about how everything natural in life tend to be repetitive and individually unique, ranging from flowers to human faces.

I personally believe repetition and variety are most visible in a group of snowflakes. it seems repetitive as on each hand repeats the same pattern, but as the saying goes, 'there are no two snowflakes that are the same.' Going off of that idea, I searched for references of snowflakes so that I may make one that doesn't look awful.


After finding references, I worked on what snowflakes I wanted to make, using the 6-8 sided symmetry tool. I found that these five are the ones I liked best.

Fig. 7.3 Snowflake Bases (13/9/2021)

Once I finished with the snowflakes and creating the first final draft for it, I moved on to the second piece. As expected, I ran out of ideas; until I realized something similar to how I drew snowflakes could be used as well. Spiderwebs are what I was thinking of. 


Using the reference for my spiderweb piece, I managed to come up with these two designs.

Fig. 7.4 First draft (13/9/2021)

For the snowflakes, I tried to add repetition in the background and in the main design itself by alternating between 'dark blue background and white snowflakes' to 'white background and dark blue snowflakes'. I didn't do anything fancy with the spiderwebs and instead focused on the placement and how I wanted them to connect.

Fig. 7.5 Snowflakes on Big Canvas (14/9/2021)

After the briefing had been done, I redid the snowflakes and avoided alternating background patterns. I felt that it was too simple, so distorted the perspective.


Fig. 7.6 Warped Perspective (14/9/2021)

Distorting the perspective helped a little, but then it ended up focusing on the snowflakes with the exact same design, so instead of remaking new ones, I thought about combining this idea with the spiderwebs. 

          
 
Fig. 7.7 Exploring colors on Backgrounds (14/9/2021)

I believe adding the spiderwebs adds to the variety, and while definition-wise they have no correlation, they look alike on a flat surface if they had equal sizes. Also, I just really like how they look. 

Seeing the different backgrounds put together, I didn't like the gradiented one and had troubled deciding between the other three. However, the indecision quickly ended as I realized it made no sense for snowflakes to be colored anything other than light blue or white.


 B. Movement 



I didn't have to search long, and I notice that designs with "movement" as a main topic includes plenty of jarring and pure colored figures. All of which tend to have an elastic "feel" to it.

Fig. 8.3 Movement Sketches (13/9/2021)

Seeing the example given to us by Ms. Jinchi in her lecture, I was inspired to make one with a similar concept, which was the object moving closer to the viewers by playing with perspectives. Unfortunately, it's a lot simpler than preferred and have no story to it whatsoever other than a bouncing road.

Originally my idea for the second image was to have lines that were slowly distancing itself from the previous row of lines, but after seeing it, the image as a whole started to look like a racing track so I added stick figures as replacement for these runners, each one looking as if they are running faster and moving forward from the last.

When Ms. Jinchi pointed out that I should add more to the design to indicate that it is actually mine, I thought about what it is I could place in the design. I won't lie, my creativity hasn't been in top shape and I agree that it looks too simple to be something I can claim as originally mine. 


Fig. 8.4 Movement Upgrades (15/09/2021)

Seeing as I had drawn the first idea similar to that of a road, I added a red car. I thought that black, white, and red was an often used color combination, so I messed around with it and changed them to yellow and blue. I find myself liking the first color combination after comparing them. 

Going back to my original inspiration (figure 8.2), I experimented a little more and added a human figure instead of a car. It looked too plain as I didn't experiment with color, and thought that framing it would look better. However, I don't believe it helped at all.

I gave up on the idea of this being the only design, and thought instead about something else that moves often. Being someone who only wears skirts, I decided that would be a good start. 

Fig. 8.5 Second Dirty Sketching (Movement) (15/9/2021)

I started with a dirty sketch, one of which a person wearing a swirling dress. I wanted to have people focus on the dress and the curved lines the dress has, but in order to do so I had to clean up the sketch more.

Fig. 8.6 Cleaned Sketch (15/9/2021)

Once the sketch had been cleaned up I was able to visualize better where I wanted things to go. I wanted to keep a similar line to the first idea I had, and to make sure the legs and arms wouldn't be what's seen first, I colored it in with solid black.

Fig. 8.7 Line Art (15/9/2021)

After that was done, I colored the outside and inside of the dress with colors that contrast each other.

Fig 8.8 Colored (15/9/2021)

After seeing the colors and lines put together, I decided the next thing I should do was get the legs to follow the rest of the body in color and paint it black. 



 Exercise 2 Final Designs 

 A. JPEG 

Fig. 9.1 Repetition Final (15/9/2021)

The final design for Repetition has white snowflakes and grayish cobwebs. I think it's most fitting and I would personally have it as wallpaper for my room.

Fig. 9.2 Movement Final (16.9.2021)

After thinking for some time, I decided to reference the coloring style of figure 8.2 and added extra lines to what I aimed to look as if it's swirling. The different bright colors help as well.



 B. PDF 

Fig. 9.3 Exercise Two PDF (16/9/2021)

I had both final designs converted into a PDF.


 Task 1-E2: Harmony, Unity, Symbol, Word and Image 

Third exercise revolves around harmony, unity, symbol, word and image. Out of the four I decided to go with harmony and symbol, partly because I'm more familiar with the concept of creating symbols, and I wanted to try out color theory more through harmony.

 Visual Research 

To understand better visually about harmony and symbols, I searched aimlessly for examples and tried breaking down what makes a design harmonious, and how pre-existing symbols look.

Fig. 10.1 Harmony

After finding this image I immediately saw the words 'color harmony' displayed. I searched and found a guide that helped most with that concept.

Fig. 10.2 Color Harmony

Seeing this, I immediately started working on my harmony design while continuing to search symbols.

Fig. 10.3 Symbols for Branding

By finding examples packed into one image, I understand that to make a symbol it's a good idea to start with simplifying what we want to turn into a symbol first, and then add extra details if wanted.


 Exploration 

 A. Harmony 

At first, I looked around right in front me and realized that the tools I use on a daily basis was harmonious in the sense that they are always used together and have similar color schemes. I organized them on the floor to get a better look on the perspective. 

Fig. 11.1 Photo Reference (19/9/2021)

After a picture was taken, I moved on to sketching.

Fig. 11.2 First sketch (19/9/2021)

The sketch I drew is fairly simple. On top of the picture layer, I placed some basic shapes before adding a color palette.

Fig. 11.3 Adding base color palette (19/9/2021)

Seeing as the table was brownish, it made sense to me that the color palette should be monochromic brown. However, I noticed that in real life blue was involved quite a lot. Knowing that blue is the perfect contrast to brown, I added it in as a second monochromic palette. 

Fig. 11.4 Combining Two Color Schemes (20/9/2021)

After that was done, I started coloring them in. I like digital painting more than anything else, and I wanted to let myself be comfortable with the style I'll submit.

Fig. 11.5 First Harmony Draft (20/9/2021)

I tried adding a darker brown background to the image, but it didn't work out as expected and the entire design seems to be more visible with a lighter blue-brown combination. I then started to work on my second design for harmony.

After understanding some basics about color harmony, I came across a color palette that reminded me of original characters my friend and I made about eight years ago. 

Fig. 11.6 Color Palette



Fig. 11.7 Reference: Original Characters (Redesigned recently)

The reason why I was reminded of them by the color palette (figure 11.6) is because they were based off of nature's elements, of air and fire. The colors blue to red represents those two concepts. 

Fig. 11.8 First Sketch (20/9/2021)

The idea I had was one person facing towards the audience and the other facing the opposite while holding hands to tell the viewers that they have a relationship with one another, one which is platonic but still necessary for me to tell.

Fig. 11.9 Hand Holding Reference 

Fig. 11.10 Fixed Hands (20/9/2021)

In figure 11.8 I hadn't finalized the hands yet as I was struggling, so I used a reference to help with it. I filled in the entire thing with black so that I may be able to do more coloring a little easier by locking the layer. 

Fig. 11.11 Second Harmony Draft (20/9/2021)

It was hard to resist continuing the artwork since I was having a lot of fun, which resulted in minimal amounts of progress shots. However, what I will explain is that i used the color palette and changed the background to a light grayish-green so the main design will be a lot more visible. 

What I originally thought was harmonious is the fact that fire can be symbolized as the sun, and air can be clouds. Sun and clouds are what makes the nicest days for me, and personally brings me a lot of peace, represented by the calm expression. Too much of sun isn't great, but endless winds tend to drive me into sickness.

After receiving feedback from Ms. Jinchi, I worked on developing the first harmony design. She says there are some empty space I'm able to fill, so I edited the image I already have to reorder the elements around and figure out where I want things to be.

Fig. 11.12 Harmony Remake Sketch (27/9/2021)

Once the sketch was done, I filled in the shapes. I wanted to really stick to a monochromatic palette, so I kept the main focus a cool hue. But after adjusting and messing around with the colors, I realize it looks just as fine with the entire canvas being colored blue. So here are they, compiled together.


Fig. 11.13 Harmony Compiled (28/9/2021)



 B. Symbol 

My first idea for creating a symbol design is based off of the tools I've been using for sketching; pencils, pens, and a stylus. I attempted a pictorial symbol using references by taking pictures with my phone.

Fig. 12.1 Pen and Stylus Reference
Fig. 12.2 Pencil Reference

I haven't had a pencil for a while, so I had to search for a reference online.


Fig. 12.1 (Left to Right) Pencil, Pen, Stylus (20/9/2021)

Using the references, I created a simplified version of each tool. I added detail by erasing certain parts of the design. 

Fig. 12.3 First Symbol (20/9/2021)


Fig. 12.4 Second Symbol (20/9/2021)

I made two versions of this idea, one is tilting and the other straight up, both appearing as if it's writing on a paper. I brightened the color for the pen and pencil so that it looks as if there's one tool closer (Most used) and the others farther (least used). Something to symbolize the time as well.

Next, I wanted to make an abstract symbol. As usual, I take lots of inspirations from my cats. 

Fig. 12.5 Ptoto

Fig. 12.6 Steve

I've had Ptoto only recently, about a week or so, and Steve for almost three years. Using a little of gestalt's figure-ground principle, I created an abstract symbol to include both of them.

Fig. 12.7 Third Symbol Draft (20/9/2021)


I couldn't help myself, I love them so much. Seeing as Steve is the bigger cat, I made him the main element of the symbol, while keeping 'Ptoto' safe from dangers. 

After getting feedback, I moved the tools a little bit farther from each other so the smaller details can be seen. 

Fig. 12.8 Adjustment Idea (22/9/2021)

The adjustment idea in fig. 12.8 had already been done, and it came out like this. 

Fig. 12.9 Sketching Tools Symbol (22/9/2021)


 Exercise 3 Final Designs 

 A. JPEG 
Fig. 13.1 Final Harmony JPG (29/9/2021)

Fig. 13.2 Final Symbol JPG (29/9/2021)

There were no changes necessary for symbol. However, I had changed the background color for 'harmony' by adding and smudging other colors of similar tones like magenta or orange and a bit of blue. I also gave lighter tones to to laptop screen and lit where I thought a reflection of that light was necessary.


 B. PDF 

Fig. 13.3 Final PDF (30/9/2021)



 Feedbacks 

General Feedback

Ms. Jinchi emphasizes the intolerance for plagiarism, and in the process of that she also explained that we would not be able to make good designs if we don't have an understanding of the principles. A few key things in applying these principles is to tell what our ideas are and the process of creating it instead of simply explaining the details of the final result. 

She addressed the topic I was concerned about, of how majority, if not all design principles are used in a single design. We were reassured that we had nothing major to worry about regarding making a piece that had multiple principles in it.

In our fourth week Ms. Jinchi reminded us a few key things. First, reflections are encouraged to be organic, coming from us and telling the audience that it is what we experienced, we don't ever have to have it so formal. Second, we should remember that having more than one design is good for practice and exploration, as it opens us up to more options to improve from. Third, one that I struggle most with, is that we have to be comfortable with the negative space in our design. We don't have to force extras to fill in that space if it has no reason being added.


Specific Feedback

Once she reviewed my work, she tells me I should go with the cat-toast design for 'Gestalt' and to make some adjustments to my 'contrast' design, which is to align both paws in the center and have it look almost as if it is a blooming flower. 

After I have done that and added extra lines, she tells me to double the smaller paws to balance the design. She pointed out that "filling in space" is something a designer should never do, which is why everything we made has to have a reason behind it.

Last specific feedback of the week is to get ideas for my designs that aren't too simple or too complex. Use tools however I see fit. 

The feedback I received in week six for 'harmony' is to use a background that accentuates the elements, since the one i currently had was too similar of a color and distracts us from what's supposed to be focused on.


 Reflections 

For this first task, I held it off longer than I should have. I was so obsessed about coming up with good ideas, that I didn't start any sketches at all. That meant my designs were rushed, even if it is just a dirty sketch. Fortunately, I was able to do them in time regardless. There was so much trouble for me to come up with ideas that are original, but when I finally started working on it, piece by piece the ideas came rolling in.

After realizing how several design principles can intertwine and that there is no right or wrong in a design itself, I felt relieved. I struggled most in being comfortable with empty spaces and thinking of designs that really show the specific principle I wanted to show, as most of them had other principles involved.

Despite being excited to start this module, I found it to be the hardest. However, having a challenge and limiting myself from having too much happening really helped me in improving my art. Something Ms. Jinchi said really stuck with me despite only recently starting university, and it's that once we're aware of the principles and rules we become observant of our surroundings. 


 Further Readings 

To really understand more of what was being taught, I read an article Ms. Jinchi suggested. I am not the best reader, and I tend to have a hard time collecting information from texts, but I will write down what I find will stay in my head.

The article I mentioned is titled 'Visual Hierarchy' which can be accessed through this link:

I learned from reading this that visual hierarchy is similar in all definitions. If I had to make a definition for it, I would say that 'visual hierarchy' is the ordering of parts of our design to make the audience read what's most important first.

The article explains that different elements present hierarchy differently. Like the article says:
  1. Elements that are larger in size are noticed easier.
  2. Brighter colors attract more attention than muted colors.
  3. Contrasting colors are eye-catching.
  4. Elements that are aligned differently stand out.
  5. Content that are related can be indicated by using repeating styles.
  6. Related content can also be indicated keeping them close together in proximity.
  7. Leaving white space surrounding the main element makes the element more attractive.
  8. Giving texture to an element stand out more
Applying these to a design is good, especially when we want a specific element to stand out more. While focusing on how people normally see things, it's encouraged to follow an 'F' or 'Z' path.

Comments