Internetseiten werbewirksam gestalten
Internetseiten werbewirksam gestalten
Internetseiten werbewirksam gestalten
Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.
YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.
<strong>Internetseiten</strong> <strong>werbewirksam</strong> <strong>gestalten</strong><br />
Ein Vortrag über Strukturen, Inhalte, Technologien, Bilder<br />
und ihre Bildsprache anhand von Design-Trends<br />
Präsentation vom 22.11.11, Henning F. Mettge
Gegründet 2003 in Bochum
Kommunikationsagentur.
Leistungsschwerpunkte allgemein<br />
Kommunikationsstrategien<br />
Kampagnenleitung<br />
Design und Kreation<br />
PR und Redaktion<br />
Events und Promotion<br />
Entwicklung (Web und Mobile)<br />
Online-Marketing<br />
Video und Multimedia<br />
Schwerpunkte Entwicklung
<strong>Internetseiten</strong> <strong>werbewirksam</strong> <strong>gestalten</strong><br />
Ein Vortrag über Strukturen, Inhalte, Technologien, Bilder<br />
und ihre Bildsprache anhand von Design-Trends
Agenda<br />
- Design<br />
- Strukturen<br />
- Inhalte<br />
- Bildsprache<br />
- Technologien<br />
- Trends und Anwendungsbeispiele
Design<br />
- Design-Elemente<br />
- Wichtige Faktoren eines guten Designs
Design / Design-Elemente<br />
- Farben<br />
- Schrift<br />
- Logo<br />
- Menü<br />
- Bilder<br />
- Formatierungen wie Links, Fettigkeiten, Zeilenhöhe,...<br />
- Buttons<br />
- Hintergründe
Design / Design-Elemente / Farben<br />
- Farben beeinflussen die Stimmung<br />
- Farben werden unbewusst verarbeitet<br />
- Farb-Bedeutungen sind kulturabhängig<br />
- Farben können Handlungsaufforderungen unterstützen<br />
+ Leidenschaft<br />
+ Liebe<br />
- Aggression<br />
- Warnung<br />
- Kühle<br />
- Distanz<br />
+ Sachlichkeit<br />
+ Seriosität<br />
+ Fröhlichkeit<br />
+ Kraft<br />
- Neid<br />
- Hass
Design / Design-Elemente / Schrift<br />
- Schriften wirken essenziell (z.B. im Logo)<br />
- Serifen-Schriften, serifenlose Schriften<br />
- Die Schrift prägt das Gesamtbild mit<br />
The quick brown fox jumps over the lazy dog<br />
=> Schreibmaschinen-Stil: älter, solide, bekannt<br />
The quick brown fox jumps over the lazy dog<br />
=> Techno-Stil: Kapitälchen, gerade, Kontinuität<br />
The quick brown fox jumps over the lazy dog<br />
=> Schreibschrift: persönlich, dynamisch, schwer lesbar<br />
�e quick brown fox jumps over the lazy dog<br />
=> Buch-Stil: medial, klassisch
Design / Design-Elemente / Logo<br />
- Logo<br />
- reines Schrift-Logo<br />
- Schrift-Logo mit individueller / bearbeiteter Schrift<br />
- Logo mit Signet
Design / Design-Elemente / Menü<br />
- Menüarten<br />
- Text-Menü<br />
- Text auf Grafik<br />
- Menü-Grafiken
Design / Design-Elemente / Bilder<br />
- Bilder<br />
- Eyecatcher<br />
- Schmuckbilder<br />
- Inhaltsbilder
Design / Design-Elemente / Formatierungen<br />
- Formatierungen<br />
- Links<br />
- Fettungen, Kursivitäten, Unterstreichungen<br />
- Schrift: Größen und Weiten<br />
- Zeilen: Höhen und Breiten
Design / Design-Elemente / Buttons<br />
- Buttons<br />
- Image-Buttons<br />
- Link-Buttons<br />
- Formular-Buttons
Design / Design-Elemente / Hintergründe<br />
- Hintergründe<br />
- Unicolor<br />
- Verläufe<br />
- Muster<br />
- Bildhintergründe
Design / wichtige Faktoren<br />
- wichtige Faktoren<br />
- Zielgruppe<br />
- Zieldefinition (CTA, call to action)<br />
- Benutzerführung (Usability)
Strukturen<br />
- Informations-Einheiten<br />
- klassische Struktur (3+1)<br />
- moderne Struktur (3/3)<br />
- innovative Struktur (z.B. 5/5)
Strukturen / Informationseinheiten<br />
- Informationseinheiten<br />
- Header (Kopfzeile)<br />
- Inhaltsbereich<br />
- Footer (Fußzeile)
Strukturen / klassische Struktur<br />
- klassische Struktur: 3+1
Strukturen / moderne Struktur<br />
- moderne Struktur: 3/3
Strukturen / moderne Struktur<br />
- innovative Struktur: 5/5
Inhalte<br />
- Zielgruppe<br />
- Fachsprache und Tonalität<br />
- Textlänge und Absätze<br />
- Suchmaschinenoptimierung
Inhalte / Zielgruppe<br />
- Zielgruppe definieren<br />
- soziodemographisch: z.B. Alter, Geschlecht, Bildung<br />
- verhaltensorientiert: z.B. Surf-Erfahrung<br />
- produktorientiert: z.B. Skistöcke für Skifahrer
Inhalte / Fachsprache und Tonalität<br />
- Fachsprache und Tonalität<br />
- Wie viel Fachsprache darf sein?<br />
- Wie viel Fachsprache muss sein?<br />
- Tonalität<br />
- duzen oder siezen<br />
- Mundart oder hochdeutsch<br />
- Jargon
Inhalte / Textlänge und Absätze<br />
- Textlänge und Absätze<br />
- eine Seite darf scrollbar sein<br />
- ein Text sollte mindestens 250 Wörter umfassen<br />
- ein Text sollte nicht „zu lang“ sein<br />
- alle 5-8 Zeilen sollte ein Absatz „erzwungen“ werden<br />
- alle 2-3 Absätze sollte eine Zwischenüberschrift stehen
Inhalte / Suchmaschinenoptimierung<br />
- Suchmaschinenoptimierung<br />
- ein Text sollte mindestens 250 Wörter umfassen<br />
- im Inhalt sollten alle Schlüsselwörter vorkommen<br />
- der Quelltext einer Seite sollte „robot-tauglich“ sein<br />
- gute Inhalte, gute Inhalte, gute Inhalte
Bildsprache<br />
- die Zielgruppe und ihre Auswirkung auf die Bildsprache<br />
- Was tun bei erklärungsbedürftigen Produkten?
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- die Zielgruppe und ihre Auswirkungen<br />
- Botschaft des Bildes<br />
- Protagonisten<br />
- Körpersprache<br />
- Mimik<br />
- Ort<br />
- Farbgebung
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- die Zielgruppe und ihre Auswirkungen<br />
- Botschaft des Bildes<br />
- Protagonisten<br />
- Körpersprache<br />
- Mimik<br />
- Ort<br />
- Farbe
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- die Zielgruppe und ihre Auswirkungen<br />
- Botschaft des Bildes<br />
- Protagonisten<br />
- Körpersprache<br />
- Mimik<br />
- Ort<br />
- Farbe
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- die Zielgruppe und ihre Auswirkungen<br />
- Wiedererkennung<br />
- Familie vs. Paare<br />
- Junioren vs. Senioren<br />
- Städtetripper vs. Erholende<br />
- ...
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- die Zielgruppe und ihre Auswirkungen<br />
- Kontext<br />
- Frühling/Freude/Zusammenhalt<br />
- Sommer/Strand/Spaß<br />
- Winter/Sport/Herausforderung
Bildsprache / die Zielgruppe und ihre Auswirkungen<br />
- Was tun bei erklärungsbedürftigen Produkten?<br />
- kostenloses Beratungsgespräch oder Infomaterial<br />
- Animation<br />
- Video
Technologien<br />
- Dynamik<br />
- Content-Management
Technologien / Dynamik<br />
- Dynamik<br />
- Javascript für Animationen (Slideshows, Menüs, )<br />
- Regel: Sinn vor Spielerei<br />
- Fazit für Mobile Internet: „Flash ist tot!“
Technologien / Content-Management<br />
- Content-Management<br />
- Was ist ein CMS?<br />
- 5 Gründe für ein CMS<br />
- Redakteure brauchen keine Programmierkenntnisse<br />
- der Zeitaufwand zur Pflege der Inhalte sinkt massiv<br />
- die Suchmaschinenpräsenz erhöht sich in der Regel<br />
- Komfort-Funktionen sind möglich<br />
- ein Redesign ist mit vertretbaren Kosten möglich<br />
- Welches ist das richtige CMS für mich? (eine Auswahl)<br />
- TYPO3 für mittlere Unternehmen und Konzerne<br />
- Wordpress (Blog) für kleine Unternehmen<br />
- Joomla für kleine Unternehmen
Trends und Anwendungsbeispiele<br />
- 3 Beispiele - von den 90ern ins Jahr 2011<br />
- spiegel.de<br />
- yahoo.com<br />
- apple.com<br />
- Anwendungsbeispiele<br />
- crazyfinca.com<br />
- dediekster-juist.de<br />
- naturarena.de<br />
- agv-ruhr-westfalen.de<br />
- audicon.net<br />
- Ihre Seite?
Trends / 3 Beispiele / spiegel.de<br />
1997<br />
2001<br />
2007<br />
2011
Trends / 3 Beispiele / yahoo.com<br />
1997<br />
2001<br />
2007<br />
2011
Trends / 3 Beispiele / apple.com<br />
1997<br />
2001<br />
2007<br />
2011
Trends / Anwendungsbeispiele<br />
- Anwendungsbeispiele<br />
- crazyfinca.com<br />
- dediekster-juist.de<br />
- naturarena.de<br />
- agv-ruhr-westfalen.de<br />
- audicon.net<br />
- Ihre Seite?
Anwendungsbeispiele / crazyfinca.com
Anwendungsbeispiele / dediekster-juist.de
Anwendungsbeispiele / naturarena.de
Anwendungsbeispiele / agv-ruhr-westfalen.de
Anwendungsbeispiele / agv-ruhr-westfalen.de
Anwendungsbeispiele / Ihre Seite?<br />
Die Frage:<br />
Möchte jemand von Ihnen seine Internetplattform unter<br />
die Lupe nehmen lassen?
Vielen Dank für Ihre Aufmerksamkeit!
Change language