Was ist der Unterschied zwischen Webdesign und Webentwicklung? Und was ist mit UI und UX? Was bedeuten diese Unterteilungen? Weshalb gibt es so viele Akronyme? Wollen Tech-Leute nicht eigentlich, dass alles nutzerfreundlich ist!?

Web design example
Hybrid Herbs Homepage-Design von BryanMaxim

Wenn du noch nie eine Website designt hast, können sich die Begriffe der Tech-Branche wie eine fremde Sprache anhören, nur dass die meisten fremden Sprachen Sinn und Verstand haben. Jedes Unternehmen sollte irgendwann mit einem Web-Profi zusammenarbeiten; wenn du eine erfolgreiche Website möchtest, brauchst du eventuell einen Übersetzer.

Dafür ist dieser Artikel da. Wenn du deine erste Website designen lässt oder nur die Branche besser verstehen willst, erklären und analysieren wir hier die vier häufigsten und verwirrendsten Tech-Begriffe von heute: UI, UX, Webdesign und Webentwicklung. Nachdem du diesen Artikel gelesen hast, wirst du nicht nur wissen, was jeder Bereich macht, sondern auch, auf welchen sich dein Unternehmen am meisten konzentrieren sollte.

Das ABC der IT

Web design notebook next to an iPhone
Wireframe eines neuen Website-Designs, via Pexels

Beginnen wir mit ein paar grundlegenden Definitionen, um deine anfängliche Verwirrung zu verringern und dir ein bisschen Kontext zu geben, bevor wir tiefer in die Materie einsteigen:

  • Webdesign – Ein weite Oberkategorie für alles, das mit dem Visuellen und der Nutzerfreundlichkeit einer Website zu tun hat. Sowohl UI als auch UX sowie viele andere Bereiche gehören zu Webdesign.
  • Webentwicklung – Der technische Teil beim Erstellen einer Website, der sich auf das Programmieren konzentriert. Webentwicklung wird weiter aufgeteilt in „Front-End“ und „Back-End“, was weiter unten erläutert wird.
  • User Interface (UI) – Eine Spezialisierung des Webdesigns, welches sich mit der Steuerung beschäftigt, die Menschen für die Interaktion mit einer Website oder App verwenden, einschließlich Schaltflächen und Gestensteuerungen.
  • User Experience (UX) – Eine weitere Spezialisierung des Webdesigns. UX befasst sich mit Nutzerverhalten und -gefühl, wenn eine Seite oder App verwendet wird. UX Design umfasst viele weitere Bereiche, aber betrachtet sie aus Sicht der Nutzer.

Wie du bereits sehen kannst, steht keiner dieser Bereiche für sich. Es gibt jede Menge Überschneidungen. Webdesign und Webentwicklung sind nur zwei Seiten derselben Münze, UI Design beeinflusst UX Design, Webentwicklung unterstützt sie alle… Es geht weniger darum, welcher Bereich welche Aufgabe erledigt, sondern mehr darum, wie jeder Beriech dieselbe Aufgabe aus einem anderen Blickwinkel betrachtet.

Schauen wir uns zum Beispiel mal Ladezeiten an, ein verbreitetes Problem für jede Website. Wie geht jeder Bereich die Ladezeiten an:

  • Webdesign: Wenn eine Seite zu lange zum Laden braucht, enthält sie entweder zu viele Inhalte oder der Inhalt ist zu komplex. Die Bilddateien können komprimiert werden, Inhalte können angepasst und erneut exportiert werden und Seiten können um überschüssige Inhalte gekürzt werden.
  • Webentwicklung: Damit der Inhalt schneller lädt, können wir es mit einer besseren Dateikomprimierung versuchen, um die Dateigröße des Inhalts zu reduzieren, CSS-Sprites verwenden, um Bandbreite zu sparen, oder ein Content Delivery Network nutzen, um Ladezeiten in bestimmten geografischen Regionen zu verbessern.
  • UI: Die Bedienelemente müssen so responsiv sein wie möglich, daher muss die Benutzeroberfläche simpel genug sein, damit Interaktivität sofort stattfindet.
  • UX: Die Wahrscheinlichkeit, dass ein Nutzer „abspringt“ (deine Seite nach nur wenigen Momenten verlässt), erhöht sich mit jeder Sekunde Ladezeit, daher sollten wir zuerst die Ladezeiten auf der Homepage und den Landingpages reduzieren, bevor wir das Problem auf der gesamten Seite angehen.

In einer perfekten Welt würdest du einen Spezialisten oder ein Team von Spezialisten für jeden dieser Bereiche engagieren, damit du einen Experten hast, der sich deine Website aus allen Winkeln ansieht. Budgeteinschränkungen führen allerdings häufig dazu, dass man sich für einen Bereich entscheiden muss oder einen Freelancer auf Projektbasis engagiert.

Hin und wieder findest du jemanden, der behauptet, alles tun zu können:

  • Designer, die programmieren können, bezeichnen sich manchmal als Gesamtpaket, aber in Wahrheit sind sie nicht so gut, wie zwei einzelne Spezialisten (obwohl es manchmal klug sein kann, sie zu engagieren, wenn du eine simple Seite hast).
  • UI-Designer haben viele sich überschneidende Fähigkeiten mit Webdesignern, daher verwenden manche diese Titel als synonym.
  • UX und UI werden oft zusammengeworfen, da es sich bei beiden um Unterkategorien handelt.
  • UX wird in anderen Berufen oftmals als Skill betrachtet, selbst außerhalb von Design, wie beispielsweise im Produktmanagement.

Solche Leute können im Notfall nützlich sein, aber vergiss nicht, dass ein Alleskönner nichts so richtig kann. Sie kennen vielleicht die Grundlagen mehrerer Bereiche, aber wenn überhaupt sind sie nur Experten in einem.

Du musst auch zwischen Webseiten & Apps und Desktop & Mobil unterscheiden. Jeder hat seine eigenen individuellen Spezialgebiete. Manche Entwickler haben mehr Erfahrung darin, mobile Seiten zu erstellen; manche Designer beschränken sich ausschließlich auf Apps und machen niemals Webseiten. Wie gesagt, es gibt viele Überschneidungen, aber wenn du jemanden für ein bestimmtes Projekt engagierst, musst du darauf achten, dass deine Kandidaten mit den Besonderheiten umgehen können.

Welcher dieser Spezialisten kann dir nun also mit deinem bestimmten Unternehmensziel helfen? Und worauf solltest du achten, wenn du sie engagierst? Schauen wir uns nun jeden genauer an.

Webdesign

„Webdesign“ ist ein recht veralteter Begriff, der auf die Zeit zurückgeht, als eine einzelne Person sich um alle Designaspekte einer Website gekümmert hat. Nach heutigen Maßstäben kann der Begriff „Webdesigner“ ein bisschen vage sein; heutzutage haben wir dank der Technologie und unserem besseren Verständnis davon einen ganzen Regenbogen an Unterteilungen.

Home page of Figgy & Plum
Figgy & Plum Homepage-Design von DSKY

Die Unterkategorien des Webdesigns enthalten UI und UX, aber auch andere Akronyme wie IA (Informationsarchitektur, befasst sich mit Site-Mapping und Navigation) und CRO (Conversion Rate Optimierung, Feinabstimmung des Seitendesigns, um Verkäufe, Anmeldungen oder andere bestimmte Aktionen zu steigern). Es gibt dutzende dieser Unterkategorien und jeden Tag kommen neue hinzu, während Designer versuchen, bessere Jobs in einem umkämpften Markt zu bekommen.

Im Großen und Ganzen bezieht sich Webdesign auf das Visuelle und die Funktionalität einer Website. Es ist ein Bereich, der im Wesentlichen mit Grafikdesign verbunden ist und sich mit denselben Designprinzipien der visuellen Kommunikation befasst.

Landing page for Chef Brain app
Chef Brain Landingpage-Design von Vallentin

Aber Webdesign ist mehr als nur Grafikdesign. Egal ob bei der Arbeit mit Webseiten oder Apps, Designer müssen sich mit Funktionalität, technischen Einschränkungen, digitalen Trends und Nutzererwartungen auskennen, welche sich häufig ändern.

Webdesign setzt zu einem gewissen Grad auch Business-Knowhow voraus: Designer sollten digitale Verkaufsstrategien kennen, zum Beispiel wie man einen „Call-To-Action“ (CTA) platziert, um Verkäufe und E-Mail-Anmeldungen auszulösen. Das Seitenlayout hat großen Einfluss auf das Nutzerverhalten, aber da es so differenziert ist, sind manche Designer darin besser als andere.

Der Webdesigner kümmert sich um traditionelle Grafikdesign-Angelegenheiten wie Farbe und Typografie, zusammen mit digitalen Angelegenheiten wie dem Auswählen der besten Ästhetik für unterschiedliche Bildschirmgrößen. Sie benötigen auch ein Verständnis für Geschäftsmodelle wie Leading und Closing, um Layouts zu erstellen, die den Call-To-Action attraktiver machen. Schließlich gehört es manchmal zu den Aufgaben eines Designers, die Icons, Grafiken oder Buttons von Grund auf zu erstellen, welches Expertise von allen drei Bereichen benötigt.

Was die konkreten Arbeitsaufgaben betrifft, liegt der Designablauf zum größten Teil beim Designer, solange er innerhalb der vorhandenen Marken-Guidelines arbeitet. In der Regel gehört es zum Ablauf, dass der Designer Prototypen des Designs erstellt und diese dann bei tatsächlichen Nutzern oder Stakeholdern testet und das Feedback in zukünftige Designs einbringt.

Designer können auch Wireframes erstellen, nackte Layouts eines Designs, um es für einen Prototypen vorzubereiten, oder ein Mockup, ein perfektes Abbild dessen, wie der Bildschirm aussehen wird, nur ohne Interaktivität.

Sobald der Prototyp abgesegnet ist, wird er zur Programmierung an den Entwickler geschickt.

Worauf du achten solltest, wenn du einen Webdesigner engagierst…

  • Du musst zu allererst wissen, was du möchtest, bevor du den besten Webdesigner für dich finden kannst. Da es so viele Spezialisierungen gibt, geht es nicht darum, ob ein Designer gut oder schlecht ist, sondern ob er zu dir passt.
  • Schaue dir das Portfolio an. Mit dem Schwerpunkt auf Grafikdesign, haben Webdesigner jeweils einen eigenen künstlerischen Stil.
  • Suche nach jemandem, der das beherrscht, was dir wichtig ist. Wenn du eine textlastige Seite hast, schau dir an, wie er Typografie, Lesbarkeit und Seitenlayout handhabt. Wenn du einen E-Commerce-Shop aufbaust, finde heraus ob er weiß, was eine gute Produktseite ausmacht.
  • Ist seine bevorzugte Software kompatibel mit dem, was der Rest deines Teams nutzt? Es gibt viele verschiedene Designprogramme – Adobe Photoshop, Illustrator, InDesign und Sketch, ebenso wie Prototyping-Tools wie UXPin oder Balsamiq. Frage bei deinen Mitarbeitern nach, um zu sehen, welche Möglichkeiten du hast.
  • Frage deinen Designer nach seinem Designablauf und Zeitplan. Jeder Designer hat seine eigenen Methoden, also stelle sicher, dass du jemanden engagierst, der zu deiner Unternehmenskultur und zu deinem Zeitplan passt.

Webentwicklung

Webdesign und Webentwicklung unterscheiden sich durch die Verwendung von Code. Entwicklung ist der Teil, bei dem es technisch wird, aber die gute Nachricht ist, dass du nicht wissen musst, worüber deine Entwickler reden, solange sie es tun (auch wenn es sicher hilfreich ist, die Grundlagen zu lernen).

Webentwicklung ist in zwei Hauptkategorien unterteilt:

Front-End (a.k.a. Kundenseite): Der Code dafür, wie eine Website (oder App) auf einem Bildschirm dargestellt wird. Der Front-End-Entwickler ist verantwortlich dafür, die Vision des Designers zum Leben zu erwecken, typischerweise mit Computersprachen wie HTML, CSS und JavaScript. Natürlich ist nicht alles machbar, was der Designer geplant hat, daher arbeitet der Front-End-Entwickler oftmals eng mit dem Designer zusammen.

Back-End (a.k.a. Serverseite): Das „Front-End“ bedient sich aus einem digitalen System von Ressourcen, die auf einem Server gehostet werden. Der Back-End-Entwickler kümmert sich um diese Ressourcen im Hintergrund, programmiert die Daten in die Datenbank ein und optimiert, wie diese Daten geliefert werden. Sie verwenden Sprachen wie PHP, Ruby, Java oder .Net.

Ein Full-Stack-Entwickler ist jemand, der sowohl Front-End als auch Back-End kann. Manchmal sind sie eine clevere Option für Startups, die es sich nicht leisten können, mehr als einen zu engagieren, aber idealerweise hast du ein ganzes Team an Entwicklern mit diversen Spezialisierungen.

Worauf du achten solltest, wenn du einen Webentwickler engagierst…

  • Stelle sicher, dass sie die Sprachen beherrschen, die du benötigst. Wenn du den Unterschied nicht kennst, sage ihnen, was du mit deiner Seite vorhast, und höre auf ihre Empfehlungen.
  • Wenn auch nicht erforderlich, so ist es für einen Entwickler doch hilfreich, wenn er im Designprozess involviert ist. Ein Entwickler könnte zum Beispiel einem Designer im Voraus sagen, ob seine Entscheidungen machbar sind, und so langfristig Zeit für Überarbeitungen sparen. Du solltest auch darauf achten, wie gut dein Entwickler mit einem Team arbeitet, da manche es bevorzugen, eigenständig zu arbeiten.
  • Schaue dir ihre vorherigen Webseiten an und achte auf die Funktionalität. Funktioniert alles so, wie es soll? Tauchen irgendwelche Probleme auf? Du verstehst vielleicht nicht genug von Entwicklung, um zu verstehen, wie es funktioniert, aber du weißt auf jeden Fall, wie es ist, eine normale Person zu sein, die eine Seite benutzt.

User Interface (UI)

Da wir nun Webdesign und Webentwicklung erklärt haben, können wir über die spezielleren Bereiche reden, angefangen mit dem User Interface. UIs sind etwas, das jeder benutzt, ohne sich viele Gedanken darum zu machen. Du musst nicht die Geschichte des Hamburger-Icons kennen, um zu wissen, dass der Button mit den drei Linien dein Menü ist.

Jeeves Information Systems icon design
Icon-Design von tongal

Und dieses Prinzip gilt in den meisten Bereichen des Webdesigns: Wenn die Arbeit gut gemacht ist, solltest du sie nicht einmal bemerken. Das ist das Wichtigste im UI Design: Bei einer wirklich intuitiven Oberfläche muss der Nutzer nicht darüber nachdenken, um sie zu benutzen.

Wenn du aktiv darüber nachdenken musst, wie du die Steuerung verwendest, handelt es sich um schlechtes UI Design. Die Suche nach einem Button oder ein paar Sekunden zu benötigen, um herauszufinden, wofür dieser Button ist, lenkt dich von dem Gesamterlebnis der Seite ab. Das Ziel von UI Design besteht nicht nur darin, alle Bedienelemente zu bieten, die ein Nutzer haben möchte, sondern auch, selbsterklärende Bedienelemente zu kreieren, welche Nutzer auf den ersten Blick verstehen.

Ein weiteres Anliegen ist Platzmanagement. UI-Designer müssen die goldene Mitte finden zwischen dem Nutzer viele Optionen geben und Platz auf dem Bildschirm zu bewahren. So sind Techniken wie Hover-Bedienungen und Pull-Out-Menüs entstanden. Es ist Aufgabe des UI-Designers zu entscheiden, welche Bedienelemente zu jeder Zeit präsent sein müssen und welche vernachlässigbar genug sind, um versteckt oder komplett außer Acht gelassen zu werden.

4Links Icon design
Icon-Design von Meileelogo

UI Design überschneidet sich oftmals mit einem anderen Bereich, genannt Interaktionsdesign, mit der Abkürzung IxD. Interaktionsdesign spezialisiert sch auf alle Wege, mit denen ein Nutzer mit dem System interagiert, einschließlich der Benutzeroberfläche, aber auch Bereiche wie Pop-Up, Chat und Fehlermeldungen. Da Interaktionsdesign das Nutzerverhalten so stark in den Vordergrund stellt, ist es die Mitte zwischen UI und UX Design.

Worauf du achten solltest, wenn du einen UI-Designer engagierst…

  • Ein UI-Designer Portfolio sollte dir alles sagen können, was du wissen musst. Teste die vorherigen Seiten deiner Kandidaten und schaue, wie einfach sie zu nutzen ist. Kannst du alles finden, was du brauchst? War die Nutzung der Seite/App frustrierend oder simpel?
  • Mehr als in anderen Kategorien solltest du nach vergangenen Arbeiten für die bestimmte Art von Projekt suchen, für die du jemanden engagieren möchtest. Der weltbeste UI-Designer kann dennoch schlecht darin sein, ein Interface für eine Spiele-App zu entwickeln. Engagier jemanden, der die richtige Erfahrung hat.

User Experience (UX)

In vielerlei Hinsicht ist UX wie Webdesign aus der Perspektive des Nutzers. Welchen Einfluss hat das Layout der Webseite auf den Nutzer? Welchen Einfluss hat das UI auf den Nutzer? Wenn du zu den fortgeschritteneren Phasen kommst, wird UX weit strategischer als „Wie designen wir eine Seite, damit der Nutzer sich anmelden will?“

GIF for social media banner
GIF Banner-Design von Maryia Dziadziulia

Wie du dir vorstellen kannst, beinhaltet UX Design auch viele andere Bereiche im Webdesign. Viele Leute Reden von „UI vs. UX“, aber die Wahrheit ist, dass diese beiden zusammenarbeiten, statt gegeneinander. Tatsächlich gibt es so viele Überschneidungen, dass alle möglichen Webdesigner davon profitieren können, ein bisschen über UX Bescheid zu wissen. Genau so wurde UX zu einer eigenen Disziplin. Einen UX-Spezialisten zu engagieren, entlastet das restliche Team von einer Menge anderer Aufgaben.

Auch wenn es anfangs überflüssig scheinen mag, gibt es einen direkten Zusammenhang zwischen UX Design und Unternehmenszielen wie Verkäufe oder Conversions. Angesichts der Tatsache, dass menschliche Entscheidungen aus Emotionen und dem Bauch heraus getroffen werden, ergibt es Sinn, dass die Optimierung einer Website zu bestimmten Verhaltensweisen animiert und eine Atmosphäre schaffen kann, bestimmte Verhaltensweisen zu fördern.

Aus diesem Grund bedienen sich UX-Designer aus vielen Grafikdesignprinzipien: Aufmerksamkeit mit Größe wecken, die richtigen Emotionen mit Farben hervorrufen, einen vorhersehbaren, visuellen Fluss auf dem Bildschirm erzeugen und CTAs an den richtigen Stellen platzieren. Im Gegensatz zum traditionellen Grafikdesign müssen UX-Spezialisten allerdings zusätzliche Faktoren wie Interaktivität und Timing einplanen, wodurch es zu einer ganz eigenen Disziplin wird, während es gleichzeitig mit allen verbunden ist.

Worauf du achten solltest, wenn du einen UX-Designer engagierst…

  • Genau wie bei UI Designs, solltest du vorherige Seiten deines Kandidaten testen. Sind sie einfach zu bedienen? Macht es dir Spaß, ihre Seite zu benutzen?
  • Wenn du kein Geld für einen separaten UX-Designer hast, frage Kandidaten aus anderen Bereichen nach ihrer UX-Expertise. Diese Aufgaben können manchmal auch von andere Teams übernommen werden; ein Produktmanager oder Marketer kann erklären, wie die UX sein soll und dann kann das Designteam sich um das visuelle Design und die Implementierung kümmern.

Was ist mit Template-Seiten?

Was, wenn du eine Template-Seite wie WordPress, Squarespace oder WIX verwendest? Brauchst du dann immer noch ein Team? Brauchst du noch irgendjemanden zusätzlich?

WordPress theme design for Virginia Vape Co.
WordPress Theme-Design von Mike Barnes

Template-Seiten folgen so ziemlich den gleichen Regeln, mit ein paar wichtigen Ausnahmen:

  • Wenn du eine Template-Seite verwendest, brauchst du dir nicht so sehr Gedanken um die Back-End-Entwicklung zu machen.
  • Template-Seiten haben in der Regel eingeschränkte und feste Optionen für UI.
  • Achte darauf, dass deine Kandidaten Erfahrung mit der jeweiligen Seite haben, auf der du deine hostest. Sich gut mit WordPress auszukennen bedeutet nicht unbedingt, sich auch gut mit Squarespace auszukennen.

Abgesehen von diesen Ausnahmen ist eine Template-Seite genauso wie jede andere Seite. Wähle deinen Designer nach dem, was du am meisten brauchst.

Wen brauchst du am meisten?

Mittlerweile solltest du in der Lage sein, Webdesign und Webentwicklung voneinander zu unterscheiden, und du weißt, dass „UI vs. UX“ nicht so korrekt ist wie „UI + UX“. Die Frage ist, wen solltest du vorziehen, wenn du nicht jeden Spezialisten engagieren kannst?

Es gibt keine allgemeingültige Antwort darauf. Da sich jedes Feld mit unterschiedlichen Bereichen auseinandersetzt, hängt alles davon ab, welche Bedürfnisse dein Unternehmen hat. Abhängig von deinen eigenen Zielen und Defiziten, brauchst du eventuell den einen Experten mehr als die anderen.

Um dir zu helfen zu verstehen, wen du am meisten brauchst, ist hier eine kurze Liste von Problemen, auf dessen Lösung sich das jeweilige Feld spezialisiert hat. Finde deine größten Hindernisse unten und suche nach dem passenden Feld für die Lösung. Wenn du bereits eine Seite hast, führe vorher ein paar Nutzertests durch, um zu sehen, welche Beschwerden die tatsächlichen Nutzer haben.

Webdesign

  • Seite ist nicht responsiv (sieht also auf Mobilgeräten nicht gut aus)
  • Seite sieht veraltet aus
  • Grafiken in schlechter Qualität
  • Kunden gehen nicht auf die Seiten, auf die sie gehen sollen
  • Zeit auf der Seite ist zu kurz

Webentwicklung

  • Fehler (Funktionen auf der Seite funktionieren nicht wie sie sollen)
  • Web-Sicherheit & Schutz vor Hacks
  • Zu viele 404-Fehler
  • Zu viele fehlgeschlagene DNS-Lookups
  • Seite geht offline
  • Bestimmter Inhalt lädt nicht

UI

  • Schlechte Navigation
  • Fehlende Anpassungsmöglichkeiten
  • Fehlende Optionen zum Teilen in sozialen Medien
  • Beschwerden über „Wie kann ich das machen?“ oder „Wo kann ich das finden?“

UX

  • Schlechte Conversion Rates (viel Traffic, aber wenige Conversions)
  • Hohe Absprungrate (Besucher gehen nach ein paar Sekunden)
  • Nutzer beenden Inhalte nicht (Videos oder Blogs)
  • Bruchstückhafte Besuche, Nutzer gehen z. B. nach einer Seite, statt zu bleiben und sich umzuschauen

Natürlich können manche Probleme mit unterschiedlichen Methoden behoben werden, wie wir im Beispiel mit den langsamen Ladezeiten erklärt haben. Deshalb ist es wichtig zu wissen, welche Aspekte du priorisieren willst, damit deine getroffene Wahl am besten zu deinen Prioritäten passt.

Möchtest du einen Webdesigner oder UI/UX-Experten engagieren?
Suche in unserer Community mit professionellen Designern nach dem passenden.