Wayne Cen

YSDN4003 | Process Site

Assignment 05
Link to Marketing Website
Step One

I began with a low-fid sketch to lay out concepts and features that I thought would be visually interesting to include in the marketing website. I took this as an opportunity to explore Webflow since it's my first time creating a marketing website with it ⁠— I wanted to explore concepts like scrolling parallax elements and other types of animations. While conceptualizing, I set guidelines for myself to stay within the visual identity established in the application.

For layout inspirations, I checked out sites on land.book and referred to other design inspirations I've found (expanded in the section below).

Step Two

The second step I took was to layout all the sections of the website using components from the application. Using placeholder images and text, I included necessary components like the hero, features section, image carousel, footer, etc.

To expand on websites I gathered inspiration from, I found that Figma's landing page stuck out to me. Later in the process, I used it as a general reference for 'professional practices', such as including CTA's and descriptions etc. I also really enjoyed looking at the product site for the Google Pixel 4, the Pixel 4's site made me want to explore the principle of size. I also may have 'stole' the sticky header concept and implemented it on the marketing website as a sticky nav which leads to different anchors on the site.

For the animations, I really wanted to make elements move in response to mouse movement, but it just looked/felt too gimmicky. In the end, I fell back to simple, bottom slide/fade in, text components (illustrated components fade in from their respective sides).