Optimiere Deinen Workflow: Der UI/UX Design Prozess in Figma

1. Einführung: Hallo, Mein Name ist Nicole und ich bin UX Designerin. Meine Arbeit konzentriert sich hauptsächlich auf Ihr I X Design, vom Skizzieren von Zehenfrau bis hin zu Prototyping-Ideen . Und das ist, was ich Ihnen beibringen möchte Heute benutze ich fig ma in meinem i X Design-Prozess weil dies das komplette Paket ist, das ich Drahtrahmen Design Prototyp, zusammenarbeiten und meine Arbeit alle im gleichen Werkzeug in dieser Klasse werden Sie lernen, wie Verwenden Sie Sigma in Ihrem eigenen Projekt, wie Sie konsistente skalierbare Designsysteme und den kompletten Designprozess aus dem Grund, warum Framing Toe übergeben Sie Ihren Prototyp Diese klassenlose richtet sich sowohl an Anfänger, die den idealen Designprozess lernen wollen und erfahrene Designer, die ihre Leistung optimieren möchten. Wir sehen uns in der Klasse. 2. Der Designprozess: Herzlichen Glückwunsch für die Anmeldung in diesem letzten. Bevor ich dir beibringe, wie man Sigma zuerst benutzt, möchte ich mit dir den idealen Designprozess teilen du als du bist X Designer folgen solltest? Viele Leute fragen mich, wie fängst du an? Welchen Designprozess verwenden Sie? Wie viele Schritte gibt es? Manche Leute denken, wir beginnen damit, einfach eine Designdatei zu öffnen und sofort mit dem Entwerfen zu beginnen. Das ist keine Idee. Große Designer haben eine Reihe von Etappen, die sie durchlaufen, um zu tun, was sie tun. Es gibt drei große Stufen für jeden Sie sind UX Design, Projekt, verstehen Plan und Design. Wir machen diesen Ansatz, wo wir verstehen und planen, bevor wir entwerfen, weil es viel Zeit spart . Es sollte diese Hin und Her Kommunikation, Missverständnisse und Probleme, die Sie im Projekt begegnen können, verwenden . Die erste Stufe verstehen ist über das Verständnis des Geschäfts hinter der Idee. Es geht darum, die vom Client benötigten Informationen zu extrahieren, wie zum Beispiel das Identifizieren von Problemen. Finden Sie die Lösung, setzen Sie Ihre Benutzerziele und definieren Sie Personas. Im zweiten Schritt geht es darum, die User Journey von Ihrem zu erstellen, nachdem es darum geht, es auf Papier zu skizzieren und mit Ihren Kunden zu teilen. Dann, nachdem sie nach oben geflogen und die Papier-Frau-Frames bestätigt wurde, geht es in der dritten Stufe um Frau, die Ihre Zielsetzung, Entwerfen und Prototyping und dies ist die Bühne, die wir in diesem Kurs abdecken werden. Ich werde Ihnen Schritt für Schritt zeigen, wie Sie interaktive Drahtrahmen, Glockenentwurfssysteme erstellen , Prototypen austauschen und mit Ihrem Team zusammenarbeiten können. Im nächsten Video werde ich darüber sprechen, warum Sie Sigma als Ihr Design-Tool wählen sollten. 3. Warum Figma: Warum sollten Sie Sigma, von dem Sie wahrscheinlich gehört haben, für einen Shop-Illustrator oder im Design verwenden? Diese drei Werkzeuge sind nicht für Ihr I X Design gemacht, und ich empfehle nicht, keines von ihnen zu verwenden. Photo Shop ist für die Fotobearbeitung gemacht. Illustrator wird gemacht, um Illustrationen zu zeichnen, und Indie-Linie ist für das Magazin-Design gemacht. Der einzige Grund, warum wir sie vor Jahren benutzt haben, war, dass dies die einzigen Optionen waren, die wir hatten. Aber jetzt haben wir viele Werkzeuge, die speziell für Ihr I X Design gemacht wurden. Im Jahr 2018 wären die besten Design-Tools Fig, MMA-Skizze, Adobe X'd und ein paar andere. Ich denke, Stigma ist die beste dieser Optionen. Warum? Hier sind einige Hauptgründe, warum First Sigma kostenlos für Einzelpersonen ist, im Gegensatz zu Sketch, die $99 für Adobe X'd ist, die all dies für einen Monat stehen. Es hat bezahlte Abonnements für größere Teams, aber es ist kostenlos, wenn Sie eine Einzelperson sind. auch Sigma istauchwebbasiert. Es funktioniert im Browser. Dies bedeutet, dass es auf jeder Plattform funktioniert. Sie würden denken, dass es, da es Web-basiert ist, viele Fehler haben würde. Aber überraschenderweise benutze ich es seit dem letzten Jahr und habe kaum auf Naturprobleme in Bezug auf Ihr I-Design gestoßen . Es ist sehr intuitiv zu bedienen. beispielsweise, Abhängigkeiten ermöglichen es Ihnenbeispielsweise,Designs zu adaptieren, wenn sich die Bildschirmgröße ändert, und Komponenten ermöglichen es Ihnen, Elemente in Ihren Entwürfen wiederzuverwenden. werden wir später noch mehr sehen. Vignal verfügt auch über Prototyping- und Collaboration-Funktionen, und Sie benötigen keine separaten Prototyping-Tools wie Marmor oder Vorstellungen. Sigma arbeitet auch in Echtzeit mit Designern zusammen. Sie und andere Designer in Ihrem Team können gleichzeitig an derselben Datei arbeiten. Sie können auch Konstruktionssysteme mit verknüpften erstellen. Sie sind Komponenten, die das gesamte Team verwenden kann. Und schließlich können Sie einfach an Entwickler weitergeben, die Zugriff auf Mantelstile und Exportfunktionen haben. Die einzigen Nachteile von Stigma ist, dass es noch nicht offline funktioniert, aber Sie können es umgehen, indem Sie die Datei öffnen, bevor Sie losgehen. So, wie Sie sehen können, Abbildung ist das komplette Paket, mit dem Sie auf den gesamten Entwurfsprozess arbeiten können . In der nächsten Reihe von Lektionen werde ich mit einer Einführung in Fig Mama beginnen, und dann zeigen wir Ihnen den Schritt für Schritt Euronext Designprozess mit Signal 4. Einführung in Figma: in diesem Video werde ich Ihnen eine Einsteiger-freundliche Einführung in Fig MMA geben Um mit figment auf Ihrem Gerät zu beginnen . Alles, was Sie tun müssen, ist sich einfach mit Ihrer E-Mail und Ihrem Passwort anzumelden und schon können Sie loslegen. Sie können Fig Ma und den Browser als normale er l öffnen oder sogar den Desktop verwenden. Wir haben die letzte Schaltfläche hier, um ein neues Foul und den Import-Button zu erstellen, wenn Sie andere Dateien wie Skizzendateien oder Fig Dateien importieren möchten . Jetzt bin ich im Zugluft Wasser. Hier werden die von Ihnen erstellten Dateien standardmäßig gespeichert, Sie können aber auch Teams haben und Personen dazu einladen. Lassen Sie uns eine neue Farm erstellen. Dies ist die Symbolleiste hier, in der Sie die Werkzeuge finden, die Sie zum Erstellen von Objekten auf der linken Seite benötigen . Es gibt das Ebenenfenster in der rechten Ecke. Wir haben das Eigenschaftenfenster. Beginnen wir mit dem Erstellen eines Rahmens, das ist der Bildschirm, den wir entwerfen werden. Wenn ich auf das Rahmenwerkzeug klicke, kann ich eine der vorschlagen, dass Voreinstellungen hier auf der rechten Seite auswählen. Wählen wir iPhone acht und lassen Sie uns den Frame toe home umbenennen, da dies der Home-Bildschirm von meinem Arm sein wird . Jetzt lass uns den Natwar erschaffen. Ich wähle das Rechteck-Werkzeug, während ich zeichne Abb. Ich helfe mir, indem ich mein Objekt an den Rändern des Rahmens schnappte. Ich mache es weiß und füge ihm den subtilen Schatten hinzu. Als nächstes werde ich den Titel des Bildschirms hinzufügen. Das ist das Heim-Miststück. Ich werde nur Text hinzufügen und es zu Hause nennen. Lassen Sie uns die Schriftgröße 16 Pixel machen. Zentrieren Sie den Text, richten Sie die Lehrbücher in der Mitte des Rahmens aus und zentrieren Sie sich vertikal mithilfe der intelligenten Hilfslinien. Lassen Sie uns die Dinge organisieren. Diese passen gut zusammen in einer Gruppe. Wählen wir also Um und gruppieren Sie die Auswahl und benennen Sie sie in naff bar um. Jetzt lassen Sie uns hier ein Rechteck erstellen. Wenn ich aushalte und den Mauszeiger auf den Rahmen schiebe, kann ich den Abstand zwischen dem Rechteck und dem Rahmen sehen. Es sieht so aus, als wäre es nicht zentriert, also wählen wir hier einen Linienmittelpunkt. Das wird ein Autodesign sein, also werde ich es weiß auf dem Schatten machen, eine Karte hat normalerweise einen Grenzradius, also lasst uns das von hier aus haben. Vier Pixel möchte ich nun ein Bild zum Rechteck hinzufügen. Der beste Weg, dies zu tun, ist, seinen Willen zu Bild zu ändern und das Bild aus dem Finder zu wählen . Jetzt werde ich den Titel der Karte hier darunter hinzufügen. Nun lassen Sie es uns duplizieren und einen weiteren, kleineren Untertitel hinzufügen . Ich, wie dieser, habe eine kleinere Größe und auch ein leichteres Grau. Das ist der Name der Untertitel von der Karte. Jetzt gehen diese Objekte hier gut zusammen, also werde ich sie nur auswählen und den Befehl Ito drücken. Gruppieren Sie sie jetzt sagen, Ich möchte einen anderen Bildschirm erstellen und sagen wir, ich möchte die Hintergrundfarbe des NAB ändern Unsere Ich müsste die Farbe auf jedem Bildschirm ändern und sich vorstellen Sie haben 50 oder 100 Bildschirme. Sie würden Stunden damit verbringen, an einer dummen Änderung zu arbeiten, Also, um diese Zeiten verschwendet zu vermeiden, verwenden wir Komponenten. Hier wird es wirklich interessant. Eine Komponente ist ein Objekt, das mehrfach wiederverwendet werden kann. Diese Nummer wird mehrmals in meinem up verwendet werden, also werde ich es auswählen und auf die Komponente klicken, die ich oben kann. Dadurch wurde es in eine Komponente konvertiert. Es hat so schön kann ich in der Ebenen-Panel. Lassen Sie uns das gleiche für die Karte tun, da es auch verwendet werden wird, wie es ist, Ich gehe nach Dublin, Kate den Rahmen wieder Jetzt, wo ich Komponenten verwendet. Nun ist dieser Naff Bar eine Instanz dieses Netzwerkgegners. Die erste 1, die wir erstellt haben, ist die ursprüngliche, während diese eine komplizierte ist, die eine Instanz von ihr ist. Jetzt. Jede Änderung, die an der ursprünglichen vorgenommen wird, wird für ihre Instanz aktualisiert. , was mit der Instanz passiert, wird jedoch Alles, was mit der Instanz passiert, wird jedochnicht auf dem Original aktualisiert, da es sich nur um eine Instanz davon handelt. Jetzt wird es hier noch interessanter. Wir können verschachtelte Komponenten herstellen. Zum Beispiel. Ich möchte eine Now-Leiste erstellen, die einen Zurück-Knopf hat. Ich werde eine Tasche erstellen, aber hier drin und dann die Instanz und den Zurück-Button auswählen und eine andere Komponente daraus erstellen . Dieses Mal werde ich es jetzt weit Schrägstrich nennen. Damals werde ich den ursprünglichen Schrägstrich normal nennen. Lassen Sie uns Thema acht dieser Rahmen wieder einen weiteren Detailbildschirm haben jetzt wegen des hinzugefügten Schrägstrichs kann ich wählen, welche Art von Naff es aus dem Komponentenmenü ausgeschlossen. Hier. Lassen Sie uns über Einschränkungen sprechen. Constraints ist eine Möglichkeit, Ihre Designs jetzt an die Rahmengröße anzupassen. Wenn ich diesen Rahmen größer mache, in dem er sich wie erwartet verhält, passt er sich nicht an die Rahmengröße an. Aber wir können das beheben und es irgendwie auf die Bildschirmgröße reagieren. Also lassen Sie uns dieses Nah Bars horizontale Verhalten links und rechts anstelle von links machen und das gleiche für die Karte tun . Der Stream reagiert jetzt mit der Framegröße. Lassen Sie uns die anderen ansprechen, auf Wir können auch senkrecht Bedenken setzen. Sagen wir mal, ich möchte diese Karte jetzt für die Detailstraße vergrößern. Es sieht so aus, aber ich möchte, dass der Titel und die Untertitelspitze immer am unteren Rand bleiben, wenn ich es größer mache. Da sich die Titel innerhalb der Komponente befinden, gehe ich zur Originalkomponente und ändere ihr Verhalten von dort. Also werde ich zu diesem Titel sagen. Stellen Sie das vertikale Verhalten unten auf Lee und das gleiche für den Untertitel. , Wenn ich die Karte länger mache,verhält sie sich so, wie ich es will. Und natürlich gilt das für die andere Instanz der Komponente, ohne sie wiederholen zu müssen. Es ist sehr wichtig zu beachten, dass Draht-Design Sie Ihr Design in 100% wenigen einmal in einer Vorschau anzeigen sollten , nur Befehl Null drücken, und es zoomt auf 100%. Dies ist, um die Schriftgrößen in der realen Größe zu sehen, bevor ich Ihnen zeige, wie Sie diese Bildschirme interaktiv machen . Falls Sie in ein Bild exportieren müssen, wählen Sie einfach den Freund aus, den Sie exportieren möchten und gehen Sie zum Export rechts unten, Und hier kann er mehrere Größen und mehrere Formate gleichzeitig auswählen. Denken Sie daran, dass Sie in FEMA nichts speichern müssen, da es auch Ihre Arbeit ständig spart . Jetzt reden wir über Prototyping. Bisher waren wir in der Designwelt. Jetzt lasst uns nur Prototyp-Modus. Wenn Sie den Mauszeiger auf Ebenen bewegen, kreist diese Kabinen kurz, um eine Verknüpfung zwischen den Bildschirmen zu erstellen. Wir weisen nur den Kreis an, zu dem Sie ihn verknüpfen möchten, und da dies die ursprüngliche Komponente ist, wendet es den Singling Toe alle seine Instanzen an. Also muss ich das Ding in die zweite Wache wechseln. Stattdessen kann ich, wenn ich außerhalb von Bildschirmen klicke, alle erstellten Links sehen. Lassen Sie uns die, die standardmäßig aus dem ursprünglichen Fach erstellt wurden, loswerden. Ich ziehe einfach Drag & Drop, um den Link zu entfernen. Ich möchte auch, dass dieser Zurück-Button zurück zur Homepage verlinkt wird. Ich kann dies einmal tun, und es wird sofort auf andere Instanzen angewendet. Dieser blaue Pfeil bedeutet, dass dies der erste Bildschirm des Prototyps ist. Sie können das durch einfaches Ziehen und Platzieren auf dem Bildschirm, den Sie wollen. Lasst uns unseren Prototyp spielen, indem wir auf dieses Stück schlagen, Aiken. Jetzt sehen wir den interaktiven Prototyp. Jetzt funktionieren alle Links, die wir erstellt haben, wie wir wollen. Beachten Sie, dass, wenn ich irgendwo klicke, das kein Link ist. Es wird den blauen Blitz geben, um mir zu sagen, wo die Längenobjekte sind. Sie und die Zuschauer können kommentieren, indem Sie den Bubel Aiken verwenden und direkt auf dem Prototyp Befehl . nun Wenn SienunIhren Prototyp mit Ihren Kunden oder Mitarbeitern teilen möchten, klicken Sie einfach auf den Share-Prototyp und kopieren Sie den Link. Wenn Sie zurück zum Foul gehen, können Sie auch die gemeinsame Stufe im Kampf selbst sehen, was sehr praktisch ist. Wenn Sie Ihre Dateien für Entwickler freigeben, können sie den Code hinter Ihren Entwürfen sehen. Wenn Sie hier den Code-Modus wählen, können Sie die Sprachen CSS, die ich frage oder Android wählen. Wählen Sie also konsequent ein Objekt aus und sehen Sie hier einige Entwurfseigenschaften. Sie können auch das Mantelformat ändern. Jetzt wird diese Court Funktion nicht verwendet, um einfach den gesamten Code Ihres Designs zu kopieren. Es ist sinnvoller für fortschrittliche Designdetails wie Schatten oder Ausstrahlung. Entwickler können auch Ebenen, Objekte oder Rahmen auf die gleiche Weise exportieren wie wir es getan haben. Das war also ein Überblick über die Futures von Sigma. Ich empfehle, zu spielen und sich daran zu gewöhnen, es zu verwenden, bevor Sie anfangen, Ihre eigenen zu erstellen . In der nächsten Lektion beginnen wir mit der Arbeit an einem echten Projekt. Der erste Schritt wird sein, warum Framing 5. Schritt 1: Aufbau deiner Drahtrahmen: in diesem Video werde ich mit dem Bau der Drahtrahmen beginnen. Drahtrahmen sind das Skelett aus Europa. Es sollte die Layout-Funktionalität und Ihre Ex enthalten, aber es sollte nicht das Design oder die Farben zeigen, dass in der gesamten Klasse. Ich werde die Hauptbenutzerreise von Airbnb bauen. Ich mag Airbnb als Beispiel zu verwenden, weil das Design gut durchdacht ist und es ein einfaches und konsistentes Designsystem hat . Y Freund sollte immer groß sein, ohne Farben oder Designs. Hören Sie auf, um sich auf das konzentrieren zu können, was zählt. Folgen Sie mir und bauen Sie Ihre eigene Website. Wenn Sie keine Website-Idee haben, können Sie Airbnb, Twitter oder jede andere Operation, die Sie verwenden, entwerfen , bevor Sie zu digitalen Ehefrau-Frames wechseln. Sie sollten zuerst Ihre Frau Rahmen auf Papier skizzieren. Also habe ich zuvor die Ehefraurahmen auf Papier skizziert, und so sehen sie aus wie die Homepage. Suchergebnisse mit Details, Zusammenfassung und Zahlung. Jetzt in Fig MMA, werden wir fast den ganzen Weg Frames bauen, mit Komponenten. Sie könnten das Gefühl haben, dass es am Anfang etwas mehr Zeit in Anspruch nehmen wird, aber es wird Ihnen Stunden später sparen, an. Das erste, was wir tun werden, ist hier eine Eure Augenbibliothek zu erstellen. Ich werde mit der Textkomponente beginnen, also werde ich nur eine Textebene erstellen und in eine Komponente konvertiert. Dies wird jetzt die normale Größe sein. sind die Design- und Fondsstars egal. Ich werde es so behalten. Lassen Sie uns auch die anderen Textilien machen. Stellen Sie sicher, dass der Name von der Ebene der gleiche Text bleibt und der Name der Komponente immer Text Schrägstrich und der Typ des Sterns H 36 Pixel sein sollte . H zwei wird 28. und jeder drei wird 20 sein und der kleine Text wäre 14. Dieser Raum wird für andere Komponenten sein, die wir in der ganzen Frau alles schaffen. Also lassen Sie uns die Hausfront erstellen. Bevor ich mit dem Erstellen von Objekten beginne, werde ich das Raster erstellen, das ich einbauen werde. Nehmen wir an, ich möchte, dass meine Inhalte innerhalb einer 900 Pixel gegriffen werden. Der einfachste Weg ist, einfach zu erstellen und 900 Pixel Rechteck. Dann müssen wir die Lineale zeigen, indem wir Shift schlagen. Unsere zieht dann Wachen vom Lineal an und schnappte die Wachen auf das Rechteck. Ich werde den strengen Winkel löschen. Jetzt machen wir die NASA-Bar. Verwenden wir nun den Text, den wir dort erstellt haben, und kopieren und fügen Sie ihn hier ein. Um das Menü zu erstellen, Lings werden ein Host Trips, Nachrichten und ein Profil. Aiken. Ich werde diese Handbücher gruppieren, nur um die Dinge organisiert zu halten. Ich brauche auch das lokale hier, also wird diese jetzt Bar definitiv auf den Bildschirmen verwendet werden, also werde ich es in eine Aspirin-Komponente konvertieren. Lass uns ein bisschen schneller gehen. Wir haben hier einen H-Titel. Ich brauche den Text Zehe wässrige Größe mit dem Inhalt im Inneren. Lassen Sie uns hier eine große Suchleiste erstellen. Ein Platzhalter. Versuchen Sie es in Los Angeles. Dann werde ich hier einen Button erstellen. Lassen Sie uns eine dunklere machen und in eine Komponente umgewandelt. Jetzt, da ich das Gesamtbild habe, verschiebe ich es in den Sternführer, kopiere dann eine Instanz davon und bearbeite dann den Text, um zu suchen, was als nächstes kommt. Fügen wir einen Abschnitt mit dem Titel hier hinzu und dann wird dieser Titel wahrscheinlich in H zwei sein. Lassen Sie uns die Listing-Karte machen. Dies wird das Bild sein, und hier haben wir den Typ aus Auflistung der gesamten Wohnung. Dies wird ein kleiner Text sein. Wir haben hier den Titel der Liste, und ich werde es zur Naturstraße machen. Mir ist aufgefallen, dass ich möchte, dass alle meine Überschriften fett sind. Also lassen Sie uns einfach bearbeiten, dass die Bibliothek. Jetzt mache ich noch einen kleinen Text, um den Preis darin einzugeben. Das ist die Liste. Jetzt werde ich es zu einer Komponente machen und einfach dupliziert, um zwei weitere daneben zu erstellen. Lassen Sie uns die anderen beiden füllen, um es so real wie möglich zu machen. Alles klar, der nächste Abschnitt wird Erfahrungen sein. Es ist sehr ähnlich wie Häuser. Also werde ich einfach all diesen Abschnitt replizieren und einfach mit einem neuen Inhalt füllen. Wir sind fast fertig von diesem Bildschirm. Wir haben immer noch die Fußzeile, also lassen Sie uns ein großes Rechteck erstellen und einige Links darin hinzufügen. Die jeder und e Abschnitt wird über Presse und Hilfe haben und das ist der Titel, Also lasst uns es Tresor machen. Ich mache das als Gruppe und nenne es Footer Abschnitt. Nun lassen Sie uns dies duplizieren, um den gleichen, aber anderen Text zu haben. Dann machen wir diese Fußzeile als Komponente. So getan haben wir nur Frau eingerahmt die Homepage. Lasst uns noch einen Stream machen. Ich werde den Bildschirm duplizieren, da wir viele ähnliche Komponenten daraus verwenden werden. Okay, lassen Sie uns alles außer den Auflistungen und dieser Seite loswerden. Wir werden den Inhalt voll mit statt innerhalb des Rasters platzieren. Ich werde die Auflistungen für die Karte etwas kleiner machen. Ich werde nur ein großes Rechteck in diesem Bildschirm erstellen, die Karte entdeckt die Höhe des Streams und es gibt keine Fußzeile. Die Höhe meines Bildschirms beträgt 900 Pixel, und der Roman ist 60 Pixel. Ich kann einfach 900 minus 17 eingeben und es wird die Größe für mich berechnen. Lassen Sie uns diese kostenlosen Angebote duplizieren, um diesen Ort zu füllen. Wir haben noch die Suchfilter hier, um Zeit zu sparen. Lassen Sie uns die Schaltfläche hier duplizieren, da sie ein bisschen ähnlich aussehen wird. Ich werde alles kleiner machen, als es von seiner Komponente zu lösen. Lassen Sie uns das zum Datumsfilter machen. Und wenn ich fertig bin, kann ich es Komponente machen und es eine kleine Zeile nennen. Lassen Sie uns zwei weitere Filter hinzufügen, Gäste und Tank halten. Das Letzte, was ich tun werde, ist in der kleinen Suchleiste. Zuerst werde ich die Suchleistenkomponente machen. Dann werde ich die große Suche nach Erkennung duplizieren und sie stylen, muss sie kleiner sein und einen Rahmen mit einem kleineren Text haben. Jetzt machen wir dies zu einer weiteren Komponente, und wir nennen es Suchleiste Klein. Lassen Sie uns die Höhe des Rahmens auf die gleiche Höhe von meinem Bildschirm machen, was 900 Fixes und getan ist. Lasst uns hier anhalten. Ich werde weitermachen. Warum die anderen Bildschirme einrahmen und die nächste Lektion werden wir sie interaktiv machen. 6. Schritt 2: Making deiner wireframes: Ich habe schon einen Freund getragen. Die anderen Bildschirme aus ihrem Baby Listing Details, die Zusammenfassung und die Zahlung Straßen. Jetzt lasst uns diese Koreaner interaktiv machen. Zuerst möchten wir, dass der Suchknopf uns zu den Suchergebnissen führt. Dann wollen wir die Aufzählung Zehe. Bringen Sie uns immer zu den Angebotsdetails. Wir können es von der ursprünglichen Komponente aus tun, und es gilt für alle seine Instanzen. Dann führt uns der Buch-Button zu den Angebotsdetails. Der Continue-Button bringt uns zur Bestätigung, und sie und der bestätigende Tag bringt uns zurück zum ganzen Strand. Und schließlich wollen wir die lokale Zehe. Bringen Sie uns immer auf die Homepage. Lasst uns den Prototyp spielen. Stellen Sie immer sicher, dass dieser Tag des Prototyps 100% ist, um die realen Größen zu sehen. Nun, nachdem Sie mit den interaktiven Ehe-Frames fertig sind, können Sie den Prototyp mit Ihrem Team oder Kunden teilen und Feedback über die Layout-Interaktion und insgesamt erhalten , tun Sie X. Wie Sie sehen können, Dieser Schritt hat Design überhaupt nicht enthalten. In der nächsten Lektion werden wir die Komponenten entwerfen, um diese Ehefrau-Frames in einen Konstruktionsprototyp zu konvertieren 7. Schritt 3: Gestaltung deines Designsystems: Bisher haben wir die Bildschirme befreundet und interaktiv gemacht. Und während wir das tun, bauen wir eine Jahr-Bibliothek von Komponenten. Jetzt sind wir bereit, über Design nachzudenken. Wir können jetzt mit diesen Komponenten beginnen, die wir erstellt haben. Ich habe alle Originalkomponenten in der U I-Bibliothek platziert, so dass es einfacher zu entwerfen ist. Fangen wir mit Farbe an. Ich fange hier mit der primären Markenfarbe an. Ich habe die urbanen tieferen Farben bereits kopiert, also werde ich sie anheften. Dann werde ich diese Farbe duplizieren, um die Akzentfarbe zu erstellen. Als nächstes werde ich die andere Gnade wählen, die ich für das Interface-Design verwenden werde. Fangen wir mit dem dunkelsten an. Ich fange mit dem Standard Dark Grey an. Dann werde ich damit herumspielen, um es ein bisschen blau zu machen. Jetzt, da ich meine basierte dunklere Farbe, Ich kann andere Schattierungen aus dieser großen leicht die gleiche Farbe nehmen, indem Sie die Farbwähler Kontroverse. Und jetzt können wir einen Farbton dieser großen wählen, indem wir das H S B-Format kämpfen und die V machen ,die , die Helligkeit heller ist, wenn Sie sehen, dass diese Gnade sich als zwei blau herausstellt machen Sie einfach die Sättigung. Nur s ein wenig weniger Versuchen Sie, rund fünf verschiedene Graustufen mit etwa 20% Unterschied in der Helligkeit zu machen . Dies sind die verschiedenen Farbtöne, die im Design verwendet werden. Alles klar, das ist meine Farbpalette. jetzt die Fronten machen, Lasst unsjetzt die Fronten machen,weil wir Textilien als Befürworter erschaffen haben. Jetzt können wir sie aus der Bibliothek ändern und es wird auf allen Bildschirmen angewendet werden. Ich möchte dieses Telefon Zehe leisten sehr ähnlich zu dem einen Bereich ändern und verwendet werden. Wählen Sie Avenir. Ich werde alle Überschriften schwer machen und den Rest römisch. Jetzt hat unser ganzer Text das gleiche Front-Zeug angewendet. Um diese Farben schnell nutzen zu können, können wir sie zu unseren Farbvoreinstellungen hinzufügen. Hier können Sie entweder eine neue Farbe erstellen, oder wir können vorhandene Farben nicht ersetzen. Jetzt kann es den gesamten Text auswählen und ihn zum Standard-Dark Recorder machen. Ich möchte auch, dass die Primär- und Akzentfarben in meinen Voreinstellungen enthalten sind. Also werde ich nur die alten Farben hier löschen. Schnell, dann, sind die beiden neuen Farben. Jetzt lasst uns die Flaschen machen. Ich will, dass meine Knöpfe immer bevölkert sind. Beide Schaltflächen sollten immer einen Rahmenradius haben und das normale Latein sollte die Primärfarbe haben . Der Umriss. Milton sollte eine Grenze und eine Akzentfarbe haben. Okay, die Eingabe hat einen kleinen Rahmenradius und einen grauen Umriss. Das Etikettendesign wird einen hellgrauen Umriss sowie an der Grenze Tollwut haben. Lassen Sie uns das jetzt tun für Das Netzwerk hat eine Frau durch die falsche Farbe und eine große Grenze, aber nur auf dem Boden. Wir können das tun, indem wir einen Schlagschatten mit edler und ein Pixel auf der Warum diese Weise, es gilt nur auf der Unterseite. Und ich muss die Airbnb platzieren, die ich kann. Also werde ich einfach das Gefühl des Regisseurs ändern. Gehe zum Bild. Ich möchte, dass mein Profilbild den strengen Winkel ausfüllt. Also lasst uns das auch tun. Das ist also die Nummer für das Design für die Listing-Karte. Wir müssen zuerst den Grenzradius bleiben Pixel. Dann werde ich den Listentyp Großbuchstaben machen, ein bisschen mehr Buchstabenabstand haben und es noch kleiner machen. Der Preis. Ich werde es hellere graue Farbe machen. Und jetzt lasst uns die Suchleisten machen. Der große hat eine weiße Hintergrundfarbe und einen hellgrauen Rahmen, einen Randradius und einen Schlagschatten. Ich füge das Mikro hier hinzu. Es gibt viele Möglichkeiten, Elemente zu Ihrem Design hinzuzufügen. Sie können entweder Aiken Telefone wie Front auch verwenden oder Sie könnten einfach greifen in. Svg Aiken. Ich gehe das rauf. Ich konnte, dass ich es zuvor herunterladen, machen Sie es kleiner in der Suchkomponente platziert und machen es großartig. Die kleinere Suchleiste hat das gleiche Design, nur kleiner. Ich kann einfach mit der rechten Maustaste auf den großen Suchleisten-Kopierstil klicken und ihn auf der kleinen Suchleiste basieren . Dann werde ich den Schatten etwas subtiler machen. Kopieren Sie dann die Suche, die ich kann und machen Sie sie für die Fußzeile kleiner. Ich werde das Feld einfach in Weiß umstellen und dann im oberen Viertel und sie dann verlieren . Das war's also. Wir sind fertig mit dem Entwerfen, argumentieren ich Bibliothek. Wir haben jetzt ein Designsystem, das wir in unserem gesamten Produkt verwenden können. Mal sehen, wie unsere Bildschirme jetzt aussehen, nur durch die Gestaltung der Komponenten in der U I-Bibliothek mit Bildschirmen sind fast abgeschlossen. Wie genial ist, dass es nur ein paar kleinere Änderungen gibt. Ich werde das tun. Dann werden wir in der nächsten Lektion den Prototyp fertigstellen und die Bildschirme reaktionsschnell machen. 8. Schritt 4: Fertigstellung deines Prototypen: Also habe ich die letzten Situationen in den Streams gemacht, die wir entworfen haben. Ich habe die Bilder, die Aikens,hinzugefügt die Aikens, und alle Bildschirme gestartet. Lassen Sie uns unser Design live im Prototyp sehen. Das sieht eher wie Airbnb aus als urbanes D sieht aus wie jeder in der Tat. Das letzte, was wir tun müssen, ist, unser Design etwas reaktionsfähiger zu machen, bevor wir das Projekt beenden . Dies wird Entwicklern dabei helfen, unsere Entwürfe im Hinblick auf Reaktionsfähigkeit zu implementieren. Es erlaubt uns, unsere Ideen zu übersetzen und ihnen zu zeigen, was passiert, wenn der Bildschirm größer wird . Im Moment reagiert unser Design nicht. Also lasst uns darüber nachdenken, wie wir aussehen wollten. Also wollen wir, dass die Komponenten, die voll mit Zehe haben links und getrocknet Einschränkungen und die anderen Dinge in der Mitte mit kleinsten bleiben. Also lasst uns das machen. Die Nie und die Floater-Einschränkung wäre also links und rechts. Und lassen Sie uns das für alle seine Komponenten tun, dann ist der einfachste Weg, um alle Inhalte in der Mitte zu bleiben, einfach gruppieren sie alle mit Comanche. Und lassen Sie uns das für alle das Zentrum zuversichtlich tun, und ich werde ihnen allen ein Constraint-Center für diesen Bildschirm geben, aber ich möchte, dass das Unternehmen mit der Bildschirmgröße skaliert. Mal sehen, wie alles in diesem Bildschirm ausgegangen ist. Die volle mit Natwar in Footer, bleiben Sie auf der linken und rechten Seite, während der Kontinent bleibt in der Mitte. In diesem Bildschirm skaliert alles, wenn ich verkleinere und vergrößerte Bildschirm mit, und dieser Bildschirm ähnelt der Homepage, so dass meine Firma immer noch in der Mitte ist. Okay, das ist für leichte Reaktionsfähigkeit zwischen Breakpoints. Nun, wenn es mehr Layoutunterschiede zwischen den Bildschirmgrößen gibt , dann müssen Sie mehrere Größen entwerfen. Zum Beispiel der Homepage möchte ich aufder Homepagedefinitiv kein dreispaltiges Raster auf Tablets, Größen und mobilen Größen behalten . Also lasst uns eine mobile Version von der ganzen Hündin machen. Ich werde damit beginnen, den Homepage-Frame zu duplizieren, und ich werde diesen Inhalt verhungern, indem ich Kommandoschiff G trage und ihn ein wenig nach links schiebe . Und jetzt werde ich hier die Karten untereinander legen. Wir können die gleichen Komponenten verwenden, die wir erstellt haben und einige Ebenen auf mobilen ausblenden, zum Beispiel, hier im Netzwerk, Ich möchte die Nummer anzeigen, aber ich möchte nicht, dass die Menü-Links darin, so dass ich sie einfach verstecken könnte. Jetzt, da ich den größten Teil meiner Inhalte gemacht habe. Wenn es in der mobilen Ansicht, kann ich die Rahmengröße ändern. Bevor ich das mache. Ich muss das Einschränkungsverhalten von allen meinen Inhalten nach links ändern, damit sie links bleiben wenn ich die Framegröße änderte. Jetzt kann ich es ändern Zehe iPhone es. Dann lasse ich den Rahmen ihr für die Fußzeile sagen. Das Design wird sich viel ändern, also muss ich es von seiner Instanz lösen, um seine Position zu ändern. Als Nächstes werde ich die einfach untereinander bewegen. Jeder Titel hier sollte auf Mobile auf jeden Fall kleiner sein. Ich möchte nicht, dass die Suchschaltfläche mehr angezeigt wird, damit ich sie einfach aus dem Ebenenfenster ausblenden kann. Das war's also. Mal sehen, wie es sich herausstellte. Wie Sie sehen können, haben wir diese Website mit 99% Komponenten entwickelt. Dies ist der Schlüssel, um ein großartiger, effizienter Designer zu werden . Denken Sie daran, bevor Sie Ihr Projekt abschließen und für Entwickler handhaben, stellen Sie sicher, dass Ihre Layer und Komponenten gut benannt sind. Versuchen Sie, alle Layer zu benennen, um sicherzustellen, dass Ihre Zusammenarbeit reibungslos mit Ihren Kollegen abläuft. Danach teilen Sie einfach den Prototyp mit Entwicklern, so dass sie mit der Inspektion des Designs beginnen und Bilder exportieren können . Ich habe diese Figurdatei der Beschreibung der Klasse hier hinzugefügt, Frito dupliziert und wiederverwendet sie in irgendeiner Weise, die Sie möchten. Wenn Sie sich selbst herausfordern möchten, können Sie weitere Komponenten zur Augenbibliothek hinzufügen und die anderen Skins von ihrem Baby weiter gestalten . 9. Letzte Gedanken: Ich hoffe, Sie genießen das letzte Mal. Sie wissen jetzt, wie Sie mit dem idealen Designprozess entwerfen. Mit den leistungsstarken Funktionen von Figments haben Sie gelernt, interaktive Drahtrahmen zu bauen, Designsysteme zu bauen, mit dem Team zusammenzuarbeiten und Entwicklern zu übergeben. Sie können diesen Prozess jetzt in Ihrer täglichen Arbeit verwenden, egal ob Sie fühlen, beantworten oder in ihm arbeiten, bevor Sie gehen. Vergessen Sie nicht, eine Rezension abzugeben und diesen Kurs mit Ihrem Netzwerk zu teilen, damit die Leute davon erfahren können . Übrigens habe ich einen kompletten Kurs, der absoluten Anfängern lehrt, wie Sie Ihre I X Designer werden. Schauen Sie sich den Link in der Beschreibung an. Achten Sie darauf, mir auf Twitter zu folgen und auf meinem mittleren Block, wo ich über Design blockiere. Ich wünsche Ihnen viel Glück in Ihrer Designkarriere. Wenn Sie weitere Bedenken haben, können Sie Ihre Fragen per