Webdesign: Konzeption & Gestaltung

Beim Scribbeln haben wir bislang nur unsere Elemente angeordnet und diese auf die Usability hin geprüft. Eine richtige Gestaltung fand noch nicht statt. An diese wagen wir uns jetzt.

Zunächst einmal prüfen wir, ob wir für uns selbst oder für einen Kunden eine Website gestalten und entwickeln müssen. Falls die Website für einen Kunden konzipiert wird, ist es wichtig zu erfahren, ob es seitens des Auftraggebers Gestaltungsregeln gibt. Diese Gestaltungsregeln finden sich meistens in sogenannten Style-Guides. Innerhalb eines Style-Guides sind Typografie, die Anordnung und Position eines Logos, die Unternehmensfarben und weitere Gestaltungsregeln definiert. Sie dient der Einhaltung einer einheitlichen und plattformunabhängigen Unternehmenspräsentation sowie zur Stärkung der eigenen Marke. Stichwort: Corporate Identity.

Hat man keine Gestaltungsregeln vorliegen, sollte man selbst bestimmte Regeln einhalten, um ein gutes und professionelles Design zu entwickeln.

Farben

Beginnen wir mit den Farben: Suchen Sie sich passend zu Ihrer Unternehmung 3 bis maximal 5 Farben. Achten Sie darauf, dass die Farben nicht zu schrill oder zu dunkel sind. Ihre Konturen sollten gut zu erkennen sein. Ein Tipp: Im Internet finden sich zahlreiche Informationen zur Farbenlehre. Besonders harmonisch sind die Farben, die sich im Farbkreis gegenüberstehen. Moderne Farben erhalten Sie mit den Suchbegriffen „Flat UI Colors“ und „Color Drop“.

Schrift / Fonts

Haben Sie Ihre Farben festgelegt, geht es weiter zu den Schriftarten. Im Web werden Sie auch „Fonts“ genannt. Nicht alle Schriftarten, die bei Ihnen auf dem Computer verfügbar sind, lassen sich auch bei anderen Besuchern ansehen und nutzen. Achten Sie hier auf die Nutzung von sogenannten Webfonts. Und das auch bei der Gestaltung.

Nutzen Sie hier zwei, maximal 3 Schriftfamilien für Ihr Webdesign. So ist es sinnvoll, sich für einen Fließtext auf eine Standard-Schrift festzulegen. Für Headlines in verschiedenen Größen ist es schön, wenn sich zu einer bereits festgelegten Schrift auch noch eine zweite findet.

Hilfe bieten auch die Google Webfonts an. Unter „fonts.google.com“ können Sie nicht nur durch viele verschiedene Schriftfamilien stöbern. Es wird Ihnen bei jeder Schriftart auch ein beliebter Schriftpartner angezeigt. Scrollen Sie also bei jeder ausgewählten Font runter zu den „Popular Pairings“ und sehen Sie sich gleich dazu ein passendes Beispiel an.

Grafiken und Fotos

Grundsätzlich gilt bei modernen Designs: Weniger ist mehr. Lassen Sie die Anordnung Ihres Inhalts mit der passenden Typografie und den passenden Farben wirken. Eine Grafik oder ein Foto dient hier nur als unterstützendes und verstärkendes Element. Somit schaffen Sie ein aufgeräumtes und sauberes Design – der Fokus liegt auf Ihren Inhalten und nichts lenkt ab. Verwenden Sie also nicht zu viele Grafiken und Fotos pro Seite. Ist mit einer Grafik oder einem Foto bereits alles gesagt, sollten Sie nicht weitere typgleiche Elemente einsetzen.

Weitere Elemente für den Nutzer der Website

Vergessen Sie bitte nicht, dass Sie die Website nicht nur für sich, sondern hauptsächlich für den Besucher gestalten. Bestimmte Elemente helfen dabei, spezielle Inhalte besser zugänglich zu machen.

Ein Beispiel:

Sie bieten auf Ihrer Website unterschiedliche Leistungen und Preise an. Für eine bessere Vergleichbarkeit sollten Sie auf das Element einer Preistabelle zurückgreifen.

Diese Tabelle bietet zum Beispiel eine gute Übersicht über Ihren Leistungsumfang und die entsprechenden Preise. Für den Besucher Ihrer Website ist diese Information dann leicht zugänglich.

Selbstverständlich gibt es noch zahlreiche, weitere Elemente im Webdesign. Nutzen Sie zum Beispiel Tabellen, Listenpunkte, Icons, Akkordeons und viele andere Elemente. Überlegen Sie sich vorab gut, wie Sie Ihre Inhalte dem User so einfach wie nur möglich vermitteln können.

Entwurfsprogramme / Designprogramme

Für die Entwurfsgestaltung sollten Sie professionelle Grafikprogramme einsetzen. Diese erleichtern Ihnen die Arbeit und ermöglichen gute und professionelle Ergebnisse bis ins kleinste Detail. Für die Erlernung und Bedienung zahlreicher Grafikprogramme gibt es weitere, vertiefende Kurse. Sowohl offline in Vor-Ort Akademien und Schulen, sowie online als Video-Tutorials.

Und nun ein paar Tipps, die gutes Webdesign noch besser machen:

(1) Nehmen Sie sich die Zeit! Ein gutes Design benötigt Zeit. Kein gutes Design funktioniert auf die Schnelle. Auch offensichtlich einfache Designs brauchen Ihre Zeit. Wichtig auch: Gönnen Sie sich Pausen und schauen Sie mit zeitlichem Abstand auf bisherige Entwürfe.

(2) Behalten Sie Ihr Ziel im Auge: Denken Sie daran während der Entwurfsphase das Ziel nicht aus den Augen zu verlieren.

(3) Weniger ist mehr: Überfordern Sie weder sich, noch Ihre Nutzer. Weniger ist mehr. Zu viele Elemente, eine komplizierte und überfrachtete Navigation, zu viele unterschiedliche Grafiken und Fotos machen die Website schlecht lesbar.

(4) Ihr Design bedeutet auch Vertrauen: Die oben genannten Tipps in den Lektionen helfen, ein Design zu entwickeln, welches auch Vertrauen beim Nutzer schaffen soll.

(5) Lassen Sie sich von den Besten inspirieren – kopieren Sie aber nichts: Lassen Sie sich von guten Webdesigns inspirieren. Kopieren Sie dabei keine Designs, sondern achten auf die kleinen, aber feinen Unterschiede. Wie sind die Textabstände? Ist die Typografie stimmig? Welche Farben werden wie eingesetzt? Wie wird der Fokus auf das Produkt, den Inhalt oder die Dienstleistung gesetzt? Gibt es Handlungsaufforderungen, sogenannte Call-To-Actions?

(6) Haben Sie Spaß am Webdesign: Ohne Leidenschaft und Freude beim Entwerfen ist jedes Design nichts.

Sie wollen nun mit der Praxis starten? Klicken sie auf den Button nach dem Kurs, um den passenden Video-Kurs zum Sonderpreis zu erhalten.