A4.4 Design System — Wrapping up

This week I kept iterating my 3 pieces of poster, spread, and the website homepage.

Here are some messy notes after meeting with professor Ansari —

Posters

final 3 candidates with a few variations

illustrator — rotating text box to vertical by: type → create outlines

I chose to iterate the 3rd one since the alignment is more comfortable for viewers. I made the date and time text smaller by 2 pt, decreases the leading between each presentation, and made the ticket information and the website closer to each other. I didn’t shorten the distance between 2–3pm and 3–4pm because I want them to stay in their own bubbles.

my poster with grids & my final poster —

Spread

basic structure & I fit the pictures in the margin & took off one picture on page 3; I also changed the pull-quote to the 2nd column from the 1st column. I learned that I shouldn’t do too much variations on one page, that would make the design too complex and readers couldn’t find a focus.

I finally decided to delete the pull quote since it doesn’t look good with it sticking out of the constrained margin.

my spread with grid system (I used a 4 column grid mainly for the first page, for the rest I used the 4 column as 2 columns)

My final spread

Website

I used 12 column grids and made text size smaller (before it was 40, which is too big)

I also learned to use mask in Figma and created an overall better structure for the website. Here is a draft outlook of my website design.

feedback I got during class via miro

After getting more feedback from my peers and professor Ansari, I edited my website. I learned that it’s important to check the preview of the website prototype. Updates are —

1. changing the shape of the button (users are not used to oval shapes)

2. leadings of the paragraph decreases by 3pt

3. shortening the width of the paragraph (previously it was longer than half of the page)

4. decrease the paragraph size

My final final website —

I really enjoy this 4-week long assignment and I like my final results. I designed my poster, spread, and website in the way that they share similar elements — the color scheme of light purple and green. I am more comfortable now to design with the grid system and found it a helpful tool.

Special thanks to Professor Ansari, Lauren, Stacey, Tina, Kseniia, and Katelynn for helping me along the way.

All three PDF files are uploaded to my Google Drive