Was ich unter gutem Webdesign verstehe

Gutes Design ist mehr als nur Geschmacksache.

  • von Christian Schulze

Da ich hier quasi der Neue bin, möchte ich erstmal erzählen was ich persönlich unter gutem Webdesign verstehe. Design ist ein breites Thema, wo für ein gutes Ergebnis, viele Elemente ineinandergreifen müssen. Ich habe einige Dinge herausgegriffen, auf die ich selber viel Wert lege. Zu jedem Punkt findest du nützliche Links, die weiter auf das Thema eingehen oder kostenlose Ressourcen anbieten.

Liebe auf den ersten Blick

Der erste Anblick einer tollen Webseite kann sich schon mal wie die vielzitierte Liebe auf den ersten Blick anfühlen. Du siehst sie und denkst sofort: Wow! Was für ein Design. (also die Webseite). Diese Empfindung beruht weitgehend auf dem persönlichen Geschmack, setzt aber auch gestalterische Grundlagen voraus.

Natürlich wird man nicht gleich von jedem guten Webdesign vom Hocker gerissen. Oft zeichnet sich eine tolle Gestaltung auch durch Abwesenheit oder Unauffälligkeit aus. Es bleibt ein angenehmes Gefühl bei der Bedienung ohne dass einem unmittelbar bewusst ist, dass es am Design liegt.

Typografie

Das Schriftbild einer Webseite ist mir sehr wichtig. Immerhin ist der einzige Existenzgrund einer Webseite die Darstellung von Informationen. Und die erfolgt heute noch hauptsächlich in Textform. Das Schriftbild hilft die Informationen darzustellen, ihre Wichtigkeit hervorzuheben oder die Aufmerksamkeit des Lesers auf sich zu ziehen.

Ich kann mich noch an die guten Webdesigns der Jahrtausendwende erinnern. damals waren Pixelfonts im Trend und gaben jeder Seite den perfekten Schliff. Nützlich waren sie nicht – die Texte verschwanden teils komplett in den futuristischen Designs. Das ist natürlich ein Extrembeispiel aber auch heute in Zeiten von fontface und der Möglichkeit, Webtext in beliebigen Schriften anzuzeigen, wird Vieles falsch gemacht.

Mittlerweile gibt es zahlreiche Blogs, die sich für bessere typografische Gestaltung einsetzten. Sei es mit Informationen oder mit freien Schriftarten zum Download.

  • typefacts.com – Tolles deutschsprachiges Schriften-Blog mit Grundlagen, Tipps und Hintergrundwissen von Christoph Koeberlin.
  • typolution.de – Ein optisch und inhaltlich hervorragendes Typo-Blog von Benjamin Göck
  • Google Webfonts – Lizenzfreie Schriften für den Einsatz im Web gibt’s als Download oder gehostet bei Google

Stil

Mit der Zeit haben sich verschiedne Stile im Webdesign gebildet. Beliebt sind zum Beispiel Grunge, Minimalismus, Glossy Web 2.0 Design oder auch Illustriert.

Einen eigenen Stil zu haben ist nicht leicht und auch nicht immer von Vorteil. Ich finde es daher vollkommen in Ordnung, wenn man sich an vorhandene Stilrichtungen orientiert. Legst du dich auf einen Stil fest, solltest du ihn auch durchziehen. Wenn du eine Stilrichtung nur halbherzig verwendest oder mit einer Anderen mischst, kannst du dir schnell die ganze Gestaltung versauen.

Die hohe Schule ist es, wenn du einen gegebenen Stil nimmst und ihn mit eigenen Ideen weiterentwickelst. Das ist aber gar nicht so leicht.

Details

Klein aber oho. Ich bin ein großer Fan durchdachter Details. Kleine Dinge, die kaum auffallen aber entscheidend zum Gesamteindruck beitragen. Das müssen nicht zwangsläufig optische Elemente sein, auch Details der Benutzbarkeit oder die schlaue Verwendung von Inhalten zählen dazu.

Für viele kleine Webseiten oder schmale Budgets ist es natürlich unrealistisch das jeder Button und jedes Eingabefeld durchdacht und optimiert sind. Wenn du aber die Gelegenheit hast, dann nutze Sie und punkte mit feiner Detailarbeit.

  • Little Big Details – Großartige Sammlung von kleinen, durchdachten, Elementen im Web. Mein Lieblings-Tumblr.

Text

Das vielleicht am meisten unterschätzte Designelement im Web: Der Text. Der englische Begriff copy trifft das, was ich meine, etwas genauer. Das deutsche Wort Werbetext klingt im ersten Moment irritierend. Aber genau das ist der Sinn der meisten Texte Internet: Die Tagline der Webseite wirbt für die Seite an sich. Die Überschrift wirbt dafür, dass der erste Absatz gelesen wird. Der erste Absatz wiederum wirbt dafür, dass der Nächste gelesen wird und so weiter.

Wie Jakob Nielsen bereits 1997 festgestellt hat, werden Texte im Web nicht gelesen sondern überflogen (engl. skimming). Eine kreative Formulierung hat also bessere Chancen gelesen zu werden als ein langweiliger und dröger Absatz. Und überhaupt sollte jeder Text so kurz wie möglich und so überfliegbar wie möglich geschrieben sein. Letzteres erreichst du mit hervorgehobenen Wörtern und Textauszeichnungen aller Art.

Bei gutem Webdesign sind Titel, Überschriften und Kategoriebezeichnungen Teil des Designprozesses und damit Teil der Gestaltung an sich.

Subtiler Realismus

Zu Beginn der Web 2.0 Zeit herrschte im Netz der übertriebene Realismus in Form von extremen Spiegelungen, Schlagschatten und Farbverläufen. Ihm folgte der subtile Realismus. Du erkennst ihn an optische Effekte, die so vorsichtig eingesetzt werden, dass sie kaum auffallen aber trotzdem einen Mehrwert bieten.

Schatten erzeugen eine leichte Räumlichkeit und heben Elemente hervor, Farbverläufe simulieren Lichteinfall und Texturen simulieren reale Materialen wie Papier, Holz und so weiter. All diese Dinge funktionieren nur gut, wenn sie vorsichtig und aufeinander abgestimmt eingesetzt werden. Ein übertriebener Effekt kann ein ganzes Design ruinieren.

  • Subtle Patterns – Hier findest du subtile Hintergrundmuster kostenlos zum Downloaden.

Was verstehst du unter gutem Webdesign?

Das waren die wichtigsten Punkte, die für mich ein gutes Webdesign ausmachen. Aber wie Eingangs erwähnt, ist das eine subjektive Angelegenheit. Was gefällt dir besonders gut und worauf legst du bei einem Webdesign wert?

32 Kommentare

  1. Rebecca
    1. Juli 2011 um 11:05 Uhr

    Toller Artikel, der sich nicht nur fürs Webdesign lohnt!

  2. Marcel
    1. Juli 2011 um 13:47 Uhr

    Ein Versuch, gutes Webdesign zu definieren 😉
    „Gutes Webdesign berücksichtigt inhaltlich sowie visuell die Bedürfnissen der Besucher“

  3. Stadtpirat
    1. Juli 2011 um 14:27 Uhr

    Guter Artikel. Jetzt muss ich mir nur noch die verlinkten Seiten durchlesen 🙂

  4. Luka
    1. Juli 2011 um 14:56 Uhr

    Also ich würde sagen gutes Webdesign ist benutzerfreundlich, d.h. jeder findet sich sofort zurecht, egal in welchem alter. Und dann sollte es der Zielgruppe gefallen, sonst nützt es ja nichts und verfehlt sein ziel.

    Mit freudlichen Grüßen
    Luka

  5. Felix Lange
    1. Juli 2011 um 15:57 Uhr

    Schöner Artikel mit interessanten Links. Stimme dir eigentlich in allen Punkten zu.

  6. Claus
    1. Juli 2011 um 17:13 Uhr

    Schöner Artikel – der „7 Surefire Web Design Styles that Work“ Artikel ist aber ein bisschen sehr veraltet.

  7. Florian
    4. Juli 2011 um 21:13 Uhr

    Ich habe vier neue Feeds jetzt. Danke für diesen Artikel!

  8. Kevin
    10. Juli 2011 um 19:41 Uhr

    Geht mir genau wie Florian. Der Artikel ist wirklich klasse!

  9. daniel
    17. Juli 2011 um 21:02 Uhr

    Toller Artikel! In einen Satz gesagt, muss Webdesign die Kunden überzeugen. Nur dann ist es das ideale Webdesign!

  10. Frank
    2. August 2011 um 23:52 Uhr

    Leider lassen viele Kunden einem kaum eine Wahl seinen eigenen Stil zu verwirklichen. Ich versuche dann immer zu erklären was gut und schlecht für eine Website ist, was manche dann auch annehmen, aber die Geschmäcker sind natürlich auch in diesem Bereich verschieden.
    Aber der Artikel ist gut.

  11. Adrian
    4. August 2011 um 21:21 Uhr

    Wichtig ist vor allem, das den Wünschen des Gastes entsprochen wird. Daher muss Webdesign, auch wenn viele optische Effekte vielleicht beeindruckend aussehen, am besten ohne zeitfressende, riesige PNG-Grafiken auskommen und sich möglichst an gestaltlerischen Standards orientieren.

    Dieses Blog ist z. B. sehr schön designt, aber bei der Usability gibt es noch viel Raum nach oben, besonders bei der Navigation.
    Wobei, wie ich sagen muss, die Schönheit des Designs bei einem Webdesign-Blog u. U. wichtiger sein kann als Usability.

  12. Sören Emmrich
    9. August 2011 um 14:41 Uhr

    Danke für diesen tollen Artikel.

    Wie über mir shcon geschrieben wurde, lohnt es sich nicht nur als Webdesigner ihn zu lesen. Einige Links (Typographie bspw.) können auch in anderen Bereichen der Gestaltung noch interessant sein.

    Liebe Grüße
    Sören Emmrich

  13. Sascha Fuchs
    11. August 2011 um 00:34 Uhr

    Gutes Webdesign sollte erstmal zu dem passen für das es gemacht wird. Es sollte Handwerklich und technisch solide sein und dennoch den Anspruch Erfüllen eine Individuelle Note zu erfüllen.

    Wenn man ein Webdesign nicht als solches Wahrnimmt und sich dennoch wohlfühlt, dann hat man etwas hervorragendes Geschaffen. Letztlich geht es ja um eines, dem Content eine adäquate Verpackung zu verpassen.

  14. Hans
    26. August 2011 um 00:41 Uhr

    endlich mal eine Übersicht zum Thema die wirklich überzeugt.

    ich kann allerdings auch meinen Vorredner zustimmen, Webdesign ist vom Fall abhängig und nicht Selbstzweck.

  15. Richard Kanz
    29. August 2011 um 14:26 Uhr

    Für mich ist das einfache Überfliegen eines Textes schon fast am wichtigsten. Dass manche die Formatierung fast außen vor lassen, finde ich ziemlich komisch. Schließlich würde mich das selbst stören, sobald ich mir alles noch einmal durchlese. Ansonsten wäre mir das thematische Design auch wichtig.

  16. Christian
    18. September 2011 um 12:05 Uhr

    Mein Vorposter hat mMn absolut recht. Gutes Webdesign ist wie ein guter E-Bass in einem Rocksong. Es drängt sich nicht auf und man merkt erst was man daran hatte, wenn es fehlt. Danke für diesen tollen Artikel. Er hat mein Bookmarksammlung stark erweitert.

  17. webdesign_ffm
    12. Oktober 2011 um 23:31 Uhr

    Sprechen wir von Design oder Webdesign!? Im Web ist die Gestaltung enger an die Funktionalität gebunden, im Vergleich z.B. zum Printdesign. Web-Usability, am besten keine Vorladezeit, Übersichtlichkeit, Individualität und wie schon erwähnt: Themenbezogenheit – Assoziationen mit dem angebotenem Produkt wecken!

    Meiner Meinung nach pass das Zitat von Frank Lloyd Wright am besten zum Webdesign:

    „Form folgt Funktion – das ist oft missverstanden worden. Form und Funktion sollten Eins sein, verbunden in einer spirituellen Einheit.“

    Vielen Dank für die Dankansätze und die vielen Links!

  18. webdesign_ffm
    12. Oktober 2011 um 23:34 Uhr

    ach ja, die Lesefreundlichkeit!!!

  19. Frank 0703
    2. November 2011 um 21:45 Uhr

    Meine Erfahrung hat gezeigt, dass die Technik stimmen muss, aber beim Design keine Richtlinien gelten.
    Sicher gibt es eine Art Allgemeingültigkeit als Modeerscheinung, aber ich habe beim Design schon Sachen erlebt…
    Z.B. wollte eine Maschinenbau-Firma eine neue Seite. Das Design sah wirklich klasse aus – wurde mir von verschiedenen Leuten bestätigt. Am Ende – nachdem der Kunde all seine Wünsche durchgesetzt hatte, sah die Seite aus als ginge es um eine Imbissbude.

  20. Internetagentur aus Köln
    13. Dezember 2011 um 15:22 Uhr

    Neben einer durchdachten Gestaltung und dem sog. „Call to act“ kommt es bei gutem Webdesign gleichzeitig auf die suchmaschinenoptimierte Ausrichtung an. Die schönste Seite bringt nichts, wenn diese nicht Umsatz generiert und gefunden wird. Deshalb ist die Analyse und die langfristige Betreuung eines Webprojekts wichtig für eine dauerhafte Kundenbeziehung. Das als kurze Ergänzung zum lesenswerten Beitrag.

  21. Red
    21. Dezember 2011 um 16:07 Uhr

    Ich sehe es genauso wie webdesign_ffm.

    Ich denke das es das gesamt Paket ausmacht.

    Gruß Red

  22. Astrid Radtke
    3. Januar 2012 um 09:45 Uhr

    Vielen Dank für diese ausführliche Analyse. Das sollte JEDER lesen, der eine Website erstellen möchte oder über ein Relaunch nachdenkt.
    Die Problematik sehe ich in vielen Seiten – und ich sehe mir sehr viele an, weil ich qualifizierte Bürodienstleister suche, dass bei Typographie und Textgestaltung (mal ganz abgesehen von Design) viele nicht daran denken, dass das mal ein Ausbildungsberuf war. Sicher bezog er sich auf die Druckerbranche, aber die Lesbarkeit eines Textes ist auch ein wesentliches Kriterium im Netz.
    Wie Sie ganz richtig schreiben: weniger ist manchmal mehr. Nirgends gilt der Satz mehr: es gibt keine zweite Chance für einen ersten Eindruck – und wenn der negativ ausfällt, kommt dieser Besucher (potentielle Kunde) nie wieder.

  23. Webdesign München
    3. Februar 2012 um 23:41 Uhr

    Hallo Christian! Wirklich sehr gut gelungener und schön strukturierter Artikel. Speziell in punkto Unterschätzung der Wichtigkeit von Texten gebe ich Dir recht. Optimierte, fachlich kompetente und ansprechend formulierte Texte sind absolute Pflicht.

  24. Coco
    18. Februar 2012 um 13:53 Uhr

    Ich stimme dem Artikel voll zu. Allerdings sind meines Erachtens nach auch die Emotionen wichtig, die das Design transportiert. Denn eine Webseite sollte im bestenfall nicht nur Informationen sondern auch ein bestimmtes Feeling vermitteln, das dem Webseitenbetreiber / Unternehmen gerecht wird.
    Sprich: Man kommt auf die Seite und fühlt sich sofort – ohne auch nur ein Wort gelesen zu haben – irgendwie am richtigen Ort.

  25. CrazyCuts
    8. März 2012 um 17:58 Uhr

    Hallo Christian,

    erstmal Gratulation zu deinem sehr gelungenen Artikel und Danke für die wertvollen Links! Viele Lesestoff für die nächsten Tage 🙂

    Ich denke, dass die Zielgruppe einer jeden Seite sollte im Mittelpunkt bei Planung und Gestaltung stehen. Leider glauben viele Betreiber einer Webseite selten so und achten eher darauf, dass die Seite ihren Ansprüchen genügt…

    Beste Grüße aus Köln!
    Der Micha

  26. CrazyCuts
    8. März 2012 um 17:59 Uhr

    glauben = denken…sorry 🙂

  27. Seo Köln
    22. April 2012 um 20:26 Uhr

    Das Ganze ist ein schwieriges Unterfangen.
    Selbst wenn man den schmalen Grat zwischen dem was der Kunde wünscht und was aus Design Sicht gut ist hinbekommt, muss das Ganze dann auch noch tauglich für SEO sein. Meistens muss einem der 3 Dinge Tribut gezollt werden.

  28. Nina
    5. Mai 2012 um 18:59 Uhr

    Richtig gutes Webdesign ist vor allem nicht aufdringlich, hindert nicht daran die Informationen zu finden, die man sucht. Ich finde es geht aktuell in die richtige Richtung, schaut euch einmal auf archive.org an was so vor 15 Jahren Standard war 🙂

  29. Marcel Webdesigner
    10. Mai 2012 um 11:19 Uhr

    Auch von mir Gratulation zu deinem sehr gelungenen Artikel.
    Gutes Webdesign sollte erstmal zu dem passen für das es gemacht wird. Es sollte Handwerklich und technisch solide sein und dennoch den Anspruch Erfüllen eine Individuelle Note zu erfüllen.

  30. Vladislav Melnik
    25. Mai 2012 um 12:24 Uhr

    Hey Christian,

    danke für diesen interessanten Beitrag und die tollen Links!

    Ich finde auch, dass man nicht unbedingt einen eigenen Stil haben muss. Wenn man dann einen eigenen Stil hat, muss dieser auch zeitlos sein.

    Wie du es schon beschrieben hast, gibt’s mehrere Stilrichtungen, die sind auch immer wieder ändern. Deshalb denke ich,
    dass man seinen Stil immer an die aktuelle Zeit anpassen sollte und dennoch ein wenig eigenen Flavour reinbringen sollte – eben wie bei einem guten Cocktail 🙂

    Viele Grüße
    Vladislav

    P.S.: Ich habe auf meinem Blog auch einen Beitrag zum Thema gutes Webdesign geschrieben: http://www.affenblog.de/7-gruende-warum-gutes-webdesign-so-wichtig-ist und habe dich zitiert. Hoffe, das ist ok so?

  31. WPK
    6. Juli 2012 um 12:18 Uhr

    Hi Christian,

    erstklassig geschrieben und gut recherchiert. Danke für die vielen informativen Links!
    Abseits des eigentlichen Designs gibt es aber noch einen sehr erwähnenswerten Faktor für eine erfolgreiche Webseite: Die Zielgruppenoptimierung. Daran sollte sich natürlich auch das Design, die Texte und die Strukturierung der Seite richten, um in der jeweiligen Zielgruppe optimal anzukommen.

  32. Muhammed
    20. August 2012 um 21:26 Uhr

    Also ich persönlich finde eine Webseite dann gut, wenn sie übersichtlich und sauber gestaltet ist.
    Sobald ich auf eine Webseite gelange und mit Grafiken sowie Menüleisten zugebombt werde, kommt es sehr oft vor, dass ich sie sofort wieder verlasse.