Die Grundlagen des Website-Redesigns – Eine Fallstudie

Es ist nicht ungewöhnlich, ein Website-Redesign-Projekt abzuschließen, nur um zurückzublicken und zu denken: „Ich hätte die Dinge anders gemacht, wenn ich gewusst hätte, was ich heute weiß.“

Das haben wir alle schon durchgemacht. Wir freuen uns über ein neues Projekt, scherzen mit dem Kunden, unterzeichnen Verträge und fangen an, Prototypen zu verspotten. Das Leben sieht gut aus, aber die Projektgrundlagen sind wackelig.

Sobald das erste Designkonzept präsentiert wird, schleichen sich zwangsläufig Überarbeitungen und Umfangserweiterungen ein, und von da an geht es bergab. Die Kommunikation bricht zusammen, nichts läuft wie geplant, und schließlich ähnelt die neu gestaltete Website der Monstrosität, für deren Reparatur Sie angeheuert wurden.

Erstklassiges Design und Benutzererlebnis beginnen nicht mit einem hübschen Mockup – es basiert auf strategischer Planung und einer Designvision, die sich auf die Unternehmensziele konzentriert. Das primäre Ziel kann nicht sein: „Lasst uns eine hübschere Website machen.“

Website-Designer sind für die Benutzererfahrung (UX) und die Benutzeroberfläche (UI) verantwortlich. Es ist unsere Aufgabe, sicherzustellen, dass Benutzer eine optimale Erfahrung bei der Interaktion mit den von uns entworfenen Schnittstellen haben. Dies erfordert eine gründliche Planung bereits bei der Konzeption eines Projekts.

Dieser Artikel skizziert einen zuverlässigen Prozess, der dazu beitragen wird, dass Ihr nächstes Website-Redesign auf einer soliden Grundlage aufbaut.

Der Wert der Website-Neugestaltung Recherche vor dem Projekt

Um den Prozess zu demonstrieren, lassen Sie uns die Phasen einer Website-Neugestaltung durchgehen, die für Archaeology Southwest, eine gemeinnützige Organisation, die archäologische Stätten im Südwesten der Vereinigten Staaten erforscht und schützt, abgeschlossen wurde.

Untersuchen Sie nach einer vorläufigen Untersuchung des Kundenbereichs und der Konkurrenz alle verfügbaren Website-Assets genau. Diese Analyse wird separat in Rechnung gestellt und findet statt, bevor überhaupt ein Projektangebot erstellt wird. Auf diese Weise werden zweideutige oder überhöhte Schätzungen vermieden, die entstehen, wenn Webdesigner versuchen, Probleme zu berücksichtigen, die später in einem Projekt an die Oberfläche kriechen könnten.

Im Fall von Archaeology Southwest war ich mit einer Website konfrontiert, die dringend Aufmerksamkeit benötigte – Berge über Berge vollgestopfter Inhalte in einem alten CMS-Portal. Es war schlecht, also machte ich mich daran, Ordnung zu schaffen.

Schritt 1: Machen Sie sich mit den Inhalten vertraut

Beim Umbau eines Hauses ist es wichtig, wertvolle Materialien vor dem Abrisstag zu retten. Das gleiche Prinzip gilt für das Website-Design. Sie müssen Seite für Seite durch die Site gehen und den gesamten Inhalt herausziehen. Als Designer müssen wir herausfinden, welche Inhalte einen einzigartigen Beitragstyp verdienen und welche Seiten statisch sind.

Sobald dies erledigt ist, entwickeln Sie eine Strategie, wie Sie alles organisieren können, aber entscheiden Sie nicht, welche Inhalte bleiben und welche entfernt werden sollen. Warum nicht?

Wenn es um reale Unternehmen und Organisationen geht, gibt es eine Reihe verschiedener Personen, die für den Inhalt einer Website verantwortlich sind, und die Menge an vorhandenem Inhalt kann atemberaubend sein. Der beste Ansatz ist, zuerst alles zu klassifizieren.

Normalerweise beginne ich mit der Hauptnavigation und gehe Seite für Seite. Auf diese Weise habe ich die Informationsarchitektur und die Sitemap vor dem ersten Kundengespräch fertig.

Leider war der Standort von Archaeology Southwest nicht typisch. Die meisten Links waren nicht über die Top-Navigation zugänglich und im Inhalt versteckt. Ich hätte eine böse Überraschung erlebt, wenn ich das Projekt nur basierend auf der Navigation zitiert hätte.

Durch Gespräche mit verschiedenen Personen im Team des Kunden konnte ich mir ein besseres Bild vom Umfang des Projekts machen, und nach einem Treffen mit dem Kunden konnte ich den Fokus, den Arbeitsablauf, den Inhalt und die Funktionen der Website identifizieren. Daraus haben wir die folgenden Kerntypen von Inhalten entwickelt (einige neu, andere bereits):

Schritt 2: Fokus erstellen. Vereinfachen. Organisieren.

Sobald der gesamte Inhalt in beschrifteten Feldern organisiert ist, ist es an der Zeit, den Entwurf für eine neue Struktur zu entwickeln, die den Inhalt in seiner besten Form präsentiert. Aber zuerst müssen wir Fokus schaffen.

Laut Archaeology Southwest besuchen Menschen ihre Website, um Informationen über laufende Projekte zu recherchieren, sich über bevorstehende Veranstaltungen zu informieren und ein monatlich erscheinendes Magazin zu lesen. Diese Aktivitäten beantworten die Frage: „ Was machen die Leute auf der Website?“ aber verraten nicht, warum die Leute die Seite überhaupt besuchen.

Das „ Warum “ steht im Mittelpunkt der Website. Um den Fokus zu finden, schauen Sie auf den Kern der Organisation.

In diesem Fall habe ich „Ort“ als das Herz von Archaeology Southwest identifiziert. Ohne Standort gäbe es keine archäologischen Stätten, keine Ruinen und erst recht keine Museen oder Ausstellungen. Alles in der Archäologie bezieht sich auf den Ort.

Mit einem identifizierten Fokus können wir vereinfachen und organisieren. Für Archaeology Southwest habe ich damit begonnen, den Inhalt in Kategorien aufzuteilen, die nichts mit Orten zu tun haben, wie z. B. Teamseiten und Jahresberichte. Nach ein wenig Aufräumen bin ich bei dieser groben Karte gelandet:

Das obige Bild stellt die beiden Kernbereiche dar, die sich herauskristallisiert haben: Aktivitäten und Standorte . Aktivitäten (links) umfasst Aktivitäten, die ein Besucher der Website kennenlernen und ausführen kann. Standorte (rechts) konzentriert sich auf Websiteinhalte, die sich auf bestimmte Standorte beziehen. Warum so strukturieren?

Die Idee ist, dass ein durchschnittlicher Benutzer den Namen eines Videos oder Projekts vielleicht nicht kennt, aber wahrscheinlich den Namen eines Ortes kennt. Auf diese Weise können Besucher ortsbezogene Inhalte finden.

Darüber hinaus repräsentiert jeder Farbblock in Locations einen eindeutigen Beitragstyp. Aus organisatorischer Sicht sind Ausstellungen, Kurse und Online-Ausstellungen allesamt Veranstaltungen unterschiedlicher Natur.

Auf der alten Website von Archaeology Southwest gab es separate statische Seiten für ein Magazin und einen Online-Shop, in dem Besucher das Magazin kaufen konnten. Um den Einkauf zu vereinfachen, habe ich eine Kaufoption in die Magazinvorlage integriert.

Die restliche Organisationsstruktur war einfach:

• Eine „Über“-Seite, um mehr über die Organisation zu erfahren
• Ein direkter Link zur Seite „Store“.
• Eine „Spenden“-Seite
• Eine neue „Updates“-Seite

Die Shop- und Spendenseiten sind Geldverdiener, daher war es wichtig, dass sie in die Hauptnavigation aufgenommen werden.

Sobald der organisatorische Entwurf fertig ist, ist es an der Zeit, die eigentlichen Inhalte zu verbinden.

Schritt 3: Beziehen Sie den Kunden mit ein

Die Sitemap enthält Seitentypen, aber nicht die Zuordnung von Inhalten. Erfahrene Webdesigner wissen, dass die meisten Probleme auftreten, wenn ein Kunde anfängt, Inhalte zu seiner Website hinzuzufügen. Um dieses Problem zu vermeiden, lassen Sie den Client von Anfang an eingeschleift.

Für Archaeology Southwest habe ich ein Google-Dokument erstellt, das die Sitemap enthielt, und ich habe den Kunden gebeten, seinen alten Inhalt der neuen Struktur zuzuordnen.

Wenn etwas nicht ganz passte, haben wir es später angesprochen. Dies ist ein kritischer Schritt. Warum? Neben der Einbindung des Kunden in den Prozess werden Probleme mit der Struktur aufgedeckt, bevor die Implementierung beginnt.

In diesem Fall wurden einige der Sitemap-Menüpunkte geändert, und da der Kunde mehrere Spendenseiten hatte, war es sinnvoll, nur dafür einen eindeutigen Beitragstyp zu erstellen.

Erstellen Sie visuelle Strukturen durch Wireframing

In diesem Schritt beginne ich, der Arbeit eine visuelle Struktur zu geben. Damit das System gut funktioniert und die Vorstellung, dass „alles mit dem Standort zusammenhängt“, erfolgreich integriert wird, habe ich eine bidirektionale Beziehung zwischen Beitragstypen erstellt.

Hier ist die Grundidee: Wenn Besucher auf die Website von Archaeology Southwest kommen und den Grand Canyon auswählen, sehen sie Informationen zu diesem Ort, aber sie finden auch Informationen zu Projekten, Veranstaltungen, Ausstellungen und allem anderen, was Site-Administratoren als Ort markieren. Spezifisch.

Da der Link bidirektional ist, können Besucher auch über eine Projektseite zum Grand Canyon gelangen. Letztendlich bin ich bei dem hier gelandet:

Die Standort-Indexseite zeigt alle Standorte an, wobei der neueste ganz oben steht. Die Suchleiste ist das erste, was der Benutzer sieht, wenn er auf der Seite ankommt. Die Google-Karte wird rund 80 Prozent des Bildschirms einnehmen. Auf diese Weise können Benutzer Punkte auf der Karte auswählen, und während sie scrollen oder suchen, wird das Listenraster angezeigt.

Auf einer einzelnen Standortseite befindet sich der Hauptteil auf der linken Seite, da es sich um die wichtigsten Informationen handelt. Zugehörige Metainformationen sind zweitrangig, also stehen sie auf der rechten Seite. Um ein ausgewogenes Layout zu erreichen, ist es wichtig, eine klare Hierarchie zwischen dem ersten, zweiten und dritten Elementblock zu haben. Dadurch kann sich das Auge mühelos zwischen den Abschnitten bewegen.

Im Archaeology Southwest-Layout beginnt das Auge des Benutzers mit der Kopfzeile, bewegt sich dann zum Inhaltsblock und schließlich zur rechten Seitenleiste. Alle verwandten Inhalte werden in der Reihenfolge ihrer Relevanz angezeigt. Wenn der Benutzer beispielsweise etwas über den Grand Canyon liest, werden diesem Inhalt wahrscheinlich Fotos und eine Karte folgen.

Da dies hauptsächlich eine Bildungsseite ist, ist es wichtig, die Option „Bezug zu diesem Ort“ zu haben. Es gibt jedoch nicht viele Inhalte, die eindeutig mit jedem Standort verknüpft sind, daher habe ich selten verwendete (aber verwandte) Inhalte in einem einzigen Block unter dem Text zusammengefasst.

Das Platzieren von Magazin- und Video-Thumbnails unter verwandten Inhalten fügt zusätzliche visuelle Elemente hinzu und leitet Benutzer zur „Kaufen“-Seite weiter. Die Seite wird durch die Anzeige verwandter Orte vervollständigt. Dies ist eine großartige Möglichkeit, Benutzer dazu zu verleiten, die Website weiter zu erkunden. Der nächste Schritt besteht darin, diese Struktur für andere Beitragstypen fortzusetzen.

Geben Sie der Homepage ein klares Ziel

Mit einem allgemeinen Modell für Beitragstypen kann ich mich auf die Homepage konzentrieren. Der erste Schritt besteht darin, das Ziel für die Startseite festzulegen – dies ist ein wichtiger Teil des UI-Designs. Die Recherche des Kunden hat gezeigt, dass viele Benutzer über die Website stolpern, ohne vollständig zu verstehen, was sie ist. Daher muss ein Einführungs- und Begrüßungstext das erste sein, was Benutzer sehen.

Der neue Kernfokus liegt auf dem sekundären Standortblock. Darauf folgt alles, was auf archaeologysouthwest.org passiert (das aktuelle Magazin, Blog, Veranstaltungen, Newsletter und so weiter). Hier ist die Iteration des Layoutprozesses:

Mit V1 (links) habe ich ein Grundlayout entworfen, das der ursprünglichen Homepage ähnelt. Es gibt nicht viel Hierarchie. Das erste, was Benutzer sehen, ist der vorgestellte Ort, aber von dort aus werden sie sich wahrscheinlich in den Spalten verlieren.

Für V2 (Mitte) habe ich eine separate Spalte erstellt, der das Auge leichter folgen kann. Es kann jedoch noch verbessert werden. Hier spielt die Kenntnis der Inhalte eine große Rolle. Ich weiß, dass bei Archaeology Southwest nie mehr als zwei Veranstaltungen gleichzeitig stattfinden, daher macht es keinen Sinn, Platz für mehrere Veranstaltungen auf der Homepage zu haben.

In V3 (rechts) habe ich mich auf die bevorstehenden Ereignisse konzentriert. Wenn es aus irgendeinem Grund mehr als zwei Ereignisse gibt, kann der Benutzer auf die Schaltfläche „Mehr“ klicken und den Rest sehen. Ich lege auch besonderen Wert auf das aktuelle Magazin, da es der Geldmacher des Kunden ist. Benutzer beginnen oben und arbeiten sich in einem F-Muster nach unten. Der Augenfluss ist:

Ausgewählter Standort > Willkommen > Magazin > Veranstaltungen > Nachrichten

Mit einem visuellen Wireframe und der Struktur der Website ist es viel einfacher, Funktionen und Funktionsweisen zu festigen. An diesem Punkt habe ich ein weiteres Meeting mit dem Kunden, um die Funktionalität und den Ablauf der Benutzerinteraktion zu besprechen, die beide zu diesem Zeitpunkt viel klarer sind.

Wird es später noch Überarbeitungen geben? Ja, aber es handelt sich um Anpassungen, nicht um vollständige Prozessänderungen. Am wichtigsten ist, dass es keine Überraschungen geben wird.

Integrieren Sie den Brand Style Guide

Jetzt kommt der aufregende Teil – die Umwandlung der Wireframes in etwas, das Menschen verwenden und erleben können. Bei diesem Projekt wollte ich geschriebene Inhalte durch die Implementierung von Markenfarben und Typografie leicht verdaulich machen.

Experimentieren Sie mit Typografie-Kombinationen

Typografie ist ein wesentlicher Bestandteil eines guten Webdesigns, daher müssen wir unser Schriftschema früh herausfinden. Der größte Teil der Archaeology Southwest-Identität verwendet Univers Condensed Light und die Adobe Caslon-Schriftart. Es gab keine Regeln dafür, wann Adobe Caslon verwendet werden sollte, aber ich bemerkte, dass es nicht so oft verwendet wurde wie Univers.

Ich habe eine kleine Schriftstudie durchgeführt, um zu sehen, welche Paarungen das beste Gefühl für eine professionelle gemeinnützige Organisation schaffen. Allerdings wollte ich auch nicht, dass mein Typenschema zu sehr von den Marketingmaterialien des Kunden abweicht.

Nach Schriftvergleichen wurde klar, dass Adobe Caslon die Titelschrift und Univers für Untertitel verwendet werden sollte. Das Festlegen der Haupttitel in Groß- und Kleinschreibung verleiht der Marke ein persönlicheres Gefühl, während alle Großbuchstaben eher eine Unternehmensatmosphäre erzeugen.

Optimieren Sie das Look and Feel der Website

Ich wollte ein leichtes und offenes Erlebnis schaffen, damit die Benutzer das Gefühl haben, dass Archaeology Southwest sowohl zugänglich als auch höchst kompetent ist. Basierend auf Analysedaten verwendet die Mehrheit der Besucher Desktop-Browser (wahrscheinlich, weil die meisten Leute die Website zu Recherchezwecken besuchen). Daher lag mein anfänglicher Fokus auf dem Entwerfen für Desktop-Benutzer.

Ich wollte, dass Besucher, wenn sie von Desktops kommen, sofort den vorgestellten Ort, den Begrüßungstext und bevorstehende Veranstaltungen sehen, gefolgt von einem Teil des Zeitschriftentitels. Auf diese Weise sehen die Leute zuerst, worum es bei dem Unternehmen geht und wofür es wirbt.

Auf Mobilgeräten sind die Prioritäten etwas anders. Da Benutzer unterwegs auf Informationen zugreifen, sind Ereignisse wichtiger, sodass sie in der Liste weiter oben platziert werden.

Ich habe auch den Spenden-Button in der Fußzeile aktualisiert, um ihn freundlicher zu gestalten, indem ich ihn von einem Button in einen Satz geändert habe.

Finishing Strong: Achten Sie auf die Details

Benutzer kommen aus zwei Gründen auf die Detailseite: Entweder möchten sie mehr über einen Orientierungspunkt erfahren, oder sie kennen einen Ort bereits und suchen nach zusätzlichen Informationen (Wegbeschreibung, Telefonnummern usw.). Daher ist es wichtig, beide Optionen sofort anzubieten, damit Benutzer nicht suchen müssen.

Ich habe mich entschieden, die Detailspalte aus dem Inhaltsbereich herauszulösen, um ihr mehr Gewicht zu verleihen und die Seite interessanter zu machen. Dies hilft, eine Kompositionshierarchie zu erstellen, sodass ein Besucher, wenn er auf die Seite kommt, zuerst den Seitentitel sieht, gefolgt von einer kleinen Bildergalerie und dann der Detailspalte.

Diese Art der Gestaltung stellt sicher, dass Benutzer die zusätzlichen Details eines Standorts sofort bemerken. Eine kleine zusätzliche Polsterung rund um die Säule hält die Augen konzentriert und erleichtert das Durchsuchen der Informationen.

Die mobile Ansicht bricht erwartungsgemäß zusammen. Der Inhalt wird zuerst gelöscht und die Metainformationen folgen. Ich habe Videos und Zeitschriften zuletzt auf der mobilen Seite platziert, da sie für mobile Benutzer am wenigsten wichtig sind. Andere Seiten folgen der gleichen Struktur, um einen konsistenten Fluss und ein konsistentes Erlebnis zu schaffen.

Das Web-Redesign basiert auf einer sorgfältigen Planung

Rückblickend auf den Redesign-Prozess der Website wird deutlich, dass die meiste Zeit der Organisation und Planung gewidmet wurde. Nur 30 Prozent des Projekts wurden für die Gestaltung der Website aufgewendet.

Wenn Designer ihre Arbeit zeigen, versäumen sie es oft zu vermitteln, wie viel Zeit für die Grundlagen der Kommunikation aufgewendet wird, was dazu führt, dass unerfahrene Designer direkt mit Modellen beginnen. Das Ergebnis? Gescheiterte Projekte und unzufriedene Kunden.

Damit eine Website-Neugestaltung erfolgreich ist, bedarf es einer detaillierten Planung. Sich die Zeit zu nehmen, Vorprojektrecherchen durchzuführen, sich mit bestehenden Inhalten vertraut zu machen und den Kunden einzubeziehen, sind entscheidende Schritte.

Letztendlich führt kein Weg daran vorbei; Der Weg zu erstaunlichen Website-Redesigns und professionellem Vertrauen wird durch eine methodische Herangehensweise an die Projektorganisation geebnet.