Design ist die Kunst aus einer Idee ein Bild oder ein Objekt zu erschaffen, das den Betrachter begeistert und die Idee perfekt „realisiert“ – im Sinne von Wirklichkeit werden lässt.

Produkt-Design ist die Kunst ein Objekt aus einer Idee zu erschaffen, das nicht nur den Betrachter oder Benutzer begeistert, sondern darüber hinaus, es funktional so auszugestalten, dass es seinen Zweck erfüllt, es reproduzierbar in Stückzahlen ist, und dabei ökonomisch und ökologisch sinnvoll.

webdesign

Webdesign beinhaltet die Wörter „Web“ und „Design“.

„Web“ bezieht sich auf den Anwendungsfall oder Bestimmungsort, das Netz bzw. das Internet.

„Design“ bezieht sich auf das visuelle Erscheinungsbild, die bildliche Ausgestaltung, die Formgebung, die Proportionen, die Komposition, die Farben. Es geht also um das Erscheinungsbild im Internet, das Design für das Web – genauer für Ihre Webseite.

Da im Internet nicht nur visuelle sondern auch funktionale Aspekte eine Rolle spielen, sind diese häufig mit zu betrachten.

dimensionalität

Ausschlaggebend für das Design ist zunächst einmal das Medium, mit dem es präsentiert wird. Es wird in der Regel über Bildschirme präsentiert. Diese sind 2-dimensionale Flächen zur Darstellung 2-dimensionaler Grafiken, Bildern und Texte. Dank fortschreitender Technik können z.B. über spezielle Effekte auch 2.5D und 3D-Bilder auf Bildschirmen visualisiert werden.

Beim Design einer Webseite oder eines Webshops ist eine grundsätzliche Entscheidung für das Design die Dimensionalität. Sollen z.B. Produkte als Bilder oder Videos oder als dreidimensionale Objekte im virtuellen Raum dargestellt werden oder eher doch noch konventionell?

Inbesondere durch Technologien wie AR/VR, Web3D und WebGL lassen sich vermehrt auch dreidimensionale Darstellungen erzielen – nur sind die Produktionskosten und Komplexitäten teilweise so hoch, dass sich diese Technologien erst mühsam massentauglich entwickeln.

Anders ist es bei Video. Es gibt kaum eine Webseite, die heute keine Bewegtbilder nutzt.

Mit dem Aufkommen von KI Bild- und Videogeneratoren zeichnet sich hier allerdings ein Zeitalter grenzenloser Möglichkeiten ab.

Vom Print-Design her gilt vieles auch beim Webdesign. Linienführung, goldene Regel, Strichstärken, Formen und Farben lassen sich direkt in 2D-Webdesigns umwandeln.

Die Entscheidung der Dimensionalität hat noch eine weitere Komponente: die Auflösung. Die Inhalte werden für eine maximale Auflösung produziert. Diese sollte aus rein optischen Gründen so hoch wie möglich sein, damit dem Auge keine Rasterpunkte auffallen. Bei 2D Bildern ist dies bereits anspruchsvoll vom Speicherplatz her. Bei 3D Bildern ist es das noch um so mehr. Und wenn es um Video geht, sind diese sehr bis sehr, sehr anspruchsvoll. Speicherplatz heisst immer Übertragungszeit und Reaktionszeit der Webseite. Daher muss auch hier sehr genau abgewogen werden, welchen Vorteil z.B. ein hochauflösendes Bild bringt, und wie viel Ladezeit es kostet.

Bei kleinen Servern kann das bereits ein ernstes Problem darstellen. Wenn die Seite dann aber 50 Produkte darstellen soll, dann ist das Problem ggf. noch 50 mal ernster.

Corporate identity

Das Webdesign sollte mit Ihrer Corporate Identity Hand in Hand gehen und voll darauf abgestimmt sein.

brand

Wahrscheinlich haben Sie Ihre Marke bereits. Bei der Marke geht es um einen Namen mit Bedeutung und ein Logo, das sie einzigartig und herausragend macht.

Die Marke kann auch einen Slogan haben, um sie noch deutlicher zu machen.

Farben

Im CI sind Ihre Unternehmens-Farben festgelegt – oder sollten es sein. Wenn nicht, dann legen Sie sie fest.

Wichtig ist, dass die Farben zu Ihrem Logo passen und dass sie positive Stimmungen und Gefühle vermitteln. Das muss nicht nur Flower-Power-Happiness sein, sondern kann durchaus auch Seriosity oder Business-Style sein, je nach dem, was Ihr brand am besten unterstützt.

Die Farben sollten als Ausgangsbasis für das Design gelten, zumindest sollte das Design mit diesen Farben harmonieren.

Bei der Farbgebung ist zu beachten, dass auf Bildschirmen Farben ganz unterschiedlich ausfallen können, und ggf. auch auf Papier funktionieren müssen. Desweiteren sind die Kontraste möglichst so zu wählen, dass sie klare und scharfe Abgrenzungen unterstreichen.

Farbpaletten gibt es auch als Anschauungsmodelle auf spezialisierten Webseiten und dort lassen sich sehr gute und elegante Kompositionen ableiten.

Formen

Bei den Formen und der Formgebung ist zu beachten, welche Botschaft sie unterstreichen sollen.

Ist Ihr Auftreten eher groß und breit ? Oder eher kleiner ? Eher elegant ? Eher stürmisch ?

Groß und breit könnte zum Beispiel mit rechteckigen Formen und großen Flächen unterstützt werden.

Kleiner würde sich ebenfalls mit rechteckigen Formen, aber mit kleinen Flächen visuell untermalen lassen.

Elegant sind meist sehr flache, abgerundete Formen.

Stürmisch wäre z.B. ein Verzerrungseffekt, der Formrandungen nicht geradlinig aber sehr dynamisch ausgestaltet.

Und dann sind wie bereits bei den Flächen beschrieben auch die Proportionen in der Formgebung entscheidend.

Gleichmäßige, leicht geneigte, dünne Flächen z.B. unterstützen ein Bild mit Leichtigkeit, und bewirken ein eher schwebendes Gefühl eines Gegenstandes bei dem Betrachter.

text

Ein ganz wichtiger Teil des Webdesigns sind auch die Auswahl der Schriftarten und der Typographie.

Wenn Sie eine Corporate Identity haben, ist es gut möglich, dass diese Parameter dort bereits festgelegt sind. Dann würde ich diese überprüfen und - sofern möglich - verwenden.

Wenn Sie keine speziellen Vorgaben haben, gibt es eine Reihe an Anschauungsbeispielen im Netz und spezialisierte Seiten, auf denen Schriftarten erworben werden können, bzw. zur kommerziellen Nutzung angeboten werden.

Für kleine Projekte und erste Gehversuche bieten sich entweder die Standardfonts Arial oder Times New Roman an, oder aber z.B. Adobe oder Google Fonts.

layout

Das Layout unterscheidet sich geringfügig vom Webdesign, ist aber eher ein Element davon.

Beim Layout geht es darum, welcher Inhalt sich wo auf den Seiten befindet und wie groß er ist und welche Proportionen die Schriftarten in Titeln, Untertiteln unterschiedlicher Reihenfolge, normalem Text, Beschreibungen und Anmerkungen haben.

Dies beginnt häufig mit einem Drahtrahmen („wire frame“). Der Drahtrahmen ist immer ein geeignetes Hilfsmittel, wenn man grob strukturiert und erst einmal Proportionen und Positionen testen möchte.

Um den Inhalt zu platzieren, ist es immer hilfreich die Bereiche Kopfzeile, Rumpf und Fußzeile zu trennen.

Zwischen Kopfzeile und Rumpf ist ggf. noch ein Navigationsmenü einfügen.

Dann linke oder rechte Seitenleisten.

Wenn die grobe Einteilung erfolgt ist, können weitere Detailbereiche im Rumpf erarbeitet werden. Dabei können dann die genau Textgrößen und Abstände festgelegt werden, die Anzahl und Größe der Bilder und Videos, etc…