Ostfalia Webdesign Theorie Block 1

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.


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


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


UNSEREPOSITIONIERUNG.
ELEPHANT SEVEN IST DIE KREATIVE
ACROSS-THE-LINE
AGENTURFÜREINEVERNETZTDENKENDE
WELT.


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.


KUNDEN UNIT HH, FF.


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


APROPOS „SENIOR“. WAS BEDEUTEN DIE TITEL
IN EINER AGENTUR?


AGENDA.
WARUM KOMMUNIKATIONSDESIGN?


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

DIE INFORMATIONSÜBERLASTUNG
BEI ZEITSCHRIFTEN BETRÄGT
94%. NUR 6% ALLER IN
ZEITSCHRIFTEN PRÄSENTIERTEN
INFORMATIONEN WERDEN VON
DEN LESERN WAHRGENOMMEN. |

IM BESTEN FALL KÖNNEN ZEHN BIS
ZWANZIG WERBEBOTSCHAFTEN AM
TAG BEWUSST WAHRGENOMMEN
WERDEN. ZWEI BIS DREI LÖSEN IRGENDETWAS IM KOPF AUS.
|

SCHÄTZEN
SIE, WIE VIELE VON
100 TV-UND FUNK
SPOTS BEWUSST
WAHRGENOMMEN
WERDEN: |

ANTWORT:
ZWEI BIS DREI.

|

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


EIN AUFMERKSAMKEITS-TEST.


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.


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


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


PRÜFUNG DER INFORMATIONSAUFNAHME.


Ausgaben vs. Media-Coverage.

|

Der U-Bahn Plan von Oslo.

|

Der neue U-Bahn Plan von Oslo.

|

US-AUSGABEN VS. MEDIEN ERWÄHNUNG.

Ausgaben vs. Media-Coverage. |

DATEN ZUR BETRACHTUNGSDAUER.
Die durchschnittliche Betrachtungsdauer von Anzeigen sind 2,2 Sekunden.
In Monatsmagazinen sind 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.)


„SOFORTIGE VERSTÄNDLICHKEIT“.


„WIDERSPRÜCHLICHKEIT“?


„HOHE EINPRÄGSAMKEIT UND
EIGENSTÄNDIGKEIT DES BILDES“?


„VERSTÄNDLICHKEIT DES BILDES?“


AGENDA

CORPORATE DESIGN.
KAFFEEPAUSE. 10MIN.


AGENDA.

CORPORATE DESIGN.


„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 überprüfen, wie sich das Corporate Design im Sinne der Positionierung mit
den digitalen Möglichkeiten optimal weiterführen lässt.


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
überzeugend unsere Markenpositionierung und unsere Historie. The Star
alwaysshinesfromaboveist unsere Leitidee. Das gilt für das Brand Design wie für die Marke.
Der Stern ist das zentrale Symbol für Mercedes-Benz. Er weist uns den Weg. Daher steht er im
neuen Brand Design immer oben.“ schreibt Mercedes-Benz.


DESIGN AM BEISPIEL LOGO.


DESIGNENTWICKLUNG.


BELIEBTE LOGOS.
Achtung, es wird bunt.


LOGO WORTMARKE.


LOGO METAPHER.


DAS LOGO IM INTERNET. AKUTE BUBBELITIS.


DAS LOGO IM INTERNET.


LOGO WIEDERERKENNUNGSWERT.


CORPORATE DESIGN MERCEDES-BENZ 2008.


WETTBEWERBER.


CORPORATE DESIGN.


FARBEN.


ROT IST DIE FARBE DES FEUERS.
Sie erregt Aufmerksamkeit, steht für Vitalität und Energie, Liebe und Leidenschaft.
Sie kann jedoch auch aggressiv und aufwü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 fü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


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


GRÜ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 Gefühle wie Neid, Gleichgültigkeit,
Stagnation und Müdigkeit vermitteln.


CYAN.
In der Umgangssprache auch Tü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 kühl und distanziert wirken und ein
Gefühl von Leere vermitteln.


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


VIOLETT IST EINE WÜ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.


MAGENTA.
Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. In der Natur
erleben wir sie hauptsächlich als Farbe von Blüten. Sie steht für Idealismus, Dankbarkeit,
Engagement, Ordnung und Mitgefühl. Sie hat aber auch etwas von Snobismus, Arroganz
und Dominanz.


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 kühler Reserviertheit.


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


PRIMÄRFARBEN MERCEDES-BENZ.

Interpretation bitte! Kompetenz


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 für Medienoberflächen
(Bildschirmoberflächen); typographisch (typografisch) (Adj.)
(Druckwesen): die Typographie betreffend;


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 nüchtern, formal bis
dekorativ usw. Deshalbist es keinesfalls egal, welche Schrift zum Einsatz kommt.
Text: mhplus.de


TYPOGRAFIE.
Ein Gedicht, ein Lesestück wird vom Vortragenden durch
Modulation seiner Stimme beeinflusst. Er kann Gefühle hörbar
machen – Schrift soll diese sichtbar machen!
Zwei grundsätzliche Schriftarten stehen zur Auswahl.

1. Serifenschrift: Antiqua
2. Serifenlose Schrift: Grotesk


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 Büchern auf.
Diese Schrift wird dann gerne
genommen, wenn es um
bestmögliche Lesbarkeit geht.


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 überall
einsetzbar.


ANEKDOTE „GROTESK“.
Die Bezeichnung „Grotesk“ rührt daher, dass das Kleinbü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.


WAS STIMMT HIER NICHT?


AUFLÖSUNG.


TYPOGRAFIE MERCEDES-BENZ.
Interpretation bitte.

Interpretation bitte!


TYPO VERMASSUNG.


TYPO WEITERE DEFINITIONEN.


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 überall
gewährleistet.
Die Fotografien unterstreichen den Führungsanspruch der Marke Mercedes-Benz durch
besondere Qualität. Ihre Komposition ist großzügig, das Licht perfekt. Kleinteilige Aufnahmen
und Schnappschüsse sind nicht erwünscht.“


BILDSPRACHE MERCEDES-BENZ.


UND JETZT ALLE ZUSAMMEN:


AGENDA

CORPORATE DESIGN.
KAFFEEPAUSE. 10MIN.


AGENDA.

ONLINE DESIGN.


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?“


Buttons
Navi/Tab

IM DETAIL.
Eingabefelder
Interaktions-
Elemente

Film Navigation

Tooltips Pulldowns


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.


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.


IM DETAIL.


EIN STYLEGUIDE BEISPIEL
http://bannertool.de/upload/itze/styleguide/


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.


SYSTEMSCHRIFTEN.
Fü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


SYSTEMSCHRIFTEN.

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


SCHRIFTEN IN FLASH.

In den Flashspecials werden die jeweiligen Schriften nachgeladen. Hierbei wird fü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ß.

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


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


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


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


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.


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



Layer 400x400

Der Banner „Name“. Link



Landingpage
• Aufgeräumtes Erscheinungsbild
• Zielgerichtete Userfü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.


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

|

GRUPPE ZUCKERSPIEGEL
Bendicks | Werthers Original US

|

ERGEBNISPRÄSENTATIONEN.

|

AGENDA

CORPORATE DESIGN.
KAFFEEPAUSE. 10MIN.


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


MARKENWEBSITE.

HAPAG LLOYD KREUZFAHRTEN.


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


Navigation

Bildhorizont

Floater mit News und Teasern

|
Footer

(Hier Layouts der unterschiedlichen Motive auf der Homepage)

|


|

(Hier iPad rausholen)

|

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


CORPORATE WEBSITE.

DEUTSCHE POST DHL.


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


Logo Navigation Suche

Bühne

Chart Aktienkurs, Pressemitteilungen, Teaser

Footer

|


| 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


MICROSITE.

NIMM2 VON STORCK.


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



| 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


ONLINE SHOP.

AMAZON.


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.


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


LANDINGPAGE 1.

DRIFT.


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


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


LANDINGPAGE 2.

ITZDIRECT24.



| 248

LANDINGPAGE 3.

NEXUS.



| 250

MAGAZIN 1.

BOSS.


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


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


MAGAZIN 2.

SCHWARZKOPF.DE


AGENDA

CORPORATE DESIGN.
KAFFEEPAUSE. 10MIN.


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

|

AGENDA.

OHNE WORTE.


?

|

? |

?

|

?
|

„PS DESASTERS“.


WIR FREUEN UNS AUF IHR FEEDBACK.


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


Ostfalia Webdesign Theorie Block 1

Weitere ähnliche Inhalte

Andere mochten auch (20)

Ähnlich wie Ostfalia Webdesign Theorie Block 1 (20)

Ostfalia Webdesign Theorie Block 1