This was a project at the Visual Design course at General Assembly to create a website design for the health drink client, LiquidLab. The website design incorporated visual design principles I learned during class including Gestalt principles of perception, color scheme, typography, visual hierarchy, contrast and balance.
Objective: Establish LiquidLab as a healthy and customizable premium juice supplier and increase Liquid Lab’s membership.
Strategy: To convince health-conscious, urban, upper-income people to improve their health by joining and trusting the LiquidLab community, instead of choosing an alternative, because LiquidLab offer superior quality, health benefits, customization, convenience, and locally-source products.
Visual Design Process
- Create personas of the client’s target audience
- Conduct competitive research to ensure the client’s brand is distinct
- Create mood boards to explore different look and feel styles
- Use grayscale low-fidelity designs to examine layout options with Gestalt principles
- Develop various color schemes possibilities
- Create low-fidelity designs with color
- Finalize primary and secondary colors scheme
- Select typography and button styling
- Built high-fidelity final designs for desktop and mobile
- Gave a client presentation
Step 1. Personas
Using the client’s information about their target customer base, I created personas to keep in mind who the audience is throughout the entire design process.
Step 2. Competitors Research
To understand the design styling competitors in the same industry were using, I conducted a competitors research analysis. This helped me generated ideas for how content might be displayed on the website as well as ensure that the LiquidLab branding is distinct from the competitors.
Step 3. Mood Boards
I explored 3 different look and feel styles through mood boards. These mood boards later gave me ideas for possible typography and color scheme choices later in the design process.
Earthy and Green
Friendly and Approachable
Step 4. Low-Fidelity Designs Without Color
With an understanding of the content the client needed on the website, I created low-fidelity designs to explore possible layouts and interface elements. These designs were created with the visual Gestalt principles to help the user better understand the information on the page.
Step 5. Color Schemes
These are the 6 various color palettes I explored as potential options for LiquidLab.
Step 6. Low-Fidelity Designs With Color
Combining the grey-scale low-fidelity designs with the different color palette options, I created design layouts that incorporated color. During this process, I explored potential options for the main background color, section background colors, text colors, and layouts.
Step 7. Final Color Scheme
I chose the monochromatic green color palette to signify LiquidLab’s healthy and natural branding while giving LiquidLab a clean and distinct look from its competitors. Red shades as the secondary colors are used as strong accents to draw the reader’s attention to key elements on the website.
After considering various typography combinations, I chose Alegreya for the headline and Open sans for the subline and body copy. This typography combination ensures high readability while giving LiquidLab an intelligent and sophisticated look that would appeal to the target audience.
Step 9. Final Visual Designs for Desktop and Mobile
Putting together the color scheme, typography, button styles, and copy content for the homepage, I created the final designs for both the desktop website view and mobile website view.
Step 10. Client Presentation
I gave a 10 minute presentation to explain my overall visual design process that led to the resulting final designs above. Here are my presentation slides for download.