- Was ist der Unterschied zwischen Webdesign und UX Design?
- Was ist Webdesign?
- Was ist UX Design?
- Was ist Frontend-Entwicklung?
- Berufsbilder
1. Was ist der Unterschied zwischen Webdesign und UX Design?
Oft sprechen wir in unserer Webagentur von Webdesign, wenn es um die visuelle Gestaltung einfacher Websites geht. Bei der Entwicklung komplexer Applikationen mit vielen Benutzer-Interaktionen sprechen wir hingegen von UX Design. Webdesign gestaltet das optische Erscheinungsbild einer Website und soll dabei die Firma und deren Angebot präsentieren. Bei UX Design hingegen sollen die Bedürfnisse und Anforderungen der Benutzer erfüllt werden. Dabei gibt es mehrere UX Methoden zur Entwicklung von Nutzerzentrierten Berührungspunkten. Dies beinhaltet nicht nur visuelles Design, sondern das komplette User Experience, welches auch Ton, Haptik, Geruch usw. beinhalten kann.
Begriffserklärung
Webdesign = Website Design
UX Design = Benutzererlebnis Design
Das UX Design wird nicht nur bei App User Interface optimiert. Sondern auch bei jedem anderen Kontakt eines Benutzers mit einem Produkt. Auch das Öffnen einer Verpackung kann bis ins Detail optimiert werden. Wie wir es von Apple Produkten her kennen.
If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.
Alan Cooper - Software Designer and Programmer
Schlussfolgerung:
Webdesign stellt die Website bzw. das Unternehmen in den Mittelpunkt, während UX Design den Nutzer in den Mittelpunkt stellt.
2. Was ist Webdesign?
Unter Webdesign versteht man die visuelle Gestaltung vom Erscheinungsbild einer Website. Dazu erstellt die Webagentur, noch vor der Programmierung, in einem in speziellen Tools wie zum Beispiel Figma Designvorschläge. Diese zeigen die Darstellung der Website für Mobile und Desktop und werden dem Auftraggeber zugänglich gemacht. Erst wenn dieser Webdesign-Vorschlag abgenommen wurde, beginnt die Webagentur mit der Frontend-Entwicklung und Programmierung.
Im Zentrum steht dabei das Erscheinungsbild, die Präsentation der Produkte oder des Unternehmens. Dazu gehören auch die Gestaltung der Navigation und des Seitenaufbaus. Wobei der Übergang zu UX Design stufenlos erfolgt.
Viele zählen auch die Umsetzung einer Website in HTML/CSS zum Webdesign. Genau genommen sprechen wir dabei heute aber eher von Frontend-Entwicklung.
2.1. Webdesign Geschichte
Die visuelle Gestaltung von Websites war ursprünglich bei HTML nicht geplant. Entsprechend fehlten auch die Mittel dazu. Trotzdem fanden einige findige Webdesign Pioniere schon früh Wege, um das Erscheinungsbild beeinflussen zu können. Dazu zählt der berühmte Trick mit dem «Blinden GIF». Dabei wurde ein transparentes GIF Bild verwendet, um Abstände zwischen Elementen zu vergrössern. David Siegel schrieb 1996 eines der ersten und erfolgreichsten Webdesign Bücher Creating Killer Web Sites. Das Buch wurde in 14 Sprachen übersetzt und war damals auch mein Einstiegstor ins Webdesign.
3. Was ist UX Design?
Der Begriff UX Design ist viel weiter gefasst als Webdesign und beinhaltet nicht nur die visuelle Gestaltung, sondern auch die Optimierung des gesamten Benutzererlebnisses (UX) eines Produkts. Das User-Interface Design ist dabei nur ein kleiner Teil vom UX Design. UX besteht aus zahlreichen konzeptionellen Methoden, welche das Ziel haben, die Bedürfnisse und Wünsche der Benutzer zu erfüllen.
3.1. Contextual Inquiry
Contextual Inquiry ist eine UX Methode, bei welcher kontextbezogene Interviews mit einer kleinen Auswahl von Nutzern gemacht werden. Die Untersuchung liefert oft wertvolle Erkenntnisse, welche durch andere Untersuchungen verborgen bleiben. Lernen Sie mehr über Contextual Inquiry.
3.2. Affinity Diagramming
In gemeinsamen Workshops werden die Findings aus dem Contextual Inquiry geordnet und passende Themen zu Clustern zusammengefügt. Es werden im Team gemeinsam die Research Ergebnisse ausgewertet. Erfahren Sie mehr zu Affinity Diagram.

3.3. Personas
Personas sind erfunden Benutzerprofile, welche auf Informationen aus dem Research basieren. Diese Figuren sollten so früh wie möglich kreiert werden und helfen bei der Entwicklung eines benutzerzentrierte Designs.
3.4. Lean UX Prozess
Die Arbeit wird dabei in Sprints unterteilt. Dabei handelt es sich um kurze iterative Entwicklungszyklen. Es soll möglichst schnell Minimal Viable Products (MVP) erstellt, getestet und wieder verbessert werden. Laufendes Lernen und verbessern sind Ziel des Prozesses. Lesen Sie hier eine sehr gute Lean UX Beschreibung von Prof. Dr. Michael Burmester.
3.5. Wireframes, UI Design, Prototype
Erst hier beginnt die visuelle Arbeit des UX Designers. Meist wird mit Wireframes angefangen. Dabei werden alle Elemente und Funktionen sinnvoll und benutzerfreundlich angeordnet. Es wird bewusst Skizzenhaft dargestellt, damit Entscheidungen nicht aufgrund der visuellen Präferenz gefällt werden (Low Fidelity). Auch UX Prototypen werden so gebaut. Erst danach entwickelt der UI Designer das visuelle Erscheinungsbild (High Fidelity). Erfahren Sie mehr über unser UX Design Angebot.

4. Was ist Frontend-Entwicklung?
Unter Frontend-Entwicklung versteht man die Umsetzung des Designs in HTML und CSS. Obwohl hier am Code gearbeitet wird, spricht man nicht von Programmierung, denn CSS ist nur eine Seitenbeschreibungssprache und noch keine Programmiersprache. Dieser Frontend-Code hat erheblichen Einfluss auf die Ladezeiten und SEO. Mit verschiedenen Website-Test lässt sich die Qualität der Umsetzung beurteilen. Erfahren Sie mehr über Frontend-Entwicklung unserer Webagentur.

5. Berufsbilder
5.1. Webdesigner
Der Webdesigner erstellt visuelles Design von Websites für diverse Geräte mit speziellen Tools wie Figma oder Sketch (früher mit Photoshop). Dabei geht es meist um die Präsentation einer Firma oder eines Produkts. Neben gestalterischem Flair verfügt er über ausführliches Know-how in der Frontend-Entwicklung. Denn nur so kann eine sinnvolle Responsive Umsetzung der Webdesign-Vorschläge ermöglicht werden.
5.2. UX Designer
Der UX Designer gestaltet Produkte den Bedürfnissen der Benutzer entsprechend. Er setzt bewusst die Wünsche der Benutzer in den Vordergrund. Er kennt sich mit den UX Methoden aus und arbeitet meist an grossen und komplexen Applikationen oder Produkten.
5.3. Frontend-Entwickler
Der Frontend-Entwickler setzt Webdesign und UI Design mit webbasierten Lösungen um. Er kennt sich mit HTML, CSS, JS und SASS sowie weiteren gängigen Web Methoden aus. Dazu sollte er sich mit modernen Bildformaten auskennen und über SEO Wissen verfügen, besonders im Bereich Onpage SEO.
Und was macht Webgarten?
Webgarten ist eine Webagentur und UX Design Agentur. Neben Webdesign und Frontend-Entwicklung bieten wir auch UX Design an. Wireframes, Prototypen und UI Design haben wir schon für zahlreiche native Apps und Industriemaschinen entwickelt. Bei anderen Projekten hingegen waren wir nur an der Frontend-Entwicklung, SEO oder PageSpeed Optimierung beteiligt.