MACHE DIE DINGE SO EINFACH WIE MÖGLICH -ABER NICHT EINFACHER.Vortrag Webdesign. 2. Semester. SS 2011.Salzgitter, 15./16.04...
Pixelpark GruppeElephant Seven Hamburg
AGENDA.1.   Vorstellung und Einleitung2.   Warum Kommunikationsdesign?3.   Corporate Design4.   Online Design5.   Aufgabe ...
AGENDA.VORSTELLUNG UND EINLEITUNG.                              © Elephant Seven |   4
|
DATEN.         Name:              Elephant Seven Hamburg GmbH         Adresse:           Gerhofstraße 1-3, 20354 Hamburg  ...
NETZWERK.ELEPHANT SEVEN                PIXELPARK AGENTUR                                        AG               YELLOW TO...
UNSEREPOSITIONIERUNG.ELEPHANT SEVEN IST DIE KREATIVEACROSS-THE-LINEAGENTURFÜREINEVERNETZTDENKENDEWELT.                    ...
Messe                                            DIRECT        COACHING                                                   ...
KUNDEN UNIT HH.                  © Elephant Seven |   10
KUNDEN UNIT HH, FF.                      © Elephant Seven |   11
SOFTWAREPARTNERSCHAFTEN.**des Pixelparkkonzerns      © Elephant Seven |   12
DARAUF SIND WIR STOLZ.**557 x Gold, Silber oder Bronze und keinmal Kupfer   © Elephant Seven |   13
OLIVER VIETS. GF KREATION.             1995:       Graphic/Editorial Design für “Snowboarder Mag” und                     ...
TIM SCHRÖDER. SENIOR WEB DEVELOPER.             Seit  Front- und Backendseitige Webentwicklung in             1996: versch...
APROPOS „SENIOR“. WAS BEDEUTEN DIE TITELIN EINER AGENTUR?                                    © Elephant Seven |   16
AGENDA.WARUM KOMMUNIKATIONSDESIGN?                              © Elephant Seven |   17
70.000 NEUEMARKENWERDEN JEDESJAHR INDEUTSCHLANDANGEMELDET.               |
JEDER WIRDTÄGLICH MIT 2.500BIS 5.000(WM)WERBE-BOTSCHAFTENKONFRONTIERT.          |   19
FB-“ZWECK“-SEITEN HABEN5.3 MILLIARDENFANSGENERIERT.                 |   20
DIE ZAHL DERAUF FACEBOOK„GETEILTEN“INFO-BITS(LINKS, STORIES, BLOGPOSTS,...)PRO WOCHE: 3,5MILLIARDEN                       ...
MEHR ALS 66% DERiPHONE-NUTZERSURFEN IMINTERNET, WÄHRENDDER FERNSEHERLÄUFT.                       |               © Elephan...
DIE INFORMATIONSÜBERLASTUNGBEI ZEITSCHRIFTEN BETRÄGT94%. NUR 6% ALLER INZEITSCHRIFTEN PRÄSENTIERTENINFORMATIONEN WERDEN VO...
IM BESTEN FALL KÖNNEN ZEHN BISZWANZIG WERBEBOTSCHAFTEN AMTAG BEWUSST WAHRGENOMMENWERDEN. ZWEI BIS DREI LÖSEN IRGENDETWAS I...
SCHÄTZENSIE, WIE VIELE VON100 TV-UND FUNKSPOTS BEWUSSTWAHRGENOMMENWERDEN:                            |                    ...
ANTWORT:ZWEI BIS DREI.                               |                 © Elephant Seven   26
AUSFLUG IN DIE WISSENSCHAFT. SELEKTIVEWAHRNEHMUNG.„Wir nehmen gezielt das wahr, was unserer aktuellen Aufgabe, unserem Zie...
EIN AUFMERKSAMKEITS-TEST.                            © Elephant Seven |   28
DIE HERAUSFORDERUNG.DAMIT ANZEIGEN ÜBERHAUPT EINELEISTUNG ERBRINGEN UND EINEWERBEWIRKUNG HERVORRUFEN KÖNNEN,MÜSSEN SIE ZUE...
Schnell und einfach:SPONTANE, HOHE                       VERMITTLUNG DERAUFMERKSAMKEIT.                      BOTSCHAFT IN ...
EINE MÖGLICHKEIT, WERBEWIRKUNG ZUMESSEN.• Prüfung der Verständlichkeit einzelner       • Verständlichkeit des Fließtextes ...
EINE MÖGLICHKEIT, WERBEWIRKUNG ZUMESSEN. FF.• Prüfung der Informationsaufnahme                • Platzierung des Absenders ...
PRÜFUNG DER INFORMATIONSAUFNAHME.                             © Elephant Seven |   34
Ausgaben vs. Media-Coverage.                               |
Der U-Bahn Plan von Oslo.                            |
Der neue U-Bahn Plan von Oslo.                                 |
|
US-AUSGABEN VS. MEDIEN ERWÄHNUNG.Ausgaben vs. Media-Coverage.        |
DATEN ZUR BETRACHTUNGSDAUER.Die durchschnittliche Betrachtungsdauer von Anzeigen sind 2,2 Sekunden.In Monatsmagazinen sind...
|
|
„SOFORTIGE VERSTÄNDLICHKEIT“.                                © Elephant Seven |   44
|
|
|
|   48
|   49
„WIDERSPRÜCHLICHKEIT“?                         © Elephant Seven |   50
|
|
|   53
|   54
|© Elephant Seven   55
„HOHE EINPRÄGSAMKEIT UNDEIGENSTÄNDIGKEIT DES BILDES“?                                © Elephant Seven |   56
|© Elephant Seven   57
|© Elephant Seven   58
|   59
|© Elephant Seven   60
|   61
|   62
|   63
|© Elephant Seven   64
|   66
|   67
|   68
|   69
|   70
|   71
„VERSTÄNDLICHKEIT DES BILDES?“                                 © Elephant Seven |   75
|
|
|
|
|
AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN.                       © Elephant Seven |   81
AGENDA.CORPORATE DESIGN.                    © Elephant Seven |   82
„PASST NICHT ZU UNSERER POSITIONIERUNG“.Haben Sie das schon mal gehört? Wenn Sie es hören, wissen Sie: Das ist das wasserd...
CORPORATE DESIGN.Bevor wir uns die speziell Onlinekommunikation betreffenden Details ansehen, gehe ich kurzauf die Grundla...
CORPORATE DESIGN – POESIE.„Im Rahmen der kontinuierlichen Entwicklung unserer Marke haben wir auch unser BrandDesign evolu...
DESIGN AM BEISPIEL LOGO.                           © Elephant Seven |   86
DESIGNENTWICKLUNG.                     © Elephant Seven |   87
BELIEBTE LOGOS.Achtung, es wird bunt.                         © Elephant Seven |   88
LOGO WORTMARKE.Achtung, es wird bunt.                         © Elephant Seven |   89
LOGO METAPHER.                 © Elephant Seven |   90
DAS LOGO IM INTERNET. AKUTE BUBBELITIS.                                    © Elephant Seven |   91
DAS LOGO IM INTERNET.Achtung, es wird bunt.                         © Elephant Seven |   92
LOGO WIEDERERKENNUNGSWERT.                             © Elephant Seven |   93
CORPORATE DESIGN MERCEDES-BENZ 2008.                                   © Elephant Seven |   94
WETTBEWERBER.                © Elephant Seven |   95
WETTBEWERBER.                © Elephant Seven |   96
CORPORATE DESIGN.                    © Elephant Seven |   97
CORPORATE DESIGN.                    © Elephant Seven |   98
FARBEN.Achtung, es wird bunt.                         © Elephant Seven |   99
ROT IST DIE FARBE DES FEUERS.Sie erregt Aufmerksamkeit, steht für Vitalität und Energie, Liebe und Leidenschaft.Sie kann ...
ORANGE IST DIE FARBE DERUNTERGEHENDEN SONNE.Sie ist die Symbolfarbe für Optimismus und Lebensfreude. Sie signalisiertAufg...
GELB IST DIE FARBE DER SONNE.Sie vermittelt Licht, Heiterkeit und Freude. Sie steht auch für Wissen, Weisheit, Vernunftun...
GRÜN IST DIE FARBE DER WIESEN UND WÄLDER.Sie ist eine beruhigende Farbe. Sie steht für Großzügigkeit, Sicherheit, Harmoni...
CYAN.In der Umgangssprache auch Türkis genannt, ist eine frische Farbe. Es ist die Farbe desMeers an einem sonnigen Tag. ...
BLAU IST DIE FARBE DES HIMMELS.Sie steht für Kühle, Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht. Sie kann aberauc...
VIOLETT IST EINE WÜRDEVOLLE FARBE.Sie ist die Farbe der Inspiration, der Mystik, Magie und der Kunst. Sie ist eineaußerge...
MAGENTA.Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. In der Naturerleben wir sie hauptsächlich a...
WEIß IST DIE FARBE VON EIS UND SCHNEE.Sie ist ein Symbol der Reinheit, Klarheit, Erhabenheit und Unschuld. Sie gilt aber a...
GRAU.Grau ist die Farbe des wolkenverhangenen Himmels an einem trüben Tag. Sie ist dieFarbe vollkommener Neutralität, Vors...
PRIMÄRFARBEN MERCEDES-BENZ. Interpretation bitte!        Kompetenz                                   © Elephant Seven | 110
TYPOGRAFIE.Typographie, die; -, -n (Druckwesen) v. griech. typos(Abdruck, Abbild, Form) und graphein (schreiben, einritzen...
TYPOGRAFIE.Ein Text hat nicht nur einen Inhalt, er hat auch ein "Gesicht" – die Schrift, in der er gedrucktist. Von den Ze...
TYPOGRAFIE.Ein Gedicht, ein Lesestück wird vom Vortragenden durchModulation seiner Stimme beeinflusst. Er kann Gefühle h...
TYPOGRAFIE.              Serifenschrift: Antiqua              Es gibt die Antiqua-Schriften, die              an den Endun...
TYPOGRAFIE.              Grotesk-Schriften: Sie haben              keine Serifen und wirken in aller              Regel mo...
ANEKDOTE „GROTESK“.Die Bezeichnung „Grotesk“ rührt daher, dass das Kleinbürgertum und die kunsthandwerklichorientierte G...
WAS STIMMT HIER NICHT?                         © Elephant Seven | 117
AUFLÖSUNG.             © Elephant Seven | 118
TYPOGRAFIE MERCEDES-BENZ.Interpretation bitte.                        Interpretation bitte!                               ...
TYPO VERMASSUNG.                   © Elephant Seven | 120
TYPO WEITERE DEFINITIONEN.                             © Elephant Seven | 121
BILDER.„Die Bildsprache prägt die Kommunikation der Marke Mercedes-Benz. Die Bilder reflektierenMarkenpersönlichkeit und M...
BILDSPRACHE MERCEDES-BENZ.                             © Elephant Seven | 123
BILDSPRACHE MERCEDES-BENZ.                             © Elephant Seven | 124
UND JETZT ALLE ZUSAMMEN:                           © Elephant Seven | 125
AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN.                       © Elephant Seven | 126
AGENDA.ONLINE DESIGN.                 © Elephant Seven | 127
|© Elephant Seven   128
|© Elephant Seven   129
|© Elephant Seven   130
|© Elephant Seven   131
|© Elephant Seven   132
|© Elephant Seven   133
MERCEDES-BENZ WEBSITE.                         |
IM DETAIL.             Logoposition links ist die             historisch gewachsene             „sicherste“ Position, da s...
IM DETAIL.Vermassung des Headers (Dachbalkens)   Gestaltungsraster wie in Print.und der Standardelemente.                 ...
IM DETAIL.In diesem Fall verlängert sich die Website nach rechts.Der Flexible Bereich muss definiert werden.              ...
AGENDACORPORATE DESIGN. AUFGABE 10 MINUTEN.„WELCHE ELEMENTE MÜSSEN GESTALTETWERDEN?“                             © Elephan...
Buttons                                                           Navi/TabIM DETAIL.                                      ...
IM DETAIL.             Icons müssen/sollten gestaltet             werden, um noch schneller die             Funktionen wah...
IM DETAIL.             Headlines: Die Schriften             werden serverseitig als Bilder             ausgespielt. Durch ...
IM DETAIL.             © Elephant Seven | 142
EIN STYLEGUIDE BEISPIELhttp://bannertool.de/upload/itze/styleguide/                                               © Elepha...
WEBFONTS. VERDANA.                     Designedby Matthew Carter and                     handhintedbyleadinghintingexpert,...
SYSTEMSCHRIFTEN.Für die „Leseschriften“ sind also nach wie vor bewährte Systemschriften ratsam.Vorteile:• Lesbarkeit• bew...
SYSTEMSCHRIFTEN.             Selbst ausprobieren unter:            http://typetester.maratz.com/                          ...
SCHRIFTEN IN FLASH.In den Flashspecials werden die jeweiligen Schriften nachgeladen. Hierbei wird für alleSprachen außer ...
|
SCHRIFTEN UND HTMLTechnologie            Beschreibung         Vorteile              NachteileSystemfonts                  ...
SCHRIFTEN, TECHNISCH: WEBFONTSVorteile:• CI-konform• trotzdem normaler HTML-Text• SEO-konformNachteile:• Font muss nachgel...
SCHRIFTEN, TECHNISCH: IMAGESVorteile:• CI-konform• Einfache Lösung• Cross-PlatformNachteile:• Bild muss entweder statisch ...
SCHRIFTEN, TECHNISCH: SIFRScalableInman Flash Replacement, per JavaScript wird HTML-Text durch Flash ersetztVorteile:• CI-...
WEITERE GESTALTUNGSELEMENTE.Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wieAnimatione...
WEITERE GESTALTUNGSELEMENTE.                                                SkyscraperIm Internet spielt die Bewegung und ...
WEITERE GESTALTUNGSELEMENTE.                                Layer 400x400      Der Banner „Name“. Link                    ...
WEITERE GESTALTUNGSELEMENTE.                     Landingpage                     • Aufgeräumtes Erscheinungsbild          ...
Image-Mail:Großes Bild, 1 Aussageund 1 Ziel.Content-Mail:1 Top-Thema undmehrere kleine Content-Teaser.         Landingpage...
AGENDACORPORATE DESIGN. MITTAGSPAUSE.                    © Elephant Seven | 158
GRUPPENARBEIT.Beurteilen Sie anhand dessen, was Sie gerade zu Onlinegestaltung gezeigten die folgendenBeispiele. 3 Gruppen...
GRUPPE FASHIONISTAS.Thomas Sabo | Hermès                       |
GRUPPE 1.Beispiel: Thomas Sabo | Hermès                                 |
|
|
|
|
|
|
GRUPPE 1.Beispiel: Thomas Sabo | Hermès                                 |
GRUPPE 1.Beispiel: Thomas Sabo | Hermès                                 |
GRUPPE 1.Beispiel: Thomas Sabo | Hermès                                 |
GRUPPE 1.Beispiel: Thomas Sabo | Hermès                                 |
|
|
GRUPPE GRIFFEL VS. SCHREIBGERÄTGraf v. Faber-Castell | Montblanc                                    |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
GRUPPE 2.            |
|
|
|
|
|
|
|
|
|
GRUPPE ZUCKERSPIEGELBendicks | Werthers Original US                                  |
|
|
|
|
|
|
|
|
|
|
ERGEBNISPRÄSENTATIONEN.                          |
AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN.                       © Elephant Seven | 205
WEBSITE TYPEN.•   Markenwebsite: Hapag Lloyd Kreuzfahrten•   Corporate Website: Deutsche Post DHL•   Microsite: nimm2•   O...
MARKENWEBSITE.HAPAG LLOYD KREUZFAHRTEN.                            © Elephant Seven | 207
DER HORIZONT ALS BÜHNE.Kreuzfahrten assoziieren wir mit Weite, Ruhe und einem endlosen Horizont –unterbrochen von diversen...
Navigation        BildhorizontFloater mit News und Teasern                                             |                  ...
Navigation        BildhorizontFloater mit News und Teasern                                             |                  ...
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
|
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
|
|
© Elephant Seven | 219
(Hier iPad rausholen)                                      |                        © Elephant Seven   220
TECHNISCH: MARKENWEBSITES•    CI hat oberste Priorität•    Große Bühnen, ggf. Flash, Video, das ganz große Programm•    Gr...
CORPORATE WEBSITE.DEUTSCHE POST DHL.                     © Elephant Seven | 222
DAS WICHTIGSTE GANZ NACH VORNE.Schon auf der Homepage: Der Aktienkurs und die neuesten Pressemitteilungen.-   platzsparend...
Logo                        Navigation                Suche                           Bühne       Chart Aktienkurs, Presse...
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
|
|
TECHNISCH: CORPORATE WEBSITES•    CI ist wichtig•    Viele Informationen, die auch auffindbar sein müssen•    garantiert C...
MICROSITE.NIMM2 VON STORCK.                    © Elephant Seven | 229
SPIELERISCHER EINSTIEG.Hier wird weniger gezielt nach Informationen gesucht, sondern spielerisch erforscht,was die Seite s...
|
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
TECHNISCH: MICROSITES•    Technische Ausrichtung je nach Zielgruppe (z.B. Flash, Breitband)•    oft kurze Halbwertzeit•   ...
ONLINE SHOP.AMAZON.               © Elephant Seven | 234
DER PERFEKTE SALESFUNNEL.Im Mittelpunkt stehen die Produkte. Die Marke Amazon wird fast ausschließlich durchfunktionale El...
Logo                     Großes Suchfeld   WarenkorbKategorien-Navigation              Produktempfehlungen       Aktionen ...
|
|
|
|
TECHNISCH: ONLINE SHOPS•    Verkaufen ist oberste Priorität•    Fehler und zu lange Ladedauer führen zu Kaufabbrüchen•    ...
LANDINGPAGE 1.DRIFT.                 © Elephant Seven | 242
CALL TO ACTION IM MITTELPUNKT.Mal eben einen Banner geklickt oder von Check24.de hierher gesprungen, sieht der Usersofort,...
Logo und Hauptnavigation                        Call to ActionMarke                           Vorteile    Zertifizierungen...
|
TECHNISCH: LANDINGPAGES•   Optimierung des Ladeverhaltens•   Muss immer und überall funktionieren•   Beispiel Drift Landin...
LANDINGPAGE 2.ITZDIRECT24.                 © Elephant Seven | 247
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
LANDINGPAGE 3.NEXUS.                 © Elephant Seven | 249
(Hier Layouts der unterschiedlichen Motive auf der Homepage)                                                              ...
MAGAZIN 1.BOSS.             © Elephant Seven | 251
CONTENT IS KING.Großflächige Bild/Text Teaser machen die Entscheidung für den Besucher leicht.-   Filter nach Kategorien- ...
Logo und HauptnavigationMagazin-Navigation                            Top-Thema  Social                     Teaser für wei...
|
|
|
TECHNISCH: MAGAZINE•    Lesbarkeit oberste Prämisse•    Liquid Layouts (Skalierung)•    CMS-getrieben, daher dynamische El...
MAGAZIN 2.SCHWARZKOPF.DE                 © Elephant Seven | 258
|
|
|
AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN.                       © Elephant Seven | 262
PREVIEW.Samstag erarbeiten sie anhand Schematics:a) die neue nimm2.deb) die Landingpage der Einführungskampagne des neuen ...
AGENDA.OHNE WORTE.              © Elephant Seven | 264
?   |
?                  |    © Elephant Seven   266
?                 |    © Elephant Seven   267
?                  |    © Elephant Seven   268
?                  |    © Elephant Seven   269
?              |© Elephant Seven   271
|© Elephant Seven   272
|© Elephant Seven   273
„PS DESASTERS“.                  © Elephant Seven | 274
|© Elephant Seven   275
|   276
|   277
|   278
|   279
|© Elephant Seven   280
WIR FREUEN UNS AUF IHR FEEDBACK.                                   © Elephant Seven | 281
IMPRESSUM.Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derElephant Seven Hambur...
Ostfalia Webdesign Theorie Block 1
Ostfalia Webdesign Theorie Block 1
Upcoming SlideShare
Loading in...5
×

Ostfalia Webdesign Theorie Block 1

1,497

Published on

Vortrag
15.04.2011

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ostfalia Webdesign Theorie Block 1

  1. 1. MACHE DIE DINGE SO EINFACH WIE MÖGLICH -ABER NICHT EINFACHER.Vortrag Webdesign. 2. Semester. SS 2011.Salzgitter, 15./16.04.2011
  2. 2. Pixelpark GruppeElephant Seven Hamburg
  3. 3. AGENDA.1. Vorstellung und Einleitung2. Warum Kommunikationsdesign?3. Corporate Design4. Online Design5. Aufgabe Vergleich Websites6. Websitetypen und Schematics © Elephant Seven | 3
  4. 4. AGENDA.VORSTELLUNG UND EINLEITUNG. © Elephant Seven | 4
  5. 5. |
  6. 6. DATEN. Name: Elephant Seven Hamburg GmbH Adresse: Gerhofstraße 1-3, 20354 Hamburg Ansprechpartner: Markus Weiß, GF; Oliver Viets, GF Gründung: 1996 Mitarbeiter: 92 (Stand 10/2010) Umsatz: 8,4 Millionen EUR (GJ 2009) Umsatz: 9.1 Millionen EUR (GJ 2010) Standorte: Hamburg (Hauptsitz), Barcelona © Elephant Seven | 6
  7. 7. NETZWERK.ELEPHANT SEVEN PIXELPARK AGENTUR AG YELLOW TOMATO GMBHHAMBURG GMBH STANDORT KÖLN KÖLN (HAMBURG) HAMBURGELEPHANT SEVEN ESPAÑA S.A.U PIXELPARK AGENTUR AG YELLOW TOMATO(BARCELONA)BARCELONA STANDORT BERLIN BERLIN MÜNCHEN PIXELPARK AGENTUR HAMBURG PIXELPARK AGENTURAG SCHWEIZ ZÜRICH/SCHWEIZ PIXELPARK AGENTUR GMBH BIELEFELD BIELEFELD PIXELPARK ELEPHANT SEVEN NET TECHNOLOGIES GMBH NET TECHNOLOGIES HAMBURG © Elephant Seven | 7
  8. 8. UNSEREPOSITIONIERUNG.ELEPHANT SEVEN IST DIE KREATIVEACROSS-THE-LINEAGENTURFÜREINEVERNETZTDENKENDEWELT. © Elephant Seven | 8
  9. 9. Messe DIRECT COACHING Verkaufs- POS EVENT förderungPOSTER ONLINE DISPLAY VIRAL CRM PRINT E-COMMERCE SEO DIGITAL SOCIAL TV MOBILE SEA CORPORATE SITES AMBIENT PLANNINGInhouse PP-Netzwerk On-demand |
  10. 10. KUNDEN UNIT HH. © Elephant Seven | 10
  11. 11. KUNDEN UNIT HH, FF. © Elephant Seven | 11
  12. 12. SOFTWAREPARTNERSCHAFTEN.**des Pixelparkkonzerns © Elephant Seven | 12
  13. 13. DARAUF SIND WIR STOLZ.**557 x Gold, Silber oder Bronze und keinmal Kupfer © Elephant Seven | 13
  14. 14. OLIVER VIETS. GF KREATION. 1995: Graphic/Editorial Design für “Snowboarder Mag” und “Surfers“- Magazin. 1998: Abschluss/Diplom Studium Grafik Design Informatik FH Hannover Tätigkeiten/Praktika während des Studiums: Textpraktikum Springer & Jacoby, freie Grafik in div. Agenturen 1998: Art Director bei Elephant Seven GmbH 1999: Teamleitung Elephant Seven als CreativeDirector 2003: ADC Mitglied 2005: Executive Creative Director Elephant Seven AG 2007: Boardmember Pixelpark AG 2010: Geschäftsführer Kreation Elephant Seven GmbH Jury: One Show, LIAA, Cresta, ADC, LeadAward, Eurobest, Onlinestar © Elephant Seven | 14
  15. 15. TIM SCHRÖDER. SENIOR WEB DEVELOPER. Seit Front- und Backendseitige Webentwicklung in 1996: verschiedenen Agenturen 2006: Web Developer bei Elephant Seven GmbH 2007: Abschluss/Diplom Studium „Informationstechnologie und Gestaltung international“, FH Lübeck 2008: Senior Web Developerbei Elephant Seven GmbH, Schwerpunkte: iOS, Ruby on Rails, Java © Elephant Seven | 15
  16. 16. APROPOS „SENIOR“. WAS BEDEUTEN DIE TITELIN EINER AGENTUR? © Elephant Seven | 16
  17. 17. AGENDA.WARUM KOMMUNIKATIONSDESIGN? © Elephant Seven | 17
  18. 18. 70.000 NEUEMARKENWERDEN JEDESJAHR INDEUTSCHLANDANGEMELDET. |
  19. 19. JEDER WIRDTÄGLICH MIT 2.500BIS 5.000(WM)WERBE-BOTSCHAFTENKONFRONTIERT. | 19
  20. 20. FB-“ZWECK“-SEITEN HABEN5.3 MILLIARDENFANSGENERIERT. | 20
  21. 21. DIE ZAHL DERAUF FACEBOOK„GETEILTEN“INFO-BITS(LINKS, STORIES, BLOGPOSTS,...)PRO WOCHE: 3,5MILLIARDEN | © Elephant Seven 21
  22. 22. MEHR ALS 66% DERiPHONE-NUTZERSURFEN IMINTERNET, WÄHRENDDER FERNSEHERLÄUFT. | © Elephant Seven 22
  23. 23. DIE INFORMATIONSÜBERLASTUNGBEI ZEITSCHRIFTEN BETRÄGT94%. NUR 6% ALLER INZEITSCHRIFTEN PRÄSENTIERTENINFORMATIONEN WERDEN VONDEN LESERN WAHRGENOMMEN. | © Elephant Seven 23
  24. 24. IM BESTEN FALL KÖNNEN ZEHN BISZWANZIG WERBEBOTSCHAFTEN AMTAG BEWUSST WAHRGENOMMENWERDEN. ZWEI BIS DREI LÖSEN IRGENDETWAS IM KOPF AUS. | © Elephant Seven 24
  25. 25. SCHÄTZENSIE, WIE VIELE VON100 TV-UND FUNKSPOTS BEWUSSTWAHRGENOMMENWERDEN: | © Elephant Seven 25
  26. 26. ANTWORT:ZWEI BIS DREI. | © Elephant Seven 26
  27. 27. AUSFLUG IN DIE WISSENSCHAFT. SELEKTIVEWAHRNEHMUNG.„Wir nehmen gezielt das wahr, was unserer aktuellen Aufgabe, unserem Ziel oder unserenBedürfnissen entspricht“.„Ein Mensch beschäftigt sich mit dem, was ihm aktuell wichtig ist.Wer Hunger hat, wird eher alles bemerken, was mit Essen oder Restaurants zu tun hat.“Grundsätzlich hat die Unaufmerksamkeitsblindheit also auch ihr Gutes, weil sie imUmkehrschluss bedeutet, dass man sich auf etwas konzentrieren kann.(Boris Kotchoubey, Professor für kognitive Psychologie an der Universität Tübingen.) © Elephant Seven | 27
  28. 28. EIN AUFMERKSAMKEITS-TEST. © Elephant Seven | 28
  29. 29. DIE HERAUSFORDERUNG.DAMIT ANZEIGEN ÜBERHAUPT EINELEISTUNG ERBRINGEN UND EINEWERBEWIRKUNG HERVORRUFEN KÖNNEN,MÜSSEN SIE ZUERST WAHRGENOMMENWERDEN.DAFÜR MÜSSEN SIE SCHNELL UNDEINFACH SEIN. © Elephant Seven | 30
  30. 30. Schnell und einfach:SPONTANE, HOHE VERMITTLUNG DERAUFMERKSAMKEIT. BOTSCHAFT IN WENIGEN SEKUNDENSOFORTIGE HOHEVERSTÄNDLICHKEIT EINPRÄGSAMKEITSYMPATHIE UND ÜBERZEUGUNGSKRAFTAUF DENERSTEN BLICK.(Auszug „Die Tachometer-Methode“). |
  31. 31. EINE MÖGLICHKEIT, WERBEWIRKUNG ZUMESSEN.• Prüfung der Verständlichkeit einzelner • Verständlichkeit des Fließtextes Anzeigenelemente • Prüfung des Aktivierungspotentials• Verständlichkeit der Gesamtanzeige • Aktivierungspotential des Bildes• Widersprüchlichkeit zwischen Text und Bild • emotionales Aktivierungspotential• Verständlichkeit des Bildes • kognitives Aktivierungspotential• Richtung der durch das Bild ausgelösten • physisches Aktivierungspotential Assoziationen • Aktivierungsprofil des Bildes• Eigenständigkeit des Bildes • Aktivierungspotential der Headline• Prägnanz der Abbildung des Produktes • Aktivierungspotential der Schrift• Verständlichkeit der Headline • Kontrastreichtum und Prägnanz der Headline• Missverständlichkeitder Headline • emotionales Aktivierungspotential der Headline• "Langsame" Formulierungen © Elephant Seven | 32
  32. 32. EINE MÖGLICHKEIT, WERBEWIRKUNG ZUMESSEN. FF.• Prüfung der Informationsaufnahme • Platzierung des Absenders an üblicher Stelle• Informationsaufnahme der Gesamtanzeige • auffällige Platzierung und Gestaltung des• horizontale Anordnung der Texte zum zentralen Absenders Bildelement • Informationsaufnahme des Fließtextes• vertikale Anordnung der Texte zum zentralen • Kürzungsmöglichkeiten des Fließtextes Bildelement • formale Gestaltung des Fließtextes• verzichtbare Bilder oder Texte • Informationsaufnahme von doppelseitigen• Informationsaufnahme des Bildes Anzeigen• Informationsaufnahme der Headline • Prüfung der anderen Komponenten• Informationsaufnahme des Absenders • Informationsspeicherung• Größengestaltung des Markennamens • Einstellungswirkung• Markennamen in der Headline © Elephant Seven | 33
  33. 33. PRÜFUNG DER INFORMATIONSAUFNAHME. © Elephant Seven | 34
  34. 34. Ausgaben vs. Media-Coverage. |
  35. 35. Der U-Bahn Plan von Oslo. |
  36. 36. Der neue U-Bahn Plan von Oslo. |
  37. 37. |
  38. 38. US-AUSGABEN VS. MEDIEN ERWÄHNUNG.Ausgaben vs. Media-Coverage. |
  39. 39. DATEN ZUR BETRACHTUNGSDAUER.Die durchschnittliche Betrachtungsdauer von Anzeigen sind 2,2 Sekunden.In Monatsmagazinen sind durch die Platzierung (vorne, hinten, linke oder rechte Seiten)keine Steigerungen zu erzielen.In Wochenzeitungen erreichen Linksplatzierungen höhere Werte. Allgemein im Vorteilsind Anzeigen, die im vorderen Zeitungsteil auf der rechten Seite zu finden sind.(Werbewissenschaftliche Gesellschaft in Kooperation mit Profil und Trend.) © Elephant Seven | 41
  40. 40. |
  41. 41. |
  42. 42. „SOFORTIGE VERSTÄNDLICHKEIT“. © Elephant Seven | 44
  43. 43. |
  44. 44. |
  45. 45. |
  46. 46. | 48
  47. 47. | 49
  48. 48. „WIDERSPRÜCHLICHKEIT“? © Elephant Seven | 50
  49. 49. |
  50. 50. |
  51. 51. | 53
  52. 52. | 54
  53. 53. |© Elephant Seven 55
  54. 54. „HOHE EINPRÄGSAMKEIT UNDEIGENSTÄNDIGKEIT DES BILDES“? © Elephant Seven | 56
  55. 55. |© Elephant Seven 57
  56. 56. |© Elephant Seven 58
  57. 57. | 59
  58. 58. |© Elephant Seven 60
  59. 59. | 61
  60. 60. | 62
  61. 61. | 63
  62. 62. |© Elephant Seven 64
  63. 63. | 66
  64. 64. | 67
  65. 65. | 68
  66. 66. | 69
  67. 67. | 70
  68. 68. | 71
  69. 69. „VERSTÄNDLICHKEIT DES BILDES?“ © Elephant Seven | 75
  70. 70. |
  71. 71. |
  72. 72. |
  73. 73. |
  74. 74. |
  75. 75. AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 81
  76. 76. AGENDA.CORPORATE DESIGN. © Elephant Seven | 82
  77. 77. „PASST NICHT ZU UNSERER POSITIONIERUNG“.Haben Sie das schon mal gehört? Wenn Sie es hören, wissen Sie: Das ist das wasserdichteNr.1 Killerargument der Marketingleiter/innen. Es bedeutet, auch wenn die Typo, Farbe,Bildwelt, Inhalt und auch sonst alles scheinbar stimmen, kann man immer noch total am Zielvorbeischießen, wenn man nicht die grundsätzliche Zielsetzung der Marke kennt.Das Design ist eine Weiterentwicklung der Positionierung und der Markenwerte einer Marke.Machen Sie sich zuerst mit diesen Werten vertraut, bevor Sie ein Design entwickeln. |
  78. 78. CORPORATE DESIGN.Bevor wir uns die speziell Onlinekommunikation betreffenden Details ansehen, gehe ich kurzauf die Grundlagen der Gestaltung ein.Danach werden wir überprüfen, wie sich das Corporate Design im Sinne der Positionierung mitden digitalen Möglichkeiten optimal weiterführen lässt. © Elephant Seven | 84
  79. 79. CORPORATE DESIGN – POESIE.„Im Rahmen der kontinuierlichen Entwicklung unserer Marke haben wir auch unser BrandDesign evolutioniert. Das Ergebnis ist selbstbewusst und markant und reflektiert zugleichüberzeugend unsere Markenpositionierung und unsere Historie. The Staralwaysshinesfromaboveist unsere Leitidee. Das gilt für das Brand Design wie für die Marke.Der Stern ist das zentrale Symbol für Mercedes-Benz. Er weist uns den Weg. Daher steht er imneuen Brand Design immer oben.“ schreibt Mercedes-Benz. © Elephant Seven | 85
  80. 80. DESIGN AM BEISPIEL LOGO. © Elephant Seven | 86
  81. 81. DESIGNENTWICKLUNG. © Elephant Seven | 87
  82. 82. BELIEBTE LOGOS.Achtung, es wird bunt. © Elephant Seven | 88
  83. 83. LOGO WORTMARKE.Achtung, es wird bunt. © Elephant Seven | 89
  84. 84. LOGO METAPHER. © Elephant Seven | 90
  85. 85. DAS LOGO IM INTERNET. AKUTE BUBBELITIS. © Elephant Seven | 91
  86. 86. DAS LOGO IM INTERNET.Achtung, es wird bunt. © Elephant Seven | 92
  87. 87. LOGO WIEDERERKENNUNGSWERT. © Elephant Seven | 93
  88. 88. CORPORATE DESIGN MERCEDES-BENZ 2008. © Elephant Seven | 94
  89. 89. WETTBEWERBER. © Elephant Seven | 95
  90. 90. WETTBEWERBER. © Elephant Seven | 96
  91. 91. CORPORATE DESIGN. © Elephant Seven | 97
  92. 92. CORPORATE DESIGN. © Elephant Seven | 98
  93. 93. FARBEN.Achtung, es wird bunt. © Elephant Seven | 99
  94. 94. ROT IST DIE FARBE DES FEUERS.Sie erregt Aufmerksamkeit, steht für Vitalität und Energie, Liebe und Leidenschaft.Sie kann jedoch auch aggressiv und aufwühlend wirken, da sie auch Wut, Zorn undBrutalität verkörpert.http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html © Elephant Seven | 100
  95. 95. ORANGE IST DIE FARBE DERUNTERGEHENDEN SONNE.Sie ist die Symbolfarbe für Optimismus und Lebensfreude. Sie signalisiertAufgeschlossenheit, Kontaktfreude und Jugendlichkeit, Gesundheit und Selbstvertrauen.Sie kann aber auch Leichtlebigkeit, Aufdringlichkeit und Ausschweifung vermitteln undwird in unserer Gesellschaft oft als billig und unseriös empfunden..http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html © Elephant Seven | 101
  96. 96. GELB IST DIE FARBE DER SONNE.Sie vermittelt Licht, Heiterkeit und Freude. Sie steht auch für Wissen, Weisheit, Vernunftund Logik. Schmutzige Gelbtöne dagegen vermitteln negative Assoziationen wieTäuschung, Rachsucht, Pessimismus, Egoismus, Geiz und Neid. © Elephant Seven | 102
  97. 97. GRÜN IST DIE FARBE DER WIESEN UND WÄLDER.Sie ist eine beruhigende Farbe. Sie steht für Großzügigkeit, Sicherheit, Harmonie,Hoffnung, Erneuerung des Lebens. Sie kann aber auch Gefühle wie Neid, Gleichgültigkeit,Stagnation und Müdigkeit vermitteln. © Elephant Seven | 103
  98. 98. CYAN.In der Umgangssprache auch Türkis genannt, ist eine frische Farbe. Es ist die Farbe desMeers an einem sonnigen Tag. Sie vermittelt Wachheit, Bewusstheit, Klarheit, geistigeOffenheit und Freiheit. Cyan kann aber auch sehr kühl und distanziert wirken und einGefühl von Leere vermitteln. © Elephant Seven | 104
  99. 99. BLAU IST DIE FARBE DES HIMMELS.Sie steht für Kühle, Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht. Sie kann aberauch Traumtänzerei, Nachlässigkeit oder Melancholie vermitteln. © Elephant Seven | 105
  100. 100. VIOLETT IST EINE WÜRDEVOLLE FARBE.Sie ist die Farbe der Inspiration, der Mystik, Magie und der Kunst. Sie ist eineaußergewöhnliche, extravagante Farbe, die auch mit Frömmigkeit, Buße undOpferbereitschaft in Verbindung gebracht wird. Sie kann aber auch stolz und arrogantoder unmoralisch wirken. © Elephant Seven | 106
  101. 101. MAGENTA.Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. In der Naturerleben wir sie hauptsächlich als Farbe von Blüten. Sie steht für Idealismus, Dankbarkeit,Engagement, Ordnung und Mitgefühl. Sie hat aber auch etwas von Snobismus, Arroganzund Dominanz. © Elephant Seven | 107
  102. 102. WEIß IST DIE FARBE VON EIS UND SCHNEE.Sie ist ein Symbol der Reinheit, Klarheit, Erhabenheit und Unschuld. Sie gilt aber auch alsZeichen der Unnahbarkeit, Empfindsamkeit und kühler Reserviertheit. © Elephant Seven | 108
  103. 103. GRAU.Grau ist die Farbe des wolkenverhangenen Himmels an einem trüben Tag. Sie ist dieFarbe vollkommener Neutralität, Vorsicht, Zurückhaltung und Kompromissbereitschaft. Sieist eine unauffällige Farbe, die auch mit Langeweile, Eintönigkeit, Unsicherheit undLebensangst in Verbindung gebracht wird. © Elephant Seven | 109
  104. 104. PRIMÄRFARBEN MERCEDES-BENZ. Interpretation bitte! Kompetenz © Elephant Seven | 110
  105. 105. TYPOGRAFIE.Typographie, die; -, -n (Druckwesen) v. griech. typos(Abdruck, Abbild, Form) und graphein (schreiben, einritzen):1. (o. Pl.) Kunst der Gestaltung von Druckerzeugnissen nachästhetischen Gesichtspunkten; Buchdruckerkunst.2. typographische Gestaltung eines Druckerzeugnisses und(heute) die ästhetische Formgebung für Medienoberflächen(Bildschirmoberflächen); typographisch (typografisch) (Adj.)(Druckwesen): die Typographie betreffend; © Elephant Seven | 111
  106. 106. TYPOGRAFIE.Ein Text hat nicht nur einen Inhalt, er hat auch ein "Gesicht" – die Schrift, in der er gedrucktist. Von den Zehntausenden von Schrifttypen, die es weltweit gibt, hat jede Schrift ihreneigenen Charakter.Die Ausdruckspalette reicht von modern bis historisch, feierlich bis nüchtern, formal bisdekorativ usw. Deshalbist es keinesfalls egal, welche Schrift zum Einsatz kommt.Text: mhplus.de © Elephant Seven | 112
  107. 107. TYPOGRAFIE.Ein Gedicht, ein Lesestück wird vom Vortragenden durchModulation seiner Stimme beeinflusst. Er kann Gefühle hörbarmachen – Schrift soll diese sichtbar machen!Zwei grundsätzliche Schriftarten stehen zur Auswahl.1. Serifenschrift: Antiqua2. Serifenlose Schrift: Grotesk © Elephant Seven | 113
  108. 108. TYPOGRAFIE. Serifenschrift: Antiqua Es gibt die Antiqua-Schriften, die an den Endungen der Buchstaben Füßchen, so genannte Serifen, haben. Antiqua-Schriften gehören zu den klassischen Schriften, deren bekannteste die Times ist. Sie tritt häufig in Zeitschriften, Zeitungen und Büchern auf. Diese Schrift wird dann gerne genommen, wenn es um bestmögliche Lesbarkeit geht. © Elephant Seven | 114
  109. 109. TYPOGRAFIE. Grotesk-Schriften: Sie haben keine Serifen und wirken in aller Regel moderner und klarer. Den weitesten Verbreitungsgrad bei den Grotesk-Schriften hat die Helvetica. Diese Schrift wirkt modern und zeitlos, da sie betont schlicht und reduziert gestaltet ist. Sie ist aufgrund ihrer Schlichtheit fast überall einsetzbar. © Elephant Seven | 115
  110. 110. ANEKDOTE „GROTESK“.Die Bezeichnung „Grotesk“ rührt daher, dass das Kleinbürgertum und die kunsthandwerklichorientierte Gesellschaft in der ersten Hälfte des 19. Jahrhunderts, als die Grotesk-Schriftenentwickelt wurden, diese serifenlosen Schriften noch als „grotesk“ – als aus dem Rahmenfallend – empfanden. © Elephant Seven | 116
  111. 111. WAS STIMMT HIER NICHT? © Elephant Seven | 117
  112. 112. AUFLÖSUNG. © Elephant Seven | 118
  113. 113. TYPOGRAFIE MERCEDES-BENZ.Interpretation bitte. Interpretation bitte! © Elephant Seven | 119
  114. 114. TYPO VERMASSUNG. © Elephant Seven | 120
  115. 115. TYPO WEITERE DEFINITIONEN. © Elephant Seven | 121
  116. 116. BILDER.„Die Bildsprache prägt die Kommunikation der Marke Mercedes-Benz. Die Bilder reflektierenMarkenpersönlichkeit und Markengeschichte angemessen. Sie verleihen der Marke durchkonsistente Umsetzung mehr Kraft und nachhaltigen Glanz. Die große Vielfalt anModellen, Sparten und Sujets erfordert ein einheitliches Verständnis bei den Bildwelten.Nur so ist der einheitliche Auftritt einer globalen Premium-Marke jederzeit und überallgewährleistet.Die Fotografien unterstreichen den Führungsanspruch der Marke Mercedes-Benz durchbesondere Qualität. Ihre Komposition ist großzügig, das Licht perfekt. Kleinteilige Aufnahmenund Schnappschüsse sind nicht erwünscht.“ © Elephant Seven | 122
  117. 117. BILDSPRACHE MERCEDES-BENZ. © Elephant Seven | 123
  118. 118. BILDSPRACHE MERCEDES-BENZ. © Elephant Seven | 124
  119. 119. UND JETZT ALLE ZUSAMMEN: © Elephant Seven | 125
  120. 120. AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 126
  121. 121. AGENDA.ONLINE DESIGN. © Elephant Seven | 127
  122. 122. |© Elephant Seven 128
  123. 123. |© Elephant Seven 129
  124. 124. |© Elephant Seven 130
  125. 125. |© Elephant Seven 131
  126. 126. |© Elephant Seven 132
  127. 127. |© Elephant Seven 133
  128. 128. MERCEDES-BENZ WEBSITE. |
  129. 129. IM DETAIL. Logoposition links ist die historisch gewachsene „sicherste“ Position, da sie in skalierendem Layout bei allen Browsergrößen im sichtbaren Bereich liegt. |
  130. 130. IM DETAIL.Vermassung des Headers (Dachbalkens) Gestaltungsraster wie in Print.und der Standardelemente. |
  131. 131. IM DETAIL.In diesem Fall verlängert sich die Website nach rechts.Der Flexible Bereich muss definiert werden. |
  132. 132. AGENDACORPORATE DESIGN. AUFGABE 10 MINUTEN.„WELCHE ELEMENTE MÜSSEN GESTALTETWERDEN?“ © Elephant Seven | 138
  133. 133. Buttons Navi/TabIM DETAIL. Eingabefelder Interaktions- Elemente Film Navigation Tooltips Pulldowns © Elephant Seven | 139
  134. 134. IM DETAIL. Icons müssen/sollten gestaltet werden, um noch schneller die Funktionen wahrzunehmen. Sie werden in inaktiven und aktiven Zustand dargestellt. Zusätzlich kann noch ein Hover-Zustand gekennzeichnet werden. Die blaue Farbe kennzeichnet das aktive Feld der Buttons. © Elephant Seven | 140
  135. 135. IM DETAIL. Headlines: Die Schriften werden serverseitig als Bilder ausgespielt. Durch die Hausschrift bleibt das Gesicht MB erkennbar. Navigation, Fließtext und Buttons: Hier wird die Arial verwendet. © Elephant Seven | 141
  136. 136. IM DETAIL. © Elephant Seven | 142
  137. 137. EIN STYLEGUIDE BEISPIELhttp://bannertool.de/upload/itze/styleguide/ © Elephant Seven | 143
  138. 138. WEBFONTS. VERDANA. Designedby Matthew Carter and handhintedbyleadinghintingexpert, Monotypes Tom Rickner.TheVerdanafontsarestripped of features redundant whenapplied to thescreen.Theyexhibitnewcharacteristics, derivedfromthepixelratherthanthepen, thebrushorthechisel. Thebalancebetweenstraight, curve and diagonal has beenmeticulouslytuned to ensurethatthepixelpatterns at smallsizesarepleasing, clear and legible. © Elephant Seven | 144
  139. 139. SYSTEMSCHRIFTEN.Für die „Leseschriften“ sind also nach wie vor bewährte Systemschriften ratsam.Vorteile:• Lesbarkeit• bewährt im Umgang - Fehler können vermieden werden• der Font muss nicht erst geladen werden - KB-ErsparnisNachteile:• nicht CD-konform• teilweise nicht besonders schön anzusehen• austauschbar mit 99% aller anderen Firmen im Internet• begrenzte Auswahl © Elephant Seven | 145
  140. 140. SYSTEMSCHRIFTEN. Selbst ausprobieren unter: http://typetester.maratz.com/ © Elephant Seven | 146
  141. 141. SCHRIFTEN IN FLASH.In den Flashspecials werden die jeweiligen Schriften nachgeladen. Hierbei wird für alleSprachen außer Chinesisch, Japanisch und Russisch die Futura oder eine andere Latin1Schrift genutzt. In den anderen Sprachen nutzen wir die Arial Unicode. Diese Schrift ist dannallerdings allein schon ca. 6MB groß. © Elephant Seven | 147
  142. 142. |
  143. 143. SCHRIFTEN UND HTMLTechnologie Beschreibung Vorteile NachteileSystemfonts schnellsteVariante, Nur allgemein läuft überall verbreitete Fonts, nicht CI-konformWebfonts Einbindung von Hausschriften ggf. Lizenzen, Fonts via CSS möglich, Ladezeit, dynamische aufwendige Befüllung, EinbindungImagegenerierung Schrift wird als Bild Hausschriften Nur aufwendig dargestellt möglich, sieht dynamisierbar, überall gleich aus nicht SEOSifr* Schrift wird Hausschriften nicht sehr stabil,(ScalableInman Flash automatisch durch möglich Flash nötigReplacement) Flash ersetzt © Elephant Seven | 149
  144. 144. SCHRIFTEN, TECHNISCH: WEBFONTSVorteile:• CI-konform• trotzdem normaler HTML-Text• SEO-konformNachteile:• Font muss nachgeladen werden• Lizenzbestimmungen sind zu beachten• teils aufwändige Einbindung wg. BrowserkompatibilitätRessourcen:• http://www.fontsquirrel.com/fontface/generator• http://www.page-online.de/emag/typo/artikel/faq_webfonts © Elephant Seven | 150
  145. 145. SCHRIFTEN, TECHNISCH: IMAGESVorteile:• CI-konform• Einfache Lösung• Cross-PlatformNachteile:• Bild muss entweder statisch bleiben oder es ist eine „Renderengine“ nötig• nicht SEO-konform © Elephant Seven | 151
  146. 146. SCHRIFTEN, TECHNISCH: SIFRScalableInman Flash Replacement, per JavaScript wird HTML-Text durch Flash ersetztVorteile:• CI-konform• SEO-konformNachteile:• Nachladen des SWF nötig• unschöne Effekte• Flashplayer nötig• veraltet © Elephant Seven | 152
  147. 147. WEITERE GESTALTUNGSELEMENTE.Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wieAnimationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wiereagieren Interaktionselemente.Auf der Bühne der Website oder im Onlinemarketing. © Elephant Seven | 153
  148. 148. WEITERE GESTALTUNGSELEMENTE. SkyscraperIm Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wieAnimationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wiereagieren Interaktionselemente.Auf der Bühne der Website oder im Onlinemarketing. Der Banner „Name“. Link © Elephant Seven | 154
  149. 149. WEITERE GESTALTUNGSELEMENTE. Layer 400x400 Der Banner „Name“. Link © Elephant Seven | 155
  150. 150. WEITERE GESTALTUNGSELEMENTE. Landingpage • Aufgeräumtes Erscheinungsbild • Zielgerichtete Userführung • Wenig Kilobyte |
  151. 151. Image-Mail:Großes Bild, 1 Aussageund 1 Ziel.Content-Mail:1 Top-Thema undmehrere kleine Content-Teaser. Landingpage |
  152. 152. AGENDACORPORATE DESIGN. MITTAGSPAUSE. © Elephant Seven | 158
  153. 153. GRUPPENARBEIT.Beurteilen Sie anhand dessen, was Sie gerade zu Onlinegestaltung gezeigten die folgendenBeispiele. 3 Gruppen. Zeit 30 Minuten interne Gruppendiskussion.Ziel: Präsentation der Ergebnisse in 5 Minuten pro Gruppe.a) Typo/Farben/Bilderb) Menü/Navigationc) Ungewöhnliches und GesamteindruckWas ist gelungen und wo ist noch Verbesserungspotential? |
  154. 154. GRUPPE FASHIONISTAS.Thomas Sabo | Hermès |
  155. 155. GRUPPE 1.Beispiel: Thomas Sabo | Hermès |
  156. 156. |
  157. 157. |
  158. 158. |
  159. 159. |
  160. 160. |
  161. 161. |
  162. 162. GRUPPE 1.Beispiel: Thomas Sabo | Hermès |
  163. 163. GRUPPE 1.Beispiel: Thomas Sabo | Hermès |
  164. 164. GRUPPE 1.Beispiel: Thomas Sabo | Hermès |
  165. 165. GRUPPE 1.Beispiel: Thomas Sabo | Hermès |
  166. 166. |
  167. 167. |
  168. 168. GRUPPE GRIFFEL VS. SCHREIBGERÄTGraf v. Faber-Castell | Montblanc |
  169. 169. GRUPPE 2. |
  170. 170. GRUPPE 2. |
  171. 171. GRUPPE 2. |
  172. 172. GRUPPE 2. |
  173. 173. GRUPPE 2. |
  174. 174. GRUPPE 2. |
  175. 175. GRUPPE 2. |
  176. 176. GRUPPE 2. |
  177. 177. GRUPPE 2. |
  178. 178. |
  179. 179. |
  180. 180. |
  181. 181. |
  182. 182. |
  183. 183. |
  184. 184. |
  185. 185. |
  186. 186. |
  187. 187. GRUPPE ZUCKERSPIEGELBendicks | Werthers Original US |
  188. 188. |
  189. 189. |
  190. 190. |
  191. 191. |
  192. 192. |
  193. 193. |
  194. 194. |
  195. 195. |
  196. 196. |
  197. 197. |
  198. 198. ERGEBNISPRÄSENTATIONEN. |
  199. 199. AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 205
  200. 200. WEBSITE TYPEN.• Markenwebsite: Hapag Lloyd Kreuzfahrten• Corporate Website: Deutsche Post DHL• Microsite: nimm2• Online Shop: Amazon• Landingpages: Drift, itzdirect24, Nexus• Magazine: Boss, Freunde von Freunden © Elephant Seven | 206
  201. 201. MARKENWEBSITE.HAPAG LLOYD KREUZFAHRTEN. © Elephant Seven | 207
  202. 202. DER HORIZONT ALS BÜHNE.Kreuzfahrten assoziieren wir mit Weite, Ruhe und einem endlosen Horizont –unterbrochen von diversen Annehmlichkeiten. Dieses Gefühl wollen wir auch im Layouttransportieren. Unser Format ist daher horizontal.- Usability: etablierte Navigationsarten für eine wenig online-affine Zielgruppe- Pflicht: Platz für großzügige Bildpräsentation- Kür: läuft auch auf dem iPad © Elephant Seven | 208
  203. 203. Navigation BildhorizontFloater mit News und Teasern | © Elephant Seven 209 Footer
  204. 204. Navigation BildhorizontFloater mit News und Teasern | © Elephant Seven 210 Footer
  205. 205. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 211
  206. 206. |
  207. 207. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 213
  208. 208. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 214
  209. 209. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 215
  210. 210. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 216
  211. 211. |
  212. 212. |
  213. 213. © Elephant Seven | 219
  214. 214. (Hier iPad rausholen) | © Elephant Seven 220
  215. 215. TECHNISCH: MARKENWEBSITES• CI hat oberste Priorität• Große Bühnen, ggf. Flash, Video, das ganz große Programm• Größen-Optimierung zweitrangig• Das Design muss auf allen Browsern annähernd gleich aussehen• Pflege oft über CMS• Beispiel montblanc.de Startseite: • Initial 300 KB, mit nachgeladenem Flash und Streaming 6,5 MB © Elephant Seven | 221
  216. 216. CORPORATE WEBSITE.DEUTSCHE POST DHL. © Elephant Seven | 222
  217. 217. DAS WICHTIGSTE GANZ NACH VORNE.Schon auf der Homepage: Der Aktienkurs und die neuesten Pressemitteilungen.- platzsparende Navigation per MegaFlyout- Nutzen der gesamten Breite für Content- Marginalspalte für Kontakt und Related Links © Elephant Seven | 223
  218. 218. Logo Navigation Suche Bühne Chart Aktienkurs, Pressemitteilungen, Teaser Footer |
  219. 219. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 225
  220. 220. |
  221. 221. |
  222. 222. TECHNISCH: CORPORATE WEBSITES• CI ist wichtig• Viele Informationen, die auch auffindbar sein müssen• garantiert CMS-gesteuert• Sollte für alle Endgeräte erreichbar sein• Ladezeit sollte verträglich sein• Beispiel Deutsche Post/DHL Startseite: • Insg. 431 KB, davon 17 KB Text und 244 KB Bilder • ySlow Grade B © Elephant Seven | 228
  223. 223. MICROSITE.NIMM2 VON STORCK. © Elephant Seven | 229
  224. 224. SPIELERISCHER EINSTIEG.Hier wird weniger gezielt nach Informationen gesucht, sondern spielerisch erforscht,was die Seite so zu bieten hat. So setzten sich User mit der Marke nimm2 auseinander.- Navigation wird auf Folgeseiten neu geordnet- so kann die Bühne komplett genutzt werden- Hard Facts wie die Ernährungsinfos sind im Footer untergebracht © Elephant Seven | 230
  225. 225. |
  226. 226. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 232
  227. 227. TECHNISCH: MICROSITES• Technische Ausrichtung je nach Zielgruppe (z.B. Flash, Breitband)• oft kurze Halbwertzeit• Pflege über CMS meist nicht notwendig• Beispiel nimm2.de Startseite • 720 KB, davon 5 KB Text und 684 KB Flash © Elephant Seven | 233
  228. 228. ONLINE SHOP.AMAZON. © Elephant Seven | 234
  229. 229. DER PERFEKTE SALESFUNNEL.Im Mittelpunkt stehen die Produkte. Die Marke Amazon wird fast ausschließlich durchfunktionale Elemente gespielt.- viele Empfehlungen, die auf dem eigenen Surfverhalten basieren- je näher am Kaufabschluss, desto weniger Ablenkung- und schließlich fehlt die Hauptnavigation völligDas Besondere: Was Amazon macht, wird schnell von anderen übernommen. So setztAmazon die Standards anstatt anderen zu folgen. © Elephant Seven | 235
  230. 230. Logo Großes Suchfeld WarenkorbKategorien-Navigation Produktempfehlungen Aktionen Aktionen |
  231. 231. |
  232. 232. |
  233. 233. |
  234. 234. |
  235. 235. TECHNISCH: ONLINE SHOPS• Verkaufen ist oberste Priorität• Fehler und zu lange Ladedauer führen zu Kaufabbrüchen• Extreme Optimierung des Ladeverhaltens• Muss immer und überall funktionieren (gesonderte Mobile-Variante)• Nachladen von Bildern, sobald sie in den sichtbaren Bereich kommen• Beispiel amazon.de Startseite: • 200 KB initial, weitere 150 KB durch Nachladen © Elephant Seven | 241
  236. 236. LANDINGPAGE 1.DRIFT. © Elephant Seven | 242
  237. 237. CALL TO ACTION IM MITTELPUNKT.Mal eben einen Banner geklickt oder von Check24.de hierher gesprungen, sieht der Usersofort, was Sache ist: Ein paar Angaben und schon wird berechnet.- im Fokus: Die Aktion- im Hintergrund: Die Marke- Und sonst? Testergebnisse, Zertifizierungen, Vorteile, Partner © Elephant Seven | 243
  238. 238. Logo und Hauptnavigation Call to ActionMarke Vorteile Zertifizierungen und Partner |
  239. 239. |
  240. 240. TECHNISCH: LANDINGPAGES• Optimierung des Ladeverhaltens• Muss immer und überall funktionieren• Beispiel Drift Landingpage: • 412 KB © Elephant Seven | 246
  241. 241. LANDINGPAGE 2.ITZDIRECT24. © Elephant Seven | 247
  242. 242. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 248
  243. 243. LANDINGPAGE 3.NEXUS. © Elephant Seven | 249
  244. 244. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 250
  245. 245. MAGAZIN 1.BOSS. © Elephant Seven | 251
  246. 246. CONTENT IS KING.Großflächige Bild/Text Teaser machen die Entscheidung für den Besucher leicht.- Filter nach Kategorien- die Artikel: Text auf großem Bild- mit der Hauptnavigation sind die anderen Boss Websites nur einen Klick entfernt © Elephant Seven | 252
  247. 247. Logo und HauptnavigationMagazin-Navigation Top-Thema Social Teaser für weitere Themen |
  248. 248. |
  249. 249. |
  250. 250. |
  251. 251. TECHNISCH: MAGAZINE• Lesbarkeit oberste Prämisse• Liquid Layouts (Skalierung)• CMS-getrieben, daher dynamische Elemente• Je nach Zielgruppe auch neue Technologien möglich• Ladeverhalten zweitrangig• Beispiel Boss.de Magazinstartseite: • Initial 480 KB, nachgeladenes Flash insg. 7MB © Elephant Seven | 257
  252. 252. MAGAZIN 2.SCHWARZKOPF.DE © Elephant Seven | 258
  253. 253. |
  254. 254. |
  255. 255. |
  256. 256. AGENDACORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 262
  257. 257. PREVIEW.Samstag erarbeiten sie anhand Schematics:a) die neue nimm2.deb) die Landingpage der Einführungskampagne des neuen SLK |
  258. 258. AGENDA.OHNE WORTE. © Elephant Seven | 264
  259. 259. ? |
  260. 260. ? | © Elephant Seven 266
  261. 261. ? | © Elephant Seven 267
  262. 262. ? | © Elephant Seven 268
  263. 263. ? | © Elephant Seven 269
  264. 264. ? |© Elephant Seven 271
  265. 265. |© Elephant Seven 272
  266. 266. |© Elephant Seven 273
  267. 267. „PS DESASTERS“. © Elephant Seven | 274
  268. 268. |© Elephant Seven 275
  269. 269. | 276
  270. 270. | 277
  271. 271. | 278
  272. 272. | 279
  273. 273. |© Elephant Seven 280
  274. 274. WIR FREUEN UNS AUF IHR FEEDBACK. © Elephant Seven | 281
  275. 275. IMPRESSUM.Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derElephant Seven Hamburg GmbH und unterliegen den geltenden Urhebergesetzen.Die ganze oder teilweise Vervielfältigung sowie jede Weitergabe an Dritte ist nicht gestattet.Elephant Seven Hamburg GmbHGerhofstraße 1-3D-20354 Hamburg+49 40 34 101-400+49 40 34 101-101www.e-7.com © Elephant Seven | 282
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×