UI / UX-Design : Erste Schritte mit Figma

1. Kurs-Vorschau: Willkommen zum Einführungskurs in UI UX Design. In diesem Kurs lernen wir einige der Grundlagen des UI-UX-Designs mithilfe der kostenlosen Plattform Figma kennen, die gemeinsam Produkte entwickelt. Mein Name ist Amy, ich bin deine Ausbilderin für diesen Kurs. Ich bin seit über drei Jahren Designer und arbeite an mehreren Projekten sowohl für arbeite an mehreren Projekten mobile als auch für Webanwendungen um herauszufinden, ob Sie Design lernen möchten. Und dies ist das erste Mal seit einiger Zeit, dass Sie oder Ihr Strahldesign entwerfen . Und jetzt lernst du Figma. Dieser Kurs ist genau für dich. In diesem Kurs lernen wir wichtige UI- und UX-Designkonzepte kennen. Und warum Figma ein so leistungsstarkes Tool ist und wie Sie bei Ihren Designprojekten helfen können. Und gehen wir zum ersten Teil des Kurses. 2. UI und UX Design: Daher ist es zunächst wichtig, diese beiden Begriffe zu definieren UI-Design oder beim Design der Benutzeroberfläche geht es um das ästhetische Erlebnis. Um dies ein konkretes Beispiel zu geben, denken Sie an die mobile App , die Sie täglich verwenden. Und UX-Design oder User Experience Design Entscheidung geholfen, welche Funktionen, welche Elemente in diesem Produkt und wie sie funktionieren und wer Sie fühlen, wenn Sie sie verwenden. Klingt also immer noch ein bisschen kompliziert, oder? Sowohl UX- als auch UI-Designer, was wir verwenden, aber lassen Sie uns versuchen, dies aufzuschlüsseln, um die Benutzererfahrung und die Benutzeroberfläche ein wenig klarer zu machen Benutzererfahrung und die Benutzeroberfläche ein wenig klarer , als die Erfahrung viele verschiedene Dinge beinhaltet . Wie du dich fühlst, wo du bist, deine Motivation ist in dem Moment, in dem du sie tust. Was passiert, wenn du etwas tust? Wie war die Reaktion? Es gibt eine Menge Dinge, die daran beteiligt sind , wie man etwas erlebt. Schauen wir uns nun das Wort Interface an. Und die Benutzeroberfläche ist eine besondere Sache, mit der Sie eine oder mehrere Interaktionen durchführen. Denken Sie zum Beispiel an eine Fernbedienung mit, aber das ist eine Sache , mit der Sie zusammenarbeiten, um etwas zu erreichen. Das ist also der wahre Unterschied zwischen Benutzererfahrung und Benutzeroberfläche. Also die Erfahrung, was auch immer Sie fühlen, was auch immer Sie wollen, mit all den verschiedenen Möglichkeiten, wie Sie es tun können. Und eine Schnittstelle ist die greifbare Sache , mit der man interagiert, um etwas Bestimmtes zu bekommen. UI- und UX-Designer arbeiten oft an denselben Projekten und oft zur gleichen Zeit, aber sie sind wirklich für sehr unterschiedliche Dinge verantwortlich. Der Ui-Designer ist dafür verantwortlich , all diese Konzepte und Ideen so darzustellen diese Konzepte und Ideen , dass der Benutzer genau weiß, wie er sie verwendet. Ux-Designer, der für das Gesamterlebnis verantwortlich ist, die Benutzer versteht und dabei hilft, Konzepte und Möglichkeiten zur Verbesserung des Benutzererlebnisses zu geben . Und wir sehen uns im zweiten Teil. 3. Was ist FIGMA: In diesem Teil werden wir Figma erkunden, lernen, was es ist und wie wir damit beginnen können. Wir werden einige dieser wichtigen Themen behandeln, um Sie darauf vorzubereiten, wunderschöne UI-UX-Projekte zu entwerfen. Figma ist eine führende Designsoftware, die Teams und Einzelpersonen dabei hilft, Designs schneller und effizienter zu erstellen . Figma hat ein paar Vorteile. Eine der wichtigsten ist, dass Sie kostenlos loslegen können, wenn Sie alleine arbeiten. Wird von vielen Unternehmen verwendet, weil es auch eine wirklich gute Zusammenarbeit hat. So können mehrere Personen gleichzeitig an derselben Designdatei arbeiten . Auch sehr schnell. Es funktioniert auf jedem Computer, egal ob Sie einen Mac oder einen PC oder Linux haben, was auch immer Sie haben, es funktioniert direkt im Browser und es gibt auch ein mobiles Labor. So können Sie eine Vorschau Ihrer Designs auf einem mobilen Bildschirm anzeigen. Es gibt also wirklich keinen Nachteil, mit einem Tool wie Figma zu beginnen. Es ist eine großartige Ressource für alle, die eine neue IN UX beginnen. Das ist also die Website, auf die Sie einfach auf figma.com gehen. Ich bin bereits angemeldet, aber Sie können sich auch mit Ihrem Google-Konto sehr schnell anmelden . Erste Schritte mit der Verwendung der Browserversion. Aber wenn Sie die Desktop-App verwenden möchten, können Sie hier klicken Gute Desktop-App und eröffnen Sie Ihr Konto auf die gleiche Weise. Aber bevor wir direkt zu Figma springen, möchte ich Ihnen zeigen, wie ich Ihnen den Einstieg empfehlen würde. Also willst du einfach anfangen zu üben. Dafür werde ich Sie nicht bitten, etwas von Grund auf neu zu entwerfen , weil ich glaube, dass das für jemanden sehr schwierig sein würde. Vor allem, wenn Sie ein absoluter Anfänger in diesem Bereich sind und keine Grundlage für Designprinzipien und solche Dinge haben . Der beste Weg für Sie, um loszulegen, besteht darin, andere Designs zu kopieren, um sie zu beenden. Der Grund, warum das so gut ist, ist, man sehen kann, wie das Design entstanden ist. Wenn Sie also an etwas hängen bleiben, können Sie tatsächlich sehen, wie diese Person, die dies geschaffen hat, einen bestimmten Effekt oder ein Zeichen des Herausfindens erzielt hat. Das ist am Anfang völlig in Ordnung da Sie diese nicht verkaufen werden. Sie werden nicht sagen, dass Sie etwas entwerfen , wenn Sie es von jemand anderem kopiert haben. Das ist nur für deine eigene Praxis und es ist ein wirklich guter Einstieg. 4. Erste Schritte mit figma: Fangen Sie an. Tun Sie das jetzt. Ich wollte mit einer Vorlage beginnen. Und was ich buchstäblich getan habe, war in die Community geklickt zu haben. Wenn Sie sich das also ansehen, finden Sie einen Zweig von UI-Kits in dem ich nach Einkaufs-Apps suchen kann. Und das ist eine großartige Sache an Figma. Es gibt viele kostenlose Ressourcen in der Community, die Sie verwenden können, um mit dem Üben zu beginnen und sie in Ihr Design zu integrieren , damit Sie nicht bei Null anfangen müssen. Und ich wähle diese Anwendung als Beispiel Online-Shopping. Und ich öffne hier. Nachdem Sie hier auf diese Schaltfläche geklickt haben, erhalten Sie eine Kopie mit der Aufschrift Auf Figma-Konto kopieren. Und ich kann anfangen, das zu bearbeiten. Okay, jetzt haben wir eine Kopie dieser Datei, die wir als Ausgangspunkt verwenden werden. Wie Sie sehen können, kann ich in Figma einfach auf und ab scrollen, um die verschiedenen Bildschirme und die Festplattendatei zu sehen. Und ich kann sie sehr einfach neu anordnen. Sie werden feststellen, dass sie in der Originaldatei nebeneinander platziert wurden und ich eher eine vertikale Anordnung habe. Und ich kann es mit dem Mauszeiger so bewegen. Und ich kann mit einer Pinch-Geste auf meinem Trackpad ein- und auszoomen , sodass ich alle meine Bildschirme sehen kann. Nehmen wir an, jetzt möchte ich anfangen, dieses Design zu bewältigen, was ich mache, nun, nur um Ihnen die Grundlagen zu geben. Links hier habe ich nur einen Ebenenabschnitt. Und wenn ich dann ein Element auswähle, erhalte ich die Einstellungen für dieses Element auf der rechten Seite. Daher werden wir Schritt für Schritt mit der Neugestaltung dieses Anmeldebildschirms beginnen . Und während wir gehen, werden wir bestimmte Formen, Farben und Symbole verwenden . Bevor wir beginnen, werden wir unsere Umgebung anpassen , um neben dem ursprünglichen Anmeldebildschirm einen neuen Bildschirm hinzuzufügen. Als ersten Schritt zum Entwerfen eines neuen Bildschirms müssen Sie den Rahmen auswählen, der alle Bildschirmformen wie diesen umschließt. Wir klicken hier und wählen einen Rahmen aus, der wie folgt neu gestaltet werden soll, jedes Format für unseren Bildschirm. Aber was wir jetzt tun werden, um den Rahmen vorzubereiten, werden wir hier in diesem linken Teil den Rahmentyp auswählen, der für unsere Verwendung geeignet ist. Und in diesem Fall wählen wir das iPhone 13 Pro Max und verschieben es so daneben. Jetzt fangen wir mit dem Telefonheader an. Und wir werden die Plug-ins für das Icon verwenden. hier mit der rechten Maustaste und wählen Sie Plugins aus, weitere Plug-ins zur Verwaltung unserer Plugins, die während des Designs Hier findest du viele nützliche Plugins. Aber jetzt werden wir das Symbol wählen, wenn fünf. Klicken Sie nach dem Rendern des Plug-ins auf Installieren Jetzt können wir das Icon bei fünf Login verwenden. Beginnend mit dem Wi-Fi-Symbol. Wir wählen dieses Symbol und klicken auf das Importsymbol, um es in unserem neuen Bildschirm verwenden zu können. Und wir beenden den Rest der Icons mit der gleichen Methode. Jetzt ändern wir die Größe der Symbole und bewegen uns so nach oben. Sie können die drei Symbole gruppieren , um die Kontrolle zu übernehmen. Und die Stunde einfach mit dem Textwerkzeug wie diesem. Und wir ändern jetzt die Hintergrundfarbe wie auf dem anderen Bildschirm. Wählen Sie den Rahmen aus. Und hier rechts, geh ein bisschen runter und klicke hier. Wenn Sie diese Farbpalette sehen, können wir eine solche Farbe auswählen oder dieses kleine Werkzeug, den Picker, verwenden und dann auf die Stelle klicken, an der Sie dieselbe Farbe annehmen möchten. Jetzt fügen wir dieses große Symbol mit der gleichen Methode wie das andere hinzu. Wir schreiben Shopping und wählen das Icon neu wollen. Dann erstellen wir das Namensfeld mit dem Rechteckwerkzeug. Welcher? Eine Anzeige von hier. Und wir ändern die Farbe des Randes in Weiß. Hier auf der rechten Seite. Wir wählen diesen Hubparameter. Dann können wir die Randgröße um drei erhöhen , um es klarer zu machen. Und jetzt ändern wir die Farbe in Rot. Dennoch ist es notwendig , den Grenzradius so anzupassen. Hier rechts oben da als Grenzradius-Parameter. Jetzt können wir das andere Feld in der Schaltfläche hinzufügen. Kopieren Sie Einfügen des ersten Felds , da sie eine ähnliche Form haben. Und vergiss nicht, die Tastenfarbe zu ändern. Dann werden wir diese beiden Icons wie die anderen hinzufügen. Verwenden des Icons. Wenn ich einstecke. Jetzt bewegen wir uns bei jedem an seinem Platz. Aber wie Sie hier sehen, das Symbol verschwunden. Sie haben die Auswahl aufgehoben, klicken mit der rechten Maustaste und wählen In den Vordergrund. Auch hier ist es notwendig, die Farben für die beiden Symbole in Weiß zu ändern. Jetzt fügen wir die Texte für die beiden Felder und melden uns für die Schaltfläche an. Und fügt mit derselben Methode weiterhin Passwort direkt unter das vergessene Passwort direkt unter der Schaltfläche hinzu. Aber du musst dünner sein als die anderen. Um diesen Parameter zu ändern. Sie wählen den Text aus und gehen nach rechts und klicken auf diese Auswahlliste. Wählen Sie dann die gewünschte Größe. Für uns. Jetzt werden wir Medium wählen. Schließlich beenden wir damit. Dieser Teil enthält drei Icons und den Satz direkt darunter. Wir werden verschiedene Symbole vom Originalbildschirm auswählen , die meiner Meinung nach besser mit unserem Bildschirm übereinstimmen. Und vergiss nicht, die Farbe der Icons in der Kopfzeile zu ändern . Also haben wir in diesem neuen Bildschirm die grundlegenden Figma-Tools und die Installation und Verwendung von Plugins verwendet. Dennoch gibt es andere Tools und Dinge, die man mit Figma lernen und entwerfen kann, wie Prototypen. Jetzt haben Sie etwas geschaffen, das dem ursprünglichen Design sehr nahe kommt. Wie Sie sehen können, können Sie, wenn Sie mit einer Vorlage beginnen , die bereits in Figma enthalten ist , am Anfang schummeln und Elemente kopieren. Und Sie sollten einfach nach kostenlosen Ressourcen suchen, die Designs von Mobil- oder Web-Apps enthalten, und damit beginnen, diese zu bewältigen. Erfahren Sie, wie Sie diese Elemente neu erstellen können. Und mit der Zeit werden Sie beginnen, alle Prinzipien zu verinnerlichen. Natürlich ist es irgendwann wirklich gut, wenn Sie anfangen, etwas über die eigentliche Theorie des Designs zu lernen . Aber das ist ein Weg, um loszulegen , ohne festgefahren zu sein. Also kannst du vielleicht wechseln. Sie werden ein bisschen üben, ein wenig Theorie lernen und anfangen, das Gelernte anzuwenden. Dies ist jedoch eine Möglichkeit, loszulegen, ohne Theorie zu kennen, und Bewältigungsentwürfe zu rechtfertigen. Der nächste Schritt wäre nun , Dinge in Figma zu entwerfen , wenn Sie damit vertraut sind und Sie alles, was Sie sehen, ziemlich neu erstellen können. Möglicherweise sehen Sie also eine App, die Ihnen gefällt die noch nicht erstellt wurde und die groß ist. Vielleicht schaust du in Instagram oder anderen App, die du magst, oder in einer Watt-App oder so. Und Sie können damit beginnen, das in Figma zu entwerfen , wenn Sie sich immer mehr mit dem Tool vertraut machen . Und der Schritt danach besteht darin, sich eine App anzusehen , von der Sie glauben, dass sie verbessert werden könnte. Vielleicht ist Ihre Banking-App wirklich, wirklich schlecht und Sie wollten sie schon immer verbessern. Nun wissen Sie wie man Figma genug benutzt, um ein neues Design zusammenzustellen. Also ich hoffe, dieses Video war hilfreich für dich. Und wenn Sie Fragen zu den nächsten Schritten haben, bei denen Sie nicht weiterkommen, kontaktieren Sie mich in meiner E-Mail und wir sehen uns im nächsten Video.