Más contenido relacionado Similar a Ostfalia Webdesign Theorie Block 1 (20) Ostfalia Webdesign Theorie Block 11. 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
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
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 |
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
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
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
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
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
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
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
87. DAS LOGO IM INTERNET. AKUTE BUBBELITIS.
© Elephant Seven | 91
88. DAS LOGO IM INTERNET.
Achtung, es wird bunt.
© Elephant Seven | 92
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
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
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
131. IM DETAIL.
Logoposition links ist die
historisch gewachsene
„sicherste“ Position, da sie in
skalierendem Layout bei allen
Browsergrößen im sichtbaren
Bereich liegt.
|
133. IM DETAIL.
In diesem Fall verlängert sich die Website nach rechts.
Der Flexible Bereich muss definiert werden.
|
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
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
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
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?
|
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
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
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
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
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
|
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
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
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
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
|
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
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
242. TECHNISCH: LANDINGPAGES
• Optimierung des Ladeverhaltens
• Muss immer und überall funktionieren
• Beispiel Drift Landingpage:
• 412 KB
© Elephant Seven | 246
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
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
262. ?
|
© Elephant Seven 266
263. ? |
© Elephant Seven 267
264. ?
|
© Elephant Seven 268
265. ?
|
© Elephant Seven 269
266. ?
|
© Elephant Seven 271
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