29. Januar 2021

THE GREAT COLLABORATION

How we came together to build a city with Figma

I teach online courses for UX and UI basics. The main tool in those courses was the Sketch app, but now the competition in the form of Figma and XD needs its own space. Figma is attracting more and more people, and for me it was clear that this is where the innovation is happening right now.

These programs are not that far apart. What are symbols here are called components there, and artboards are frames, but the general functionality is the same. The biggest and most striking feature that Figma has to offer is the possibility to work together in one document in real-time. The future of collaborative working is here.

One of the methods I used in this 2-week course really led to amazing results and a boost in motivation – let's just call it fun!

A collaborative city building project for UX/UI students. Cover.

A “LOW-THRESHOLD APPROACH” for real teamwork

The challenge was to bring together people with different levels of experience to engage with this new software and unfamiliar working environment. It had to be something simple, without the constraints of technical requirements or processes, something that could motivate people and didn’t require a great deal of qualification … like a game.

Playing a game with the freedom to explore and test, to communicate over something simple, a topic that is easy to understand, to combine different skill levels and aesthetic demands, having a common goal.

I stumbled over pictures of the game SimCity that I loved to play centuries ago, and I found many isometric illustrations. The use of an isometric grid makes it possible to establish a simple starting rule and then leave the rest to the students. No knowledge of perspective drawing is required for an isometric illustration, since everything takes place at a 30° angle.

A basic isometric-grid
A basic isometric-grid as a starting point

We opened a Figma Education Team and started a new project called “FigmaCity”. The starting point was a brainstorming session in which everyone participated. We collected and noted down possible themes and designed a city together. I created several pages in Figma and breakout session in Zoom, and my students spread out and got started right away.

From the road construction office to the land office, energy supply, housing or business, etc. Everyone chose a favorite and they started to organise themselves as a team. Like a team in a company that wants to develop a new product, they automatically had to think in an interdisciplinary way, identify their key competences, share, compromise, collaborate, set and achieve goals.

The result was a shared library with many creative items that could then be tested in the first attempt build  a small city.

Flow and motivation

We came back to this project again and again within 3 days. Some were stepping up their efforts to move this city forward and had their “flow moments”, others rather used the environment for discussion and exchange of opinions.

The test areal. Build by the class.
Courtesy of the students

Outcome

The outcome is a vibrant collage of different structures and ideas, sometimes chaotic sometimes very consistent. A picture of the different characters and experiences of the participants. Insights into the difficulties of coordinating optimally and in a short time. The fine line between the ability to understand and compromise on different opinions and the ability to defend and justify important ideas.

Notes on my inspiration

  • Studying media art and design
  • Being a lecturer on UX/UI
  • User-centred design and design thinking processes
  • Modular art and architecture projects I have seen or participated in
  • A deep conviction that work, learning and teaching should be fun!
  • Playing SimCity when I was a kid

About the author

Justus Wunschik is a freelance art director based in Berlin. He studied media art & design at the Bauhaus University, Weimar, lived in Moscow and worked in an international advertising agency, specialized in corporate communications online. He's a lecturer at the iu.de and cimdata.de

9. April 2020

VOM LEHREN UND LERNEN

Andere zu unterrichten führt letztlich immer dazu auch selber etwas zu lernen.

Read more

9. April 2020

Teaching and learning revisited

Teaching others will ultimately result in teaching yourself. Forcing yourself to learn something new may be exhausting, but it is also rewarding.

Read more

5. September 2018

Designsysteme mit Sketch

Die Software Sketch ist angesagt und es gibt nach wie vor keine Konkurrenzprodukte die ihr das Wasser reichen können. Zwei Designsysteme in Sketch haben mich und meine Kollegen beim Auftraggeber mit den Grenzen der Software bekannt gemacht.

Die sprichwörtlichen Altlasten im User Experience Design mit digitalen Mitteln sind Photoshopdateien. Für komplexe Anwendungen und Webseiten können Monsterdateien mit hunderten von Layern und mehreren Gigabyte (entkomprimierter Zustand) Umfang entstehen. Lüfter springen an, Bälle und Ladeanimationen rollen über Bildschirme ...

Zum Glück gibt es seit einigen Jahren Software die im Gegensatz zu Photoshop wirklich auf das Thema Interfacedesign spezialisiert ist: Sketch. Hier wird der modulare Aufbau von Webseiten und Apps und die Anwendung von projektübergreifenden Stilen endlich in der Software implementiert. Plan und Ziel werden am gleichen Ort verwirklicht.

Das Vorgehen und welche Vorteile es bringt:

Ein Designsystem für Applikationen und Websiten setzt sich aus  3 bis 4 wesentlichen Kategorien zusammen, deren Bezeichnung sich manchnal unterscheiden kann. Weiterhin sind eine Anleitung und Beispiele sinnvolle Ergänzungen.

Kernkategorien eines Designsystems:

  1.  „Atome“, die kleinsten Bestandteile wie Farben, Schriftformate und z.B. Icons
  2. „Elemente“ die Atome kombinieren wie z.B. Buttons, Listen, Links, Formularfelder
  3. „Module“ die alle vorherigen Kategorien in komplexeren Kombinationen einsetzten wie z.B. Bühnen, Teaser, Aufklappmodule, Text-, und Bildkombinationen
  4. Templates“ die schließlich Module und Elemente in ganzen Seiten exemplarisch verknüpfen

Sketch unterstützt dieses Vorgehen vom kleinsten zum größten Bestandteil optimal. Korrekt angelegt sind spätere Änderungen an den Basiselementen schnell im ganzen Designsystem durchgesetzt. Durch die Verwendung des Designsystems als Bibliothek für alle neuen Entwicklungen (Webseiten oder Apps), kann eine Änderung wie z.B. an Schriftformaten oder Farben sofort auf alle Seiten übertragen werden. Ändert sich z.B. der Schriftschnitt einer Überschrift in den Atomen, werden automatisch alle Elemente, Module und Templates die gleiche Formatierung verwenden.

Photoshop unterstützt im Vergleich dazu zwar auch Musterelemente in Bibliotheken, diese lassen sich aber viel schwerer Verwalten und in der Praxis setzten die meisten Designer stattdessen auf Smartobjects die dann in jeder Datei mitgeliefert werden.

Einer der größten Vorteile von Sketch in Bezug auf komplexe Designsysteme ist das durch ein kostenloses PlugIn alle Elemente organisiert werden können, und zu jedem Zeitpunkt umbenannt oder umsortiert werden können. Falls Bereiche in Formate wie PDF überführt werden sollen, lassen sich Abstände und Raster detailiert einstellen.

Weitere Vorteile im Überblick:

  • Vektorbasiert für Skalierbarkeit und Export von Assets in optimaler Qualität
  • Kleine Dateien
  • Unendlich viele Artboards in bliebiger Größe
  • Unterstützt die Logik von verschachtelten Symbolen und verknüpften Stilen
  • Durch eine vielzahl kostenloser PlugIns erweiterbar
  • Rapid-Prototyping mit Tools wie Invision schnell und kostengünstig umsetzbar

Ein Nachteil (Entwicklungspotential)

Größter Schwachpunkt sind aktuell die Absatzformate, denn diese existieren quasi nicht. Wer einmal Absatzformate mit InDesign erstellt hat wird in Sketch ernüchtert feststellen das fast nichts vorhanden ist. Feinheiten wie Einrückungen, Aufzählungslisten, Laufweite etc. sind der Software unbekannt, und lassen sich nur über Umwege oder eventuell vorhandene PlugIns umsetzten.

Schriftformate lassen sich zwar beim Export CSS-konform anzeigen, aber das Anlegen verschiedener Schriftformate ist wenig intuitiv und deren Organisation gelingt nur mit weitern PlugIns ohne größeren Zeitverlust.

Große Herausforderungen sind  der Umstieg auf Sketch in bereits vorhandenen Teamstrukturen, und die gemeinsame Weiterentwicklung einer Bibliothek. Es gibt bereits diverse Softwarelösungen die gemeinschaftliche Entscheidungen und transparente Arbeitsweisen ermöglichen sollen, aber die Umstellung bedarf einiger Übung und vieler Abstimmungsrunden.

Fazit

Wer vorher mit Photoshop oder InDesign Entwürfe visualiert hat, braucht einen gewissen Anlauf um die gleiche Aufgabe in derselben Zeit zu realisieren, wird dann aber durch exponentiellen Zeitgewinn in der Weiterentwicklung entlohnt.

Diese Software ist näher am Medium und dessen technischer Realität (HTML, CSS, Apps) als jemals eine andere Software zuvor. Für den Aufbau von Designsystemen wird man hier gezwungen sich im Rahmen der Logik und Vorgaben des Zielmediums zu bewegen. Der Aufwand diese Logik im Detail zu verstehen und anzuwenden wird mehr als wiedergutgemacht, wenn eine Änderung sich innerhalb kürzester Zeit umsetzten lässt, und Bestandteile in der richtigen Größe mit Optionen zur individuellen Anpassung sich aus einem Menü laden lassen.

Agilität und Rapid-Prototyping sind Teil der DNA von Sketch und so gilt immer „Work in progress …“

© 2022 Büro für Mediengestaltung Berlin – Impressum | Datenschutzerklärung

Consent Management Platform von Real Cookie Banner