Thursday, January 29, 2015

pro prac: reading response

Frank Chimero's advice was comforting to read, especially to know that some of the things I am going through as a designer are universal. Direct and straightforward, his snippets also gave me insight on things I would have never thought of before.

Advice that resonated with me:
  • "Most decisions are gray, and everything lives on a spectrum of correctness and suitability."
    • Throughout my years in the graphic design department at KCAI, I have always felt conflicted about what was good design and what was not. Everyone in class, including the teacher, would have different opinions that I did not agree with at times. However, one truth that I realized is that design depends on the context.
  • "Quiet is always an option, even if everyone is yelling."
    • Loud design is just as valuable as quiet design. Both have a time and place. In terms of character, extraversion and introversion have their good points and bad. 
  • "...beat them by being more thoughtful. Thoughtfulness is free and burns on time and empathy."
    • Sometimes you won't have the adequate amount of resources, but quality always beats quantity. I want to always remember this because sometimes I overcompensate with quantity in order to hide the fact that its quality is lacking.
  • "Don't become dependent on having other people pull it out of you while you're in school. If you do, you're hosed once you graduate."
    • I like school because there are clear standards and the assignments are given to you step by step. However, I have to get used to designing in the real world and being self-motivated to complete projects.
  • "Take things away until you cry. Accept most things, and reject most of your initial ideas....Find a good seat outside."
    • Getting stuck is a given when you're working in a creative field. I constantly have designer's block. Whenever I feel like I'm going nowhere, I need to shake things up and try different combinations. 
  • "Design is just a language, it's not a message."
    • I'm not exactly sure what Frank Chimero meant by this, but it sounded insightful. Perhaps he meant that design is a way of communication; a way to transmit information, not to create its own message. 
  • "Learn your design history."
    • As someone who's double-majoring in Graphic Design and Art History, I'm the sort of person who needs to be grounded in where the subject began/its origins. It helps me see how trends were created and how we came to where we are currently.
  • "Start brave and brash."
  • "Be wary of minimalism as an aesthetic decision without cause."
Thanks Frank Chimero!

Wednesday, January 28, 2015

ue: content

After talking this through with Sam, we both decided that we would narrow our ideas to two: how to ride the bus and how to read an analog clock. Creating a video on how to ride the bus will be a challenge to take on. It would require us filming in public on a moving bus. Still, there are many opportunities for the video and it will push us out of our comfort zone. Some issues we are still working out are how we will film inside the bus, working around weather conditions, and working with new technology and devices. Our second idea, how to read an analog clock, is more controllable and has more possibilities to manipulate style. Sam wrote the outline for the second idea, and I wrote the outline for the first one because I have ridden the bus before.

Task: How To Ride the Bus in Kansas City
  1. Identify your current location and also the address of where you want to go.
  2. Search for the appropriate route and what bus stop to get off at.
    1. Note: You may have to transfer to another bus at some point, depending on the location. If this is so, remember to ask the bus driver for a transfer card. A transfer card is free, and allows you to go on another bus free of charge for two hours. 
  3. Find the bus schedule and times
    1. Note: Plan to arrive at the bus stop 5-10 minutes earlier than the bus' arrival time because sometimes the bus is ahead of schedule.
  4. Steps 2 and 3 can be easily done with Google Maps:
    1. Go to
    2. Input your starting and desired location
    3. Click on Directions, and then click on the icon that looks like a bus. This should tell you what bus to get on, where to get off, and the estimated amount of time it will take. To learn more about certain routes in-depth, go to All this information is also available at each Max bus stop. 
  5. Prepare the appropriate amount of money for the fare, there and back.
    1. Note: Regular fare is usually $1.50. However, it is also $3.00 for certain bus services. There is also reduced fare ($0.75) for students from 12-18, for the elderly over 65 years old, and for people with disabilities. Check for the appropriate amount for you.
  6. Walk to the appropriate bus stop. Make sure you allot 5-10 extra minutes in case the bus is ahead of schedule. Also make sure you are at the correct side of the street because the bus route often goes in both directions.
    1. Note: If you have a bike, you may attach the bike to the front of the bus. Make sure to tell the bus driver this before you board.
    2. Note: If you miss the bus, know that another one comes every 9-30 minutes depending on the day and time.
  7. Watch for the bus and its route number/name and take out your card or money to pay. 
    1. Note: Sometimes multiple buses of different route numbers and services may stop at the same bus stop. Make sure to stand up as the desired bus nears the stop in order to signal to the bus driver that you are getting on that particular bus.
  8. If there are many people getting on the bus, wait in line 
    1. Note: People inside may exit where people are entering. Let the people inside come out first before stepping into the bus.
  9. Insert card or cash into the machine.
    1. Note: The bus driver does not carry change. You may use a $20 bill, but the change will be given in the form of a card that works like a debit card.
  10. Find a seat and sit down.
    1. Note: The front seats are usually reserved for the handicapped and people with disabilities. If all the other seats in the bus are full, it is okay to sit in these seats. Know that you are obligated to get up and give up your seat in the front
  11. Before reaching your destination, signal to the bus driver to stop
    1. You can do this by either pulling the cord along the windows, pushing the button near the back exit doorway that says "Stop," or asking the driver personally to let you off at a certain stop.
  12. Walk the rest of the way from the bus stop to the desired location.

  • Benefits for riding bus (very brief)
  • Introduce necessary resources to have on-hand
    • bus routes/schedules
    • correct fare
  • Walk through of the instructions, step by step, with examples
    • Tips will intercept the video at appropriate times
  • Arrive at destination

Task 2: How to read an analog clock

  • give brief history of time telling
    • stars
    • sundial
    • hourglass
    • clepsydra
    • pendulum clocks
  • describe the parts of a clock
    • the very front of the clock is called the face of a clock
    • the two moving parts are called hands
    • 60 hash marks
    • numbers 1-12
  • describe the functions of each component
    • each large number represents a hour
    • each smaller mark represents a minute 
    • the small hand denotes the hour
    • the large hand denotes the minute of the hour
  • other components
    • teaching past/to the hour
      • o'clock, quarter, half 
    • other basics 
      • 60 hashes means 60 minutes (1 hour)
      • full rotation means an hour has passed
    • go into other forms of telling time 
    • show the different variety of analog clocks

ue: reserach

For this "Here Is How" Project, Sam and I decided to work together. We have never collaborated before, so we thought it would be interesting to see what would happen if we teamed up. Here are some initial ideas we thought of:

How-To Ideas
How to...
  • make yogurt
  • granola
  • boil an egg/poach an egg
  • paper mache/pinata*
  • latte art
  • make a pop-up book
  • ride the bus*
  • parallel park
  • tie knots
  • wrap an oddly-shaped gift
  • read an analog clock quickly*
  • write in cursive
  • laundry/remove a stain*
  • almond butter/peanut butter
  • braid
  • mail a letter
  • play piano
  • to google effectively
Some examples of type + footage:

interesting way of incorporating text and footage

though it doesn't have any sound, the way it draws in space looks interesting
shows the experimental nature of cooking

some possible ways to use typographic motion

interesting correlation with sound, type and motion

quirky. incorporates many different mediums: stop motion, motion graphics, animation, etc.

using supporting image and text to statistics (logos) to invoke pathos

i like the style of this video

pro prac: goals

Career goals
Right now, I have an interest in environmental graphic design. Ideally, I would want to work in a field that connects both graphic design and architecture/sculpture, but I am also open to motion graphics. I'm not exactly sure what job type would work best for me, but currently I have a passion for creating environments. Just thinking about what Deborah Sussman does seems exciting and intriguing to me. I also would like to work with non-profit organizations like the Rabbit Hole Museum.

Short term:
  • continue interning at the Reading Reptile on the side - staying involved, keeping contact until the museum is established (10 yrs)
  • explore at least 3 different design firms with different studio styles & job types
    • specifically interning at populous 
  • have a job by the time I graduate
  • study abroad somewhere over break
  • no more all-nighters, manage my time better!
Long term:
  • Though this dream does not feel tangible now, my family has been thinking about opening a business. 
  • 25 yrs old
    • graduate school for Environmental Graphic Design, maybe??
    • part-time job somewhere...
  • 30 yrs old
    • solid position with a salary: maybe be a creative director
    • living in a different city
Job postings:

Tuesday, January 27, 2015

ia: ny times & usa today

Analyzing the user path and overall experience of the same article, "NFL Found 11 of 12 Patriots Footballs Underinflated" on both NY Times and USA Today:


Text heavy page, feels overwhelming already. I did notice that it keeps to the look and feel of a print newspaper, with columns and minimal use of color.

All the links are at the top, but there is another button called "sections." The very top bar stays constant on each page.

I found the search bar and typed in the article name

The search results suddenly break from the style of the overall website, and looks default-y, generic. A different typeface is used. The blue text reminds me of google searches.

After selecting the article, the format breaks from the home page. Though the top bar remains constant, it feels like I'm on a different website. One interesting motion though, is how the additional articles at the top fade in from the right. 

When one hovers over the additional articles, arrows appear, allowing the user to scroll through

To go to a different category, there's a "sections" button. Though convenient, it's a bit ambiguous as to what it is. The user may feel a bit "trapped" in the article. It appears too much like a list and does not allow the user to freely move between sections. 

The article caters to social media so that the user can both read the article and share it. 

Once you move down the article, the top bar includes social media icons to make it accessible.

More articles and links related to the section are found at the bottom of the page

Once the user finishes the article and would like to move on, they can hover over the arrow on the right/left to a new article.


User friendly website. It seems designed for phones and tablets because of the arrows on the right and left (mimicking a swiping motion). The categories are color-coded. The black indicates content, while the white indicates the space where the content is held; The user clearly sees the difference.

Hovering over the arrow prompts what section is next. 

The movement to another section is clean and quick. It swipes over to the left and right.

After searching the article, a grid appears and now the background is a dark grey instead of white. The user feels like they are now within the content. It is also not required to click on an arrow to the next page of results because it continues to load while you scroll

Hovering over each article gives the title and the description. The box changes into a lighter grey and removes the image.

Selecting the article makes it expand and open up. The opacity gradually becomes more opaque until it reaches its full size.  

It also has an ex-out button on the right, top corner, giving the user the feeling that it is separate and specific content.

Icons are on the left side of the article as well as at the beginning of the article. 

When one continues to scroll down, the social media icons stays fixed at the side. The article also is an endless scroll down, as opposed to having to click an arrow to the next page.

Monday, January 26, 2015

ia: blog readings

"What Screens Want"

  • we take things for granted because the transition was so fast and thorough
  • use of metaphors in an interface
    • ex. trash bin on the computer and in real life
    • these metaphors are necessary to better understand
    • it takes too long to relearn from the ground-up
  • levels of abstraction gives us opportunities for efficiency
    • need the proper amount
    • need to go through a shedding process to make way for more nuanced abstractions
    • similar to training wheels
  • attitudes towards plastics changed over time
    • it used to be an imitation, now it's its own thing
    • if something can be anything, it becomes everything
    • ex. facebook, digital calendars
  • software is malleable
    • now we buy the shape of the thing we prefer, not the things we want
    • we want it to change regularly
  • flat vs. skeuo
    • both are wrong because screens are aesthetically neutral
  • flux (the capacity for change)
    • low, medium and high
  • designers craft the interstitials or in-between moments
    • develops a language of transformation
  • the falsehood of maps
    • incorrect, false representations
    • things go bad once your mind uses these abstractions to consider the thing itself
  • likewise, the web has been received like maps
  • need to construct the web based on extensibility, openness, communication, community, wildness
  • What screens want need to match up with what we want

"What The New York Times Web Reboot Gets Right" 

  • the new ny times website mixes the benefits of print and electronic
  • No longer a page turner
    • no longer have to turn the page - scrollable in a single one
      • similar to the long newspaper format
    • arrows on left and right offer a way to move between articles
  • Comments as edit content
    • comments are next to article, equal visibility 
  • New navigation
    • accommodates various device sizes
    • influenced by Times' touch screen apps
    • menu on upper left
      • con: it's confusing because it cascades three navigational paradigms into one menu
      • pro: readers may like feeling grounded within a section, similar to print
  • Home, again
    • home page is busy = "link-farm"
    • the transition between the home page to the Tech section is inconvenient - have to open the navigation menu, then go down to news, and then to tech from the fly-out menu
    • black links, no longer blue
    • good newspaper experience and maintains the New York Times feel

"Web Design is 95% Typography"

  • 95% of info on the web is written language
  • we are inundated with so much printed matter - information design is vital to organize text where the reader can find what they're looking for
  • macro typography: overall text-structure
  • micro typography: detailed aspects of type and spacing
  • typography's duty is to convey information in writing - must be able to be read
  • optimizing typography = optimizing readability, accessibility, usability, graphic balance
  • Arguments
    • few fonts 
      • typographer shouldn't care about what kind of fonts are available - should be mostly concerned with the organization of it
    • screen resolution too low
  • treat text as a user interface
    • web designer's job to make sure texts are easy and nice to read on all platforms
    • good web designer knows how to work with text as a user interface

"Reactions to Web design is 95% Typography"

  • text as user interface
  • typography is not choosing fonts, it's about shaping text for optimal user experience
  • type comes first, the rest falls into place by itself
  • we do not need to make sure the website looks the same on all platforms
    • just have to make sure that it is as easy to use and as easy to read as possible 
  • designers today are preoccupied with ornamenting the website
  • typographical wisdom: Tschichold, Ruder, Mueller-Brockmann, Weingart, Bringhurst
  • understanding the web
    • focus is on communication, not effects
  • designer has to organize the design with regards to the message and to its audience

Blog Response
After reading the four articles I was most intrigued by the article by Frank Chimero. Throughout the essay, Chimero compares the Web to multiple objects. First to aspirin, then to plastic, and then to maps. The point Chimero was trying to make using these metaphors was that the Web is a malleable interface in constant flux that has the ability to change. For example, when plastic was first discovered, it was made to mimic other materials like leather. However, as time passed, plastic became "something in its own right" and then was used to make clothing, desks, phones, etc. People then expected it to change regularly. We now "buy the shape of the thing we prefer, not the thing we want." According to Chimero, there are several "levels of abstraction" when confronted with entirely new things. There is a line between too abstract, all computer code and learning from scratch, to not abstract at all, which is imitating something that already exists.

While there is an ongoing debate of whether things on the screen should appear "flat" or "skeuo," Chimero argues that each side of the argument is flawed. He explains that screens are aesthetically neutral. It is the in-between moments of transition which defines the Web. The most powerful metaphor Chimero used, however, was the interpretation of maps. Maps are made for easy sea navigation; when we forget this, we confuse these abstractions (or representations) and the intent of maps, and begin to think that the renderings represent the thing itself. Chimero gave an example of how he was surprised that his plane from Hong Kong to Chicago was going over the North Pole; He had forgotten that the world was sphere due to only seeing the world in flattened form on a map. Likewise, the Web has turned into a false representation of itself. 

The last two readings covered the importance of typography. The typeface and font do not matter as much as its organization. The article explains that a typographer's job is to treat text as an interface itself. Due to the heavy use of text and lack of images, text has become a vital part of design which determines the ease at which the user interacts with the interface. 

Architectural Record - Web
I then analyzed Architectural Record, an architecture magazine (you can find their homepage here:

Everything that is clickable on the website responds in some form, be it through underlining the text or changing the color. The links at the top have all the key subjects people are most interested in. When one hovers over the links, the whole menu appears, but the selected one has blue text. The opacity tells us that the menu is temporary.

When one hovers over the picture, arrows
appears on the left and right sides. The corresponding article with the image turns dark grey on the bottom.

These additional articles are in grid-format below the large image. When one hovers over the image, the the text is underlined (as shown in the middle photo), and the caption appears on the image at the bottom right corner.

The website also included Twitter near the bottom

More links are at the bottom if people have not yet found what they're looking for.

Everything on this side looks flat. Nothing is made to imitate the pushing of a real button. Though the website seems relatively well-organized, the sheer amount of information is a little overwhelming.

Architectural Record - Print version
After purchasing the magazine, I skimmed through the articles and analyzed the overall structure of Architectural Record. One thing I noticed was how much noise the magazine had. It was inundated with advertisements to a point where I could not tell what the main articles were. Divided into four sections, each section was preceded by its own contents page. The "Learn & Earn" contents page in particular looked very much like a webpage. Everything was sorted out into light grey boxes. Instead of listing the contents, the page was organized like a grid. The other sections, however, had type all over the place. Though there was a constant running head at the top, other texts of different sizes jutted in with advertisements and additional information. The magazine does manage to have some organization through color-coding certain words for sections and using large images to indicate main articles.

Wednesday, December 24, 2014

Junior Review - Reflection

After presenting for my junior review in front of Kidwell, Kelly, Emmy, Allyson, Trent, and Edwing, I realized a couple of things I could have done differently. As a quiet person, I need to improve on my communication skills and get more comfortable with public speaking. First, I should have prepared and practiced more so that my nervousness would not inhibit the presentation. They also told me to speak more clearly and loudly. In terms of my body of work, here are a couple of suggestions and feedback from the teachers and TA's:

-have a wide-range of aesthetic, keep pushing yourself
-perhaps explore more in motion graphics; it seems like one of my strengths
-speak up in class! participate more and offer my insight
-communicate, be more open with process with classmates and teachers
-the Gertrude Stein videos seemed like one of the stronger works

This first semester of Junior year, I was surprised at how much people liked my mistakes more than my intentional work. Due to my controlling and inflexible nature, everything I do is consciously done. At times, this restrains my work and prevents me from reaching my full potential. One example of this is how well my Gertrude Stein videos were received. I truly thought that these videos were terrible and could only see its errors. I realized that my standards were skewed and that I prioritized perfection instead of context. In the future, I want to have an open and learning mind and come to class with the intention of experimenting and gaining knowledge.

Sunday, December 07, 2014

type3: final type specimen photos

Monster is a combination of four type classifications, each of which are represented through depicting key characteristics of serif, sans serif, and script typefaces. All of these come together to form a decorative typeface, Monster. Variations in the serifs, stroke weight, the use of brackets, and calligraphic qualities flexibly form each letter. Referencing Victor Frankenstein's monster from Mary Shelley's novel,Frankenstein, this typeface has qualities that do not belong; "stolen" from other typefaces such as Rockwell, Futura, Bodoni, and Lucida Blackletter. One key distinguishing factor is its relationship to Bodoni, a neoclassical and elegant typeface. Both Bodoni and Monster have high contrast thick and thin lines, however, this typeface places the emphasis of the letterforms on the opposite parts of the letter, in direct contrast to Bodoni. While Bodoni represents beauty and sophistication, Monster represents deformity and disfigurement.

hcd: brand book

Friday, December 05, 2014