Was ist Webdesign?

Der erste Eindruck zählt: Ob Be­su­che­rin­nen und Besucher auf Ihrer Website bleiben möchten oder den Tab direkt wieder schließen, ent­schei­det das Webdesign – also Layout, grafische Ge­stal­tung, Funk­tio­nen und noch einiges mehr.

Webdesign-De­fi­ni­ti­on: Was ist Website-Design?

Unter dem Begriff Webdesign (oder: Website-Design) versteht man die optische und funk­tio­na­le Ge­stal­tung einer Seite im Internet.

• Wie sieht die Website aus?
• Wie sind die Inhalte sortiert?
• Wie kommen Nut­ze­rin­nen und Nutzer zu Un­ter­sei­ten?
• Welche Funk­tio­nen hat die Website?

Webdesign bringt die Inhalte der Website (z. B. Ihre Texte) in eine Form. Deshalb ist das Layout eine der wich­tigs­ten Aufgaben von Web­de­si­gne­rin­nen und Web­de­si­gnern. Gutes Webdesign sucht immer einen Kom­pro­miss zwischen ein­zig­ar­ti­gem Stil und in­tui­ti­vem User Ex­pe­ri­ence Design. Die Website soll einfach zu bedienen, aber trotzdem optisch an­spre­chend sein.

Genau wie andere Design-Dis­zi­pli­nen ist auch die Ge­stal­tung von In­ter­net­sei­ten Moden un­ter­wor­fen. Aktuelle Webdesign-Trends ergeben sich meist aus tech­ni­schen Neue­run­gen oder ver­än­der­ten Vorlieben der Nut­ze­rin­nen und Nutzer.

Wie arbeiten Web­de­si­gner & Web­de­si­gne­rin­nen?

Die Arbeit von Webdesign-Profis ist viel­sei­tig und hängt stark vom Projekt ab. Generell ist es aber eine Mischung aus kreativer De­sign­ar­beit und tech­ni­scher Umsetzung. Dabei arbeiten sie eng mit ihrer Kund­schaft zusammen, um Be­dürf­nis­se zu verstehen und zu erfüllen. Zu den typischen Aufgaben gehören:

1. Kon­zept­erstel­lung: Ausgehend von den Wünschen der Kundinnen oder Kunden erstellt man ein Konzept. Dies umfasst die Auswahl der Farb­pa­let­te, das Layout der Seite, die Na­vi­ga­ti­on und die all­ge­mei­ne Ästhetik. Zur an­fäng­li­chen Planung zählt meistens auch ein Sty­le­gui­de, der die Webdesign-Grund­la­gen für das spe­zi­fi­sche Projekt festlegt.
2. Gra­fik­de­sign: Zum Webdesign gehört oft auch das Entwerfen von Grafiken und Bildern. Dies kann das Design von Logos, Bannern sowie das Erstellen von anderen visuellen Elementen umfassen. Für viele Grafiken kann man auf be­stehen­de Bi­blio­the­ken zu­rück­grei­fen. Beliebt sind bei­spiels­wei­se Iconfonts, die nützliche Pik­to­gram­me enthalten.
3. Coding: Für die Umsetzung von Design und Konzept kommen HTML, CSS und Ja­va­Script zum Einsatz. Einige Web­de­si­gne­rin­nen und Web­de­si­gner verwenden auch Content-Ma­nage­ment-Systeme wie WordPress oder Joomla.
4. User Ex­pe­ri­ence (UX) und User Interface (UI) Design: Gutes Webdesign be­rück­sich­tigt immer die Be­nut­zer­freund­lich­keit der Website. Be­su­che­rin­nen und Besucher sollen sich so einfach und intuitiv wie möglich durch die Website bewegen können. Dafür verwendet man auch den Begriff User-Centered Design.
5. Wartung und Ak­tua­li­sie­run­gen: Nachdem eine Website live gegangen ist, ist die Arbeit oft noch nicht beendet. Teilweise bleiben Webdesign-Profis weiterhin im Projekt aktiv, um die Website zu warten, Ak­tua­li­sie­run­gen vor­zu­neh­men oder neue Inhalte hin­zu­zu­fü­gen.

Webdesign vs. Web De­ve­lo­p­ment

Eine klare Un­ter­schei­dung zwischen den beiden Fach­be­rei­chen gibt es nicht. Man kann aber sagen, dass die beiden Dis­zi­pli­nen sich auf un­ter­schied­li­che Facetten der Ge­stal­tung einer Website spe­zia­li­sie­ren:

• Webdesign: Im Vor­der­grund steht die Wirkung der Website auf Be­su­che­rin­nen und Besucher. Die optische Ge­stal­tung und die Art, wie man durch die Website navigiert, sind die wich­tigs­ten Aspekte.
• Web­ent­wick­lung: Die Ent­wick­lung einer Website legt das Augenmerk stärker auf die tech­ni­sche Umsetzung der Website. Per­for­mance und Features stehen im Mit­tel­punkt der Arbeit.

Klar trennen kann man die Bereiche nicht, weil in vielen Fällen auch Web­de­si­gner Quelltext erstellen und Web­ent­wick­le­rin­nen sich Gedanken um Be­nut­zer­freund­lich­keit machen. Die Übergänge sind fließend.

Webdesign-Tools

Es gibt viele Hilfs­mit­tel, die man einsetzen kann, um die eigene Idee einer Website Realität werden zu lassen. Selbst wenn man kein Webdesign-Profi ist, kann man mit dem passenden Werkzeug eine pro­fes­sio­nel­le Website aufbauen. Die Wahl des Tools hängt dabei vom ge­wünsch­ten Ergebnis, dem vor­han­de­nen Know-how und der Zeit ab, die man selbst in das Projekt stecken möchte.

Homepage-Baukasten

Mit einem leicht zu be­die­nen­den Baukasten kann man sich sehr schnell eine einfache, aber pro­fes­sio­nel­le Website aufbauen. Per Drag-and-Drop zieht man ge­wünsch­te Elemente an die richtige Stelle und kann dann die eigenen Inhalte hin­zu­fü­gen.

Content-Ma­nage­ment-Systeme

Mit einem Content-Ma­nage­ment-System (CMS) wie WordPress ist es ebenfalls nicht schwierig, ein eigenes Web­pro­jekt um­zu­set­zen. Die Software bietet un­ter­schied­lichs­te Themes (Design-Vorlagen) und Plugins (Funk­ti­ons­er­wei­te­run­gen), die sich mit nur wenigen Klicks in­stal­lie­ren lassen.

Webdesign-Service

Trotz Hilfs­mit­tel muss man Zeit in­ves­tie­ren, um die eigene Website zu designen. Wer diese Ka­pa­zi­tä­ten nicht hat, kann sich an Profis wenden. Bei einem Webdesign-Service bauen Ex­per­tin­nen und Experten die Website auf Grundlage Ihrer Ideen.

Vorteile von gutem Webdesign

Gutes Webdesign bringt Ihre Inhalte in die richtige Form. Im ge­schäft­li­chen Kontext gehört dazu z. B. auch die Prä­sen­ta­ti­on eines Un­ter­neh­mens; beim On­line­shop ist es die Dar­stel­lung der Produkte. Nur ein gut durch­dach­tes und technisch ein­wand­frei um­ge­setz­tes Webdesign hält Be­su­che­rin­nen und Besucher auf Ihrer Website. Wenn sich Nut­ze­rin­nen und Nutzer hingegen nicht zu­recht­fin­den, Seiten langsam laden oder Inhalte schwer zu erfassen sind, springen sie direkt wieder ab.

Das können Sie mit gutem Webdesign erreichen:

• Pro­fes­sio­na­li­tät zeigen: Wenn Ihre Website durch­dacht gestaltet ist und im besten Fall auch zu Ihrer Corporate Identity (CI) passt, macht der Web­auf­tritt und das Un­ter­neh­men dahinter einen pro­fes­sio­nel­len und seriösen Eindruck.
• Reich­wei­te erhöhen: Eine gute Website, die auch im Hinblick auf SEO erstellt wurde, kommt in den Such­ma­schi­nen gut an. Damit erreichen Sie dann mehr Menschen.
• Kon­ver­si­ons­ra­te steigern: Eine gut funk­tio­nie­ren­de User Ex­pe­ri­ence leitet Be­su­che­rin­nen und Besucher geschickt durch die Website. Mit passenden Call-to-Actions (CTA) regen Sie zu­sätz­lich einen Kauf oder die Kon­takt­auf­nah­me an.

Be­stand­tei­le von Webdesign

Webdesign umfasst einen sehr großen Bereich. Quasi alles, was zur Ge­stal­tung einer eigenen Website gehört, fällt in diesen Fach­be­reich. Man kann die Be­stand­tei­le grob in zwei Bereiche einteilen. Ein großer Teil ist klas­si­sche De­sign­ar­beit: Das meint die optischen Aspekte, die Be­su­che­rin­nen und Besucher direkt sehen. Dann gibt es aber auch noch funk­tio­na­le Elemente, die die tech­ni­schen Ge­ge­ben­hei­ten der Website betreffen.

Visuell

• Schrift­art: Mit den passenden Webfonts werden Ihre Text­in­hal­te perfekt dar­ge­stellt. Beachten Sie dabei, dass nicht jede Schrift­art, die Sie bei­spiels­wei­se in Word auswählen können, auch von Browsern dar­ge­stellt werden kann.
• Layout: Die Anordnung und das Ver­hält­nis von gra­fi­schen Elementen und Texten bestimmt, wie man In­for­ma­tio­nen aufnehmen kann. Optische Reize spielen hierbei genauso eine Rolle wie klare In­for­ma­ti­ons­struk­tu­ren.
• Grafische Elemente: Logos, Buttons, Banner und andere grafische Objekte gehören zu den of­fen­sicht­lichs­ten Be­stand­tei­len des Web­de­signs. Sie machen zu einem großen Teil aus, wie die Website wahr­ge­nom­men wird.
• Farb­ge­bung: Eine der wich­tigs­ten Ent­schei­dun­gen und Teil jedes guten Sty­le­gui­des ist die Auswahl der Farben. Die Farb­pa­let­te richtet sich dabei am besten nach dem Corporate Design.
• Bilder & Videos: Ohne Fotos, In­fo­gra­fi­ken und er­klä­ren­de Videos wirkt eine Website leer. Mul­ti­me­dia-Elemente bieten Ab­wechs­lung und können In­for­ma­tio­nen auf andere Weise ver­mit­teln als Texte.

Funk­tio­nal

• Na­vi­ga­ti­on: Be­su­che­rin­nen und Besucher müssen sich intuitiv zu­recht­fin­den. Menüs, Footer und Ver­lin­kun­gen sollten deshalb gut geplant sein. Die Website-Na­vi­ga­ti­on ist somit einer der wich­tigs­ten Faktoren in puncto Usability.
• Struktur: Verwandt mit der Na­vi­ga­ti­on ist die Struktur der Website. Hierbei geht es vor allem um die Hier­ar­chie und Ver­net­zung der einzelnen Un­ter­sei­ten hinter den Kulissen. Die Struktur lässt sich bei­spiels­wei­se an der Sitemap ablesen.
• Per­for­mance: Eine gute Website muss schnell laden, sonst klicken Be­su­che­rin­nen und Besucher genervt weg. Um die Ab­sprungra­te zu ver­rin­gern, sollte die Per­for­mance also optimiert sein. Einen guten Einblick in die Leis­tungs­fä­hig­keit einer Website bieten bei­spiels­wei­se die Core Web Vitals.
• In­ter­ak­ti­on: Kon­takt­for­mu­la­re und andere in­ter­ak­ti­ve Elemente liegen ebenfalls im Auf­ga­ben­be­reich von Web­de­si­gne­rin­nen und Web­de­si­gnern. Für die tech­ni­sche Umsetzung kann man auf Plugins zu­rück­grei­fen.
• Bar­rie­re­frei­heit: Eine Website sollte für alle Menschen gut auf­be­rei­tet sein, auch wenn diese zum Beispiel nicht oder nur schlecht sehen können. Bar­rie­re­frei­es Webdesign sorgt mit Alt-Texten oder kon­trast­rei­chem Design dafür, dass auch diese Personen alle ge­wünsch­ten In­for­ma­tio­nen erhalten. In den WCAG findet man Emp­feh­lun­gen, wie man Bar­rie­re­frei­heit auf einer Website erreicht.

Be­son­der­heit: Re­spon­si­ve Design

Websites werden schon lange nicht mehr nur von einer Geräteart auf­ge­ru­fen. Neben Desktop-PCs gibt es Notebooks, Tablets und Smart­phones, die alle un­ter­schied­li­che Bild­schirm­grö­ßen haben. Das ist eine große Her­aus­for­de­rung beim Webdesign: Wie soll ich mich für ein Layout ent­schei­den, wenn ich gar nicht weiß, wie das später angezeigt wird?

Die Lösung heißt: Re­spon­si­ve Design. Bei dieser Technik passt sich das Design au­to­ma­tisch an die Bild­schirm­grö­ße an. So wird vieles, was auf einem üblichen Desktop-Gerät noch ho­ri­zon­tal dar­ge­stellt wird, auf dem Smart­phone un­ter­ein­an­der an­ge­ord­net. Auch ein Menü, das sonst im Header auftaucht, erscheint im Handy-Display als aus­klapp­ba­res Burger-Menü oder einer anderen re­spon­si­ven Na­vi­ga­ti­on. Sogar die Ty­po­gra­fie spielt bei Re­spon­si­ve Design eine große Rolle – schließ­lich sollen die Texte auf jedem Display gut lesbar sein.

Be­son­der­heit: Such­ma­schi­nen­op­ti­mie­rung

Eine Website, in deren Webdesign viel Zeit und Energie in­ves­tiert wurde, soll auch gefunden werden. Mit ge­schick­ter Such­ma­schi­nen­op­ti­mie­rung (SEO) bereitet man die Inhalte und die Website so auf, dass Google und Co. sie weit oben in den Such­ergeb­nis­sen anzeigen.

Dafür müssen La­de­ge­schwin­dig­keit, Na­vi­ga­ti­on und Layout perfekt sein. Wenn man die Seite aufruft und nicht die ge­wünsch­ten In­for­ma­tio­nen findet oder zu lange darauf warten muss, schließt man das Fenster wieder und guckt sich auf einer anderen Website um. Die erhöhte Ab­sprungra­te ist wiederum ein negatives Signal für die Such­ma­schi­ne. Ein durch­dach­tes und technisch ein­wand­frei­es Webdesign ist deshalb die Basis für SEO.

Fazit: Webdesign – Grundlage des Erfolgs im Internet

Wenn Sie mit Ihrem Un­ter­neh­men oder Ihrem Projekt im Internet eine gute Figur machen möchten, muss Ihre Website nicht nur in­ter­es­san­te Inhalte bieten, sondern auch sonst über­zeu­gen. Deshalb ist gutes Webdesign so ent­schei­dend. Egal ob Sie selbst (mit hilf­rei­chen Werk­zeu­gen) aktiv werden oder Profis be­auf­tra­gen: Sorgen Sie dafür, dass sich Be­su­che­rin­nen und Besucher auf Ihrer Website wohl fühlen und schnell an die ge­wünsch­ten In­for­ma­tio­nen gelangen. Nutzen Sie Farb­ge­bung, Schrift­ar­ten und Layout außerdem dazu, Ihre Marke auch im Internet richtig zu prä­sen­tie­ren.