good vines website
The goal of this project was to design and animate a mockup of a plant shop website that reflects strong visual branding and smooth interface design. I worked with Alicia Lee to create this video.
Illustrator | After Effects
Although we brainstormed and bounced ideas off each other very consistently, my main focus was the visuals while Alicia’s was the motion and animation.
In Illustrator I designed the layouts for each page (other than the loading screen) and created the vector images and assets such as the plants and buttons. I wanted to make sure the layout contained a good amount of information so the consumer could quickly find what they were looking for was there but also keep it clean and easy to navigate. I also had to think of what other assets Alicia would need when animating such as the navigation drop down options.
When designing, I kept in mind what aspects the viewer would see first in order to catch their attention and explore the website. Therefore, I made the sales and cheaper prices the brighter terracotta color to intrigue the consumer. I researched actual plant websites to see what information was often displayed on the home page. There is where I got the idea to add the ”Plant Quiz” button incase someone isn’t sure what plant(s) to get. I also looked at “Shopping Cart” set up and added the smaller details like details about the product in the cart and suggested products at the bottom.
Initial brainstorm
The company gave these words for their website:
funky
soft corners
balance
natural
stripes
1970s
DIY
“You can come up with the color palette, we’re leaning toward earth tones, but could you add a good accent color?!”
“We want it to be fun, but not busy, you know? Like how taking care of a plant should be, it should be fun but not too much.”