Style Guide

Color Palleltes

Most of the major colors used in this design were taken from the main opal picture from the product display. Using color picker tools, I picked out most of the colors that were clearly visible on the opal. For background elements such as the header's background and the page's background color, I referred to a website that colors of opal and colors related to those colors. I then matched these colors across the template as I saw it fit.

Website Design inspirations

The first few designs were drawn to minimalstic designs, such as the ones seen in websites such as Uniqlo and BambuLabs. However, this design did not work as effectively through the first round of feedback due to not enough emphasis on the main product, which caused the main product to not sound as well built as it was in the product description. I solved this by re-designing my layout by drawing inspiration from designs that could fit more vibrant colors, alongside drawing more emphasis on the main product. I ended up drawing some inspiration from designs such as theloz and thermokonnect. This eventually ended up with me settling on the current design as seen, drawing upon small points of interest from the designs.

Font choices

When it came to selecting fonts, I tried to choose fonts that were clean and sharp, which were related with the chosen designs I drew my inspiration from. I first chose Sans serif fonts, but those fonts fell through as the design that held those fonts didnt work to achieve my desired goal. When redesigning my fonts, I decided to aim for fonts that still had the Sans-Serif look, but were a bit fancier along the edges, which landed me to fonts such as Noto Sans Mono, and Barlow Condensed. These fonts help display a much older style of design, while keeping an element of what a Sans serif font holds, a straight, clean design.

Imagery/Art direction

When it came to thinking about the art direction, I wanted to make a product that is special and expensive. This mindset drew me to creating a gemstone catalogue that followed a similar style to websites such as Uniqlo. The thought of expanding upon opal was just a random thought, but researching into the gemstone, along with its diverse colors brought many ideas as to how to create the template. Most of the colors that are seen on the template are drawn upon the opal itself (Whihch in some way acts as the product's imagery), which I felt was a great idea on the color choice along with saving time trying to find inspiration.