Webseiten zu erstellen war früher ein einfacher Prozess: DesignerInnen geben das Aussehen vor, EntwicklerInnen erstellen die Webseite. Heute machen Smartphones, fancy Animationen und die Anpassung der Webseite an den Content alles komplizierter. Was bedeutet das für den Erstellungsprozess?

Crealopment ist eine Wortkreation, die sich aus den Begriffen „Creative“ und „Development“ entwickelt hat. Gemeint ist die Position zwischen kreativen DesignerInnen und code-lastigen DeveloperInnen.1 Das sind die beiden wichtigsten Rollen, wenn eine Webseite erstellt wird.
Vor etwas mehr als zehn Jahren waren diese absolut ausreichend. Wenn eine professionelle Webseite erstellt werden sollte, setzten sich die DesignerInnen mit Kunden an einen Tisch und besprach die Anforderungen. Somit wussten alle über Ziele und Vorstellungen Bescheid. DesignerInnen kombinierten diese Vorstellungen mit kreativen Ideen und packten sie in ein Webseiten-Design. Bildschirmbreite 1024 Pixel, Smartphones & Tablets gab es nicht. Schließlich übersetzten EntwicklerInnen die Designs in einen HTML-Code. Im Browser aufgerufen sah der Code genauso aus wie das Design. Gute Sache, Webseite fertig! Über diese Standardvorgehensweise sprach DI Takashi Linzbichler in der Lehrveranstaltung „Grundlagen der Webtechnik“.

HTML5, CSS3 und andere Browser-Innovationen

Mit HTML5 und CSS3 haben sich aber viele neue Möglichkeiten ergeben, wie uns im Unterricht klar geworden ist. Browser wurden endlich cool. HTML als Sprache, in der Techniker Webseiten schreiben, führte zum Beispiel semantische Tags ein. Das ist wichtig für Suchmaschinen, damit sie wissen, welche Elemente es auf einer Seite gibt. Eine Seiten-Navigation kann seither als solche gekennzeichnet werden.

Zeitgleich wurden Animationen möglich: Parallax Scrolling, bei dem Elemente verschieden schnell nach oben scrollen, oder Elemente, die Farben und Formen ändern, erlebten ihre Geburtsstunde. Diese Dinge können einerseits im Design nicht abgebildet werden, andererseits ist im Prozess nicht klar geregelt, ob DesignerInnen oder EntwicklerInnen für deren Konzeption zuständig sind.

Damit kommt eine zusätzliche Disziplin ins Spiel: Usability. Wer kümmert sich darum? DesignerIn oder DeveloperIn? Genau hier sprechen wir über Crealopment.

Crealopment – die neue Schnittstelle

CrealoperInnen können DesignerInnen oder DeveloperInnen sein, auf jeden Fall verstehen sie beide Rollen. Eine Designerin oder ein Designer denkt also schon beim Designprozess an ihre Entwickler-Kolleginnen und -Kollegen. Zum Beispiel sind schräge Linien schwieriger zu programmieren als gerade Linien, und Parallax Scrolling ist aufwendiger, als es aussieht. Das erlebten wir auch am eigenen Leib in den Übungseinheiten.

Andersherum verhält es sich genauso: Falls eine DesignerIn oder ein Designer die Usability nicht vorgibt, ist heutzutage die Entwicklerin oder der Entwickler gefragt, sich Gedanken über das Verhalten der Webseite zu machen. Dazu braucht er Wissen über Farbkombinationen und vor allem ein Gespür für Animationen.

Beide Rollen sollen außerdem bedenken, was für die Kundschaft sinnvoll ist. Dabei können auch Content Strategen und Content Strateginnen einen wichtigen Beitrag leisten. Denn sie verfügen über das Wissen, welche Arten von Content für die zukünftige Webseite essentiell sind. In der Praxis werden sie allerdings meist außen vor gelassen.

Crealopment in action – Beispiele aus der Praxis

Spielen wir Crealopment in der Praxis durch. In meiner Agentur W4 Premium Web sind wir bereits ein eingespieltes Team an Designern und Entwicklern. Wir kennen die Kompetenzen der anderen und können so optimal zusammenarbeiten. Das ist wichtig für den Crealopment-Prozess: Wir besprechen nicht mehr jeden Effekt einzeln, sondern verstehen uns quasi „blind“.

Zum besseren Verständnis möchte ich euch sowohl ein negatives als auch ein positives Beispiel von der Schnittstelle zwischen Designer und Entwickler geben. Das Beste kommt ja bekanntlich erst zum Schluss, deshalb fangen wir mit dem schlechten Beispiel an.

Fehlende Absprache führt zu schlechter Performance

Mit dem Relaunch einer Hotelwebseite wollte meine Agentur die Buchungen vorantreiben. Und wie es sich für ein anständiges Hotel gehört, enthält besagtes Projekt viele Fotos. Um die Startseite minimalistisch zu halten, hat die Designerin die Übersichtsseite der Fotos als Overlay konzipiert. Die Benutzerin oder der Benutzer klickt auf einen Link, woraufhin sich das Overlay öffnet. Dort erscheint eine Übersicht über die verfügbaren Galerien („Zimmer“, „Restaurant“, „Lobby“ usw.). Hinter jedem weiteren Klick verbergen sich wieder mehrere Fotos (Abb.: 1).

Wireframe Bildergalerie - 2 PopUps

Abb. 1: Wireframe Bildergalerie – 2 PopUps

Daraus ergaben sich zwei Probleme. Einerseits warnte der Entwickler vor Problemen bei der Performance, da mehrere Overlays mit hochauflösenden Bildern geöffnet und geladen werden müssen. Andererseits könnte das Design des ersten Overlays den Eindruck erwecken, als ob eine neue Seite geöffnet werden solle. Beide Probleme stellten sich natürlich erst im Laufe der Programmierung heraus. In beiden Fällen kann man weder Designerin noch Entwickler die Schuld geben – beide haben in ihrer Disziplin bestmöglich gearbeitet. Leider führte diese Vorgehensweise und die fehlende Absprache untereinander dennoch zu größeren Schwierigkeiten in diesem Projekt.

Crealopment richtig durchgeführt

Nur wenig später lieferte eine andere Designerin ein wesentlich positiveres Beispiel ab. In einem ersten Webseitenentwurf waren „Aktionsboxen“ vorgesehen. Das sind in der Größe variable Container – davon kann es unterschiedlich viele geben und sie alle sollten einen Text umfließen. Für EntwicklerInnen eine sehr, sehr leidvolle Aufgabe.

Wireframe Aktionsboxen Negativbeispiel

Abb. 2: Wireframe Aktionsboxen Negativbeispiel

Noch bevor das Design erstellt wurde, erkannte die Designerin den hohen Arbeitsaufwand für den Entwickler und wies darauf hin. Das konnte sie nur, weil sie selbst für kurze Zeit als Entwicklerin tätig war. Somit wurde eine einfachere Lösung (Abb.: 3) sowohl für den Kunden als auch für die Programmierer gefunden und erfolgreich umgesetzt.

Wireframe Contentboxen Positivbeispiel

Abb. 3: Wireframe Contentboxen Positivbeispiel

Fazit: Redet miteinander!

Hintergrundwissen über die jeweils andere Disziplin ist für erfolgreiches Crealopment also sehr förderlich, wenn nicht sogar absolut notwendig.1 Damit zukünftige Crealopment-Prozesse funktionieren, sollte jede Designerin und jeder Designer Grundkenntnisse in HTML, CSS und sogar grob in JavaScript besitzen, meint auch unser Vortragender DI Takashi Linzbichler. Auch Gespräche mit EntwicklerInnen helfen bereits. Durch aktives Mitdenken können so schon viele Stolpersteine im Voraus aus dem Weg geräumt werden. Wie überall noch die letzte – wahrscheinlich aber wichtigste – Zutat für eine gute Zusammenarbeit: Kommunikation. Also redet miteinander! Das ist wichtiger als jedes Fachwissen.

Referenzen

1Fuhr, Julia & Lang, Wiebke (2010). Crealopment. Page 9/2010, S. 20-31.

Related Posts