18 wichtige Grundlagen beim Webdesign
Wenn man das Design einer Website erstellt, dann spricht man auch von Webdesign. Oder noch besser von Design ode User Experience/ User Interface, kurz UX/ UI Design.
Hinweis: Viele Ideen wurden von dem Designer Jonas Arleth und seinem Webdesign Blog übernommen.
Hier ein paar Grundsätze im Webdesign:
1) Erst Inhalte, dann Design
Es ist wichtig, dass die Bilder, Texte, Videos, etc. bereit liegen, bevor der Designer mit den Prototypen oder Photoshop Designs anfängt.
Denn es ist wichtig für den Webdesigner zu wissen, wie lang die Inhalte sind und wo diese eingefügt werden müssen.
Es macht einen Unterschied, ob ein Satz 5 Wörter hat oder 8 Wörter. Das Design wird dadurch beeinflusst.
Ein professioneller Designer wird darauf bestehen, die Inhalte vor seiner Arbeit zu erhalten.
2) Der Designer macht das Design, Texte müssen von anderen bereitgestellt werden
Der Designer ist zudem nicht zuständig die Texte zu schreiben. Hierfür müsste man zum Beispiel einen externen Texter dazuholen, oder gar die Texte selber schreiben. Es macht jedoch Sinn einen professionellen Copywriter, für die wichtigsten Texte auf der Website, zu engagieren. Zum Beispiel Überschriften, etc.
3) Ein guter Designer stellt viele Fragen
Zum Start und auch wärend des Projektes wird der Designer viele Fragen stellen. Das ist immer ein gutes Zeichen.
Denn er/ sie muss verstehen, was das Ziel der Umsetzung des Designs ist.
Fragen könnten sein:
- a) Wer sind die Kunden von Ihnen?
- b) Wo kommen die meisten Webbesucher her? Über das Smartphone, über das Tablet, über den Desktopbrowser?
- c) Auf was achten Ihre Kunden?
- d) Welche Eigenschaften in Ihrer Branche erhöhen das Vertrauen?
- e) Was sind die Ziele? (Mehr Kunden, mehr Umsatz, mehr Webbesucher, mehr ausgefüllte Kontaktformulare? etc.)
Die Liste der Fragen kann sehr lang sein, die oben genannten sind nur ein kleiner Ausschnitt. Diese Fragen sollten beantwortet werden.
4) Farben/ Schrifttypen festlegen
Der Designer kann sich die bestehenden Farben, Logos, etc. anschauen und dadurch eine Farbpalette bestimmen, die dann auf der Website genutzt wird.
Zudem kann man auch die Schrifttypen/ Fonts festlegen. Es macht Sinn zum einen 1) weniger Fonts zu verwenden, sondern eher vielleicht zwei bis drei unterschiedliche und zweitens 2) Fonts zu wählen, die der Browser schnell laden kann. Es gibt unterschiedliche Tabellen Online, wo man die Ladezeiten der unterschiedlichen Fonts finden kann.
5) Designprozess verstehen (Design vs Webdesigner vs Webentwicklung)
Für einen Laien oder eine nicht aus der IT kommenden Person, kommt es oftmals so vor, dass das Design direkt in der Website erstellt wird. Und damit schon alles fertig wird.
In der Realität ist die Erstellung des Designs ein elaborater Prozess.
Dieser fängt an, mit einem Designer, welcher Skizzen mit Bleistift und Papier erstellt. Dann werden Mockups/ Wireframes mit Werkzeugen wie Sketch erstellt, wo die grundlegende Struktur der Website aufgezeigt wird. Dabei (bei den Mockups/ Wireframes) handelt es sich noch nicht um Designs! sondern lediglich wo Textblöcke, Bilder, Buttons und ähnliche, auf der Website erscheinen sollen.
Danach wird mit sogenannten Mood Boards eruiert, wie das Design aussehen kann. Auf diesen Mood Boards werden Design Ideen gesammelt, zum Beispiel von Internetseiten aus der gleichen Branche des Kunden.
Inspiriert von den Mood Boards und dem Wissen zu der grundlegenden Struktur (Wireframes), wird der Designer nun anfangen die Designs zu erstellen. Hierbei wird oftmals mit Photoshop, aber immer mehr zunehmend mit Sketch gearbeitet. Erst in diesem Schritt entstehen die Designs, welche auf der Website erscheinen werden!
Wichtig: Hier ist die technische Umsetzung noch nicht gemacht. Dies sind nur die Schritte der Designphase. Es gibt weitere Phasen, zum Beispiel ein Webdesigner (nicht zu verwechseln mit dem Designer), erstellt das HTML/ CSS und ein Webentwickler arbeitet es in ein Content Management System oder ähnliches ein.
6) Gute Designer wählen ihre Kunden aus
Gute Designer arbeiten nur mit Kunden zusammen, die auch Fragen beantworten und die Zeit wertschätzen, welche es für das Design benötigt.
Gute Designer nehmen oftmals auch hohe Stundensätze. Dafür sind es dann aber auch Experten, die ihr Handwerk verstehen.
7) Design braucht Zeit
Wie der Designprozess bereits gezeigt hat. Design braucht Zeit.
Es ist nicht in einem Tag getan. Oftmals kann der Prozess mehrere Wochen dauern.
8) Design hat Auswirkung auf die Performance einer Website
Je nachdem wie die Website designed ist, kann es auch Auswirkungen auf die Performance haben.
Ein guter Designer weiss, dass weniger Bilder und ein schlankes Design, die Wiedergabe auf vielen Endgeräten vereinfacht.
Die spätere technische Umsetzung (über den Webentwickler) wird durch das Design beeinflusst.
9) Wireframes (es geht um die grundlegende Struktur, weniger um das Design)
Der Wireframe Prozess wurde bereits in einem vorherigen Punkt in diesem Beitrag beschrieben.
Der Vorteil von Wireframes ist, dass es sich nicht um komplexe Designs handelt. Und damit lassen sich schnell Änderungen vornehmen.
Damit lassen sich unterschiedliche Strukturen und Platzierungen von Bildern und Texten, testen.
10) Responsive Design, besser weniger Screens und für weniger Endgeräte designen (Entscheidung: Wo kommen die meisten meiner Webbesucher her?)
Die meisten Kunden kennen die Herausforderungen eines Webdesigns für viele Endgeräte nicht.
Es gibt unendliche viele Endgeräte, Smartphone-Grössen, Tablets, Browser (Chrome, Firefox, Explorer, Edge, etc.), viele Desktopbildschirme in unterschiedlichen Grössen. Die Liste lässt sich hier lange weiterführen.
Es ist also fast unmöglich geworden für viele Endgeräte gleichzeitig zu designen.
Besser ist es, festzulegen, wo der Grossteil der Kunden herkommt. Zum Beispiel über den Desktop-Browser und hier über Google Chrome und Mozilla Firefox.
Nun kann sich der Designer auf diese Vorgabe einstellen und mit Fokus auf diese Browser, designen.
Auch mit sehr viel Budget und sehr viel Zeit ist es nicht ratsam für viele Endgeräte zu entwickeln. Sogar die grossen Anwendungen im Internet fokussieren sich auf wenige Bildschirmgrössen und wenige Browserversionen.
10) Teil 2: Es gibt einen neuen Designansatz namens „Mobile First„. In diesem Zusammenhang gibt es auch den Begriff „Progressive Enhancement„. Man fängt an für den kleinsten Bildschirm, mit der geringsten Konfiguration (zum Beispiel, wenig Speicher, kleine CPU im Smartphone, alte Browser Version) zu designen und expandiert dann zu grösseren Bildschirmen und besseren Konfigurationen. Somit stellt man sicher, dass die Website auf maximal vielen Endgeräten gut aussieht. Dennoch: Der Weg über die Entscheidung „Wo kommen die Kunden überwiegend her“ kann der bessere Ansatz sein.
11) Testingaufwand reduzieren
Das Testing von Webseiten und Designs kann unendlich lange dauern. Besonders wenn der Anspruch besteht auf allen Endgeräten funktionieren zu wollen. Hier sollte man sich auf wenige Endgeräte spezialisieren.
Am besten auf Smartphones einer kleinen Grösse und mit einer schwachen Konfiguration (CPU, Speicher, etc.), dann kann man davon ausgehen, dass es auch auf grösseren Smartphones funktionieren wird.
12) Änderungswünsche vermeiden
Ein guter Designer weiss wie man ein gutes Design erstellt. Viel Wissen wird genutzt, um die Designs zu erstellen.
Dinge wie Responsive Design, Darstellung auf Bildschirmen, die technische Umsetzung in Browsern und vieles mehr wird berücksichtigt.
Das bedeutet jedoch auch, dass Änderungswünsche nur schwer umsetzbar sind. Einfach mal das Logo vergrössern oder ein Bildschirm verschieben ist keine einfache Aufgabe, sondern kann das komplette Designkonzept verändern.
Daher ist es wichtig die Designvorschläge vom Designer zu akzeptieren. Oder diesen zu Fragen, welche Möglichkeiten für Änderungen es gibt.
Selbst, als nicht-Designer, Designänderungen zu geben, ist meistens keine gute Idee.
13) Sketch vs Adobe Photoshop
Wenn man ein Design für eine Website oder eine App erstellt, dann nutzt der übliche Webdesigner, Photoshop.
Das ist jedoch eine Art Hack. Denn Photoshop ist eigentlich für die Bearbeitung von Bildern gedacht. Weniger für die Erstellung von digitalen Layouts.
Komischerweise gibt es erst seit wenigen Jahren wirklich Werkzeuge, die für das Design von Weblösungen gedacht sind. Zum Beispiel Sketch.
Damit lassen sich Designs für unterschiedliche Bildschirmgrössen erstellen. Es werden zudem auch technische Umsetzungen genutzt, welche für das Web geeignet sind (zum Beispiel Vektorgrafiken, etc.).
Ein moderner Designer arbeitet daher mit Sketch. (Jedoch ist Adobe Photoshop immer noch der Industriestandard)
14) Mood Board
Beim Mood Board geht es darum, die Stimmung, die Gefühle zu ermitteln, welche ein Design mitbringen soll. Von unterschiedlichen Stellen im Internet kann man hier Ideen sammeln. Zum Teil kann man auch Designideen aus Printmedien oder Architekturvorlagen nehmen.
Daraus entsteht dann die Designrichtung für das Design.
15) Klickdummy (Invision/ Adobe XD)
Wenn das Design erstellt ist, zum Beispiel mit Photoshop oder Sketch, dann kann man einen Klickdummy erstellen.
Für Sketch kann man ein zusätzliches Werkzeug namens Invision nutzen, um diese Klickdummys zu erstellen.
Adobe XD ist das Pendant für Windows für Klickdummys (denn Sketch ist hauptsächlich auf dem Apple Mac verfügbar).
Das Gute bei diesen Klickdummys ist, dass man sich dort bereits durchklicken kann und sehen kann, was passiert. Natürlich gibt es weniger Effekte, wie auf einer Website. Man sieht jedoch die unterschiedlichen Screens und wie der Klickverlauf ist.
16) Gutes Design hat seinen Preis
Ein guter Designer kennt die Design-Best-Practices. Er oder sie weiss worauf es ankommt, um Designs zu erstellen, die bei den Kunden der Kunden ankommen.
Ein einmal erstelltes Design kann für Jahre Erfolg bedeuten.
Ein guter Designer weiss das und wird hierfür dementsprechend Preise verlangen.
Stundensätze von 100 Euro sind nicht unüblich.
Zudem sollte man auch den langen Webdesign Prozess beachten (Initiales Briefing, Fragen stellen, Skizzen, Wireframes, Mood Board, Adobe Photoshop Designs, Klick Dummy, Absprache mit Kunden, Absprache mit Webentwickler).
17) Der Designer macht das Design und stellt keine Optionen bereit
Wie bereits erwähnt: Der Designer ist der Profi. Die Idee ist es weniger, dass der Kunde sagt “Bitte das Logo etwas grösser”, “Das Bild hier”, “Die Überschrift da”. Das ist die Entscheidung des Designers.
Daher wird ein guter Designer nicht zwei oder drei Designoptionen bereitstellen. Sondern eine gute Version, welche man nutzen kann.
Wenn man trotzdem Änderungen vornehmen will, sollte man sich mit dem Designer zusammensetzen und diesen Fragen was möglich ist.
18) Enge Zusammenarbeit Designer und Entwickler
Ein Design kann nicht ohne die Zusammenarbeit mit dem Webentwickler geschehen. Denn unterschiedliche System (Content Management Systeme wie WordPress oder TYPO3, Onlineshop Systeme wie Magento oder Shopware, PHP Frameworks wie Laravel oder Zend, Mobile Betriebssysteme wie iOS oder Android), alle haben ihre eigenen Designgrundlagen.
Das bedeutet auch, dass der Designer den Entwickler fragen muss, wie ein Design auszusehen hat, damit die technische Umsetzung richtig funktioniert.
Es ist also nicht einfach damit getan, dass der Designer, in Zusammenarbeit mit dem Kunden ein Design erstellt. Der Designer muss auch das Feedback vom Entwickler bekommen, der sagt, was dieser benötigt.
Fazit
Es gibt oftmals Verwirrung, wenn es um das Design einer Website geht. Besonders auch weil der Begriff “Webdesign” für unterschiedliche Bereiche verwendet wird. Ein Webdesign wird von einem Designer erstellt. Aber der Webdesigner, ist derjenige der die HTML/ CSS Entwicklung übernimmt. Designer versus Webdesigner.
Im Beitrag wurden die Aufgaben eines Designers aufgelistet (nicht die des Webdesigners).
Zudem wird das Design nicht irgendwie direkt im Web vom Webentwickler erstellt. Sondern mit Werkzeugen, welche von Designern genutzt werden, wie Adobe Photoshop oder Sketch.
Was sind Ihre Erfahrungen? Welche Grundlagen und Best-Practices gibt es noch?
Interessante Beiträge:
Webdesign Grundlagen für die Conversion Optimierung
Designer vs Kunde, wer macht was?
Wie man herausfinden kann was der Kunde benötigt
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar