Jack Wolfskin Katalog

CORPORATE DESIGNKURZFASSUNG 2015CD YUMPU - KURZFASSUNG1

INHALTSVERZEICHNISFARBSCHEMAPrimärfarbenProduktfarbenAkzentfarbenFarben bei Buttons und TextlinksCD Farben von Social Media und Diensten335567DAS LOGOAnwendung und Informationen zum Logo88TYPOGRAFIECorporate Font von YumpuIcon Font von YumpuAnwendungsbeispiele Typografie991010GRAFISCHE ELEMENTEAnwendung und Informationen zu den Gestaltungselementen1111CD YUMPU - KURZFASSUNG2

FARBSCHEMAVERWENDUNG DER FARBEN BEI YUMPUPRIMÄRFARBEN BEI YUMPU:Standard Orange#e65117R: 230G: 81B: 23#b84112 #e65117 #eb7445#f09774 #f5b9a2 #fadcd1Petrolblau#25313aR: 37G: 49B: 58#1e272e #25313a #515a61 #7c8389 #a8adb0 #d3d6d8Schwarz/Weiß und Grautöne#000 #fff#333 #585858 #999 #ddd #e9e9e9 #f8f8f8Anwendung der FarbenStandard OrangeStandard Orange findet Anwendung beim Yumpu Logo, kann fürHeadlines eingesetzt werden und flächig als Hintergrundfarbe.Zur Hervorhebung von Bildern und/oder Werbeanzeigen wird einRahmen in Standard Orange um das Bild gelegt.PetrolblauAnwendung der Grautöne:#333333 Headlines, Titel bei Popups,Yumpu Logo Dunkelgrau#585858#999999Text, Text in FormulfelderText für Informationen,inaktive Social-Media-ButtonsPetrolblau dient vorwiegend als Hintergrundfarbe im Player oderals Farbe für Flächen.GrautöneGrautöne werden für Hintergründe und als Rahmen verwendet.Für Hintergründe/Verläufe bei Werbeanzeigen und Bildern kanndie gesamte Bandbreite von 100% Schwarz bis 1% Schwarz undWeiß verwendet werden. Bei grafischen Elementen, Headlinesund Text gibt es jedoch vorgegebene Grauwerte.#dddddd#e9e9e9#f8f8f8Rahmenfarbe, Icons in derUpload-Box, TrennlinienHintergründeHintergründe, Hintergründevon Titel bei Popups(Siehe: „Einsatz von Grautönen aufYumpu.com“, Seite 4)CD YUMPU - KURZFASSUNG3

Einsatz von Grautönen auf Yumpu.comBsp. Embed Generator:Flächiger Hintergrund in der linken Spaltewird in #f8f8f8 gesetzt. Die DropdownLeisten sind in #e9e9e9 gesetzt.Der Hintergrund in der rechten Spalte istweiß. Die Spalte enthält ein Vorschaubild.Bei Vorschaubildern sollte der Hintergrundimmer weiß sein, da nur so das Bild richtigzur Geltung kommt, und nicht verfälschtwird.Bsp. Popup Sharefunktion:Titel von Popups werden werden aufeine Fläche mit dem Wert #f8f8f8gesetzt.Bsp. Rahmen:Rahmen werden in derFarbe #ddd gesetzt.Bsp. Uploadbox:Rahmen sind in #ddd gesetzt,sowie das Upload-Icon.#999 erhalten Social-Media-Buttons,die nicht aktiv bzw. nicht ausgewähltsind, wie im Beispiel oben.Bsp. Informationen:Der Text ist in #999 gesetzt.CD YUMPU - KURZFASSUNG4

PRODUKTFARBEN:FREE#d4ddddR: 212G: 221B: 221#aab1b1 #d4dddd #dde4e4 #e5ebeb #eef1f1 #f6f8f8adFREE#aadfe1R: 170G: 223B: 225#88b2b4 #aadfe1 #bbe5e7 #cceced #ddf2f3 #eef9f9WEBKiosk#c6d083R: 198G: 208B: 131#9ea669 #c6d083 #d1d99c #dde3b5 #e8eccd #f4f6e6APPKiosk#aadfe1R: 255G: 235B: 124#ccbc63 #ffeb7c#ffef96 #fff3b0 #fff7cb #fffbe5PROKiosk#f1a255R: 241G: 162B: 85#c18244 #f1a255 #f4b577 #f7c799 #f9dabb #fcecddJede Produktfarbe darf nur für das jeweilige Produkt selbstund gestalterisch nur im direkten Zusammenhang mit demjeweiligen Produkt angewendet werden.Für Elemente (Flächen, Buttons, Rahmen, etc.), die nicht indirektem Zusammenhang mit dem jeweiligen Produkt stehen,dürfen die Farben niemals verwendet werden.AKZENTFARBEN:Neben den Primär- und Produktfarben sind auch weitere Farbenfür eine abwechslungsreiche Gestaltung möglich. Allerdings sindAkzentfarben nicht für große Flächen im Layout vorgesehen,sondern dienen als Informationsfarben, z.B. bei Infografiken.CD YUMPU - KURZFASSUNG5

FARBEN BEI BUTTONS UND TEXTLINKS:Button Blau und Textlinks | Primary#0082b2R: 0G: 130B: 178hoverpressnormalinactiveFont-Color: #fffFont-Weight: normalSPEICHERN#006489 #0082b2 #339bc1Button Weiß | Default#ffffffR: 255G: 255B: 225hoverpressnormalinactiveFont-Color: #333Font-Weight: normalMAGAZIN LÖSCHENRahmen:#cccR: 178G: 178B: 178#e6e6e6#ffffff#ebebebButton Grün | Success#05ba63R: 5G: 186B: 99hoverpressnormalinactiveFont-Color: #fffFont-Weight: normalMAGAZIN ANSEHEN#00934b #05ba63 #37c882Button Rot | Danger#d9534fR: 217G: 83B: 79hoverpressnormalinactiveFont-Color: #fffFont-Weight: normal#cc2f25 #d9534f #e17572Button Gelb | Warning#f0ad4eR: 240G: 173B: 78hoverpressnormalinactiveFont-Color: #fffFont-Weight: normal#ed9700#f0ad4e#f3bd71Button Hellblau | Info#5bc0deR: 91G: 192B: 222hoverpressnormalinactiveFont-Color: #fffFont-Weight: normal#26b0d7#5bc0de#7ccde5CD YUMPU - KURZFASSUNG6

CD FARBEN VON SOCIAL MEDIA UND DIENSTENFacebookTwitterGoogle+#3b5998R: 59G: 89B: 152#00acedR: 0G: 172B: 237#dd4b39R: 221G: 75B: 57YouTubeLinkedinPinterest#bb0000R: 187G: 0B: 0#007bb6R: 0G: 123B: 182#cb2027R: 203G: 32B: 39FlickrVimeoZapier#ff0084R: 255G: 0B: 132#aad450R: 170G: 212B: 80#FF4A00R: 255G: 74B: 0DropboxAndroid#007ee5R: 0G: 126B: 229#a4c639R: 164G: 198B: 57inaktive Social Media Buttons#999R: 153G: 153B: 153CD YUMPU - KURZFASSUNG7

DAS LOGORICHTIGE VERWENDUNG DES LOGOSANWENDUNG UND INFORMATIONEN ZUM LOGOAllgemeine InformationenDas Logo von Yumpu, sowie dessen Kurzform dürfen nur in dendefinierten Farben Standard Orange (Deckkraft 100%),Dunkelgrau (#333, Deckkraft 100%), Schwarz/Weiß und inGrauabstufungen (Print) verwendet werden. Das Logo darf niemit anderen Farben oder Farbkombinationen eingefärbt werden.Anwendung des LogosFalsche AnwendungInterne AbwandlungenUm Yumpu DEV visuell auf Social MediaPortalen zu vertreten, wurde die Kurzformdes Yumpu-Logos mit einem Zahnradangepasst.CD YUMPU - KURZFASSUNG8

TYPOGRAFIEEINSATZ VON SCHRIFT BEI YUMPUCORPORATE FONT VON YUMPU:OPEN SANSAls Standardschrift dient die Schriftfamilie Open Sans. Es gibt5 Schriftschnitte: Light, Regular, Semibold, Bold und Extrabold.Bei Headlines/Claims sollte vorwiegend Open Sans Lightverwendet werden. Zur Hervorhebung von Informationenkönnen einzelne Wörter in Semibold gesetzt werden. Bei kleinenSchriftgrößen wird auf Open Sans Regular zurückgegriffen.Im Fließtext wird Open Sans Regular angewendet. Hervorhebungenwerden in Open Sans Semibold gesetzt. Bold und Extrabolddürfen nur in Ausnahmefällen verwendet werden.Schriftschnitte im Web:Open Sans Light entspricht:font-weight: 300;Open Sans Regular entspricht:font-weight: normal;Open Sans Semibold entspricht:font-weight: 600;Textgröße im Web:font-size: 14px;line-height: 20px;Open Sans LightABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890Open Sans RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890Open Sans SemiboldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890Open Sans BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890Open Sans Extra BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890CD YUMPU - KURZFASSUNG9

ICON FONT VON YUMPU:Fontawesome und Yumpu Icon FontFür Icons auf Yumpu.com wird die SchriftFontawesome verwendet:http://fortawesome.github.io/Font-Awesome/Für den Hotspot-Editor wurde eigens die SchriftYumpu Icon Font entwickelt.ANWENDUNGSBEISPIELE TYPOGRAFIE:Bsp. Bild für Facebook:Die Headline ist in Opens Sans Lightgesetzt. Die Stichwörter „eigenes Logo“werden mit Open Sans Semiboldhervorgehoben.Bsp. Yumpu Icon Font:Navigationsleiste desHotspot-Editors mit Iconsder Yumpu Icon Font.Bsp. Fontawesome:Einsatz von Icons auf Yumpu.com,z.B. bei der Navigations-Leiste desMagazin-Players.Einsatz von Icons innerhalb von Text.CD YUMPU - KURZFASSUNG10

GRAFISCHE ELEMENTEGESTALTUNGSMITTEL VON YUMPUANWENDUNG UND INFORMATIONEN ZU DEN GESTALTUNGSELEMENTEN2px RadiusAbgerundete Ecken mit einem Radius von 2px werden beiquadratischen Flächen und bei verschiedenen Elementenangwendet:- Buttons- Formularfelder- Popup-FensterGroßbuchstaben bei Headlines und ButtonsHeadlines und Texte bei Buttons sollten in Großbuchstabengesetzt werden. Dabei ist darauf zu achten, dass die Texte kurzgehalten sind, um die Lesbarkeit zu gewährleisten.Rahmen 1px #dddUm Boxen wird ein Rahmen von 1px in der Farbe #dddgelegt. Dadurch wird ein Kontrast zum Hintergrund undder Box erstellt.WeißraumEs ist darauf zu achten, dass genügend Weißraum zwischeneinzelnen Elementen ist. Mit Weißraum werden Abgrenzungengeschaffen und Elemente in den Vordergrund gestellt.Einsatz von IconsIcons von Fontawesome werden für Buttons undals gestalterisches Hilfsmittel verwendet.CD YUMPU - KURZFASSUNG11