Webdesign für Blogger

of 70 /70
Dein Blog und was das mit Webdesign zu tun hat

Transcript of Webdesign für Blogger

Page 1: Webdesign für Blogger

Headline 1234Subline 5678Dein Blog

und was das mit Webdesign zu tun hat

Page 2: Webdesign für Blogger

Headline 1234Subline 5678

Gude, ich bins#Webdesigner#Selbständig

#Fachbuchautor#Dozent#Papa

……

und auch #Blogger

Page 3: Webdesign für Blogger

Verschiedene Entwicklungenin den letzten Jahren:

Internet immer und überall.Konsumverhalten ändert sich.

Alles ist mobil.

Page 4: Webdesign für Blogger

Und bei Blogs:

Blogosphäre weitet sich aus.Blogs werden professioneller.

Hinz und Kunz bloggen.

Page 5: Webdesign für Blogger

Und jetzt kommst auch noch du…

Page 6: Webdesign für Blogger

https://conterest.de/wie-viele-blogs-gibt-es-zahlen-statistiken/http://www.osk.de/blog/leipzig-deine-blogger-grosses-bewusstsein-fuer-politik-und-gesellschaft

http://www.heldenstadt.de/leipzigblogger/

Ein paar Zahlen für Deutschland:

6.000 Modeblogs2.000 Mamablogs

120 Vaterblogs200 Familienblogs1.000 Foodblogs1.200 Reiseblogs

180 Blogs aus Leipzig

Page 7: Webdesign für Blogger

Dein Blog

Die Blogosphäre

Page 8: Webdesign für Blogger

Auf geht´s

Ein (Blog-)Stern, der deinen Namen trägt…

Page 9: Webdesign für Blogger

DEIN BLOGDeine Strategie

Deine PositionierungDein Elevator Pitch

Page 10: Webdesign für Blogger

Mach dein eigenes Briefing.

Entwickle deine eigene Strategie.

Page 11: Webdesign für Blogger

Welche Themen bearbeite ich?Welche Schwerpunkte haben meine Artikel?

Wie oft veröffentliche ich?Welchen Schreibstil habe ich?

Welche Vermarktungs-Maßnahmen mache ich bisher?Welche sozialen Netzwerke bediene ich?

Wie finden meine Leser zu mir?Warum blogge ich?

Was erhoffe ich mir dadurch?Was gibt mir das bloggen?

Welche konkreten Ziele setze ich mir für meinen Blog?…

Page 12: Webdesign für Blogger

Wunschleser

Zielgruppenanalyse

Personas entwickeln

Page 13: Webdesign für Blogger

Die Konkurrenz

Page 14: Webdesign für Blogger

Mal bei der „Konkurrenz“ vorbei schauen:

Name? Untertitel?Inhalte? Design?

Marketing?Technik?

Leser?

Page 15: Webdesign für Blogger

Vom Guten lernen,

das Schlechte besser machen.

Page 16: Webdesign für Blogger

Dein Blog,

die (potentiellen) Leser

und die Konkurrenz

stehen in direktem Zusammenhang.

Page 17: Webdesign für Blogger

DEIN BLOG

Page 18: Webdesign für Blogger

Deine PositionierungFoodblog

Veganer Foodblog

Veganer Foodblog für Ü50 Frauen

Veganer Foodblog für Ü50 Frauen aus LeipzigVeganer Foodblog für Ü50 Single-Frauen aus Leipzigs Westen mit Hund und Beamtenstatus

Page 19: Webdesign für Blogger

WARUM + WER + WAS + WIE =

deine MARKE

Page 20: Webdesign für Blogger

Sei eindeutig

&

unmißverständlich

Page 21: Webdesign für Blogger

ACHTUNG!

Leser droht mit Besuch

Page 22: Webdesign für Blogger

Erster EindruckSchublade auf

Page 23: Webdesign für Blogger

Minimaloder warum weniger nicht immer mehr ist.

Page 24: Webdesign für Blogger
Page 25: Webdesign für Blogger

Look & FeelLogo, Farben, Bilder, Gesamtstuktur & Ladezeit

Page 26: Webdesign für Blogger

OrientierungsphaseWorum geht es hier?

Was bringt mir das?

Wer ist der „Anbieter“?

Kann ich ihm trauen?

Page 27: Webdesign für Blogger

Erster Eindruck

Bleibt Gehtoder

Page 28: Webdesign für Blogger

Wie lange bleibt er wohl?Nicht lange… nicht sehr lange…

http://www.statisticbrain.com/attention-span-statistics/

Page 29: Webdesign für Blogger

F O LG E :Blog wirkt schon,

bevor die ersten Inhalte gelesen werden.

Page 30: Webdesign für Blogger

Webdesign ist kein Selbstzweck

Es geht um nichts anderes, als das Überleben deines Blogs!

Page 31: Webdesign für Blogger

K O N S E Q U E N Z E N

Page 32: Webdesign für Blogger

Seite scannbar machen

Überblick bieten

Hierarchien schaffen

Highlights setzen

Page 33: Webdesign für Blogger

Texte scannbar machenÜberschriften, Zwischenüberschriften

Textauszeichnungen, Zitate, Auflistungen

Bilder & Links

Page 34: Webdesign für Blogger
Page 35: Webdesign für Blogger

Erste Wirkungstreffer:

Optische Gestaltungsmittel

+

Erste redaktionellen Inhalte

Page 36: Webdesign für Blogger

Startseite =COVER

Nicht nur Inhaltsverzeichnis

Page 37: Webdesign für Blogger

Bild effektivlaufen.de

Page 38: Webdesign für Blogger

Die Positionierungdeutlich machen!

Page 39: Webdesign für Blogger

Was der Leser schnell beurteilen kann:

Professionalität (des Auftritts)

Ästhetik

Vertrauen

Branding

Page 40: Webdesign für Blogger

Innerhalb weniger Sekunden sollte der Besucher wissen,

um was es geht und wofür du stehtst.

Page 41: Webdesign für Blogger

„Beliebte“ „Fehler“:

Unübersichtlich

unprofessionell

gleichartig / austauschbar

unleserlich

Page 42: Webdesign für Blogger

So geht Webdesign heute:

Page 43: Webdesign für Blogger

INUTITIV BEDIENBAR(Usability)

„Ich will nicht nachdenken müssen.“

Page 44: Webdesign für Blogger

LESBAR

Page 45: Webdesign für Blogger

SchriftartenLesbar ! ! !

http://www.webdesign-journal.de/7-methoden-fuer-schriftarten-21-google-webfonts-kombinationen/

Page 46: Webdesign für Blogger

Schriftgrößen…größer machen.

> 14 Pixel, mindestens

> 16 Pixel, mindestens

Page 47: Webdesign für Blogger

Zeilenabstand…größer machen.

line-height: 1.5

bis

line-height: 1.7

Page 48: Webdesign für Blogger

ZeilenlängeRichtwert: 60 – 80 Zeichen pro Zeile

ca. 500 – 600 Pixel Breite

Page 49: Webdesign für Blogger
Page 50: Webdesign für Blogger

SchriftfarbenAuf ausreichenden Hell-Dunkel-Kontrast

zwischen Hintergrund- und Textfarbe achten

Page 51: Webdesign für Blogger
Page 52: Webdesign für Blogger

Texte gliedern&

scannbar machen

Page 53: Webdesign für Blogger

RESPONSIVEAuf jedem Gerät intuitiv bedienbar und lesbar.

Page 54: Webdesign für Blogger

LADEZEIT BEACHTEND

https://tools.pingdom.com/

Page 55: Webdesign für Blogger

BILDER„…sind schnelle Schüsse ins Gehirn.“

Page 56: Webdesign für Blogger

Quellenhttp://www.webdesign-journal.de/foto-webseiten-mit-kostenfreien-kommerziell-nutzbaren-und-hochwertigen-bildern/

Page 57: Webdesign für Blogger

Motivehttp://www.webdesign-journal.de/individuelle-bildmotive/

Page 58: Webdesign für Blogger
Page 59: Webdesign für Blogger

FARBENMut zur Farbe.

Mut zu deiner Farbe.

Page 60: Webdesign für Blogger

Farben im Einsatzhttp://www.webdesign-journal.de/branding-farbe-webdesign/

Page 61: Webdesign für Blogger
Page 62: Webdesign für Blogger

DEIN BLOGDESIGNübersichtlich & lesbar

wiedererkennbar

intuitiv bedienbar

Page 63: Webdesign für Blogger

Headline 1234Subline 5678

Dein Blog-Branding sorgt

für Vertrauen & Glaubwürdigkeit.

Page 64: Webdesign für Blogger

Headline 1234Subline 5678

GUTES WEBDESIGNist eine Komposition aus vielen Faktoren

Page 65: Webdesign für Blogger

Individuell & persönlich

GUTES WEBDESIGNkann ein großer Baustein

für den Erfolg deines Blogs sein.

Page 66: Webdesign für Blogger

Headline 1234Subline 5678

Geduldig sein.Lieber regelmäßig optimieren, als der eine große Relaunch.

Page 67: Webdesign für Blogger

Sei wiedererkennbar

& einzigartig

auch über die Kanäle hinweg!

Page 68: Webdesign für Blogger

Und dann?

Page 69: Webdesign für Blogger

Dann leuchtet er, DEIN Blog-Stern

Page 70: Webdesign für Blogger

Headline 1234Subline 5678

Mehr dazu:www.webdesign-journal.de

Martin Hahn | webdesign-journal.de