Mint & Badger: Developer Deliverable

Page 1

DEVELOPER DELIVERABLES


CREATED BY Sarah Holden

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


CONTENTS BRAND ASSETS .......................... 1 LOGO 2 COLORS & TYPOGRAPHY 3 BUTTONS & FORMS 4 SITE DEVELOPMENT ................... 5 SITE MAP 6 HI-FIDELITY WIRE FRAME 7 WEB ADVERTISEMENTS 8 PROTOTYPE 11

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


BRAND ASSETS


PRIMARY LOGO

2

Brand Assets

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


COLORS BADGER BLACK HEX: #231F20

CLEAN WHITE HEX: #FFFFFF

SLATE HEX: #323439

MINT LEAF HEX: #89DEC5

MINT BADGER HEX: #E1F2ED

3

Brand Assets

TYPOGRAPHY

HEADERS ROBOTO BOLD CONDENSED 52 PT CASE: ALL CAPS SUB-HEADERS ROBOTO CONDENSED 40 PT CASE: ALL CAPS LABELS ROBOTO CONDENSED 24 PT CASE: ALL CAPS Body Copy Roboto Regular 24 PT Case: Normal

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


BUTTONS & FORMS

4

PRIMARY BUTTONS

SECONDARY BUTTONS

COLOR: Mint Leaf TEXT COLOR: Badger Black TEXT SIZE: 18 pt FONT: Bold Condensed KERNING: 140 pt CORNER RADIUS: 5pt

COLOR: Badger Black TEXT COLOR: Mint Leaf TEXT SIZE: 18 pt FONT: Bold Condensed KERNING: 140 pt CORNER RADIUS: 5pt

DISABLED BUTTONS

FORMS

COLOR: HEX #E4E4E4 TEXT COLOR: Badger Black, 30% opacity TEXT SIZE: 18 pt FONT: Bold Condensed KERNING: 140 pt CORNER RADIUS: 5pt

COLOR: HEX #E4E4E4 BORDER: Badger Black, 1pt inner stroke TEXT COLOR: Badger Black TEXT SIZE: 16 pt FONT: Regular CORNER RADIUS: 5pt

Brand Assets

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


SITE DEVELOPMENT


SITE MAP

6

Site Development

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


HI-FIDELITY WIRE FRAME The Hi-fidelity Wire Frame contains call outs regarding certain intended functions within the site. This is an active hyper-link that will open in your default browser. https://xd.adobe.com/view/ed078dae-efe5-470d-5a23-4d1f669830d8-9b36/

7

Site Development

Š MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


WEB ADVERTISEMENTS

LEADERBOARD (728 X 90) PX PLACEMENT: Top of web page, center if possible, above or below site header & navigation

MEDIUM RECTANGLE (300 X 250) PX PLACEMENT: Top left or right of page, below site header, above body copy

8

Site Development

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


WEB ADVERTISEMENTS

HALF PAGE (300 X 600) PX PLACEMENT: Top of page, below site header & navigation, left or right of body copy

LARGE RECTANGLE (336 X 280) PX PLACEMENT: Middle to bottom of page, left or right in-line with body copy

9

Site Development

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


WEB ADVERTISEMENTS

SKYSCRAPER (120 X 600) PX PLACEMENT: Top of page, below site header & navigation, left or right of body copy

10

Site Development

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018


PROTOTYPE The following is the final prototype link for Mint & Badger’s on-line store. https://xd.adobe.com/view/0756a14a-90cc-4a85-46d2-ac81cf0998eb-7167/?fullscreen

11

Site Development

© MINT & BADGER SOAP & SHAVING CO. Developer Deliverables, 2018