Designing the Play/Ground Therapy Website

My girlfriend recently launched her own social work practice and asked me to create a webpage that would act as an advertisement of her qualifications and approach to child therapy.

We designed the logo to reflect her approach. She practices play therapy and uses mindfulness during play to emotionally “ground” her clients. Hence the name, “Play/ground Therapy.”

One of the ideas we started with was to incorporate the “/” in the name as some sort of seesaw, but I wanted to start with the font first. My initial design involved a font for the logo based around children’s blocks. I blocked out the basic shapes in both a wooden color and black to see how well the font could be read. Initially, I liked the all-black version’s readability, but was on the fence about the tan-colored version.

I then tried adding color to the blocks. This was fun to create. It required much reworking in order to create an eye-catching color scheme and promote readability; but, ultimately, this contrast made the logo look busy and unclear.

The second draft of the Play/Ground Therapy logo, made out of multiple colored play block shapes.

Next, I tried eliminating the small gaps within the letters and bringing back the basic wood color. I also tried to incorporate the seesaw element we had imagined at the start of the process. Unfortunately, the single-colored blocks just looked boring and the seesaw was oddly placed, so I wound up putting the block idea to bed.

The third draft of the Play/Ground Therapy logo, made out of wooden block shapes.

While the children’s block idea had failed, I did like the overall look of the word “ground” in that font; so I played with the idea of the “ground” in Play/Ground having a sturdy, flat base that would reflect the meaning of the word. I decided that the word “play” could weigh down one side of the seesaw, the capital G of “ground” could act as the fulcrum, and the top of the seesaw would lift a child up.

The fourth draft of the Play/Ground Therapy logo, in black, featuring a seesaw and abstract child shape

We were getting close! She didn’t like the abstract child-shape I had put at the top of the seesaw, so I replaced it with a silhouette of a child instead. I colored the majority of the logo the same tan as the corkboard pattern I had made for her and I gave the letters of “play” each their own bright, primary color in order to reflect the playfulness and simplicity of a child’s classroom. These letter colors were the same hue and saturation I had used in the previous block font design except for the yellow. The yellow had already been causing readability problems, so I swapped it out for an orange that matched the other colors’ saturation.

The final step was to add a darker background for color and contrast. I decided to go with a grassy green, trying to evoke green fields and playgrounds. We also decided that the word “therapy” should be included, both to clarify what kind of business this was and to use the full name of said business. I decided to make the word “therapy” part of the platform within which the word “ground” was rooted. This way, it could be included without making the logo too long and, when squinting, makes the gaps between the letters of “therapy” appear like roots burrowing down from the word “ground.”

She also asked for a small version for the business email because placing the full logo into the profile area didn’t look good at all. At first, I just fit the logo into the circular area provided, but it seemed somewhat pointless to try and include the whole name in the profile image when it would be included in every email anyway. To avoid redundancy, I created a version that only featured the seesaw, child, and the bright, quad-colored “play.”

For the main body of the website, we decided on a corkboard aesthetic. We liked the idea of each image or piece of information appearing as if it were being tacked to a classroom corkboard. Since I wanted control over the colors used on the site and found photos of actual corkboard too busy to serve as a background; I created a custom, tileable image instead. By using the same system you might for creating a repeating pattern for paper or fabric, I created a corkboard-like pattern that could cover the entire background of the site with minimal input by me.

Due to the brevity of information on the site, I felt it made the most sense to keep everything on one page. I fixed the most basic information, such as name, picture, and  contact info, to the sides of the page so that anyone could read it from wherever they happened to be on the page. This way, they wouldn’t have to scroll back to the top just to remember her name or face.