Style Guide Reduced

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 20

website style guide
2019
the glycereens style guide
2
nina tanneberger 2019
the glycereens blend their
dirty bumblegum aesthetics with
garage punk rock tones to create a
fuzzed-out sound that is both energetic
and super loud. Rising from the ashes
of noisy garage heaven in Brisbane,
Queensland, Australia, The Glycereens
continue to spread their fuzzy love
throughout the cosmos.
CONTENTS
ABOUT CLIENT ........................... 3
MASTER LOGO ........................... 4
LOGO VARIATIONS .................... 5
MOODBOARD ............................ 6
COLOR PALETTE ........................ 7
ELEMENTS .................................. 8
PHOTOGRAPHY .......................... 9
BACKGROUND TEXTURES ........ 10
ICONS ....................................... 11
LAYOUT INSPIRATION ............. 12
TYPOGRAPHY .......................... 13
TYPOGRAPHY .......................... 14
TYPOGRAPHY .......................... 15
STORE ...................................... 16
BRAND APPLICATION .............. 17
BRAND APPLICATION .............. 18
CONTACT YOUR DESIGNER ..... 19
SOURCE LINKS ......................... 20
the glycereens style guide
3
nina tanneberger 2019
The Glycereens are: Heli (vox & guitar), Sol (backing vox & lead guitar), Chrissy (backing
voxs & drums), Nathan (backing vox & bass).
Review by Josh Prosser, Music Beyond Headlines.
Brisbane’s intergalactic punk fuzzsters The Glycereens have been spreading their wings
around the local Brisbane music scene since 2018. Although they are a reasonably new
band on the scene, they feature past members from some pretty killer bands. Bands such
as: Happy Times, Mad Macka, Boondall Boys, Warped, BMX Ray, Gravelrash, Fuzzbabes,
Helical Sun, Campus Tramps and Mecha Mecha. The Glycereens have recently released
their debut 10 track album Hangin’ On! It’s an alternative punk drenched fuzzfest.
Client Contact: Heli Puhakka
www.facebook.com/theglycereens
www.theglycereens.bandcamp.com
hmpuhakka@hotmail.com
ABOUT CLIENT
the glycereens style guide
4
nina tanneberger 2019
MASTER LOGO
q
the glycereens style guide
5
nina tanneberger 2019
LOGO VARIATIONS
Straight Logo Yello Pink Sticker Leopard Print Pink
the glycereens style guide
6
nina tanneberger 2019
MOODBOARD
the glycereens style guide
7
nina tanneberger 2019
COLOR PALETTE
v
HEX #1c1518
RGB 28 21 24
HEX #909294
RGB 144 146 148
HEX #303031
RGB 48 48 49
HEX #cfcfd1
RGB 207 207 209
HEX #
RGB 255 255 255
HEX #525355
RGB 82 83 85
HEX #ed208a
RGB 237 32 138
HEX #7aab41
RGB 122 171 65
Greyscale Accent Colours
HEX #dd00
RGB 255 221 0
the glycereens style guide
8
nina tanneberger 2019
ELEMENTS
Mobile
Desktop
Footer
- Colours using black/dark grey or a texture for background with pink and green to highlight.
- Desktop version has full menu at full screen mode complete with band title on the left and
shopping cart button on the right.
- Social media buttons will be underneath on the home page and on the footer for the site.
- Dropping down to tablet mode will move the band name to the center and menu dropdown
to the left.
- Dropdown button gives the menu options as well as a checkout button and social media
buttons.
- Mobile version similar to tablet dropdown, with drop down covering half the screen.
- Footer with simple buttons.
the glycereens style guide
9
nina tanneberger 2019
PHOTOGRAPHY
More photography needs to be done for the client;
these are some of the existing assets available.
Studio shoot would be ideal to give website a
professional feel.
the glycereens style guide
10
nina tanneberger 2019
BACKGROUND TEXTURES
The desirable background will be a grunge texture.
During the design phase there will be experimentation
with paint splatters to create a custom look.
the glycereens style guide
11
nina tanneberger 2019
ICONS
Looking to combine these three styles into one icon.
The themes are neon glow, a grunge background and paint
splatters.
This will be further developed in the design stage.
the glycereens style guide
12
nina tanneberger 2019
LAYOUT INSPIRATION
This section identies some desirable layouts; primarily using grids and
sectioned one-page-site design. The use of carousels is high and many
interactive features for the user.
Further examples are to be presented to client in person to display interactivity.
the glycereens style guide
13
nina tanneberger 2019
Body 1 Regular
Bold
TYPOGRAPHY
Poiret One
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvqxyz
1234567890!@#$%^&*()_+=”:?><
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra, nibh vitae pharetra tristique, purus
tellus pretium tortor, ut rutrum ipsum ipsum eget purus. Nullam posuere nibh arcu, eget eleifend
enim ultrices eu. Fusce iaculis lectus quis pretium scelerisque. Nunc congue ipsum in cursus vehicula.
Proin magna ligula, commodo quis magna ut, pretium mattis justo. Nam in leo malesuada, auctor
justo ut, tempus elit. Aliquam condimentum tempor ipsum, non dapibus nibh convallis eget. Pellen-
tesque at lacinia arcu, quis egestas nulla.
N/A
the glycereens style guide
14
nina tanneberger 2019
Body 2 Regular
Bold
TYPOGRAPHY
Raleway
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvqxyz
1234567890!@#$%^&*()_+=”:?><
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra, nibh vitae pharetra tris-
tique, purus tellus pretium tortor, ut rutrum ipsum ipsum eget purus. Nullam posuere nibh
arcu, eget eleifend enim ultrices eu. Fusce iaculis lectus quis pretium scelerisque. Nunc
congue ipsum in cursus vehicula. Proin magna ligula, commodo quis magna ut, pretium
mattis justo. Nam in leo malesuada, auctor justo ut, tempus elit. Aliquam condimentum
tempor ipsum, non dapibus nibh convallis eget. Pellentesque at lacinia arcu, quis egestas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra, nibh vitae pharetra
tristique, purus tellus pretium tortor, ut rutrum ipsum ipsum eget purus. Nullam posu-
ere nibh arcu, eget eleifend enim ultrices eu. Fusce iaculis lectus quis pretium sceleris-
que. Nunc congue ipsum in cursus vehicula. Proin magna ligula, commodo quis magna
ut, pretium mattis justo. Nam in leo malesuada, auctor justo ut, tempus elit. Aliquam
condimentum tempor ipsum, non dapibus nibh convallis eget. Pellentesque at lacinia
arcu, quis egestas nulla.
the glycereens style guide
15
nina tanneberger 2019
Header Regular
Bold
TYPOGRAPHY
Rock Salt
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvqxyz
1234567890!@#$%^&*()_+=”:?><
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viver-
ra, nibh vitae pharetra tristique, purus tellus pretium tortor,
ut rutrum ipsum ipsum eget purus. Nullam posuere nibh arcu, eget
eleifend enim ultrices eu. Fusce iaculis lectus quis pretium scel-
erisque. Nunc congue ipsum in cursus vehicula. Proin magna ligula,
commodo quis magna ut, pretium mattis justo. Nam in leo malesuada,
N/a
the glycereens style guide
16
nina tanneberger 2019
STORE
Amped T-Shirt
$25
Add To Cart View
Amped T-Shirt
$25
Add To Cart View
Amped T-Shirt
$25
Add To Cart View
General tone for store design.
Store display will be further explored
during the design phase.
the glycereens style guide
17
nina tanneberger 2019
BRAND APPLICATION
Website Feel
https://www.theglycereens.com
The Glycereens
the glycereens style guide
18
nina tanneberger 2019
BRAND APPLICATION
Sticker Collateral
the glycereens style guide
19
nina tanneberger 2019
CONTACT YOUR DESIGNER
Nina Tanneberger
Contact me
Contact me
Portfolio
Design by Nina Tanneberger
nina.tanneberger@gmail.com
0431 574 142
Web Design, Photography, Graphic Design
www.ninatanneberger.wordpress.com
www.behance.net/ninatanneberger
the glycereens style guide
20
nina tanneberger 2019
TEXTURES:
https://jooinn.com/grunge-background-texture.html
https://www.123rf.com/photo_38791281_old-wall-texture-grunge-background-black-and-white-background.html
http://www.tokkoro.com/picsup/2813688-alex-cherry-artwork-paint-splatter-grunge-abstract___abstract-wallpapers.
jpg
https://pngtree.com/freepng/cement-wall-texture_2901194.html
https://www.jooomshaper.com/WDF-331750.html
https://www.colourbox.com/vector/colorful-acrylic-paint-splatter-shiny-blob-on-black-background-vector-25214567
STYLE GUIDE TEMPLATES:
https://stock.adobe.com/au/search/templates?lters%5Bcontent_type%3Aphoto%5D=0&lters%5B-
content_type%3Aillustration%5D=0&lters%5Bcontent_type%3Azip_vector%5D=0&lters%5Bcontent_
type%3Avideo%5D=0&lters%5Bcontent_type%3Atemplate%5D=1&lters%5Bcontent_type%3A3d%5D=0&-
lters%5Binclude_stock_enterprise%5D=0&lters%5Bis_editorial%5D=0&lters%5Bcontent_type%3Aim-
age%5D=0&k=style+guide+indesign&order=relevance&safe_search=1&search_page=1&acp=&aco=-
style+guide+indesign&get_facets=0&asset_id=236500577
MOODBOARD:
http://www.textures4photoshop.com/tex/grunge-and-rust/grunge-paint-splatter-texture-overlay-for-photoshop.aspx
https://deliasphotos.com/white-brick-wall/
https://www.ickr.com/photos/photoalternative/2668208457/
https://www194.lunapic.com/editor/?action=undo&backupid=12
https://www.amazon.com/gp/product/1594743266/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&cre-
ativeASIN=1594743266&linkCode=as2&tag=gigposters-20&linkId=e64e960403731ba3c5db61e25af3ed1a
https://weheartit.com/entry/36151678
https://www.pinterest.com.au/pin/629941066607662122/
http://imperfexioning.tumblr.com/post/96692375053
https://www.facebook.com/RichBoyCriesForMommaBook?ref=hl
https://lushmakeupideas.info/category/pink-lips/
https://i.pinimg.com/564x/c2//17/c2174570e0d5c3342434c5c7586407.jpg
https://www.instagram.com/radicivolo/
https://www.pinterest.com.au/pin/388154061609238504/
PHOTOGRAPHY:
https://www.facebook.com/theglycereens/
https://www.instagram.com/glycereens/
ICON LINKS:
https://www.iconnder.com/iconsets/social-network-logo-collection-2
https://www.iconnder.com/iconsets/social-media-grunge-1
https://www.iconnder.com/iconsets/neon-social-icons-set
https://www.iconnder.com/iconsets/social-media-2068
https://www.vecteezy.com/vector-art/268304-valentine-neon-sign-vector
LAYOUT EXAMPLES:
https://onepagelove.com/sonoramav
http://stevenwilsonhq.com/sw/
https://i.pinimg.com/originals/3b/a5/69/3ba569c820977c8ea42763aad81e7b7d.jpg
https://themeforest.net/item/beat-onepage-html5-music-band-template/5825021?ref=WiselyThemes&clickthrough_
id=1401404813&redirect_back=true
FONTS:
Arial: Adobe Creative Cloud
Poiret One: Google Fonts
https://fonts.google.com/specimen/Poiret+One
Raleway: Google Fonts
https://fonts.google.com/specimen/Raleway
Rock Salt: Google Fonts
https://fonts.google.com/specimen/Rock+Salt
CLIENT COLLATERAL ASSETS:
Heli Puhakka
The Glycereens All Rights Reserved
OTHER IMAGES:
https://images-na.ssl-images-amazon.com/images/I/81IlWHAmQ5L._SL1008_.jpg
http://unlockcampus.org/code/tutoring/rvarts-api-version
https://sae.edu.au/
https://geekylifestyle.com/refox-quantum-vs-safari-vs-opera-vs-google-chrome
APPLICATIONS USED:
Adobe InDesign, Adobe Photoshop, Adobe Illustrator, Google
Chrome, Microsoft Word
WEBSITES USED:
Google Drive, Pinterest, MockFlow, Google Fonts,
Adobe Stock
SOURCE LINKS

Navigation menu