“The Forbidden Drink”CASE STUDY

BackgroundBrief:History is always interesting, especially when it involves one of the world’s favorite beverag-es and illicit activities. The goal of this web-site was to create a fun almost “storybook” like website that makes the history of coffee fun and entertaining but leaving people with the sense that they learned something.

Story:Retelling the many times throughout history coffee was banned, involving humorous lan-guage, and detailed anecdotes to capture the ridiculousness that history truly has to offer.

StrategyStatement:The strategy of creating this website is mak-ing an entertaining and visually engaging website that discusses history in a way that is both educational and entertaining. I employ detailedillustrations and layouts of the process to keep it visually enticing, but also the wording would be personal or sarcastic/funny but also reliable. This would set my website apart from the few other articles that are mainly in basic blog formats.

Research

Word Associations:warmth, spooky, caffeine, fun, red, gothic, artistic, black coffee, drink, illegal, fire, roasted, religion, ground, mug, sip, wired, brewing, story.

Story structure:me walking you through the history chronologically, showing you illustrations associated with the stories that make it feel almost like a storybook or comic.

Brainstorming:With my story, I think the thing that helps it stand out is it combines an educational aspect with more engaging content and visualelements. It will show the artistry and excitement that I feel when I first read about this, but still completely factual and educational. The goal is to educate but also entertain with the visuals and storytelling.

Audience:This website is for people of all ages, but due to its illegal topic, would most likely be best viewed and understood by adults. The viewer should be someone who enjoys coffee or is interested in learning about it.

Competition Commentary: https://atlascoffeeclub.com/pages/how-to-make-the-perfect-cup-of-coffee

- simple and clean site. Goes into technical details and facts about brewing coffee, with cute and simple visuals. Not super interesting to look at, but clear and concise for information.

https://www.askchefdennis.com/perfect-cup-of-coffee/

-Stereotypical cooking blog layout. Website is very busy and crowd-ed, and it takes a while to get to the important details of the blog. The website does incorperate storytelling, but that doesnt translate visually so it comes off as more of a chore to read.

https://www.sci.coffee/

-Absolutely love this website. very visually engaging, and interactive. They have a constant color palette and a mix of icons and photogra-phy as visual elements. I would say this is one of the best websites I have seen that talk about coffee. Personally, my version would be a bit more artistic, but this site was obviously made by a designer who considered user experience, making it more visually engaging and not as wordy.

https://goop.com/recipes/the-perfect-cup-of-coffee/

-When I tell you I was absolutely floored to find out Goop had a arti-cle on how to brew the perfect cup of coffee, I mean it. Overall I like the fonts and the minimalist approach to the website, but this site feels more like its trying to sell you something than educating you on the coffee. Its distracting and cluttered despite being minimalist.

https://www.newyorker.com/video/watch/how-to-make-the-per-fect-cup-of-coffee?source=search_google_dsa_paid&gclid=CjwK-CAiAsaOBBhA4EiwAo0_AnErRZ4zPmAOo2f7S1t7aaztnfWx-IzXTfT-1bzHlwbmWOcjTgPPvB0RoC1i0QAvD_BwE

- I really liked this. It was very simple, but this page really let thevideo, and specifically the people in the video talking about the coffee stand out, almost in a quirky way. Definitely would trust these people and not be expecting them to try to sell me something.Very enjoyable.

ResearchMoodBoard

Concept Development

Imagery Sketches

Wireframing

Outcome The outcome of the project, while not exactly what I had envisioned and put together in XD, I am over-all pleased with. Especially enjoyed applying ani-mations and bringing my illustrations to life, adding another layer of interactivity to it.

I ran into two major challenges when working on this project. The first being choosing my topic. I knew I wanted to do something fun, entertaining, but also educational, and after going through at least 20 ideas, I finally settled on the one I ended up going through with, which made me fall behind on my progress. For myself, having unlimited op-tions and potential for a project can be overwhelm-ing, so it is a miracle I landed on one I really liked.

The second major challenge was using skeleton to build similar layouts to the more free-flowing ones I sketched and designed in XD. Skeleton is still super new to me and feels very rigid compared to how I learned how to create layouts using the float-ing method. I underestimated the amount of effort it takes to adapt to new methods, and overall, I regret that as it lost me considerable time when building my website.

Overall, I think I did a decent job for this project, considering I have never done anything like it before. It was fun, but it also made me want to go back and focus more on the technical aspects of the project over putting most of my effort into the creative ones.

Final Design

XD Design

XD Linkhttps://xd.adobe.com/view/bb452a4d-03b3-4663-7d3b-4c93ac954a37-cd74/?fullscreen&hints=off

Website Linkhttp://myweb.students.wwu.edu/jackyj/360/Project2/Project2.html