Webdesign für Blogger

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

    10-Feb-2017
  • Category

    Design

  • view

    103
  • download

    0

Embed Size (px)

Transcript of Webdesign für Blogger

  • Headline 1234Subline 5678Dein Blog

    und was das mit Webdesign zu tun hat

  • Headline 1234Subline 5678

    Gude, ich bins#Webdesigner#Selbstndig

    #Fachbuchautor#Dozent#Papa

    und auch #Blogger

  • Verschiedene Entwicklungenin den letzten Jahren:

    Internet immer und berall.Konsumverhalten ndert sich.

    Alles ist mobil.

  • Und bei Blogs:

    Blogosphre weitet sich aus.Blogs werden professioneller.

    Hinz und Kunz bloggen.

  • Und jetzt kommst auch noch du

  • 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 fr Deutschland:

    6.000 Modeblogs2.000 Mamablogs

    120 Vaterblogs200 Familienblogs1.000 Foodblogs1.200 Reiseblogs

    180 Blogs aus Leipzig

  • Dein Blog

    Die Blogosphre

  • Auf gehts

    Ein (Blog-)Stern, der deinen Namen trgt

  • DEIN BLOGDeine Strategie

    Deine PositionierungDein Elevator Pitch

  • Mach dein eigenes Briefing.

    Entwickle deine eigene Strategie.

  • Welche Themen bearbeite ich?Welche Schwerpunkte haben meine Artikel?

    Wie oft verffentliche ich?Welchen Schreibstil habe ich?

    Welche Vermarktungs-Manahmen 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 fr meinen Blog?

  • Wunschleser

    Zielgruppenanalyse

    Personas entwickeln

  • Die Konkurrenz

  • Mal bei der Konkurrenz vorbei schauen:

    Name? Untertitel?Inhalte? Design?

    Marketing?Technik?

    Leser?

  • Vom Guten lernen,

    das Schlechte besser machen.

  • Dein Blog,

    die (potentiellen) Leser

    und die Konkurrenz

    stehen in direktem Zusammenhang.

  • DEIN BLOG

  • Deine PositionierungFoodblog

    Veganer Foodblog

    Veganer Foodblog fr 50 Frauen

    Veganer Foodblog fr 50 Frauen aus LeipzigVeganer Foodblog fr 50 Single-Frauen aus Leipzigs Westen mit Hund und Beamtenstatus

  • WARUM + WER + WAS + WIE =

    deine MARKE

  • Sei eindeutig

    &

    unmiverstndlich

  • ACHTUNG!

    Leser droht mit Besuch

  • Erster EindruckSchublade auf

  • Minimaloder warum weniger nicht immer mehr ist.

  • Look & FeelLogo, Farben, Bilder, Gesamtstuktur & Ladezeit

  • OrientierungsphaseWorum geht es hier?

    Was bringt mir das?

    Wer ist der Anbieter?

    Kann ich ihm trauen?

  • Erster Eindruck

    Bleibt Gehtoder

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

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

  • F O LG E :Blog wirkt schon,

    bevor die ersten Inhalte gelesen werden.

  • Webdesign ist kein Selbstzweck

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

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

  • Seite scannbar machen

    berblick bieten

    Hierarchien schaffen

    Highlights setzen

  • Texte scannbar machenberschriften, Zwischenberschriften

    Textauszeichnungen, Zitate, Auflistungen

    Bilder & Links

  • Erste Wirkungstreffer:

    Optische Gestaltungsmittel

    +

    Erste redaktionellen Inhalte

  • Startseite =COVER

    Nicht nur Inhaltsverzeichnis

  • Bild effektivlaufen.de

  • Die Positionierungdeutlich machen!

  • Was der Leser schnell beurteilen kann:

    Professionalitt (des Auftritts)

    sthetik

    Vertrauen

    Branding

  • Innerhalb weniger Sekunden sollte der Besucher wissen,

    um was es geht und wofr du stehtst.

  • Beliebte Fehler:

    Unbersichtlich

    unprofessionell

    gleichartig / austauschbar

    unleserlich

  • So geht Webdesign heute:

  • INUTITIV BEDIENBAR(Usability)

    Ich will nicht nachdenken mssen.

  • LESBAR

  • SchriftartenLesbar ! ! !

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

  • Schriftgrengrer machen.

    > 14 Pixel, mindestens

    > 16 Pixel, mindestens

  • Zeilenabstandgrer machen.

    line-height: 1.5

    bis

    line-height: 1.7

  • ZeilenlngeRichtwert: 60 80 Zeichen pro Zeile

    ca. 500 600 Pixel Breite

  • SchriftfarbenAuf ausreichenden Hell-Dunkel-Kontrast

    zwischen Hintergrund- und Textfarbe achten

  • Texte gliedern&

    scannbar machen

  • RESPONSIVEAuf jedem Gert intuitiv bedienbar und lesbar.

  • LADEZEIT BEACHTEND

    https://tools.pingdom.com/

  • BILDERsind schnelle Schsse ins Gehirn.

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

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

  • FARBENMut zur Farbe.

    Mut zu deiner Farbe.

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

  • DEIN BLOGDESIGNbersichtlich & lesbar

    wiedererkennbar

    intuitiv bedienbar

  • Headline 1234Subline 5678

    Dein Blog-Branding sorgt

    fr Vertrauen & Glaubwrdigkeit.

  • Headline 1234Subline 5678

    GUTES WEBDESIGNist eine Komposition aus vielen Faktoren

  • Individuell & persnlich

    GUTES WEBDESIGNkann ein groer Baustein

    fr den Erfolg deines Blogs sein.

  • Headline 1234Subline 5678

    Geduldig sein.Lieber regelmig optimieren, als der eine groe Relaunch.

  • Sei wiedererkennbar

    & einzigartig

    auch ber die Kanle hinweg!

  • Und dann?

  • Dann leuchtet er, DEIN Blog-Stern

  • Headline 1234Subline 5678

    Mehr dazu:www.webdesign-journal.de

    Martin Hahn | webdesign-journal.de