UI & Ux Design
Mocha Java
Basic single-page Website
intro
First opened in 1983, Mocha Java Cafe is located in Honolulu, Hawaii in the heart of Kaka’ako. The breakfast menu is served all day. And aside from serving coffee and espressos they have an eclectic vegetarian and vegan gourmet menu, creative milkshakes, fresh smoothies, and inventive acai bowls. This cafe has grown to be a local favorite for many throughout the years.
TECH
Photoshop, Illustrator, HTML, CSS, JavaScript
Chapter 01
It’s Time To Redesign
01 — Assignment
This school project required surfing the web to find a small to medium scaled company whose website was in dire need of an overhaul. With no budget in mind, there was absolute creative freedom. The use of any existing content and imagery should be included. However, imagery and graphics may be created or substituted if they do not meet design expectations.
Creating Functionality
Designing Aesthetics
02 — Features & Functions
- Modern website to match surrounding urban development
- Showcase eclectic menu offerings
- Download-able PDF menu function
- Interactive Google map
- Easy navigation
- Social media links
- Pictures and illustrations of food
Chapter 02
Creating A New
Look and Feel
01 —
A selection of warm earth-tone colors, delicate hand-drawn illustrations and isolated top-view pictures create a modern yet rustic feel. A parchment background brings a warming welcome to every section. And the beautiful font pairing between a modern san serif and a classic serif font creates a unique harmony.
Selecting beautiful
Graphics
02 —
By keeping the website free from distractions the menu becomes front and center. For easy readability, the use of a clear grid, organized tabs and typographic hierarchy is important.
Chapter 04
A Glimpse At The Process
Client brief
01 — Defining user profiles
As a family friendly company the ambiance attracts many. The primary target audience include those that live, work, and shop in the Kakaako and Honolulu area. The target age is diverse but range mainly between 20’s–50’s. They are educated, health conscious and have an appreciation for good coffee and healthy eats.
02 — Creating a site map
A simple and clear understanding to the flow of the site starts with a great sitemap. Same aesthetics of the website are seen in it’s creation.
Style sheet assets
Sansita 700i
Sansita 400i
Navigation links, Headlines, Logo Redesign
Oswald 700
Oswald 400
Body copy, Headlines
Merriweather 400i
Merriweather 300i
Menu descriptions
03 — Choosing fonts
I looked for the three fonts that would speak to the brand and what it portrays. Sansita was selected for it’s beautiful relationship between typography and calligraphy. Oswald was chosen for the strong line weight contrast to Sansita as well as the excellent readability on all screen devices. Lastly, Merriweather served as a great accent font and made a perfect complement to the previously mentioned fonts.
04 — Selecting colors
Consumers relate to the colors of browns and creams when it comes to coffee shops. The accent blue brings a nice contrast and because it is a Hawai’i based company with a surfboard in the logo, it only made sense to have it part of the palette.
Dark Brew
#4c2c1b
Medium Roast
#583b2c
Ocean Breeze
#009bbb
Latte Cream
#e6dac2
