{"id":66,"date":"2026-03-04T20:37:56","date_gmt":"2026-03-05T04:37:56","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/?page_id=66"},"modified":"2026-03-04T20:44:33","modified_gmt":"2026-03-05T04:44:33","slug":"project-4","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/project-4\/","title":{"rendered":"Project 4"},"content":{"rendered":"<h2>Interview<\/h2>\n<h3>Brief<\/h3>\n<p>Conduct an interview with an IxD ArtCenter student who is in their 7th or 8th term.<\/p>\n<p>Use the content from the interview to design a typographically sophisticated web layout and code the page.<\/p>\n<p>You will also code a second interview page (with an interview from a class mate) and include a landing page.<\/p>\n<p>Code these pages in a responsive and mobile-first way.<\/p>\n<h3>Requirements<\/h3>\n<h4>Interview<\/h4>\n<p>Hopefully you already conducted your interview. If not, do it as soon as possible. You will need the answers in a written format.<\/p>\n<p>Come up with 10 questions to ask them. A few to get you started:<\/p>\n<ul>\n<li>Why did you decide to study at Art Center?<\/li>\n<li>What\u2019s your favorite gallery\/museum in Los Angeles?<\/li>\n<li>What was the most important class you took at Art Center so far?<\/li>\n<li>What projects are you working on right now?<\/li>\n<\/ul>\n<h4>Interview Content<\/h4>\n<p>In your design, you should include:<\/p>\n<ul>\n<li>Images and captions<\/li>\n<li>Date of the interview<\/li>\n<li>Sub headlines<\/li>\n<li>Pull quotes<\/li>\n<li>Short bio of the person you interviewed<\/li>\n<\/ul>\n<h4>Page Elements<\/h4>\n<p>For your page design, implement all kinds of secondary information so that you have a rich page:<\/p>\n<ul>\n<li>Page header\n<ul>\n<li>Name of your site (make one up!)<\/li>\n<li>Navigation: Interviews, About, Contact<\/li>\n<\/ul>\n<\/li>\n<li>Page footer<\/li>\n<li>Social media share icons (they don\u2019t have to actually work)<\/li>\n<\/ul>\n<h4>Dark Mode<\/h4>\n<p>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.<\/p>\n<h4>Landing Page<\/h4>\n<p>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\u2019t need to be functional, however.)<\/p>\n<h3>Learning Goals<\/h3>\n<ul>\n<li>Create typographic hierarchy and a beautiful reading experience<\/li>\n<li>Use Figma to create mockups<\/li>\n<li>Employ dark mode option with css variables<\/li>\n<li>Accessibility\n<ul>\n<li>Color contrast<\/li>\n<li>Proper headers (document outline)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Inspiration<\/h3>\n<p>Pay special attention on creating typographic hierarchy. Be inspired by the best of contemporary web typography. Some examples:<\/p>\n<ul>\n<li><a href=\"https:\/\/thegreatdiscontent.com\/\">thegreatdiscontent.com<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/blog\/should-robots-be-building-our-homes\/\">Figma Blog<\/a><\/li>\n<li><a href=\"https:\/\/ideo.com\/blog\">ideo.com\/blog<\/a><\/li>\n<li><a href=\"https:\/\/eyeondesign.aiga.org\/\">eyeondesign.aiga.org<\/a><\/li>\n<li><a href=\"https:\/\/theoutline.com\/\">theoutline.com<\/a><\/li>\n<li><a href=\"https:\/\/www.nytimes.com\/interactive\/2018\/05\/15\/magazine\/health-issue-my-adventures-with-hallucinogenic-drugs-medicine.html?searchResultPosition=9\">New York Times Magazine<\/a><\/li>\n<li><a href=\"https:\/\/www.interviewmagazine.com\/\">Interview Magazine<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-66","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":3,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/66\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/pages\/66\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/artcenterspring2026\/wp-json\/wp\/v2\/media?parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}