C Mini 1 Reflection

Julie Choi
Aug 31, 2018 · 17 min read

Week 1

The first week of the communication mini was personally very enjoyable and interesting at the same time. As a transition from the freshmen foundation course, the C mini seems to be helping me a lot in finding my interests in the three different track.

Before the first assignment was given, we had a very fruitful discussion about various layout example as our professor brought in numerous books. At first, I was quite confused while looking at the examples because although I knew I was supposed to look at the different layouts, my focus was on the amazing contents of the books. I feel like this was my initial reaction since I wasn’t too sure which part of the layout to lay my eyes on. Once we got to the discussion about the different types of layout for different genres of books, I slowly learned to open my eyes to some very interesting elements of the design.

The first assignment given to me was to analyze the different layout elements Fast Company website published their articles with. The discussion from the first class really helped me to notice the layout details that I have paid attention to before. With my partner, we started analyzing the macro to micro elements on the website just like what the assignment sheet told us to do. The macro of the website was pretty noticeable as the layout and the grid system for different categories or tabs varies based on their content. For example, the entertainment tab gives access to the popular articles while on the right-hand side, there are more lists of articles that people might enjoy. In contrast, the news tab does not have any distractions on the side and provides the most recent and the most trending news article about politics, business, or technology. We also noticed that there are different dominant element for the two pages: in the entertainment tab, the photograph of the article is the dominant as it also carries the hyperlink to the article whereas, in the news tab, the headline is the dominant as it has bolder letters and the photographs were smaller. As for micro, main the font types changes within four different serif and san-serif font depending on their role in the website. Also, there are subtle interactions that engage the user while using the website. For example, when the screen size of the website changes, design elements get pushed to the bottom still allowing the user to view all the content. Adding on, the logo of Fast Company follows the scroll to the bottom of the page to keep the reader company while using the website.

In order to prepare for our presentation, my partner and I still need to figure out a way to effectively present all the different layout details on the Fast Company website.

Week 2

This week, we had a presentation on Tuesday just to see how we were in progress with this project. In order to build a strong presentation, I thought the organization was the key to success in this project. While Jaclyn and I discussed the basic plans about the flow of our presentation, I drew out a map of how we will order our slides so that the whole presentation is a storytelling, not necessarily a tedious informative presentation. This diagram helped out to organize our thoughts and really think about the flow. Our big picture was to highlight the words, simple, versatile and user-oriented to guide both the macro and micro. Although Jaclyn and I spent many hours planning and building up the organization and focus of our presentation, we learned that our narrative was weaker than we thought. I personally was not confident in the story-telling or the presenting part of the project because I knew that we were not ready yet (which was the whole point so that we can get feedback). It was just a casual run-through, but since I was pretty discouraged with public speaking and the presentation in general, the run-through was not too satisfying. From the feedback sheet that my classmates, Juan (TA), and Vicki (our professor) filled out, after the presentation, I had many to learn. Since Jaclyn and I saw the weakness in our presentation was, we met up to start from a clean slate.

We continued discussing our problems and our plans for the final presentation which got moved to Thursday. The extension gave us more time to think and plan. In the first run-through, our voice and narrative were weak compared to our slides which had a very similar style to the Fast Company website. We started with a new Keynote presentation. Before adding any elements to the presentation, we thought it was helpful to look at Pinterest inspirations to come up with a set color scheme and a set font.

Next, we explored the grid system of different pages and initially figure out that the website is designed with six columns in total. However, the article pages were quite difficult to fit in a 6 column grid system. We consulted Andrew for help, and figured out that the whole website was made out of a twelve column grid system, except the article pages had a margin attached to the copy, image, and advertisement. This is because since the dimension of the website has to be flexible as many people view it on their mobiles, it made sense that they added a separate margin to their sections to prevent from overlapping with each other.

After we figured out the little-detailed designs on the website, we had so much fun exploring the different functions of Keynote so that our research would be presented in a neat and pretty way. It was really helpful that Jaclyn was my partner because she had been having fun with the different motions on Keynote while I had trouble figuring out the complicated functions. She helped both of us by ironing out the dubious parts of the slides.

Now we have been really focusing on cleaning up our presentation and increasing our voice in the presentation. We designed our presentation in a similar manner as the website so that it would be user-oriented to increase empathy with the audience. Although it was a complicated journey with many ups and downs, I feel pretty confident in the effort that both Jaclyn and I put in because we did a lot of talking regarding this project.

This was a crazy learning experience for me personally. I thought communication design was really based off of graphic elements, but as the name says it, it is really how well the graphics elements communicate to the audience. If I want to grow as a communication designer, both my design and the ways I present my designs and thoughts have to be all very easily comprehensible.

Final Project-01 Reflection

From where we start off, I feel like Jaclyn and I have had a successful ending. As much as we prepared and practiced non-stop, we were able to speak and show most of the parts we researched about FastCompany.com. Through the constant research, I learned a lot about the details of graphic elements and their role in communicating with the users. Since now we have come to a century where service is given through technology, I realized the importance of design and how they can fuel the users in great levels. Although I discovered many technical parts of design, the most important part I learned from this project is teamwork. Our class and, specifically, Jaclyn and I know how behind we were after the dry-run. For me personally, I was greatly discouraged by it, but my partner really helped both of us get back on track. From then on, we just kept trying as hard as we can. We dedicated both of our times wisely, and every time we practiced, we told each other that it was okay if we messed up. We also tried practicing in front of people just to make sure we were actually ready for the presentation because all the content were vital to mention for us to create a story-telling presentation. We cheered for each other and made each other feel good about our work. I appreciate all the help I received from Jaclyn, and I think we produced a work that reflects off all our hard work.

PROJECT 2 — TYPOGRAPHIC HIERARCHY

Week 3

For the third week in C Mini, we moved on to a new project called, typographic hierarchy. We were told to make three variations of four steps in which we were allowed to only change a certain variable in spacing the individual lines. While I made twelve versions, I learned that emphasizing several lines or giving lines certain spaces really change the focus of the eyes when each of them is stared at. Studying typographic hierarchy from just by changing the most basic forms of text helped me realize how much emphasis can alter the hierarchy. These are some of my best examples out of the twelve.

The image on the left is when I changed the stroke weight of certain lines for emphasis by judging which are more relevant information for the readers. The images on the right and bottom shows how the text can be organized with spacing.

During the Thursday class discussion, I learned the importance in contrast because the contrast in emphasis is what essentially causes hierarchy. We had basically set the hierarchy from macro to micro information deciding which information would be the most important. The combination of alignment and organization is fundamentally crucial for a visual hierarchy.

Week 4

In week 4, through steps 5, 6, and 7, we took a step forward to learn more about contrast in hierarchy. Before moving on the next step, I sketched out the general understanding of Just Films. Just Films is a film company that produces films that mostly promote conversations about social, political, and economical change. Their films put spotlights on educational and inspiring documentaries that focuses on inequality and social justice. The general mood of Just Films is serious, earnest, stern, genuine, sincere, determined, intense, and wholehearted. Physically writing out these adjectives helped me conclude the general atmosphere of the film company.

I explored the different elements that created hierarchy such as color and text size. Below are the two examples of my part 5 and 6.

In this specific example, I varied the text size so that the hierarchy of information would be exaggerated. The emphasis on the Just Films starts to catch the viewers attention because of its dominating size. The dramatic change of text size pulls the eyes right into the poster compared to when the font sizes are same through out the whole poster. The different stroke weights of each words and placement set a certain order for the reader’s eyes to follow. One thing I should have done doing this exercise is decreasing the text size for all the films and dates to create a more dramatic hierarchy.

For exercise five, I played around with the different color schemes. Before choosing my color palette digitally, I made small collections of different colors on a printed magazine. At first, I got excited to match colors based on my favorites. But, I took a look at the adjectives I wrote down before and matched up colors that fit those words accurately. My best pick was red and grey text on a black background. I used the eyedropper tool on inDesign to pick out the red shade from my magazine cutout. Since the color of the red wasn’t vibrant enough and there were no particular hierarchy in the stroke weight of the text. The color change also doesn’t make a dramatic effect other than showing the separation between different categories. From this exercise, I learned how contrast of color in relation to the text and the background is crucial. Although I chose to make the name of films and “Admission Free” red to make them pop out, the text in grey grabs the attention quicker than the red fonts do because the contrast between light grey and black is greater than the contrast between red and black.

Week 5

For week 5, I came up with some iterations of my final project since I’ve researched and learned about the basic rule of hierarchy. The images below are the iterations that I came up with.

These iterations show my exploration with how I want to portray my poster. From these iterations I noticed how red really stands out on a grayscale. On a back and white photo, primary colors such as yellow, red, and blue really bring the text to live. At first, I was skeptical about using a photograph for my poster because I wanted to show the different iterations of graphic elements and illustrations that tells a story to the audiences about Just Films. After I tried adding illustrations such as a fingerprint to symbolize identity and a face venn diagram to express social justice, I received feedbacks that claimed ambiguity in the story-telling aspect. I came to the conclusion that using a photograph in my poster would show more visual depth to the storytelling part of my poster.

For the next three iterations, I chose to work with my own photographs. I purposefully chose mysterious and nostalgic photos to evoke a certain curiosity when looked at. However, the photos that I took diverged into other kinds of emotion which ended up distracting the original topic of Just Films. One thing I learned from this exercise is that sometimes its good to play around with the orientation of the text. For example, for the first two posters, I switched the orientation of the location to the right to make it looks like bookmark tab on the right. I ended up carrying the yellow block and the headline to my final piece.

The poster above is my semi final poster that I had in the critique on Tuesday September 25. I received good feedback: how all the visuals work in the sense of delivery and how the color contrast benefits communication. I chose a royalty free photo from the internet that would help communicate the general atmosphere of Just Films. I purposefully cropped the photo just to show the “FEM” of the banner so that the audience knows what this poster is generally about. I added the star stickers on the left to put emphasis the black and white photograph because sometimes when photos lose their color, it can easily get muted in the poster. Stars implicate importance on subject just like how we star things that are important on notes. I wanted to put that same concept on my poster for more attention in the photograph. One thing that visually did not seem coherent in the poster was the phrase “A Social Justice Film Series”. The lengthy text on the top doesn’t harmonize with the rest of the poster because it frames the edges on the top right. Vicki gave me more feedback, and I made further tweaks on the parts that could have been improved.

This poster above is my final poster for Just Films. I moved the phrase “A Social Justice Film Series” closer to the headline to drag more attention from to the bottom to the top. Balancing out each words on different lines makes the text a different visual element that communicates better than the longer text. I also brought the star stickers over the yellow block to add my own voice to the poster. Doing this makes the general layout of the poster more coherent since there is a line that cuts the poster in half. One thing I also noticed was that this poster looks better when printed out because the colors slightly fade creating a better muted contrast between the red, yellow, and black and white photograph. I am satisfied with my final work because it communicates very well. The visual layout is not too complicated and easy to read while the hierarchy of texts grabs the attention pretty well.

PROJECT 3+4 — TYPEFACE SPREAD +VIDEO

For project 3 and 4, I was randomly assigned the typeface, Garamond. Because we were not able to choose our own fonts, I didn’t care about familiarizing myself with the typeface. I went for basic background research of its creation and the history of its development, but it was hard to motivate myself to actually get to know its personality. Just knowing that Garamond was designed in 1530 and that it was an old-style serif, I came up with a spread that displayed my shallow understanding of the font.

Since Garamond is commonly used for body text in lengthy books, I made my layout as if it was pull out from a book. The color scheme and the general mood of my poster iterations were depicted by the old usage of Garamond, which turned out to be an inaccurate representation of the font since the typeface is used for so many different purposes in the modern era.

In order to do some deep research, I printed out all the letters in Garamond to analyze the anatomy of the font. Because the font was built based on natural handwriting, it was interesting to see the inconsistent curvature within each letter.

This was where I actually felt like I wanted to learn more about why this font is still widely used despite its long history. Garamond is an original font that has inspired the birth of several other fonts. Because of its elegance and handwriting-like characteristics, the typeface is extremely versatile and adaptable which is one of the reasons why people are so attracted to Garamond. The round-edged serifs make Garamond less formal than Times New Roman but more formal than Arial. Also, the kerning and the width of the letters are shorter than most fonts which is why it is economical and extremely appropriate for book with many pages. The main personality that I came to conclusion is that Garamond is a friendly font that everyone is familiar with. Growing up, most people have probably been exposed to this font or even grew up with this font because Garamond was used for the original prints of most Dr. Seuss books and the whole Harry Potter series. Knowing these facts about Garamond made my build a feeling of empathy for the typeface just like when I get to know another person.

The tricky part of about getting to know my typeface was the history of it. Garamond was designed by Claude Garamond in 1530, and through many hands of other designers, the typeface has been published in numerous versions based on its usage of content. The most commonly used variations are ITC Garamond, Adobe Garamond, Monotype Garamond, Garamond Premier, and Garamond Simoncini. It was a challenge for me to research about all these fonts because they had their own history separately. The timeline of Garamond is vividly broad due to its versatility.

My research about Garamond broaden my visual perspective of my spread. I saw which color was appropriate for my spread. I mainly use orange, yellow, and red because I believed that it increased attention to such a ubiquitous font. Analyzing the anatomy of each font was extremely helpful in designing these spreads because I knew special characteristics about them. For me, the lowercase g seemed interesting and bit funny: just the way it looks individually, taken out of context. I wanted to highlight the unique design of the g, and so I placed it individually on the right. I rewrote my copy to include information necessary to understand the roots and personalities of Garamond, and I feel like that is where the strength come from in the spread.

This is the final iteration of my poster. I included a quote from Claud Garamond, the designer of the typeface to show the objective of the font and what the font was designed to do. The more I looked at the lowercase g, it looked like a magnifying glass, so I placed the alphabets inside the counter. I was a little bit hesitant about the text placement on the right because it visually broke the tail of the g, but I left it like this because I didn’t see much readability issues. Overall, my spread does a good job in translating my views towards this typeface, but unless the viewer accesses the text, it might seem confusing to what and how Garamond is as a typeface.

Although I did come up with a spread, planning the after effect video was harder than I thought. In the process of choosing my music, I had chose a song called Good Times 5 by Peter Sandberg that conveyed a feeling of simplicity and bright just like the typeface.

This is the first story board that I came up with. I was pretty much set on how I wanted to start off my video. I believed that it was important for me to build empathy to the views when introducing the typeface because that was personally what made me connect with Garamond. So I started off showing all the familiar logos that used the typeface. And then introducing the actual typeface was where I was stuck on for days. I wanted to highlight my own voice in the transitions and slides, but I didn’t know whether to keep it consistent through out the whole video or to change it up as the story develops. I honestly thought I spent too much time on thinking on what I wanted to do, so I just had to go for it. I started on my video on After Effects and built my story board as I went. I noticed that working with the song I chose was challenging because of the off beat of the intro of the music. I changed the music to Unstoppable by Lianne La Hava, something more modern and upbeat because I thought it fit the introduction of the video.

Although I did built story boards for my layout, visualizing certain transitions and movements were hard on illustrator. For this project, most of the skills that are shown in the video were based on trials and playing around with the program itself. I overall think I did a good job in mentioning all the content that were necessary for understanding the font. If there is one regret to this video, it would be that I couldn’t figure out a way to show Garamond in the context of Harry Potter and Dr. Seuss since this was one of the most exciting information about the typeface for me.

Julie Choi

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade