Hokulani Bakery

type

• rebranding
• handcoding using HTML and CSS
• designed website using wireframing

role
graphic, UI, and front-end designer

design tools
photoshop, illustrator, paper

Hokulani Bakery in Hawaii is known for its delectable sweet snacks, such as cupcakes and cookies. It incorporates the island's favorite flavors using fruit such as passion fruit.

For this project, I redid the branding and website. It was a fun project.

I designed and developed this website from code using Sublime Text. I used HTML5 and CSS3.

Logo

Logo for Tokulane Bake Shop with the words 'Tokulane' in orange cursive font and 'Bake Shop' in green uppercase font.

Original logo

Before designing and coding the website, I had to rebrand the logo. When rebranding, this wasn’t the original logo, and I forgot to save the original. This is their current logo. At the time the logo didn’t seem to convey what their bakery was about.

I thought about their cupcakes and what they could put on top of them. I also thought about flowers. Here, to your right, are images I found inspiring.

I was attracted to the vibrant and fun colors. They were dynamic and expressive. I also loved the organic and geometric shapes.

Thinking about the shapes, I started sketching ideas.

Logo for Hokulani Bake Shop in Hawaii, featuring pink cursive text and a purple and yellow flower in the top right corner.

Rebranding

When rebranding, I thought about the meaning of the name, the Hawaiian culture, and the bakery, the inspiration.

The name, Hokulani, means heavenly star. I thought about stars but wanted to avoid celestial imagery because I didn’t want to convey the wrong message. This was a bakery, not anything related to astronomy.

A collection of colorful abstract floral and leaf designs, including flowers, petals, and leaf motifs in various styles and color schemes.

Logo sketches

Collection of various hand-drawn floral and geometric shapes outline designs, numbered and organized in rows.
Collection of sketchy, hand-drawn floral and star designs, some with text such as 'Hokulani' and 'Hawaii'
hand-drawn sketches of flowers, a star with trailing lines, and overlapping square and circular shapes, with a note indicating transparent overlay.
Collection of 20 line drawing floral and leaf designs, with a small logo reading 'Yokulani Hawaii' in the bottom right corner.

Black and White Explorations

Six variations of a black and white logo with a leaf design and the word 'hokulani' in cursive font.
Six variations of a stylized flower with eight elongated petals, each with a small teardrop shape inside, surrounding the word 'hokulani' in different fonts and styles, arranged in a 3x2 grid, on a white background.
A coloring sheet with nine variations of the word "hokulani" written alongside a flower illustration. Each variation differs in font style, from simple to decorative.

I wanted a handwritten, cursive-like type because I noticed many logos in Hawaii are in cursive, and I wanted to keep that as part of the culture and identity, so I played with some scripts and serifs.

Color palette

Gradient color squares from yellow to purple.

While thinking of the color palette, I was thinking of everything Hawaii: the sun, the fruits, the colors of the sky, and the warmth of the islands. I felt summery colors would best fit this project. This color palette is also very fresh, bright, and cheery, just like Hokulani’s cupcakes.

Color Explorations

A collection of nine different colorful logo designs with abstract leaf or flower shapes and the text 'hokulani' in various colors, arranged in a grid with a color palette including yellow, orange, red, pink, and purple at the bottom.
Various versions of a logo with the word 'hokulani' in different colors and styles, accompanied by a stylized flower graphic in orange, pink, and purple, along with a color palette of yellow, orange, red, pink, and purple.

Final logo

Logo for Hokulani Bake Shop in Hawaii with pink cursive text and a purple and yellow flower in the upper right corner.

I went with a lower-case typeface for its friendliness, and I also didn’t like the capital ‘H’ in this typeface. I also played with hierarchy, where you read ‘Hokulani’ first and then see the star/flower. We decided on doing that to the ‘i’ because it looked like something they could put on their cupcakes.

Wireframing

A website wireframe layout with sections for logo, navigation menu, large main image, four smaller images or icons below, hours/other information, text about different locations, a map, navigation buttons at the bottom, and gray placeholders indicating where content and images will be placed.
Website wireframe layout with sections labeled for logo, navigation, images, call to action, text, hours, map, additional images, and footer navigation.
Homepage of Hokulani bakery website with pink and cream color theme, showing three cupcake images at top, and service icons for cupcakes, cookies, and cakes.
Webpage homepage for Hokulani, a bakery specializing in cupcakes, featuring an assortment of decorated cupcakes and a map location in Honolulu.
A website wireframe layout featuring sections labeled for navigation, logo, decorative elements, a carousel, images, map and text, and decorative images, with placeholders and icons.
Screenshot of a bakery website's homepage featuring a banner with three purple decorated cupcakes, bakery logo, and navigation menu. Below are icons for cupcakes, cookies, and cakes.
Website homepage for Hokulani bakery featuring cupcakes and cake options, with contact information and location map.
Homepage of a bakery website with a pink and cream color scheme, featuring images of cupcakes and a promotion for Mother's Day, service icons for cupcakes, cookies, and cakes, and a map of the bakery's location in Honolulu.