Webdesign Workflow zur Erstellung einer kompakten Webseite für einen unserer Kunden
In diesem Beitrag zum Thema Webdesign, am Beispiel unseres Kunden, der Steuerberatungsgesellschaft Wirtschaftsdienst Freiburg, beschreiben wir, wie wichtig die visuelle Kommunikation bei der Webseitenerstellung ist,
dazu die Arbeitsschritte, die sich daraus ableiten lassen und wie diese erarbeitet werden. Für Interessenten eines Webauftritts – auch als Kleinunternehmen – eine Information, die zeigt, wie wir arbeiten, worauf man achten sollte und wie sich die Ergebnisse der notwendigen Arbeiten darstellen.
Webdesign Freiburg
Espresso zum Briefing
Steuerberatung ist aus Sicht des Laien eine staubige Angelegenheit – nicht nur in Freiburg.
Zahlen, Finanzämter, Rechnungen und Abschreibungen, dazu die rechtlichen Themen – alles, womit man sich im Grunde nicht wirklich gerne auseinandersetzt. Da ist man froh, hat man einen versierten Helfer an seiner Seite, auf den man sich verlassen kann. Im Falle des Wirtschaftsdiensts Freiburg ist das so, denn dieser verfügt über die fachliche Kompetenz inklusive rechtlicher Expertise. Außerdem menschelt es sehr. Das macht die Zusammenarbeit angenehm und zudem effektiv.
Für die Umsetzung der Webseite gab es zunächst einen Vororttermin mit einen guten Espresso und einige Telefonate im Laufe des Projekts.
Mindestanforderungen Website
- https-Zertifikat (Sicherheit)
- DSGVO-konforme Cookie-Funktionalität (gesetzlich vorgeschrieben)
- rechtskonformes Impressum und Datenschutzerklärung (gesetzlich vorgeschrieben)
- responsives Design (zusätzliche Darstellungsoptimierung für Smartphone und Tablett)
- schneller Seitenaufbau
- keine Dead-Links (404-Error) – Verweise auf ungültige Seiten
- keine funktionalen Fehler und -meldungen
- keine inhaltlichen Fehler
- gestalterisch einwandfrei
- keine orthografischen Fehler
- Vermeidung schlechter Bilder und Medien
- Beantwortung der 7-W-Fragen zum Unternehmen
- intuitive Bedienbarkeit
Webdesign Freiburg
Briefing und Kundenauftrag
Die Kundenanforderung: „Wir benötigen eine kleine, kompakte Webseite, die unser Image unterstreicht, sauber, vertrauenswürdig, modern. Gegebenenfalls noch das Logo etwas anpassen und einige Drucksachen erstellen. Zur Verfügung stellen können wir Logo, ein Cover eines Wirtschaftsberichts, ein paar Fotos, ein Datev-Logo, Briefpapier, eine Domain, die Zugänge sowie einige Informationen zu unserer Tätigkeit.“
Webdesign Freiburg
An die Arbeit!
Im Grunde ist es sinnvoll, dass bei der Erstellung eines Firmenimages nicht zu viel Zeitdruck besteht, denn Kreation ist keine Fließbandarbeit, sondern ein Schaffensprozess. Man hat Ideen, sammelt diese, verwirft sie, dreht und wendet sie, bis sich eine Form bildet. Da ist es gut, kann man über die eine oder andere Idee eine Nacht schlafen.
Beim Wirtschaftsdient Freiburg war es so, das wir zunächst die Parameter prüften, worauf es bei einem Steuer- und Unternehmensberater ankommt, als da wären:
- Vertrauen
- Zuverlässigkeit
- Kompetenz
- Ordnung
- Modernes Umfeld
Kreation Webdesign und CD
- Definition der Farbpalette
- Logo Update
- Key Visual erstellen (Bergpanorama)
- Texte verfassen
- Arbeiten mit Kunden abstimmen
- Freigeben lassen
Webdesign Freiburg
Key Visual – das Schlüsselbild
Als Input hatten wir noch einen schönen Blick aus den Büros des Steuerbüros vor Augen, der in den Schwarzwald reicht und weil sich das sehr gut verband mit der Idee, Berge zu erklimmen, um die steuerlichen und rechtlichen Hürden zu meistern, suchten wir nach einem geeigneten Foto, welches das widerspeigelt und sich visuell mit den bestehenden Farben vertrug. Bilddatenbank aufklappen, suchen, suchen, suchen. Gefunden. Dem Kunden gefiels und wir hatten das Hauptbild, das dem ganzen ein Gesicht gibt – auch Key Visual genannt, das man ab sofort in allen Unterlagen als Cover Image verwenden kann.
Webdesign
- Website gestalten
- Website programmieren
- Website mit Kunden abstimmen
- Freigeben lassen
Webdesign Freiburg
Farbe Blau im Corporate Design
Die Farbe Blau eignet sich besonders gut in der Kommunikation, wenn es sich um die Attribute Zuverlässigkeit und Vertrauen handelt. Diese bestanden bereits und wurden nur geringfügig angepasst und dokumentiert als Primäre Hausfarbe und Schmuckfarben. Hier ist es wichtig, immer wieder exakt dieselben Farben zu verwenden, damit die Farbe die Markenbildung (Brand) stärkt, was dazu führt, dass man im günstigsten Fall die Farbe mit der Firma assoziiert. Denken Sie an das Milka-Violett oder Telekom-Magenta. Das Telekom-Marketing hat es als so wichtig erachtet, um es sogar in den Markennamen aufzunehmen. Jeder, der meint, Farbe sei nicht wichtig, sollte das ein Anstoß sein, diese Denke zu revidieren.
Setup, Hosting + Support
- System einrichten
- Emails einrichten
- Testen, testen, testen…
- Funktionstest freigeben lassen
Webdesign Freiburg
Minimalistisches Design schafft Ordnung
Um die Ordnung und Struktur als Adjektiv der Firma zuzuordnen, hilft ein minimalistisches Design, das dem gerecht wird. Da wir eh ein Freund des reduzierten Designs sind, musste man sich hier nicht verbiegen, sondern konnte die Arbeiten im Flow erledigen.
Print + Prepress
- Visitenkarten gestalten
- Briefpapier gestalten
- Layout mit Kunde abstimmen
- Prepress erstellen für den Print
- Freigeben lassen
- Druck in Auftrag geben
- Lieferung überwachen
Webdesign Freiburg
AIDA-Formel
Die Wahrnehmung der Kompetenz des Unternehmens wird zum einen über die gesamte Visualisierung und Funktionalität der Webseite getragen, zum anderen über die Information, die man bietet. Nach der AIDA-Formel (Attention, Information, Desire, Action) entwickelt man also den Aufbau und lenkt den Besucher gezielt zur Aktion, nämlich der Kontaktaufnahme.
Die AIDA-Formel findet gleich mehrfach Anwendung. Sie führt den User von der Startseite über die Informationen und das Angebot zum Kontakt und baut dabei kontinuierlich Vertrauen auf. Auf diesem Weg wird der Besucher zunächst visuell angesprochen, um ihn zu gewinnen. Dieser erste Eindruck ist es, der einen Benutzer auf der Seite hält oder im schlechtesten Fall dafür sorgt, dass er das Fenster wieder schließt – zumindest dann, wenn er die Wahl hat und gleichermaßen eine Alternative im Netz finden kann.
AIDA-Formel
- Attention
- Information
- Desire
- Action
Webdesign Freiburg
Above the Fold
Dem ersten Bereich, den man auf einer Webseite sieht, kommt daher eine besondere Bedeutung zu. Es ist, wie beim Kennenlernen einer neuen Person. In Millisekunden entscheidet man, ob man jemanden mag, sympathisch, interessant, redlich, dumm, hässlich oder vielleicht arrogant findet. Wenn die Person dann anschließend den Mund aufmacht, bestätigt sich das oder die Person hat zu kämpfen, diesen ersten Eindruck zu widerlegen. So ist es bei Webseiten auch.
„Above the Fold“ heißt also der essentiell wichtige Bereich der Webseite, den man wahrnimmt. Der Begriff stammt übrigens von einem gefalteten Brief und dem Bereich den man sieht, wenn das Papier noch gefaltet ist, also dem obersten Drittel. Bei einem Falzflyer ist das die Frontseite und bei der Website eben der Bereich, den man ohne Scrollen sieht, sobald man auf die Website kommt.
Und in diesem Bereich spielt sich also die ganze Magie des Kennenlernens ab. Deswegen ist dieser so enorm wichtig! Das muss logischerweise auf dem Mobile und Tablett genauso funktionieren.
In dieser Sektion spielt sich übrigens die AIDA-Formel nochmals in geraffter Form ab. Die Blickführung funktioniert vom Bild (Attention) zum Logo zur Message (Information) zu weiteren Infos (Action). Der CTA (Call-to-Action) ist dafür maßgebend.
Above-the-Fold-Inhalte
- Eyecatcher
- Brand
- USP
- CTA
Webdesign Freiburg
Fazit und Projektabschluss
Werden alle Regeln der Gestaltung und Funktionalität beachtet und die Gestaltungs- als auch Seitenstruktur nach AIDA erstellt, funktioniert die Seite beim Benutzer.
Am Ende eines Projekts wird nochmals das Projekt analysiert, ggf. zukünftige Arbeiten besprochen und die Kundenzufriedenheit geprüft. In diesem Fall erhielten wir ein tolles Lob. Der Kunde sehr zufrieden. Für die Umsetzung inklusive Print benötigten wir rund sechs Wochen Zeit.
Empfohlene Updates
- Google Local Business Profile
- Suchmaschinenoptimierung
- Social Media Elemente
- News
Webdesign Freiburg
Above the Fold nach AIDA