#33 Neugierig?

5 Gestaltungstipps für deine Website

Bist du neugierig?

Ich bin total neu­gie­rig. Stän­dig will ich mehr wis­sen. Stän­dig will ich ver­ste­hen. Stän­dig gehe ich wei­ter. Und ja, sogar auf Weih­nachts­ge­schen­ke bin ich neu­gie­rig. Die­se Neu­gier ist viel­leicht einer­seits eine kind­li­che Form von Spiel. Aber im Grund bin ich davon über­zeugt, dass sie mei­ne gehei­me Super­kraft ist, um eben immer wie­der zu ver­ste­hen, zu hin­ter­fra­gen und weiterzugehen.

Das Gegen­teil davon ist für mich Lan­ge­wei­le. Ein Gegen­stand, ein Film, ein Ort oder ein Mensch, der mei­ne Neu­gier nicht auf sich zieht, son­dern statt­des­sen lang­weilt, ver­liert sehr schnell mei­ne inne­re Zuwen­dung. Und zack, raus bin ich – bild­lich gesprochen.

Hal­lo und herz­lich will­kom­men. Mein Name ist Jana Schlos­ser und ich bin Gra­fik­de­si­gne­rin und gestal­ten­de Bera­te­rin und du hörst gera­de mei­nen Pod­cast SNACKABLE – häpp­chen­wei­se Grafiktipps.

Und heute geht es genau um: Langeweile.

Nein, natür­lich nicht.

In mei­ner letz­ten Epi­so­de war ich auf die inhalt­li­che Über­ar­bei­tung mei­ner neu­en Web­site ein­ge­gan­gen. Heu­te gebe ich dir ganz kon­kre­te Gestal­tungs­tipps für dei­ne Web­site. Denn lei­der sehe ich viel zu vie­le Sei­ten, die ein­fach lang­wei­lig sind. Mich nicht zum Ver­wei­len ein­la­den und mei­ne kind­li­che Neu­gier schmäh­lich igno­rie­ren. Das ist total scha­de, denn ist es doch Sinn und Ziel einer Web­site, die Besu­cher neu­gie­rig auf mehr zu machen. Sie zum Ver­wei­len, Lesen, Ent­de­cken und sogar Kon­su­mie­ren zu verführen.

Dabei ist das Ange­bot vie­ler Web­sites wirk­lich gut. Doch – es kann nütz­lich, wert­voll, erkennt­nis­reich oder sonst was sein. Nur, wenn sie den Besu­cher nicht an die Hand neh­men und wei­ter­füh­ren, dann nützt ihr wert­vol­ler Inhalt rei­ne­weg gar nichts.

Hier also fünf wich­ti­ge Gestal­tungs­op­tio­nen, mit denen du dei­ne Web­site attrak­ti­ver machst und so dei­ne Besu­cher zum Ver­wei­len einlädst:

1. Schrift

Es gibt eine wirk­lich rie­si­ge Aus­wahl an ver­schie­dens­ten Schrift­ar­ten und es lohnt sich Schrift bewusst auszuwählen.

Die Form einer Schrift hat zwei ver­schie­de­ne Zie­le: Sie soll les­bar sein und sie soll den Inhalt illustrieren.

Des­halb brauchst du auf dei­ner Web­site eine Schrift, die wich­ti­ges aus­zeich­net. Die­se wird all­ge­mein für Über­schrif­ten, Her­vor­he­bun­gen und Zita­te genutzt.

Und du brauchst eine zwei­te Schrift, in der dei­ne Tex­te gesetzt sind. Die­se soll­te sehr gut les­bar sein und in einem ange­neh­men Kon­trast­ver­hält­nis zur Aus­zeich­nungs­schrift stehen.

Die­se bei­den Schrif­ten müs­sen nicht zwangs­läu­fig aus einer Schrift­fa­mi­lie stam­men, also statt regu­lar ein­fach fett oder kur­siv sein. Ganz im Gegen­teil kannst du mit der Aus­zeich­nungs­schrift in den abso­lu­ten Kon­trast zur Text­schrift gehen.

Mit die­sen bei­den Schrift­ar­ten kannst du dei­ne Tex­te dann logisch glie­dern, wich­ti­ges her­vor­he­ben und den Leser optisch durch dei­ne Inhal­te führen.

2. Farbe

Far­ben kom­mu­ni­zie­ren immer! Des­halb sind sie ein mäch­ti­ges Gestaltungsmittel.

Denn mit jeder Far­be ver­bin­den wir unbe­wusst Emo­tio­nen. Wir ken­nen das ja z.B. von Rot als Lie­bes­far­be und Blau als Himmelsfarbe.

Wenn du bereits ein Cor­po­ra­te Design hast, wirst du sicher auch eine Far­be für dich bestimmt haben. Für dei­ne Web­site emp­feh­le ich dir jedoch zwei mög­lichst ver­schie­de­ne Far­ben. Eine pri­mä­re Far­be, mit der du wich­ti­ges her­vor­he­ben kannst (z.B. Über­schrif­ten) oder auch eine Hin­ter­grund­flä­che far­big anle­gen kannst. Und eine sekun­dä­re Far­be vor allem für dei­ne CTAs. Das ist des­halb wich­tig, weil But­tons oft einen roll-​over-​Effekt haben. Z.B. sehen mei­ne zuerst grün umran­det aus. Wenn du die Maus dar­über führst, wird aus dem grü­nen Rand ein him­beer­ro­ter Rand. Das Lind­grün ist mei­ne pri­mä­re Far­be, die Him­bee­re mei­ne sekun­dä­re. Eini­ge weni­ge Text­stel­len habe ich eben­falls mit der sekun­dä­ren Far­be her­vor­ge­ho­ben. Wie du eine zu dir pas­sen­de Farb­wahl tref­fen kannst, habe ich übri­gens bereits in mei­ner Epi­so­de #12 erklärt.

Soll­test du in dei­nem Cor­po­ra­te Design mehr als zwei Far­ben ver­wen­den, dann über­le­ge dir im Vor­feld sehr genau, wel­che Far­be wel­che Funk­ti­on über­neh­men soll.

3. Wording

Die Men­schen lie­ben Geschich­ten. Des­halb ist es immer am bes­ten, wenn du in dei­nen Tex­ten Geschich­ten erzählst. So las­sen sich kom­pli­zier­te Inhal­te ver­ständ­li­cher auf­be­rei­ten. Durch Emo­tio­nen blei­ben dei­ne Leser bei dir. Und wenn die Geschich­ten gut sind, dann wer­den sie auch wei­ter­erzählt. Was letz­ten Endes wie­der zu dir und dei­ner Web­site zurückführt.

Des­halb ist es abso­lut wich­tig, sich mit dem The­ma Sto­rytel­ling zu beschäf­ti­gen. Denn dei­ne Besu­cher sind Men­schen und kei­ne Maschi­nen. Und auch du bist ein Mensch. Je authen­ti­scher du dich als Mensch reprä­sen­tierst, des­to stär­ker wirst du ange­nom­men. Das ist so.

4. Bilder

Ein Bild sagt mehr als 1000 Wor­te. Des­halb über­le­ge dir auch für Bil­der eine Geschich­te. Auf mei­ner Web­site fin­dest du z.B. neben den Fotos mit mir Bil­der von Ber­lin. Ich bin eine Ber­li­ne­rin und ich lebe und arbei­te in Ber­lin. Und mei­ne Bil­der erzäh­len mei­ne Ber­li­ner Geschich­te. Du kannst davon aus­ge­hen, dass die Emo­tio­nen einer Bild­ge­schich­te viel stär­ker wir­ken als gekauf­te Stock­fo­tos, die irgend­wie immer ein biss­chen zu per­fekt aussehen.

Es gibt übri­gens inzwi­schen auch eine Platt­form für Illus­tra­tio­nen, falls es kei­ne Fotos sein sol­len. Die­se Illus­tra­tio­nen kannst du sogar mit dei­ner eige­nen Cor­po­ra­te­far­be anpas­sen. Falls du also kei­ne Fotos ver­wen­den möch­test, dann schau mal bei https://​undraw​.co/​i​l​l​u​s​t​r​a​tions.

5. Stopper

Da wir mit den Augen über eine Sei­te hin­weg­glei­ten ist die Struk­tur so super wich­tig. Nut­ze Stop­per und wech­seln­de Inhal­te, um die Auf­merk­sam­keit dei­ner Besu­cher bei dir zu behal­ten. Das gelingt dir mit­hil­fe von Über­schrif­ten, Text­blö­cken, Bil­dern, CTAs und far­bi­gen Flä­chen. Nut­ze Über­schrif­ten und Claims z.B. um Emo­tio­nen zu erzeu­gen, Pro­blem­lö­sun­gen oder Pro­duk­te anzu­teasern. Hier kannst du auch mit Spra­che spie­len. Die Beschrif­tung der CTAs soll­te immer eine Hand­lungs­auf­for­de­rung ent­hal­ten. Z.B. “Hier einen Ter­min buchen“ oder ähn­li­ches. Und durch ver­schie­de­ne Text­blö­cke oder Text­be­rei­che kannst du unter­schied­li­che Ange­bo­te mar­kie­ren. Lass dei­ne Fan­ta­sie hier frei spie­len. So bekommst du Bewe­gung in dei­ne Web­site und das macht sie wie­der­um interessant.

Bonus: Mobile First

Immer wie­der gern ver­ges­sen, aber: schon etwa 40 Pro­zent aller Website-​Besucher kom­men über ihr Smart­phone. Des­halb ist es so wich­tig, dass die mobile-​Version dei­ner Web­site kei­ne abge­speck­te Vari­an­te der Desktop-​Darstellung ist, son­dern eine eben­bür­ti­ge, viel­leicht sogar noch bes­ser gestal­te­te Vari­an­te. Und ach­te unbe­dingt dar­auf, dass die CTAs wirk­lich mit dem Fin­ger berühr­bar sind.

Fazit

Um dei­ne Web­site span­nend und krea­tiv zu gestal­ten brauchst du nur weni­ge gestal­te­ri­sche Grund­la­gen zu beachten.

⭐️ nut­ze zwei ver­schie­de­ne Schrift­ar­ten
⭐️ nut­ze eine pri­mä­re und eine sekun­dä­re Far­be
⭐️ nut­ze Sto­rytel­ling und schrei­be für dei­ne Besu­cher
⭐️ nut­ze Sto­rytel­ling auch bei der Aus­wahl dei­ner Bil­der
⭐️ baue Stop­per in dei­ne Sei­ten, damit die Auf­merk­sam­keit hoch­ge­hal­ten wird
⭐️ ach­te auch auf dein mobile-Design

Hast du Fra­gen oder brauchst du Unter­stüt­zung? Dann sprich mich gern an. Unter www​.jana​schlos​ser​.de fin­dest du auch mehr Infor­ma­tio­nen zu mir und mei­nem Angebot.

Spoiler

In der nächs­ten Epi­so­de ver­öf­fent­li­che ich mein ers­tes Inter­view zu mei­nem Her­zens­the­ma in die­sem Jahr: Was fin­dest du schön? Wer mein Gesprächs­part­ner war, das ver­ra­te ich dir aller­dings an die­ser Stel­le noch nicht.

Bis dahin, sei neu­gie­rig,
dei­ne Jana

Meine neuesten Beiträge

Der Bei­trag hat dir gefal­len? Dann tei­le ihn ger­ne in dei­nem Netzwerk!