Immer wichtiger für Designer und Developer ist der Pagespeed. Mittlerweile wird mehr Mobile als am Desktop gesurft, wesshalb eine Website auch auf dem Smartphone schnell laden sollte. Das beisst sich leider mit dem Trend, grosse Bilder und Videos für die Website zu benutzen. Bessere Ladezeiten wirken sich positiv auf die Nutzererfahrung aus und auch Google hat seine freude daran...
Die Home sollte bestenfalls in unter 3 Sekunden laden!
Inhalte werden in teils unterschiedlich grossen Kacheln zusammengefasst, die unter- oder nebeneinander platziert sind. So können mehrere Themen auf einen Blick gezeigt/erfasst werden. Diese Container eignen sich gut für responsiv Webdesign und passen sich der aktuellen Bildschirmgrösse an. Kacheln, die auf einem Desktop nebeneinander stehen, platzieren sich auf dem Smartphone einfach untereinander.
Man sollte aber auch berücksichtigen, das der User nicht zu viele Informationen auf einmal bekommt. Die Gliederung und Grösse der Kacheln sollte schon Sinn machen.
Ob man nun mobile first designt oder nicht, spielt eigentlich keine Rolle! Schlussendlich muss die Website auf allen Endgeräten gut funktionieren! Man sollte lieber alle möglichen Szenarien von Anfang an berücksichtigen und sich bei jedem gestalteten Element genau überlegen, wie es auf Desktop, Mobile oder auf einem XXL-Screen aussehen oder verhalten soll.
Für neue Geräte wie etwa smart watches muss NOCH nicht optimiert werden...
Grosse Bilder, Videos und geschickt gelayoutete Texte liegen im Trend. Gut strukturierte und relevante Inhalte können durch grosszügige Bilder und Videos aufgelockert werden. Dank immer schnelleren Internetverbindungen können auch Hintergrundbilder und Videos für einzigartige User-Erlebnisse sorgen.
Gleichzeitig dürfen suchmaschinenoptimierte und content relevante Texte nicht fehlen, denn diese beeinflussen das Ranking bei Google & Co. massgeblich.
CMS wie Wordpress, Joomla, Wix usw. mit ihren Vorlagen tragen nicht gerade zu mehr Authentizität im Web bei. Authentizität und Individualität geht auch nicht mit Stockfotos! Für die Thematik der Website geschossene, reale Bilder verleihen dem Internetauftritt Persönlichkeit und Einzigartigkeit.
Das gilt übrigens auch für Icons oder Grafiken. Selbst erstellte Icons oder Infografiken in sketch art werden in Zukunft bestimmt wieder für mehr Individualität sorgen.
Oder wieso nicht gleich gegen den Trend schwimmen und ganz auf Bilder verzichten? Mit spielerischer Typografie, farbigen Flächen, Linien, Patterns usw. können in einer von Bildern überfluteten digitalen Welt interessante Wirkungen geschaffen werden. Manchmal werden Bilder eingesetzt, einfach nur, damit eines da ist. «Weniger ist mehr» gilt auch im Webdesign! Unterschiedliche Schriftgrössen und -arten kombiniert mit dem Zauber von CSS3 und HTML5 (animieren, drehen, multiplizieren und vieles mehr) können genau so spannend sein wie Bilder.
Und wer beim Google-Ranking punkten will; den Text am besten mit Absätzen, Fettdruck, Auflistungen, Zwischenüberschriften usw. strukturieren.
1989 ins Leben gerufen, waren animated GIFs noch cool! Später dann verpönt und heute kultig... Morgen? Keine Ahnung, aber auffallen tun die Dinger halt schon! Man kann gar nicht anders als hinzuschauen. Die Bewegungen im Bild überraschen oder amüsieren sogar wie auf www.giphy.com.
Zugleich haben sie gegenüber einem Video Vorteile: GIF-Animationen stechen dem Besucher sofort ins Auge, er muss nicht erst aktiv werden und sie – wie beim Video – selbst starten. Ausserdem benötigt sie weniger Bandbreite als ein Video.
Gute Inhalte sind wichtig für Google und Co. Aber sie sollten auch ansprechend gestaltet und leicht verständlich platziert werden, damit die Infos auch beim User gut ankommen. Ein in der Mitte des Bildschirms stehender Inhalt, visuell unterstützt mit farbiger Fläche, Icons oder auffälligen Fonts, generiert sofort mehr Aufmerksamkeit.
Auch das Aufsplitten der Inhalte (Bild/Text, nächster Abschnitt Text/Bild usw.) hilft relevante Informationen zu strukturieren.
Mittlerweile gibt es zahlreiche Fonts, die das eigene Unternehmen, deren Message und ihre Wiedererkennung besser unterstreichen als Standardfonts wie Arial, Helvetica & Co. Allerdings sollte darauf geachtet werden, dass die Fonts auch lesbar sind, dass sie gross genug gewählt werden und zudem in allen gängigen Browsern darstellbar sind.
Auf vielen Plattformen gibt es Fonts teils kostenfrei oder zumindest deutlich günstiger als noch vor ein paar Jahren. Wer auf Nummer sicher gehen will, der sucht sich einen der zahlreichen Google-Fonts aus.
Der Trend geht hin zu bunteren, mutigeren Farben und weg von «besser nichts zu riskieren». Gerade neue, moderne und junge Marken und Unternehmen trauen sich, mit farbenfrohen Designs und aussergewöhnlichen Farbkombinationen die Aufmerksamkeit auf sich zu ziehen. Buntes und Auffälliges steht für Mut zu Neuem und für frische Ideen.
Durch die hohe Qualität der heutigen Bildschirme kommen leuchtende und satte Farben mittlerweile auch besser zur Geltung.
Auch beim sogenannten flat Design gilt «weniger ist mehr». Auf eine realistische Darstellung von dreidimensionalen Elementen, Schlagschatten und Verzierungen wird verzichtet und die Gestaltung wird auf das Wesentliche reduziert.
Flat Designs rücken Funktionalität und Einfachheit in den Vordergrund, ermöglichen schnellere Ladezeiten und lassen sich besser anpassen/programmieren für die unterschiedlichen Endgeräte. Betriebssysteme und Applikationen sind typische Beispiele für die Möglichkeiten von Flat Designs.
Ähnlich, aber nicht ganz so minimalistisch ist das Material Design, welches mit Tiefen und Schatten arbeitet. So wird eine realistischere Darstellung und aufregendere User-Experience erreicht. Für Funktionalität und Klarheit sorgen beim Flat– und Material Design Elemente wie Icons und Schriftarten.
Der Hover–Effekt, auch Mouseover–Effekt genannt, bezeichnet die Veränderung eines Elements, wenn der User mit der Maus darüber fährt. Dieser Effekt wird besonders häufig bei Links eingesetzt und signalisiert somit dem User, dass er hier klicken kann. Auch bei Tabellen wird der Hover–Effekt gerne eingesetzt, um dem Nutzer das Lesen zu erleichtern.
Durch Hover–Effekte können einerseits schöne und verblüffende Designelemente kreiert werden, andererseits können sie aber auch die Usability erhöhen.
Das Storytelling ist vorallem auf den Siegeszug des Onepagers zurückzuführen: Der Benutzer scrollt sich durch die Homepage und liest eine spannende Geschichte zum Unternehmen und seinen Produkten. Anstatt mühsam über mehre Seiten verteilte Informationen zu suchen, wird den User durch eine auf den Punkt gebrachte Story alles erzählt . Der Trend zum Scrollen unterstützt somit das Storytelling und den Lesefluss.
Klicken ist out, Scrollen ist in – das sieht man nicht zuletzt beim modernen Onepager und umfangreicheren Responsive Designs. Das Scrollen ist intuitiver, verhindert das viele Herumklicken auf verschiedenen Unterseiten und spart auch Ladezeiten. Schon beim Ansurfen der Homepage einer Website sollte der User alle relevanten Informationen auf einen Blick vorfinden. Wer tiefer in die Materie einsteigen möchte, sollte dann wiederum die Möglichkeit haben, per Klick mehr zu erfahren.
Beim «parallax scrolling» bewegen sich Bilder im Vordergrund schneller als Hintergrundbilder. Das heisst, dass sich die Ebenen beim Scrollen mit verschiedenen Geschwindigkeiten bewegen, wodurch der Eindruck von Tiefe entsteht. Das ist ähnlich wie beim Zugfahren: Nahe Objekte scheinen schneller am Betrachter vorbeizuziehen als weiter entfernte. Die Nutzer-Interaktion steigt beim Einsatz von «parallax scrolling» angeblich um bis zu 70%.
Moderne Websites arbeiten oft schon mit einer «fixed navigation»: Die Navigation bleibt dabei an einer bestimmten Position auf dem Bildschirm, auch wenn der User weiterscrollt. Manchmal wird das horizontale Menü dann in der Höhe reduziert oder nur noch als kleines Icon angezeigt, das wieder ausgeklappt werden kann. Dies wird gerne auch mit anderen Inhalten gemacht, die relevant sind und schnell erreichbar sein sollen.
Gerade bei längeren Onpager und surfen auf Smartphones können solche fixieten Elemente für die Usability nützlich sein. Einfaches Beispiel: Scroll to Top Buttons.
Egal ob Wellenlinien, Zickzackmuster oder einfache animierte Linien. Der Trend zu solchen dekorativen Trennern ist wieder in. Die Formen können z.B. ab dem Logo einer Firma abgeleitet werden oder einfach neu erfunden werden. Kombiniert mit Flat– und Material Design kann man durch einfache Muster coole Effekte erziehlen.