Jedes unserer Projekte beginnt mit konkreten Fragestellungen, die wir gemeinsam mit dem Kunden beantworten: Was (erzählen wir), wie (machen wir es), warum und für wen? Nur wenn wir diese Kernaspekte klar vor Augen haben, können wir ein Konzept entwickeln. Mit diesem Kompass an der Hand können wir die Inhalte als auch den visuellen Auftritt an das gemeinsam definierte Ziel bringen.

Aber fangen wir von vorne an. Zuerst analysieren und konkretisieren wir das Briefing. Wir halten ein ausführliches Kick-Off Meeting mit allen Entscheider*innen eines Projekts, sammeln alle wesentlichen Informationen im Rahmen unserer Workshops-Formate und machen uns auf die Suche nach Referenzen, Mitbewerbern, Ideen. Wir gehen in uns und gleichzeitig gehen wir nach außen, um Inspiration zu holen – die Recherche ist extrem wichtig, dazu hat unser Motion Designer Leo auch einen Beitrag geschrieben. Zum Schluss präsentieren wir unsere Synthesis: das durch und durch schlüssige Konzept.

Wir lassen dich hinter die Kulissen blicken und zeigen einen Teil der Recherche-Arbeit für die Builtech-Website, sowie die drei Stilrichtungen, die wir dem Kunden vorgestellt haben.

Aka alle Überschriften, Texte, wörtliche Ausdrucksformen, Bilder, Videos, interaktive Elemente und so weiter und so fort. Das Was, das durch das Wie das Warum vermittelt und klarmacht. Stell dir eine Ausstellung vor, die sorgfältig kuratiert wird. Das Gleiche passiert hier: Wir überlegen genau, was wir zeigen möchten und treffen eine gezielte Auswahl – immer im Blick die Geschichte, die wir erzählen wollen und natürlich die Zielgruppen, bei denen sie Gehör findet. Die redaktionelle Arbeit findet in enger Zusammenarbeit mit dem Kunden statt. Die Tonalität spiegelt Haltung und Mood des Absenders bzw. der Website wider.
Copywriting meint alle Texte, die spezifisch für das Projekt verfasst werden und online gehen.

Besonders vorbildlich ist das Projekt Library of Lost Books, in dem das Copywriting zum tatsächlichen Erzähler wird – und darum auch von fantastischen Sprechern in vier Sprachen vorgelesen.

Mit User Experience (UX) ist die Art und Weise gemeint, wie die Benutzer*innen etwas verwenden. Nicht unbedingt ein digitales Produkt, das gilt auch in der analogen Welt, aber im Digitalen sprechen wir von Benutzeroberflächen. Anders gesagt, welche Erfahrung Nutzer*innen mit der Oberfläche haben. Diese muss so angelegt sein, dass Seitenbesucher*innen sich auf der Website gut zurechtfinden. Sie lädt ein zum langen Durchscrollen, zum Besuchen von Unterseiten. Sie lässt alles Wesentliche sofort erfassen und bringt Nutzer*innen idealerweise dazu, das zu tun, was sich der Kunde von ihnen wünscht. Ist das erfüllt? Hat es geklappt? Sehr schön, dann sprechen wir von einer hohen Benutzerfreundlichkeit oder einer guten Usability.

Unsere Website für Factory Berlin, oder besser gesagt das für den Start-Up-Hub maßgeschneiderte digitale Zuhause, ist ein gutes Beispiel von gelungenen UX. Ein paar Eindrücke findest du hier, schau gerne vorbei!

Hinter dem Namen User Interface (UI) steckt das Layout, also das visuelle Aussehen der Benutzeroberfläche, mit welcher die Benutzer*innen interagieren. Sie wird parallel zur UX entwickelt: Funktion und Look gehen Hand in Hand. Wir könnten auch sagen, dass es die Benutzerschnittstelle zwischen Mensch und Technik ist. Mit dem Claim, dass „Nichts Großartiges alleine gemacht (ausgedacht, designt, gebaut) wird”, ist Figma für uns die ideale kollaborative Software zum Erstellen von Prototypen im Bereich des UX bzw. UI Designs. Mit dem flexiblen Toolkit ist das ganze Team – der Kunde mit eingerechnet – am Designprozess beteiligt.

Am Beispiel unseres Kunden Beyonity zeigt sich, wie beispielsweise starke 3D-Animationen – hier von Núria Madrid – dazu beitragen, den Inhalt der Website nahezu greifbar zu machen. Fast schon als ließen sich die Objekte auf dem Screen berühren.

Das Grundgerüst –Skelett – einer Website bzw. der Benutzeroberfläche sind Wireframes. Sie sind der erste schematische Designentwurf auf dem Weg zum fertigen Interface. Es handelt sich um den zweiten Schritt nach einer Skizze und vor dem finalen UI am Prototypen. Sie machen die Architektur und die Dramaturgie sichtbar und greifbar, und somit auch das gesamte Interaktionskonzept: Alle grafischen und textlichen Elemente finden hier Platz – schematisch, aber in der richtigen Größe, Reihenfolge und in Relation zueinander.

Wie bei den Oscar-Nominierungen könnten wir das gleiche Projekt für mehrere Kategorien einreichen. Das wäre der Fall für Factory, bereits oben hinsichtlich der Usability gelobt.

In einem Wort könnten wir einfach Dialog sagen. Der Designer, Pädagoge und Autor Jon Kolko formulierte eine pragmatische und sehr poetische Definition dafür:

„Interaktionsdesign ist die Schaffung eines Dialogs zwischen einer Person und einem Produkt, System oder einer Dienstleistung. Dieser Dialog ist sowohl physischer als auch emotionaler Natur und manifestiert sich im Zusammenspiel von Form, Funktion und Technologie, wie es im Laufe der Zeit erlebt wird.“

Um präziser zu sein, haben wir bei der Interaction Design Foundation geschaut und die ausführliche Erklärung der fünf Dimensionen (D) des Interaktionsdesigns (IxD) gefunden. Diese umfasst:

• Worte (1D): Texte, die den Benutzer*innen ausreichende Informationen geben
• visuelle Darstellungen (2D): alle grafischen Elemente wie Bilder, Typografie und Icons, die als Unterstützung dienen
• physische Objekte/Raum (3D): Wie wird mit dem Produkt oder der Dienstleistung interagiert, z.B. Laptop/Maus oder Smartphone/Finger?
• Zeit (4D): alle Medien, die zeitbasiert sind, also Animationen, Videos und Sounds
• Verhalten (5D): bringt alle vorherigen Dimensionen zusammen. Das Verhalten bezieht sich auf die Art und Weise, wie Produkt oder Dienstleitung (in unserem Fall die Website) auf die Inputs von Benutzer*innen reagiert und Feedback gibt.

Alle diesen Dimensionen sind Teil der Gestaltung und Befüllung einer Website oder einer Landingpage. Micro-Animationen von Texten und grafischen Elementen, sowie Übergänge können wesentlich zur Dramaturgie einer Website beitragen – da wo es konzeptionell sinnvoll ist.

Zum Schluss noch eine wichtige Ergänzung: Interaktionsdesign ist nicht gleich UX-Design, obwohl die zwei Begriffe oft synonym verwendet werden. Interaktionsdesign ist ein wesentlicher Teil der User Experience, aber das UX-Design geht weit über die Gestaltung des Nutzungserlebnisses eines Produkts hinaus. UX-Designer*innen befassen sich mit der gesamten User Journey, einschließlich der Branding, Design, Usability und Funktion. Umgekehrt fokussiert sich das Interaktionsdesign auf den Moment der Nutzung und die Verbesserung des interaktiven Erlebnisses.

Mit diesem neuen Wissen zum Thema kannst du nun die Website von Factory mit anderen und Augen betrachten sowie noch ein bisschen aufmerksamer durch die virtuelle Ausstellung Library of Lost Books schlendern.

Illustrationen können – statisch oder animiert – eine Website, eine Landingpage oder eine Scrollytelling-Seite bereichern. Nicht als rein visuelle Schmuckstücke, sondern konzeptionell gedacht. Illustrationen prägen eine Website maßgeblich (wenn sie gut sind) und sorgen für eine einzigartige Differenzierung gegenüber den Mitbewerbern.

Unser KBV-Projekt mit seinem schlichten und frischen Stil, sowie die grandiosen und komplexen Collage-Illustrationen von Library of Lost Books nennen wir als gelungene Beispiele für unsere großartigen Illustrator*innen.

Wo findet der Webauftritt sein Zuhause? Wie funktioniert die Veröffentlichung? Wenn wir von Web-Hosting oder einfach von Hosting reden, meinen wir eine Dienstleistung, die die Website oder die Landingpage und deren Inhalte auf einem Server speichert, damit sie im Internet zugänglich wird. Nicht nur wird Speicherplatz oder Webspace geschaffen, sondern auch ein sicherer Zugang zu den Daten gewährleistet.

Obwohl der Name ähnlich klingt, ist das Web-Hosting nicht mit dem Domain-Hosting zu verwechseln: Im zweiten Fall wird ein Domain-Name bereitgestellt, also die URL unter der die Website abrufbar ist. 

Auch einfach Entwicklung oder Web-Programmierung genannt, meint dieser Begriff das Entwerfen und Implementieren von Webseiten, Landingpages und anderen online Anwendungen, z.B. Apps, Plattformen oder Services für das Internet. Diese Phase kommt ganz zum Schluss, wenn sowohl die Architektur des Webauftritts (UX) als auch das Design (UI) und die Inhalte final sind. Die Entwicklung befasst sich mit allem, was die Funktionalität ausmacht. Hier geht es also um Codes und Scriptsprache – vielleicht sagen dir die Namen Java, PHP oder Python etwas. In den letzten Jahren zeichnet sich der Trend zur Codeless Website (s. Grafik)  ab, d.h. es werden keine Entwickler mehr gebraucht – nur noch hervorragendes Design.

Ok, nun ist die Website online und unser Auftrag ist erledigt. Was passiert, wenn du etwas aktualisieren willst? Wer verwaltet weiterhin die ganzen Inhalte? Du! Ein Content-Management-System (CMS) ermöglicht es dir ganz ohne technische Kenntnisse. Stellt dir eine Art Redaktionssystem vor, in dem alles seinen richtigen Platz findet. In der Wahl eines guten Systems gibt es drei Eigenschaften zu berücksichtigen: intuitiv zu bedienen, anschlussfähig und intelligent. Aus diesen Gründen arbeiten wir gerne mit WordPress, weltweit das meistgenutzte Open-Source-CMS auf dem Markt. Aber es gibt auch andere, wie z.B. Drupal, Typo3 oder Joomla. 

Mit dem Prozess kennst du dich jetzt besser aus und hast gesehen, was wir für dich tun können. Darfs noch ein Erklärfilm dazu sein? Dann kannst du dich ja gleich mit unserem Motion-Glossar schlau machen. Vielleicht ist die Zeit reif, deiner Idee eine Form zu geben? Melde dich bei uns!