{"id":52,"date":"2026-10-05T08:00:38","date_gmt":"2026-10-05T15:00:38","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/?page_id=52"},"modified":"2026-10-07T06:57:10","modified_gmt":"2026-10-07T13:57:10","slug":"project-3","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/project-3\/","title":{"rendered":"Project 3"},"content":{"rendered":"<h2>Interview Web Publication<\/h2>\n<h3>Brief<\/h3>\n<p>Create a web publication that features interviews with creative people.<\/p>\n<p>You will design and code three pages:<\/p>\n<ul>\n<li>An interview page from content you created<\/li>\n<li>Another interview page from content you received from a class mate<\/li>\n<li>A landing page<\/li>\n<\/ul>\n<p>For your content, conduct an interview with one of your class mates.<\/p>\n<p>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.<\/p>\n<p>At this point it should go without saying that you will code these pages in a responsive and mobile-first way.<\/p>\n<h3>Requirements<\/h3>\n<h4>Interview Content<\/h4>\n<p>For your interview, come up with 5\u201310 questions. Then have a conversation\u00a0<em>in the studio space\u00a0<\/em>of your interview partner (not on zoom!). A few topic suggestions:<\/p>\n<ul>\n<li>Favorite projects<\/li>\n<li>Their upbringing<\/li>\n<li>Hobbies<\/li>\n<li>Influences and inspirations<\/li>\n<li>Daily routines<\/li>\n<\/ul>\n<p>Try to have an organic conversation and see where it leads. Record the interview and then transcribe the recording via AI. Edit for clarity.<\/p>\n<p>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.<\/p>\n<p>In the end you should have:<\/p>\n<ul>\n<li>Questions &amp; answers<\/li>\n<li>Images and captions<\/li>\n<li>Date of the interview<\/li>\n<li>Pull quotes<\/li>\n<li>Short bio of the interviewed<\/li>\n<\/ul>\n<h4>Page Elements<\/h4>\n<p>For your page design, implement different kinds of 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, Subscribe<\/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>Optional: Slideshow or Lightbox<\/h4>\n<p>Try your hand at implementing a JavaScript plugin. Include either an image slideshow (e.g., <a href=\"https:\/\/kenwheeler.github.io\/slick\/\">Slick<\/a>) or an image lightbox (e.g., <a href=\"https:\/\/dimsemenov.com\/plugins\/magnific-popup\/\">Magnific Popup<\/a>) as part of your design. This is optional!<\/p>\n<h4>Landing Page<\/h4>\n<p>Include a simple landing page that links to the two interviews.<\/p>\n<p>You may include &#8220;fake&#8221; links to other interviews so the landing page looks more real.<\/p>\n<h3>Learning Goals<\/h3>\n<ul>\n<li>Create typographic hierarchy and a beautiful reading experience\n<ul>\n<li>Don\u2019t be afraid to use scale for dramatic impact. Big type is okay!<\/li>\n<\/ul>\n<\/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<li>Alt text for images<\/li>\n<\/ul>\n<\/li>\n<li>Employ a JavaScript Plugin (optional)<\/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:\/\/wapo.st\/3XNp9AM\">Washington Post<\/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<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 [&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-52","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":2,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/52\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}