Project 4

Interview

Brief

Conduct an interview with an IxD ArtCenter student who is in their 7th or 8th term.

Use the content from the interview to design a typographically sophisticated web layout and code the page.

You will also code a second interview page (with an interview from a class mate) and include a landing page.

Code these pages in a responsive and mobile-first way.

Requirements

Interview

Hopefully you already conducted your interview. If not, do it as soon as possible. You will need the answers in a written format.

Come up with 10 questions to ask them. A few to get you started:

  • Why did you decide to study at Art Center?
  • What’s your favorite gallery/museum in Los Angeles?
  • What was the most important class you took at Art Center so far?
  • What projects are you working on right now?

Interview Content

In your design, you should include:

  • Images and captions
  • Date of the interview
  • Sub headlines
  • Pull quotes
  • Short bio of the person you interviewed

Page Elements

For your page design, implement all kinds of secondary information so that you have a rich page:

  • Page header
    • Name of your site (make one up!)
    • Navigation: Interviews, About, Contact
  • 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.

Landing Page

Create a landing page that links to the two interviews. (To make the project feel more realistic, you can include references to additional interviews. These extra links don’t need to be functional, however.)

Learning Goals

  • Create typographic hierarchy and a beautiful reading experience
  • Use Figma to create mockups
  • Employ dark mode option with css variables
  • Accessibility
    • Color contrast
    • Proper headers (document outline)

Inspiration

Pay special attention on creating typographic hierarchy. Be inspired by the best of contemporary web typography. Some examples: