Site Showcase: Yogi by Sher

Yogi by Sher site brings cool, tranquil colors and that "after yoga" feeling to her graphics. Design sets the mood for a great Squarespace shopping experience. Enjoy the tranquility.


Client Site Description: eCommerce Site

Template Chosen: Brine (Greenwich)

Why did you choose that template?: I am addicted to Brine! No, really. Brine is always my go-to for clients because it is unmatched in flexibility.

What was the Client's Objective?: The client wanted her website to be an inviting place where people can get to know her and what her company offers. In the pre-design phase, she summed up her vision for the site by saying "It’s important to me that it seems very familiar rather than being extremely professional. That’s just how I am, and I want people to feel like we’re friends."

Tell us a bit about the design process?: Our client already had her logo done when she approached us about designing a website. Luckily for us, the logo was beautifully done, and it portrayed the brand brilliantly. Going off of the logo, we created a design board for the website which involved nailing down the color scheme and design elements that would be used throughout the website. We design a mockup of the homepage and a secondary, interior page that plays a significant role in the site. We send these mockups off to the client for feedback and dive into the website design from there.

As you can see, we brought the site to life with the watercolor and triangle elements.

How did you help the client differentiate their business through design?: We were looking around at other business that provided luxurious activewear and athleisure for women, and we saw that the vast majority of them lacked personality. We wanted to flip the script. Our primary goal in connecting the brand to the website with Yogi by Sher was for people to see the personality plus when landing on the website, then to get to know the face behind the brand, and then shop the fabulous products.

Is there custom development? What about custom added CSS? Can you tell us why you did or did not use these edits?: 

No custom development, but a good bit of CSS. 

Initially, I had a header styled that was pretty amazing and used a lot of CSS. It showcased the flexibility and power of a brine header section. In the final phase of revisions, the client decided that the logo wasn’t “popping” as much as it could and opted for a more straightforward layout (which is 100% okay!). 

There is a lot of CSS implemented on the homepage with the two-tone background, overlapping elements, and the featured products section. The buttons on the shopping pages that serve as category filters were also styled with CSS. The rest of the styling dealt with font sizes and colors for the index overlay sections and padding for various elements.

What are the top three creative features you used in the design?: 

1. The use of light, colorful watercolor splashes in the color palette help bring the brand full circle. 

2. Incorporating the triangular geometric shapes into horizontal lines and on top of images gave a subtle, but appealing vibe to the site.

3. The use of an accent font that is on top of banner images on the index pages. This font is also on the main shop page highlighting the different categories (activewear, athleisure & accessories).

Anything else you want us to know about the site?:

Vendors used?:

1. Megan with Kim Box Photography was amazing to work with. She captured all of the photos on the website! 

Megan's website >>>

Designer: Mackenzie Mathews at  MModern Web Design

Client's Site: Yogi by Sher