BRAND / LOGO - Shack · BRAND / LOGO BRAND / LOGO BEAUTIFUL PIECES AT BEAUTIFUL PRICES STYLE GUIDE...

B R A N D / L O G O

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

BR

AN

D /

LO

GO

-

STYL

E G

UID

E -

2

M A S T E R L O G O

The SHACK master logo is a simple wordmark that incorporates “get the look for less”.The main lettering style is clean and refined using Myriad Pro, a traditional sans serif font.

The catch phrase “get the look for less” has been hand-modified with a so�er, rounded finisho�ering a sense of inviting warmth.

U S E A G E This is the main logo that will be used across primary brand applications againstneutral backgrounds.

L O G O V A R I A T I O N

A logo variation has been created specifically for the website and EDM header.Removing the catch phrase will assist in creating a sense of balance with the main navigation menu.

FURNITURE COLLECTIONS INSPIRATION CONTACT US SHACK COLLECTIVEGALLERY

#5A481C #75633B #948362 #B4A890 #D8D1C5

C O L O R C O D E S

T O N A L R A N G E S will be used tobreak up sections.

RGB : 90 72 29

CMYK : 50 57 99 45

PMS : 462 C

Web : #5A481C (as per current website)

C O L O U R P A L E T T E

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

CO

LOU

R P

ALE

TTE

- S

TYLE

GU

IDE

- 3

P R I M A R Y C O L O U R S

SHACK brown

C O L O R C O D E S

RGB : 235 227 211

CMYK : 10 10 19 00

Web : #EBE3D3

C O L O R C O D E S

RGB : 235 232 226

CMYK : 9 8 12 00

Web : #EBE8E2

L O G O / W E B S I T E B A C K G R O U N D

This is the colour that I presented at the meeting

Original textured “co�ee” background.The background texture currently in use gives avinatge, well-loved feel characteristic of theSHACK brand.

Colour-picked from your latest EDM

Option to convert to a solid fill colour background

Background colour consideration

The neutral and warm colour scheme enhances the rustic, elegant and modern nature of the SHACKbrand. Colour psychology suggests brown conveys warmth, comfort and security while the beigebackground is seen as dependable and relaxing.

Do we consider a white background that can bebroken up with the neutral tones ?

RGB : 188 156 91

CMYK : 24 34 68 11

Web : #BC9C5B

RGB : 168 142 98

CMYK : 30 36 62 18

Web : #A88E62

RGB : 65 65 66

CMYK : 66 57 52 55

Web : #414142

RGB : 128 131 134

CMYK : 50 38 36 18

Web : #808386

RGB : 194 202 208

CMYK : 9 0 0 25

Web : #C2CaD0


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

CO

LOU

R P

ALE

TTE

-

STYL

E G

UID

E -

4

S E C O N D A R Y C O L O U R S

C O N S I D E R A T I O N S

O R+

SHACK BROWN

A secondary colour palette will need to be developed to further enhance the visual language andcore brand values of the SHACK visual identity. These colours will be used to provide variety andvisual interest without leaving the recognized palette.

G O L D is elegant, high quality and addsrichness and warmth to everything withwhich it is associated.

U S E A G E Headings, buttons, icons,form elements

C H A R C O A L / G R E Y is refined and timeless and suggests security andreliability.

U S E A G E Do we wish to introduce as analternative for headings / body copy?(this would work well if a white backgroundwas chosen). Other uses would be for buttons, icons, form elements.

Web #EBE8E2

Web #EBE3D3

#5A481C #75633B #948362 #B4A890 #D8D1C5

T O N A L R A N G E S will be used tobreak up sections and add accents of colour.


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

CO

LOU

R P

ALE

TTE

- S

TYLE

GU

IDE

- 5

As suggested on pages 3 and 4 another consideration is to introduce a colour palette of tonal greyfor headings / body copy. Other uses would be for buttons, icons and form elements. Grey isconsidered a neutral colour but at the same time it looks exquisite and formal. A white backgroundwould give a clean, stylish and modern finish. The SHACK brand would still maintain its original brown colour, with the neutral tonings incorporated throughout the site as background colour / accents.

+ +

Web : #414142 Web : #808386 Web : #C2CaD0

O P T I O N A L P R I M A R Y C O L O U R S F O R C O N S I D E R A T I O N

CALL TO ACTION 1 CALL TO ACTION 2

FURNITURE

SEARCH

CONTACT US HEADINGHOME COLLECTIONS BLOG SHACK COLLECTIVEGALLERY

Example of :• white background• brown logo & menu headings• grey heading / button withneutral tones adding accentsNB : Hero Image not to size

Shack’s French Provincial-inspired ranges areinfluenced by classical Louis XV design whichdates back to the 18th century. Elegant, timelessand practical furniture that can make a home feel instantly warm, charming and stylish.

c�lecti�

FIND OUT MORE

PROVINCIALFRENCH


T E R T I A R Y C O L O U R S


The tertiary colors are complementary to the primary colours. U S E A G E Used sparingly they can be included as accents or pops of color for fonts and other graphic elements (ie image backdrops (refer page 12), text overlays (refer page 13) and even linksand buttons).

RGB : 163 190 192

CMYK : 41 16 24 1

Web : #A3BEC0 B L U E S A G E Blue evokes feelingsof trustworthiness and friendship.

RGB : 189 196 178

CMYK : 30 16 32 2

Web : #BDC4B2 O L I V E G R E E N Is high-end andtimeless. It helps to communicate thequality and longetivety of all SHACKproducts.

RGB : 135 161 184

CMYK : 52 29 19 3

Web : #87A1B8 A N T I Q U E B L U E Blue greytones focus on reliability andcommitment to quality.

RGB : 69 119 149

CMYK : 75 42 27 10

Web : #457795 T E A L B L U E Blue green tonescreate emotional balance and stability.

RGB : 204 34 39

CMYK : 13 97 88 3

Web : #CC2227 R E D A brighter red was suggested forthe hearts in the Love SHACK logo /pricing on the category / collection pages.This is discussed further on pages 9 - 12.

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

CO

LOU

R P

ALE

TTE

-

STYL

E G

UID

E -

6

O R

T Y P O G R A P H Y

Typography is one of the most important communication tools between visitors and your website.It helps to create a harmonious atmosphere for your site and gives identity to your brand. Usingfonts well shows viewers that they have come to the right place and encourages them to explorethe site further.

Before we set the hierarchy ie :-• headline types : h1, h2, h3, h4, h5 and h6 (primary, secondary and tertiary headings)• intro text • body copy • pull quotes (if required) • links • caption textwe need to decide which font(s) will create the best visual imapct for SHACK site viewers.

Myriad Pro is currently used exclusively throughout the site.

We will look at both serif and sans serif font pairings (or a mix of the two).

We will also look at several scripted, handwritten styles to add a touch of flair and personality.Used sparingly handwritten typography can give an original and custom-made feel to headlinesand subheads and can also be placed strategically over images.

I’ve created several font sets / pairings for consideration. Or you may wish to mix and matchbetween the options. The scripted, handwritten fonts are entirely optional.

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

TYP

OG

RA

PH

Y -

ST

YLE

GU

IDE

- 7

F O N T S E T S / P A I R I N G S

Our stores offer an ambiance and mood thatexplores all the senses and provides retail

therapy in a gorgeous environment.

1

2

BEAUTIFUL PIECESAT BEAUTIFUL PRICES


GET THE LOOK FOR LESS

o� c�lecti�s

our co�ections

Headlines : CONTAX SANS 65 MEDIUM

Subheaders : CONTAX SANS 55 REGULAR

Body Copy : OPEN SANS REGULAR

Accents : STAY CLASSY

Our stores offer an ambiance and mood that

explores all the senses and provides retail




our collections

Headlines : OPTIMA MEDIUM (Used by Esteé Lauder)

Subheaders : OPTIMA MEDIUM

Body Copy : KARLA REGULAR

Accents : SPECTRUM

style

T Y P O G R A P H Y

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

TYP

OG

RA

PH

Y -

ST

YLE

GU

IDE

- 8


our collections

OR

our collections

our co�ections

our collectionsour collections

o� c�lecti�s

our co�ections

our collections




3

4

��


Headlines : ELARIS BOLD

Subheaders : OPEN SANS REGULAR

Body Copy : RALEWAY REGULAR

Accents : SAUVAGE SCRIPT

Our stores offer an ambiance and mood thatexplores all the senses and provides retail


Beautiful piecesat beautiful prices


Headlines : PLAYFAIR DISPLAY

Subheaders : AFFOGATO MEDIUM

Body Copy : AFFOGATO REGULAR

Accents : THE SECRET

5

Our stores o�er an ambiance and mood thatexplores all the senses and provides retail


Our stores o�er an ambiance and mood thatexplores all the senses and provides retail




Headlines : SOURCE SANS PRO BOLD

Subheaders : SOURCE SANS PRO SEMI

Body Copy : SOURCE SANS PRO

Body Copy : SOURCE SERIF PRO

Accents : PLAYFAIR DISPLAY

our collections

T Y P O G R A P H Y

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

TYP

OG

RA

PH

Y -

ST

YLE

GU

IDE

- 9





6

7

Get the look for less

Headlines : MONTSERRAT REGULAR

Subheaders : MONTSERRAT LIGHT

Body Copy : LATO REGULAR

Accents : AMSTERDA 3 SLANT

Our stores offer a mood that






our collections

Headlines : LIBRE BASKERVILLE

Subheaders : LIBRE BASKERVILLE ITALIC

Body Copy : LIBRE BASKERVILLE

Accents : LIBRE BASKERVILLE ITALIC

8






Headlines : ROBOTO MEDIUM

Subheaders : ROBOTO REGULAR

Body Copy : KARLA REGULAR

Accents : CALLEM SCRIPT

Using the SHACK brown colour palette with gold to give you a visual site guide.

our collections

our co�ections

G R A P H I C E L E M E N T S

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

GR

AP

HIC

ELE

MEN

TS -

STY

LE G

UID

E -

10

B I R D I E / B I R D I E S O N B R A N C H

Both the birdie and birdies on a branch have been long-term residents of the SHACK site. They alsoappear in a large proportion of SHACK’s current marketing and in-store promotional material.

Do we wish to continue to nurture them and use sparingly throughout the site or is it time for themto “fly the coop”?

OR do we create a new graphic element (perhaps in form of a set of icons)?

OR do we simply rely on a high concentration of beautiful images?

L O V E S H A C K L O G O

This then brings up the question of “where to” with the Love Shack logo.Discussions at the meeting suggested creation of :-• an option without the birdie• options with both scripted and non scripted fonts for the word “love”• selection of a brighter red

The name will also change to “Love Shack Members Program”. The font selection will depend largely on the fonts chosen for the site itself from options providedon previous pages. The following are examples for consideration / further fine-tuning.

our collections

Love

MEMBERS PROGRAM

LOVE1 Optional layout

MEMBERS PROGRAM


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

GR

AP

HIC

ELE

MEN

TS -

STY

LE G

UID

E -

11


our collections

M E M B E R S P R O G R A M

L O V E


L O V E


Love

3

4

5


2


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

GR

AP

HIC

ELE

MEN

TS -

STY

LE G

UID

E -

12


our collections

LOVE


love

7


MEMBERS PROGRAM


love6

9

10

8

loveM E M B E R S P R O G R A M

S I T E P R E S E N T A T I O N

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

SITE

PR

ESEN

TATI

ON

-

STYL

E G

UID

E -

13


S H A C K C O L L E C T I V E

Love Shack is a special loyalty club with exclusive benefits.Shack is a leader in the lifestyle industry and has earned anenviable reputation for its dedication to its customers and forsourcing items of beauty from across the globe at unbelievablyaffordable prices… and now you can save even more!

C O L L E C T I V E

The Love Shack Members Program could be highlighted as a separate section on the Home Pageshowcasing two images from the exquisite SHACK range.

Meeting discussions indicated that a separate page would be required for “SHACK Collective” where one-o� pieces from around the world are showcased in a separate gallery.

This could also be highlighted on the Home Page below the Love Shack section with the second image displaying a world map “pinned” with the country / region of origin for that particular piece.

In the image below : Body copy : Source Sans Pro Regular | Image : circular | Colour : brown tonings.

JOIN THE CLUB

Sourcing one-o� pieces from around the world.Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aeneanmassa. Cum ociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donecquam felis, ultricies nec, pellentesque eu, pretium

FIND O UT MO R E

MEMBERS PROGRAM

I M A G E R Y

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

IMA

GER

Y -

ST

YLE

GU

IDE

- 1

4

A P I C T U R E S P E A K S A T H O U S A N D S W O R D S ! !

AND THAT ALSO APPLIES ONLINE!

Good quality website imagery has the ability to grab our attention, trigger emotion and even compelus to take action. People no longer just want to browse a website, they want to experience it.

The aim of the SHACK website is to showcase what’s important : your products. We’re looking tomake it nearly impossible to look at a page on the site and not have your eyes focus on theproducts for seconds on end. That means inclusion of pristine images ... images that may take up ahuge portion of the page (particularly on the Home Page hero rotation gallery) ... or a collection ofsmaller images that just have that personal touch. The simplicity and consistency of the imagesspeaks highly as to the quality of the product.

Another consideration to assist in creating that personal touch would be to include several ‘people shots’ ie adding a human element into the images . Depth of Field can o�en harmonise animage by emphasizing a product while de-emphasizing the foreground / background. It may be ahand placing a plate onto a beautifully set Bellagio parquetry dining table , or a person sitting in thebackground sipping a cup of co�ee with one of SHACK’s Valentina linen tub chairs as the main focus.

Images currently utilised on the Category and Collection pages will be carried across to the new site.Page layout / design will be presented and discussed further during the actual site build.

style

U S E R I N T E R F A C E

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

USE

R I

NTE

RFA

CE

- S

TYLE

GU

IDE

- 1

5

U I E L E M E N T S

N A V I G A T I O N M E N U


UI or User Interface refers to the physical elements that a user engages with on a website.

We will be striving to create a user interface for SHACK site visitors that makes it an easy, e�icient,user-friendly experience AND ensures that we communicate the strengths and positioning of the SHACK brand while doing so.

To achieve this desired result we will be relying on good use of UI elements including navigationmenus, buttons, forms, newsletter subscription and iconography.

With reference to the image below, we will now have more space to add additional headings tothe navigation menu if required.

From meeting discussions we are considering the following navigation menu:-• HOME : Refer considerations below • FURNITURE : Change from Furniture by Category• COLLECTION : Change from Furniture by Collection• BLOG : Change from Inspiration• GALLERY : To remain• SHACK COLLECTIVE : New addition• CONTACT US : To remain• ADDITIONAL HEADING : Space available if required

• HOME : Do we remove and add space for an additional heading (consideration for ABOUT US and associated subheads which is currently housed in the footer)? Assuming that the majority of viewers would click on the SHACK logo to return to the Home Page?• Do we retain HOME and include ABOUT US as the additional heading? Order will obviously be subject to change• Do we include a search field as the additional heading? OR include the search field top of page along with the social media icons? • ADDITIONAL HEADING : If not required, individual headings will be ‘spaced to fit’ accordingly

Beautiful pieces

Beautiful pricesat

HOME COLLECTIONS BLOG SHACK COLLECTIVEGALLERY


available space for navigation menu

Replace HOME with ABOUT US? additional heading or search SEARCHFURNITURE CONTACT US

optional design / position for search


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

USE

R I

NTE

RFA

CE

- S

TYLE

GU

IDE

- 1

6

B U T T O N S

B U T T O N S I N A C T I O N

UI or User Interface refers to the physical elements that a user engages with on a website.

We will be striving to create a user interface for SHACK site visitors that makes it an easy, e�icient,user-friendly experience AND ensures that we communicate the strengths and positioning of the SHACK brand while doing so.

To achieve this desired result we will be relying on good use of UI elements including navigationmenus, buttons, forms, newsletter subscription and iconography.

co�ectionDEAUVILLE

SH OP N OW

H OV ER | C LIC K

NORMAL

HOVER | C LIC K

NORMAL

HOVER | CLICK

SQUARE ROUND CORNER SQUARE ROUND CORNER

NOR M AL

HOVER | C LIC K

NOR M AL

HOVER | C LIC K

Buttons are a vital element in creating a smooth user experience.

Button shape : Square or Round CornerButton colour : We’ll need to consider at least 2 colour options depending on the action of thebutton and this will be defined further during the site build. Below are several colour examples for consideration.

Square

co�ectionDEAUVILLE

SHO P NOW

HOVER | CLICK

Rounded


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

USE

R I

NTE

RFA

CE

- S

TYLE

GU

IDE

- 1

7

F O R M S

F O R M F I E L D S

SQUARE

SEARCH

OR

ROUND CORNER

Forms make or break your online interactions. They usually require users to do a lot of typing, checkingthe accuracy of filled-in information, and o�en error-fixing. Since forms are usually not the users’most favourite thing, it is essential to make filling out forms as easy and user-friendly as possible inorder to keep your visitors interested.

SELECT BOX

INPUT FIELD

SEARCH

ERROR VALIDATION

SUCCESS VALIDATION

SEARCH

TAG TAG TAG WITH CLOSE

F O R M S I N A C T I O N | S U B S C R I B E

*NAME

*POSTCODE

*EMAIL

Keep In TouchSign up for our newsletter to get the latestnews, special offers and announcements.

SIGN UP

subscribe


BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

ICO

NO

GR

AP

HY

- S

TYLE

GU

IDE

- 1

8

I C O N O G R A P H Y

PREFERENCE FOR SHOPPING?

PREFERENCE FOR PRICE TAG(if required?)

We’ll take advantage of using icons throughout the site.

I’ve created a simple set below which can be added to as required during the site build.

Address

Search Home Menu Trash Bin

Info ArrowsWarningSuccessError

ShoppingCart

ShoppingBasket

ShoppingBag

Price tagPrice tagDeliveryTruck

Love Shackheart

Email

OR OR

OR

OR

Phone

InstagramFacebook Pinterest InstagramFacebook Pinterest

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

BLO

G |

LA

TEST

AR

TIC

LES

-

STYL

E G

UID

E -

19

B L O G | L A T E S T A R T I C L E S

FURNITURE

SEARCH


desktop

L A Y O U T

As suggested in your Website Review 2018 an inspirational blog feed can be included on the HomePage appearing below the new Collections section.

The latest 3 blog posts could appear with < > giving the ability to scroll through posts and click tothat specific post.

Desktop / mobile view.I’ve included part of the Hero shot to give a better idea of perspective.

Brown colour palette Grey colour paletteColour accents

Grey colour paletteColour accents

LATEST ARTICLES mobile

Adding some greenery indoors isan easy way of injecting somecolour and life to your home.

Maintaining the life ...

trend alertTOP INDOOR

PLANTS FOR 2018

MAR 13

READ ARTICLE

There’s nothing like spending aday by the seaside, the sound ofthe surf, soft sand between the

toes and ...

coastal styleDECORATING IDEAS

FOR HOME

READ ARTICLE

FEB 13

The Hamptons look for homeinteriors has been welcomedaround the world by interiordesigners and is set to be ...

trendingHAMPTONS STYLE

FOR SUMMER

READ ARTICLE

JAN 13

Adding some greenery indoors isan easy way of injecting somecolour and life to your home.

Maintaining the life ...

trend alertTOP INDOOR

PLANTS FOR 2018

MAR 13

READ ART IC LE

There’s nothing like spending aday by the seaside, the sound ofthe surf, soft sand between the

toes and ...

coastal styleDECORATING IDEAS

FOR HOME

READ ART IC LE

FEB 13

The Hamptons look for homeinteriors has been welcomedaround the world by interiordesigners and is set to be ...

trendingHAMPTONS STYLE

FOR SUMMER

READ ART IC LE

J AN 13

I N S T A G R A M

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

INST

AG

RA

M -

STY

LE G

UID

E -

20

L A Y O U T O P T I O N S

An Instagram feed can be included on the Home Page as a collage for visual inspiration. As suggestedin your Website Review 2018 it could appear below the new Collections and Blog sections.

We can also look into automatically replicating this in the gallery page.

There are several ways in which we can present the Instagram feed to site visitors.

With reference to the Header / Hero guide below (not full hero image) , the Instagram feed can eithersit within the “available space for navigation menu” or we can expand to full screen width.

10 images sitting within the “available space for navigation menu”.

Beautiful pieces

Beautiful pricesat



SEARCH

FURNITURE CONTACT US HEADINGHOME COLLECTIONS BLOG SHACK COLLECTIVEGALLERY

1

INSTAGRAMFOLLOW US

Beautiful pieces

Beautiful pricesat


SEARCH


INSTAGRAMFOLLOW US

desktop mobile

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

INST

AG

RA

M -

STY

LE G

UID

E -

21

Instagram

I N S T A G R A M

6 images sitting within the “available space for navigation menu”.

Beautiful pieces

Beautiful pricesat



SEARCH


2

INSTAGRAM

FOLLOW US

FOLLOW US

10 images sitting within the “available space for navigation menu”.3

BEA

UTI

FUL

PIE

CES

AT

BEA

UTI

FUL

PR

ICES

INST

AG

RA

M -

STY

LE G

UID

E -

22 Instagram

I N S T A G R A M

6 images expanded to full screen width.


FURNITURE

SEARCH


4

FOLLOW US

InstagramCALL TO ACTION 1 CALL TO ACTION 2

FURNITURE

SEARCH


FOLLOW US

desktop

mobile


Beautiful piecesat beautiful prices

&AbsorbAnalyseDiscu�

Time to

Decide

BRAND / LOGO - Shack · BRAND / LOGO BRAND / LOGO BEAUTIFUL PIECES AT BEAUTIFUL PRICES STYLE GUIDE...

Documents

Transcript of BRAND / LOGO - Shack · BRAND / LOGO BRAND / LOGO BEAUTIFUL PIECES AT BEAUTIFUL PRICES STYLE GUIDE...