HeNi Beauty Hair and Nails Salon

1. Introduction

HeNi Beauty is a new salon providing beauty services for hair and nails. As it was just recently launched, it didn't have a brand identity yet. Then the salon owner approached me to create a modern look for the brand identity. After that, they realized that they also need to improve the presence of the salon on the internet to attract more new potential customers so they also required a website.

As the only designer and developer, I was able to create the brand identity (logo, name card, and price list) and a simple website (wireframe, coding) for the salon.

2. Brand identity

2.1. Process

I divided the brand identity into 2 parts: the logo and the background images that complement the logo.

2.1.1. Logo

HeNi Beauty logo guide

The logo includes 2 parts: HeNi Beauty and Tóc & Móng (which means Hair & Nails).
- HeNi Beauty: HeNi is an anagram of Hien, which is the name of the salon owner.
- Tóc & Móng: The salon provides a variety of beauty services for hair and nails.
I used the Josefin Sans typeface for HeNi Beauty. This sans serif gives a modern look to the brand. The tilted letter e makes the logo not too formal while the pointy letter N makes the logo feel more chic.
For Tóc & Móng, I used Inconsolata. To be honest, I ended up using this monospace typeface by using the "Most popular" sorting criteria for monospaced typefaces on Google Fonts. While Roboto Mono is the top 1 used monospace typeface served through Google Fonts API, it does not harmonize well with Josefin Sans. Then I tried the top 2 which is Inconsolata and it fit perfectly.

2.1.2. Background images

The background image contains several splashes of colors that represent nail polish. This background was inspired by the background image of Tailwind CSS and customized from a beautiful gradient design by weieeying.com.

2.2. Tech stack

Figma: For assets displayed on digital devices, I designed them in Figma because Figma is fast and does not drain my laptop battery.
Photoshop: For printed assets like the name card, I designed them in Photoshop in CMYK color mode.

2.3. Problems and solutions

Typeface: Choosing the right typeface was the most time-consuming task. Having 1482 typefaces to choose from in Google Fonts sounded like a great idea at first but turned out so frustrating. Then I used the Filter and Sorting tools on Google Fonts to filter out fonts with irrelevant properties.
Color gamut: I never thought a color could be so different between RGB and CMYK. I was shocked because the bright and vivid colors I used in Figma just looked so dull in Photoshop's CMYK mode. After that, I had to modify the colors in Photoshop so they do not look different from the colors in RGB color mode.

2.4. Learned techniques

Those are new techniques I learned and used for this project:

Figma Alignment tools: When I didn't know these tools, I had to shift the graphics pixel by pixel, and draw lines to align them. Now those Alignment tools really save me time.
Figma Layer blur: I used this effect to create splashes of the background with different radiuses.

2.5. Results

HeNi Beauty social profile picture

HeNi Beauty name card front side and back side

3. Website

My goal for building products for a small business like this is they must be fast, simple, and low-cost.

3.1. Process

The salon owner wants a simple website to showcase the photos of the salon and allow customers to book appointments through Messenger. In addition, the links to the socials of the salon (e.g. Facebook and TikTok) must also be included. Through interviews with clients, 90% of them use smartphones as their primary devices while the rest use laptops and feature phones. For this reason, I prioritized the design of the website for mobile view.

Here is the summary of what I did:

Wireframing: As the requirement of the salon owner is a simple website, I only made 2 pages for the website.

Website wireframe

The first one is the home page which includes fundamental information, links to the socials, and featured photos of the salon. Then the second page is the gallery page where all photos are shown.

On the other hand, because the navigation bar only has 2 tabs for 2 pages, I did not use a hamburger menu and I made the navigation bar sticky as well. In the navigation bar, I also placed a Call-to-action button which triggers the Messenger app for visitors to make appointments.
Coding: Yes, there is no high-fidelity prototype here. Because this is a simple website and I can modify the color, font, padding, margin, etc. fast in the code, I decided to jump from the wireframe to code without a high-fidelity prototype.

3.2. Tech stack

I used Figma to create the wireframe. Then from that wireframe, I built the website based on the Next.js + Tailwind CSS + Typescript template by theodorusclarence.com, which provides fundamental utilities a developer needs for building a website. The project is being deployed on Vercel.

3.3. Problems and solutions

I would say what took me the most time in building this website is creating the photo gallery. I faced 2 issues: (1) choosing a free CDN (Content Delivery Network) that delivers media fast; (2) choosing a lightbox library that loads photos fast and gives a smooth swiping experience on mobile.

3.3.1. Free and fast CDN

I used Cloudinary for my portfolio website and I know it is a good option for the CDN. However, it is freemium which means the cost could grow when the salon has more photos. For a simple website like this, I prefer free solutions.

Then I remembered that the salon owner also uploads photos to Facebook and Google Maps, so I wondered if I could use them as the CDNs for photos. I started off by getting the URLs of photos on the Facebook page of the salon (right click on them -> copy image address ). It was good at the beginning, the photos were loaded fast, but then the URLs of the photos changed after a while.

Next, I tried getting URLs of photos from Google Maps. This solution seems better until now because the URLs have not changed and the photos can be served responsive by changing the values of width and height parameters in the URLs.

I first used yet-another-react-lightbox (I found this lightbox by chance when I visited react-photo-album.com). After using it in the project, I saw it did not give a smooth swiping experience on touch screens as I expected.

PhotoSwipe lightbox

Therefore, I looked for an alternative that can give a better swiping experience on the GitHub search page. I used the "Most stars" sorting criteria and then PhotoSwipe appeared in the top 1. PhotoSwipe does give a smoother swiping experience for touch devices than yet-another-react-lightbox did.

3.4. Learned techniques