Cafuné - Website
2021
Freelance
😄 The Client
Cafuné is an indie jewelry store that specializes in surgical steel accessories.
🌟 The Project
The store operates through Instagram and Facebook. The client wanted a website to host a catalog with all their products. Each product would have a page describing its main characteristics and linking to the business's social media.
My role
Cafuné is an indie jewelry store that specializes in surgical steel accessories.
The store operates through Instagram and Facebook. The client wanted a website to host a catalog with all their products. Each product would have a page describing its main characteristics and linking to the business's social media.
The site structure was simple: the client wanted a one-page home with delimitated areas for the introduction, contact, and about us information, and an individual page for each product.
As the sitemap remained simple, the user experience analysis focused mainly on establishing a clear flow from the homepage to a link to Facebook or Instagram.
I tested out two flow options for the catalog display with three customers of the business:
- A catalog page is separate from the homepage. The homepage would link to the catalog, and the separate page would display all the products.
- Featured or highlighted products are displayed as a grid on the homepage with a "see more" button or link to a different page hosting the entire catalog.
The users suggested a different approach: to have the entire catalog on display on the homepage as if it were a social media feed.
This third option ended up being the chosen one.
From all this information and to guide the rest of the design process, I created a simple user flow and sitemap:
I began the visual design process by analyzing the brand and its characteristics. The brand had a well-defined color palette and general style, so I compiled references with a similar approach: earthy colors, delicate lines, and a hand-drawn feel.
My client was especially fond of clean, well-defined sections for her site, so I based the first wireframes on this concept.
Starting from the initial wireframe and the pre-existing style guide, I laid out the main site styles and components:
As this was a store website, I gave the photographs the heaviest visual weight, highlighting them with collages and big sizes.
For the typography, I designed a high-contrast type scale system.
I used a monospace font (Roboto mono) for decorative text such as the brand's name definition in the about us section.
Buttons drive this site's interaction. I designed two main styles for the buttons: the secondary one, outlined and used for social media links and product links, and a primary block, a green one, used for the main CTA of the site, checking the catalog.
To add interaction to the buttons, I made this smooth hover animation.
The brand's visual language relies heavily on minimal linework illustrations. I created some custom illustrations in a similar style to use as decorative elements.
I also used scaled-down versions of these types of illustrations to create the icons for the site.
Cards are the building blocks of the catalog view. I designed these cards to blend in the page flow and make a more consistent user experience.
Once the final design was approved, I started building the site.
I wrote the website using Ghost CMS, an open-source content management system as a headless CMS, and Eleventy as the static site generator. Dabbling straight into Jamstack architecture without previous knowledge was challenging initially, but the challenge provided great learning opportunities.
I built the custom site's theme over Ghost's default theme, Casper. I modified the core templates in the Handlebars templating language and added custom javascript front-end interactions. (For example, the default Casper theme doesn't have a collapsible navbar, so I built one myself).
I decided against using any front-end frameworks like Bootstrap for this project. Not only to avoid the uniform look frameworks can give but also as a challenge for myself.
You can check the live website here.