So erstellen Sie ein UI-Kit, das zum Verkauf steht. Entwicklungsstadien eines kommerziellen Designsystems

Heute hat jeder Designer die Möglichkeit, mit seinem eigenen Designprodukt Geld zu verdienen. Symbole, Illustrationen, Website- und Anwendungsvorlagen können in ein digitales Produkt umgewandelt und weltweit verkauft werden. Jemand, dessen Handwerk Ihnen hilft, die Arbeit zu beschleunigen, und die Leute werden dafür bezahlen. Ein anderer kann kaufen, um zu sehen, wie es gemacht wird. Die dritte besteht darin, Ihre Ressource mit Ihren Designlösungen zu entwerfen. Ihr Produkt kann schießen und die Spitze treffen, oder es kann sich für niemanden als nutzlos herausstellen. Es lohnt sich jedoch, dies zumindest zu versuchen, um die Fähigkeiten zu verbessern, mit dem Verkauf zu arbeiten, die Möglichkeit zu haben, Büroarbeiten abzulehnen oder für einen Kunden zu arbeiten.

Ich werde über einen schrittweisen Plan zur Schaffung eines kommerziellen Designsystems sprechen. Erfahren Sie, wie Sie Ihr Produkt herstellen und vermarkten. Ich werde Ihnen sagen, was zu tun ist, bevor Sie mit der Arbeit beginnen, wie Sie einen Plan vorbereiten und erstellen. Ich werde die Phasen der Entwicklung eines Designsystems für Figma separat betrachten. Im letzten Teil werde ich Tipps geben, wie man fördert und fördert. Der Artikel nur persönliche Erfahrungen und Beobachtungen von Autodidakten.

Wer kauft es und warum?

Designer, Entwickler, Manager und Geschäftsinhaber kaufen Designsysteme, um nicht all die kleinen Dinge von Grund auf neu zu zeichnen, sondern sofort Layouts von fertigen Teilen zu sammeln. Die Herangehensweise an das Bildschirmdesign hat sich geändert und erfordert eine Feinabstimmung jeder Komponente. Stile, Trennzeichen, Namen, Netze und allgemeine Reihenfolge im Entwurfssystem müssen durch Zeitaufwand erstellt werden. Sie können nicht einfach Sketch, XD oder Figma öffnen und mit der Erstellung von Vorlagen beginnen. Sie beginnen immer mit einem leeren Bildschirm, und für die Arbeit sind grundlegende Elemente erforderlich: Schaltflächen, Listen, Karten usw. Wo bekommt man das alles? Erstellen Sie entweder alle Komponenten selbst, debuggen und testen Sie sie, nachdem Sie einen Monat verloren haben, oder kaufen Sie etwas Fertiges .

Warum ein Designprodukt erstellen?

Dies muss getan werden, um berufliche Fähigkeiten und Möglichkeiten zur Verbesserung der finanziellen Situation zu entwickeln. Das macht mehr Spaß, weil Sie kommen mit Aufgaben für sich. Wenn Sie tun, was Sie wollen, sind Sie bereits motiviert genug. Sie haben die Möglichkeit, Ihre Komponenten an andere Designer und Organisationen aus der ganzen Welt zu verkaufen. Sie erhalten schmeichelhafte Bewertungen von zufriedenen Kunden, daher müssen Sie Ihre beste Benutzeroberfläche erstellen. Das Erstellen eines Designprodukts ist interessant und aufregend, aber es wird einige Zeit dauern, bis es investiert ist.


Eine hochwertige Präsentation ist ein guter Weg, um Ihr Handwerk zu fördern.

Welche Designprodukte gibt es?

• Symbol gesetzt
• Satz von Abbildungen
• Prototyping-Kit
• Website-Vorlagen
• Anwendungsvorlagen
• Präsentationen
• Schriftarten
• Entwurfssysteme usw.

Ein flexibles Designprodukt ist für den Kunden von größtem Wert. Es enthält sicherlich viele Optionen, Bedingungen und Größen der verwendeten Elemente. Daher müssen Sie sich bemühen, alles zu berücksichtigen, ein System zu entwickeln und dann alles sorgfältig zu überprüfen. Der Wettbewerb auf dem Markt für vorgefertigte Ressourcen für Figma ist immer noch nicht so spürbar, aber er besteht, was bedeutet, dass Sie alle gesammelten Erfahrungen nutzen und ein Produkt von höchster Qualität herstellen müssen.

Sie können das zukünftige Designsystem in jedem der Themen vertiefen, insbesondere wenn Sie bereits damit gearbeitet haben: E-Commerce, Kryptowährung, Soziales, Projektmanagement usw. ... Für ein Nischenprodukt haben Sie das Recht, einen hohen Preis zu berechnen und ihn dann schrittweise zu reduzieren, wenn das Ergebnis vorliegt Nein. Ein Produkt mit einer engen Spezialisierung ist jedoch schwieriger zu verkaufen, da es von einer Minderheit benötigt wird. Wenn sich ein solcher Käufer befindet, kann er jedoch 200 USD oder mehr für eine Einzellizenz ausgeben. Ich empfehle, ein System für ein ausgewähltes Thema zu entwickeln, aber stellen Sie sicher, dass Sie zeigen, wie einfach es ist, es in ein anderes zu wiederholen.

Sie riskieren nur Zeit

Dies ist Ihre einzige Investition - Zeit. Aber auf jeden Fall wird es mit Erfahrung zu Ihnen zurückkehren. Wenn Sie die für Sie interessanten Designprobleme lösen, können Sie die Qualität des Portfolios auf ein neues Niveau heben. Von Ihnen selbst überprüft . Und ich versuche mich objektiv wahrzunehmen. Mit einem günstigen Ergebnis erhalten Sie den ersten Verkauf und ein sehr cooles Gefühl. Jemand fand Ihr Handwerk nützlich und bezahlte eine Kopie. Ihr Wunsch zu schlafen wird verschwinden, weitere Pläne für die Entwicklung Ihres Projekts werden Ihnen den Kopf verdrehen.

Aber vor dem ersten Verkauf wird Ihnen niemand die Zeit bezahlen, die Sie für die Arbeit bei einem Kunden aufgewendet haben. Es besteht immer das Risiko, dass sich das, was getan wird, für niemanden als nutzlos erweist. Ich hatte auch beim ersten Mal keinen Erfolg und es gab überhaupt keine Verkäufe. Daher müssen Sie die Tatsache akzeptieren, dass Sie vielleicht nichts verdienen, aber auf jeden Fall pumpen.

Sie verbessern Ihr Portfolio

Wenn der Verkauf nicht gelaufen ist, ist dies nicht das Ende. Auf jeden Fall sind Sie stolz darauf, diese Arbeit in Ihr Portfolio aufzunehmen . Sie haben hart für sich selbst gearbeitet und beeilen sich nicht, das Designprodukt in die Schachtel zu legen. Sie können es beispielsweise wiederverwenden und einen fiktiven Fall entwickeln. Wenn Sie wie viele Anfänger einen Fehler gemacht und ein anderes Food Delivery UI-Kit gezeichnet haben, können Sie den Prozess so beschreiben, als ob diese Arbeit für den Kunden erledigt worden wäre und wie Sie damit umgegangen sind. Basierend auf dieser Geschichte können Sie auf Medium schreiben und coole Grafiken auf Dribbble und Instagram verteilen. Vielleicht erhalten Sie ein wertvolles Feedback und neue Abonnenten. Sie müssen Ihre eigenen Grafiken immer wiederverwenden, um Ihr Portfolio zu verbessern und ein Publikum zu schaffen.

Ich erwähnte oben, dass ich das erste Mal keinen Erfolg hatte, aber sechs Monate später machte ich eine Kehrtwende und begann vor dem zweiten Versuch mehr zu untersuchen. Die Forschung ist eine wichtige Phase vor dem Start, auf die ich näher eingehen möchte. Bei einer genaueren Analyse von Mustern und beliebten Produkten konnte ich erfolgreiche Erfahrungen im Verkauf von Figma-Handelsbibliotheken sammeln. Daher werde ich über das Erstellen von Entwurfsvorlagen aus Komponenten oder einem „Entwurfssystem“ sprechen.


Dupliziere iOS-Picker in Figmo

Sie benötigen einen Plan, bevor Sie beginnen

Selbstorganisation, Disziplin und die Rolle eines persönlichen Projektmanagers sind wichtige Komponenten, um den Job abzuschließen. Wenn Sie abends nach der Hauptarbeit im Büro versuchen, ein Designsystem zu erstellen, müssen Sie effektiv sein und viel zu tun haben. Und wir haben auch Familien, Kinder und Hausarbeiten. Solch ein aufgetretener Notfall kann leicht aus dem Gleichgewicht geraten, und Sie benötigen einen komfortablen Aktionsplan. Es wird drei Hauptphasen geben - dies ist die Erforschung, Erstellung und Förderung des Produkts. Jedes Element muss erweitert und eine separate Liste von Schritten für jede Stufe erstellt werden. Heute werden wir einen Forschungsplan erstellen.

Forschung

Werkzeug auswählen

Die Wahl eines Werkzeugs für das zukünftige Designsystem ist die Wahl des Marktes, auf dem Sie arbeiten werden. Ich bevorzuge Figma, vielleicht ist es zum Beispiel bequemer, mit XD zu arbeiten. Es ist wichtig, dass sich das Tool entwickelt und ein eigenes Publikum hat. Wenn jemand bereits auf diesem Markt verkauft, ist das in Ordnung. Verwenden Sie seine Ideen erneut, indem Sie einen Blick auf Ihr Produkt werfen. Wenn Sie der Erste sind, gibt es Grund zur Vorsicht.

Um das Invision Studio herum, das auf den Radargeräten fehlt, ist der Designmarkt beispielsweise nicht erkennbar, und um das seltene Axure herum existiert es nach und nach. Ja, es ist viel kleiner als der Sketch-Markt. Und dieser ist so groß, dass er voller Vorlagen und UI-Wale ist , sodass der durchschnittliche Preis pro Exemplar niedriger ist. Alle diese Faktoren müssen abgewogen werden, bevor eine Richtung gewählt wird. Aber gehen Sie zuerst zum beliebten Designtool, falls Sie dies noch nicht getan haben, und beginnen Sie ein wenig zu untersuchen, welche Produkte, die Ihren ähnlich sind, bereits existieren.

Wählen Sie ein Thema

Das Designproduktthema muss definiert werden, damit es die Spezifikation erhält. Mit diesem System können Sie beispielsweise Prototypen im Stil des Materialdesigns erstellen. Diese frische Figma-Bibliothek enthält abgerundete Formen und wird in einem anderen Stil hergestellt. Dies sind zwei Entwurfssysteme, aber jedes hat seinen eigenen Zweck. Darüber hinaus wartet der Markt auf noch mehr neue Themen.

Machen Sie sich bereit, all Ihre Erfahrungen auf das Thema anzuwenden, mit dem Sie sich am besten auskennen. So ist es einfacher, diejenigen Personen zu finden, bei denen Ihre Erfahrung zur Lösung ihrer Designprobleme beiträgt. Es bleibt klar, den zukünftigen Käufer darüber zu informieren, welche Sphäre Ihr Produkt ist und was mit seiner Hilfe gebaut werden kann. Dies können Grafiken, Administrator-Dashboards, Finanzvorlagen und dergleichen sein. Zu Beginn müssen Sie die Richtung bestimmen und diesen Kurs während der Entwicklung einhalten.

UI-Richtlinien

Benutzer kaufen ein Produktdesign, auch weil sie das Äußere mögen. Aber wenn sie den Stil vermissen, werden sie nicht kaufen. Daher ist es wichtig zu überwachen, wie sich das Design von Diensten, sozialen Netzwerken und Webanwendungen ändert - dies wird dazu beitragen, die eigentliche Benutzeroberfläche zu erstellen. Zum Beispiel kommen nach der Neugestaltung von Twitter abgerundete Schaltflächen wieder in Mode. Und Pinterest ist schon lange in diesem Stil. Es ist also sinnvoll, ein Beispiel von ihnen zu nehmen, dann könnte jemand denken: „Oh! Dieser Entwurf ist im Stil des neuen Twitter. Ich nehme es! " Dunkle Themen sind auch populär geworden, man kann es nicht ignorieren. Trends ändern sich schnell und Designprodukte werden veraltet, daher muss die Benutzeroberfläche in der heute beliebten Form erfolgen. Wenn Sie keine Ahnung von dem Stil haben - erkunden Sie.

Was Komponenten tun

Für ein vollständiges Entwurfssystem müssen Sie viele Abschnitte mit einfachen Komponenten zeichnen - Schaltflächen, Registerkarten, Dialoge, Kalender, Chips usw. Sie müssen für das gesamte Set sorgen, das Sie erstellen können.

Willst du ein Geheimnis preisgeben? Es gibt keine neuen Komponenten auf der Welt, nur das Äußere verändert sich. Jedes Dashboard besteht im Wesentlichen aus denselben Schaltflächen, Listen und Tabellen. Daher können Sie Ideen zu diesen Mobbin- , Webframe- oder Nicelydone-Ressourcen einholen und sich ein Mudboard mit den Komponenten zusammenstellen, die Sie für den Einstieg benötigen. Nach mehreren intensiven Studien haben Sie eine umfangreiche Liste mit allen Komponenten, die Sie zum Organisieren und Neuzeichnen in Ihrem Stil benötigen.

Wie viele Vorlagen und welche?

Je universeller Ihre Vorlagen sind, desto höher ist die Chance, einen potenziellen Käufer zu interessieren. Überlegen Sie, wie Sie ein flexibles Designsystem erstellen können, in dem es im Voraus viele vorgefertigte Lösungen gibt. Berücksichtigen Sie alle Optionen und Bedingungen, da Entwickler Fragen stellen können: Ändern sich die Schaltflächen beim Einschalten, wie die aktive Eingabe aussieht und dergleichen. Sie müssen also den Status der Komponenten im zukünftigen System berücksichtigen. Wählen Sie für Ihre frühere Version die Muster aus, die im Leben am häufigsten vorkommen: Tabellen , Navigation , Profil , Einstellungen usw. Aus diesen Grundteilen kann nahezu jede Anwendung zusammengesetzt werden. Wenn Sie daher viele beliebte Vorlagen zur Auswahl stellen, wird das Designprodukt funktionaler.

Verwenden Sie die verfügbaren Ressourcen

Der globale Designbereich ist übersät mit vielen Vorlagen, die gewinnbringend wiederverwendet werden können. Gewöhnen Sie sich an effektive Arbeit - warum sollten Sie etwas zeichnen, das bereits hundert Mal ausgeführt wurde und mit Zustimmung der Autoren kostenlos erhältlich ist? Zumindest sollten Sie eine Reihe guter Symbole finden , ohne die das Designsystem minderwertig ist. Oder suchen Sie nach denen, die kommerzielle Produkte herstellen dürfen. Stellen Sie sicher, dass die Lizenz den Weiterverkauf ermöglicht. Respektieren Sie die Autoren als fortan bist du der Autor selbst! Für eine gute Präsentation werden Gerätemodelle benötigt, die sich auf Figma-Ressourcen befinden . Suchen Sie nach interessanten kostenlosen Inhalten und überlegen Sie, wie Sie sie in Ihrem Produkt verwenden können.

Mach dir ein Moodboard

Entdecken Sie beliebte westliche Designressourcen und fügen Sie interessante Bildschirme in ein separates Projekt ein. Im Laufe der Zeit wird dies zu einem Moodboard, in dem Sie das eine oder andere Element ausspionieren oder überprüfen, ob Sie den gewählten Stil einhalten. Sie entscheiden sich beispielsweise für ein System für mobile Anwendungen und benötigen viele Ideen zu diesem Thema. Beginnen Sie mit Pinterest , es gibt eine intelligente Suche nach Bildern und die Möglichkeit, Mudboards nativ zu sammeln. Entwickeln Sie dann einen Plan zum Erstellen eines UI-Kits in einem bestimmten Stil. Gehen Sie tief in das Design von Finanzprodukten ein, wenn Sie ein Nischen-Design-System erstellen möchten. Entdecken Sie die besten Apps der Branche. Machen Sie sich aus den gesammelten Screenshots ein Moodboard und legen Sie los.


Material Design Mudboard Beispiel

Jetzt können Sie loslegen

Mit einem detaillierten Plan können Sie sicher mit der Arbeit beginnen, aber erschöpfen Sie sich nicht, wenn Sie vom Plan zurücktreten müssen. Dies ist Ihr Reiseführer, keine Reihe von Gesetzen.
Es ist wichtig, erst nach dem ersten Verkauf Perfektionist zu werden und Ihre Zeit effizient zu verbringen. Die Routine in diesem Prozess ist unvermeidlich. Ändern Sie daher die Reihenfolge in den Planelementen. Im nächsten Teil werden wir einen Plan für die Entwicklung eines Entwurfssystems in Abb. 1 erstellen. Wir werden von Worten zu Taten übergehen.

Wir haben herausgefunden, dass jeder Designer versuchen sollte, sein eigenes Designprodukt zu kreieren.
Sie pumpen oder verdienen und pumpen. Aber Sie müssen Ihre eigene Zeit investieren. Sind Sie bereit, Abende außerhalb des Büros für Ihr eigenes Projekt zu verbringen? Oder verbringen Sie Tage damit, zu erkennen, dass Sie für diese Arbeit nicht sofort bezahlt werden, wenn überhaupt?

Wenn Sie bereit sind, scrollen Sie durch Ihre Designerfahrung in Ihrem Kopf und überlegen Sie, wie Sie erfolgreich waren. Überlegen Sie, welche Produkte Sie mögen und welche Art von Designsystem zu dem Thema ich gerne machen würde. All dies wird uns bald nützlich sein, wenn wir mit dem zweiten Teil direkt über die Entwicklung eines Designsystems fortfahren.

Abonnieren Sie meinen Telegrammkanal "Nützlich für den Designer". Es werden Ankündigungen der folgenden Teile und viele andere nützliche Designressourcen angezeigt. Schreiben Sie in PM, wenn Sie ein UI / UX-Profi sind und in Abb. Ich werde alle verbleibenden Fragen beantworten, wenn Sie versuchen möchten, ein kommerzielles Designsystem zu erstellen.

Ich brauche neue Produkte und Sie erhalten 70% von jedem Verkauf. Ich baue ein starkes Team von UI-Herstellern auf, das auf setproduct.com Werbung und Platzierung für Ihr Designprodukt bereitstellt : Symbole, Illustrationen oder ein System für Figma. Lass uns zusammen verkaufen!