Landing page for an everything sneaker's business.

Timeline:

May 2023 - Present

Role:

UX/UI Designer, Web Designer, Web Developer

laptop image
phone image

view site

view code

How I made it

  1. Early Brainstorming & Lo-fi Wireframing
  2. Hi-fi Mockups
  3. Feedback & Iterations
  4. Coding

Early Wireframes

I started my design process by researching and drawing inspirations from other sneaker websites. I sketched out some basic design layouts, experimenting with spacing and typography.

stash it wireframe 1 stash it wireframe 2 stash it wireframe 3 stash it wireframe 4 stash it wireframe 5 stash it wireframe 6

Hi-fi Mockups

After I sketched my basic designs, I converted them into Hi-fi mockups on Figma. My client wanted a simple, modern looking website with #16181d and #fff as the main colors. Here's what I came up with.

StashIt hiFi design 1 StashIt hiFi design 2 StashIt hiFi design 3 StashIt hiFi desigh1

Feedback & Iterate

I presented these designs to my client to see which one he liked the best. He liked the white background with the #16181d text color. He also liked the hero section of the third design and the line art images describing each service. This is what I came up with as my final design, which includes both desktop and mobile versions.

stashIt Final design desktop stashIt final design mobile stashIt final design dropdown menu

Coding

Finally, I translated these Figma designs into code using HTML, CSS, and JavaScript. To improve the user experience, I added text animations and scroll revealing animations using a combination of GSAP, ScrollRevealJs, and CSS.

GMB