Grids
A Real Simple Analysis
08–31 Project Kickoff
Factors that we first identified in breaking down Real Simple
Individual Focus
- Use of type: There were 3 different typefaces used — Interstate, Joane Black, and Lora. While Interstate and Lora are more simple and modern, Joane Black adds boldness and energy to the publication.
- Color: color was the first thing that I was able to identify while skimming/scrolling through the web and print publication. With a feminine touch, there was a wide variety of hues incorporated, emitting a very happy mood.
- Content focus: The magazine is mostly life-style related, with contents ranging from cooking tips to gardening.
Struggles
- Challenging to find a fixed grid for web pages, because there doesn’t seem to be a pattern of equal columns.
- I’m beginning to work on analyzing the grid first, but it is a little bit confusing; I should work on connecting all my detailed analysis back to the hypothesis.
09–02 Worksession I
- I was too caught up in the idea of finding a perfect grid, but after talking to Andrew and going through the structure of the website in “inspection” mode, we realized that there is a fixed ratio to different visual elements on the web page but not an equal-length column.
09–05 Mock Presentation
Takeaways
- Keeping the narrative tone of the introduction consistent throughout the entire presentation, especially in the analysis section; since I present a lot of the visual system analysis, I should find a way to maintain the communicative tone
- Condense the section regarding whitespace, and add more examples of grid analysis
- Dominant use of negative space and blue type in the intro slide gives out a clean but cold feeling, which doesn’t match the colors of Real Simple.
09–06 Refinement I
09–07 Refinement II
Considering the feedback I received from the mock presentation, our group decided that adding motion to show the visual system in web would be useful. However. I realized that with the infinite scroll of the Real Simple web page, I would have to show multiple grids in the same page.
Conversation with Vicki:
- Be as technical as I can to show the moving grids within the same scrolling page
- Control the speed for responsive grid page
- Consider talking about “featured article” in print, as they are the main layout that other articles refers to.
Change in color: After the dry presentation, our group thought a lot about how to handle color so that it would be non-distracting yet representative of the colorful image of Real Simple. Along with getting rid of the cold blue typeface, we added a pink gradient background.
Change in print grid order: I decided to place the key feature magazine spread (above) to introduce the print grid, as it is the most representative article of the edition, and we were able to identify similar layout patterns to this one in other spreads as well.
Whitespace: I got rid of the discussion regarding micro whitespace as it was too much into detail, and condensed the information into one slide. To give the audience a strong presence of the whitespace, I blacked out the background and the content area so that the whitespace would pop more.
09–09 Final Presentation
The night before the presentation, we made sure that everyone’s part was on track to ensure that we were well prepared for the final presentation. I put a lot of effort into making my script match the progression of the slide, especially because my slides had a lot of animations and thus the timing of clicking was crucial. We decided that it would be best that I use a mouse as a second clicker so that I would be the one clicking while I speak.
While listening to other’s groups, one interesting thing that I learned was that I was able to view others work much more objectively. I would think that certain parts could be improved, then realize that our group could have done the same thing to enhance our analysis. Not only I learned about the publications themselves, but I also learned so much about how different groups present and communicate to the audience and how they choose to visualize analyses.