Designer Series — TRACY KROOP
zine + web design
Research, interview, and write a biography of my assigned Carnegie Mellon University alumni designer, illustrate how types of content and relationships can be organized visually, and weave together layers of information in a visual form. The objective is to design and present a clear and effective multi-layer story first in the format of a zine and then transferred digitally into a responsive website for viewing on desktop, tablet, and mobile. The 3 spread zine is also a component of a set of 18 total, comprised of those made by the entire class and is intended to function as a cohesive group.
the zine —
I started out by organizing and planning a visual sequence timeline that contains the content of my biography and the images I planned on including. I decided to divide my content into a chronological background section, informative section, and a reflective section, with the question + answer and my reflection parts intertwined within each section. Throughout my spreads, I kept to a simple color palette using mostly black and green, incorporated small graphic elements inspired by my designer’s style, and created an info-graphic diagram on the back cover to illustrate how my designer shares a strong influence of typography along with a few other CMU alumni designers in the set of zines.
the website —
I decided to keep my layout simple and use one column text throughout the website, and work with a simple 12 column grid for the desktop version and an 8 column grid for the mobile version. I went with a multi-page website as the biography content I wrote contains clear separate sections.
While moving on to the actual coding, I made minor adjustments along as I work. The biggest adjustment made while coding was the home page since I switched out elements in my spread and also changed my relationship diagram and thus also had to redesign my home page of my website. Also, another change that I adapted was to make my Q&A a different color to further distinguish it a little more from the other content.
For my mobile version, I made all the images full width and the body text 80% width of the screen to allow easier viewing and reading. I also combined my header into a hamburger menu so the tabs won’t be interfering the page and also allowing users to click and interact with the page to navigate.
information organizing —
with entire class
content planning —
type sheet setup —
website wireframe —
website prototype (in Adobe XD) —
personal insights —
Throughout the working process, I realized that the positioning of each of the sections in the spreads is critical since sometimes I intended for people to start reading from the heading and get drawn to the Q&A section. Thus, I had to re-think through the positioning of my text paragraphs and images, and also made the questions black instead of green to prevent it from creating too much attention. I also learned the importance of incorporating a variety of text treatment to create hierarchy within each spread, and thus changed the question part into a serif font to differentiate it from the bio text after experimenting with various possibilities. I also found that paying attention to the white spaces in between image and image or image and text is important and that it would be best to keep them consistent to create a cohesion.
Working on the website with no previous coding experience at all, I definitely struggled throughout while trying to make my design and wireframes come real. Throughout the process, due to print and web being completely different formats of presentation, I learned to be constantly open to making adjustments accordingly in order to better present information and tell the story effectively. Planning out and then physically adjusting the website from desktop view to tablet and mobile view also helped me gain a clear picture of how responsive website works and how designers are critical in creating smooth, effective, and comfortable visual experience for viewers with different screens. Working on the website definitely helped me gained a solid understand of how web design works and inspired me to think about how I can further incorporate UI design in websites.