Einen Moment bitte.
Bereite Inhalt vor...
← Alle BeiträgeBlog · Webdesign

Webdesign – nützliches Fachwissen

Die mobile Version Deiner Website ist entscheidend: MOBILE FIRST. Dazu Pop-ups, Parallax Scrolling, Fixed Navigation, Hero Images und Minimalismus – nützliches Fachwissen rund ums Webdesign.

18.03.2021
Powerpoint Design Bozen, Südtirol

Die mobile Version Deiner Website ist entscheidend: MOBILE FIRST

Wir alle wissen es: Der Trend geht schon lange zum mobilen Surfen. Das wird sich auch nicht mehr umkehren, die Smartphones und Tablets sind derart gut geworden, dass die gehäufte Nutzung kein Wunder ist. Man liegt auf der Couch und zack, surft man irgendwohin. Dafür kuschelt man nicht mit seinem iMac oder MacBook.

Das moderne Webdesign hat sich zum Teil schon angepasst – und wird es in Zukunft noch viel mehr müssen. Auf die „Mobile first“-Devise. Das bedeutet, dass die mobile Version Deiner Website mehr Relevanz erhält und von Google als wichtiger eingestuft wird – auf mobile Nutzung fokussiertes Webdesign bringt also Vorteile.

Seit März 2021 setzt Google das „Mobile first Indexing“ konsequent um. Webdesign musste also seinen Fokus verlagern. Dementsprechend ist klar: Fokus auf die mobile Version, denn in erster Linie zählt beim Webdesign genau diese!

Dank des längst standardmäßig umgesetzten Responsive Webdesigns ist die Darstellung auf mobilen Geräten kein Problem mehr. Dennoch gibt es immer noch Seiten mit schlechtem Webdesign, die nicht darauf ausgelegt sind. Und diese werden von Google massiv abgestraft – daran besteht kein Zweifel.

Positiver Nebeneffekt von „Mobile first“: Der PageSpeed verbessert sich und der Fokus auf das Wesentliche wird noch mehr zugespitzt. Wir bleiben gespannt, wie sich Webdesign in Südtirol – aber auch weltweit – weiterentwickeln wird!

Nervig oder sinnvoll? POP-UPS vs. schönes Webdesign

„Ach wie toll, ein neues Pop-up auf der Website, mal sehen, was da Tolles für mich drinsteht!“ So denkt wohl niemand mehr. Die allermeisten von uns sind verstört, genervt und gelangweilt von Pop-up-lastigem Webdesign. Erster Impuls: Weg damit, auf X klicken. Sobald ein neues Element, ein sogenanntes Pop-up, auf dem Bildschirm auftaucht, schlägt das Nerv-Barometer aus: Webdesign aus der Hölle.

Es gibt welche, die kann man einfach wegklicken, es gibt aber auch welche, die eine Reaktion von den Nutzer:innen verlangen, sonst geht es nicht weiter. Diesen Unterschied gilt es auch beim Webdesign zu berücksichtigen.

Wie kannst Du nun mit diesen Pop-ups umgehen?

  • Erste Regel: Falls möglich, am besten darauf verzichten. Die Benutzerfreundlichkeit, die Usability, leidet in der Regel darunter – und auch Dein Webdesign.
  • Wenn schon Pop-up, dann sollte es einen klaren Mehrwert für die Nutzer:innen liefern: Webdesign soll sinnvoll sein.
  • Warum wird ein Pop-up eingeblendet? Liefere einen guten Grund und erkläre ihn, damit niemand genervt ist und es besser nachvollziehen kann.
  • Versuche, positive Erkenntnisse für Dich rauszuziehen: Sind die Daten wirklich wertvoll? Wenn nicht, lieber darauf verzichten!
  • Webdesign: Wo soll es angezeigt werden? Zentral, an der Seite oder unten? Die Antwort hängt von mehreren Faktoren ab, am Ende sollte die Conversion-Rate maßgebend sein.
  • Achte beim Webdesign auf einen dezenten, möglichst wenig „nervigen“ Look.
  • Webdesign: Mobile only
  • Höhere Sichtbarkeit
  • Bessere Aufnahme von Informationen

Mehr Lebendigkeit, Tiefe und Dynamik: Webdesign mit PARALLAX SCROLLING

Im Webdesign hört man immer wieder „Parallax Scrolling“. Was ist das eigentlich? Es sorgt für einen „Wow-Effekt“ bei den Besucher:innen, weil mehr Bildtiefe und Dynamik erzeugt wird – man könnte auch von einer lebendigeren Optik sprechen. Wie wird dieser Effekt mittels Webdesign erreicht? Indem sich Elemente (Vorder- und Hintergrund) beim Scrollen in unterschiedlicher Geschwindigkeit bewegen.

Der Effekt ist im Webdesign nichts Neues, den gibt es schon lange, aber wir finden Parallax Scrolling immer noch sinnvoll und nach wie vor cool – man kann ihn auf unterschiedlichste Art und Weise zum Vorteil für die Nutzer:innen ausspielen. Die Kunst besteht darin, die Balance zu finden, damit der Effekt nicht zu stark vom Inhalt ablenkt – schließlich soll gutes Webdesign nicht nur Show sein, sondern durch Informationen Mehrwert bieten. Es spricht aber nichts dagegen, wenn diese cool und lässig präsentiert werden, nicht wahr?

Achtung: Bei Smartphones oder Tablets kann das schnell nervig werden, hier musst Du also genau darauf achten, wie es dargestellt wird. Stichwort „Mobile first“ … und kein Webdesign aus der Hölle …

Wie angeklebt: Webdesign mit FIXED NAVIGATION

Manchmal sieht man auch beim Webdesign den Wald vor lauter Bäumen nicht mehr. Wer kennt es nicht: Du bist auf einer Website unterwegs, surfst durch die Gegend, verlierst Dich in kleinteiligen Inhalten und möchtest doch lieber woanders nach dem gewünschten Inhalt suchen. Aber das Menü ist weg – nervig. Du musst wieder hochscrollen oder die Seite neu laden oder wie auch immer. Auf jeden Fall kommst Du nicht unkompliziert und schnell zum Ziel. Kein ideales Webdesign.

Ist das modernes, nutzerfreundliches Webdesign? Wir denken nicht. Deshalb ist es mittlerweile Usus und auf guten Websites Standard, dass das Menü oben fix eingeblendet bleibt. Es ist also stets sichtbar und damit nutzbar.

Der Look des Menüs kann sich verändern, sobald man weiter nach unten scrollt. Zum Beispiel wird das Logo kleiner, die Farben verändern sich, ein Schatteneffekt kommt dazu, die Schriftgröße wird kleiner und, und, und. Webdesign bietet viele Möglichkeiten.

Durch ein Webdesign mit „Fixed Navigation“ wird eine Website nutzerfreundlicher, weil die Orientierung deutlich leichter fällt. Es geht schneller und ist logischer. Wo Licht ist, ist auch Schatten: Ein kleiner Nachteil ist, dass oben ein wenig Platz verloren geht, weil das Menü dauerhaft zu sehen ist. Was in Zeiten von größeren Auflösungen und Displays keine Rolle mehr spielen sollte. Wir sind dennoch große Fans der „angeklebten Navigationsleiste“.

Moderne, große Helden: Webdesign mit HERO IMAGES

Wer will schon lange Texte lesen oder kleinteilige Einzelbilder betrachten – oder gar durchscrollen –, wenn zum Einstieg ein sehr schönes, aussagekräftiges Bild oder Foto gezeigt werden kann? Solche Bilder nennt man im Webdesign „Hero Images“.

Wie sollten diese beschaffen sein? Großformatig, in der Regel 16:9 und von der Fotoauswahl her passend zum gesamten Webdesign und zu allen anderen Fotos. Die meisten Websites nutzen solche Hero Images, auch weil viele Templates sie direkt als Platzhalter vorsehen. Nicht immer ergeben sie Sinn, es kommt auf den Inhalt und die Gestaltung an.

Aber nicht nur das Bild/Foto ist entscheidend, sondern auch der begleitende Text. Wenn ein emotionales Bild auf einen stimmigen Text oder eine stimmige Überschrift trifft, kann das fürs Webdesign eine sehr gute Wirkung erzeugen. Der Werbeeffekt oder Aha-Effekt ist auf jeden Fall stärker als bei einem ellenlangen Text.

Eine Alternative zu Hero Images können im modernen Webdesign auch animierte Illustrationen, Grafiken oder Videosequenzen mit gedrehtem Material sein. Das sorgt für noch mehr Dynamik, für noch mehr Eindruck.

Achte bei der Fotoauswahl bitte darauf, dass es kein 08/15-Footage ist, das jedes Kind als gekauftes, billiges Stockmaterial enttarnt, sondern dass die Fotos ein gewisses Niveau haben und in die Gesamtkomposition des Webdesigns passen.

Less is always more, isn’t it? Auch im Webdesign? MINIMALISMUS

Wer beim Webdesign das Motto „Weniger ist mehr“ berücksichtigt, wird unserer Meinung nach schneller zum Ziel und somit zum Erfolg kommen. Das Motto spiegelt wunderbar den gesellschaftlichen Trend wider, dass in kürzester Zeit das Wesentliche vermittelt werden muss – nur dann wird es als relevant und wichtig eingestuft. Die wenigsten nehmen sich viel Zeit, um eine Website und deren Webdesign in ihrer Gänze zu bestaunen.

Dementsprechend ist Minimalismus auf vielen Ebenen angesagt: Vom Webdesign über die Gestaltung von Flächen und Farben und die Auswahl von wenigen, guten Effekten bis hin zu komprimierter, auf den Punkt gebrachter Textgestaltung. Auch die Fotoauswahl sollte nicht zu üppig sein – weniger ist eben wirklich mehr. Lieber 3–5 sehr gute, auch teure Fotos als 10–20 billige Stockfotos, die keiner wirklich betrachtet.

„Wenn man Unnützes weglässt, bleibt das Wichtige übrig.“ Eigentlich ganz einfach und doch so schwer! Man muss Prioritäten setzen, um dieses Ziel zu erreichen – und gemeinsam die Balance finden für die optimale Website und das optimale Webdesign.

Und hier schließt sich auch wieder der Kreis zum ersten Infoblock in diesem Blogartikel: MOBILE FIRST unterstützt den Trend zum Minimalismus. Weniger Content, weniger Code, geringere Ladezeiten, schnellere Übersicht. All das ist gutes Webdesign.

Wenn auch Du Deine Marke in der Außenwirkung mit hochwertigem Webdesign stärken willst, dann melde Dich gerne jetzt für Dein kostenfreies Beratungsgespräch.

Erzähl uns von
Deinem Projekt!

Ob konkrete Anfrage oder erste Idee – fülle einfach das Formular aus. Wir melden uns innerhalb von 24 Stunden persönlich bei Dir zurück.