Designentwicklung im Web

Das eigentliche Design der Seite ist, trotz der in den vorherigen Abschnitten beschriebenen Vorbereitungen immer noch ein schwieriger Schritt – zugleich auch einer der wichtigsten.

Denn eine noch so gut strukturierte, perfekt programmierte und unglaublich schnelle Seite wird kaum ihren möglichen Erfolg erzielen, wenn das Layout den Kunden nicht anspricht – oder die Benutzung schwer fällt.

Aus dem letzten Grund wird auch klar, weshalb der Designprozess mehr ist, als die Seite gut aussehen zu lassen.

Eine hohe Aufmerksamkeit sollten Sie auf das “UX-Design”: Die User Experience, kurz UX lässt sich als “Nutzungserlebnis” übersetzen und meint die gesamte Benutzung der Website. Dies lässt sich mit aufwendigen Messmethoden ermitteln (Blickverfolgung bei Probanden, Klickanalyse – also wie viele User klickten wo, Ablaufanalyse).

Webdesign testen

Während die technisch aufwändige Messung der Augenbewegungen eher etwas für große Medienportale und die Forschung sind, können Sie aber Ihre Testuser (also Menschen, die Ihre Zielgruppe bzw. ihre Personas vertreten) bei der Benutzung Ihrer Entwürfe beobachten.

Die Messung der Klicks (wird ein Menü überhaupt wahrgenommen und genutzt) und der Abläufe (steigen die User häufig an einer bestimmten Seite aus, weil sie hier nicht weiter finden?) sind auch mit Google Analytics, Matomo und speziellen Messtools möglich. Allerdings müssen Sie dazu natürlich schon eine Seite ins Netz gestellt haben.

In der Regel hilft das also nur beim Nachjustieren, bei der Entwicklung selbst müssen Sie sich auf die Erfahrung der Ausführenden verlassen können.

Egal, ob Sie Design- und Programmierung trennen – wenn Sie die Gestaltung nicht im Haus umsetzen lassen, benötigen Sie jetzt ein erstes Angebot. Wie schon beschrieben sollten Sie jetzt auch Alternativen berücksichtigen, auch wenn Sie mit Ihren Grafikern eng verbandelt sind.

Gestaltung und Umsetzung sind nur in einer funktionierenden Zusammenarbeit möglich, deshalb befinden wir uns nun an einem der entscheidendsten Punkte im Relaunchprozess.

Aus meiner Praxiserfahrung kenne ich verschiedene Szenarien, die immer wieder zu schlechten Ergebnissen, Ärger und unnötigen Kosten geführt haben.

Das Design wird entwickelt, erst nach Abschluss werden Programmierer bzw. Entwicklungsdienstleister angefragt. Unklare oder auch unsinnige Vorstellungen der Gestalter werden schlecht umgesetzt oder führen zu unnötigen Peaks im Angebot. Für grafische Effekte oder Gestaltungsumsetzungen, die keinen großen Effekt für die User-Experience haben, aber enorm schwierig umzusetzen sind, wird viel Entwicklungszeit einkalkuliert – nur damit diese Elemente dann bei schlechten Verbindungen oder bestimmten Endgerätekonfigurationen doch nicht richtig funktionieren.

Die Entwickler verstehen sich als Gestalter und wollen unbedingt ihren eigenen Entwurf anbieten. Zum einen lassen sich bestimmte Designs wiederverwenden, es vermindert in jedem Fall die hier beschriebenen Komplikationen. Wenn das Layout gelungen ist kann das eine Alternative sein (vorausgesetzt, die effektivere Entwicklung wirkt sich auf den Preis aus). Wird dagegen ein brauchbares Layout von Ihnen vorgegeben sind die Kosten für die bloße Umsetzung oft so hoch wie die Gesamtentwicklung durch den Programmierer.

Durch ein zu spätes zusammenbringen der “Parteien” entstehen schädliche Abwehrprozesse, die sich durch den gesamten Relaunch ziehen und sogar darüber hinaus wirken können. Beginnen Designer und Entwickler gegeneinander zu arbeiten (weil die jeweils andere Seite als inkompetent angesehen wird) ist es eigentlich schon zu spät. Umso wichtiger ist es, dass die Grafiker Webverständnis haben und die Entwickler Sinn für Gestaltung.

Gerne werden typische Webelemente (Schalter, Klickfelder, aber auch Text- und Bildelemente “verschönert”. Zwar kommen die Grundtechnologien HTML und CSS, die das Aussehen jeder Seite letztendlich definieren, mit jeder neuen Version den Wünschen der Gestalter näher. Dennoch wäre es wünschenswert, dass sich die Designer mehr mit den bestehenden Möglichkeiten befassen und diese intelligent nutzen.

Eine kurze Geschichte des Internets

Da Sie sich womöglich fragen, warum das alles so kompliziert ist und woher diese von mir bereits mehrfach erwähnten Widrigkeiten zwischen Grafikdesignern und Webentwicklern stammen, hier ein kurzer Ausflug in die Geschichte:

Als Tim Berners-Lee das WWW als, heute bekanntesten, Teil des Internets entwickelte, dachte er an ein System zum Austausch von wissenschaftlichen Arbeiten. Deshalb waren Strukturelemente im Code zur Seitenerstellung, der Hypertext Markup Language (HTML) mit Listen, verschiedene Überschriften, Zitate und Bildeinbindungen immer schon üppig vorhanden. Zur Gestaltung reichten Farben und die verschiedenen Schriften auf dem Empfangsgerät (Hauptsache mit oder ohne Serifen, egal welche Schrift das dann genau war).

Die wachsende Beliebtheit des WWW außerhalb der akademischen Welt führte dazu, dass sich auch Werbetreibende und damit die Gestalter mit dem Web beschäftigten. Mit dem “Gestaltungscode” CSS wuchsen die Möglichkeiten, dem HTML deutlich mehr Gestalt zu geben, wobei das Rangeln der Browserhersteller dies unnötig erschwerte, in dem dann nur bestimmte Teile des HTML-Standards und dann auch unterschiedlich interpretiert wurden.

Es mag Ihnen jetzt zu technisch werden. Aber wenn Sie verstanden haben, dass eine Website nicht wie ein Fernsehbild als Ganzes in Ihren Computer geschickt wird, werden Sie das Grundproblem, dass bis heute in die Umsetzung erschwert, nachvollziehen können.

So wird lediglich ein Code aus Anweisungen über die Leitung geschickt, der dann von Ihrem Browser (Internetexplorer, Edge, Chrome, Safari oder Firefox) verarbeitet und in die sichtbare Seite verwandelt wird.

Mehr brauchen Sie dazu auch nicht zu wissen, aber das ist der Grund weshalb es manchmal leichter ist, eine aufwändige Berechnung von Formularinhalten umzusetzen, während die schicke Animation des erklärenden Popuptextes so schlecht läuft.

Fertiglayouts und Templates im Webdesign

Eine preiswerte Alternative für kleinere Unternehmen sind die zahlreichen Fertiglayouts, die es vor allem für die gängigsten CMS-Lösungen gibt. Grundsätzlich kann natürlich fast jede Seite mit jedem System umgesetzt werden, so dass Sie durch diese Vorlagen die Kosten der Designentwicklung in jedem Fall senken können. Allerdings werden dann häufig spezielle, für ein System optimierte Effektumsetzungen in der Programmierung wieder aufwändiger. “Das geht da doch auch ganz einfach?” ist dann ein ganz falscher Ansatz.

Die vor allem bei WordPress gerne genutzten Themes ähneln sich jedoch oft sehr stark, da für die aktuellen Designtrends viele Umsetzungen entwickelt werden. Genau das führt aber dazu, dass in spätestens zwei Jahren nahezu alle Seiten im Netz so aussehen und es einen drastischen Stilwechsel gibt. Ihr Auftritt wirkt dann wieder sehr altbacken – und die Unverwechselbarkeit wird er so nie gewinnen.

Egal, ob Sie das Design aufwändig von einem Grafikdesigner, einer kompetenten Agentur oder der Webentwicklungsfirma erstellen lassen: Vorgabe bleibt Ihr Anforderungsprofil mit Struktur und Verlaufsplanung.

Relaunch! Buch mit Astronaut Cartoon

Leseprobe aus meinem im September 2020 erschienen Buch

Relaunch!

Mit neuen Webseiten in die Zukunft

Stefan Schmidt, Simone Sarodnick, Christian Behrends

Das Handbuch, ca. 192 Seiten
September 2020

ISBN 9783751954310