Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 25

Eye Candy im Webdesign: Weniger ist manchmal mehr

    Eye Candy im Webdesign: Weniger ist manchmal mehr

Das Internet ist mittlerweile erwachsen und hat sich vom Begleitmedium zum Leitmedium entwickelt. Zusammen mit den neuen technischen Vorraussetzungen steigen die gestalterischen Möglichkeiten, aber auch die Ansprüche. Wir zeigen, worauf sich Designer in Zukunft einstellen müssen, wenn sie gutes Webdesign erstellen möchten.

In der vergangenen Dekade haben wir viele Designtrends kommen und gehen sehen. Unterstützt durch neue technische Möglichkeiten wie erweiterte Farbdarstellung oder mehr Breitband-Anschlüsse, konnten Webdesigner mehr und mehr grafische Elemente in Websites unterbringen. Wir hatten den „Web 2.0“-Look, der mit seinen knalligen Farben, Verläufen und glänzenden Buttons das Web unsicher machte, den Grunge-Look mit seinen großflächigen Hintergrund-Texturen aus Mauerwerk, Rost und Metall, ergänzt durch Flecken und Spritzer, sowie die verschiedensten grafischen Stile wie vektorbasierte, handgezeichnete oder aquarell-artige Illustrationen, Texturen aller Art nach Vorbilden der realen Welt. In den letzten Jahren kam die typografische Vielfalt in Form von Webfonts hinzu sowie abgewandelte Formen vorheriger Stile, wie subtilere und pixelartige Texturen oder gemäßigtere Formen von Verläufen und glänzenden Buttons nach Vorbild des Apple-Designs.

Es scheint, als seien unsere grafischen Spielräume allesamt erkundet. Was kommt nun als nächste Herausforderung auf Designer zu, wie können sie ihre Designs weiter ausreizen und verbessern?

Designer müssen mehr Designentscheidungen hinterfragen, vor allem was den Einsatz bestimmter Stile und Texturen angeht und mehr ins Detail gehen, zum Beispiel bei der Typografie. Darüber hinaus gibt es spannende Ansätze, wie man seine Layouts harmonischer abstimmen kann sowie die große Herausforderung des Responsive Webdesign (siehe auch Artikel ab Seite 152 und 176). Außerdem gilt es, weiterhin Kreativität aus technischen Weiterentwicklungen zu ziehen, wie zum Beispiel dem „Parallax-Scrolling“.

Viel Freiheit – viel Verantwortung

Neben all den kreativen und hochwertigen Webdesigns der letzten Jahre kam ein bestimmter Stil oft nur deshalb zum Einsatz, weil es gerade angesagt und einfach plötzlich möglich war, und nicht, weil Inhalt oder Zielsetzung der Website dies erforderten. Heute sind die technischen Möglichkeiten dank CSS3, Webfonts und hochwertigen Browsern so weit, dass Designer nie da gewesenen Einfluss und viele Einscheidungsmöglichkeiten haben, wodurch aber auch eine Gefahr des Missbrauchs gegeben ist. Die gewonnene Freiheit birgt eben auch Probleme. Immer noch verwenden Designer verschiedene Trends und Techniken einfach, ohne den Sinn zu hinterfragen, zum Beispiel runde Ecken, Schlagschatten oder Texturen im Überfluss.

Diese und andere Unzulänglichkeiten passieren, weil zu wenig nach dem „Warum?“ gefragt wird. Warum ist es sinnvoll, hier einen Schatten zu verwenden? Was bezweckt die verwendete Textur? Stellt sie eine Bereicherung dar? Braucht der Button einen Glanzeffekt? Es geht dabei nicht darum, diese Dinge generell in Frage zu stellen, nur ist es wichtig, sie an der richtigen Stelle zu verwenden. Die folgenden Beispiele verdeutlichen das sehr anschaulich.

Eingesetze Stile richtig verwenden

Elliot Jay Stocks zeigt in seinem Vortrag „With Great Power Comes Great Responsibility“ einige Beispiele für den guten und falschen Umgang mit aktuellen Designstilen auf und macht deutlich, dass man nicht alles einsetzen sollte, nur weil es möglich oder verfügbar ist. [1] Ein Beispiel aus der Kategorie Tiefenwirkung und Realitätsbezug im Webdesign aus Elliots Vortrag:

Die grünen Boxen klappen rechts hinter den Hintergrund, was so nicht möglich ist, da der weiße Inhaltsbereich eigentlich oberhalb des Hintergrunds steht. Außerdem stimmt die Perspektive nicht. Das ist zwar keine große Sache, wird aber durch den falschen Einsatz zum überflüssigen – und im schlimmsten Fall störenden – Beiwerk. Instagr.am (rechts) macht es dagegen richtig, wodurch ein stimmiger Eindruck entsteht.

Designer setzen oft und gerne Texturen ein, was auch an folgendem Kommentar zu einem texturlosen Design auf Dribbble deutlich wird: „Maybe it's just too common these days but I can't help but feel this needs a really subtle texture to it“.

Der Kommentator stellt sich nicht die Frage, ob eine glatte, „saubere“ texturlose Oberfläche vielleicht besser zum Thema passt und erläutert auch nicht, warum eine Textur sinnvoll wäre. Diesen Eindruck hat man bei einigen anderen texturierten Websites auch. Oft ist es so, dass viel Arbeit in detailreiche und umfangreiche Texturen fließt und der Designer anschließend das wichtigste, die Gestaltung des eigentlichen Inhalts, nur stiefmütterlich behandelt. Ein wichtiges Ziel der Gestaltung ist es, den Inhalt schnell und leicht erfassbar zu machen. Wenn eine Textur das behindert, ist sie fehl am Platz.

Links und Literatur

  1. Vortrag: With Great Power Comes Great…
  2. Justdot Medai Services
  3. 84colors
  4. Realmac
  5. Webdesign is 95% Typography
  6. Blog von Trent Walton
  7. Incremental leading
  8. Essay: Typograph
  9. Type Inspired Interfaces
  10. Video von Tim Browns Build-Vortrag
  11. More Meaningful Typography
  12. A Richer Canvas von Mark Boulton
  13. Responsive Webdesign
  14. New-Adventures Konferenz 2012
  15. New-Adventure Konferenz 2011
  16. Mobile Web - Vom Potenzial zum…
  17. Nike
  18. Active
  19. Ben the Bodyguard
  20. Nizoapp

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

1 Reaktionen
Marcus Graf
Marcus Graf

Schöner Artikel, weniger ist definitiv mehr. User sollten sich auf den Inhalt einer Seite konzentrieren und nicht auf das Design. Natürlich kommt es auch immer auf die Seite an. Kreative Agenturen sollten sich an ihrer Seite durchaus austoben!

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen