Skalierbare Designsysteme für SaaS-Produkte

Yasch Shah (00:02.914)

Ja, sagt, dass wir live sind. Warte, bis ein paar Leute mitmachen.

Yasch Shah (00:19,754)

perfekt. Fantastisch. Hallo und willkommen. Hallo und willkommen bei Momentum Officers. Mein Name ist Yash und ich werde von meinen Mitbegründern Harsh, Jay und Koushik begleitet, um über das Thema der Woche zu sprechen, nämlich die Entwicklung skalierbarer Designsysteme für SaaS-Produkte. Unser Ziel ist es, Ihnen umsetzbare Erkenntnisse und praktische Strategien zu bieten, die Sie auf Ihre eigenen Produkte anwenden können. Während der gesamten Sitzung empfehlen wir Ihnen, Fragen zu stellen, mit uns in Kontakt zu treten und Ihre Gedanken durch Kommentare mitzuteilen.

Dies ist eine fantastische Gelegenheit, voneinander zu lernen und neue Erkenntnisse zu gewinnen, die Ihnen helfen können, Ihre SaaS-Initiativen voranzutreiben. Lassen Sie uns also loslegen. Jai Harsh Koushik, wie fühlst du dich? Wie geht's dir heute? Wir feiern vor Diwali im Büro und erledigen natürlich die Aufgaben, bevor wir loslegen... Eine Pause zu machen, sich heute festlich zu fühlen und das ist vielleicht, wie Leute, die sich das ansehen...

Sie finden uns vielleicht in ungewöhnlichen Kleidern, aber das sind traditionelle indische Klamotten, die wir heute tragen. Wir hatten eine Party vor Diwali und wir hatten einen Wettbewerb zur Schreibtischdekoration, der heute auch in der Firma stattfand. Leider hat niemand von unserem Teil des Teams gewonnen, aber das ist okay, das ist in Ordnung, aber wir haben Koushik hier bei uns und wir wollen darüber sprechen

Erstellung skalierbarer Designsysteme für SaaS-Produkte. Beginnen wir also mit dem Verständnis der Grundlagen. Was ist ein Designsystem? Vergessen wir einfach für eine Weile den Aspekt der Skalierbarkeit. Aber was ist ein Designsystem? Was das Verständnis eines Designsystems angeht, so ist ein Designsystem im Grunde sowohl das Grundgerüst als auch das Herzstück dessen, was Ihr Produkt bewirken wird

Alle Komponenten, die Bildschirme und Abläufe für Ihr Produkt erstellen, sind im Grunde das Designsystem. Es ist also die Grundstruktur, aus der Ihr gesamtes Produkt gebaut wird. Es könnten also Schaltflächen sein, es könnten Feldeingaben sein, es könnte eine Kombination davon sein. Also werden wir das alles weiter besprechen. Aber so entsteht im Grunde das Ganze aus dem...

Yasch Shah (02:44,366)

Die atomare Ebene Ihrer Produktkomponente auf den gesamten Seiten ist im Grunde Ihr gesamtes Designsystem. So großartig. Was ist eine Atomeinheit eines Produkts? Okay, also dazu komme ich. Also, wenn Sie Ihr Produkt, die Designsysteme, im Grunde genommen unterteilen können, es ist eher eine chemische Sprache, so wie wir es kategorisieren.

Atome, wir haben Moleküle, wir haben Organismen, wir haben Vorlagen, dann haben wir Seiten. Ihre Atome sind also im Grunde Ihr Button, Ihre Feldeingabe, sogar ein Labelelement gehört Ihnen, all diese einzelnen Elemente sind alles Atome. Nun, wenn Sie zu Molekülen kommen, wenn die Feldeingabe und der Button zusammenkommen, um eine Komponente zu bilden,

Das ist dein Molekül. Stimmt. Also im Grunde stellst du dein Fachgebiet ein. Weil diese Kombination logischerweise Sinn macht. Richtig. Sie geben also etwas in Ihre Feldeingabe ein und drücken dann die Eingabetaste in Ihrer Taste. Es heißt also, dass es dafür eine logische Anwendung gibt. Wenn es dann um Organismen geht, sagen wir, es gibt eine Navigationsleiste, die obere Navigationsleiste, die die Kombination enthält, die ich gerade als Molekül erklärt habe, und die auch andere Button-Links hat.

als Links zur Seite und wahrscheinlich ein, du weißt schon, Symbol, das sich quasi wie ein Umleitungssymbol für die Startseite verhält. Und das ergibt eine ganze Navigationsleiste, die im Grunde Ihren Organismus ausmachen würde. Also, das ist eine Kombination aller Moleküle, genau wie in der Sprache der Chemie. Wenn es um Vorlagen geht, sprechen wir über das gesamte Layout, wohingegen eine Kombination, eine Reihe von Kombinationen von Organismen, die wir gerade erwähnt haben.

Es würde im Grunde das Layout erstellen und eine Reihe von Layouts, die einen Vorderfluss, einen Rückfluss oder Seitenflüsse in sich haben, würden Wellen erzeugen. All diese Dinge, also das ist die Struktur, also als ich sagte, dass es Knochen und Muskeln sein werden, ist das die Anordnung, in der Ihr gesamtes Design im Grunde betrachtet wird. Okay, es gibt zwei Teile, richtig, UI und UX, oder?

Yasch Shah (05:12.088)

Also, wenn wir ein Designsystem für ein Produkt erstellen, oder? Was sind also die Dinge, die wir aus UX- und UI-Gesichtspunkten in dieses Systemdesign aufnehmen sollten? Also nochmal, das ist sehr spezifisch für das Produkt. So wären zum Beispiel im Atom- und Molekülstadium wahrscheinlich 80% des Vertrauens für alle Produkte, die sich sehr ähnlich sind.

hätte immer noch einen Button, hätte immer noch eine Feldeingabe, hätte immer noch viele gemeinsame Elemente, hätte immer noch eine Toastnachricht, Warnmeldungen, hätte immer noch Akkordeons, hätte immer noch, du kannst weitermachen. Wir haben also eine Liste von Artikeln. Was den UX-Teil angeht, kommt der Teil ins Spiel, weißt du, er beginnt mit der Phase der Layouts und Vorlagen und den Seiten, von denen ich gesprochen habe. Also, wenn die...

Zunächst kommt in Ihrem Layoutdesign der UX-Teil ins Spiel, in dem eine Kombination Ihrer Organismen und Moleküle enthalten wird, die ich gerade erklärt habe. Wenn also Ihr gesamtes Layout da ist, sollte das Layout so gestaltet sein, dass Sie wissen, dass das Layout nur so viel Platz bietet, dass Sie nicht alles gleichzeitig anzeigen können. Sie müssen also einige Informationen den anderen vorziehen. Also, wie Sie Prioritäten setzen werden, wie Sie sie verwenden werden, wahrscheinlich könnte ich ein paar Informationen verbergen, ein paar verbergen.

Ich könnte es in einem Erntezustand verstecken oder ich könnte es in einem offenen Zustand oder so etwas verstecken. An dieser Stelle kommt auch die UX ins Spiel, wo sie zu Seiten wird. Sowohl bei der Layoutgröße als auch auf der Seitenseite wird es also eher zu einer Kern-UX. Aber das ist ein sehr interessantes Rätsel, denn UI-UX ist da. Es sind nicht zwei verschiedene Dinge. Es sind quasi zwei Seiten derselben Medaille, die die Münze ausmachen.

So ist zum Beispiel eine nicht gut dimensionierte Schaltfläche, die eine schlechte Benutzeroberfläche ist, auch eine schlechte Benutzeroberfläche. Wenn Sie also eine Schaltfläche mit einer Größe von 30 Pixeln oder weniger als 30 Pixeln für ein Handy gewählt haben, geben Sie an, welches wiederum ein Atom ist. Nehmen wir jedoch an, dass ein bestimmtes Objekt auf einem Mobilgerät 30 Pixel groß ist. Die Größe kann nicht angetippt werden. Die optimale Größe, auf die zugegriffen werden kann, liegt also bei 40 bis 44 Pixeln.

Yasch Shah (07:37,038)

und 48 Pixel, wenn es um Android geht, 44 Pixel, wenn es um iOS geht. Es gibt also bestimmte Richtlinien. Wenn du also nicht entsprechend entwirfst, ist es auch eine schlechte Benutzeroberfläche. Es ist also eine Kombination aus beidem. Ich muss, das ist das kleine Ding. Die Leute verwechseln es normalerweise, weil sie denken, dass es sich um zwei verschiedene Streams handelt. Das sind sie eigentlich nicht. Das sind wohl zwei Seiten derselben Medaille. Aber es ist wie...

Das Designsystem ist das UI oder UX? Oder da du sagst, es ist dasselbe, dann ist es dasselbe? Die Erstellung ist also UI, denn bei Sigma hältst du dich tatsächlich an die Markenwerte des Produkts und kreierst dann das Ganze. In Bezug auf die Farben, in Bezug auf die Auswahl der Schriftarten. Sogar diese fallen wieder unter das Atomstadium, weißt du, oder? Also ich wähle aus, welche Schrift, welche Farbe immer noch unter das Atomstadium fällt. Das habe ich gerade erklärt.

Im Grunde handelt es sich also um ein vollständiges UI-System. Aber wie ich es nehmen und verwenden werde, ist ein kompletter UX-Teil, stellt sich heraus. Während ich es benutze, sind meine Platzierung, meine Position, meine Größe, die Größe, in der ich es verwende, der UX-Teil, von dem ich spreche. Richtig. Also, Kashi, ist sicher, dass das Designsystem für die Gestaltung eines Produkts unerlässlich ist.

und natürlich verstehst du die Markenrichtlinien und viele andere Aspekte und Recherchen, die wir in sie investieren werden. Aber nehmen wir an, jemand möchte ein MVP bauen oder eine etwas größere Version, eine weitere Version nach einem MVP. Was ist in diesem Fall für sie, Sie wissen schon, die Notwendigkeit, ihr Designsystem skalierbar zu machen? Was ist der Bedarf an Skalierbarkeit im Designsystem in einem frühen Stadium? Ja, das ist der Und bevor du das beantwortest, Koushik, haben wir

eine Chat-Nachricht, in der das Thema, über das wir gerade sprechen, im CX Connect Podcast unterstützt wird und in der es heißt, dass dies ein großartiges Thema ist. Vielen Dank, CX Connect, aber Koushik, bitte machen Sie weiter. In der MVP-Phase ist das wichtig, denn zum einen geht es um die Aufrechterhaltung der Konsistenz auf allen Bildschirmen. Sie müssen diesen auf jeden Fall entwerfen. Die zweite Sache ist, dass es Ihnen hilft, sehr schnell zu bauen und zu entwerfen.

Yasch Shah (09:54,87)

Es ist aus der Sicht eines Designers. Andernfalls gebe ich Ihnen das andere Szenario. Wenn Sie kein Designsystem in der App haben, also wenn Sie kein Designsystem haben, muss ich meine Komponenten jedes Mal, wenn ich ein Schema erstelle, meine Komponenten immer wieder manuell neu erstellen. Um das zu verstehen, hat Figma sogar die wenigen Funktionen innerhalb von Figma wie Komponenten, Design-Tokens und Assets entwickelt.

Bibliotheken, all diese Dinge wurden geschaffen, um Designern zu helfen und Designer zu ermutigen, mehr in die Richtung der Entwicklung von Designsystemen überzugehen, weil das ein Höchstmaß an Konsistenz schaffen würde. ist eine davon. Und zweitens würde es Ihnen das Leben nach der Einführung des MVP so viel einfacher machen, weil wir alle wissen, wie sehr Gründer es lieben, Funktionen innerhalb ihres Builds zu erstellen, Funktionen für Funktionen auf ihren Produkten. Also für dich

Mach das weiter und um überhaupt eine Entscheidung zu treffen, ob diese Funktion notwendig ist, musst du sie zuerst entwerfen und mit deiner eigenen Gruppe oder mit dem potenziellen Publikum testen. Nun, diese Sache mit diesem Element passiert, wenn das Designsystem schon davor eingerichtet ist, während du die MVP-Phase selbst erstellt hast, ist es sehr einfach, ein neues Feature zu skalieren, ein neues Feature zu erstellen und dasselbe zu verwenden. Ich könnte es einfach machen, es macht das Leben für alle im Team so viel einfacher.

um Veränderungen vorzunehmen und das Produkt so schnell wie möglich auf den Markt zu bringen, was der entscheidende Aspekt bei der Führung des Produktunternehmens ist. Vor diesem Hintergrund ist es auch bei einem MVP großartig, wenn Sie ein Designsystem in der MVP-Phase hatten. Wenn Sie in der MVP-Phase noch kein Designsystem hatten, sollten Sie sich darauf konzentrieren und versuchen, Ihr bestehendes Design in ein Designsystem umzuwandeln

Also, wenn ich dem noch etwas hinzufügen kann, glaube ich irgendwie, dass der Aufbau eines Designsystems auf Unternehmensebene viel mehr Auswirkungen hat als das Designteam selbst. Also, sehr gut, es macht das Design konsistenter, es macht die Designer produktiver. Es hilft auch Ihrem Frontend-Engineering-Team, Komponenten schneller zu iterieren und zu bauen, oder? Also, wenn ein Frontend-Ingenieur es weiß,

Yasch Shah (12:17,902)

dass alle Tabellen so aussehen werden, alle Zeilen werden so aussehen, alle Karten werden so aussehen, alle Charts werden so aussehen. Sie sind auch in der Lage, Komponenten in ihrem Code zu erstellen, was ebenfalls zur Effizienz beiträgt. Das ist quasi gleichwertig, ich würde sagen, wie eine Axt zu schärfen, um einen Baum zu fällen. Während Sie also die Axt schärfen, fangen vielleicht schon andere Leute an, den Baum zu fällen, und Sie haben vielleicht das Gefühl, dass Sie etwas hinterherhinken. Aber sobald du es genug geschärft hast,

Sie könnten Bäume deutlich schneller, effizienter, produktiver usw. fällen. Ist das, was ich sehr schnell hinzufügen wollte. Also, hast du Koushik etwas zu zeigen, wie für einen Gründer, der nicht unbedingt ein Ingenieur ist, für einen Gründer, der nicht unbedingt ein Designer ist oder ein Ingenieur aus geschäftlicher Sicht, und er hat einen MVP, der von uns ist, er hat kein Designsystem entworfen oder er hat kein Designsystem gesehen, was könnte das

Wie könnte es aussehen? Ja. Also werde ich versuchen, eines unserer eigenen Projekte zu zeigen. Ich hatte es gerade dabei. Ich meine, es ist immer da in einem der Tabs. Das ist also ein Produkt, das wir haben. Ich denke, wir können es uns wie ein Äquivalent zur Dose vorstellen. Es hat also einen Editor als Komponenten-Dashboard und eine Reihe von Modals, die passieren.

Bevor das Projekt eintrifft, versuchen wir also, ein Kernelement-Set und ein Basiskomponentensatz zu erstellen. Wir entscheiden, was alles ist, sodass die Kernelemente bei den meisten Produkten überwiegend gleich bleiben. Zum Beispiel Aspekte wie, für welche Farbpalette werden wir uns entscheiden? Aber dabei definieren wir sehr klar, was die Fehlerfarben sind, was die Gefahrenfarben sind, was die Erfolgsfarben sind und so weiter. Und wir definieren auch

Wenn es Text gibt, für welche Farbvariationen werden wir auch für Textelemente haben? Weil es kein reines Schwarz sein wird. Es wird einen gewissen Schwarzton oder eine Nuance von Schwarz haben. Was es also sein wird, wir definieren all diese einzelnen Elemente. Und dann konvertieren wir sie in Design-Tokens innerhalb von Figma, sodass, wissen Sie, wann immer ein Designer sie verwendet, hilfreich wäre. Nun, die machen wir ähnlich, weil Sie es hier sehen könnten, wir machen es für die Typografie.

Yasch Shah (14:44,108)

Wir machen das für Icons. Was ist die Icon-Bibliothek, die du auswählst? Wir integrieren die gesamte Icon-Bibliothek in die Plattform. Rastersystem, für wie viele Schatten werden wir uns entscheiden und all diese Dinge. Und dann kommen wir in die... Also haben wir die Atome definiert. Das Stadium von... Das ist auch noch vor Atomen. Definiert... Die Entscheidung, für welche Marke wir uns für diesen speziellen Artikel entscheiden werden.

Und dann arbeiten wir daran, da wir jetzt an einer ganzen Reihe von Projekten gearbeitet haben, wir arbeiten gleichzeitig an Atomen, Molekülen und Organismen. Also zum Beispiel einzelne Elemente wie Banner, Brotkrumen, Buttons und all diese Dinge, wir erstellen sie normalerweise und behalten sie. Zum Beispiel, und wir definieren auch den Status. Eine weitere sehr wichtige Sache ist die Definition von Staaten, denn wir entwerfen keine Dokumente, oder? Wir entwerfen Bildschirme. Bildschirme haben also Zustände.

Damit interagiert der Benutzer also. Alle diese Komponenten, von der Atomebene bis zur gesamten Layoutebene, haben also alle Zustände. Selbst für eine Atomebene wie Knöpfe sind also alle Zustände, alle Primär-, Sekundär- und Tertiärkomponenten, alles definiert. Und wenn man dann ein bisschen höher geht, machen wir das normalerweise so, wie wir es versuchen

Wenn es ein bestimmtes Atomelement gibt, das wir entworfen haben, geben wir ein Beispiel, das zeigt, wie dieses bestimmte Element kommen wird und wohin es kommen wird. Wenn das also ein Atom ist und die Feldeingabe ein Atom ist und die E-Mail-Adresse ein Atom ist, dann ist diese Kombination im Grunde genommen ein Molekül. Und wenn dann alle in einem einzigen Layout zusammenkommen, würde dieses spezielle Modell daraus einen Organismus machen.

weil Sie eine Kombination von Schaltflächen haben, eine Kombination aus Etikett, Symbol und all diesen Dingen. Und dann kommen sie alle auf einem Bildschirm zusammen, was zu einem Layout führen würde, was Sie zum Bildschirm „Konto erstellen“ macht. Und wenn ich dann darauf klicke und es zum nächsten Bildschirm geht, werden die Seiten erstellt. Also ordnen wir es normalerweise so an. Dann können Sie alle Komponenten sehen, die möglich wären. Nun, es gibt eine Sache, die man erwähnen muss. Denken Sie daran

Yasch Shah (17:08,002)

Hier würde Wireframing beim Entwurf eines Designsystems eine große Hilfe sein. Wenn Sie ein Wireframe haben, das die Abläufe in Bezug auf das Produkt in einer Weise wiedergibt, dass Sie beispielsweise im Wireframing-Level festgestellt haben, dass das Produkt ein Datei-Upload-Element enthält. Wenn Sie dann zum Designsystem kommen, würden Sie sich darauf konzentrieren, zu entwerfen, wie Aspekte des Dateiuploads funktionieren.

innerhalb des Produkts. Also werden wir eine Ladestange haben. Also, wann gibt es einen Staat, in dem, sagen wir, wenn jemand lädt, was ich zeige? Zeige ich das Hochladen an? Zeige ich, dass es abgeschlossen ist? Wenn ich also zeige, dass Uploads hochgeladen werden, werde ich dafür ein Symbol haben? All diese Entscheidungen würden also nacheinander fallen, während Sie versuchen, die einzelnen Designs zu definieren. Und dann können Sie sehr schnell in die Produktphase kommen, in der

Wenn Sie sich dieses spezielle Produkt ansehen, als wir es entworfen haben, haben wir es einfach sehr schnell gemacht, was die Erstellung von Skripten angeht. Das hilft unserem Designteam, sich mehr auf die Abläufe zu konzentrieren und wie wir sie verbessern könnten, anstatt uns mehr Gedanken darüber zu machen, weißt du, ob diese Farbe in Ordnung ist oder ob dieser bestimmte Zustand, du weißt schon, der aktive Zustand in Ordnung ist? Oder sollte es weniger heller, dafür heller sein? All diese Entscheidungen...

Keiner unserer Designer denkt daran, wenn sie eine Produktdesign-Phase entwerfen. Sie konzentrieren sich mehr darauf, wie ich dieses Layout entwerfen könnte, wie könnte ich den Ablauf gestalten. Das ist es, was sie denken. Das ist also etwas, das wir aus unseren Phasen des Produktdesigns selbst gelernt haben. Während des Kurses haben wir einige Dinge gelernt. Vor allem, wenn Sie den Bildschirm entwerfen, der Designer

und sowohl das Team als auch das gesamte Team sollten sich auf die Abläufe konzentrieren, anstatt zu denken, ob diese Farbe in Ordnung ist, passt das zur Marke oder ist das im aktiven Zustand, sollte ich es um 40% weniger dunkler machen oder ist der Text im richtigen dunklen Farbton. Das Team sollte sich also keine Sorgen um diese Dinge machen, wenn es an den Bildschirmen arbeitet. Also, obwohl es wie etwas aussieht, das sehr winzig ist, aber es

Jasch Schah (19:29,774)

Es spart so viel Zeit und letztendlich auch Entwicklungszeit. Eine weitere sehr wichtige Sache ist, dass es aus Sicht der Entwickler das Leben der Entwickler so viel besser macht. Also ein Designsystem zu haben. Ich meine, damit sie nicht zurück zum Designteam gehen müssen, das hin und her.

entfällt komplett, wenn Sie ein sehr gutes Designsystem bauen. Wir haben es also immer wieder bei allen Produkten gesehen, die wir hergestellt haben. Es ist jedes Mal passiert. Also ja. Ja. Und das Gleiche, das hilft auch dem QA-Team, oder? Wenn Sie die Richtlinien haben, richtig? Das QA-Team erstellt dafür auch mehrere Testfälle. Damit das Testen auch schnell vonstatten geht und die Entwicklung auch großartig wird. Ja. Ja. Ja, ich habe nur eine Sache

Stellen Sie sich vor, wir bauen ein MV-Produkt und dafür haben wir ein Designsystem entwickelt. Jetzt, wo wir wachsen, kann es sein, dass es mehr Komponenten gibt und unser Designsystem um weitere Stilrichtlinien erweitert wird. Und es ist auch möglich, dass einige der Komponenten, die wir bereits gebaut haben, geändert werden können. Wir haben einige Stile für Buttons hinzugefügt.

Und nach einiger Zeit haben wir den Stil geändert, oder? Also, wie können wir diese sich verschlechternde Sache in Zukunft aufrechterhalten, wenn wir unsere Veränderungen zurücknehmen wollen, richtig? Also, wie halten wir die Änderungen an den Komponenten unseres Designsystems aufrecht? Eine Sache ist also, dass es sich bei Ihnen eher um einen additiven Prozess als um einen austauschbaren Prozess handelt. Wenn Sie ein Designsystem haben, um es viel detaillierter zu erklären.

In sehr seltenen Fällen würden Sie die Farbe Ihres Produkts ändern. Es ist eine große Entscheidung. In einem sehr seltenen Fall würde sich das ändern... Du könntest das ändern, zum Beispiel, du könntest eine Entscheidung darüber treffen, wie rund mein Knopf sein soll, was ebenfalls ein sehr seltener Fall ist. Kleinere Entscheidungen wie diese. Normalerweise ist es wie ein Rebranding oder so ähnlich. Das heißt, Sie sind das gesamte Designsystem.

Yasch Shah (21:50,83)

Aber es wird zum Beispiel Fälle geben, ich gebe Ihnen ein sehr interessantes Beispiel, auf die wir auch gestoßen sind. Es könnte also eine Feldeingabe geben, die Sie nicht mit einem Dropdown erstellt hätten. Es ist also nur eine Feldeingabe, aber Sie haben das Designsystem nicht so erstellt, dass ein Dropdown angehängt ist. Nehmen wir nun an, Sie haben es nur in einem bestimmten Land eingeführt.

Nehmen wir an, Sie führen es jetzt in mehreren Ländern oder einer anderen Region ein. Jetzt müssen Sie bei Ihrer Registrierung die Option auswählen, dass sie sich für ein Mobilgerät entscheiden können. Im Moment könnten Sie entweder eine Feldeingabe und dann ein separates Dropdown verwenden oder ich könnte beide kombinieren und eine Feldeingabe so erstellen, dass die Feldeingabe ein Dropdown in der Feldeingabe selbst hat. Das haben Sie vielleicht schon viele, viele Male gesehen.

Also das habe ich vielleicht nicht geschaffen. Deshalb habe ich gesagt, es sollte ein additives Verfahren sein. Es sollte kein Prozess sein, bei dem man von der Basis aus wechselt. Jetzt muss ich nur noch meine vorhandene Feldeingabe verwenden, eine Komponente erstellen und eine Variante davon so erstellen, dass sie auch eine Option zum Aufklappen der Handynummer bietet. Ebenso könnte es in Zukunft mehrere Anwendungsfälle geben. Ich könnte zum Beispiel eine Situation haben, in der

Es sollte sein, es sollte kein Dropdown haben, sondern nur einen festen Zustand in meiner Feldeingabe, sagen wir, HTTPS kurz davor als Präfix, oder? Solche Situationen werden also passieren und Sie müssen sie auf additive Weise erstellen. Sie müssen also jedes Mal eine Variante innerhalb Ihrer Komponente erstellen und diese weiter verbessern. Das ist also der spezifische Grenzfall. Eigentlich ist das eine gute Frage, weil viele Leute...

Was sie tun, ist, dass sie zurückgehen und das Ganze ändern. Du solltest es nicht tun, weil es das Leben aller verändert. Es könnte sein, dass Designer es lieben, Zeit in Sigma zu verbringen. Um Ihnen ein Beispiel zu geben, sie lesen die Sigma-Dateien gerne lange. Aber aus diesem Grund lieben sie es, die Design-Datei immer wieder neu zu überschreiben. Aber es wird einfach jedermanns Leben verändern, weil irgendjemand hingehen und das Ganze entwickeln muss.

Yasch Shah (24:16,334)

Also lass uns das nicht tun. Also machen wir es einfach zu einem additiven Verfahren. Das bringt mich zu einer anderen Frage. Es liegt auf der Hand, dass man das gesamte Designsystem nicht komplett ändern sollte. Aber dann gibt es bestimmte Anwendungen, die durchgeführt werden müssen, wie Sie im aktuellen Beispiel erwähnt haben. Gibt es also irgendwelche Verfahren oder Kennzahlen, um den Nitratgehalt im bestehenden Designsystem zu bewerten? Und wenn ja, mit welcher Frequenz aktualisiert man dann das Designsystem?

Ich denke, es geht darum, auf welcher Ebene Ihres Unternehmens möchten Sie die Entscheidung treffen? Ich denke wirklich, ich meine, ich habe Produkte gesehen, die Designsysteme entwickelt haben, und bis sie übernommen wurden, kann ich Ihnen zum Beispiel ein Beispiel geben: Superlist ist ein Produkt. Superlist ist ein Task-Management-Team, also haben sie das Produkt entwickelt, das ist dasselbe Designsystem, das sie hatten.

Sie wurden unter dem Namen MVP auf den Markt gebracht und auch nach dem Start, auch nach der Übernahme durch Microsoft, behalten sie immer noch dasselbe Designsystem bei. Das Unternehmen wurde von Microsoft übernommen. Wunderlist. Ja, Wunderlist. Sie haben es in Wunderlist geändert und behalten immer noch das gleiche Designsystem bei. Aber es gibt Unternehmen, die bis zu einem gewissen Grad das gesamte Designsystem geändert haben und auf eine Plattform auf Unternehmensebene umgestiegen sind. Also zum Beispiel

Ich denke, Atlassian ist ein sehr gutes Beispiel für Kreativität. Sie haben viel Geld und Zeit in die Erstellung eines sehr, sehr detaillierten Designs gesteckt. Sogar Uber, was das angeht, hatten sie eine ganz andere Benutzeroberfläche. Außerdem ist es, glaube ich, eine interessante Kennzahl oder ein interessanter Punkt ist, dass, wenn Sie feststellen, dass Ihr Benutzer ein Problem hat

Wenn Sie die Anwendung oder das Produkt auf einer sehr einfachen Ebene verwenden und Probleme mit der Lesbarkeit oder Barrierefreiheit Ihres Produkts haben, ist es definitiv an der Zeit, dass Sie Ihr Design aktualisieren müssen. Wenn es Probleme mit der Barrierefreiheit gibt, dann ist das ein großes, großes Problem, weil wir gesehen haben, denn sagen wir, wenn ich eine App wie Uber oder Cola bin, verwende ich die Anwendung wahrscheinlich zwei- bis dreimal am Tag.

Yasch Schah (26:38,995)

Und wenn die Helligkeit auf meinem Bildschirm ist, können wir nicht erwarten, dass alle Geräte den gleichen Standards entsprechen. Verschiedene Geräte haben unterschiedliche Qualitätsstandards. Selbst bei einem sehr schlechten Bildschirm ist es ein großes Problem, wenn Ihre Anwendungsfarben nicht sichtbar sind oder wenn Ihre Schaltfläche nicht einmal sichtbar ist. Also.

Das sind die Dinge wo, also ist es auch eine Frage, wann erreicht ein Unternehmen ein Niveau, auf dem es diese Daten hat? Sie entscheiden nach eigenem Ermessen, sie haben diese Daten. Ja. Also nur meine Chance, wenn Sie dieses Unternehmen sind und ein Problem haben, wenden Sie sich bitte an uns bei Momentum. Wir können ein Designsystem erstellen, das mit Sicherheit zugänglich sein wird. Wir haben das schon oft gemacht.

Und wir sorgen dafür, dass Ihr Designsystem so optimiert wie möglich, so effizient wie möglich und so zugänglich wie möglich ist. Und die Erfahrung, die Ihre Benutzer oder Ihre Kunden oder Verbraucher bei der Nutzung des Webs oder der mobilen App haben, an der Sie gerade arbeiten, ist so gut wie möglich. Deshalb haben wir hier eine Frage aus dem Chat. Jemand fragt, was sind einige großartige Orte, um anzufangen

Designsystem. Gibt es also Designsysteme, die bereits geschaffen wurden und dann auf der Welt existieren und von denen wir etwas leihen oder von denen wir lernen könnten, oder wir könnten sie verbessern oder mehr Dinge darauf aufbauen? Also zum Beispiel, wenn wir nicht mit dem Aufbau eines Designsystems beginnen wollen, weil es eine sehr schwierige Sache zu sein scheint, als ob Sie wissen, entwerfen Sie jede einzelne Komponente oder jedes Objekt, wie Sie es ausdrücken. Es mag eine große Aufgabe sein, aber wir sind, Sie wissen schon, Gründer eines Startups, wir wollen die Dinge sehr schnell voranbringen.

Und die Frage ist nicht, ob wir eine Bewerbung stellen können, die am besten aussieht oder nicht. Die Frage ist viel tiefgreifender, ob das, was wir bauen werden, für irgendjemanden von Wert ist oder nicht. Genau dafür wollen wir eine Lösung finden. Also, wenn Sie heute ein Designsystem starten wollen, gibt es irgendwelche verfügbaren Ressourcen, die wir uns ansehen können? Ich denke, das ist die Frage. Ja. Ja, tolle Frage. Also ich denke, zunächst,

Yasch Shah (29:04,781)

Wir haben sowohl Google als auch Apple, die ihr gesamtes Designsystem als Open Source veröffentlicht haben. Sie können sich ihre Richtlinien ansehen. Google hat Richtlinien für Benutzeroberflächen. Entschuldigung, Apple hat Richtlinien für die Benutzeroberfläche. Google hat Googles Materialdesign. Derzeit ist es also Googles Materialdesign 3. Das kannst du dir also ansehen. Also haben beide ihre Designsysteme ausgearbeitet. Also, warum ich beide vorschlage, ist, weil Sie sie letztendlich wahrscheinlich haben, wenn es eine App ist,

das du entwirfst, wirst du es wahrscheinlich im App Store oder im Google Store veröffentlichen. Und wenn Sie diese Richtlinien nicht befolgen, werden sie nicht genehmigen, dass Ihre App in ihren Märkten platziert wird. Wenn es sich wiederum um eine Plattform handelt, wird sie wahrscheinlich bei Google oder einer dieser Plattformen zu finden sein. Also muss man diese Standards trotzdem befolgen und beibehalten. Und wenn es darum geht

Abgesehen davon gibt es viele andere Designsysteme. Wir haben also Unternehmen, die ihre Designsysteme als Open Source nutzen. Wir haben Thread, der sein Designsystem als Open Source veröffentlicht hat. Wir haben Atlassian. Wir haben Google. Wir haben Shopify. Wir haben fast alle großen Unternehmen, die ihre Designsysteme als Open Source anbieten, weil sie wollen, dass die Leute Produkte auf ihren Designsystemen aufbauen und sehen, wie es funktioniert.

Wir haben Microsoft, IBM auch, die es als Open Source anbieten. Microsoft war einen Schritt weiter und hat sogar individuelle Produktlinien entwickelt. Aber Sie können das Teams-Designsystem sehen. Sie können sehen, dass alles da draußen ist. Sie können es suchen und Sie können es direkt finden. Es ist auch auf dem Marktplatz von Sigma, der Community-Basis von Sigma, erhältlich. Abgesehen davon gibt es auch Designsysteme, bei denen Sie einkaufen können.

Du kannst bezahlen und sie bekommen. Es gibt Untitled, das es auf dem Markt gibt und das ziemlich berühmt ist. Du kannst dafür bezahlen und du kannst es bekommen. Es gibt auch ein paar von ihnen, die viel teurer sind. Normalerweise sind die kostenpflichtigen viel eher auf der teuersten Seite. Der Grund dafür ist, dass sie sehr teuer sind und sehr oft aktualisiert werden. Das gibt Ihnen den Vorteil, dass Sie nicht zur Kasse gehen müssen.

Yasch Schah (31:25,965)

Eine Sache, die Sie jedoch beachten sollten, ist, dass kein Designsystem zu 100% für Ihr Produkt geeignet ist. Und dann würde es wahrscheinlich einen Job von 50 bis 70% machen. 70% bedeuten, dass es großartig ist. Ich denke, auf MVP-Ebene macht es wahrscheinlich 70% der Arbeit aus. Deshalb haben wir es Scalable Design Systems für Ihre SaaS-Produkte genannt. Weil.

Du könntest jedes Designsystem nehmen und es auf jeder Ebene des Produkts bauen, weil es alle Elemente und sogar Monitore enthalten wird, die wir gerade besprochen haben. Es wird alle Tasten, Bildschirmeingänge, Akkordeons, Nachrichten, einfach alles haben. Es wird wahrscheinlich auch eine ganze Navigationsleiste für Sie erstellt und präsentiert. Außerdem gibt es Frontend-Bibliotheken, die ihre Designsysteme erstellt und so gestaltet haben. Wir haben Tailwind, der das gemacht hat. Wir haben...

Es werden verschiedene Druck- und Bibliotheken sowie Designsysteme erstellt. All diese Leute, auch diese, sind aus der Sicht eines Entwicklers ebenfalls der Druck und die Bibliothek selbst, die die Ergebnisse liefern, was es viel einfacher macht. Der Punkt hier ist also, dass kein Designsystem die ganze Arbeit für Sie erledigen wird. Irgendwann müssen Sie den Designer dazu bringen, es zu skalieren und zu erstellen. Kommen Sie genau an einem Punkt zum Schwung, Sie müssen zur Dynamik kommen.

um ihr Designsystem fertigzustellen. Aber das ist toll, oder? Damit du loslegen kannst. Ich zu 50-70% ist noch nicht die komplette Arbeit erledigt, aber es ist gut genug, um loszulegen und ein MVP auf den Markt zu bringen, die ersten paar zu gewinnen, wie die ersten 100 Kunden, die lieben, was Sie bauen, die lieben, was Sie tun. Und das ist gut genug, um dorthin zu gelangen. Und für all die Leute, die da sind, wo auch immer ihr das seht oder in den Kommentaren hört, werden wir die Links zu allen Ressourcen hinzufügen, die Koushik erwähnt hat, einschließlich Tailwind und Untitled und

Googles Material-UI und so weiter und so weiter. Sie werden also all diese Dinge auch dort oben finden können. Aber damit sind wir am Ende des heutigen Gesprächs angelangt. Ich hoffe, dies war ein bedeutungsvolles Gespräch für Sie und wir konnten es tun. Möglicherweise haben wir nicht alle Ihre Fragen beantwortet, aber vielleicht haben wir einige Ihrer offenen Fragen beantwortet, was die Erstellung angeht

Yasch Shah (33:46,795)

skalierbare Designsysteme für Ihr SaaS. Ich hoffe, wir sehen uns in unserem nächsten Stream. Habe auf Momentum91 eingestellt und abonniere, falls du es nicht getan hast. Abonniere den Kanal, abonniere das Konto, wo auch immer du das siehst. Folge uns. Und der Vorteil eines Abonnements besteht, wie ich bereits erwähnt habe, darin, dass Sie in Zukunft kein Abonnement mehr abschließen müssen. Warum also auf morgen verschieben, was Sie heute erreichen können, und warum

bis heute etwas anderes, wenn du es sofort schaffst. Es ist ein harmloser Knopfdruck und ich hatte sowohl mit YouTube als auch mit LinkedIn ein Gespräch darüber, dass dir dein Abonnement und deine Followerschaft kostenlos zur Verfügung gestellt werden. Dafür fallen also keine Gebühren an. Aber danke, danke noch einmal allen, wo auch immer Sie zu uns gekommen sind, und ich hoffe, Sie nächste Woche wiederzusehen. Bis dahin wünsche ich euch allen ein frohes Diwali und bis bald. Ja, Happy Diwali Leute. Tschüss.

‍