Desktop & Mobile UI Prototypes
This General Assembly Visual Design project challenged us to create a single “long-scroll” style landing page and responsive mobile version for iPhone 8. The design was based on a creative brief provided for us which outlined LiquidLab, a boutique and privately owned cold press juice company whose primary audience, of mainly professional women aged 30-45, are health and nutrition conscious. The company will share information on healthy living, nutrition, and focus on body positive messages. Long term healthy living and diet adaption/augmentation is the core goal.
Step 1: Project Goal & Strategy
This exercise was meant to distill from the provided creative brief what is the company’s main objective and strategy. This first stage of the project aided me in better understanding LiquidLab’s goals and who I was designing for.
Objective:
Create customized nutritional juice options for a health-conscious demographic.
Strategy:
Cater to user’s needs by providing daily routine of healthy, locally sourced juices customized for their lifestyle and goals.
Step 2: Brand Keywords
As a group of a designers, we brainstormed a list of keywords from the creative brief. This involved pulling descriptors from the brief and adding our own words (adjectives and nouns) that best fit the company’s goals and target audience.
Produce
Sophisticated
Vibrant
Modern
Customized
Cosmopolitan
Local
Lifestyles
Intelligent
Feminine
Healthy
Juice
Diet
Fresh
Body positivity
High end
Nutrition
Easy/convenient
Tasty
Yoga & Exercise
Step 3: Mood Board
In creating the mood board I strived to envision the key words pictorially, while focusing on images that put forth the feeling of freshness, nutrition, and vibrant juices and produce. While the final project did veer in some ways from this original mood board, I believe the essence of the chosen images, illustrations, and color scheme carried over and helped in defining the final look.
Step 4: Hand-Drawn Wireframes
sdfsdfsdfsdfsdsdfdsfsdfsdfsdfds
Step 5: Digital Wireframes
sdfsdfsdfsdfsddsfsdsdfsdfsd
Step 6: Style Guide
asfaasffffsdfsdfsdfsdfsdfsd
Step 7: Desktop Design
sdfgsdfgsdfgdsfhsdfhsfg