Inspiration
Because this assignment is purely typographic, I began by looking for examples of typography-based posters. I chose the "Visiting Designers Lecture Series" content package, so I was looking for designs that were both functional and artistic. Pinterest was my source for inspiration, and I found that the designs which used bold colour and large, sans-serif fonts were my favourite.
Sketches
I used Figma to create some rough layouts based on the designs I liked. I used Helvetica as a base for a sans-serif and played with horizontal and vertical layouts. I ended up with these two designs. Though the grid nature of the second design was interesting, I decided that the first design was cleaner and left more opportunity for later text animations.
Colour Scheme
After I had chosen my preferred design, I looked for a good colour palette. Because this project is purely typographic, I knew that colour would play an important role. I wanted a palette that reminded me of painting swatches to help invoke the feeling of "designers". I used the colours from this palette and started experimenting with placement (keeping in mind hyperlink hovering and other text animations that might impact this).
Implementation
Finally, it was time to take the design to code. I began by just laying out the type hierarchy and then gradually adding the styling and positioning. It quickly became clear that the design I had on Figma wasn't translating to the web very successfully. I had designed for the viewer to see the entirety of the poster at once, but a browser wasn't showing that, and so my most important piece of type ("Visiting Designers") was getting lost.
Adjustments
I decided to go back to Figma and see if I could fix this problem, keeping in mind what would look best for the web. Though I really liked the dynamic nature of the vertical text, it was simply too large for it to work. Once I switched it back horizontally, it was immediately more readable. With this change came a lot of white space below the header, so I decided to enlarge the logo of the school to make it more of an element. I also noticed that the type in the paragraphs was small and difficult to read, but I liked the placement, so I decided to animate it so that when you hover it enlarges.
