Newphoria
The Project:
Create 2 design options for a health and wellness company that features both the product and highlights its benefits.
The Requirements:
Both designs should include all items in the wireframe with the freedom to arrange sections as needed.
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/1-3.png?resize=300%2C300&ssl=1)
Header & Menu area with introduction section – must have some sort of visual interest and a call to action
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/2-3.png?resize=300%2C300&ssl=1)
Section showing the 4 product categories with CTA to each page
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/3-2.png?resize=300%2C300&ssl=1)
Highlight area for specific products with CTA to that products category
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/4-2.png?resize=300%2C300&ssl=1)
Informative section about the benefits of using the products with CTA to learn more
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/5-2.png?resize=300%2C300&ssl=1)
Blog section showing the latest 3-4 entries
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/1-4.png?resize=300%2C300&ssl=1)
Social media feed or section showing recent customer reviews and images
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/2-4.png?resize=300%2C300&ssl=1)
Call to action with form sign-up to blog subscription and standard footer
![wire](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/wire.png?resize=1080%2C4211&ssl=1)
Design #1:
Newphoria “White”
What sets it apart:
- Light & Bright
- Angular lines that draw the eye down and around the page
- 4 main solid colors
- use of Navy instead of black creates a calmer feel
*Click the Logo in the mock-up below to re-watch the entry animation.
Design #2:
Newphoria “Organic”
What sets it apart:
- Hand-drawn illustrations and bright colors
- Opening motion immediately draws you in to the product categories
- Use of colorful imagery that aligns with each product category
*Click the Logo in the mock-up below to re-watch the entry animation.
Software & Technique
Adobe XD
Adobe Illustrator
Illustration
Adobe Rush Premier
Composition
Interaction Design
Adobe Photoshop
Repetition
Whitespace
Alignment
Balance
Product Design