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 GruppeElephant Seven Hamburg

| 3|© Elephant Seven

AGENDA.

1. Vorstellung und Einleitung

2. Warum Kommunikationsdesign?

3. Corporate Design

4. Online Design

5. Aufgabe Vergleich Websites

6. Websitetypen und Schematics

© Elephant Seven 4|

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


ELEPHANT SEVEN

HAMBURG

PIXELPARK AGENTUR

KÖLN

YELLOW TOMATO

HAMBURG

ELEPHANT SEVEN NET TECHNOLOGIES HAMBURG

PIXELPARK AGENTUR

BERLIN

YELLOW TOMATO

MÜNCHEN

ELEPHANT SEVEN ESPAÑA

BARCELONA

PIXELPARK AGENTUR

HAMBURG

PIXELPARK AGENTUR

ZÜRICH/SCHWEIZ

PIXELPARK AGENTUR

BIELEFELD

NETZWERK.

ELEPHANT SEVEN

HAMBURG GMBH

PIXELPARK AG

STANDORT KÖLN

YELLOW TOMATO GMBH

(HAMBURG)

PIXELPARKNET TECHNOLOGIES GMBH

PIXELPARK AG

STANDORT BERLIN

ELEPHANT SEVEN ESPAÑA S.A.U

(BARCELONA)

PIXELPARK AGENTUR

HAMBURG

PIXELPARK SCHWEIZ AG

PIXELPARK BIELEFELD GMBH


UNSERE POSITIONIERUNG.

ELEPHANT SEVEN IST DIE KREATIVE ACROSS-THE-LINE AGENTUR FÜR EINE VERNETZT DENKENDE WELT.

|

DIGITAL

POSTER

PRINT

ONLINE

DISPLAY

SOCIAL

MOBILE

POS

Messe

EVENT

E-COMMERCE

Verkaufs-

förderung

DIRECT

CRM

COACHING

VIRAL

CORPORATE

SITES

AMBIENT

Inhouse PP-Netzwerk On-demand

SEO

PLANNING

SEA

TV


KUNDEN UNIT HH.


KUNDEN UNIT HH, FF.

Bild durch Klicken auf Symbol hinzufügen

Bild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügen

Bild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügen

Bild durch Klicken auf Symbol hinzufügenBild durch Klicken auf Symbol hinzufügen


SOFTWAREPARTNERSCHAFTEN.*

*des Pixelparkkonzerns


DARAUF SIND WIR STOLZ.*

*557 x Gold, Silber oder Bronze und keinmal Kupfer


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 Creative Director

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, Lead Award, Eurobest,

Onlinestar


TIM SCHRÖDER. SENIOR WEB DEVELOPER.

Seit 1996:

Front- und Backendseitige Webentwicklung in verschiedenen Agenturen

2006: Web Developer bei Elephant Seven GmbH

2007: Abschluss/Diplom Studium „Informationstechnologie und Gestaltung international“, FH Lübeck

2008: Senior Web Developer bei 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.

| 19

JEDER WIRD TÄGLICH MIT 2.500 BIS 5.000 (WM)WERBE-BOTSCHAFTEN KONFRONTIERT.

| 20

FB-“ZWECK“-SEITEN HABEN 5.3 MILLIARDEN FANS GENERIERT.

| 21© Elephant Seven

DIE ZAHL DER AUF FACEBOOK „GETEILTEN“ INFO-BITS (LINKS, STORIES, BLOGPOSTS,...)PRO WOCHE: 3,5 MILLIARDEN


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.


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

AUSFLUG IN DIE WISSENSCHAFT. SELEKTIVE WAHRNEHMUNG.

|

EIN AUFMERKSAMKEITS-TEST.

28© Elephant Seven

30|© Elephant Seven

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:

(Auszug „Die Tachometer-Methode“).

SPONTANE, HOHE AUFMERKSAMKEIT.

VERMITTLUNG DER BOTSCHAFT IN WENIGEN SEKUNDEN

SOFORTIGEVERSTÄNDLICHKEIT

HOHE EINPRÄGSAMKEIT

SYMPATHIE UND ÜBERZEUGUNGSKRAFT AUF DENERSTEN BLICK.


•Prüfung der Verständlichkeit einzelner

Anzeigenelemente

•Verständlichkeit der Gesamtanzeige

•Widersprüchlichkeit zwischen Text und Bild

•Verständlichkeit des Bildes

•Richtung der durch das Bild ausgelösten

Assoziationen

•Eigenständigkeit des Bildes

•Prägnanz der Abbildung des Produktes

•Verständlichkeit der Headline

•Missverständlichkeit der Headline

•"Langsame" Formulierungen

•Verständlichkeit des Fließtextes

•Prüfung des Aktivierungspotentials

•Aktivierungspotential des Bildes

•emotionales Aktivierungspotential

•kognitives Aktivierungspotential

• physisches Aktivierungspotential

•Aktivierungsprofil des Bildes

•Aktivierungspotential der Headline

•Aktivierungspotential der Schrift

•Kontrastreichtum und Prägnanz der Headline

•emotionales Aktivierungspotential der Headline

EINE MÖGLICHKEIT, WERBEWIRKUNG ZU MESSEN.


•Prüfung der Informationsaufnahme

•Informationsaufnahme der Gesamtanzeige

•horizontale Anordnung der Texte zum zentralen

Bildelement

•vertikale Anordnung der Texte zum zentralen

Bildelement

•verzichtbare Bilder oder Texte

•Informationsaufnahme des Bildes

•Informationsaufnahme der Headline

•Informationsaufnahme des Absenders

•Größengestaltung des Markennamens

•Markennamen in der Headline

•Platzierung des Absenders an üblicher Stelle

•auffällige Platzierung und Gestaltung des

Absenders

•Informationsaufnahme des Fließtextes

•Kürzungsmöglichkeiten des Fließtextes

•formale Gestaltung des Fließtextes

•Informationsaufnahme von doppelseitigen

Anzeigen

•Prüfung der anderen Komponenten

•Informationsspeicherung

•Einstellungswirkung

EINE MÖGLICHKEIT, WERBEWIRKUNG ZU MESSEN. FF.

|

PRÜFUNG DER INFORMATIONSAUFNAHME.

34© Elephant Seven

|

Ausgaben vs. Media-Coverage.

MUSTER

|

Insert layouts by click on icon, layouts need to be delivered in 1024 x 768 px!

Der U-Bahn Plan von Oslo.

|

Der neue U-Bahn Plan von Oslo.

|

Timecode ->

||

US-AUSGABEN VS. MEDIEN ERWÄHNUNG.

Ausgaben vs. Media-Coverage.


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

DATEN ZUR BETRACHTUNGSDAUER.


„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 überprüfen, wie sich das Corporate Design im Sinne der Positionierung mit

den digitalen Möglichkeiten optimal weiterfü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

überzeugend unsere Markenpositionierung und unsere Historie. The Star always shines from

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


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


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


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.


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.


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.


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.


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.


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.


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.


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.


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 fü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 nuchtern, formal bis

dekorativ usw. Deshalb ist es keinesfalls egal, welche Schrift zum Einsatz kommt.

Text: mhplus.de


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


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 Buchern 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 uberall

einsetzbar.


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.


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 uberall

gewährleistet.

Die Fotografien unterstreichen den Fuhrungsanspruch 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.“


BILDSPRACHE MERCEDES-BENZ.


UND JETZT ALLE ZUSAMMEN:


AGENDA



AGENDA.

ONLINE DESIGN.

|© Elephant Seven 128

||

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)

und der Standardelemente.

Gestaltungsraster wie in Print.

||

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


IM DETAIL.

Buttons

PulldownsTooltips

Navi/Tab

Eingabefelder

Film Navigation

Interaktions-Elemente


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.

Designed by Matthew Carter and handhinted

by leading hinting expert, Monotype's Tom

Rickner.The Verdana fonts are stripped of

features redundant when applied to the

screen.They exhibit new characteristics,

derived from the pixel rather than the pen,

the brush or the chisel. The balance

between straight, curve and diagonal has

been meticulously tuned to ensure that

the pixel patterns at small sizes are

pleasing, clear and legible.


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


SYSTEMSCHRIFTEN.

Selbst ausprobieren unter:

http://typetester.maratz.com/




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


SCHRIFTEN UND HTML

Technologie Beschreibung Vorteile Nachteile

Systemfonts schnellste Variante, läuft überall

Nur allgemein verbreitete Fonts, nicht CI-konform

Webfonts Einbindung von Fonts via CSS

Hausschriften möglich, dynamische Befüllung,

ggf. Lizenzen, Ladezeit, aufwendige Einbindung

Imagegenerierung Schrift wird als Bild dargestellt

Hausschriften möglich, sieht überall gleich aus

Nur aufwendig dynamisierbar, nicht SEO

Sifr*(Scalable Inman Flash Replacement)

Schrift wird automatisch durch Flash ersetzt

Hausschriften möglich

nicht sehr stabil, Flash nötig


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

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

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



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

Der Banner „Name“. Link



Layer 400x400

Der Banner „Name“. Link

|


Landingpage

• Aufgeräumtes Erscheinungsbild

• Zielgerichtete Userführung

• Wenig Kilobyte

|

Landingpage

Image-Mail: Großes Bild, 1 Aussage und 1 Ziel.

Content-Mail: 1 Top-Thema und mehrere kleine Content-Teaser.


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) Menu/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 GRIFFEL VS. SCHREIBGERÄT

Graf v. Faber-Castell | Montblanc

|

GRUPPE 2.

||

GRUPPE ZUCKERSPIEGEL

Bendicks | Werthers Original US

||

ERGEBNISPRÄSENTATIONEN.


AGENDA



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


Bildhorizont

Footer

Navigation

Floater mit News und Teasern


(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 Mega Flyout

- Nutzen der gesamten Breite für Content

- Marginalspalte für Kontakt und Related Links

|

Bühne

Footer

Logo Navigation Suche

Chart Aktienkurs, Pressemitteilungen, Teaser

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

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.

|

Produktempfehlungen Aktionen

Großes Suchfeld Warenkorb

Logo

Kategorien-

Navigation

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

|

Marke

Call to Action

Logo und Hauptnavigation

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

|

Top-Thema

Teaser für weitere Themen

Logo und Hauptnavigation

Social

Magazin-

Navigation


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


||

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

|

276

|

277

|

278

|

279


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

Documents

Transcript of Ostfalia Webdesign Theorie Block 1