Frame Psychotherapy Custom Website & Branding
Why she chose to hire a Web designer
Melissa, the founder of Frame Psychotherapy, wanted a professional website that was modern and clean, reflected her love of nature, and allowed visitors to get a true sense of who she is as a person and a therapist.
Given that people coming to her site may be seeking therapy for the first time, she wanted her visitors to have a calming, engaging, yet unique experience. They needed to be able to navigate the site and book appointments with ease, whether they were a prospective or returning client.
The Branding
Melissa wanted her brand to align with her professional and personal values and to appeal to the wide variety of clientele that seek her services. Some of the words she used to describe her brand were:
Brand Values:
Collaborative
Empathetic
Encouraging
Kindness
Brand Personality:
Warm
Safe
Intuitive
Pragmatic
These words, along with her clarity of vision for what her brand represents and how she wants to interact with her community, were the kicking off point for building the basics of her brand…logo, fonts and color palette.
Color Palette
I developed her color palette using these key descriptors, photos she provided, and additional information gathered through the branding questionnaire. A consistent theme appeared of lightness along with a love of nature and its soothing qualities, especially those found along bodies of water. The final palette, shown below, is a slightly muted selection of colors that can be found along the shores of a lake or river.
Logo & Fonts
Melissa expressed her desire for her brand to be professional and respectful while also being modern and approachable. I wanted to design a logo that exuded strength and presence but with a touch of a softer elegance. Something that would be appealing and professional but not stark.
I presented a couple of font options, and Melissa was immediately drawn to one. The fonts selected were Quiche Sans Display for the logo, while Quiche Sans and Raleway were selected for the headers and body text on the website, respectively.
The logo font exudes strength, but the combination of broad and fine strokes, along with some unique touches, as seen in the ‘S’ and ‘C’ characters, gives it a sense of soft modernity.
The finishing touch was adding a simple line drawing with leaf elements. This served to be a nod to the nature inspiration but also served to fill in some white space and allow the eye to focus on the name without being distracting.
The logo on the left is the primary logo used throughout the website. I also designed an alternate logo with a simple border treatment that she can use in other applications, such as stationary and other branded items.
The Website
With the branding complete, I moved on to the design and build of the website.
The Structure:
The requirements for the website were straightforward.
Home page: A strong introduction and welcome to her practice with calls to action to book a consultation.
Services page: A page to cover the therapy services offered in more detail, along with FAQs and options to book appointments or consultations.
About page: A page to allow visitors to learn more about Melissa and her passion for what she does.
Contact page: A standard contact page to allow visitors to email her directly.
Basic SEO setup: Implemented best practices at the site and page level (settings, on-page structure, image optimization, etc.)
The Design:
The main factors influencing the design were:
The customer journey must be clear and easy to follow.
Strategic use of images and graphics. Minimal use and balanced with meaningful, concise copy.
Unique elements to stand out and highlight the site content without being distracting.
Consistency across all pages. Uncluttered, intentional, welcoming, ease.
Elements used to achieve the design:
Color theme: Throughout all pages and sections of the site, the pale linen color is used for the background with the darkest blue for the font. The dark blue is also used for the background in the footer to anchor the site. The other colors of the palette are used selectively on each page to highlight specific areas.
Borders: To make the header of the site stand out, I added a 10px border in dark blue. This draws the eye in and compliments the simplicity of the header design and navigation. A thin 1px border is then used around each page and for section breaks. This continues the theme of clean, modern simplicity.
Scrolling element: On the Therapy Services page, a scrolling text block was used midway on the page to highlight the many types of issues that Melissa can assist clients with. The text is kept moving slowly and at a size that is easy to read but not distracting from the page. This treatment was chosen to minimize the amount of text to read on the page while being accessible.
Photos and Graphics: With the exception of the contact page, each of the site pages is anchored by a photo of Melissa outside near a river setting. A different photo was used on each page, but consistency was maintained. These photos of Melissa with a riverbank behind her ignited my creative inspiration, resulting in the use of simple lake and river-inspired line sketches. These tie in the nature element in an elegant, understated way and are something quite unique to this site! Examples of these are shown below.
A sketch of cattails along a river used as a background image for a section highlighting services areas.
Sketches of trees along bodies of water provide a subtle visual break and use of white space.
Hover Effects: This is where a little custom CSS code came into play!
First, in the header, there is a button for existing clients to log in to their portal. It is dark blue with light text, and when the mouse hovers over it, the color becomes transparent with dark text.
On the home page, there is a section that highlights five main areas that Melissa specializes. I used code to have each of those areas change color when hovering over them, as shown below. This was a fun way to incorporate some of the other colors in the palette in an unexpected, yet subtle, way.
What does the client think?
I’m pleased to say that Melissa now has a beautiful, unique, functional professional website that she is proud to share with clients and colleagues. Here’s what she had to say…
I knew I needed a professional website to promote my business and attract more clients. I love how she created something so perfectly me! In fact, after sharing it with another colleague, he said if he were a potential client, he would want me to be his therapist!
I love being able to take a client’s vision and make it come to life and have them feel so much pride in their business’s online presence. This was a fun and extremely satisfying project!
See all the details and pages of her site below!
Home
About
Therapy Services
Contact
