In der Anfangsphase geht es darum, zu verstehen, wie wir dem Kunden helfen können. Wir müssen das Endziel der Webseite identifizieren. Oftmals ist das der intensivste Part der Zusammenarbeit mit dem Kunden. In dieser Phase gilt es unter anderem folgende grundlegenden Fragen zu beantworten:

• Für wen ist die Seite gedacht?
• Was erwarten die User dort zu finden oder zu tun?
• Was ist das primäre Ziel der Webseite: Zu informieren, zu verkaufen oder zu unterhalten?
• Welche Konkurrenzseiten gibt es, wenn überhaupt, und inwiefern soll sie sich davon abheben oder davon inspirieren lassen?

Die Klärung des Ziels ist der wichtigste Teil des Webdesign-Prozesses. Wenn die Fragen nicht klar beantwortet werden, kann das ganze Projekt in die falsche Richtung ausufern. Es ist daher sinnvoll, das Ziel schriftlich festzuhalten. Das wird dazu beitragen, das Design auf den richtigen Weg zu bringen. Stelle auch sicher, dass du die Zielgruppe der Webseite verstehst.

Eines der häufigsten und zugleich auch schwierigsten Probleme im Webdesign-Prozess: Das schleichende, teils auch unbemerkte, Wachsen des Projektumfangs. Der Kunde hat zwar ein Ziel vor Augen, doch dieses verändert oder entwickelt sich während des Prozesses stetig weiter – und bevor du dich versiehst, musst du nicht nur eine Webseite aufbauen, sondern auch eine App entwickeln, einen Newsletter auf die Beine stellen und Push-Nachrichten ermöglichen.

Nun gut. Das muss nicht zwingend ein Problem sein. Mehr Arbeit ist ja nicht per se schlecht. Wenn aber auf die gestiegenen Erwartungen nicht auch eine Erhöhung des Budgets folgt, kann das Projekt schnell völlig unrealistisch werden.

Ein realistischer Zeitplan einschliesslich aller wichtigen Meilensteine kann dabei helfen, erreichbare Ziele und Grenzen festzusetzen. Während des gesamten Projekts dient es sowohl dem Kunden als auch dir als Referenz und hilft dabei, dass sich jeder auf seine Aufgaben und Ziele konzentrieren kann.

Eine Sitemap hält die Hierarchie auf einfache Weise fest.

Die Sitemap bildet die Grundlage für jede gut gestaltete Webseite. Sie hilft uns, ein klares Bild von der Informationsarchitektur der Webseite zu bekommen und erklärt die Beziehungen unter den verschiedenen Seiten und Inhaltselementen.

Eigentlich ist das Bauen einer Webseite ohne Sitemap dasselbe wie das Bauen eines Hauses ohne Bauplan. Es kommt selten gut.

Der nächste Schritt ist das Entwerfen der Wireframes. Die Wireframes bilden das Grundgerüst, um die Inhaltselemente und das visuelle Design abzubilden und können dabei helfen, mögliche Herausforderungen und Lücken in der Seitenstruktur zu finden.

Obwohl die Wireframes keine endgültigen Designelemente enthalten, dienen sie als Leitfaden für das Aussehen der Webseite. Manche benutzten am liebsten Stift und Papier, um ihre Wireframes zu erstellen. Andere greifen auf fancy Tools wie Balsamiq oder Webflow zurück. Wir persönlich sind ja ziemlich grosse Fans von Adobe Experience. Falls ihrs nicht kennt, so lohnt sich ein kurzer Abstecher in die Untiefen der YouTube-Tutorials allemal. Schliesslich sind wir alle ja im Besitzt der Adobe Creative Cloud und das Handling des Tools ist wirklich kinderleicht.

Zweck 1 - Inhalte fördern Engagement und Aktion

Erstens binden Inhalte die Leser und treiben sie dazu an, die Massnahmen zu ergreifen, die notwendig sind, um die Ziele einer Webseite zu erfüllen. Dies wird sowohl durch den Inhalt selbst als auch durch die Art und Weise der Präsentation (Typografie, Strukturelemente) beeinflusst.

Stumpfe, leblose und überlange Textinhalte behalten die Aufmerksamkeit der Besucher selten lange. Kurze, knackige und faszinierende Inhalte hingegen bringen sie dazu, sich auf der Webseite durchzuklicken. Auch wenn die Seiten viel Inhalt benötigen – und das tun sie meistens – kann das richtige «Runterbrechen» oder «Zerlegen» dieser Inhalte in kurze Absätze, die durch Bildmaterial ergänzt werden, dazu beitragen, dass sie ein leichtes, ansprechendes Lesegefühl behalten.

In unserem Fall wurde der Inhalt vom Kunden selber geliefert. Grob zusammengefasst handelte es sich dabei um eine Forschungsarbeit auf einem anderen Kontinenten. Doch wie gesagt, so durfte sie nicht wirken. Sie sollte multimedial aufbereitet sein und nicht wie all die anderen Whitepapers daherkommen. Da braucht es selbstverständlich mediale Inhalte. Da wir aber kein Rundreiseticket zur Verfügung gestellt bekamen – schön wär’s – mussten wir unseren Kunden in Windeseile die grundlegenden Prinzipien der Fotografie und Filmaufnahmen beibringen. Zum Einen haben wir ihm ein kleines Handbuch mit den Grundlagen zusammengestellt, welches wir dann in mehreren Sitzungen Kapitel für Kapitel gemeinsam angeschaut und geübt haben. Das ist auch das Wichtigste. Üben! Möglichst oft sollte er das Equipment in die Hand nehmen, sich damit vertraut machen und dadurch Ängste abbauen, die vielleicht vorhanden sind. Auch eine gewisse Vertrautheit und Abläufe wie das Vorbereiten einer Interviewsituation sollten in Fleisch und Blut übergehen. Zum Anderen haben wir ihm Aufgaben gegeben, die er ohne unsere Hilfe zu Hause erledigen sollte. Beispielsweise musste er ein Interview aufnehmen. So konnten wir einerseits überprüfen, ob die Qualität des Materials passt und er merkte, wo noch Fragen offen sind oder Übungsbedarf herrscht.

Falls auch ihr einmal ein kurzes Grundlagen-Coaching in Sachen Film und Fotografie geben müsst, so dürft ihr gerne unser kleines Handbuch verwenden. Ihr findet den Download-Link gleich hier.

Zweck 2 – SEO

Content steigert auch die Sichtbarkeit der Webseite in Suchmaschinen. Das Erstellen und Verbessern der Inhalte, um in den Suchmaschinen besser gerankt zu werden, ist auch als Suchmaschinen-Optimierung, kurz SEO (search engine optimization) bekannt. Besonders wichtig ist dabei die Auswahl der Suchbegriffe resp. Keywords. Während die Suchmaschinenen immer intelligenter werden, sollten auch unsere Content-Strategien immer cleverer werden. Google Trends ist ziemlich praktisch, um Begriffe zu identifizieren, die Menschen bei der Suche tatsächlich verwenden.

Diese Keywords müssen im Title-Tag – je näher am Anfang, desto besser – platziert werden. Sie sollten zudem auch im H1-Tag, in der Metabeschreibung und im Body vorkommen.

Gut geschriebene, informative und stichwortreiche Inhalte werden von Suchmaschinen einfacher erkannt, was dazu beiträgt, die Webseite leichter auffindbar zu machen.

Meistens produziert der Kunde den Grossteil des Inhalts. Es ist daher wichtig, dass du ihn darüber informierst, welche Schlüsselwörter und Phrasen er in den Text einbauen sollte.

Spätestens im vierten Semester wird das alles kein Neuland mehr für dich sein. Frau Bosiers macht in Sachen SEO so schnell niemand etwas vor. Wir raten dir nur, die Ohren zu spitzen und alles wie ein Schwamm aufzusaugen.

Endlich! Endlich können wir uns kreativ austoben. Es ist an der Zeit, den visuellen Stil für die Webseite zu erstellen. Oftmals gibt es hier Vorgaben wie Branding-Elemente, Farbauswahlen und Logos des Kunden. Corporate Design ahoi! Doch auch mit diesen Einschränkungen lassen sich oftmals wunderhübsche Projekte realisieren.

Und, falls dir dies im Studium nicht schon oft genug eingetrichtert wurde: Bilder nehmen eine immer bedeutendere Rolle im Webdesign ein als je zuvor. Hochwertige Bilder verleihen der Webseite nicht nur ein professionelles Erscheinungsbild, sondern vermitteln auch auf simple Art und Weise Botschaften und sind vertrauensbildend.

Visuelle Inhalte sind bekannt dafür Klicks und Engagement zu steigern. Mehr noch, die Leute wollen Bilder auf einer Webseite sehen! Denn sie sorgen nicht nur dafür, dass sich eine Seite weniger schwerfällig und leichter verdaulich anfühlt, sondern sie verbessern auch die Botschaft im Text und können Inhalte vermitteln, ohne dass die User überhaupt lesen müssen.

Achte darauf, dass trotz hochwertiger Qualität die Bilder und Videos für die Online-Nutzung optimiert werden. Einerseits soll die Webseite ja nicht im Schneckentempo laden, und andererseits wollen wir das Internetvolumen der User nicht auf einen Schlag leer saugen.

Das visuelle Design ist ein Weg, um mit den User der Webseite zu kommunizieren und sie anzusprechen. Wenn wir es richtig machen, kann es den Erfolg der Webseite bestimmten. Wenn wir es falsch machen, sind wir nur eine weitere URL im Universum des World Wide Webs.

Sobald die Webseite alle visuellen und inhaltlichen Elemente enthält, sind wir bereits zum Testen. Knieschlottern inklusive.

Wir müssen jede Seite gründlich testen, um sicherzustellen, dass alle Links funktionieren und die Webseite auf allen Geräten und Browsern korrekt geladen wird. Fehler können das Resultat von mickrig kleinen Codierungsfehlern sein. Und obwohl es deine Geduld auf eine Zerreisprobe stellen kann, den Fehler zu finden und zu beheben, so machst du es besser jetzt, als eine kaputte Webseite der Öffentlichkeit zu präsentieren.

Werfe nochmals einen letzten Blick auf die Meta-Titel und Beschreibungen der Seite. Selbst die Reihenfolge der Wörter im Meta-Titel kann die Performance der Seite in einer Suchmaschine beeinflussen.