Mini Art School- Blog Assignment #3

For this blog posting assignment, I am going to comment on different design rules that I have read (from readings and web sources) that a design sources of my choosing has followed or not. I have selected ten different design rules from three different sources. 

The website design I have selected is for the Korean Culture/Music website “Eat Your Kimchi” < http://www.eatyourkimchi.com >. It is a very colorful and open space that draws its audience around the world through various design aspects. The owners of the site and company, Martina and Simon, have two main content pages, their opening page is for Korean Music and the second one is for Korean Culture. All of the content that they put on is through their own eyes and opinions as a married Canadian Couple living in South Korea. They have other directory links to various postings they have made for their blog/information website as well as archives to their postings, shirt store, and more. Their page also has advertisements that help sponsor their website.

The first five rules are from the book “Design Basics Index” by Jim Krause. They are listed as so:

–        Placement and divisions (p. 14-15)  

  • The Eat Your Kimchi (EYK) main content pages (please click on the link below) are fit like pieces of a puzzle.  You have the layout boxes fitted in a way where there is no collision/chaotic mess of them being placed together.  From these boxes, you don’t see them as if they were large, over-flowing cardboard boxes filled with lots of junk spilling out from them and stuffed into a tiny little space. Each box has equal border space and flow, Just like what Krause (2004) mentions, “Just as the visual impact of an element can be enhanced by varying the measurements between it and other elements, so too can the effectiveness of a line’s placement ( or the division of space within a layout ) be enhanced through unequal spacing” (p.22)
  • One can say that the page is divided into three sections, first is the directory and headline header. This is where users can access different parts of the site. Now being that the EYK page is very graphic intensive. They make the header smaller so it would not take away from the Headline (the page logo) and content. (top of the page)
  • Lines used in these boxes separate each line of text, not as a way to add to the design of the boxes, but to also create a clean layering experience (it should be easy to find on the page)         

–        Grouping (p. 40-49)

  • Krause (2004) stresses that “Visual grouping is usually a simple matter of brining certain elements closer together, and providing an obvious space or dividing element between them and other groups or components” (p.41). The contents of a web page must be able to work together without fighting to being the one and only thing to pop out of the page, detracting from the full impact that the designers had hoped to have on their audiences
  • The majority of EYK’s are videos, so the designers had to figure out a way to assert its dominance on the page to grab the attention of the viewers,  The largest box on the page focuses on the most recent posts that EYK uploads. Other boxes post information on their other contents, such as their “Indie Playlist” and “Special Features”. One thing I wish EYK would do is that they can move their “Special features” box closer to the top to emphasis that it is a big post, but in a way that doesn’t detract attention from their most recent post. However, being that their “K-Pop Music Mondays” are the biggest features of their blog, that is why they have the “Special Features” box where it is.
  • Sample: Sample: http://www.eatyourkimchi.com/ (scroll through the page)
  • The grouping is the same for their other pages, like the culture part of their site. Their posts have four different categories and each of them are spaced in different areas. Their W.A.N.K’s (Wonderful Adventure Now Korea) are the biggest feature in this specific page, then the next  content boxes are grouped in the same setting as the music page, however something is different between the Music and the Culture page! Can’ you guess? I will point this out in the next rule..
  • Sample: http://www.eatyourkimchi.com/ (scroll through this page and  the page after you click on the culture button)

–        Harmony (p.50-59)

  • If you already have notice, there is a kind of harmony between all the web pages (minus the advertisements,. Annoying, yes. Do I want to include them in this analysis, no.) Between the music and the cultures page,  the pages are mirrored images of each other. Look at the main music page, for example. If you noticed the arrow that leads viewers to the culture page, it is on the right of the screen. Once clicked on, the page seems to flip and now an arrow appears for the Music page on the left side. The same is for the content layout, which is mirrored.  There are no sudden changes/ different layout  changes from their main content pages. Why? Well, Krause (2004) says that, “every now and again, look for ways of incorporating aspects of repetitive harmony in works of art and design” (p.52),  EYK uses this mirrored layout because they want to emphasis that their two important focuses for their blog/website is for the Culture and the Music. They want to show that they are equality important, but different at the same time Their other content pages have different layouts, but they too have a way of contributing to the website as a whole with their own emphasis.
  • Sample: http://www.eatyourkimchi.com/ (scroll through this page and  the page after you click on the culture button)

–        Emphasis (p.62-77)

  •  As I stated before, when EYK wants to put out their biggest headlines, They make sure that their most recent video postings are larger than the other boxes.  What they do is that for each video that is uploaded to Youtube, they create / select a video thumbnail picture that they uses to not only represent their videos on search pages, but also to their audiences to grab their attention. With this thumbnail, there is a phrase that they use from their reviews/ videos that are funny, witty, and more to catch the viewers’ attention.
  • Sample: http://www.eatyourkimchi.com/ (look under music Monday)
  • This emphasis also can be see through changes in their logo.  The couple has two different logos, which Krause (2004) shows that their “emphasis can be implemented in degrees. Apiece that needs to visually SHOUT requires a bold application of contrast, color, and/or content” (p. 63).  Again as I had mentioned about, their full-text logo is what represents the couple and their website. I f you look closely at the logo, they emphasize themselves through the letter “I”, one for Simon and the other for Martina. This is a creative way to show how the two of them work together to share their experiences in Korea to people around the world.  With their smaller content pages, their full-text logo is abbreviated and the main emphasis is on the page title.
  • Sample: http://www.eatyourkimchi.com/
  •  Another thing to notice is that when you switch between the music and the culture pages, only the words “music” and “culture” changes. These small changes add to the important of these two pages as main content pages.
  • Sample: http://www.eatyourkimchi.com/ (make sure to click on the culture and and music buttons)
  • The logo changes to mark certain links as smaller content pages, such as their archives, about us, and contact us pages. These logos will be talked about in the Headline’s section.
  • Sample 1:   http://www.eatyourkimchi.com/  / Sample 2: http://www.eatyourkimchi.com/2012/
  • When looking at their archived posts, each post square has a speech bubble looking view counter that is located at the top right side.  For me, this allows viewers to quickly see which posts are more popular and other that seem to lack the interest to pull them into clicking on them.
  • Sample: http://www.eatyourkimchi.com/2012/

–        Alignment (p.78-91)

  •  EYK aligns their content in different ways for each content page, but they all create a balance between the content and the design. For example, the archives page aligns its post links in perfectly aligned and squared rows/columns. Being that most people read from left to right, they have used this to order their posts from recent to the olders. 
  • Sample: http://www.eatyourkimchi.com/2012/
  • Martina and Simon took the alignment of their page content in their hands, as Krause (2004) perfectly writes, “Alignment,  in reality, often  requires a judgment call on the part of the designers” (p.88). This is shown through their “About Page”. It is hard tell what kind of alignment they used, but image wise, they did something to the mirrored design that they used for their main content pages. Martina and one pet to the left where as Simon and another pet is on the right. They do this sot allow their personalities to shine through.
  • Sample: http://www.eatyourkimchi.com/about/

The second resources I used is “10 Web Design Rules that You can Break” by Eli Penner in 2009, < http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/>

Rule #2: Use a Minimal Number of Font Faces: EYK use a total of three fonts for their page; one for their logo and the other for their main text. However, they layout has the illusions of using multiple fonts.  For many websites, Penner (2009) expresses that “To effectively use more than just a couple of fonts, a design has to be very text-oriented, and the rest of the design needs to be relatively quiet.” How EYK follows this is very simple. The couple just changes the style of the text. Bold, italics, and size changes are used to emphasis different parts of the content that they post onto their webpage. The same text is bolded and enlarged to highlight the titles of the blog posts, while the content text is normal styled and reduced in size. The text used on the video preview is used to as a way to grab the attention of the views to enhance the quirky phrases that EYK uses to summarize the video.

Rule #3: Do Not Use Too Many Colors.

Sample: http://www.eatyourkimchi.com/archives/

 EYK uses many different colors on their content pages, but through the use of themes. There are only two themes used for their Music and culture pages, but use three different colors to categories their posts. Penner (2009) could say that Martina and Simon are “professionals who are pushing boundaries” when it comes to color.
Sample: http://www.eatyourkimchi.com/archives/

If we take a look at Brittany Lynch’s post on Graphic design basics, she talks about the psychology of color, that can affect the mood of the content and the viewer.

For the music content pages: EYK use red and blue as the pages’ color scheme. The use of red is to create excitement for new music that comes out each week. Their K-Pop  music ratings chart is also in red  as well. For the background and their “New in K-pop” section (for example), which shows the quality of honesty and trustworthiness in that all of their posts are created from their own words and opinions.

Sample: http://www.eatyourkimchi.com/

As for their culture page, the color theme mostly consist of brown colors (despite the fact that they are extremely light colors). The color brown expresses easiness in this page because this page is all about their adventures around Korea. It is not difficult to find interesting and great places through out the city for them to see. They also take this chance to share the culture with the viewers.

The last and final rule is from the book , “White Space is not Your Enemy” by Kim Golobisky and Rebecca Hagen.

 Step 5 headline. (p.24)

                  Simon and Martina chose “Eat Your Kimchi” as their Headline for their blog/video website.  Why did they choose this strange phrase? As Golobisky and Hagen (2010) point out, “[a person’s] headline should have the most impact on [his or her] layout” (p.24).  This phrase already has an impact on the viewer, especially if he or she does not know what Kimchi is. To further draw the viewer’s curiosity, the “I” s in the logo are designed to be a girl and boy, representative of the couple. They also use strong and unique titles such as “F.A.P. F.A.P”, which is  “Food Adventure Program For Awesome People” and “Open the Happy” to catch the viewers to see what these videos are all about then sharing about the food/traveling adventures that they take and the small things in live that make them happy.

————————————————-

I’m sorry for writing such a long post, but I still have a few more to go.

—————————————————

I am also going to share two more parts to this long post. The first is my own project that I have revised from all the resources that I have read. The first is this bubble tea poster.
Bubble_Tea_Poster 1

Now this was created a few years ago, but I see a couple of design mistakes already. One is the balance of the poster in there there is too much going on. I have the main text separated too far from the rest of the body text. This will cause the audience to try and search for the main focus of the text instead of it being presented right in front of them. There are also unrelated pictures that I have used, meaning I tried to create a group two different image types together.

bubble tea preview poster In order to fix this, I did two things. The first is that I removed both the orange and the apple images from the picture. Even though they were cute, they served no purpose in the poster. The second thing I did was move the text up to create a kind of pyramid effect with the text. The audience look at a poster from top to bottom (most of the time) so I moved the text closer to the top, while at the same time had the main product in the middle to get a better impact of the text and image.

buble tea poster 2

———————————————————-

My last part is the  Loosened Alignment Exercise- from the “Design Basic Index” book p. 87

I have made one highly structured and loosely structured layout.

alpagiri design 1

 Layout 1: The space of the layout is very rigid    and tight. The alignment is very strict and follows a very centered layout for the graphic,text, and logo.

alpagiri design 2

            Layout 2: Here the layout space is loose the elements are show to create a relaxed and informal design, but is still able project the intended message.

(C) Image are credited to their respective owners

Advertisements

3 responses to “Mini Art School- Blog Assignment #3

  1. Mae-Lin,

    I really liked this post, you did a great job with the samples and everything! After reading your analysis on certain rules, I thought to myself oh wow I didn’t think of that. So thank you and for opening my mind a little more. Also, I really liked your alignment exercise, not only was the images absolutely adorable but the second one you can see the spacing and different that it makes from the first. It gives it that flow, instead of something crammed all at once. You really did a great job for this blog!

    -Marisol

  2. Personally I have to say that I like the Bubble tea one with cute fruits more :S. The revised version seems a bit too empty for me, since you are advertising the richness of the bubble tea, but that may just be me. Also…”so sweet” just doens’t seem positive >.>
    As for the Alpagiri design, I find completely adorable =P. Apart from the cute pictures, my favorite part has got to be the Chinese styled stamp on the bottom. Gives it a sense of a professional project.
    Side note: funny how Marisol also commented on Louise and your site. I feel like a stalker now =)

    ~Matt

  3. Hi Mae-Lin,

    Thank you for the detailed response to each layout sin that was broken and/or rule that was followed. Clearly your fellow classmates appreciate the detailed response as well, based on Marisol’s response. Just a quick suggestion — It would have been an even stronger post if you had taken screenshots of the elements that you discussed, as opposed to having the reader click back and forth between the different parts of the eatyourkimchi.com website.

    Overall, nicely done!
    Prof H

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s