Semi Sweet Website

Role

Brand Designer
Web Designer
Developer

Client

Semi Sweet Designs

Project Deliverables

Web Design and Branding
WordPress Integration
Woo-Commerce Store

Summary

Semi Sweet is a website that showcases unique cookie cutters for purchase, paired with step-by-step cookie decorating tutorials. As the sole designer and developer for this project, my goal was to organize, design, and build a seamless blog and online store using WordPress and Woo-Commerce.

Design System

The client is a male baker, which is quite unique in the the cookie decorating community. He requested a website reflecting a cheerful yet masculine design that visually conveyed a guy is the mastermind behind these cookies.

My goal was to establish and implement a visual language that was bright white with colorful accents. The color combination of reds and blues with brown/neutral undertones helped achieve the masculine vibe the client wanted. This language also needed to carry over from the blog to online store pages.

First, I had to assess the content and fine all common design patterns throughout the site's pages. From the information I gathered, I created a system of design elements including colors, typographical hierarchy, form fields and button styles. Creating this design system first not only kept things consistent, but also saved me time when coding all patterns for website templates and stylesheets.

Colors

Typography

Buttons and Forms

Logo Design

When designing SemiSweet’s logo, I was inspired by the characteristics of royal icing used to decorate cookies. I wanted the letterforms to capture the look of shiny, hand-piped icing. Also, I took special consideration of the capital “S”. It needed to flow seamlessly with the rest of the design while being distinct enough to stand alone as its own brandmark.

Logotype

Brandmark

Blog

Semi Sweet’s blog is filled with cookie decorating tutorials and recipes. Since each post contains beautiful photography, I chose to keep the background layout mostly light or bright white. The high contrast made the photos pop, while drawing more attention to the colorful accents, like the header nav bar and action buttons.

Online Shop

The online shop was built using Woo-Commerce, fully integrated within the custom WordPress theme. This meant the blog and store content will often link to each other. With this in mind, I designed both styles to have a similar look and feel.