Created with the objective of experimenting with motion in web design, this interactive work sample acts as a landing page for a small coffeechain. The motion design and art direction were inspired by theexperience of sitting down for coffee with friends or colleagues.
Low Fidelity Layout
The process began by identifying key components the website would require. Various grayscale layouts were then created to determine a rough layout of content. As well, at this stage was brainstorming of final visuals and accompanying animations.
High Fidelity Visual Design
The completion of the visual design and all required assets was then completed. It was at this stage that the look and feel of the overall product was decided upon. Research into competitor’s stylistic choices was also incorporated at this stage.
High Fidelity Mock Up
With the visual design complete, the design was mocked up in context and the animations for the final design were planned.
Finally, utilizing After Effects, a demonstration of the final product was created. This stage finalized the look and feel of the final proof of concept.