Vine Garden Films

Live Site

Vine Garden Films

Role

Visual Design

UI/UX Design

Web Development

Industry

Corporate website

Date

June 2022

About project

Vine Garden Films is a corporate Films Production House. They offer services about Fiction, Animation films and Brand Films. Now, they need the extremely creative and beautiful website which would be created from scratch. They hope that an ordinary person should just enjoy being on this website.

Brief

Design a extremely creative and beautiful website which can impress people.

Target

Impressing Big corporates and Potential employees.

Showcase the work and giving extraordinary work at industry beating prices and on phenomenal timelines.

Storage Scholars website on laptop and mobile

First screen of homepage

Following the principle of user-centered design, “Give visitors what they’re looking for,” we implement the following strategy

Redesign process

We used mind mapping to envision the website’s information architecture, prioritize the hierarchy of pieces, and create a fully functional website. To enhance the overall UX, we must anticipate their needs and present relevant information at each step. As a result, the site structure is influenced by various user types. It was able to simplify user flows between sites based on this by deleting unneeded pages, combining existing ones, and creating new ones as needed.

User research

Understand your client first

Wireframe

Low-fidelity version for website

High-fidelity design

Make them to be prettier and more attractively

Discussing about animation with clients

To know how website will be interacted

Feedback and fix

Discussing with developer about animation

Make developer clear all the effects

Build in Webflow

Make design come true

What challenges have our designers overcome?

Colors

See solution

We tried so many options of the shades of green for client to choose. The green color they want must bring the feeling of vine garden and freshness and youth.

Landing page

See solution

They wanted very simple landing page with just two button “See our work” will go to Our projects page, and “Get it done” will go to Home page. So we have to find the best way to make both of two buttons look so prominent and match the vibe of website.

animation for vine

See solution

To impress the user visit the website, our client want animation for the vine like this website: https://www.lemonade.com/giveback-2019. We provided the solution by combining the green vines, leaves and animation.

After redesign

Typography

Aeonik

With Modernist roots but details referencing mechanical early Grotesks, Aeonik positions itself as a Neo-Grotesk with a Geometric skeleton; with proportions that are wider than a typical Grotesk, but thinner than a typical Geometric Sans. Structurally, this creates a fantastic balance for both display and text use. Aeonik also offers vast character sets across each weight, with all Western European diacritics, Punctuation, Mathematic & Numerics. Opentype features allow multiple subsets, caps alternates, tabular and lining numerals, both proportional and old-style.

Colour Pallete

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. Green, the shades of green, and another gradient of green color bring the feeling of a vine garden and freshness and youth.