Webdesign: Ein Leitfaden für Einsteiger

Was ist Webdesign?

Webdesign bezeichnet die Planung, Strukturierung und Implementierung von Elementen auf einer Website. Ein Webdesigner entwirft dazu zunächst ein Layout, das bestimmt, wie die Webseite später einmal aussehen wird. Anschließend wird das nun entstandene Grundgerüst der Website mittels Grafikdesign und UX-Design (User Experience Design) ausgebaut, wobei auch die SEO-Aspekte miteinbezogen werden. Im Zusammenspiel erzeugen diese Teilbereiche eine rundum gelungene Webseite.

Warum ist Webdesign wichtig?

Ihre Unternehmenswebsite beeinflusst Ihre Außenwirkung und damit Ihre Verkäufe. Stellen Sie sich vor, potenzielle Kunden möchten sich online über Ihre Services informieren. Doch statt einer strahlenden Unternehmenspräsenz finden sie auf Ihrer Firmenseite nur eine virtuelle Baustelle vor. Sehr wahrscheinlich werden diese Besucher Ihrem Unternehmen weniger vertrauen – und erst recht nicht zu Kunden werden.

Um ein starkes Markenimage aufzubauen und möglichst viele Conversions zu erzielen, ist Webdesign ein wichtiges Werkzeug. Ausschlaggebend sind dabei eine moderne Aufmachung verbunden mit hoher Nutzerfreundlichkeit.

Was müssen Sie beim Webdesign beachten?

Nutzerfreundlichkeit ist das zentrale Kriterium des Webdesigns, damit Sie Ihre Besucher in jeder Phase der Buyer’s Journey optimal unterstützen können. Zudem ist ein anwenderfreundliches Webdesign auch für die SEO relevant: Denn Google belohnt kurze Ladezeiten, niedrige Bounce Rates und hohe Verweildauer – allesamt Aspekte, auf die ein effektives Webdesign einen unmittelbaren Einfluss hat.

UX-Design

UX-Design nimmt im Webdesign einen wichtigen Platz ein. Denn es stellt die „User Experience“, also das Nutzererlebnis beim Interagieren mit der Website, in den Vordergrund. Ausdrückliches Ziel ist es, den Besuchern ein möglichst positives Erlebnis zu bieten.

Dies schließt ein, dass Inhalte übersichtlich gestaltet sind, dass die Interaktion mit den verschiedenen Elementen der Seite reibungslos funktioniert und dass die Inhalte logisch miteinander verknüpft sind. So wird das Nutzererlebnis durch einen Dreiklang aus Usability (Benutzerfreundlichkeit), Ästhetik und Utility (Nützlichkeit) optimiert.

Website-Layout

Auch das Layout Ihrer Webseite sollte auf Benutzerfreundlichkeit hin konzipiert sein. Denn nicht nur eine einfache Bedienung der Webseite steht ganz oben auf der Wunschliste Ihrer Besucher, sondern auch, die für sie relevanten Informationen möglichst rasch zu finden.

Ihre wichtigsten Inhalte sollten Sie gut sichtbar und weit oben auf der Seite platzieren. Denn wie das Marketingportal QuickSprout berichtet, konzentrieren sich 80 Prozent der Seitenbesucher vor allem auf Informationen „above the fold”, also auf Elemente im direkt sichtbaren Bereich in der oberen Hälfte des Bildschirms. Diese Platzierung ist also optimal, um Ihren inhaltlichen Fokus bündig darzustellen und einen CTA einzubinden, der den Nutzern eine direkte Möglichkeit zur Interaktion bietet.

Eine klare Struktur ermöglicht den Besuchern zudem eine einfache Navigation. Dabei gilt es, die Website nicht zu überladen, um lange Ladezeiten (und Absprungraten!) zu vermeiden. Für mehr Übersichtlichkeit empfiehlt es sich zudem, viel Whitespace unterzubringen.

Eine Reaktion auf den Siegeszug der Mobilgeräte ist das „daumenfreundliche” Layout. 2018 gab es weltweit 3 Milliarden Smartphone-Nutzer – und die scrollen und klicken meistens mit dem Daumen. Das ist sogar wissenschaftlich bewiesen: Wie aus einer Studie mit 1.300 Probanden hervorging, verwenden 75 Prozent der Smartphone-Nutzer ihren Daumen, um in der mobilen Ansicht mit Websites zu interagieren. Ist das Layout einer Seite nicht auf diese Art der Verwendung vorbereitet, kommt es zu Abstrichen beim Nutzererlebnis (UX).

Bild: A List Apart

Responsive Design

Ihre Website sollte skalierbar sein, um unabhängig vom verwendeten Endgerät ein optimales Nutzererlebnis zu bieten. Dafür gibt es das sogenannte responsive Design. Dabei werden die Inhalte einer Website mit flexiblen Grids (Rastern) automatisch auf das Ausgabemedium heruntergerechnet.

Relevant ist das vor allem bei der Verwendung von mobilen Geräten wie Smartphones und Tablets. Die „Mobile Usability“ (Benutzerfreundlichkeit bei der Nutzung von Onlineangeboten mit mobilen Endgeräten) wird bei Webdesign-Ausrichtungen wie Mobile First sogar noch stringenter verfolgt. Das erscheint nur folgerichtig, da allein in Deutschland der Anteil der Smartphone-Nutzer in 2018 auf ganze 81 Prozent gestiegen ist.

Bild: Statista

Auch Projekte wie Googles Accelerated Mobile Pages (AMP) sind auf das UX der mobilen Nutzer spezialisiert: Laut visual.ly sind 85 Prozent der (volljährigen) Befragten überzeugt, dass die mobile Ansicht einer Unternehmenswebsite mindestens so gut oder sogar besser als die Desktop-Ansicht sein sollte.

Aktuelle Trends im Webdesign

UX, Layout, responsive Design – das sind die Eckpfeiler von erfolgreichem Webdesign. Natürlich spielt letztlich aber vor allem auch die Optik eine große Rolle. Für Anregungen vorab lohnt sich ein Blick auf herausragende Unternehmenswebsites.

Im Folgenden haben wir für Sie die spannendsten Trends und Webdesign-Tipps zusammengestellt. Und für noch mehr kreativen Input gibt es unsere Liste der besten Webdesign-Inspirationsquellen.

Ausdrucksstarke Typografie mit Serifen

Serifen-Schriften haben längst den Sprung aus der analogen in die digitale Welt geschafft: Sie bleiben nicht länger traditionellen Medienerzeugnissen wie Zeitungen vorbehalten, sondern finden sich auch als Überschriften und Hervorhebungen auf Websites.

Als aktueller Trend aus dem Bereich der Webfonts bilden die Serifen mit ihrem eher altertümlichen Stil einen gewollten Kontrast zu den minimalistisch gehaltenen Design-Konzepten der Gegenwart – wie dem Flat Design.

Beispiel:

Bild: Marché

Glitch Art

Das englische Wort „glitch“ bedeutet „Störung“. Und genau darauf ist dieser Webdesign-Trend ausgelegt: Webseiten bekommen einen verschobenen, flackernden Look, der ihnen ein surreales Flair gibt. Besonders eindringlich präsentieren sich die Website-Glitches in Videos. Hier wird die Norm bewusst gebrochen und eine mysteriöse Ästhetik kreiert, die Betrachter in den Bann ziehen und zur weiteren Erkundung der Website anregen soll.

Microinteractions

Modernes Webdesign kann neben statischen Formaten, wie Texten und Bildern, auch interaktive Elemente einbinden. Diese sollen Nutzer unterhalten, ihr UX verbessern und sie länger auf der jeweiligen Seite halten.

Eine beliebte Variante sind die sogenannten „Microinteractions“. Dabei triggern die Besucher Ihrer Website winzige Animationen und können auf diese Art mit Ihrer Seite interagieren. Konkret kann das so aussehen: Schwebt der Mauszeiger eines Besuchers über bestimmten Elementen Ihrer Seite, so verfärben oder verbiegen sich diese oder es werden Audiosignale ausgelöst.

Sie können diese kleine Spielerei unter anderem nutzen, um kreativ auf Ihre Calls-to-Action aufmerksam zu machen.

Beispiele:

Quelle: Mustafa Celik

Quelle: Basecom

Responsive Logos

Möchten Sie Bestnoten in Sachen Wiedererkennungswert erreichen, dann sollten Sie sich mit „responsive Logos“ befassen. Diese Logos sind skalierbar und passen sich entsprechend an das Ausgabemedium an, um auch auf kleinen Geräten klar und prägnant die Marke zu verkörpern.

Einige namhafte Firmen arbeiten bereits mit dieser Form des responsive Webdesign: So etwa Coca Cola, Guinness, Chanel und Walt Disney. Weitere Beispiele zum Selber-Skalieren finden Sie auf http://responsivelogos.co.uk/.

Nutzen Sie Ihr Logo als Design-Element der Webseite:

Quelle: Lars Budde

Einbettung von Chatbots

Chatbots gibt es nun schon seit geraumer Zeit – der erste Prototyp ELIZA erblickte sogar schon in den 1960er-Jahren das Licht der digitalen Welt. Seitdem hat sich an dieser Front natürlich viel getan: Die Software wurde intelligenter, und die Bots lernen stetig dazu und verstehen immer komplexere Strukturen.

Doch die künstliche Intelligenz (KI) ist nicht allen Internetnutzern geheuer, vor allem dann, wenn sie Menschen auch optisch nachahmt. Wie aus einer Studie zu IT-Trends von Capgemini hervorgeht, lehnen 50 Prozent der Befragten KI ab, die menschliche Körpermerkmale aufweist.

Dieser Effekt wird als „Uncanny Valley” bezeichnet und ist vermutlich mitunter ein Grund, wieso die Mehrheit der Deutschen der Kommunikation mit Chatbots noch immer skeptisch gegenübersteht.

Das sollte Sie aber nicht abhalten, denn die Bots sind laut einer Studie von Drift, Audience, salesforce und myclever auch in Zukunft ein wichtiges Kommunikationsmittel im E-Commerce. Um sich hier günstig zu platzieren, können Sie also beispielsweise auf freundlich dreinblickende Avatare im Comic-Stil setzen, die mögliche Zweifel Ihrer Besucher charmant zerstreuen.

Webdesign ohne Programmierung: Webdesign mit WordPress

WordPress ist eine Open-Source-Software und im Internet schon lange weit verbreitet: Weltweit verwenden ca. 29 Prozent der CMS-Nutzer die Software. Das Programm besticht vor allem durch eine stetig wachsende Zahl von Layout-Vorlagen, genannt Themes, die unterschiedliche Funktionen für die Nutzer mitbringen.

Dabei reicht die Bandbreite von kostenlosen Vorlagen (bzw. Themes) bis zu Premiumvorlagen, die mit Extras wie spezieller Farbpalette, responsive Design, Plug-ins, professionellem Support und SEO-Features aufwarten.

Bild: Statista

Entscheiden Sie sich für WordPress, sollten Sie unbedingt auf einem der großen Themes-Marktplätze vorbeischauen. Die Plattform Themeforest beispielsweise bietet knapp 12.000 WordPress Themes und Vorlagen an. TemplateMonster dagegen sortiert seine WordPress-Themes nach Kategorien und hat zahlreiche extra auf E-Commerce zugeschnittene Themes im Angebot.

Natürlich spielt auch der Preis eine Rolle: Die meisten Bestseller-Themes auf TemplateMonster und Themeforest kosten um die 60 Euro. Haben Sie sich für eine Vorlage entschieden, muss sie ausgewählt, lizenziert und heruntergeladen werden. Kostenpflichtige Vorlagen bringen oft eine Art Gebrauchsanweisung mit. Diese Dokumentation erklärt Ihnen die Installation Ihrer Neuerwerbung.

Webdesign mit Adobe

Ein weiterer gefragter Anbieter für Webdesign-Tools ist Adobe: Im Ranking der größten Internetunternehmen nach Marktwert in 2019 bekleidet der amerikanische Softwareriese Platz 9.

Dies kommt nicht von ungefähr, denn Adobe bietet seinen Nutzern eine große Auswahl innovativer und bewährter Creative-Cloud-Applikationen an, die leicht miteinander kombiniert werden können. Um diese CC-Apps nutzen zu können, müssen Sie ein Abonnement abschließen: Entweder „mieten” Sie das jeweilige Tool als Einzelprodukt oder im Verbund mit anderen Creative-Cloud-Programmen.

Im Folgenden stellen wir Ihnen die wichtigsten Adobe-Tools für Ihr Webdesign vor.

Die Adobe-Software Photoshop hat in der Welt des virtuellen Designs längst den Status einer Legende erreicht. Neben den ausgefeilten Möglichkeiten zur Bildbearbeitung können Sie das Programm überdies für Grafikdesign, 3D-Illustrationen, Videos und App-Erstellung verwenden. Die Software kann für 11,98 Euro monatlich im „Foto-Abo” genutzt werden. Obendrauf gibt es bei dieser Abo-Variante noch die Tools Lightroom und Lightroom Classic.

Adobe Lightroom (nicht zu verwechseln mit Adobe Lightroom Classic) ist eine cloud-basierte Bildbearbeitungs-App. Sie besticht durch die einfache Bedienung: Mit Reglern und Filtern können auch Laien zügig überzeugende Ergebnisse erzielen. Lightroom hat, im Gegensatz zu Photoshop, keine Bearbeitungsebenen, weshalb die Möglichkeiten der Bildmanipulation eingeschränkt sind. Dafür können Sie Ihre Fotos mit Lightroom übersichtlich ordnen, archivieren und teilen. Automatisches Tagging unterstützt Sie dabei: Das Programm weist Ihren Bildern automatisch Stichworte zu.

Adobe Lightroom Classic ist für die Arbeit auf dem Desktop optimiert. Im Gegensatz zu seinem Namensvetter Adobe Lightroom ist es nicht cloud-basiert und führt keine automatische Speicherung durch. Tags für Bilder vergeben Sie hier manuell und es werden vom Anbieter Vorkenntnisse bei der Bildbearbeitung empfohlen. Das Programm bietet Ihnen unter anderem Werkzeuge für schnelle Korrekturen: Farben können angepasst werden, Sie können Linien begradigen und es ist möglich, unliebsame Gegenstände zu entfernen.

Im Adobe Illustrator können Sie mittels Vektorgrafiken Logos, Symbole, Skizzen, typografische Elemente und andere Illustrationen für Web, Videos und Apps kreieren und nach Bedarf skalieren. Im Illustrator erstellte Inhalte lassen sich leicht in anderen Creative-Cloud-Applikationen weiter bearbeiten – so können Sie Ihrem Logo etwa in Photoshop oder XD den letzten Schliff geben.

Möchten Sie lieber auf Bewegtbilder setzen, empfiehlt sich die Nutzung von Adobe After Effects. Bei dieser App dreht sich alles um Animation: Ihre Designs erwachen zum Leben, etwa als Logo oder Maskottchen. Auch andere Spezialeffekte sind möglich: Ihr Text kann beispielsweise wirbeln, wischen und gleiten.

Mit Adobe Dreamweaver lassen sich Websites mit responsive Design erstellen. Designen, Coden und die Veröffentlichung der Website (oder Web-Applikation) sind mit diesem Tool möglich. Es eignet sich vor allem für IT-bewanderte Webdesigner. Verschiedene Programmiersprachen werden unterstützt: CSS, HTML und JavaScript.

Adobe XD ist ein modernes Screendesign- und Prototyping-Tool für Webseiten (und Apps). Es besticht durch einen übersichtlichen Aufbau und Shortcuts. Dateien können von Webdesignern aus Sketch, Photoshop und Illustrator einfach importiert und in XD-Dateien konvertiert werden.

Was kostet Webdesign?

Der Preis für Ihr Webdesign hängt ganz davon ab, wie Sie es angehen: Erstellen Sie Ihre Website in Eigenregie, mit einem Freelancer oder geben Sie das Ganze in die Hände einer Agentur? Je nachdem, welchen Weg Sie wählen, variieren die Kosten stark. Und je nach Investition und Kenntnisstand berechnet sich auch Ihr Ergebnis.

Mittelständische und kleine Unternehmen in Deutschland setzen bei der Einrichtung ihrer Website auf unterschiedliche Methoden. Wie aus einer Statista-Studie hervorgeht, wählten 39 Prozent der Unternehmen einen Dienstleister, um ihre Firmenseiten zu erstellen, während nur 19 Prozent eine Agentur beauftragt haben.

Bild: Statista

Weitere 19 Prozent haben ihre Unternehmenswebsite selbst erstellt, während erstaunliche 17 Prozent einen Freund damit beauftragt haben und 6 Prozent die Fähigkeiten eines Mitarbeiters in Anspruch nahmen.

In Eigenregie: DIY-Webdesign

Wenn Sie die Erstellung Ihrer Website selbst in die Hand nehmen wollen, kostet Sie das zwar kein Geld, aber dementsprechend Zeit und Mühe. 

Die Do-it-yourself-Methode eignet sich vor allem für kleine Unternehmen mit begrenztem Budget, die zum Beispiel einen einfachen Blog, nur eine einfache Landing-Page oder Portfolio-Seiten erstellen möchten und bereit sind, auf effektvolle Extras zu verzichten.

Webdesign mit Freelancern

Ein Freelancer ist in der Regel preiswerter als eine Agentur. Webdesigner nehmen in der Regel zwischen 40 und 80 Euro die Stunde. Damit halten sich die Kosten in einem überschaubaren Rahmen. Hier heißt es aber: Augen auf bei der Wahl Ihres Designers!

Denn vielleicht bietet Ihr Wunschkandidat keine Komplettlösung an, was bedeutet, dass Sie eine zusätzliche Person beschäftigen müssen, die die Designs in Programmiersprache übersetzt. Solche Details sollten Sie daher unbedingt im Vorfeld klären.

Die Arbeit mit einem Freelancer hat für Sie Vor- und Nachteile. Einerseits können Sie mit dem Webdesigner relativ eng zusammenarbeiten, Details abstimmen und das Produkt Ihren Wünschen gemäß mitgestalten, andererseits kostet Sie diese Vorgehensweise Zeit und Energie.

Der Management-Aufwand ist im Vergleich zur Zusammenarbeit mit einer Agentur ungleich höher, dafür sparen Sie beim Preis: Eine vom Freelancer aufgesetzte Seite mit professionellem Webdesign beginnt bei etwa 500 Euro.

Webdesign mit Agenturen

Eine Webdesign-Agentur bietet Ihnen ein Allround-Paket. Dies ist eine vergleichsweise kostenintensive Lösung: Die Preisspanne reicht hier von 3.000 Euro bis in den sechsstelligen Bereich.

Dafür erhalten Sie in der Regel eine umfassende Betreuung: Üblicherweise wird ein ganzes Expertenteam mit Ihrem Fall betraut, sodass verschiedene Spezialisten zusammen ein ganzheitliches Produkt erschaffen. Sie selbst müssen in der Regel keinerlei koordinierende Aufgaben übernehmen, sondern können sich auf das Endprodukt freuen.

Ob sich ein solch umfassendes finanzielles Investment lohnt, muss jedoch jedes Unternehmen selbst entscheiden. Generell eignet sich dieser Weg eher für größere Unternehmen, die Wert auf fortgeschrittene Funktionen wie ein Content-Management-System (CMS) legen.