Group 126 (2).png
 
pink 2.png

 

Project

Athré Facial Plastics

The client wanted to refresh and rebrand their current home page to better fit with their users needs. My job was to create a home page mockup for the client.

 

Visual Design

Sept 2020 - 14 days

 

Intro

Athré Facial Plastics is Houston’s leading facial plastic surgeon. They offer surgical and non-surgical treatments along with products to help with recovery and help with anti-aging.

 

 

Style

Look and feel

  • The client selected a theme they preferred along with some competitors sites they liked. To help guide the look and feel of the new site

  • The client wanted font and color palette options to help guide their new branding decisions

 
 
 

Theme

 
Screen Shot 2020-09-17 at 2.09 1.png
Mask Group.png
 
 
 

Competitors

Mask Group (1).png
Mask Group (2).png
 
 
 

Style Options

Font_color_options (5).png
 

 

Sketches

Created sketches to work out some quick ideas and to parse out all the sections and their order.

 
 

Insights

 
  • Kept things fairly simple in the layout to be able to focus more on the sections and order

  • Wanted to get out the idea and move on to the next phase of designing

 
 
 
Group 127.png
 

 

Wireframes

Created wireframes to get the layout and sizing set.

 

Insights

 
  • Realized the layout of the Facial Surgery, Facial Rejuvenation, and Med Spa Services sections were all three related and needed to be set up differently

  • The Shop Our Skincare Products section needed to display some products and the layout needed to allow for such

 
 
 
Group 130.png
 

 

Visuals

Added visual elements and refined product

 

Insights

 
  • Client wanted more feminine feel to the website and visual interest to sections. Added wavy curl to hero image and products sections

  • Images used were place holders until we got official images from the client

  • After feedback decided to remove the teal background color and waves to a more simple and modern feel

 
 
 

First Iteration

 
Group 133 (1).png
 
 
 

Final Iteration

Group 143 (1).png
 

 
 

Primary Colors

Group 219.png
 
 
 

Typeface

Group 136 (1).png
 
 
 

Hierarchy

Group 137.png
 

 
 

Grid

Group 138 (1).png
 

 

Takeaways

What I Learned

 
  • Created design system to apply to the rest of the site for consistency

  • It is important to remember to check for color accessibility

 
 

Next Steps

 
  • Create Facial Services Page

  • Create Rhinoplasty Page

  • Apply design system to the rest of the website