Website Steuerkanzlei taxemo auf verschiedenen Geräten und im Browser. Im Vordergrund: Visitenkarten.

Vorgehensweise für gutes Webdesign

Am Beispiel von taxemo

Achtung: Sie betreten Nerd-Gebiet. Dieser Artikel enthält viele Fachbegriffe aus dem Marketing und der IT.

Briefing

Das etwa einstündige telefonische Briefing war die Basis für die Konzeption. Im lockeren Gespräch konnte ich ein Gefühl für taxemo entwickeln. Gleichzeitig habe ich alle Informationen und spontanen Ideen protokolliert.

Inhalte des Briefings:

  • Herausarbeiten der Alleinstellungsmerkmale
  • Customer stories vermitteln oft die besten Beispiele und Use Cases
  • Zielgruppe: Wer sind die Mandanten, welche Ziele verfolgen sie?
  • Konkurrenz, Standort, weitere Mittel im Marketingmix, etc.
  • Definition Zielsetzung: Welche Ziele verfolgt taxemo konkret?
  • Logo-Ideen und grobe Farbvorstellungen von taxemo

Recherche

Erste Ideen entstanden schon im Telefonat – weitere während der Recherche nach dem Briefing:

  • Was bedeutet das Werbeverbot für Steuerberater konkret für uns?
  • Bestandsaufnahme und Beurteilung der Konkurrenz-Websites
  • Recherche & Gespräche: Welche Ziele haben typische Mandanten?

Konzeption & Design

Fakten und erste Ideen habe ich in einer umfangreichen MindMap erfasst.

Mind Maps für Konzeption und Struktur der Website der Steuerkanzlei taxemo

Ich habe das Logo entwickelt und inhaltliche Schwerpunkte in Abstimmung mit taxemo definiert. Die ersten Ich-Botschaften sind entstanden – meist direkt mit Stockphoto-Recherchen verknüpft.

Layout in Photoshop und im Browser

Aus der Logo-Schriftart leiteten wir die Fonts ab, eine Skizze des groben Aufbaus der Website wurde entwickelt und besprochen. Die Struktur und Ziele der einzelnen Seiten wurde als Mindmap fixiert und abgestimmt.

Webdesign: Layout zunächst als Skizze, dann in Photoshop, später im Browser.
Von der Skizze zum 960-Grid als Photoshop-Prototyp

Der Photoshop-Entwurf half allen Beteiligten, eine Vorstellung der Gesamtwirkung zu entwickeln. Die weitere Ausarbeitung des Layouts erfolgte aber im Browser: prototypisch mittels Sass und HTML5. So konnte mobile first und agil entwickelt werden.

Aufgrund meines ausführlichen Briefings konnte parallel das Team fotografiert werden: jung, frisch, sympathisch und „nach vorne“. Die Motive wurden von Fotofrech wunderbar umgesetzt und von mir nachbearbeitet.

Technische Umsetzung

Die technische Umsetzung des Prototypen machte mikroH für das hauseigene CMS.

Sie wollen strukturiertes Vorgehen?

Jetzt Website anfragen studierter Informatiker

Ihre Anfrage ist unverbindlich

Ihr Ansprechpartner

Thomas Praxl

Gleich anrufen:
06405 50 25 35

Oder mailen:
kontakt@macrominds.de