Interview Web Publication
Brief
Create a web publication that features interviews with creative people.
You will design and code three pages:
- An interview page from content you created
- Another interview page from content you received from a class mate
- A landing page
For your content, conduct an interview with one of your class mates.
Design a typographically sophisticated web layout for your content. Then, take the content from one of your class mates and create a second page. Also include a landing page.
At this point it should go without saying that you will code these pages in a responsive and mobile-first way.
Requirements
Interview Content
For your interview, come up with 5–10 questions. Then have a conversation in the studio space of your interview partner (not on zoom!). A few topic suggestions:
- Favorite projects
- Their upbringing
- Hobbies
- Influences and inspirations
- Daily routines
Try to have an organic conversation and see where it leads. Record the interview and then transcribe the recording via AI. Edit for clarity.
Take a few pictures of your interviewee and of their space. Also ask your interview partner to send some images of their work and anything else that illustrates what you talked about.
In the end you should have:
- Questions & answers
- Images and captions
- Date of the interview
- Pull quotes
- Short bio of the interviewed
Page Elements
For your page design, implement different kinds of information so that you have a rich page:
- Page header
- Name of your site (make one up!)
- Navigation: Interviews, About, Subscribe
- Page footer
- Social media share icons (they don’t have to actually work)
Dark Mode
Design two different color schemes: one for normal light mode and one for dark mode. Include a Light Mode/Dark Mode switch button in your page header.
Optional: Slideshow or Lightbox
Try your hand at implementing a JavaScript plugin. Include either an image slideshow (e.g., Slick) or an image lightbox (e.g., Magnific Popup) as part of your design. This is optional!
Landing Page
Include a simple landing page that links to the two interviews.
You may include “fake” links to other interviews so the landing page looks more real.
Learning Goals
- Create typographic hierarchy and a beautiful reading experience
- Don’t be afraid to use scale for dramatic impact. Big type is okay!
- Use Figma to create mockups
- Employ dark mode option with CSS variables
- Accessibility
- Color contrast
- Proper headers (document outline)
- Alt text for images
- Employ a JavaScript Plugin (optional)
Inspiration
Pay special attention on creating typographic hierarchy. Be inspired by the best of contemporary web typography. Some examples: