Teamarbeit mit externen Spezialisten ist auch für unsere Webdesigner eine interessante Herausforderung. Am Ende unseres Leistungsportfolios – von der Beratung und Konzeption über die Gestaltung und das Web Authoring – setzen nicht selten Entwickler und IT-Unternehmen mit Individualprogrammierungen an. Sie realisieren individuelle Web-Anwendungen, wie z. B. Anbindungen an Warenwirtschaftssysteme, Unternehmens-Software oder Online-Archive.
An den zwei aktuellen Projekten, brauwelt.com und kaiser-lacke.de, lässt sich unsere schrittweise Erarbeitung von Designs für komplexe Anwendungen sehr schön darstellen.

Digitalmedien

UX Design und UI Design als Aufgabenstellung

Zwei Kunden beauftragten unser Büro gezielt mit dem Part Screendesign bzw. UX Design (User Experience Design) oder UI Design (User Interface Design). Die Programmierung bzw. technische Umsetzung erfolgte jeweils durch Spezialisten für Individualprogrammierungen.

1. brauwelt.com mit Werbeplätzen und Online-Archiv

Unser langjähriger Kunde Fachverlag Hans Carl übertrug uns die Erstellung eines Gestaltungskonzepts in mehreren Schritten – von Wireframe-Prototypen bis visuell ausgestaltete Prototypen – auf Basis eines detaillierten Briefings. Typisch bzw. essenziell war hierbei das iterative Arbeiten. Die Zwischenstände der Prototypen wurden immer wieder getestet und optimiert. Nach der Entwicklung von Design und Prototypen beauftragte uns der Kunde mit der kompletten Frontend-Programmierung von Schlüsselseiten des Online-Magazins. Die Implementierung erfolgte dann durch die Experten für die eingesetzten Datenbanksysteme.

Prototyp Wireframe für Brauwelt – Version 1
1. Im ersten Schritt wurden das allgemeine und das Startseiten-Layout als Wireframe entwickelt. Da detaillierte Vorgaben vorlagen und die weitere Frontend-Programmierung beauftragt war, wurde das Wireframe auch gleich in HTML und CSS mit dem Framework „Bootstrap“ umgesetzt.
Prototyp Wireframe für Brauwelt – Version 2
2. Nach der Finalisierung des Layouts fuhren wir mit der Schriftgestaltung und der Ausbalancierung verschiedener Elemente hinsichtlich Größe und Abstände zueinander fort. Da dies weiterhin in HTML und CSS erfolgte, war zu jeder Zeit das „Erleben“ (Look and Feel) im Browser gegeben.
Prototyp Wireframe für Brauwelt – Version 3
3. Mit der visuellen Ausgestaltung – hier stark angelehnt an das gedruckte Magazin „Brauwelt“ – entsteht nun der Prototyp der Website.
Prototyp Wireframe für Brauwelt – Version 4
4. Es folgen weitere Umsetzungsschritte und Abstimmungsrunden bis zum finalen Design.
Prototyp Wireframe für Brauwelt – Version 5
4. Es folgen weitere Umsetzungsschritte und Abstimmungsrunden bis zum finalen Design.
Prototyp Wireframe für Brauwelt – Version 6
5. Nach Ausarbeitung des Designs folgt die Gestaltung von Schlüsselseiten – hier z. B. eine Artikelseite mit großem Hero-Image.

Die Ausarbeitungsstufen und Variationen wurden im Projektverlauf zusammengefasst dokumentiert, sodass zu jeder Zeit ein Abgleich und eventuelle Revisionen stattfinden konnten. Die Darstellung unten zeigt einen Gesamtüberblick der Designentwicklung (von links nach rechts in drei Blöcken):

  1. Grund-Layout, visuelles Konzept (Screendesign), Start- und Artikelseite
  2. Umsetzung von weiteren Schlüsselseiten des Portals analog zum visuellen Konzept
  3. Shop-Layout mit Schlüsselseiten analog zum visuellen Konzept und den Vorgaben durch das Shop-System
HCV Brauwelt Übersicht
Zum Vergrößern anklicken!

2. kaiser-lacke.de mit Anbindungen an die Unternehmens-Software

Aufgrund einer Empfehlung richtete Kaiser Lacke seine Anfrage an Wildner+Designer. Das geplante Projekt umfasste die Erstellung eines Gestaltungskonzepts auf Basis von Zielvorgaben in mehreren Schritten – von Wireframes bis zu Prototypen bzw. von Moodboards mit Gestaltungsideen bis zu klassischen, ausgearbeiteten Screendesigns.
Anhand der Wireframes wurden erste, grundsätzlich unterschiedliche Lösungsansätze abgestimmt und das Basis-Layout geschaffen. Anschließend arbeiteten wir Hand in Hand das visuelle Gestaltungskonzept und die Prototypen ausgesuchter Schlüsselseiten (Start, Produkt sowie Unternehmen) aus.

Erste Gestaltungsideen in Form von Moodboards

Noch unabhängig vom weiteren Verlauf in der Entwicklung des Layouts wurden parallel schon erste Ideen für ein visuelles Konzept erarbeitet. Wir präsentierten die Ergebnisse in Form von „Moodboards" – eine Zusammenstellung von grafischen Elementen und Ideen, die jeweils für sich eine mögliche Richtung repräsentieren.

Das ausgewählte Moodboard (links) und vier weitere Vorschläge
Das ausgewählte Moodboard (links) und weitere Vorschläge – zum Vergrößern anklicken!

Wireframes und Prototypen

Die Wireframes wurden gleich mit HTML, CSS und Bootstrap umgesetzt. Im Browser konnte so das responsive Verhalten des Layouts bereits für verschiedene Display-Größen getestet, beurteilt und schon frühzeitig mit den Programmierern abgestimmt werden.

Prototyp Wireframe für Kaiser Lacke– Version 1
1. Variante „offene Haupt-Navigation“ und komplette Layout-Breite für Produktinformationen (z. B. Fotos)
Prototyp Wireframe für Kaiser Lacke – Version 2
2. Variante Haupt-Navigation mit „Mega-Drop-Down“ und Seitenspalte für die Unter-Navigation
Prototyp Wireframe für Kaiser Lacke– Version 3
3. Aufgeklapptes „Mega-Drop-Down-Menü“
Prototyp Wireframe für Kaiser Lacke – Version 4
4. Variante für einen Produkt-Finder, bei dem die Suchergebnisse gleich und exklusiv im Finder angezeigt werden – eine Lösung, die mit Inhalten in kompletter Layout-Breite funktioniert.
Prototyp Wireframe für Kaiser Lacke – Version 5
5. Variante des Produkt-Finders, bei der die Suchergebnisse in einer Seitenspalte zu den Inhalten angezeigt werden, ähnlich einer Unter-Navigation.
Prototyp Wireframe für Kaiser Lacke – Version 6
6. Variante der Produktseite mit einem technisch weniger anspruchsvollen Layout – schnell implementierbar, jedoch mit schwächerer visueller Wirkung.
Prototyp Wireframe für Kaiser Lacke – Version 7
7. Variante der Produktseite, ausgelegt auf maximale Breite im Browser-Fenster und somit große Abbildungen – aufwendiger hinsichtlich des reponsiven Verhaltens, jedoch mit stärkerer visueller Wirkung.
Prototyp Wireframe für Kaiser Lacke – Version 8
8. Prototyp (Ausschnitt) der Startseite, noch mit Platzhaltern: Bei den großen Abbildungen handelt es sich um Bilder in zwei synchronisierten Slide-Shows. Am Prototypen erfolgte der Proof-of-Concept. Da es für die weitere Entwicklung keine unsichere Variable mehr gibt, ist die Vorgehensweise bewährt.
Prototyp Wireframe für Kaiser Lacke – Version 9
9. Prototyp (Ausschnitt) der Produktseite: Im Unterschied zum vorherigen Wireframe wurden die Abbildungen auf die absolut notwendige Anzahl reduziert. Die finale Ausarbeitung dann mittels Screendesigns, die in Grafikprogrammen gestaltet wurden.

UI bzw. Screendesign und visuelles Konzept

Zusammen mit den Ergebnissen aus der ersten Entwurfsphase mit Wireframes erarbeiteten wir das Screendesign. Parallel wurde dieses als Prototyp umgesetzt, sodass auch in dieser Projektphase alle Beteiligten über eine realistische Abstimmungsbasis verfügten. Weitere Schlüsselelemente wurden nur noch als Screendesign entwickelt, da für die Programmierung mit den beiden Prototypen schon die wichtigsten Grundlagen geschaffen wurden.

Kaiser Lacke Screendesigns
Zum Vergrößern anklicken!

Wildner+Designer als Projektpartner von Web-Entwicklern und IT-Dienstleistern

Unternehmen mit besonderen Ansprüchen an Web-Anwendungen setzen also nicht selten auf eine Kooperation von erfahrenen Dienstleistern – z. B. zur Umsetzung von Unternehmensportalen, Shop-Systemen oder Intranet-Plattformen. Denn neben den IT-Dienstleistungen sind meist auch fundierte Kenntnisse in den Bereichen Projektmanagement, Content-Gestaltung, SEO, Typografie und Webdesign gefragt. Dabei ist auf eine positive User Experience, geprägt durch Aspekte wie Usability, guten Content und modernes, responsives Webdesign, zu achten.
Wildner+Designer zeichnet sich dabei durch die ergänzenden Leistungsangebote in den Bereichen Text, Grafik-Design, Fotografie und Video aus.

Mehr Infos zu den o. g. Projekten im Bereich Referenzen:
Redesign der Internetplattform brauwelt.com
Neugestaltung der Website kaiser-lacke.de