SlideShare une entreprise Scribd logo
1  sur  277
Télécharger pour lire hors ligne
MACHE DIE DINGE SO EINFACH WIE MÖGLICH -
ABER NICHT EINFACHER.
Vortrag Webdesign. 2. Semester. SS 2011.



Salzgitter, 15./16.04.2011
Pixelpark Gruppe
Elephant Seven Hamburg
AGENDA.
1.   Vorstellung und Einleitung

2.   Warum Kommunikationsdesign?

3.   Corporate Design

4.   Online Design

5.   Aufgabe Vergleich Websites

6.   Websitetypen und Schematics




                                   © Elephant Seven |   3
AGENDA.
VORSTELLUNG UND EINLEITUNG.




                              © Elephant Seven |   4
|
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
NETZWERK.

ELEPHANT SEVEN                PIXELPARK AGENTUR
                                        AG               YELLOW TOMATO GMBH
HAMBURG GMBH                  STANDORT KÖLN
                              KÖLN                       (HAMBURG)
                                                         HAMBURG


ELEPHANT 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
UNSEREPOSITIONIERUNG.
ELEPHANT SEVEN IST DIE KREATIVE
ACROSS-THE-LINE
AGENTURFÜREINEVERNETZTDENKENDE
WELT.




                             © Elephant Seven |   8
Messe
                                            DIRECT        COACHING

                                                                      Verkaufs-    POS
                        EVENT
                                                                      förderung
POSTER
                                                          ONLINE
                                                          DISPLAY
                                          VIRAL                              CRM
          PRINT
                                                                     E-COMMERCE
                                SEO
                                                  DIGITAL
                                           SOCIAL


                           TV                                                MOBILE

                                          SEA
                                                          CORPORATE
                                                            SITES

                                                                         AMBIENT


                                                    PLANNING
Inhouse   PP-Netzwerk     On-demand                                                      |
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
                         “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
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
APROPOS „SENIOR“. WAS BEDEUTEN DIE TITEL
IN EINER AGENTUR?




                                    © Elephant Seven |   16
AGENDA.
WARUM KOMMUNIKATIONSDESIGN?




                              © Elephant Seven |   17
70.000 NEUE
MARKEN
WERDEN JEDES
JAHR IN
DEUTSCHLAND
ANGEMELDET.
               |
JEDER WIRD
TÄGLICH MIT 2.500
BIS 5.000
(WM)WERBE-
BOTSCHAFTENKON
FRONTIERT.          |   19
FB-“ZWECK“-
SEITEN HABEN
5.3 MILLIARDEN
FANS
GENERIERT.
                 |   20
DIE ZAHL DER
AUF FACEBOOK
„GETEILTEN“
INFO-BITS
(LINKS, STORIES,
 BLOGPOSTS,...)
PRO WOCHE: 3,5
MILLIARDEN




                                 |
                   © Elephant Seven   21
MEHR ALS 66% DER
iPHONE-NUTZER
SURFEN IM
INTERNET, WÄHREND
DER FERNSEHER
LÄUFT.                       |
               © Elephant Seven   22
DIE INFORMATIONSÜBERLASTUNG
BEI ZEITSCHRIFTEN BETRÄGT
94%. NUR 6% ALLER IN
ZEITSCHRIFTEN PRÄSENTIERTEN
INFORMATIONEN WERDEN VON
DEN LESERN WAHRGENOMMEN.                    |
                              © Elephant Seven   23
IM BESTEN FALL KÖNNEN ZEHN BIS
ZWANZIG WERBEBOTSCHAFTEN AM
TAG BEWUSST WAHRGENOMMEN
WERDEN. ZWEI BIS DREI LÖSEN IRGENDETWAS IM KOPF AUS.
                                                              |
                                                © Elephant Seven   24
SCHÄTZEN
SIE, WIE VIELE VON
100 TV-UND FUNK
SPOTS BEWUSST
WAHRGENOMMEN
WERDEN:                            |
                     © Elephant Seven   25
ANTWORT:
ZWEI BIS DREI.



                               |
                 © Elephant Seven   26
AUSFLUG IN DIE WISSENSCHAFT. SELEKTIVE
WAHRNEHMUNG.
„Wir nehmen gezielt das wahr, was unserer aktuellen Aufgabe, unserem Ziel oder unseren
Bedü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 im
Umkehrschluss bedeutet, dass man sich auf etwas konzentrieren kann.
(Boris Kotchoubey, Professor für kognitive Psychologie an der Universität Tübingen.)




                                                                                       © Elephant Seven |   27
EIN AUFMERKSAMKEITS-TEST.




                            © Elephant Seven |   28
Ostfalia Webdesign Theorie Block 1
DIE HERAUSFORDERUNG.

DAMIT ANZEIGEN ÜBERHAUPT EINE
LEISTUNG ERBRINGEN UND EINE
WERBEWIRKUNG HERVORRUFEN KÖNNEN,
MÜSSEN SIE ZUERST WAHRGENOMMEN
WERDEN.

DAFÜR MÜSSEN SIE SCHNELL UND
EINFACH SEIN.

                               © Elephant Seven |   30
Schnell und einfach:
SPONTANE, HOHE                       VERMITTLUNG DER
AUFMERKSAMKEIT.                      BOTSCHAFT IN WENIGEN
                                     SEKUNDEN
SOFORTIGE
                                        HOHE
VERSTÄNDLICHKEIT
                                        EINPRÄGSAMKEIT
SYMPATHIE UND ÜBERZEUGUNGSKRAFT
AUF DENERSTEN BLICK.
(Auszug „Die Tachometer-Methode“).
                                                         |
EINE MÖGLICHKEIT, WERBEWIRKUNG ZU
MESSEN.
• 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
EINE MÖGLICHKEIT, WERBEWIRKUNG ZU
MESSEN. 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
PRÜFUNG DER INFORMATIONSAUFNAHME.




                             © Elephant Seven |   34
Ausgaben vs. Media-Coverage.




                               |
Der U-Bahn Plan von Oslo.




                            |
Der neue U-Bahn Plan von Oslo.




                                 |
|
Ostfalia Webdesign Theorie Block 1
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 durch die Platzierung (vorne, hinten, linke oder rechte Seiten)
keine Steigerungen zu erzielen.
In Wochenzeitungen erreichen Linksplatzierungen höhere Werte. Allgemein im Vorteil
sind Anzeigen, die im vorderen Zeitungsteil auf der rechten Seite zu finden sind.
(Werbewissenschaftliche Gesellschaft in Kooperation mit Profil und Trend.)




                                                                                    © Elephant Seven |   41
|
|
„SOFORTIGE VERSTÄNDLICHKEIT“.




                                © Elephant Seven |   44
|
|
|
|   48
|   49
„WIDERSPRÜCHLICHKEIT“?




                         © Elephant Seven |   50
|
|
|   53
|   54
|
© Elephant Seven   55
„HOHE EINPRÄGSAMKEIT UND
EIGENSTÄ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
|
|
|
|
|
AGENDA

CORPORATE 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 wasserdichte
Nr.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 Ziel
vorbeischieß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.




                                                                                             |
CORPORATE DESIGN.
Bevor wir uns die speziell Onlinekommunikation betreffenden Details ansehen, gehe ich kurz
auf die Grundlagen der Gestaltung ein.
Danach werden wir überprüfen, wie sich das Corporate Design im Sinne der Positionierung mit
den digitalen Möglichkeiten optimal weiterführen lässt.




                                                                                  © Elephant Seven |   84
CORPORATE DESIGN – POESIE.
„Im Rahmen der kontinuierlichen Entwicklung unserer Marke haben wir auch unser Brand
Design evolutioniert. Das Ergebnis ist selbstbewusst und markant und reflektiert zugleich
überzeugend unsere Markenpositionierung und unsere Historie. The Star
alwaysshinesfromaboveist 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 im
neuen Brand Design immer oben.“ schreibt Mercedes-Benz.




                                                                                   © Elephant Seven |   85
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 jedoch auch aggressiv und aufwühlend wirken, da sie auch Wut, Zorn und
Brutalität verkörpert.




http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html                           © Elephant Seven | 100
ORANGE IST DIE FARBE DER
UNTERGEHENDEN SONNE.
Sie ist die Symbolfarbe für Optimismus und Lebensfreude. Sie signalisiert
Aufgeschlossenheit, Kontaktfreude und Jugendlichkeit, Gesundheit und Selbstvertrauen.
Sie kann aber auch Leichtlebigkeit, Aufdringlichkeit und Ausschweifung vermitteln und
wird in unserer Gesellschaft oft als billig und unseriös empfunden..




http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html

                                                                                  © Elephant Seven | 101
GELB IST DIE FARBE DER SONNE.
Sie vermittelt Licht, Heiterkeit und Freude. Sie steht auch für Wissen, Weisheit, Vernunft
und Logik. Schmutzige Gelbtöne dagegen vermitteln negative Assoziationen wie
Täuschung, Rachsucht, Pessimismus, Egoismus, Geiz und Neid.




                                                                                      © Elephant Seven | 102
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
CYAN.
In der Umgangssprache auch Türkis genannt, ist eine frische Farbe. Es ist die Farbe des
Meers an einem sonnigen Tag. Sie vermittelt Wachheit, Bewusstheit, Klarheit, geistige
Offenheit und Freiheit. Cyan kann aber auch sehr kühl und distanziert wirken und ein
Gefühl von Leere vermitteln.




                                                                                   © Elephant Seven | 104
BLAU IST DIE FARBE DES HIMMELS.
Sie steht für Kühle, Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht. Sie kann aber
auch Traumtänzerei, Nachlässigkeit oder Melancholie vermitteln.




                                                                                    © Elephant Seven | 105
VIOLETT IST EINE WÜRDEVOLLE FARBE.
Sie ist die Farbe der Inspiration, der Mystik, Magie und der Kunst. Sie ist eine
außergewöhnliche, extravagante Farbe, die auch mit Frömmigkeit, Buße und
Opferbereitschaft in Verbindung gebracht wird. Sie kann aber auch stolz und arrogant
oder unmoralisch wirken.




                                                                                   © Elephant Seven | 106
MAGENTA.
Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. In der Natur
erleben 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, Arroganz
und Dominanz.




                                                                                      © Elephant Seven | 107
WEIß IST DIE FARBE VON EIS UND SCHNEE.
Sie ist ein Symbol der Reinheit, Klarheit, Erhabenheit und Unschuld. Sie gilt aber auch als
Zeichen der Unnahbarkeit, Empfindsamkeit und kühler Reserviertheit.




                                                                                    © Elephant Seven | 108
GRAU.
Grau ist die Farbe des wolkenverhangenen Himmels an einem trüben Tag. Sie ist die
Farbe vollkommener Neutralität, Vorsicht, Zurückhaltung und Kompromissbereitschaft. Sie
ist eine unauffällige Farbe, die auch mit Langeweile, Eintönigkeit, Unsicherheit und
Lebensangst in Verbindung gebracht wird.




                                                                                       © Elephant Seven | 109
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):
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
TYPOGRAFIE.
Ein Text hat nicht nur einen Inhalt, er hat auch ein "Gesicht" – die Schrift, in der er gedruckt
ist. Von den Zehntausenden von Schrifttypen, die es weltweit gibt, hat jede Schrift ihren
eigenen Charakter.
Die Ausdruckspalette reicht von modern bis historisch, feierlich bis nüchtern, formal bis
dekorativ usw. Deshalbist es keinesfalls egal, welche Schrift zum Einsatz kommt.
Text: mhplus.de




                                                                                     © Elephant Seven | 112
TYPOGRAFIE.
Ein Gedicht, ein Lesestück wird vom Vortragenden durch
Modulation seiner Stimme beeinflusst. Er kann Gefühle hörbar
machen – Schrift soll diese sichtbar machen!
Zwei grundsätzliche Schriftarten stehen zur Auswahl.


1. Serifenschrift: Antiqua
2. Serifenlose Schrift: Grotesk




                                                                © Elephant Seven | 113
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
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
ANEKDOTE „GROTESK“.
Die Bezeichnung „Grotesk“ rührt daher, dass das Kleinbürgertum und die kunsthandwerklich
orientierte Gesellschaft in der ersten Hälfte des 19. Jahrhunderts, als die Grotesk-Schriften
entwickelt wurden, diese serifenlosen Schriften noch als „grotesk“ – als aus dem Rahmen
fallend – empfanden.




                                                                                     © Elephant Seven | 116
WAS STIMMT HIER NICHT?




                         © Elephant Seven | 117
AUFLÖSUNG.




             © Elephant Seven | 118
TYPOGRAFIE MERCEDES-BENZ.
Interpretation bitte.



                        Interpretation bitte!




                                                © Elephant Seven | 119
TYPO VERMASSUNG.




                   © Elephant Seven | 120
TYPO WEITERE DEFINITIONEN.




                             © Elephant Seven | 121
BILDER.
„Die Bildsprache prägt die Kommunikation der Marke Mercedes-Benz. Die Bilder reflektieren
Markenpersönlichkeit und Markengeschichte angemessen. Sie verleihen der Marke durch
konsistente Umsetzung mehr Kraft und nachhaltigen Glanz. Die große Vielfalt an
Modellen, Sparten und Sujets erfordert ein einheitliches Verständnis bei den Bildwelten.
Nur so ist der einheitliche Auftritt einer globalen Premium-Marke jederzeit und überall
gewährleistet.
Die Fotografien unterstreichen den Führungsanspruch der Marke Mercedes-Benz durch
besondere Qualität. Ihre Komposition ist großzügig, das Licht perfekt. Kleinteilige Aufnahmen
und Schnappschüsse sind nicht erwünscht.“




                                                                                    © Elephant Seven | 122
BILDSPRACHE MERCEDES-BENZ.




                             © Elephant Seven | 123
BILDSPRACHE MERCEDES-BENZ.




                             © Elephant Seven | 124
UND JETZT ALLE ZUSAMMEN:




                           © Elephant Seven | 125
AGENDA

CORPORATE 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 sie in
             skalierendem Layout bei allen
             Browsergrößen im sichtbaren
             Bereich liegt.




                                               |
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.



                                                          |
AGENDA

CORPORATE DESIGN.
 AUFGABE 10 MINUTEN.

„WELCHE ELEMENTE MÜSSEN GESTALTET
WERDEN?“




                             © Elephant Seven | 138
Buttons
                                                           Navi/Tab

IM DETAIL.
                                                               Eingabefelder
                                  Interaktions-
                                    Elemente




                                                  Film Navigation


 Tooltips             Pulldowns



                                                               © Elephant Seven | 139
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
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
IM DETAIL.




             © Elephant Seven | 142
EIN STYLEGUIDE BEISPIEL
http://bannertool.de/upload/itze/styleguide/




                                               © Elephant Seven | 143
WEBFONTS. VERDANA.
                     Designedby Matthew Carter and
                     handhintedbyleadinghintingexpert,
                     Monotype's 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
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-Ersparnis
Nachteile:
• nicht CD-konform
• teilweise nicht besonders schön anzusehen
• austauschbar mit 99% aller anderen Firmen im Internet
• begrenzte Auswahl




                                                                                   © Elephant Seven | 145
SYSTEMSCHRIFTEN.

             Selbst ausprobieren unter:
            http://typetester.maratz.com/




                                            © Elephant Seven | 146
SCHRIFTEN IN FLASH.




In den Flashspecials werden die jeweiligen Schriften nachgeladen. Hierbei wird für alle
Sprachen außer Chinesisch, Japanisch und Russisch die Futura oder eine andere Latin1
Schrift genutzt. In den anderen Sprachen nutzen wir die Arial Unicode. Diese Schrift ist dann
allerdings allein schon ca. 6MB groß.
                                                                                    © Elephant Seven | 147
|
SCHRIFTEN UND HTML
Technologie            Beschreibung         Vorteile              Nachteile

Systemfonts                                 schnellsteVariante,   Nur allgemein
                                            läuft überall         verbreitete Fonts,
                                                                  nicht CI-konform
Webfonts               Einbindung von       Hausschriften         ggf. Lizenzen,
                       Fonts via CSS        möglich,              Ladezeit,
                                            dynamische            aufwendige
                                            Befüllung,            Einbindung
Imagegenerierung       Schrift wird als Bild Hausschriften        Nur aufwendig
                       dargestellt           möglich, sieht       dynamisierbar,
                                             überall gleich aus   nicht SEO
Sifr*                  Schrift wird         Hausschriften         nicht sehr stabil,
(ScalableInman Flash   automatisch durch    möglich               Flash nötig
Replacement)
                       Flash ersetzt

                                                                            © Elephant Seven | 149
SCHRIFTEN, TECHNISCH: WEBFONTS
Vorteile:
• CI-konform
• trotzdem normaler HTML-Text
• SEO-konform
Nachteile:
• Font muss nachgeladen werden
• Lizenzbestimmungen sind zu beachten
• teils aufwändige Einbindung wg. Browserkompatibilität
Ressourcen:
• http://www.fontsquirrel.com/fontface/generator
• http://www.page-online.de/emag/typo/artikel/faq_webfonts


                                                             © Elephant Seven | 150
SCHRIFTEN, TECHNISCH: IMAGES

Vorteile:
• CI-konform
• Einfache Lösung
• Cross-Platform
Nachteile:
• Bild muss entweder statisch bleiben oder es ist eine „Renderengine“ nötig
• nicht SEO-konform




                                                                              © Elephant Seven | 151
SCHRIFTEN, TECHNISCH: SIFR
ScalableInman Flash Replacement, per JavaScript wird HTML-Text durch Flash ersetzt
Vorteile:
• CI-konform
• SEO-konform
Nachteile:
• Nachladen des SWF nötig
• unschöne Effekte
• Flashplayer nötig
• veraltet




                                                                              © Elephant Seven | 152
WEITERE GESTALTUNGSELEMENTE.
Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wie
Animationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wie
reagieren Interaktionselemente.
Auf der Bühne der Website oder im Onlinemarketing.




                                                                                  © Elephant Seven | 153
WEITERE GESTALTUNGSELEMENTE.
                                                Skyscraper
Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wie
Animationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wie
reagieren Interaktionselemente.
Auf der Bühne der Website oder im Onlinemarketing.




               Der Banner „Name“. Link


                                                                                  © Elephant Seven | 154
WEITERE GESTALTUNGSELEMENTE.



                                Layer 400x400




      Der Banner „Name“. Link


                                                © Elephant Seven | 155
WEITERE GESTALTUNGSELEMENTE.




                     Landingpage
                     • Aufgeräumtes Erscheinungsbild
                     • Zielgerichtete Userführung
                     • Wenig Kilobyte




                                                   |
Image-Mail:
Großes Bild, 1 Aussage
und 1 Ziel.
Content-Mail:
1 Top-Thema und
mehrere kleine Content-Teaser.
         Landingpage




                                 |
AGENDA

CORPORATE DESIGN.
 MITTAGSPAUSE.




                    © Elephant Seven | 158
GRUPPENARBEIT.
Beurteilen Sie anhand dessen, was Sie gerade zu Onlinegestaltung gezeigten die folgenden
Beispiele. 3 Gruppen. Zeit 30 Minuten interne Gruppendiskussion.
Ziel: Präsentation der Ergebnisse in 5 Minuten pro Gruppe.


a) Typo/Farben/Bilder
b) Menü/Navigation
c) Ungewöhnliches und Gesamteindruck


Was ist gelungen und wo ist noch Verbesserungspotential?




                                                                                           |
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ÄT
Graf v. Faber-Castell | Montblanc




                                    |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
GRUPPE 2.




            |
|
|
|
|
|
|
|
|
|
GRUPPE ZUCKERSPIEGEL
Bendicks | Werthers Original US




                                  |
|
|
|
|
|
|
|
|
|
|
ERGEBNISPRÄSENTATIONEN.




                          |
AGENDA

CORPORATE DESIGN.
 KAFFEEPAUSE. 10MIN.




                       © Elephant Seven | 205
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
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 Annehmlichkeiten. Dieses Gefühl wollen wir auch im Layout
transportieren. 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
Navigation




        Bildhorizont




Floater mit News und Teasern




                                             |
                               © Elephant Seven   209
          Footer
Navigation




        Bildhorizont




Floater mit News und Teasern




                                             |
                               © Elephant Seven   210
          Footer
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                                             |
                                                               © Elephant Seven   211
|
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                                             |
                                                               © Elephant Seven   213
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                                             |
                                                               © Elephant Seven   214
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                                             |
                                                               © Elephant Seven   215
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                                             |
                                                               © Elephant Seven   216
|
|
© 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öß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
CORPORATE WEBSITE.

DEUTSCHE POST DHL.




                     © Elephant Seven | 222
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
Logo                        Navigation                Suche




                           Bühne




       Chart Aktienkurs, Pressemitteilungen, Teaser




                         Footer

                                                              |
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                               |   225
|
|
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
MICROSITE.

NIMM2 VON STORCK.




                    © Elephant Seven | 229
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
|
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                               |   232
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
ONLINE SHOP.

AMAZON.




               © Elephant Seven | 234
DER PERFEKTE SALESFUNNEL.
Im Mittelpunkt stehen die Produkte. Die Marke Amazon wird fast ausschließlich durch
funktionale 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öllig


Das Besondere: Was Amazon macht, wird schnell von anderen übernommen. So setzt
Amazon die Standards anstatt anderen zu folgen.




                                                                           © Elephant Seven | 235
Logo
                     Großes Suchfeld   Warenkorb
Kategorien-
Navigation




              Produktempfehlungen       Aktionen



 Aktionen




                                                   |
|
|
|
|
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
LANDINGPAGE 1.

DRIFT.




                 © Elephant Seven | 242
CALL TO ACTION IM MITTELPUNKT.
Mal eben einen Banner geklickt oder von Check24.de hierher gesprungen, sieht der User
sofort, 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
Logo und Hauptnavigation




                        Call to Action

Marke




                           Vorteile




    Zertifizierungen und Partner




                                         |
|
TECHNISCH: LANDINGPAGES
•   Optimierung des Ladeverhaltens
•   Muss immer und überall funktionieren
•   Beispiel Drift Landingpage:
    • 412 KB




                                           © Elephant Seven | 246
LANDINGPAGE 2.

ITZDIRECT24.




                 © Elephant Seven | 247
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                               |   248
LANDINGPAGE 3.

NEXUS.




                 © Elephant Seven | 249
(Hier Layouts der unterschiedlichen Motive auf der Homepage)




                                                               |   250
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
-   die Artikel: Text auf großem Bild
-   mit der Hauptnavigation sind die anderen Boss Websites nur einen Klick entfernt




                                                                                      © Elephant Seven | 252
Logo und Hauptnavigation




Magazin-
Navigation
                            Top-Thema




  Social




                     Teaser für weitere Themen


                                                 |
|
|
|
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
MAGAZIN 2.

SCHWARZKOPF.DE




                 © Elephant Seven | 258
|
|
|
AGENDA

CORPORATE DESIGN.
 KAFFEEPAUSE. 10MIN.




                       © Elephant Seven | 262
PREVIEW.
Samstag erarbeiten sie anhand Schematics:
a) die neue nimm2.de
b) die Landingpage der Einführungskampagne des neuen SLK




                                                           |
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 der
Elephant 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 GmbH
Gerhofstraße 1-3
D-20354 Hamburg
+49 40 34 101-400
+49 40 34 101-101
www.e-7.com




                                                                                      © Elephant Seven | 282

Contenu connexe

En vedette

Plan y brigadas de emergencia
Plan y brigadas de emergenciaPlan y brigadas de emergencia
Plan y brigadas de emergenciaSara Roa
 
Pie diabético sosaelba_nuevo
Pie diabético sosaelba_nuevoPie diabético sosaelba_nuevo
Pie diabético sosaelba_nuevoElba Sosa
 
Caspers Bilbok Redigert Utgave3
Caspers Bilbok Redigert Utgave3Caspers Bilbok Redigert Utgave3
Caspers Bilbok Redigert Utgave3Hege Bogen
 
ROUPA - Corporate Design Manual
ROUPA - Corporate Design ManualROUPA - Corporate Design Manual
ROUPA - Corporate Design ManualSebastian Jansen
 
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_Vey
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_VeyUPA_06_1_Gefuehlvoll_Gestalten_Sturm_Vey
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_VeyChristina_Sturm
 
DMD 2009 Handyporto
DMD 2009 HandyportoDMD 2009 Handyporto
DMD 2009 Handyportopost08
 
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013Katja Bett
 
Gazette June-August 2012
Gazette June-August 2012Gazette June-August 2012
Gazette June-August 2012sehgazette
 
Filosofía Moderna....Racionalismo
Filosofía Moderna....RacionalismoFilosofía Moderna....Racionalismo
Filosofía Moderna....RacionalismoSofia Mena
 
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...HENRICHSEN AG
 
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchen
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz NeunkirchenKatholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchen
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchenkathcitykirche
 
Friendica - ein OpenSource-Facebook?
Friendica - ein OpenSource-Facebook?Friendica - ein OpenSource-Facebook?
Friendica - ein OpenSource-Facebook?wtlx
 
Warum studiere ich Geschichte
Warum studiere ich GeschichteWarum studiere ich Geschichte
Warum studiere ich Geschichteyoni456
 

En vedette (20)

Portafolio diagnóstico
Portafolio diagnósticoPortafolio diagnóstico
Portafolio diagnóstico
 
Plan y brigadas de emergencia
Plan y brigadas de emergenciaPlan y brigadas de emergencia
Plan y brigadas de emergencia
 
Negocios electronicos tatiiii
Negocios electronicos tatiiiiNegocios electronicos tatiiii
Negocios electronicos tatiiii
 
Pie diabético sosaelba_nuevo
Pie diabético sosaelba_nuevoPie diabético sosaelba_nuevo
Pie diabético sosaelba_nuevo
 
Caspers Bilbok Redigert Utgave3
Caspers Bilbok Redigert Utgave3Caspers Bilbok Redigert Utgave3
Caspers Bilbok Redigert Utgave3
 
Sabías que
Sabías queSabías que
Sabías que
 
ROUPA - Corporate Design Manual
ROUPA - Corporate Design ManualROUPA - Corporate Design Manual
ROUPA - Corporate Design Manual
 
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_Vey
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_VeyUPA_06_1_Gefuehlvoll_Gestalten_Sturm_Vey
UPA_06_1_Gefuehlvoll_Gestalten_Sturm_Vey
 
Producción de la lana
Producción de la lanaProducción de la lana
Producción de la lana
 
DMD 2009 Handyporto
DMD 2009 HandyportoDMD 2009 Handyporto
DMD 2009 Handyporto
 
Sommergluecksmomente 2015 Italien
Sommergluecksmomente 2015 ItalienSommergluecksmomente 2015 Italien
Sommergluecksmomente 2015 Italien
 
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013
Katja Bett lernen_mit_neuen_medien_in_der_ausbildung2013
 
Gazette June-August 2012
Gazette June-August 2012Gazette June-August 2012
Gazette June-August 2012
 
coursera
courseracoursera
coursera
 
Filosofía Moderna....Racionalismo
Filosofía Moderna....RacionalismoFilosofía Moderna....Racionalismo
Filosofía Moderna....Racionalismo
 
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...
Eingangs - Rechnungsprüfung schneller und damit gewinnbingend fürs Unternehme...
 
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchen
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz NeunkirchenKatholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchen
Katholische Citykirche Wuppertal - Präsentation Dekanatskonferenz Neunkirchen
 
Friendica - ein OpenSource-Facebook?
Friendica - ein OpenSource-Facebook?Friendica - ein OpenSource-Facebook?
Friendica - ein OpenSource-Facebook?
 
About results & relations
About results & relationsAbout results & relations
About results & relations
 
Warum studiere ich Geschichte
Warum studiere ich GeschichteWarum studiere ich Geschichte
Warum studiere ich Geschichte
 

Similaire à Ostfalia Webdesign Theorie Block 1

Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-AnimationsPeter Rozek
 
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...die firma . experience design GmbH
 
CX Forum 4 Magazin
CX Forum 4 MagazinCX Forum 4 Magazin
CX Forum 4 MagazinStimmt AG
 
Olaf Schulz // Collaboration
Olaf Schulz // Collaboration Olaf Schulz // Collaboration
Olaf Schulz // Collaboration Olaf Schulz
 
1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueckMartina Müller
 
TrendONE Travel Trendreport Juli 2014 Preview
TrendONE Travel Trendreport Juli 2014 PreviewTrendONE Travel Trendreport Juli 2014 Preview
TrendONE Travel Trendreport Juli 2014 PreviewTRENDONE GmbH
 
JP│KOM News-Service 1/16: Die neue JP│KOM Website
 JP│KOM News-Service 1/16: Die neue JP│KOM Website JP│KOM News-Service 1/16: Die neue JP│KOM Website
JP│KOM News-Service 1/16: Die neue JP│KOM WebsiteJP KOM GmbH
 
Kollektiv k StartupDorf Meetup June 1, 2016
Kollektiv k StartupDorf Meetup June 1, 2016Kollektiv k StartupDorf Meetup June 1, 2016
Kollektiv k StartupDorf Meetup June 1, 2016StartupDorf e.V.
 
WuB_Frühling 2017_Kampagnen_PH
WuB_Frühling 2017_Kampagnen_PHWuB_Frühling 2017_Kampagnen_PH
WuB_Frühling 2017_Kampagnen_PHPlan.Net Suisse AG
 
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...Trojanisches Marketing
 
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter ProjekteMartin Seibert
 
Xtendx Short Presentation
Xtendx Short PresentationXtendx Short Presentation
Xtendx Short Presentationdanieltschudi
 

Similaire à Ostfalia Webdesign Theorie Block 1 (20)

Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1
 
Powerflasher Hamburg
Powerflasher HamburgPowerflasher Hamburg
Powerflasher Hamburg
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Infomobil 03-2011
Infomobil 03-2011Infomobil 03-2011
Infomobil 03-2011
 
Powerflasher Praesentation
Powerflasher PraesentationPowerflasher Praesentation
Powerflasher Praesentation
 
Powerflasher_Praesentation
Powerflasher_PraesentationPowerflasher_Praesentation
Powerflasher_Praesentation
 
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...
Trendpaper: Moving Image - Videoinhalte bringen mehr Bewegung ins Content Mar...
 
Das ZDF App Universum
Das ZDF App UniversumDas ZDF App Universum
Das ZDF App Universum
 
CX Forum 4 Magazin
CX Forum 4 MagazinCX Forum 4 Magazin
CX Forum 4 Magazin
 
Olaf Schulz // Collaboration
Olaf Schulz // Collaboration Olaf Schulz // Collaboration
Olaf Schulz // Collaboration
 
1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck
 
TrendONE Travel Trendreport Juli 2014 Preview
TrendONE Travel Trendreport Juli 2014 PreviewTrendONE Travel Trendreport Juli 2014 Preview
TrendONE Travel Trendreport Juli 2014 Preview
 
JP│KOM News-Service 1/16: Die neue JP│KOM Website
 JP│KOM News-Service 1/16: Die neue JP│KOM Website JP│KOM News-Service 1/16: Die neue JP│KOM Website
JP│KOM News-Service 1/16: Die neue JP│KOM Website
 
Das Studio 2010
Das Studio 2010Das Studio 2010
Das Studio 2010
 
Kollektiv k StartupDorf Meetup June 1, 2016
Kollektiv k StartupDorf Meetup June 1, 2016Kollektiv k StartupDorf Meetup June 1, 2016
Kollektiv k StartupDorf Meetup June 1, 2016
 
FACTS&FIGURES
FACTS&FIGURESFACTS&FIGURES
FACTS&FIGURES
 
WuB_Frühling 2017_Kampagnen_PH
WuB_Frühling 2017_Kampagnen_PHWuB_Frühling 2017_Kampagnen_PH
WuB_Frühling 2017_Kampagnen_PH
 
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...
Social Media eingebettet in die Online-Strategie - 3. Offizielle XING-Event d...
 
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte
//SEIBERT/MEDIA - Profilpräsentation samt einiger ausgewählter Projekte
 
Xtendx Short Presentation
Xtendx Short PresentationXtendx Short Presentation
Xtendx Short Presentation
 

Ostfalia Webdesign Theorie Block 1

  • 1. MACHE DIE DINGE SO EINFACH WIE MÖGLICH - ABER NICHT EINFACHER. Vortrag Webdesign. 2. Semester. SS 2011. Salzgitter, 15./16.04.2011
  • 3. AGENDA. 1. Vorstellung und Einleitung 2. Warum Kommunikationsdesign? 3. Corporate Design 4. Online Design 5. Aufgabe Vergleich Websites 6. Websitetypen und Schematics © Elephant Seven | 3
  • 4. AGENDA. VORSTELLUNG UND EINLEITUNG. © Elephant Seven | 4
  • 5. |
  • 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. NETZWERK. ELEPHANT SEVEN PIXELPARK AGENTUR AG YELLOW TOMATO GMBH HAMBURG GMBH STANDORT KÖLN KÖLN (HAMBURG) HAMBURG ELEPHANT 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. UNSEREPOSITIONIERUNG. ELEPHANT SEVEN IST DIE KREATIVE ACROSS-THE-LINE AGENTURFÜREINEVERNETZTDENKENDE WELT. © Elephant Seven | 8
  • 9. Messe DIRECT COACHING Verkaufs- POS EVENT förderung POSTER ONLINE DISPLAY VIRAL CRM PRINT E-COMMERCE SEO DIGITAL SOCIAL TV MOBILE SEA CORPORATE SITES AMBIENT PLANNING Inhouse PP-Netzwerk On-demand |
  • 10. KUNDEN UNIT HH. © Elephant Seven | 10
  • 11. KUNDEN UNIT HH, FF. © Elephant Seven | 11
  • 13. DARAUF SIND WIR STOLZ.* *557 x Gold, Silber oder Bronze und keinmal Kupfer © Elephant Seven | 13
  • 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. 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. APROPOS „SENIOR“. WAS BEDEUTEN DIE TITEL IN EINER AGENTUR? © Elephant Seven | 16
  • 17. AGENDA. WARUM KOMMUNIKATIONSDESIGN? © Elephant Seven | 17
  • 18. 70.000 NEUE MARKEN WERDEN JEDES JAHR IN DEUTSCHLAND ANGEMELDET. |
  • 19. JEDER WIRD TÄGLICH MIT 2.500 BIS 5.000 (WM)WERBE- BOTSCHAFTENKON FRONTIERT. | 19
  • 21. DIE ZAHL DER AUF FACEBOOK „GETEILTEN“ INFO-BITS (LINKS, STORIES, BLOGPOSTS,...) PRO WOCHE: 3,5 MILLIARDEN | © Elephant Seven 21
  • 22. MEHR ALS 66% DER iPHONE-NUTZER SURFEN IM INTERNET, WÄHREND DER FERNSEHER LÄUFT. | © Elephant Seven 22
  • 23. DIE INFORMATIONSÜBERLASTUNG BEI ZEITSCHRIFTEN BETRÄGT 94%. NUR 6% ALLER IN ZEITSCHRIFTEN PRÄSENTIERTEN INFORMATIONEN WERDEN VON DEN LESERN WAHRGENOMMEN. | © Elephant Seven 23
  • 24. IM BESTEN FALL KÖNNEN ZEHN BIS ZWANZIG WERBEBOTSCHAFTEN AM TAG BEWUSST WAHRGENOMMEN WERDEN. ZWEI BIS DREI LÖSEN IRGENDETWAS IM KOPF AUS. | © Elephant Seven 24
  • 25. SCHÄTZEN SIE, WIE VIELE VON 100 TV-UND FUNK SPOTS BEWUSST WAHRGENOMMEN WERDEN: | © Elephant Seven 25
  • 26. ANTWORT: ZWEI BIS DREI. | © Elephant Seven 26
  • 27. AUSFLUG IN DIE WISSENSCHAFT. SELEKTIVE WAHRNEHMUNG. „Wir nehmen gezielt das wahr, was unserer aktuellen Aufgabe, unserem Ziel oder unseren Bedü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 im Umkehrschluss 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. EIN AUFMERKSAMKEITS-TEST. © Elephant Seven | 28
  • 30. DIE HERAUSFORDERUNG. DAMIT ANZEIGEN ÜBERHAUPT EINE LEISTUNG ERBRINGEN UND EINE WERBEWIRKUNG HERVORRUFEN KÖNNEN, MÜSSEN SIE ZUERST WAHRGENOMMEN WERDEN. DAFÜR MÜSSEN SIE SCHNELL UND EINFACH SEIN. © Elephant Seven | 30
  • 31. Schnell und einfach: SPONTANE, HOHE VERMITTLUNG DER AUFMERKSAMKEIT. BOTSCHAFT IN WENIGEN SEKUNDEN SOFORTIGE HOHE VERSTÄNDLICHKEIT EINPRÄGSAMKEIT SYMPATHIE UND ÜBERZEUGUNGSKRAFT AUF DENERSTEN BLICK. (Auszug „Die Tachometer-Methode“). |
  • 32. EINE MÖGLICHKEIT, WERBEWIRKUNG ZU MESSEN. • 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
  • 33. EINE MÖGLICHKEIT, WERBEWIRKUNG ZU MESSEN. 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
  • 34. PRÜFUNG DER INFORMATIONSAUFNAHME. © Elephant Seven | 34
  • 36. Der U-Bahn Plan von Oslo. |
  • 37. Der neue U-Bahn Plan von Oslo. |
  • 38. |
  • 40. US-AUSGABEN VS. MEDIEN ERWÄHNUNG. Ausgaben vs. Media-Coverage. |
  • 41. 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 Vorteil sind Anzeigen, die im vorderen Zeitungsteil auf der rechten Seite zu finden sind. (Werbewissenschaftliche Gesellschaft in Kooperation mit Profil und Trend.) © Elephant Seven | 41
  • 42. |
  • 43. |
  • 44. „SOFORTIGE VERSTÄNDLICHKEIT“. © Elephant Seven | 44
  • 45. |
  • 46. |
  • 47. |
  • 48. | 48
  • 49. | 49
  • 50. „WIDERSPRÜCHLICHKEIT“? © Elephant Seven | 50
  • 51. |
  • 52. |
  • 53. | 53
  • 54. | 54
  • 56. „HOHE EINPRÄGSAMKEIT UND EIGENSTÄNDIGKEIT DES BILDES“? © Elephant Seven | 56
  • 59. | 59
  • 61. | 61
  • 62. | 62
  • 63. | 63
  • 65. | 66
  • 66. | 67
  • 67. | 68
  • 68. | 69
  • 69. | 70
  • 70. | 71
  • 71. „VERSTÄNDLICHKEIT DES BILDES?“ © Elephant Seven | 75
  • 72. |
  • 73. |
  • 74. |
  • 75. |
  • 76. |
  • 77. AGENDA CORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 81
  • 78. AGENDA. CORPORATE DESIGN. © Elephant Seven | 82
  • 79. „PASST NICHT ZU UNSERER POSITIONIERUNG“. Haben Sie das schon mal gehört? Wenn Sie es hören, wissen Sie: Das ist das wasserdichte Nr.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 Ziel vorbeischieß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. |
  • 80. CORPORATE DESIGN. Bevor wir uns die speziell Onlinekommunikation betreffenden Details ansehen, gehe ich kurz auf die Grundlagen der Gestaltung ein. Danach werden wir überprüfen, wie sich das Corporate Design im Sinne der Positionierung mit den digitalen Möglichkeiten optimal weiterführen lässt. © Elephant Seven | 84
  • 81. CORPORATE DESIGN – POESIE. „Im Rahmen der kontinuierlichen Entwicklung unserer Marke haben wir auch unser Brand Design evolutioniert. Das Ergebnis ist selbstbewusst und markant und reflektiert zugleich überzeugend unsere Markenpositionierung und unsere Historie. The Star alwaysshinesfromaboveist 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 im neuen Brand Design immer oben.“ schreibt Mercedes-Benz. © Elephant Seven | 85
  • 82. DESIGN AM BEISPIEL LOGO. © Elephant Seven | 86
  • 83. DESIGNENTWICKLUNG. © Elephant Seven | 87
  • 84. BELIEBTE LOGOS. Achtung, es wird bunt. © Elephant Seven | 88
  • 85. LOGO WORTMARKE. Achtung, es wird bunt. © Elephant Seven | 89
  • 86. LOGO METAPHER. © Elephant Seven | 90
  • 87. DAS LOGO IM INTERNET. AKUTE BUBBELITIS. © Elephant Seven | 91
  • 88. DAS LOGO IM INTERNET. Achtung, es wird bunt. © Elephant Seven | 92
  • 89. LOGO WIEDERERKENNUNGSWERT. © Elephant Seven | 93
  • 90. CORPORATE DESIGN MERCEDES-BENZ 2008. © Elephant Seven | 94
  • 91. WETTBEWERBER. © Elephant Seven | 95
  • 92. WETTBEWERBER. © Elephant Seven | 96
  • 93. CORPORATE DESIGN. © Elephant Seven | 97
  • 94. CORPORATE DESIGN. © Elephant Seven | 98
  • 95. FARBEN. Achtung, es wird bunt. © Elephant Seven | 99
  • 96. 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 und Brutalität verkörpert. http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html © Elephant Seven | 100
  • 97. ORANGE IST DIE FARBE DER UNTERGEHENDEN SONNE. Sie ist die Symbolfarbe für Optimismus und Lebensfreude. Sie signalisiert Aufgeschlossenheit, Kontaktfreude und Jugendlichkeit, Gesundheit und Selbstvertrauen. Sie kann aber auch Leichtlebigkeit, Aufdringlichkeit und Ausschweifung vermitteln und wird in unserer Gesellschaft oft als billig und unseriös empfunden.. http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-wirk1.html © Elephant Seven | 101
  • 98. GELB IST DIE FARBE DER SONNE. Sie vermittelt Licht, Heiterkeit und Freude. Sie steht auch für Wissen, Weisheit, Vernunft und Logik. Schmutzige Gelbtöne dagegen vermitteln negative Assoziationen wie Täuschung, Rachsucht, Pessimismus, Egoismus, Geiz und Neid. © Elephant Seven | 102
  • 99. 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
  • 100. CYAN. In der Umgangssprache auch Türkis genannt, ist eine frische Farbe. Es ist die Farbe des Meers an einem sonnigen Tag. Sie vermittelt Wachheit, Bewusstheit, Klarheit, geistige Offenheit und Freiheit. Cyan kann aber auch sehr kühl und distanziert wirken und ein Gefühl von Leere vermitteln. © Elephant Seven | 104
  • 101. BLAU IST DIE FARBE DES HIMMELS. Sie steht für Kühle, Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht. Sie kann aber auch Traumtänzerei, Nachlässigkeit oder Melancholie vermitteln. © Elephant Seven | 105
  • 102. VIOLETT IST EINE WÜRDEVOLLE FARBE. Sie ist die Farbe der Inspiration, der Mystik, Magie und der Kunst. Sie ist eine außergewöhnliche, extravagante Farbe, die auch mit Frömmigkeit, Buße und Opferbereitschaft in Verbindung gebracht wird. Sie kann aber auch stolz und arrogant oder unmoralisch wirken. © Elephant Seven | 106
  • 103. MAGENTA. Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. In der Natur erleben 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, Arroganz und Dominanz. © Elephant Seven | 107
  • 104. WEIß IST DIE FARBE VON EIS UND SCHNEE. Sie ist ein Symbol der Reinheit, Klarheit, Erhabenheit und Unschuld. Sie gilt aber auch als Zeichen der Unnahbarkeit, Empfindsamkeit und kühler Reserviertheit. © Elephant Seven | 108
  • 105. GRAU. Grau ist die Farbe des wolkenverhangenen Himmels an einem trüben Tag. Sie ist die Farbe vollkommener Neutralität, Vorsicht, Zurückhaltung und Kompromissbereitschaft. Sie ist eine unauffällige Farbe, die auch mit Langeweile, Eintönigkeit, Unsicherheit und Lebensangst in Verbindung gebracht wird. © Elephant Seven | 109
  • 106. PRIMÄRFARBEN MERCEDES-BENZ. Interpretation bitte! Kompetenz © Elephant Seven | 110
  • 107. 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
  • 108. TYPOGRAFIE. Ein Text hat nicht nur einen Inhalt, er hat auch ein "Gesicht" – die Schrift, in der er gedruckt ist. Von den Zehntausenden von Schrifttypen, die es weltweit gibt, hat jede Schrift ihren eigenen Charakter. Die Ausdruckspalette reicht von modern bis historisch, feierlich bis nüchtern, formal bis dekorativ usw. Deshalbist es keinesfalls egal, welche Schrift zum Einsatz kommt. Text: mhplus.de © Elephant Seven | 112
  • 109. TYPOGRAFIE. Ein Gedicht, ein Lesestück wird vom Vortragenden durch Modulation seiner Stimme beeinflusst. Er kann Gefühle hörbar machen – Schrift soll diese sichtbar machen! Zwei grundsätzliche Schriftarten stehen zur Auswahl. 1. Serifenschrift: Antiqua 2. Serifenlose Schrift: Grotesk © Elephant Seven | 113
  • 110. 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
  • 111. 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
  • 112. ANEKDOTE „GROTESK“. Die Bezeichnung „Grotesk“ rührt daher, dass das Kleinbürgertum und die kunsthandwerklich orientierte Gesellschaft in der ersten Hälfte des 19. Jahrhunderts, als die Grotesk-Schriften entwickelt wurden, diese serifenlosen Schriften noch als „grotesk“ – als aus dem Rahmen fallend – empfanden. © Elephant Seven | 116
  • 113. WAS STIMMT HIER NICHT? © Elephant Seven | 117
  • 114. AUFLÖSUNG. © Elephant Seven | 118
  • 115. TYPOGRAFIE MERCEDES-BENZ. Interpretation bitte. Interpretation bitte! © Elephant Seven | 119
  • 116. TYPO VERMASSUNG. © Elephant Seven | 120
  • 117. TYPO WEITERE DEFINITIONEN. © Elephant Seven | 121
  • 118. BILDER. „Die Bildsprache prägt die Kommunikation der Marke Mercedes-Benz. Die Bilder reflektieren Markenpersönlichkeit und Markengeschichte angemessen. Sie verleihen der Marke durch konsistente Umsetzung mehr Kraft und nachhaltigen Glanz. Die große Vielfalt an Modellen, Sparten und Sujets erfordert ein einheitliches Verständnis bei den Bildwelten. Nur so ist der einheitliche Auftritt einer globalen Premium-Marke jederzeit und überall gewährleistet. Die Fotografien unterstreichen den Führungsanspruch der Marke Mercedes-Benz durch besondere Qualität. Ihre Komposition ist großzügig, das Licht perfekt. Kleinteilige Aufnahmen und Schnappschüsse sind nicht erwünscht.“ © Elephant Seven | 122
  • 119. BILDSPRACHE MERCEDES-BENZ. © Elephant Seven | 123
  • 120. BILDSPRACHE MERCEDES-BENZ. © Elephant Seven | 124
  • 121. UND JETZT ALLE ZUSAMMEN: © Elephant Seven | 125
  • 122. AGENDA CORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 126
  • 123. AGENDA. ONLINE DESIGN. © Elephant Seven | 127
  • 131. IM DETAIL. Logoposition links ist die historisch gewachsene „sicherste“ Position, da sie in skalierendem Layout bei allen Browsergrößen im sichtbaren Bereich liegt. |
  • 132. IM DETAIL. Vermassung des Headers (Dachbalkens) Gestaltungsraster wie in Print. und der Standardelemente. |
  • 133. IM DETAIL. In diesem Fall verlängert sich die Website nach rechts. Der Flexible Bereich muss definiert werden. |
  • 134. AGENDA CORPORATE DESIGN. AUFGABE 10 MINUTEN. „WELCHE ELEMENTE MÜSSEN GESTALTET WERDEN?“ © Elephant Seven | 138
  • 135. Buttons Navi/Tab IM DETAIL. Eingabefelder Interaktions- Elemente Film Navigation Tooltips Pulldowns © Elephant Seven | 139
  • 136. 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
  • 137. 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
  • 138. IM DETAIL. © Elephant Seven | 142
  • 140. WEBFONTS. VERDANA. Designedby Matthew Carter and handhintedbyleadinghintingexpert, Monotype's 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
  • 141. 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-Ersparnis Nachteile: • nicht CD-konform • teilweise nicht besonders schön anzusehen • austauschbar mit 99% aller anderen Firmen im Internet • begrenzte Auswahl © Elephant Seven | 145
  • 142. SYSTEMSCHRIFTEN. Selbst ausprobieren unter: http://typetester.maratz.com/ © Elephant Seven | 146
  • 143. SCHRIFTEN IN FLASH. In den Flashspecials werden die jeweiligen Schriften nachgeladen. Hierbei wird für alle Sprachen außer Chinesisch, Japanisch und Russisch die Futura oder eine andere Latin1 Schrift genutzt. In den anderen Sprachen nutzen wir die Arial Unicode. Diese Schrift ist dann allerdings allein schon ca. 6MB groß. © Elephant Seven | 147
  • 144. |
  • 145. SCHRIFTEN UND HTML Technologie Beschreibung Vorteile Nachteile Systemfonts schnellsteVariante, Nur allgemein läuft überall verbreitete Fonts, nicht CI-konform Webfonts Einbindung von Hausschriften ggf. Lizenzen, Fonts via CSS möglich, Ladezeit, dynamische aufwendige Befüllung, Einbindung Imagegenerierung Schrift wird als Bild Hausschriften Nur aufwendig dargestellt möglich, sieht dynamisierbar, überall gleich aus nicht SEO Sifr* Schrift wird Hausschriften nicht sehr stabil, (ScalableInman Flash automatisch durch möglich Flash nötig Replacement) Flash ersetzt © Elephant Seven | 149
  • 146. SCHRIFTEN, TECHNISCH: WEBFONTS Vorteile: • CI-konform • trotzdem normaler HTML-Text • SEO-konform Nachteile: • Font muss nachgeladen werden • Lizenzbestimmungen sind zu beachten • teils aufwändige Einbindung wg. Browserkompatibilität Ressourcen: • http://www.fontsquirrel.com/fontface/generator • http://www.page-online.de/emag/typo/artikel/faq_webfonts © Elephant Seven | 150
  • 147. SCHRIFTEN, TECHNISCH: IMAGES Vorteile: • CI-konform • Einfache Lösung • Cross-Platform Nachteile: • Bild muss entweder statisch bleiben oder es ist eine „Renderengine“ nötig • nicht SEO-konform © Elephant Seven | 151
  • 148. SCHRIFTEN, TECHNISCH: SIFR ScalableInman Flash Replacement, per JavaScript wird HTML-Text durch Flash ersetzt Vorteile: • CI-konform • SEO-konform Nachteile: • Nachladen des SWF nötig • unschöne Effekte • Flashplayer nötig • veraltet © Elephant Seven | 152
  • 149. WEITERE GESTALTUNGSELEMENTE. Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wie Animationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wie reagieren Interaktionselemente. Auf der Bühne der Website oder im Onlinemarketing. © Elephant Seven | 153
  • 150. WEITERE GESTALTUNGSELEMENTE. Skyscraper Im Internet spielt die Bewegung und das sog. Look &Feel eine weitere Rolle. Z.B. wie Animationen und Überblendungen stattfinden, welche Art von Musik wird verwendet und wie reagieren Interaktionselemente. Auf der Bühne der Website oder im Onlinemarketing. Der Banner „Name“. Link © Elephant Seven | 154
  • 151. WEITERE GESTALTUNGSELEMENTE. Layer 400x400 Der Banner „Name“. Link © Elephant Seven | 155
  • 152. WEITERE GESTALTUNGSELEMENTE. Landingpage • Aufgeräumtes Erscheinungsbild • Zielgerichtete Userführung • Wenig Kilobyte |
  • 153. Image-Mail: Großes Bild, 1 Aussage und 1 Ziel. Content-Mail: 1 Top-Thema und mehrere kleine Content-Teaser. Landingpage |
  • 154. AGENDA CORPORATE DESIGN. MITTAGSPAUSE. © Elephant Seven | 158
  • 155. GRUPPENARBEIT. Beurteilen Sie anhand dessen, was Sie gerade zu Onlinegestaltung gezeigten die folgenden Beispiele. 3 Gruppen. Zeit 30 Minuten interne Gruppendiskussion. Ziel: Präsentation der Ergebnisse in 5 Minuten pro Gruppe. a) Typo/Farben/Bilder b) Menü/Navigation c) Ungewöhnliches und Gesamteindruck Was ist gelungen und wo ist noch Verbesserungspotential? |
  • 157. GRUPPE 1. Beispiel: Thomas Sabo | Hermès |
  • 158. |
  • 159. |
  • 160. |
  • 161. |
  • 162. |
  • 163. |
  • 164. GRUPPE 1. Beispiel: Thomas Sabo | Hermès |
  • 165. GRUPPE 1. Beispiel: Thomas Sabo | Hermès |
  • 166. GRUPPE 1. Beispiel: Thomas Sabo | Hermès |
  • 167. GRUPPE 1. Beispiel: Thomas Sabo | Hermès |
  • 168. |
  • 169. |
  • 170. GRUPPE GRIFFEL VS. SCHREIBGERÄT Graf v. Faber-Castell | Montblanc |
  • 171. GRUPPE 2. |
  • 172. GRUPPE 2. |
  • 173. GRUPPE 2. |
  • 174. GRUPPE 2. |
  • 175. GRUPPE 2. |
  • 176. GRUPPE 2. |
  • 177. GRUPPE 2. |
  • 178. GRUPPE 2. |
  • 179. GRUPPE 2. |
  • 180. |
  • 181. |
  • 182. |
  • 183. |
  • 184. |
  • 185. |
  • 186. |
  • 187. |
  • 188. |
  • 189. GRUPPE ZUCKERSPIEGEL Bendicks | Werthers Original US |
  • 190. |
  • 191. |
  • 192. |
  • 193. |
  • 194. |
  • 195. |
  • 196. |
  • 197. |
  • 198. |
  • 199. |
  • 201. AGENDA CORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 205
  • 202. 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
  • 203. MARKENWEBSITE. HAPAG LLOYD KREUZFAHRTEN. © Elephant Seven | 207
  • 204. 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 Layout transportieren. 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
  • 205. Navigation Bildhorizont Floater mit News und Teasern | © Elephant Seven 209 Footer
  • 206. Navigation Bildhorizont Floater mit News und Teasern | © Elephant Seven 210 Footer
  • 207. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 211
  • 208. |
  • 209. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 213
  • 210. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 214
  • 211. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 215
  • 212. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | © Elephant Seven 216
  • 213. |
  • 214. |
  • 216. (Hier iPad rausholen) | © Elephant Seven 220
  • 217. 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
  • 218. CORPORATE WEBSITE. DEUTSCHE POST DHL. © Elephant Seven | 222
  • 219. 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
  • 220. Logo Navigation Suche Bühne Chart Aktienkurs, Pressemitteilungen, Teaser Footer |
  • 221. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 225
  • 222. |
  • 223. |
  • 224. 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
  • 225. MICROSITE. NIMM2 VON STORCK. © Elephant Seven | 229
  • 226. 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
  • 227. |
  • 228. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 232
  • 229. 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
  • 230. ONLINE SHOP. AMAZON. © Elephant Seven | 234
  • 231. DER PERFEKTE SALESFUNNEL. Im Mittelpunkt stehen die Produkte. Die Marke Amazon wird fast ausschließlich durch funktionale 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öllig Das Besondere: Was Amazon macht, wird schnell von anderen übernommen. So setzt Amazon die Standards anstatt anderen zu folgen. © Elephant Seven | 235
  • 232. Logo Großes Suchfeld Warenkorb Kategorien- Navigation Produktempfehlungen Aktionen Aktionen |
  • 233. |
  • 234. |
  • 235. |
  • 236. |
  • 237. 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
  • 238. LANDINGPAGE 1. DRIFT. © Elephant Seven | 242
  • 239. CALL TO ACTION IM MITTELPUNKT. Mal eben einen Banner geklickt oder von Check24.de hierher gesprungen, sieht der User sofort, 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
  • 240. Logo und Hauptnavigation Call to Action Marke Vorteile Zertifizierungen und Partner |
  • 241. |
  • 242. TECHNISCH: LANDINGPAGES • Optimierung des Ladeverhaltens • Muss immer und überall funktionieren • Beispiel Drift Landingpage: • 412 KB © Elephant Seven | 246
  • 243. LANDINGPAGE 2. ITZDIRECT24. © Elephant Seven | 247
  • 244. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 248
  • 245. LANDINGPAGE 3. NEXUS. © Elephant Seven | 249
  • 246. (Hier Layouts der unterschiedlichen Motive auf der Homepage) | 250
  • 247. MAGAZIN 1. BOSS. © Elephant Seven | 251
  • 248. 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
  • 249. Logo und Hauptnavigation Magazin- Navigation Top-Thema Social Teaser für weitere Themen |
  • 250. |
  • 251. |
  • 252. |
  • 253. 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
  • 254. MAGAZIN 2. SCHWARZKOPF.DE © Elephant Seven | 258
  • 255. |
  • 256. |
  • 257. |
  • 258. AGENDA CORPORATE DESIGN. KAFFEEPAUSE. 10MIN. © Elephant Seven | 262
  • 259. PREVIEW. Samstag erarbeiten sie anhand Schematics: a) die neue nimm2.de b) die Landingpage der Einführungskampagne des neuen SLK |
  • 260. AGENDA. OHNE WORTE. © Elephant Seven | 264
  • 261. ? |
  • 262. ? | © Elephant Seven 266
  • 263. ? | © Elephant Seven 267
  • 264. ? | © Elephant Seven 268
  • 265. ? | © Elephant Seven 269
  • 266. ? | © Elephant Seven 271
  • 269. „PS DESASTERS“. © Elephant Seven | 274
  • 271. | 276
  • 272. | 277
  • 273. | 278
  • 274. | 279
  • 276. WIR FREUEN UNS AUF IHR FEEDBACK. © Elephant Seven | 281
  • 277. IMPRESSUM. Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der Elephant 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 GmbH Gerhofstraße 1-3 D-20354 Hamburg +49 40 34 101-400 +49 40 34 101-101 www.e-7.com © Elephant Seven | 282