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 …“

8. Dezember 2017

Back to the drawing board

Flexibel, schnell, agil und immer online.

Das alles sind Anforderungen mit denen sich die meisten von uns täglich konfrontiert sehen. Es ist keine neue Idee hier Gegenmaßnahmen oder sogar Abwehrmechanismen zu entwickeln. Besonders in der Vorweihnachtszeit gebe ich daher gerne folgenden Rat: „Take a book and draw a line“

Read more

19. Juli 2017

Review – Details in App Design

Ein kurzer Bericht über den Vortrag „Details in App Design“, den Frank Rausch im Rahmen der Tech Open Air 2017 in Berlin gehalten hat.

Read more

10. April 2017

Im Vollrausch der Superlative

Mit großem Interesse bin ich wieder Links zu den vermeidlichen „Design-Trends-2017“ gefolgt, und habe nicht schlecht gestaunt …

… über die unerhört innovativen Eingebungen die dort vermittelt wurden.

„Content is king“ also „Inhalte spielen die Hauptrolle“. Die Forderung nach sinnvollen Inhalten, und allgemein gehaltvoller oder sogar nützlicher Kost im Internet, wird seit Jahren wie ein Mantra wiederholt. Ein Resultat ist, dass neben einigen bereits vorhandenen positiven Ansätzen, offenbar eine Gegenbewegung entstanden ist. Wie ein Kind dem man sagt das Obst gesund ist, und das dann als Trotzreaktion nur noch Süßwaren will, hat sich der Superlativ zum ULTIMATIVEN Markenzeichen des vollkommen Sinnlosen erhoben.

„Clickbaiting“ erzwingt die Aufmerksamkeit um jeden Preis. Es spielt keine Rolle ob auch nur der Ansatz eines Inhaltes vorhanden ist, der Klick ist das Ziel, und der Weg, und die Erlösung.

„5 DINGE DIE SIE IN IHREM LEBEN UNBEDINGT GESEHEN HABEN MÜSSEN“ — „This must read guide will improve your life forever!“

Die Königsdisziplin der unmöglichen Überhöhung nicht vorhandener Inhalte ist das Flaggschiff der Superlativistenbewegung, und es gibt überall kleine Fundstücke und Erben dieses Stils.

Im deutschen fängt es bei den Artikeln an. „Die Sulzmaschine“ stellt die Behauptung auf das es keine andere Maschine zum „sulzen“ gibt, was selbst bei einem erfundenen Begriff ziemlich überheblich wirkt. „Eine Sulzmaschine“ ist dagegen ein Understatement über das viele Startups einmal nachdenken sollten.

War „Das Auto“ in der VW Werbung damals ein genialer Einfall, und eine bewusste Provokation, so ist man heute in einen Ozean der Superlative eingetaucht.

Wie können wir uns schützen?

Wem „das Beste”, „die innovativste Lösung“ oder gar etwas „einzigartiges“ unter den Fingern oder dem Schreibgerät brennt, der sollte sich an den Trend der letzten Jahrzehnte erinnern „Content is king“. Nicht der Superlativ, sondern die Inhalte sind der Königsweg.

Aber gegen die ultimativen, wichtigsten Inhalte die unser Leben für immer verändern, können wir uns nicht wehren. Sehen wir sie als Zeichen dafür das irgendwo Inhalte entstehen, und diesen Gegenpol bedingen.

Save

Save

Save

Save

Save

Save

29. September 2016

Von Richtlinien und Kochbüchern im Corporate Design

cookbook-vs-guidelines

In dunkler digitaler Vorzeit (also vor nicht mehr als 10 Jahren) nannte man Anweisungen und Empfehlungen zur Umsetzung eines Coporate Designs (CD) vorzugsweise Guidelines, also Richt-, oder Leitlinien. In letzter Zeit trifft man oft auf den Begriff "Cookbook" für diese Art von Publikation.

Was sagt das über die Entwicklung der Corporate Guideline aus, und wie viel Gramm Logo braucht man also für einen guten Firmenteig?

 

Ein Dialog zwischen Koch und Designer

Designer: Die Aufgabe von CD Guidelines ist generell jemandem der das jeweilige Design bisher nicht kannte die Arbeit mit diesem zu ermöglichen. Neben der allgemeinen Vorstellung einer Coporate Identity (CI) und eines dazugehörigen CDs, gibt es auch Guidelines die sich mit speziellen Themen befassen, z.B. Webdesign, Print-Kampagnen oder Außenwerbung.

Koch: Das könnte man so auch über Kochbücher sagen. Es gibt Lebensmittel, und es gibt Rezepte die dem Koch helfen sollen den besten Geschmack aus diesen herauszuholen. Neben Basiswissen gibt es natürlich Spezialgebiete wie Süßspeisen, Backen oder zum Beispiel den Grill.

D: Eine Guideline muss schnell Übersicht schaffen, und dem Nutzer die wichtigsten Eigenschaften und Merkmale einer gestalteten Identität vermitteln. Hierzu gehören neben den visuellen Eigenschaften auch die Informationen die den Charakter eines Designs betreffen, die Tonalität der Ansprache, oder gegebenenfalls auch die tatsächlichen Töne die zu einem akustischen CD gehören. Guidelines zu speziellen Themen müssen die Vorstellung des Markenkerns und seiner Werte nicht wiederholen, sondern verweisen auf die Basis Guidelines.

K: Schon klar, das Auge isst eben mit, und selbst das beste Essen würde verpfuscht wenn man nur auf Plastiktellern servieren kann. Hier unser 1978er Grand Cru, leider haben wir nur Plastikbecher dazu.

D: Igitt! Der Bereich der digitalen Medien ist am stärksten von ständiger Veränderung geprägt. Bildschirmauflösungen, Nutzungsszenarien und technische Anforderungen werden in einem sehr schnellen Takt erweitert. Um bei dieser Entwicklung Schritt halten zu können, müssen CD Guidelines hier besonders flexibel und Anpassungsfähig sein, und die Anforderungen müssen entsprechende Spielräume lassen, um nicht vorhersehbare Entwicklungen abfangen zu können.

K: Wie neulich, als ich diesen Knoblauch geliefert bekam und jede Zehe war so groß wie drei herkömmliche Knoblauchzehen. Ich habe da meine Erfahrungswerte wie viel es maximal werden darf, aber unser Lehrling hat sich ans Rezept gehalten ...

D: Ich will mal folgenden Vergleich wagen: Bei uns sollen die Kuchen mal breit und flach sein, dann wieder ganz schmal und hochgestapelt, die Menge der Zutaten soll gleich bleiben, aber das Dekor darf nicht überladen wirken wenn die Fläche kleiner wird.

K: Also soviel Glasur und Zuckerperlen weglassen bis es richtig aussieht.

D: Genau, und die Backformen sind frei beweglich und haben immer eine andere Größe.

K: Wie bitte?

D: Schon mal eine Pizza gebacken die "responsive" ist, und sich dem Teller anpasst auf dem sie gegessen wird?

K: Dann backt man doch einfach eine kleinere Pizza!

D: Bei mir müssen aber die gleichen Zutaten auf jeden Teller, egal wie klein, also werden sie gestapelt und nur die wichtigsten sind oben sichtbar.

K: Eine Calzone die oben drauf schon mal auf ihren Inhalt verweist.

D: Genau.

 

Die beiden haben sich noch eine Weile unterhalten und dabei die Qualitäten unterschiedlicher Weine erörtert.

 

Fazit
Der Begriff Cookbook wird wohl nie ins deutsche übersetzt werden wenn es dabei um Corporate Guidelines geht, aber der englische Begriff ist doch passend gewählt. Interessant wird die Metapher wenn wir nicht an klassische Rezeptbücher denken, sondern an Kochbücher die der Inspiration dienen, Werke die man durchblättert um Kombinationsmöglichkeiten für die Zubereitung der vorhandenen Lebensmittel zu finden.

Mag sein das der Begriff einem Trend zur bewussten Ernährung geschuldet ist, oder man verstärkt auf guten Geschmack im Design hofft, tatsächlich muss ein Cookbook doch das Gleiche leisten wie die Guidelines. Sind die Rezepte zu ungenau, oder die Beispiele schlecht illustriert, wird das Essen möglicherweise optisch oder geschmacklich enttäuschen.

 

Was wir nicht vergessen sollten
Beide Begriffe stehen für ein Werk das keine Spezifikation darstellt, keine Bauanleitung die alle möglichen Szenarien abdeckt. Die richtige Menge Salz (meist wird nur eine Prise angegeben) oder das Kerning der Buchstaben, beides wird von Fachleuten ausgewählt, dem Koch oder dem Designer.

 

--

Über den Autor

Justus Wunschik
Freier Art Director / Designer – Schwerpunkt digitale Medien

bfmg.de | typeandsound.com

14. Juli 2016

Pokémon GO – erweiterte Wirklichkeiten

Der Weg zur menschlichen Erkenntnis ist von spielerischer Natur. Der Forscher experimentiert und entdeckt neue Wege oder Phänomene oft durch Zufall, durch das Zulassen einer unkontrollierbaren Komponente, wie der Koch durch eine vorher unbekannte Kombination von Zutaten ein neues Aroma entdeckt, beides ist der Mut sich einem geplanten Kontrollverlust auszusetzen. Ein gutes Spiel beinhaltet immer diese Komponente des Unbekannten und Ungewissen, ob in Form des Würfels oder eines Labyrinths dessen Ausgang man nicht sieht.

Auf Pokémon GO wurde ich aufmerksam als ich im Internet einen Artikel über eine Applikation für Smartphones lass, die angeblich eine wahre Explosion der Nutzerzahlen erlebt, und in ihrem augenblicklichen Einfluss wohl mehr als nur einen modischen Trend darstellt, weil sie das Verhalten der Menschen auf ungeahnte Weise beeinflusse.

 

Was passiert in diesem Spiel?
Pokémon

Pokémon im Berliner Stadtraum

In Pokémon GO wird man zunächst aufgefordert ein Profil anzulegen und einen Avatar auszuwählen. Man findet sich im Anschluss als menschliche Figur auf einer Landkarte, die offenbar den realen Ort an dem man sich befindet widerspiegelt. Die App benutzt GPS Daten und die Kamera des Smartphones. Auf der Karte nimmt man andere Objekte wahr, und plötzlich auch eine Art Lebewesen, eines dieser Pokémons. Diese im Manga-Stil gestalteten Tierchen sind süß und bunt und mit dem ganzen Glitzer der sie umgibt ein Klischee des asiatischen digitalen Pop.

Nähert man sich (mit den eigenen Füßen) dem Tierchen, wechselt das Spiel in eine Augmented-Reality-Perspektive, das heißt das Bild das die Kamera von der Umgebung macht wird in Echtzeit durch Animationen und Bedienelemente des Spiels überlagert. Auf dem Bildschirm des Smartphones sitzt also plötzlich das Pokémon in der eigenen Küche, oder wo auch immer man sich gerade befindet. Mit einem virtuellen Ball kann man nun das Pokémon bewerfen und einfangen. Es kommt in eine offenbar sehr umfangreich erweiterbare Sammlung. Auf der Karte gibt es außerdem Orte die man ansteuern kann. In meiner Nachbarschaft wird auf eine ›hässliche Brandwand‹ hingewiesen. In der Innenstadt sah ich eine Markierung zum Georg Elser Denkmal (Berlin), und es scheint sehr viele Orte auf der Karte zu geben.

 

Eine Priese Zukunft und Avantgarde

›Interessanter als das grafisch eher bescheidene Spiel sind die Kommentare zu kulturellen-, und gesellschaftlichen Auswirkungen.‹

In den Vereinigten Staaten wird das Geschehen gar als disruptiv bezeichnet, entstehen doch durch das Medium neue Themen jenseits von sozialen und ethnischen Problemen.
In Russland hingegen werden traditionell mystische und esoterische Dimensionen diskutiert. Ein Vertreter der orthodoxen Kirche soll öffentlich ein Verbot der ›kleinen Teufel‹ auf Friedhöfen und in Kirchen gefordert haben. Sicherlich möchte niemand das eine Gedenkstätte zum sogenannten ›PokéStop‹ wird, zu einer Pilgerstätte für Spieler, doch hier schwingt die selbstverständliche Akzeptanz von  virtuellen, für nicht Eingeweihte unsichtbaren Wesen mit.

Es ist dieser Moment, in dem sich die mit diesem Trend verbundenen Pfade in die Zukunft zu erkennen geben. Die Erweiterung der Realität durch eine virtuelle Ebene wird zur Causa, eine Metaebene wird zum Impulsgeber der Kommunikation. Die Pokémons werden zu transzendenten Wesen, sie überschreiten also die Grenzen zwischen den Welten.

 

Body as Interface
PokéStop

PokéStop in Berlin

Dringend muss der physische Aspekt dieses interaktiven Spiels erwähnt werden. Der Spieler ist schließlich gezwungen sich selbst zu bewegen und die Umgebung zu erforschen um Tiere und Objekte zu entdecken. Der einst an eine Rechenmaschine gebundene Nutzer digitaler Spiele ist mobil und steuert das Geschehen teilweise durch Einsatz seines ganzen Körpers. Die materielle Gestalt eines Spielers wird durch die Interaktion nicht nur bewegt, sondern mitunter auch in erhebliche Gefahr gebracht. Schon wird von Unfällen unachtsamer Pokémonjäger berichtet. Zweifelsohne wird die Fähigkeit zwischen virtueller und realer Bedrohung zu unterscheiden im Kontext der Augmented-Reality noch in neuem Licht zu diskutieren sein.

 

 

 

 

 

 

--

Über den Autor

Justus Wunschik
Freier Art Director / Designer – Schwerpunkt digitale Medien
Diplom in Media Art & Design – Bauhaus-Universität Weimar

bfmg.de | typeandsound.com

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

Consent Management Platform von Real Cookie Banner