Semi Sweet Website

SemiSweet Website

Role

  • Brand Designer
  • Web Designer
  • Developer

Client

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

Semi Sweet colors

Typography

Semi Sweet typography

Buttons and Forms

Semi Sweet buttons and forms

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.

Semi Sweet blog

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.

Shop Home

Semi Sweet shop

Product Detail

Semi Sweet shop page

Cart

Semi Sweet shop cart

That’s It!

Thanks for reading. You can visit the live site at SemiSweetDesigns.com, or you can check out my other projects below.