Paper Lights

Paper Lights is a small business owned by Rina Nakamoto that advertises a great interactive experience. Paper Lights offers the ability to make smaller versions of traditional paper lanterns. In a collaborative shop, the business can draw pictorials or simply put calligraphy on the lantern. The lantern may have traditional colors of warm tones or can even be custom lanterns up to the customer’s request. This decorative business may fit any desired style lantern from simple and elegant to extravagant, sure enough, to light up an area.

From the initial concept, Rina requested a simple and elegant design. The color choices approved consisted of warm tones, specifically yellows, oranges, and vibrant reds. A glow effect became a key design feature Rina wanted in the logo. For type, she preferred bold and round typefaces that were sans serif, but it was open for discussion as the logo developed. 
Variations of logo sketches for Paper Lights

Logo Sketches

Rina became drawn to the logo on the first column second row after shown the logo variations. After critique and review, the logo was tweaked and combined with the color gradient on the third column of sketches. 
Finalized Primary Logo for Paper Lights
Finalized Secondary Logo for Paper Lights
Brand kit for Paper Lights. It displays the Pantone colors, RGB, CMYK, and Hex colors in one column. Next to it is an array of images for the primary logo, secondary logo, logo icon, monogram, and app icon. Under the collection is a mockup of the logo on a sign, in a sheet of stickers, and

Brand kit for Paper Lights

After the brand kit, it was time to start with UI/UX design. 
Goal
Create a user-friendly website to navigate store details and a pleasant shopping experience for consumers wishing to make paper lanterns. It was vital to make it approachable for customers to book appointments for this hands-on experience.​​​​​​​
Wireframing
Wireframe for the homepage
Wireframe for the homepage
Wireframe for the location tab
Wireframe for the location tab
After completing the wireframe, it was time to set it up in HTML. I used Adobe Dreamweaver to set up the columns and grids to match the wireframes. Now it was time to implement logos and colors, I decided it was best to keep the webpage with a white background to accentuate the vibrant logo. The footer is orange to keep a consistent color scheme that looks visually appealing while following the color contrast rules for accessibility. 
Finished Homepage
Below demonstrates how the webpage looks on a desktop, scrolling from top to bottom.
Finalized Location Tab
Below demonstrates how the webpage looks on a desktop, scrolling from top to bottom.
Successes
After completing the branding and UI/UX, the opportunities to expand were endless. The color of the brand is very attention-grabbing while maintaining a simplistic and elegant vision. The design provided dimensions that fit well with or without typography. The overall function of the webpage is easy to navigate, being able to book an appointment or shop the merchandise all within the front page of entering the website. ​​​​​​​
↑Back to Top