Erstellen einer einfachen Portfolio-Website in Figma

1. Willkommen: Hey, ich bin so froh , dass du hier bist. Ich bin Viros und ich bin ein UX-Designer, der bei Deloit arbeitet. Wollten Sie schon immer eine Portfolio-Website entwerfen , die nicht nur gut aussieht, sondern auch weniger Zeit in Anspruch nimmt Nun, wenn Sie danach suchen, dann ist dieser Kurs meiner Meinung nach perfekt für Sie. In diesem Kurs werden wir Figma verwenden, um eine zweiseitige Portfolio-Website zu entwerfen Das Design wird sehr einfach sein und ich werde Sie durch alles führen , was Sie für die Gestaltung benötigen Wir werden uns mit den Grundlagen von FigMA befassen und mit der Gestaltung der verschiedenen Seiten fortfahren Wir werden eine Startseite entwerfen und dann weitermachen und die Seite „Über mich“ entwerfen Das Design wird einfach sein, aber dennoch sehr professionell aussehen und Sie werden viel weniger Zeit in Anspruch nehmen. Wenn du dafür bereit bist, sehe ich dich in der Klasse. Ich danke dir vielmals. 2. Einführung in Figma: Hallo, da. Hallo, willkommen in der Klasse und ich hoffe, dir wird dieser Kurs gefallen. Was wir also lernen werden, wir werden lernen, wie man eine sehr minimale und gut aussehende Portfolio-Website erstellt. Vielleicht sind Sie jemand, der bereits Designer ist und eine Portfolio-Website erstellen möchte, oder jemand, der gerade erst anfängt, sich mit Design oder Design zu beschäftigen jedem Fall benötigen Sie eine gute Portfolio-Website. In diesem Tutorial oder in diesem Kurs werden wir genau das tun. Wer bin ich? Nun, mein Name ist Perros und ich bin ein leitender UX-Designer Ich arbeite bei Deloit in Indien, Bangalore, und ich designe jetzt seit mehr als Ich habe als Grafikdesigner angefangen und bin langsam zum UX-Design übergegangen Ich arbeite sehr gerne an Designs, die minimal, aber gleichzeitig sehr benutzerfreundlich sind . Für diesen Designkurs wird es nicht viel Schnickschnack geben, aber es wird ein sehr sauberes und minimalistisches Design sein Lass uns anfangen. Ich gehe mir aus dem Weg. Vielleicht mache ich mich einfach ein bisschen kleiner und lege es hier hin. Was Sie also auf dem Bildschirm sehen, ist FIGMA. Wenn Sie sich also zum ersten Mal bei FIGMA anmelden, lassen Sie mich Ihnen sagen, was FIGMA FIGMA ist eine Designsoftware, die speziell für UX-Design entwickelt wurde oder nicht für UX-Design, sondern für UI-Design unter Verwendung von Interface-Design Die Leute, die mit Interface-Designs arbeiten , werden UI-Designer oder UX-Designer genannt Dies ist für jemanden, der sehr neu ist und die Terminologie nicht kennt. Für Leute, die bereits Erfahrung haben , haben Sie bitte etwas Geduld mit mir. Wenn Sie also FigMa starten, sehen Sie so etwas Wenn Sie auf die Home-Schaltfläche klicken, ist diese Seite möglicherweise völlig leer, wenn Sie inFIMA zum ersten Mal starten Ich habe hier eine Menge Dinge im Gange. Aber wenn du auf dieses Design klickst, wirst du sehen, dass Figma hier quasi eine neue Design-Datei erstellt, und sie heißt Untitle Ich habe bereits eine Datei gestartet , die den Namen Portfolio-Website trug Wenn Sie den Namen ändern möchten, doppelklicken Sie einfach und Sie können ihm einen beliebigen Namen geben. Im Moment mache ich es einfach rückgängig. Ich gehe davon aus, dass Sie neu bei Figma sind , und ich werde Sie nur durch einige sehr grundlegende Figma-Tools führen, sodass wir diesen Kurs beginnen, indem wir alle berücksichtigen Auch wenn Sie neu sind, können Sie mitmachen. Siehst du, Figma hat drei, vier verschiedene Pfade. Im oberen Teil befinden sich unsere Dateien. Sie können sehen, dass es sich bei der aktuellen Arbeitsdatei diese Datei handelt, die gerade ausgewählt wird. Das ist eine andere Datei. Sie können hier viele verschiedene Dateien öffnen. Auch wenn Sie zur Startseite gehen möchten, klicken Sie einfach auf Home. Auf der linken Seite haben Sie einen Bereich, in dem Sie interne Datei haben, Sie haben Seiten, sodass Sie mehrere Seiten haben und auf mehreren Seiten innerhalb einer Datei entwerfen können Im Moment sind wir also auf Seite eins, und innerhalb der Seite können Sie auch mehrere Ebenen haben wir also mit dem Entwerfen beginnen, werden Sie sehen, wie diese Ebenen auftauchen. Auf der rechten Seite haben Sie also nur wenige Werkzeuge. Dieses Panel ist also sehr dynamisch und ändert sich grundsätzlich je nachdem, welches Tool Sie gerade verwenden. Und unten haben wir eine Werkzeugleiste. Im Moment haben wir unser Verschieben-Werkzeug ausgewählt, und das ist der zeigende Pfeil, der verwendet wird, um Dinge hin und her zu verschieben. Wir haben zwei weitere Tools im Inneren. Wo immer Sie also diesen Chevron oder diesen Pfeil sehen, bedeutet das, dass sich darin versteckte Werkzeuge befinden. Aber wir werden uns in dieser Einführung sehr kurz fassen und uns nur mit den grundlegenden und nützlichsten Tools befassen , die wir beim Entwerfen den grundlegenden und nützlichsten Tools befassen , die wir beim verwenden werden Das erste ist natürlich unser Verschiebe-Tool. Wir werden es ausgiebig nutzen , um Dinge hin und her zu verschieben Dann haben wir das Frame-Tool. Rahmenwerkzeug ist wie ein Begrenzungsrahmen oder ein Zeichenbrett, bei dem Sie einen Rahmen einer bestimmten Größe erstellen und innerhalb dieses Rahmens entwerfen Hier kommen verschiedene Bildschirmgrößen ins Spiel. Sie erstellen einen Rahmen für den Desktop, Sie erstellen einen Rahmen für das mobile Design und im Grunde ist es nur ein Container , der kontinuierlich gestaltet Dann haben Sie ein Bandwerkzeug und ein Formwerkzeug darin, Sie haben viele verschiedene Formen, rechteckige Linie, Pfeil, Ellipse, Stern, Polygon, was Dann haben Sie dieses Stiftwerkzeug , das Sie nicht oft benutzen werden Wenn Sie keine Vektorgrafiken von Hand zeichnen werden, glaube ich nicht, dass Sie es verwenden werden. Wenn Sie keinen Stift verwenden, ist die Wahrscheinlichkeit gering, dass Sie einen Bleistift verwenden werden. Lass uns nicht darüber reden. Das nächste Tool, das wir ausgiebig verwenden werden , ist unser Textwerkzeug. Die Benutzeroberfläche besteht im Grunde aus zwei Dingen. Wir haben verschiedene Formen und dann haben wir Text. Diese beiden verschmelzen zu einem Design. Man kann einfach das ist sehr einfach. Das ist nicht einmal richtig, aber es ist eine sehr einfache Definition Wenn Sie sich eines unserer Designs ansehen, werden Sie feststellen, dass es viele Formen, Grafiken und Es ist im Grunde nicht die Definition, aber mehr oder weniger versuche ich nur, die Dinge einfach zu machen. Dann haben Sie ein gemeinsames Tool. gemeinsame Tool kommt im Grunde ins Spiel, wenn wir mit jemand anderem zusammenarbeiten und diese Person Kommentare zu unserem Design abgeben kann und wir dann auf diesen Kommentar antworten können. Verzeihen Sie mir. Im Grunde ist es das. Das sind die Grundlagen von Figma. Also lass uns einfach etwas demonstrieren. Ich gehe zum Frame und wenn ich auf den Frame klicke, siehst du, dass sich die rechte Seite gerade geändert hat. Sie haben verschiedene Voreinstellungen vorkonfiguriert und wir werden uns für Desktop entscheiden ich auf Deck Stop klicke, Wenn ich auf Deck Stop klicke, erscheint ein Frame, du jetzt mit dem Verschieben-Werkzeug verschieben kannst Mal sehen, was wir jetzt tun können. Jetzt, wo wir den Rahmen haben, können wir sehen, dass es viele verschiedene Optionen gibt, die wir in den kommenden Kapiteln eingehen werden. Dann haben wir die Füllung. Füllung ist im Grunde die Farbe des Rahmens. Sehr einfach. Füllen. Welche Farbe möchten Sie füllen. Einfach, einfach. Wir haben also eine weiße Farbe und dann können wir darin ein Rechteck machen. Mit unserem Formwerkzeug können Sie dieses Rechteck verschieben. Wenn Sie eine Ellipse erstellen möchten, können Sie eine Ellipse erstellen. Als du mit der Ellipse angefangen hast, siehst du, dass sie nicht perfekt rund war Geht überall hin. Es ist umsonst Pop. Aber wenn du die Shift-Taste drückst, bewegt es sich jetzt im richtigen Verhältnis. Jetzt ist es also behoben. Ich meine, es verformt sich nicht. So protokolliert man das Seitenverhältnis. Wenn Sie jetzt hier klicken verschiedene Formen oder Dinge sehen, haben wir im rechten Bereich verschiedene Optionen. Lassen Sie uns jetzt auch etwas Text eingeben. Und du kannst diesen Text vergrößern. Also ja, das sind die Grundlagen von FIC MA. Und Sie werden sehen, je weiter wir vorankommen, Sie werden anfangen, all diese Optionen und Tools zu lernen , und es wird Spaß machen. Vertrau mir. Also ja, wir sehen uns im nächsten Kapitel und wir werden anfangen. Okay. 3. Gestaltung der Homepage Teil 1: Hey, willkommen nochmal. Also, was wir jetzt tun werden , ist mit der ersten Seite zu beginnen. Wie gesagt, dies wird eine sehr einfache Website mit minimalem Portfolio sein . Und lassen Sie uns annehmen, lassen Sie uns eine Annahme treffen. Also fangen wir hier an. Also, für wen wir diese Website erstellen. Also der Name ist, sagen wir, John Doe. Das ist ein sehr gebräuchlicher Name, Platzhaltername, den wir verwenden und was ist die Aufgabe dieser Person Nehmen wir an, Designer, sollten wir Designer oder Fotografen nehmen Ich denke, wenn das, was diese Person tut das Aussehen des Portfolios beeinflussen wird denn wenn er jemand ist, der viel fotografiert, dann wird das Portfolio stark von Bildern dominiert werden stark von Bildern dominiert Viele Bilder in voller Größe, während es, sagen wir, ein UI-Designer sein wird , es um Bildschirme und das Design von Benutzeroberflächen gehen wird , zusammen mit einer Menge Text, der den Designprozess erklärt . Was sollten wir nehmen? Nehmen wir zum Beispiel an, er ist ein UI-Designer. Und wir werden auch einige der Projekte vorstellen. Für Projekte werden wir einfach Platzhalterbilder verwenden, die vielleicht aus Dribble- oder B-Händen Ich werde nicht meine eigenen Bilder verwenden, weil dann nur wenige von ihnen urheberrechtlich geschützt sind und einige von ihnen einer Ich möchte also keine rechtlichen Probleme bekommen. Also ja, ich denke, das wäre genug. Also lass uns jetzt einfach anfangen. Zuallererst werden wir Ihnen auch erklären, wie man Seiten erstellt. Dies ist unsere erste Seite. Wenn ich doppelklicke, kann ich sie Intro nennen Lassen wir diese Seite also so wie sie ist und klicken wir auf dieses Plus-Symbol Dadurch wird eine weitere Seite hinzugefügt , nämlich Seite zwei, und wir können Design sagen, ja, geben wir ihr einfach den Namen Design. Lass uns zu unserem Frame-Tool gehen und unseren Frame-Dex erstellen. Dies ist der erste Schritt , der da sein wird. Und lassen Sie uns über die Website sprechen. Also Portfolio-Website, was wir eigentlich versuchen zu tun. Wir versuchen zu vermitteln, wer wir sind, was wir tun, und zu zeigen, was wir bereits getan haben. Und dabei verwenden wir eine sehr einfache Einrichtung einer Website, nämlich unsere Navigationsleiste , unsere Navigationsleiste , dann den Haupthelden- oder Showcase-Bereich und dann die Fußzeile Es wird sehr einfach sein, sehr einfach. Jede Website, jede gute kleine Website, die Sie sehen, folgt tatsächlich demselben Weg. Also werden wir die Navbar haben. Also fangen wir einfach an , die Details auszublenden. Das wird, sagen wir, Navbar sein. Und wenn Sie einfach R drücken, wird es zu einem Rechteck Das habe ich gerade getan. Das ist unser NAB. Geben wir dieser NAB eine andere Farbe. Dann haben wir noch ein anderes, das ist unser grundlegendes Heldenintro, wie auch immer du es nennen willst, dann hast du diesen Bereich, in dem du ein paar Dinge vorstellst Geben wir ihm eine dunklere Farbe. Was ich gerade gemacht habe, ist es einfach dupliziert und wie Sie es schnell machen, ist, dass Sie klicken und dann Alt drücken Ich bin auf einem Fenstercomputer, also Alt Ich habe vergessen, was Alt auf einem Mac entspricht , oder ich denke, es ist kein Befehl, tut mir leid, Steuerung ist für Befehl Ich hab's einfach vergessen. Was auch immer der Ersatz für Mathe ist, bitte benutze ihn. Wenn ich die Alt-Taste gedrückt halte und dann einfach klicke und ziehe, siehst du, dass ein Doppelpfeil bedeutet, dass es dupliziert wird, und das wird eine Fußzeile sein Machen Sie daraus eine Fußzeile. Und das gibt ihm eine andere Farbe. Wir haben den Grundgedanken, wir haben den Grundgedanken markiert , wo die Dinge sein werden. Ohne das zu stören und das zu kopieren. Sie können auch die Tastenkombinationen Control C, Control V verwenden . Es wird einfach kopiert und eingefügt und es wird eine doppelte Kopie erstellt. Lassen Sie uns nun diese Blöcke entfernen und mit der Erstellung einer Anleitung beginnen. Sie fügen eine Anleitung ein, kommen Sie hierher und klicken Sie auf Layoutanleitung. Sobald Sie klicken, erhalten Sie viele Noten, ein sehr kleines Raster, aber Sie müssen zu den Spalten wechseln. Und sobald Sie Spalten haben, können Sie sehen, dass Sie wenn Sie mit dem Rastersystem vertraut sind, diese 12 Spalten verwenden können, was auch immer Sie verwenden möchten. Aber lassen Sie uns die Dinge sehr einfach halten. Wir nehmen einen, der fast voll ist. Dann geben wir etwas Spielraum. Was Spielraum ist, äh, sind die Leerzeichen, außerhalb dessen, wo Sie arbeiten möchten, im Grunde genommen. Sie können sich Google ansehen, aber ich versuche nur, es sehr einfach zu halten. Ich werde nicht im Detail darauf eingehen, was die richtige Definition ist. Sie können sich all diese Dinge einfach bei Google ansehen. nur wissen, was der Schwerpunkt dieses Kurses ist, damit Sie schneller werden. Sie beginnen tatsächlich damit, Begriffe und Definitionen zu entwerfen , die Sie immer lernen können. Aber Design ist kein Ersatz für Design, also müssen Sie Designdesign entwerfen. Geben wir ihm also 32 Pixel. Bei vielen Designs werden Sie also Leute sehen, die 32, 16, acht verwenden. die Dinge konsistent zu halten, verwenden wir also Vielfaches von, wissen Sie, vier, vier Einsen sind vier, vier zu 28, vier zu drei, 12, vier zu 416 Aus diesem Grund verwenden wir 16, 24 und so weiter. Dachrinne ist die Lücke zwischen zwei Säulen. Im Moment wird es also nicht angezeigt, weil wir nur eine Spalte haben und deshalb keine Dachrinne haben Aber wenn du das ändern willst, wird es als Dachrinne angezeigt Nehmen wir an, wir haben zwei. Jetzt sehen Sie, dass wir eine 20-Pixel-Binde haben und wenn wir diese erhöhen , nimmt sie auch zu Nachdem wir unseren Bildschirm angelegt haben, beginnen wir mit der Gestaltung der Navigationsleiste Was in der Navigationsleiste angezeigt wird, ist im Leerlauf Ihr Logo und alle wichtigen Links , zu denen Ihr Benutzer innerhalb der Website navigieren soll Für eine Portfolio-Website bedeutet das, bedeutet das, dass Sie als Erstes Ihren Namen haben werden Für Ihre Portfolio-Website ist die Identität im Grunde Ihr Name Dann können wir Links über Sie haben. Wir können auch Links darüber haben, wo wir Sie kontaktieren Wenn Sie ein LinkedIn haben, bla, bla, bla, was auch immer Sie hinzufügen möchten, können Sie beginnen Fangen wir mit dem Logo an. Für hier werde ich das Logo sehr einfach halten. Es wird ein sehr einfacher Text sein, John Doe, lass es uns hier zusammenfassen. Jetzt können wir ihm eine andere Schrift geben. Aber im Moment werde ich mich einfach für diese Schrift entscheiden, die mir gefällt. Ich mag diese Schrift eigentlich sehr, aber du kannst auch mit Inter beginnen. Inter ist eine böse, es ist eine tolle Schrift. Ich liebe es. Und dann kannst du auch mit der Schriftstärke spielen . Geben wir dem Ganzen also ein wenig Abwechslung. Hälfte des Namens können Sie fett gedruckt haben und die andere Hälfte können wir haben. Sagen wir mal. Dann können wir auch den Abstand anpassen. Das sieht sehr gut aus. Wenn Sie den Abstand überprüfen möchten, wählen Sie einfach das Objekt aus, drücken Alt und bewegen Sie Ihr C einfach von der Stelle, an der Sie den Abstand sehen möchten, und es zeigt Ihnen, dass es 57 ist. Lass uns 64 daraus machen , also ein Vielfaches von vier oder acht, was auch immer du willst Ja. John Doe, wir haben unser Logo oder das Erste von der Karte. Lass uns einfach ein paar Links machen. Über mich oder über, du kannst einfach darüber schreiben. Lassen Sie uns das leichter behandeln, und das wird nicht so groß sein. Ich schätze, 24 waren es wohl. Und lassen Sie uns das bei Null lassen oder vielleicht können wir es etwas leiser machen und es auf normales A umstellen . Ich finde, das sieht gut aus, weil es nicht sehr laut ist, aber gleichzeitig wird es nicht versteckt. Alles, was wir tun, ist, visuell ein Gleichgewicht zwischen allem herzustellen. Dann werden wir das einfach kopieren und einfügen und Kontakt aufnehmen. Lassen Sie uns nun den Abstand überprüfen, klicken Sie hier, drücken Sie und fahren Sie dann einfach mit der Maus darauf und Sie können sich einfach bewegen und Sie können unterschiedliche Abstände sehen Im Grunde haben wir jetzt also die NaBBA-Lesung. Du kannst auf der Prototyp-Halterung spielen. Du kannst einfach sehen, wie es aussieht. Das ist die Option „ Geschenk“. Sie öffnet die Präsentation und zeigt Ihnen im Grunde , wie das Ganze aussieht, was Sie bisher entworfen haben. Das sieht gut aus. Ich denke nur, wir brauchen mehr Abstand von beiden Seiten. Lass uns einfach 48 daraus machen. Wenn wir jetzt zurückkommen, sieht es gut aus. Wir können auch versuchen, es daran auszurichten. Wir haben das also bereits positioniert und lassen Sie uns sehen, wie es jetzt aussieht. Das sieht gut aus. So können wir jetzt weitermachen und mit der Gestaltung des Restes der Seite beginnen. 4. Gestaltung der Homepage Teil 2: Lassen Sie uns also einige Informationen oder ein Intro über die Person hinzufügen. Lass uns Hallo sagen. Ich bin ein UI Qx-Designer, der bei Google arbeitet. Google. Ich entwerfe Benutzeroberflächen, die Spaß und Freude bereiten und machen und Freude bereiten und den Menschen das Leben erleichtern. Also haben wir ein Liter-Intro über die Person geschrieben, mal sehen, wie viel und so sieht es aus Nicht schlecht. Es sieht gut aus. Jetzt haben wir den Firmennamen Google verwendet. Lassen Sie uns auch einfach das Google-Logo einfügen. Ich meine, es verleiht eine kleine Note. Also, diese kleinen Dinge werden einen großen Unterschied machen. Google SIG-Logo. Lässt etwas platzen. Jetzt sind wir hier. Lassen Sie uns dieses Logo verwenden und es einfach kopieren und hier einfügen. Jetzt können Sie sehen, ich meine, das fügt ein wenig Farbe hinzu. Lass es uns einfach ausrichten. Und wenn wir es größer machen können, perfekt. Nun, das ist ein sehr einfaches Arrangement, aber lassen Sie uns einfach damit spielen und versuchen zu sehen, wie wir diesen Stock tatsächlich an einem Ort herstellen können , an dem er, ich meine, nicht seltsam aussieht . Im Moment passiert hier eine Menge Dinge. Dieses Logo und dieses Logo sind sehr widersprüchlich. Versuchen wir also einfach, das zu entfernen und hier etwas Platz zu schaffen Wie wäre es, wenn wir alles nach unten oder oben verschieben alles nach unten oder oben und es ein bisschen kleiner machen und es dann hier ablegen. Nun, Sie würden sehen, das sieht ziemlich gut und es sieht nicht fehl am Platz aus. Mm. Perfekt. Das sieht also gut aus. Also lass uns das auch tun. Ja, das sieht besser aus. Beim UOI-Design geht es im Grunde darum, Dinge zu bewegen, bis Sie das Gefühl haben, dass es Sinn macht oder gut aussieht Im Grunde verbringen wir als Designer viel Zeit damit, Dinge hin und her zu bewegen , bis alles Sinn macht Wir gehen hin und her und schauen uns an, was wir gemacht haben und wie es aussieht. Es macht Spaß. Lass es uns einfach in zwei Zeilen halten und das gruppieren. Was für eine Gruppe ist, wenn ich das einfach verschiebe, werden Sie sehen, dass es sich um zwei verschiedene Dinge handelt. Wenn ich alles auf einmal verschieben möchte, ziehe ich einfach alles und wähle es aus und drücke Strg G. Dadurch werden diese beiden Dinge in einer Gruppe gruppiert. Wenn ich das jetzt verschiebe, alles. Lass uns zusammen umziehen. Siehst du? 128 ist in Ordnung. Lass uns mich einfach aus dem Weg räumen. Das ist gut. Lassen Sie uns nun mit der Erstellung der Portfolioteile fortfahren und wie wir sie herstellen werden. Lassen Sie uns zunächst einige Blöcke platzieren. Zwei Blöcke, wir können zwei Blöcke platzieren, und wir können beide auswählen und wir können sie in voller Größe vergrößern. Jetzt haben wir die Blöcke dort platziert, wo die Portfolioteile hingehören sollen. Lass uns einfach ein paar Designs von Dibble holen oder ich weiß es nicht. Vielleicht benutzen wir einfach, äh, was du sagst, Unsplash Wenn wir zu Plug-ins gehen, kannst du in den Plugins, die du bekommst, Unsplash sehen, wie du das bekommst , du kannst zur Verwaltung von Plugins gehen und dort einfach Splash hinzufügen Also lass uns einfach Splash starten und es kommt und wir geben ihm ein UI-Design Mal sehen, ob es uns etwas bringt. Es gibt uns ziemlich viele Dinge. Lass uns das einfach benutzen , weil das im Grunde Figma ist und wir werden das benutzen Wenn ich also klicke, wird das Bild einfach irgendwie auf dieses Feld angewendet Wenn ich nun das zweite Feld auswähle, geben wir ihm ein anderes Bild, verwenden wir einfach ein wirklich gutes, auffälliges Bild. Mm. Welches wird verwendet? Wie ich schon sagte, dass wir viel Zeit damit verbringen, Dinge hin und her zu verschieben, verbringen wir auch viel Zeit damit, Bilder auszuwählen, und wir verbringen auch viel Zeit damit, einfach zwischen Formularen zu wechseln , nur um zu sehen, welche Schrift gut aussieht. Es fällt mir wirklich schwer, auszuwählen , welches Bild zusammenpassen soll. Aber nur um die Sache zu vereinfachen, lassen Sie uns dieses auswählen, weil es sich um ein Bildschirmbild handelt Und jetzt siehst du, wir haben zwei Bilder und wenn ich zu unserem Testbericht gehe, siehst du, jetzt haben wir die Navba, den Kontakt, die Links, im Grunde ein kleines Intro und auch zwei der Aber im Moment geben uns diese beiden Bilder keinerlei Informationen darüber, was diese Bilder sind Wir müssen diesen Bildern einige weitere Details hinzufügen. Mal sehen, wie wir das machen werden. Zuallererst, wenn du willst, kannst du sie einfach mailen die Ecken sind gerade sehr scharf. Scharfe Ecken sind grundsätzlich okay. Der Trend geht aber zu abgerundeten Ecken. Alles von Apple über iPhones bis hin zu allen Benutzeroberflächen , die Sie auf Mobilgeräten sehen Jeder, alles hat abgerundete Ecken, geben wir der Ecke einfach ein bisschen Rundheit. Verzeiht mir Die Option, die wir verwenden werden , ist Eckenradius, und das ist der Ort, an dem wir vier platzieren und mal sehen, was diese beiden sind Dabei wurden die Ecken um vier Pixel abgerundet. Wenn wir jetzt hier hingehen, können wir sehen, dass abgerundet und gut, wunderschön aussehen. Lassen Sie uns nun damit beginnen, diesen Bildblöcken etwas Kontext hinzuzufügen , was sie sind. Wenn du willst, kannst du sie einfach machen. Lass es uns einfach etwas kürzer halten. Und der Grund, warum ich Ihnen sagen werde ist, wenn jemand auf eine Website kommt, wenn etwas passiert, äh, es ist ein Hinweis für sie, dass die Seite noch mehr beinhaltet und sie nach unten scrollen sollten, um mehr Inhalt zu sehen. Andernfalls, wenn es eine Lücke gibt und diese Lücke genau dort liegt, wo der Viewport endet, werden sie nie wissen, dass dort liegt, wo der Viewport endet, werden sie nie wissen etwas unten auf der Seite befindet, und sie werden auch nie scrollen Lassen Sie uns hier nun einige Dinge hinzufügen. Das erste , was wir hier hinzufügen werden ist der Name des Projekts. Ähm, sagen wir mal. Also im Grunde möchte ich ihm einen Namen geben , der sofort sagt, was Sie getan haben. Ähm, Pigma oder Designer entwerfen. Also im Grunde macht es keinen Sinn, macht es keinen Sinn weil diese Person bei Google gearbeitet hat, aber jetzt habe ich etwas von Pigma verwendet, und es tut mir wirklich leid, dass das keinen Sinn ergibt Also lass uns das einfach ändern. Lass uns das einfach ändern oder vielleicht können wir, weil ich meine, diese Person vielleicht, sagen wir diese Person hat bei Sigma für Google gearbeitet Also ja, es macht Sinn. Ja, ich habe mich geirrt. Ja. Lassen Sie es uns für Designer etwas kleiner machen und wie sieht es aus? Nicht schlecht, aber wir können so etwas weiter machen. Oder wir können es etwas weiter fallen lassen und es einfach benutzen. 24. Das ist 16. Perfekt. Figma für Designer entwerfen Wenn Sie möchten, können Sie auch etwas mehr über das gesamte Projekt hinzufügen etwas mehr über das gesamte Projekt Wie wir das neue Design von PGM mit Tiefenmodus für Pig Mas Event 2024 ausliefern Ich meine, ich habe es mir gerade ausgedacht, aber du verstehst, worum es geht, oder? Das haben wir jetzt also. Ich kann zu zwei Zeilen gehen. Also im Grunde kann es auch in einer Zeile sein. Also im Grunde ist das nur das Hinzufügen von Kontext. Lassen Sie uns einfach die Dinge einrichten und wir werden einfach sehr schnell vorgehen und sie erstellen. Ordnung. Also haben wir ein bisschen Intron hinzugefügt Lass uns einfach nachschauen. Und wir brauchen ein paar Dinge, die zeigen, dass das ein Link ist und sie hier klicken und einfach gehen können Lassen Sie uns einen kleinen Button machen, sagen wir, öffnen oder ansehen. Geben wir einfach Ansicht ein und dann können wir es auch mit dem Aufwärtspfeil angeben. Beginnen wir also damit, ihm einen Tiefpunkt zu geben. Lass uns das einfach einrahmen. Wenn wir das einrahmen, können wir quasi den Strich kontrollieren , den wir geben können , und wir können auch die Größe kontrollieren. Das kannst du hier sehen. Und im Grunde genommen ist das, was passiert ist, dass daraus ein Layout wird, wenn wir ihm einen Rahmen geben . Das ist jetzt freie Form. Das heißt also, es hat keine Polsterung oder keine eingebaute Polsterung. Wir werden es auf horizontal umstellen. Sobald wir es auf horizontal umgestellt haben, können Sie sehen, dass sich einige weitere Optionen eröffnet haben. Was sind das? Das ist unsere horizontale Polsterung und das ist vertikale Polsterung Im Grunde genommen wird es den Platz innerhalb des Containers hinzufügen Wenn ich das also erhöhe, sehen Sie, dass dadurch Platz innerhalb des Containers und auch hier hinzugefügt wird . Was wir jetzt tun werden, ist ihm im Grunde eine runde Kante zu geben. Nun, das sieht einem Knopf sehr ähnlich. Und Sie können alles anstelle von View verwenden oder einfach jedes verwenden, aber es gibt bestimmte Richtlinien, bestimmte Best Practices, wenn es um das Schreiben von Benutzeroberflächen oder das Schreiben von UX geht. Sie können dem folgen, aber ich werde nicht näher darauf eingehen. Was auch immer Sie für Ihre Website verwenden werden , verwenden Sie es einfach. Jetzt sehen Sie, lassen Sie uns etwas Zeit zum Aktualisieren geben. Jetzt sieht es hübsch aus. Es ist hübsch. Jetzt wissen sie, dass es einen Link gibt, der jetzt ansehen heißt . Figma hat eine Sache, die Autoayout heißt Was es tun wird, ist alles in eine Art Layout zu bringen Es ist also einfacher für dich , wenn du Abstand hältst. Ich habe zum Beispiel schon einen Abstand von vier Pixeln festgelegt, äh, wenn ich einfach auf beide klicke und sie auswähle äh, wenn ich einfach und dann Shift A drücke wird es zu einem Rahmen und quasi zum äußeren Layout hinzugefügt und es wird automatisch erkannt, und es wird automatisch wie die Ausrichtung aussehen sollte Im Moment sind diese beiden Dinge vertikal gestapelt. Es wird vertikal hinzugefügt. Mal sehen, was passiert, wenn ich dies und das auswähle und dann Shift A drücke, was ein Adolon ist. Es wird dies und das auswähle und dann Shift A drücke, was ein automatisch ausgeworfen, dass jetzt dieser ganze Block und dieser Button horizontal gestapelt sind und jetzt ist alles einfach äh richtig ausgerichtet und wenn Sie sehen, ob ich die Ausrichtung ändere, wird es auch die Ausrichtung ändern die Ausrichtung Jetzt kann ich das oder das andere einfach kopieren und einfügen Und sagen wir, wenn ich den Abstand verringern möchte, können Sie sehen, dass ich einfach dieses Symbol dort verwenden kann, wo es horizontale Lücken gibt , und es gibt mir die Option 48 beizubehalten. Aber dann nehmen wir einfach an, dass wir uns für dieses Design entscheiden. Was also passieren wird, ist, wenn etwas eine kleinere Überschrift hat, wird diese Schaltfläche nicht richtig ausgerichtet sein und in jeder Kachel wird die Platzierung sehr unterschiedlich sein. Also lassen wir es einfach so, wie es vorher war. Also die Überschrift und diese Unterüberschrift beginnen am linken Ende und die Schaltfläche ist nach rechts ausgerichtet. Lassen wir es dabei belassen Also lass uns das jetzt einfach erweitern und jetzt können wir einfach alles kopieren, einfügen und duplizieren. Im Grunde haben wir jetzt vier Krawatten, ändere die Fotos. Ich werde das Unsplash-Plugin wieder starten. Und sagen wir, ich entwerfe, lass uns das einfach geben Lass uns einfach sagen, Sir. Was soll ich ihm geben? Als solches. Den haben sie schon benutzt. Das können wir nicht benutzen. N. Wir bekommen keine guten Bilder. Ich denke, es wird viel Zeit in Anspruch nehmen, wenn ich auf diese Weise weitersuche . Also werden wir vorerst nur einige zufällige Bilder verwenden, aber stellen Sie sicher, dass Sie die absolut besten Bilder für Ihr Portfolio verwenden . Und ich glaube, die haben wir im Guten. Im Grunde haben wir jetzt unser Raster von Portfoliostücken. Lassen Sie uns hier auch einen kleinen Kontext geben, worum es sich bei ausgewählten Werken genau ausgewählten bei handelt. Wenn Sie also einen längeren Text haben , den Sie einfach kürzen möchten, doppelklicken Sie einfach auf diesen Rand, und er wird einfach so gekürzt, dass er genau an der Stelle steht, an der sich der Text befindet. Lass es uns auch ausrichten 32 ist gut. Lass uns sehen, wie es aussieht. Es sieht gut aus. Mal sehen, ob wir es auf Medium ändern können. Ja, ich finde, das sieht gut aus. das funktioniert. Mal sehen, welchen Abstand wir hier haben. Das ist okay. Ungefähr 88. Okay. Wenn wir jetzt hierher kommen, sehen wir, dass das in Ordnung ist. Wir haben die Navbar, oder wir können auch eine Sache tun Wir können etwas Speicherplatz freigeben und die Navbar ein wenig nach oben schieben die Navbar ein wenig nach oben Behalten wir es bei 32. Jetzt siehst du das ein bisschen Platz, ich meine, wir können es nicht sehen. Ich werde es noch ein bisschen weiter vorantreiben. Mal sehen, 64. Und jetzt siehst du, dass ein Teil des Textes sichtbar ist und wir lassen ihn einfach da. Oder wenn ich einfach versuchen kann, es nach oben zu verschieben. Sehen wir uns 96 96 an. Lassen Sie uns eine kurze Kleinigkeit sehen. Für diese Ansicht haben wir eine Ukularbehandlung vorgenommen, wohingegen es sich bei diesen Verbindungen um einfache Verbindungen handelt Was wir tun können, ist die Links je nach Farbe oder Form ein wenig unterschiedlich zu gestalten Also im Grunde wird es an dieser Stelle nur sichtbar sein, wenn jemand mit der Maus auf die Schaltfläche fährt wenn jemand mit der Maus auf die Schaltfläche Im Moment gehen wir also nicht in die Tiefe und führen verschiedene Zustände des Buttons Wir entwerfen die verschiedenen Status nicht danach, wie, wie sie aussehen wird, wenn sie aktiv ist, wie sie aussehen wird. Also werde ich ihm nur einen kleinen Hauch von Farbe geben. Lassen Sie uns einfach Farbe verwenden, die im Grunde genommen etwas ist , das Ihnen ins Auge sticht Lass uns das einfach benutzen. Wie wäre wenn wir dieselbe Farbe verwenden, wird es gut aussehen? Ich glaube nicht, dass es vielleicht gut aussehen wird. Ich weiß es nicht. Es sieht okay aus. Es sieht okay aus. Sie können auch mit dieser Taste fahren. Aber jetzt, wo wir es geschafft haben, wollen wir einfach sehen, ob wir eine etwas andere Farbe verwenden können. Äh, lass uns das einfach dunkelblau setzen . Ja. Ich denke, das wird die Arbeit machen. Das ist in Ordnung. Jetzt, wo wir an einer Stelle geändert haben , können wir einfach C kontrollieren und dann einfach hier klicken und zum Einfügen gehen, um zu ersetzen. Dadurch wird der alte Button durch Einfügen ersetzt . Lass mich das auch mit dem anderen machen. Und jetzt sieht unsere Seite ungefähr so aus. Es ist eine klare Darstellung , dass dies eine Schaltfläche ist, und dies sind auch Links , zu denen der Benutzer gehen kann Unsere Seite ist also größtenteils fertig. Was als Nächstes getan werden muss, ist die Fußzeile. Die Fußzeile muss nicht sehr aufwändig sein. Es kann sehr minimal sein. Dafür wollen wir im Grunde eine sehr einfache Fußzeile angeben, ähm, höchstwahrscheinlich den Namen, nicht den Namen, vielleicht die Kontaktdaten, über die jemand schnell die Mailadresse oder die Telefonnummer kontaktieren kann schnell die Mailadresse oder die Telefonnummer kontaktieren 5. Gestaltung der Homepage Teil 3: Also lass uns auch. Also lassen Sie uns das einfach etwas weiter verkleinern und die Farbe ändern , um es horizontal zu trennen, sodass wir alles teilen Es ist in Ordnung, wie das aussieht. Ich finde, das sieht gut aus. Es ist nur so, dass wir die Größe verringern müssen . Jetzt sieht es gut aus. Ich denke, es braucht nur ein bisschen mehr Abstand, und ich finde, das sieht gut aus. Lass uns den Töpfer schnell fertig machen und unsere Seite ist fertig. Und damit sind wir meiner Meinung nach wieder auf dem richtigen Weg. Geben wir einfach Hallo auf no.com. Das Telefon muss runter gehen, sagen wir mal 12, dann wird es gut aussehen. Es sieht gut aus. Wir können auch die Telefonnummer plus 91 eins, eins, zwei, drei, vier, fünf, sechs eingeben die Telefonnummer plus 91 eins, eins, . Wenn Sie hierher gehen, können wir sehen, dass wir jetzt die Kontaktdaten haben, und wir können mit der Platzierung spielen. Aber im Grunde können Sie dafür einfach einen sehr minimalen oder kleineren Platzbedarf für die Fußzeile verwenden einen sehr minimalen oder kleineren Platzbedarf für die Fußzeile Lass es uns einfach ausrichten. Lass uns jetzt sehen. Ich finde, es sieht gut aus. Wenn Sie möchten, können Sie ein bisschen mehr hinzufügen indem Sie einige Symbole verwenden und wie Sie das Symbol hinzufügen. Gehen Sie erneut zu Plugin, und wenn Sie kein Plugin haben, können Sie gehen. Ich zeige dir nur, wie man ein Plugin hinzufügt. Gehe zur Startseite. Und von zu Hause aus können Sie sehen, dass es einen Tab namens Community gibt. Und wenn du zur Community gehst, kannst du sehen, dass du Plugins hast. Und wenn Sie nur nach dem Symbol suchen, erhalten Sie viele verschiedene Plugins. Wenn du siehst, dass es beim Einstecken einen Tab für ein Plugin gibt, kann ich es einfach öffnen oder einfach öffnen und zu diesem Plug-In hinzugefügt werden. Ich habe bereits einige Plugins für das Icon. Ich benutze Fs schon ziemlich oft für Icons und ich mag sie wirklich. Lass es uns einfach stapeln. Jetzt, okay. Lass uns einfach sehen , welche wir wollen. Wir wollen normale Männer und wir haben hier unsere männliche Ikone. Also, was auch immer du benutzen willst, ich werde einfach dieses benutzen. Außerdem haben wir Pow. Auch für Pawn werden wir ICA verwenden. Lass uns diesen benutzen Im Moment, wenn ich Drag-and-Drop mache, ist das nur Drag-and-Drop, aber nicht innerhalb dieses detPTFrames. Ich werde es einfach nach außen entfernen und wieder verschieben Jetzt ist es also in diesem Desktop. Lass es uns einfach runterskalieren. Im Moment sind es 24 mal 24 Pixel und das auch. Was wir tun werden, ist, es auf 16 mal 16 Pixel zu reduzieren. Und wenn Sie mit, äh, festen Verhältnissen arbeiten, können Sie einfach auf diese Schaltfläche klicken. Ich werde das Seitenverhältnis sperren oder entsperren . Im Moment, da wir ein Symbol haben, ist dieses bereits gesperrt. Irgendwann wirst du das freigeschaltet haben und wenn du eins erhöhst, wird das andere nicht erhöht, weil es freigeschaltet ist Was Sie tun müssen, ist, wenn Sie dies nicht aktiviert haben, es einfach einschalten Wenn Sie jetzt den ersten ändern, wird der zweite automatisch geändert. Das Gleiche gilt für das. Und wir werden einfach, äh, dies und das auswählen und Shift Control drücken, Shift A drücken, wodurch diese beiden im automatischen Layout hinzugefügt werden. Automatisches Layout ist einfach eine schnellere Methode, Dinge auszurichten und Platz zwischen allem zu schaffen, sodass Sie nicht einfach Ihre Tasten benutzen müssen , um Dinge hier und da zu verschieben, ich drücke einfach Shift A und es wird es zum automatischen Layout hinzufügen und Sie können sehen, dass der Abstand zwischen fünf ist, ich werde ihn einfach auf vier reduzieren und alles ist ausgerichtet. Das Gleiche gilt für das. Mal sehen, wie es funktionieren wird. Wenn ich so weitermache und dann Auto Yout auswähle und drücke, wirst du sehen, dass alles ausgerichtet wird, aber der Raum ist immer noch groß Also kann ich einfach hier klicken, vier drücken und fertig Bei diesen beiden werde ich jetzt wieder Shift A drücken. Jetzt siehst du, dass es ausgerichtet wird. Der Abstand, 16, platzieren wir ihn da. Das Gleiche gilt für lass uns einfach sehen, dass das gut aussieht. Wir werden den Abstand überprüfen. Lassen Sie uns 24 Pi und auch 24 hier behalten. Jetzt werden wir den zusätzlichen Speicherplatz entfernen und wie Sie das machen ist einfach, äh, mit der rechten Maustaste zu klicken. Wenn Sie mit der rechten Maustaste klicken, wird der Rahmen ausgewählt und Sie sehen, wenn ich zum Rand komme, ändert sich das Cursorsymbol. Drücken Sie dann die Strg-Taste und bewegen Sie es dann einfach nach oben. Was Sie jetzt haben, lassen Sie es einfach aktualisieren und was Sie jetzt haben, ist das, ich verschiebe es einfach. Ich werde mich hier irgendwo hinbewegen. Was Sie jetzt haben, ist eine sehr minimale Fußzeile, die gut aussieht Sie haben also Ihren Namen und auch die E-Mail und die Nummer. Sehr minimal, sehr einfach. Und so erstellen Sie eine sehr einfache Titelseite für das Design einer Portfolio-Website. Also im nächsten Kapitel. Was wir tun werden, ist, dass wir auch Seite „Über uns“ und „Kontakt“ entwerfen, wir können ein Formular entwerfen oder wir können, wenn Sie möchten, es einfach hinzufügen oder mit LinkedIn verknüpfen, was meiner Meinung nach ganz gut funktioniert. Lassen Sie uns auch eine weitere Seite über die Seite entwerfen und dann haben Sie eine sehr einfache, minimale Website für Ihr Portfolio. Ich denke, du hast bisher Spaß gehabt, weil ich viel Spaß daran habe, das zu gestalten. Es ist also sehr schnell, sehr einfach. Und du kannst einfach anfangen, deine eigenen, du weißt schon, verschiedene Design-Tweaks und verschiedene kleine Dinge hinzuzufügen verschiedene Design-Tweaks und und es einfach zu deinem eigenen machen Also ja, ich freue mich wirklich darauf. 6. Entwerfen der Info-Seite + Prototyping: Willkommen zurück. Und jetzt, wo wir unsere Homepage fertiggestellt haben, wir einfach weiter und machen eine weitere Seite zu einem Abschnitt. Ja. Also fangen wir damit an, einfach diesen TextOpt zu duplizieren und wir tun , dass alle Anleitungen und alles intakt bleiben, und lassen Sie uns einfach diese Dinge entfernen, die wir Wir müssen die Navigationsleiste nicht entfernen und wir müssen auch nicht die Fußzeile entfernen Jetzt, wo wir alles entfernt haben. Was sollte die Seite an mir gut haben? Im Grunde dein Kopffoto und schreib auch auf, dass du erklärst, wer du bist, und das ist etwas, das für jede Person persönlich sein wird . Wenn Sie also, sagen wir, als Fotograf arbeiten, wird das Intro oder der Text im Abschnitt Über mich für Sie anders sein Im Grunde musst du einfach etwas Zeit damit verbringen und einfach, du weißt schon, so schreiben, dass es widerspiegelt, wer du bist Wir beginnen mit dem Hinzufügen von Headshots. Lass uns hier einfach ein Rechteck machen. Und warum ich ein Rechteck mache, ist, dass ich ein Bild in dieses Rechteck einfügen möchte. Wählen wir es einfach aus, gehen wir zu Plug-ins und wieder verwenden wir das Splash-Plugin. Richtiger Headshot. Mal sehen, wir wissen, dass der Name John Doe ist, also wählen wir etwas, das John Doe widerspiegelt. Also lasst uns etwas finden , das gut aussieht. Wie wäre es mit etwas Lustigem, nach dem ich suche. Sollen wir das einfach benutzen? Vielleicht können wir gehen, wir können diesen benutzen. Das hat einen toll aussehenden Strauß auf der Rückseite. Lass uns das benutzen. Lassen Sie uns den Abstand überprüfen. Ich schätze, wir werden es in der vorherigen Version verschieben, wir haben den Abstand bei 96. Wir werden hier auch 96 machen. Wir werden nun einen Absatz schreiben, der Ihnen sagt, worum es bei diesem John Do geht. Was wir tun werden, ist etwas Text hinzuzufügen, wir drücken T oder du kannst einfach hierher kommen, hier klicken auf und was wir hier tun werden, ist klicken und ziehen. Was es tun wird, ist ein Textfeld einzufügen. Also lass uns einfach ein Textfeld hier platzieren und ich werde einfach etwas schreiben Lam Epson Es gibt etwas. Ich habe das geschrieben, weil ich es verwenden wollte, sagen wir, wir werden KI verwenden, um das umzuschreiben Figma verfügt jetzt über integrierte KI-Fähigkeiten, sodass Sie diese nutzen können Diese Funktion heißt Rewrite this und ich werde ihr nur einen kleinen einleitenden Absatz für die Seite „Über mich“ des UX-Designers John of UI geben einen kleinen einleitenden Absatz für die Seite „Über mich“ des UX-Designers John of , der bei Google arbeitet Sein Name ist John Doe. Mal sehen, ob sie es umschreiben können. Und es wird einige Zeit dauern und es wird dir genug geben , ich glaube, es ist gut genug Lass uns das einfach benutzen. Was ich tun werde, ist einfach den Abstand zwischen den Zeilen zu vergrößern. Machen wir es zu 50%. Wir versuchen nur, einen Teil des Platzes dort auszufüllen. Geben wir ihm etwas Platz. Jetzt haben wir unsere Seite, die ungefähr so aussieht. Und du kannst sehen , dass es gut aussieht. Es sieht gut aus. Es ist einfach und passt ziemlich so ziemlich der Titelseite , die wir entworfen haben. Was wir auch tun können, ist, sagen wir, ein paar Kontaktinformationen hinzuzufügen . Sie können mir unter John doe@gmail.com schreiben . Irgendwas, so etwas. Sehr einfach, äh, sehr minimal. Sie können auch versuchen, es ein bisschen kleiner zu machen , damit es den Raum ausfüllt und auch etwas mehr Leerraum hinzufügen. Also ja, und alle weiteren Links , die du hinzufügen musst, kannst du einfach hier hinzufügen. Wenn du auch einige persönliche Dinge wie einige Hobbybilder präsentieren möchtest einige persönliche Dinge wie einige , kannst du sie auch hier platzieren. Aber im Moment werde ich das nicht tun. Aber Sie können im Internet viele verschiedene Inspirationen dafür finden , wie die Website der Leute aussieht. Ich werde es einfach geben und wir sind so gut wie fertig. In diesem Kurs ging es also nicht darum, mehr zu tun, sondern einfach etwas zu entwerfen das gut aussieht und das man in sehr kürzerer Zeit machen kann, aber es wird trotzdem sehr gut und professionell gemacht aussehen. Eine weitere Sache, die wir tun müssen, ist wenn Sie sich bereits auf der Info-Seite befinden, es gibt keinen klaren Unterschied zwischen dem aktiven Link und dem Standard-Link. Wir werden also einfach, sagen wir , ein Rechteck hinzufügen, damit die Leute wissen, dass sie sich auf dieser Seite befinden. Es gibt viele verschiedene Möglichkeiten, dies zu tun, aber dies ist die einfachste und schnellste, die Sie tun können Sie können auch versuchen, einen Strich wie den, den wir gemacht haben, auf diese Ansichtsschaltfläche zu setzen gemacht haben, auf diese Ansichtsschaltfläche und den aktiven Strich einfach so anzuzeigen Aber vorerst werde ich einfach damit weitermachen. Und was den Kontakt angeht, denke ich, dass wir stattdessen einfach auf LinkedIn ändern können , sodass viele Kontaktinformationen bereits auf der Website angegeben sind, aber wir wollen es dem Personalvermittler nur einfacher machen , auf LinkedIn zu gehen Wir haben gerade LinkedIn benannt. Das werden wir auch hier tun. Wir werden es LinkedIn nennen. Und hier haben wir es. Das ist unsere Homepage, und so sieht sie sehr sauber aus, sehr minimalistisch. Lassen Sie uns, während wir das machen, einfach ein bisschen Prototyping machen Was wir tun werden, ist, zur Registerkarte Prototyp zu gelangen, und was wir tun werden, ist Sie jetzt sehen können, dass Sie überall, wo ich mit der Maus hinfahre, dieses Plus-Symbol erhalten Lass uns weiter sagen, wenn du willst, das ist eine Gruppe Das wird als Gruppe verlinkt. Wenn du also einfach reingehen willst, doppelklicke einfach und du gehst zu A. Ich ziehe einfach und du wirst einen Pfeil herauskommen sehen und ich werde ihn einfach auf diesen Dreiertext zeigen, was bedeutet, dass er jetzt verlinkt ist über ist jetzt mit dieser Seite verlinkt. Wir haben einige Optionen für die Interaktion, wie die Interaktion stattfinden wird. Entweder wird es ein Klick oder eine Verzögerung oder so weiter sein. Das Einfachste ist, dass wir uns für Onclick entscheiden und einfach alles genau so lassen werden einfach alles genau so lassen Wenn du jetzt zu deiner Präsentation zurückkehrst und nachschaust, ob du auf „A“ klickst, erscheint dieses Feld. Das bedeutet , dass es einen aktiven Prototyp-Link gibt , der von A ausgeht. Wenn ich auf „Über mich“ klicke, siehst du, dass sich die Seite ändert Es geht im Grunde darum, Seiten zu verlinken, wie Sie es auf einer echten Website tun, und so haben Sie es getan. Aber wir brauchen auch eine Möglichkeit, zur Homepage zurückzukehren. Was wir tun werden, ist dieses Logo zu verwenden, wir werden es einfach zurück zur Homepage zeigen. Jetzt hast du es. Jetzt , wenn ich hier klicke, du, bin ich wieder hier. Ist es nicht cool? Wenn Sie neu bei FigMa sind, wird es einige Zeit dauern , bis Sie sich mit dem Prototyping oder der bloßen Verwendung des Zahnes vertraut Ich glaube, das ist es, was wir in diesem Kurs behandeln wollten. Ich könnte einen längeren Kurs mit fortgeschritteneren Funktionen machen, aber sei dir bewusst, dass dieser Kurs für sehr einfache, sehr schnelle Designübungen gedacht war , die du machen und deine Portfolio-Website erstellen kannst. Wenn du Fragen hast, kannst du einfach Skillshare kommentieren oder du kannst mir einfach eine Anfrage schreiben Außerdem fordere ich Sie dringend auf, Ihr eigenes Projekt zu erstellen und im Projektbereich zu posten , damit ich sehen kann, welche großartigen Dinge Sie machen Wenn Sie Hilfe benötigen, stehe ich Ihnen für Feedback zur Verfügung. Was auch immer Sie machen, ich gebe Ihnen Feedback dazu. Bitte posten Sie Ihre Projekte, und ich freue mich darauf, Sie alle zu sehen Vielen Dank und ich hoffe, es hat Ihnen gefallen. Wenn Sie sich diesen Kurs über Neujahr oder Weihnachten ansehen , wünsche ich Ihnen frohe Weihnachten und einen guten Rutsch ins neue Jahr Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Tschüss. 7. Vielen Dank: Wir haben also das Ende des Kurses erreicht und ich hoffe, Ihnen hat das Lernen Spaß gemacht und Sie arbeiten bereits an der Gestaltung Ihrer Portfolio-Website. Wenn Sie also etwas entworfen haben, würde ich es gerne sehen und wenn Sie Hilfe oder Feedback wünschen, stelle ich Ihnen das auch gerne zur Verfügung. Für das Klassenprojekt möchte ich, dass du das Design hochlädst an dem du gerade arbeitest oder das du bereits fertiggestellt hast, und wenn du irgendwelche Zweifel hast, zögere nicht, mich zu fragen. Ich hoffe, dieses neue Jahr wird für Sie sehr erfreulich und produktiv Es macht mir wirklich Spaß, Ihnen diesen Kurs beizubringen , und ich hoffe, Sie haben ihn auch genossen Vielen Dank und einen schönen Tag.