P01 - Style Guide Template

Interactive Elements

In-text link

CSS Selector:

.intextLink

Sample code:

<class="intextLink" href="#">Intext link</a>

Rendered element:

In-text link

Navigation Link

CSS selector:

.buttonNav

Sample code:

<class="buttonNav" a href="#">Default Button</a>

Rendered element:

Default Button

Submit/Reset Buttons

CSS Selector:

.button[type=Submit]

.button[type=Reset]

Sample code:

<button type="submit" value="Submit">Submit</a> <button type="reset" value="Reset">Reset</a>

Rendered element:

Text Input Field with Label

CSS Selector:

input[type=text]

Sample code:

<label for="form-textInput'>Text Input:</label> <input type="text" id="form-textInput name="form-textInput" placeholder="Text Input">

Rendered element:

Radio Button with Label

CSS Selector:

#form-radioButton

Sample code:

<label for="form-radioButton'>Select an Option:</label> <input type="radio" name="form-radioButton" id="radio1" class="radio" value="Option 1"> <label for="radio">Option 1</label> <input type="radio" name="form-radioButton" id="radio2" class="radio" value="Option 2"> <label for="radio">Option 2</label>

Rendered element:

Image as a Link

CSS Selector:

.img

Sample Code:

<a href="http://sfu.ca"> <src="img/Bathbomb.jpg" alt="Experimenter Bathbomb."> </a>

Rendered element:

Experimenter Bathbomb.

Text Elements

Headings

CSS Selector:

.heading

Sample Code:

<h1 class="heading">Heading 1</h1> <h2 class="heading">Heading 2</h2> <h3 class="heading">Heading 3</h3> <h4 class="heading">Heading 4</h4> <h5 class="heading">Heading 5</h5>

Rendered element:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS Selector:

.paragraph

Sample Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna at purus placerat gravida. Vivamus at elementum metus. Donec a metus enim. Fusce sodales eros sed mi finibus lacinia. Integer egestas ex et nisl posuere, id interdum sapien imperdiet. Aliquam erat volutpat. Aliquam in massa quis orci feugiat tristique.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna at purus placerat gravida. Vivamus at elementum metus. Donec a metus enim. Fusce sodales eros sed mi finibus lacinia. Integer egestas ex et nisl posuere, id interdum sapien imperdiet. Aliquam erat volutpat. Aliquam in massa quis orci feugiat tristique.

Numbered Lists

CSS Selector:

.orderedList

Sample code:

<ol class="orderedList"> <li>Option 1A</li> <li>Option 2A</li> <li>Option 3A</li> </ol>

Rendered element:

  1. Option 1A
  2. Option 2A
  3. Option 3A

Combined Elements

Main Navigation

CSS Selector:

.main-nav

Sample code:

<nav class="main-nav"> <a href="#" class="buttonNav">Home</a> <a href="#" class="buttonNav">About</a> <a href="#" class="buttonNav">Contact</a> </nav>

Rendered element:

Branding Ideas - Bubble Bar

What does the company do?

For this conceptual brand, I want to propose the idea of creating a space that borrows and merges the concept of IKEA, a spa, and themed Instagram rooms. In this, consumers will be able to browse through a catalogue of Instagram worthy bathrooms that come equipped with luxurious bath amenities for a private spa session.

Who is the company to potential customers?

This particular brand is a place of excitement and a buzzworthy environment worth talking about. It is a place where people can go for a quick getaway. Think of it like IKEA, where people walk around and browse through different concepts (and in this case, it's a bathroom). Once they find one they like, they can choose to rent it for an hour or two and treat themselves to a bath.

Why might this company entice someone to purchase this service?

With Instagram being a popular social media platform, many users are looking for Instagran-worthy spots to hang out. Additionally, for those who are looking for something to spruce up their me-time, yet lack access to a bath, this is an opportunity to bring the two worlds together. As such, this brand is something that would speak to people with such an interest in hot-spots around the city.

Where did this idea come from?

With the popularity of modern highrises, showers have become the norm and baths are a thing of the past. For people who don't have access to the luxury of taking a bath, this is the perfect place for them to do so at their own discretion. From the bathroom environment to the bath products, everything is customizable to an extent, making this place a perfect chameleon to match our customer's mood.

Customer Persona

Photo of Ashley

The Basics

Ashley is a 24 year old female with a double degree in Marketing and Digital Journalism from Monash University. Originally hailing from Melbourne, Australia, Ashley has moved overseas to Vancouver, Canada in pursuit of the blooming tech industry. Ashley enjoys cultivating her social media presence and growing her followers by taking them on a tour of her visiting and promoting hot-finds around the city.

With her frequent use of technology during her undergraduate degree, and exercising her voice through digital journalism, Ashley is trained as an early adopter. Thus, she finds herself at the forefront of upcoming trends that she finds exciting. Based on her skill assets and interest, Ashley looks for excitement in everyday life that gets her searching for the most buzzworthy activities that pop up around her.

Professional Life

Ashley is the Social Media Coordinator and a Journalist at DailyHive Vancouver. She is passionate in connecting with immediate communities and influencers that have an interest for finding the 'next' local destination. As her job is relevant to her side hobbies, Ashley often finds herself bridging the connection made from networking on both sides, helping her further the exposure gained through social media presence.

Goals

As a consumer, Ashley's goals are...

How to find Ashley

In order to connect the brand with customers like Ashley, the identity needs to be fun and modern before it can present itself as a contender worthy of Instagram-chatter. As Ashley is a Journalist, a digital presence is a must in order to captivate the attention of digital natives, as well as target audiences, who particularly spend a large amount of time on social media.

Brand Identity

Fonts

To best suit the appearance of the brand and the purpose, I want to utilize font and bodycopy that strikes a balance between fun and modern. Here are some of the Brush and Monospaced fonts I would consider.

Leafy Font Parabola Font Odachi Font Westfalllia Font Source Code Pro Font Liberation Font

Color Palette

rgb(70, 70, 70) // hex: #464646

rgb(255, 179, 217) // hex: #ffb3d9

rgb(131, 184, 142) // hex: #83b88e (Currently unused)

Art Direction

Taking inspiration from themed Instagram rooms, I want each bathroom to have a distinct feel to it, giving consumers the option to pick the room that best suits their mood.

Flamingo Themed Bar Washroom with Leaf Prints Open Concept Washroom Washroom with Nature Print Dark and Elegant Washroom Dark and Creepy Washroom Hanging Pink Telephones Colorful Windows

Justifications

While there are conventional elements to a traditional spa, the overall art direction drives the branding towards a modern and intimate setting. With the use of black and pink, think of it as room with dim lighting and soft ambient music. The brush stroke typeface is to reinforce the playful aspect of the branding concept and the variety of concept rooms provided through the service, while the monospaced type ties in the modern minimalist aesthetic.

Example 1,Example 2,Example 3.

Citations