Webdesign 2017: 10 Elemente für den zeitgemäßen Look
Trackback URL
Heute Trend, morgen vergessen: Technologien und Nutzerverhalten wandeln sich rasant. Trotzdem präsentieren sich viele Webseiten mittelständischer Unternehmen weiter in veraltetem, alles andere als mobilfähigem Webdesign.
So attraktiv die Ansprache vorgestern auch gewesen sein mag: Wer sich auf seinen Lorbeeren ausruht, wird - Produkte und Dienstleistungen inklusive - zügig abgehängt. Die Zahl der deutschlandweiten Nutzer von Smartphone bis Tablet ist seit 2011 rasant gestiegen! Nur Webdesign, das abseits der Desktops auch auf kleinem Display groß rauskommt, erreicht breite Zielgruppen. Mobile first! lautet die Marschrichtung. Dabei meint Responsive (reagierendes) Webdesign ein Layout, das so flexibel ist, dass eine Website - ob Desktop, Tablet oder Smartphone - mit konstant gutem Benutzerkomfort und emotionaler Ansprache glänzt.
Lesen Sie, welche Trends Sie jetzt kennen sollten.
Keep it simple: Flat Design
Ihre Besucher sollen sich schnell und gut zurechtfinden? Flat Design weiß: Weniger ist mehr. Schatten oder Verläufe verschwinden, Freiflächen und größere Schriften nehmen ihren Platz ein. Mit Schriftgrößen von 13 bis 16 px lassen sich Webtexte bestens lesen, 18 bis 30 px machen gute Über- und Zwischenüberschriften. Ansonsten setzt Flat Design auf einfache Typographien, minimalen Inhalt und Farbdynamik - bei hohen Ladegeschwindigkeiten und einfach in der Umsetzung Richtung Responsives Design.
Screenshot entnommen auf www.windows.com
Material Design: Eleganz und Tiefe
Diese Webdesign-Sprache aus klassischem Grafikdesign in Kombination mit nutzerfreundlichen Oberflächen kommt von Google. Minimalistisch wie zweidimensionales Flat Design, arbeitet Material Design jedoch mit eleganten Schatten an den Rändern seiner Elemente - sprich, mit Dreidimensionalität von Material (Ebenen). Ein Flat Design Trend, dem nun Layers (Ebenen) Stil und Tiefe verleihen.
Wesentliche Prinzipien des Material Design (Screenshot entnommen auf: https://material.google.com/#introduction-principles )
Verzicht auf Sidebar:
Weg mit der bekannten Sidebar an der linken Seite? Was einst die Nutzerfreundlichkeit erhöhte, dient immer mehr dazu, Usern Werbeinhalte ohne Mehrwert unterzuschieben. Fehlen Sidebars, rückt echter Content automatisch ins Zentrum.
Kartenoptik:
Ein ebenso beliebter Design-Trend ist die Kartenoptik. Karten erscheinen dabei als schwebende Overlays, wie zum Beispiel bei Google+
Parallaxeffekte: Präsentation aufwerten
Bei Parallaxscrolling geht der Hintergrundcontent beim Scrollen der Seite einfach mit. Der Trick des Parallaxeffekts: Ein fixierter Video-Background - als Effekt bei Computerspielen abgeguckt. CSS und HTML5 sorgten für seinen Einzug ins Netz.
Sie wünschen sich Seiten mit mehr Raumtiefe? Mit Parallax bewegen sich übereinander angeordnete Ebenen, also Inhalte, Hintergründe oder Abbildungen, in Animationen, Videos oder beim Scrollen unterschiedlich schnell - und sorgen für den beeindruckenden, dreidimensionalen Effekt.
Infinite Scrolling: Geschichten erzählen
Infinite Scrolling beschreibt die unendlich scrollenden Webseiten: Permanent wird Content – entweder automatisch oder auf Klick - geladen, die Seite scheint nicht zu enden!
Wen das stört, sollte den Scroll-Balken weiter nutzen, um in Prozent zu vermelden, wann das Ende – sofern es existiert - erreicht ist. Der Zweck: Geschichten erzählen, Prozesse verdeutlichen oder aber – wie bei Facebook oder Twitter – eine ungemein hohe Anzahl von Inhalten zügänglich zu machen.
Gemeinsam mit Parallax-Scrolling entstehen so fantastische Websites mit interessanterer Benutzerführung, jenseits textlastiger Produktbeschreibungen. Infinite Scrolling vermittelt Informationen punktgenau und fesselt Nutzer über längere Zeiträume: Wo kein Ende in Sicht ist, ermuntert Storytelling zum Bleiben.
Gerade Nutzer mobiler Geräte kommt Infinite Scrolling sehr entgegen.
Hero Images: Besucher beeindrucken
Ihr Hero Image ist die erste Hauptabbildung, die oben - "above the fold" - auf Ihrer Seite oder Angebotsmail erscheint. Nur ein Bild, das auf einen Blick klarmacht, worum es Ihnen geht und zudem möglichst emotionalisiert, qualifiziert sich zum Helden!
Dabei kann es viele Formen annehmen - vom großen Header bis zur kompletten Seitenbreite. Sie betreiben einen Shop? Kategorien auf der Landingpage zu zeigen, war früher: Jetzt leitet Ihr Hero Image nach Art eines aufblitzenden Wegweisers zu Artikeln und Inhalten. Und das so attraktiv wie möglich - der erste Eindruck zählt. Ergänzen Sie Ihr Bild durch zielgerichtete Unterschriften (die nachweislich zu 300 Prozent mehr gelesen werden, als der zugehörige Textcontent selbst).
Hero Image kostenlos nutzen? Die Gratisauswahl zeigt sich durchaus hochwertig, aber hebt Sie kaum aus der Masse heraus. Anders professionelle Stockfotos, die außerdem die bedarfsgerechte Wahl von Größe bis Auflösung ermöglichen. So erscheint Ihr Hero Image auch auf großem Bildschirm gestochen scharf.
Oder haben Sie vielleicht sogar eigenes Bildmaterial, das Ihr Unterehmen authentisch repräsentiert?
Zu ladeintensiv darf das Hero Image jedoch nicht sein: Wie Google-Erhebungen feststellten, geht Traffic bereits bei einem Anstieg der Ladezeit von 0,4 auf 0,9 Sekunden um 20 % zurück. Wer Abbildungen - z. B. in Photoshop - fürs Web komprimiert, senkt Ladezeiten, ohne dass dies merklich zu Lasten der Bildqualität geht.
Fullsize Videos: Großes Kino für Gefühle
Videos, vor allem in HD, transportieren Emotionen ideal - als Eyecatcher, durch Ton, Bewegung und Musik.
Statt Ihrem Content die Schau zu stehlen, punkten geschickt eingesetzte Fullsize Videos mit ausreichendem Kontrast zum Text: Szenen, die ausgeblasst oder unaufdringlich wirken, dürfen gern regelmäßig wechseln.
Fullsize nimmt für Ihren Geschmack zuviel Raum ein? Reduzieren Sie Backgroundhöhe oder -breite - frei ist der Zugang zu weiteren Website-Bereichen!
Und der Ton? Nicht stummgeschaltet, kann die Lautstärke plötzlich auftauchender Background-Videos nerven - besonders dort, wo Nutzer beim Surfen eigene Musik hören oder auch am Arbeitsplatz oder öffentlichen Orten.
Ist das Netz langsam, führen Fullsize Videos jedoch auch häufig zu Frustrationen.
Sliders: Eindrücke greifbar machen
Sliders, die Impressionen und Informationen als Text, Video, Bild oder Link ohne Scrollen präsentieren, machen neugierig auf mehr. Unter Nutzung verschiedenster Übergangseffekte verschwindet ein Element, das nächste erscheint, die übrige Seite bleibt statisch. Sie können auch Elemente wie Buttons beziehungsweise generelle Call-to-Actions einfügen, um Nutzer zu bestimmten Handlungen zu aktivieren. Nachteil: Wie überladene Sidebars bieten auch Sliders manchmal zu viele (nicht genutzte) Wahloptionen.
Icons: Von Haus aus selbsterklärend
Gute Logos und Icons - wie der blaue Twitter-Vogel auf weißem Grund, der Facebook-Like-Button oder das Symbol für "mikrowellengeeignet" - komprimieren Botschaften auf einen Blick, bei hohem Wiederkennungswert.
Nutzen Sie die schlicht monochromen oder zweifarbigen Grafiken, um Inhalte zu illustrieren oder zu verlinken. Als bloße Deko dagegen lenken Icons nur von Ihren Inhalten ab, statt Informationen bildhaft zu transportieren oder die Navigation zu erleichtern.
Vorsicht: Nutzen Sie besser existierende Standards, statt Ihre eigenen zu schaffen - Rätselraten lässt potenzielle Kunden im Nu weiterklicken. Ganze auf Ihre Zielgruppe abgestimmte Iconfamilien, wie von Font Awesome (über 600 Icons kostenfrei), stehen Ihnen zur Verfügung.
Abbildung: Verschiedene Icons von Fontawesome (Screenshot entnommen aus: http://fontawesome.io/icons/ )
Fazit: Nur schön sein genügt nicht
Großartiges Webdesign geht mit der Zeit, aber nicht blind. Nur sinnvolle, weil passende Trends bringen das eigene Unternehmen voran. Auch Sie möchten Bedürfnisse und Erwartungen Ihrer Zielgruppe bedienen, oder? Dann folgt die Form der Funktion: Gutes Webdesign hat den Werkzeugkasten, der Ihre Internetpräsenz ohne technische Spielereien, aber mit Wiedererkennungseffekt profitabel gestaltet! Statt potenzielle Kunden mit Bildern, Videos und Animationen zu vergraulen, leitet kreatives Webdesign durchdacht, aber nie langweilig durch Ihre Seiten - bis zu Ihren gut zu findenden Kontaktdaten. Und lässt Ihre Besucher schließlich das tun, was sich jeder Mittelständler wünscht: Handeln!
Lassen Sie uns wissen, was Sie denken...