Kollaborative Engineering- und Designtools

In jedem großen Unternehmen ist die größte Hürde immer das Problem der Skalierung. Ob im Ingenieurwesen, Design oder in der Zusammenarbeit, Kommunikation ist der Schlüssel zum Erfolg eines Unternehmens. Hier sind einige der Tools, die mir bei der Zusammenarbeit in einem großen Team sehr geholfen haben. Mit einer Reihe von Ingenieuren und Designern – ganz zu schweigen von Hybriden wie mir – kann die nahtlose Zusammenarbeit und die Konzentration auf ein gemeinsames Ziel über einen langen Zeitraum hinweg eine Herausforderung sein. Hier sind eine Reihe von Tools, die ich aus erster Hand kennengelernt habe, um eine enge und nahtlose Zusammenarbeit und Kommunikation zu gewährleisten.

Zeplin

Eine der zeitaufwändigsten Aufgaben für einen Designer in einem großen Unternehmen ist nicht die Ideenfindung oder das Design selbst, sondern die Erstellung der Spezifikationen. Egal, ob Sie für Web, Android oder iOS designen, Zeplin war ein enormer Produktivitätsgewinn. Sie können Ihre Sketch-Dokumente importieren, und Zeplin exportiert sogar Code-Snippets. Sie können Assets direkt vom Bildschirm exportieren, und bei Bedarf in mehreren Pixel-Dichten. Es gibt sogar eine Slack-Integration, wenn Sie möchten.

Ich habe gehört, dass Designer sagen, dass sie gezwungen sind, bei ihren Farbwahlen und der Komponentenbibliothek auf Kurs zu bleiben, da dieses Tool mit einer Leitseite und einem Styleguide mit einer Farbpalette exportiert – es wird sehr offensichtlich, wenn sie auch nur ein wenig davon abweichen. In einer Welt, in der Konsistenz herrscht, ist das ein Segen für die abteilungsübergreifende Zusammenarbeit. Es spart Stunden bei jedem Projekt, da Designer nicht mehr jedes einzelne Design mit allen Abständen, Schriftstärken und Abständen spezifizieren müssen.

CodePen

Im Hinblick auf schnelle Inspiration sind Websites wie CodePen und Dribbble bekannt für ihre Fähigkeit, kreative Funken zu entfachen. Designer und Entwickler verbringen viel Zeit damit, sich auf diesen Seiten durch Code und Pixel auszudrücken. Aber ich finde CodePen zu einem wunderbaren Ort, um in einem professionellen Umfeld kollaborativ zu arbeiten. Hier ist eine Aufschlüsselung, wie und warum ich das mit großen Teams gemacht habe.

1) Es ist nützlich zum Debuggen. Die Arbeit an einer großen Codebasis mit einigen hundert anderen Entwicklern kann eine erstaunliche Lernerfahrung sein, teils wegen der erhöhten Codequalität durch Code-Reviews, aber auch wegen der Herausforderungen, denen Sie sich stellen. Sie schreiben nicht einfach Code, sondern auch Code, den andere lesen können.

Es ist aufregend, ein Entwickler zu sein, der an einer großen Codebasis arbeitet, die Millionen von Menschen sehen werden. Die Kehrseite ist, dass Sie in diesen großen Teams oft schnell arbeiten müssen und es viele bewegliche Teile gibt. Aus diesem Grund wird die Möglichkeit, einen Front-End-Code-Teil isoliert zu betrachten, zu einem leistungsstarken Debugging-Tool.

Eine Animation ist tausend Meetings wert.
– Rachel Nabors

2) Prototyping ist ein weiterer Grund, warum CodePen sich als unverzichtbar erweist. Ich habe in Teams gearbeitet, die oft Interaktionsideen zeigen, und wir müssen sehr schnell potenziell wegwerfbaren Code produzieren. CodePen hat uns geholfen, schnell Arbeit für Kommunikationszwecke zu erstellen, mit ihren privaten Pens und privaten Sammlungen. Ich mache oft Screenshots der Seite, an der ich arbeite, um nicht die gesamte Sache zu erstellen, und positioniere nur die Interaktionsteile, die ich für eine Demo benötige, darüber. Unweigerlich habe ich nach einigen Iterationen ein paar verschiedene Versionen für meine Produktmanager, die sie durchgehen können, also erstelle ich eine private Sammlung.

Private Sammlungen ermöglichen es mir, viele Versionen neuer Arbeiten zu gruppieren, die meine Kollegen auf einen Blick durchsuchen und damit arbeiten können. Es wird auch zu einer Ressource für andere Designer/Entwickler, die meine Pens forken möchten, um sie als Vorlage zu verwenden, damit sie das kompilierte website-weite Stylesheet und die JS-Datei haben.

3) CodePen hat eine aktive Gemeinschaft von Menschen, die an der Lösung gemeinsamer Probleme arbeiten. Viele von uns nutzen CodePen aus demselben Grund, warum wir Stack Overflow nutzen: Wenn ein Problem bei uns auftritt, ist es wahrscheinlich schon bei anderen aufgetreten. Es gibt eine Menge von Pens, die man umkehren kann, um eine Technik besser zu verstehen, und sogar gut organisierte Design Patterns, die einige gängige Anwendungsfälle abdecken. Heutzutage, wenn Sie sich nicht auf die Community verlassen, um sich weiterzubilden, leisten Sie unnötige Vorarbeit.

Quip

Quip ist ein Tool, auf das mich ein ehemaliger Kollege und Engineering Lead, Joe Tuson, aufmerksam gemacht hat. Ich benutze Quip für gemeinsame, kollaborative Dokumente und sogar zur Organisation großer Projekte wie dem Entwurf von Systemen auf hoher Ebene. Es ist etwas unkomplizierter als ein Wiki, das formeller wirkt und dazu neigt, einmal geschrieben, kommuniziert und dann liegen gelassen zu werden. Quip fördert die Zusammenarbeit durch seine einfach zu bedienende GUI und die Möglichkeit, Benachrichtigungen über Änderungen und deren Zeitpunkt zu sehen. Die meisten Dinge, an denen ich arbeite, sind proprietär, daher habe ich unten ein kleines gefälschtes Beispiel-Dokument erstellt, damit Sie sehen können, wie es funktioniert.

Besonders gefällt mir, dass man selbst in den Benachrichtigungen in der Seitenleiste sehen kann, wer die Änderung angesehen hat, was einem ein Gefühl dafür gibt, wie viele Leute auf dem neuesten Stand des Dokuments sind.

Wir alle würden uns eine Welt wünschen, in der ein Wasserfall-Workflow von Produkt → Design → Engineering → QA in einer schönen linearen Abfolge abläuft. Leider (oder vielleicht glücklicherweise) erlaubt dieser Workflow keine schnelle Iteration. Der Fluss von Tickets und Mockups in einem sich bewegenden Projekt in Jira oder Github kann etwas verwirrend werden. Quip hat sich bei schnellen Design- und Produktänderungen als sehr hilfreich erwiesen, indem es die Mockups am selben Ort wie unsere To-Do-Listen ermöglicht. Es ist leicht zu pflegen, weil es einfach aktuell zu halten, zu kommentieren und leicht zu löschen ist.

Sie haben eine Browser-Version sowie eine Desktop-App, sodass es sehr einfach ist, Ihre Benachrichtigungseinstellungen anzupassen. Lebendige Dokumentation für ein schnelles und gemeinsames Projekt ist von unschätzbarem Wert.

Lingo

Die meisten großen Unternehmen nutzen Speicher wie Dropbox, um Designdokumente zu speichern, aber was ist, wenn Sie nur ein Icon benötigen? The Noun Project hat eine App, mit der Sie nahtlos durch viele visuelle Informationen blättern und nach Projekten gruppieren können. Wenn Sie gemeinsame Produktillustrationen wie gängige SVGs haben, die für die visuelle Markenbildung konsistent sind, ist dieses Tool wirklich wunderbar.

Sie unterstützen viele verschiedene Dateiformate, und wenn die App geöffnet ist und Sie Screenshots machen, können Sie eine Benachrichtigung erhalten, die es Ihnen ermöglicht, den Screenshot mit einem Klick zu importieren. Das ist großartig für die Zusammenarbeit an verschiedenen Designversionen und deren einfache Präsentation auf einen Blick. Persönlich erstelle ich ein paar verschiedene Versionen eines Produkt-Mockups und mache Screenshots von jeder, um sie währenddessen in Lingo zu importieren. Ich kann dann jeden Überprüfungsprozess separat halten und sie sogar leicht für Design-Reviews präsentieren.

Ich habe festgestellt, dass dieses Tool besonders hilfreich bei der Arbeit mit Icons ist. Die Suche nach dem richtigen Icon und die Aktualisierung einer Komponentenbibliothek und eines Sprite-Sheets in einem großen Team kann sehr mühsam sein. Lingo macht die Suche nach, Organisation und Aktualisierung Ihres Icon-Systems sehr einfach.

Elegantt

Die meisten Leute kennen den Vorteil der Einfachheit von Trello's Swimlanes, aber was ich am meisten daran mag, ist die Plugin-Funktion namens Elegantt. Dies ist eine Gantt-Diagramm-Funktion, mit der Sie planen können, was Sie wann tun werden. Als jemand, der ständig viele verschiedene Arten von Projekten balanciert, finde ich das nützlich, weil Sie visuell erkennen können, ob Sie zu viel Arbeit auf einmal übernehmen, und Ihre Produktivität maximieren oder angemessene Grenzen setzen können.

---

Ob Sie Designer, Ingenieur oder beides sind, die Zusammenarbeit mit anderen Teams oder abteilungsübergreifend ist genauso wichtig wie die eigentliche Arbeit. Dies sind einige der Tools, die ich ausprobiert, getestet und mit denen ich gerne an großen Systemen gearbeitet habe. Wenn Sie einige haben, die für Sie ebenfalls funktioniert haben, können Sie gerne weitere in den Kommentaren hinzufügen. Je mehr wir teilen, desto besser arbeiten wir alle zusammen.