Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Gestaltung / Design

Tipps zur Gestaltung von Webseiten (Design)

Bei Einhaltung einiger Grundregeln können Sie auch ohne Webdesigner-Ausbildung brauchbare Resultate erzielen. Darüber hinaus sollten Sie bereits beim Entwurf Ihres Designs die mögliche Zielgruppe im Auge behalten. Erwarten Sie viele Zugriffe über mobile Endgeräte, so wäre evtl. eine parallele mobile Website sinnvoll. Wollen Sie diesbezüglich auf Nummer sicher gehen, wäre ein responsive Webdesign sicherlich die bessere Wahl. Das heißt: Bevor Sie mit dem Design beginnen, brauchen Sie ein schlüssiges Konzept. Dadurch sparen Sie sich unnötige Iterationsschleifen und somit Zeit und Geld.

Grundlegende Designregeln

  • Ihr Layout sollte über den gesamten Webauftritt durchgängig sein.
  • Legen Sie einen farblichen Grundton fest, auf dem Ihr Webauftritt basieren soll und suchen Sie sich hierzu Bilder, die mit dem gewünschten farblichen Grundton harmonieren.
  • Halten Sie im Zweifelsfall die Farbgebung schlicht. Nicht mehr als zwei bis vier Farben sollten verwendet werden.
  • Animationen sind Bewegungen. Sie ziehen zwar kurzzeitig die Aufmerksamkeit auf sich, werden aber auf Dauer eher als störend bis nervig empfunden. Setzen Sie deshalb Animationen sehr sparsam ein.
  • Wenn Sie Icons verwenden wollen, gestalten Sie sie einfach, eindeutig und verwenden Sie sie immer im gleichen Kontext.
  • Verwenden Sie nur webtaugliche Bildformate.
  • Optimieren und kombinieren Sie Ihre Bilder, z.B. in CSS-Sprites, damit Ihre Website maximale Performance erreicht.
  • Ein großflächiges Design muss es nicht sein.
  • Generell gilt: Weniger ist manchmal mehr und schlank ist angesagt.

Wählen Sie für Ihr Design eine optimale Raumaufteilung

  • Teilen Sie die Inhalte ergonomisch auf. Eine Aufteilung auf Basis des „goldenen Schnittes“, d.h. eine proportionale Aufteilung im Verhältnis von 1:1,618 wird vom Menschen als besonders angenehm und harmonisch empfunden.
  • Vereinfacht können Sie die Seite als Basis horizontal und vertikal mit einem Drittel-Raster versehen.
  • Verwenden Sie Symmetrien, wenn die Webseiten harmonisch und beruhigend wirken sollen oder verwenden Sie bewusst asymmetrische Effekte, um den Betrachter in den Bann zu ziehen und Ihn aktiv zu beteiligen.
  • Das menschliche Auge fokussiert sich hauptsächlich auf den zentralen Bereich. Dort werden die Informationen sehr bewusst wahrgenommen.
  • Die Randbereiche werden durch das Auge eher unterbewusst wahrgenommen. Mit bestimmten Reizen können Sie bewusst die Aufmerksamkeit in diese Zonen lenken.

Ein klar strukturiertes Design hilft bei der Orientierung

  • Verwenden Sie eine klare Hierarchie Ihrer Navigationsleisten. Verschachteln Sie die Navigationsleisten nicht unnötig tief. Nach spätestens drei Klicks sollte der Besucher am Ziel sein.
  • Die Inhalte stehen im Mittelpunkt und sollten daher ebenfalls klar strukturiert werden.
  • Grenzen Sie inhaltliche Blöcke voneinander ab.
  • Die besten Mittel zur Strukturierung sind Überschriften und Bilder.
  • Lenken Sie durch Größe, Kontrast und Farbe die Augen Ihrer Besucher auf die wesentlichen Elemente.
  • Heben Sie Schlüsselstellen hervor.
  • Nahe beieinanderliegende Objekte werden vom menschlichen Auge als Gruppe wahrgenommen.
  • Eingerahmte oder anders geschlossene Flächen werden ebenfalls als Einheit gesehen.

Web 2.0 Design

Web 2.0 steht für die zunehmende Verbindung interaktiver Anwendungen im Web. Dies ist aber auch charakterisiert durch wesentliche gestalterische Elemente:

  • einfache Struktur und Navigation
  • hervorstechende Header
  • deutlich größere Schriften
  • grelle Farben
  • Reflektionen und Farbverläufe
  • markante Icons und Buttons

Responsive Webdesign - ein Design für alle Anwendungsfälle

Die Geräte, mit denen auf Webseiten zugegriffen wird, werden immer heterogener. Früher gab es nur Desktop-Browser und Smartphones, für die Sie jeweils eine optimierte Website anbieten konnten. Die Unterscheidung konnte über den Useragent gesteuert werden. Heute gibt es Smartphones, Tablets, Netbooks, Bildschirme in allen Größen und Auflösungen, so dass die Unterscheidung nicht mehr so einfach und sicher möglich ist. Deshalb ist der Einsatz eines responsive Webdesign sicherlich sinnvoll, d.h.:

  • Je nach Auflösung, Bildschirmgröße, Ausrichtung (horizontal, vertikal) werden die Inhalte optimiert dargestellt.
  • Ein fluid-Design (fließendes Design) ist hierfür notwendig. Lösen Sie sich von altem Webdesign basierend auf Tabellen. Verwenden Sie stattdessen Divisions. Verwenden Sie relative (em oder %) und keine absoluten (px) Maßangaben.
  • Die Unterscheidung und Anordnung der Design-Elemente erfolgt über Media Queries.
  • Über den mobile first Ansatz können Sie das Übertragungsvolumen für die einzelnen Versionen optimal steuern.