So erstellst du ein UX-Portfolio und wirst wahrgenommen

1. Einführung: Willkommen, um ein UX-Portfolio zu erstellen und sich bemerkbar zu machen. Ich bin Jasmine. Ich bin ein UX/UI-Designer, der in Seattle lebt, und ich habe Erfahrung in Unternehmen wie Starbucks und Microsoft. Die Sache, die mein Einstiegspunkt war, um Interviews zu bekommen und sogar angeheuert zu werden, war mein Portfolio. Nicht, weil es das wunderschön gestaltete Stück Arbeit ist, sondern weil es mich und meinen UX-Prozess zeigt. Jetzt müssen Unternehmen mehr denn je sehen, wie Sie ein Projekt von Anfang bis Ende erstellen. In diesem Kurs gehen wir Schritt für Schritt durch, alle wichtigen Komponenten, die Sie in Ihrem Portfolio benötigen, wie Sie es auslegen, veröffentlichen und großartige Beispiele betrachten. Ich werde auch Design- und Publishing-Tipps mit Webflow und Squarespace teilen. Um alles so einfach wie möglich zu machen, habe ich ein Arbeitsblatt erstellt, in dem Sie Ihre eigenen Inhalte eingeben können, um Ihnen den Einstieg zu erleichtern. Fühlen Sie sich frei, Ihr Portfolio jederzeit zu teilen, um Feedback zu erhalten. 2. Persönliche Einführung: Der erste Abschnitt Ihres Portfolios wird Ihre persönliche Einführung sein. Hier stellen Sie sich Ihrem potenziellen Arbeitgeber vor. Sie möchten ein wenig über Ihre Fähigkeiten, Erfahrungen aus der Vergangenheit und ein wenig über Ihre Persönlichkeit sprechen . Es ist großartig, ein Foto hinzuzufügen. Denken Sie daran, dass Unternehmen Menschen einstellen, so dass sie ein Gefühl davon bekommen wollen, wer Sie sind und was Sie tun können. Eine Sache, die Sie im Auge behalten sollten, ist, an welcher UX-Position Sie interessiert sind. Sie sollten Ihr Portfolio an die Mitarbeiter anpassen, mit denen Sie in den Branchen arbeiten möchten, in denen Sie arbeiten möchten. Wenn Sie Interaktions-Designer sein wollen, sollten Sie Ihr Portfolio so anpassen, dass diese Fähigkeiten speziell hervorgehoben werden. Eine großartige Sache ist es, eine aktuelle Stellenausschreibung auf LinkedIn zu erforschen. Sie können sehen, was sie speziell in Bezug auf Erfahrung und Fähigkeiten suchen, und achten Sie darauf, diese in Ihrer persönlichen Einführung zu erwähnen. Ihre persönliche Einführung wird zwei Schlüsselkomponenten haben. Die erste ist Ihre Schlagzeile. Ihre Überschrift besteht aus Ihrem Namen, Ihrem Wohnort und Ihrer bevorzugten UX-Rolle. Hier möchten Sie viel recherchieren, an welchem Teil des UX-Prozesses Sie beteiligt sein möchten. Wollen Sie mehr auf der Forschungsseite oder vielleicht auf der visuellen Design-Seite sein? Ich habe eine Liste mit vielen verschiedenen Optionen hier im Arbeitsblatt, um Ihnen den Einstieg zu erleichtern. Stellen Sie sicher, dass Sie recherchieren, wenn Sie mit einigen dieser Begriffe nicht vertraut sind. Die zweite Komponente Ihrer persönlichen Einleitung ist Ihre Beschreibung. Dies ist der Hauptteil Ihrer persönlichen Einleitung. Hier werden Sie ein wenig Details über Ihre Fähigkeiten, Ihre Erfahrung und Ihre Persönlichkeit eingehen . Eine wirklich wichtige Sache zu wissen ist, dass viele Leute, die sich Ihr Portfolio ansehen, tatsächlich Personalvermittler sind. Die UX-Abteilung wird einem Recruiter eine Liste von Anforderungen geben, Regel Liste in Fähigkeiten von Dingen, die sie suchen. Dann wird dieser Recruiter in Ihr Portfolio schauen , um zu sehen, ob Sie einige dieser Fähigkeiten entsprechen. Stellen Sie sicher, dass Sie sich eine Liste ansehen. Die, die ich hier im Arbeitsblatt habe, ist ein guter Ort, um mit verschiedenen allgemeinen UX-Fähigkeiten zu beginnen , über die Sie nachdenken sollten. Nehmen Sie es zurück zu Ihren Recherchen und sehen Sie auch verschiedene Unternehmen und Rollen suchen. Die meiste Zeit passen sie zu dem, was der Personalvermittler sucht. Im Arbeitsblatt. Ich habe eine Vorlage, in der Sie Ihre eigenen Inhalte eingeben können, um Ihnen beim Einstieg mit einer Selbstbeschreibung zu helfen. Grundsätzlich geben Sie einfach Ihre eigenen Informationen in die blau markierten Felder ein. Fühlen Sie sich frei, diese Vorlage zu ändern, wie Sie brauchen. Dies ist nur, um Ihnen den Einstieg zu erleichtern, falls Sie keine Ahnung haben, was Sie schreiben sollen. Hier ist ein großartiges Beispiel für eine persönliche Einführung. Das ist Tom Petty UX-Portfolio. Es beginnt mit einem großartigen Foto von Tom, der einen Vortrag gibt, gefolgt von Toms Schlagzeile, die diesen Austausch Satz, der erklärt, was Tom tut, wie Design-Produkte, Dienstleistungen, etc. Dann geht es in ein wenig etwas Detail über das, was Tom getan hat, Sachen, die er gerne macht, und eine kurze Beschreibung, was Sie in seinem Portfolio finden können. Dies ist ein großartiges Beispiel, um Ihnen den Einstieg zu erleichtern. Er hat auch ein wirklich sauberes und schlichtes Design. 3. Einführung von Projekten: Nach Ihrer persönlichen Einführung möchten Sie eine Liste aller Projekte haben, an denen Sie eine Fallstudie durchführen werden. Dies wird eine Liste von etwa 3-5 Projekten insgesamt sein. Sie wollen kurz nur ein wenig über das Projekt erwähnen und dann einen Link zur Fallstudie haben. Lassen Sie uns kurz eine Checkliste aller Dinge betrachten, die Sie in Ihre Projekteinführung aufnehmen sollten. Zuerst möchten Sie einen Titel des Projekts haben. Dies wird höchstwahrscheinlich nur der Titel des Produkts selbst sein. Dann möchten Sie haben, für wen Sie dieses Projekt gemacht haben, entweder Ihren Arbeitgeber oder Ihren Kunden oder vielleicht sogar sich selbst, dann möchten Sie die Dauer haben, die Sie brauchten, um das Projekt abzuschließen. Dann ist das Wichtigste eine Beschreibung des Projekts. Dies sollte etwa drei Sätze lang sein, in denen Sie kurz diskutieren, was es ist. Außerdem möchten Sie einen Link haben, direkt am unteren Rand, zur Fallstudie selbst. All dies sollte mit einem Foto einhergehen. Das Foto sollte qualitativ hochwertig sein. Es könnte sogar ein Video oder ein GIF sein, aber nichts zu tief, gerade genug, um unsere Aufmerksamkeit zu erregen und uns wollen klicken, um mehr in der Fallstudie zu erfahren. Dies sind einige wirklich großartige Beispiele für eine Projekteinführung. Beachten Sie, dass alle Fotos in hoher Qualität, einen auffälligen klaren Titel, gefolgt von einer Beschreibung und einen großartigen CTA haben, um die Fallstudie selbst anzusehen. All dies sind wirklich großartige Beispiele für eine Projekteinführung. Ich würde sehr empfehlen, diese als Beispiel für Sie zu verwenden. 4. Fallstudien: Um Ihre Fallstudie zu beginnen, werden wir alle Dinge, die Sie in Ihrer Projekteinführung hatten, neu auflisten. Es ist schön, ein Bild zu malen und hinter den Kulissen Kontext zu geben , wie dieses Projekt zusammenkam. Liste, was war Ihre Rolle in diesem Projekt? Für welche Firma oder Kunde haben Sie das getan? Welches Projekt ist das? War es für iOS, Android, war es eine Website? Führen Sie die Dauer des Projekts erneut auf. Am wichtigsten ist, mit wem haben Sie gearbeitet? Wie viele Designer, Ingenieure, Projektmanager, vielleicht haben Sie sogar mit dem CEO gearbeitet. Als Nächstes möchten Sie das Ziel des Projekts auflisten. Was war die größte Herausforderung und wie haben Sie den Erfolg gemessen? Hatten Sie eine bestimmte Idee oder Erwartung für das Projekt, als Sie begonnen haben? Danach möchten Sie in den Prozess gehen. Hier werden Sie einen kurzen Überblick über all die verschiedenen Phasen geben , an die Sie gedacht haben. Denken Sie in Schritten über Ihre Projekte nach und listen Sie sie auf. Lassen Sie uns wissen, auf welche Schritte wir achten sollten. Hier finden Sie eine Liste verschiedener Prozessmethoden, die Sie in Ihrer Gliederung verwenden können. Zum Beispiel, wie hat dieses Projekt begonnen? Hat es mit einem Geschäftstreffen angefangen? Hat es mit der Forschung angefangen? Denken Sie darüber nach, wo das Projekt begann, woher das Problem kam. Wie wurde das Problem identifiziert? Dann möchten Sie darüber nachdenken, wohin Sie aus der Forschung gegangen sind. Haben Sie einen Brainstorming mit den Designern? Hast du gerade angefangen, sofort zu testen? Verwenden Sie diese Prozessliste erneut als Beispiel und denken Sie über alle verschiedenen Phasen nach. Idealerweise müssten Sie mindestens fünf verschiedene Phasen durchsprechen. Aber wieder, das wird subjektiv für Ihr Projekt selbst sein. Hier ist ein Beispiel für einen kurzen Überblick über das Projekt von jemandem. Er listet Forschung, Interaktionsdesign, visuelles Design und Front-End-Entwicklung auf. sind all die großen Schritte, die er im Detail für seine gesamte Fallstudie eingehen wird. Als Nächstes ist dein Zusammenbruch. Hier gehen Sie in jeden einzelnen Schritt und erklären, was passiert ist. Dies ist die Zeit, um den von Ihnen umrissenen Prozess näher zu bringen. Versuchen Sie, alle Visuals auf dem Weg einzubeziehen. Haben Sie ein paar frühe Skizzen, die wir sehen können? Sie können eine Vorschau des endgültigen Projekts oben auf der Seite anzeigen, aber Sie möchten sicherstellen, dass relevante Grafiken auf dem Weg angezeigt werden. Am Ende der Aufschlüsselung sollten diese Arten von Fragen beantwortet werden. Wer ist die Zielgruppe? Von welchen Personas musstest du arbeiten? Wo sind sie Kompromisse? Was waren die KPIs? Denken Sie daran, Ihren individuellen Beitrag auf dem Weg hervorzuheben. Sehen wir uns nun ein Beispiel für eine Fallstudie an. Das ist mein Freund Wilian Portfolio und das ist eines seiner Projekte. Wenn Sie zum ersten Mal auf der Seite landen, hat er eine große visuelle Referenz des Projekts selbst. Es nennt sich Vacaybug. Es ist wirklich großartig ganz oben in Ihrer Fallstudie, ein abschließendes Mock-up dessen zu haben , was das Projekt ist oder einen Hinweis darauf, worauf wir gerade eingehen werden. Nach der visuellen Referenz möchten Sie die Informationen aufschlüsseln, die Sie in Ihrer Projekteinführung hatten, z. B. Ihre Rolle, den Kontext hinter den Projekten, wie z. B. die Dauer, einzelnen Beitrag sowie mit wem Sie gearbeitet haben, welche Art von Projekt das ist, und Live-Links zu der Website selbst. Hier können wir sehen, wo Wilian den gesamten Prozess dieses Projekts umreißt. Wir wissen, dass wir über Forschung, Interaktionsdesign, visuelles Design, Marketing und Produktdenken sprechen werden. Automatisch können wir sehen, was die verschiedenen Phasen für diese Fallstudie sind. Wenn wir dann nach unten scrollen, können wir sehen, dass Wilian jeden Abschnitt, aller Prozesse auf eine wirklich große und mutige Weise gebrochen hat. Jetzt wissen wir, dass wir im Begriff sind, alles über die Forschung zu lesen , die für dieses Projekt durchgeführt wurde. Wenn wir nach unten scrollen, können wir sehen, dass es visuelle Referenzen mit den Ergebnissen, den Fragen, die beantwortet wurden, zu gehen . Hier haben wir verschiedene Persönlichkeiten, für wen dieses Projekt ist. Personas sind eine gute Möglichkeit, das Bild zu malen, wer Ihre Zielgruppe ist, was eine der Fragen ist, die Sie in Ihrer Fallstudie beantworten möchten. Schließlich, nachdem wir diese Wettbewerbsanalyse gesehen haben, sollten wir die nächste Phase sehen, nämlich die Interaktionen. Es ist wirklich wichtig, Skizzen und Wireframes mit niedriger Wiedergabetreue zu haben. Normalerweise beginnen Sie in einem UX-Prozess mit Low-Fidelity-Skizzen, damit es das Bild malen kann , das Sie am gesamten Prozess beteiligt waren. Hier skizziert Wilian all die verschiedenen Skizzen und was sie dazu geführt haben. Wenn wir dann scrollen, können wir sehen, dass wir jetzt in der dritten Phase sind, was die Hinrichtung ist. Hier ist, wo wir anfangen, letzte Morkups zu sehen. Ich werde auch einen Link zu dieser Fallstudie haben, so dass Sie durchgehen und wirklich alle Details lesen können. Ich möchte nur einen kurzen Überblick über die Dinge geben , die Sie in Ihre Fallstudie aufnehmen sollten. Beachten Sie, dass jede visuelle Referenz eine Menge Kontext hat, was wir betrachten. Sie möchten nicht nur alle Ihre visuellen Referenzen ablegen. Sie möchten sicherstellen, dass Sie sie in Ihrem Prozess genau so auflisten. Es sieht so aus, als wären wir fast am Ende des Projekts. Ich möchte diesen Abschnitt der Fallstudie notieren, der den Erfolg misst. Sie möchten sicherstellen, dass zu Beginn der Fallstudie erwähnt wird, was das Ziel dieses Projekts ist, und dann am Ende, um zu sehen, haben Sie dieses Ziel erreicht? Was hättest du anders machen können? Dies ist etwas, das viele Fallstudien vermissen, sogar solche, die Phasen und viele visuelle Referenzen haben. Sie zeigen nicht unbedingt, ob das Projekt erfolgreich war oder nicht, was wirklich wichtig ist. Um mit Ihrer Fallstudie zu beginnen, schauen wir uns eine Checkliste mit einigen Dingen an, über die Sie nachdenken sollten. Zuerst möchten Sie Ihr Projekt in Schritten umreißen. Ersetzen Sie diese Schritte durch tatsächliche Phasen Ihres Projekts. Ändern Sie zum Beispiel Schritt 1 zu Recherche, wenn dies der erste Schritt in Ihrer Fallstudie war. Dann möchten Sie darüber nachdenken, einige dieser Fragen auf dem Weg zu beantworten. Wie hat dieses Projekt begonnen? Welches Problem versuchen Sie zu lösen? Dann möchten Sie darüber nachdenken, für wen Sie dieses Projekt entworfen haben. Haben Sie Brainstorming? Wenn ja, mit wem? Hier sind einige Visuals auf dem Weg, über die Sie nachdenken sollten, wie Personas, Screenshots, Recherchen, Datenskizzen. Ich habe eine Vorstellung von verschiedenen Visuals, die Sie vom Anfang Ihrer Fallstudie bis zum Ende einschließen sollten , können Sie die Visuals hier sehen. Um Schritt drei, wie haben Sie Ihre Ideen getestet? Woher wussten Sie, welche Idee richtig war? Haben Sie Wireframes oder Prototypen? Mit wem haben Sie gearbeitet, um dieses Produkt zu versenden? Wie hat sich das auf dem Weg verändert? Haben Sie verschiedene UI-Optionen erkundet? Wenn ja, zeig das. Dann möchten Sie am Ende Ihres Projekts endgültige Mockups zeigen. Du willst uns zeigen, was das Endergebnis war. Haben Sie das Problem gelöst, das Sie in Schritt 1 aufgeführt haben? Dies wird eine großartige Möglichkeit für Sie sein, darüber nachzudenken wie Sie Ihre Gedanken sammeln können, wenn Sie sich Ihre Fallstudie ansehen. 5. Design und Veröffentlichen mit Squarespace: Sehen wir uns nun an, Ihr Portfolio zu entwerfen und zu veröffentlichen. Ich werde Webflow und Squarespace verwenden, da beide Tools es wirklich einfach machen, Ihre Inhalte zu entwerfen und zu verwalten. Wenn Sie bereit sind, Ihr Portfolio zu entwerfen, müssen Sie darüber nachdenken, ob Sie Ihr Portfolio von Grund auf neu erstellen oder eine vorhandene Vorlage verwenden möchten . Beide sind wirklich großartige Optionen für UX, es hängt nur davon ab, wie viel Kreativität Sie in Ihrem Portfolio nutzen möchten. Webflow wird es Ihnen ermöglichen, Ihr Portfolio komplett von Grund auf mit Code zu erstellen . Während Squarespace wird Ihnen eine wirklich große Vorlage geben, um zu arbeiten. Das Tolle an UX ist, dass die Arbeit für sich sprechen sollte. Das bedeutet, dass Sie eine Vorlage verwenden und genauso erfolgreich sein können wie jemand, der sein Portfolio von Grund auf neu erstellt. Es hängt wirklich von Ihrer Vision für Ihr Portfolio ab und wie viel Kreativität Sie für notwendig halten, um Ihre Projekte zu kommunizieren. Zum Beispiel, Tom Pettys Portfolio aus dem früheren Kurs, hatte ein sehr sauberes und einfaches Design, etwas, das man sehr gut mit einer Vorlage erreichen konnte. In seinem Portfolio sprach seine Arbeit für sich, und seine Arbeit konnte leicht mit Mock-ups und Fotografien präsentiert werden. Aber auf der anderen Seite, Williams Portfolio aus dem Fallstudienbeispiel, erstellt sein Portfolio von Grund auf neu, weil er benutzerdefinierte Elemente und Animationen haben wollte , um seine Arbeit zu erhöhen. Diese Animationen und Elemente haben dazu beigetragen, unser Verständnis für sein Projekt zu verbessern. So oder so, beide Tools werden große Optionen für Sie und Ihr Portfolio sein. Stellt sicher, dass alle notwendigen Materialien vorhanden sind, wenn Sie mit dem Entwurf beginnen. Sie müssen in der Lage sein, alle Ihre visuellen Referenzen in Ihren Inhalten, an denen wir bisher gearbeitet haben, anzuschließen . Um mit Squarespace zu beginnen, müssen Sie entscheiden, welche Vorlage Sie verwenden möchten. Hier im Arbeitsblatt habe ich die besten Optionen für das UX-Portfolio. Die erste Vorlage ist Jasper Jin. Dies ist eigentlich Squarespace-Vorlage, die sie mit UX im Hinterkopf erstellt haben. Die Zielseite wird sich auf Ihre Projekte selbst konzentrieren. Eine Sache, die Sie wahrscheinlich bemerken, ist, dass es keinen Platz für Ihre persönliche Einführung hat. Wenn Sie mit dieser Vorlage gehen, müssten Sie direkt unter der Bezeichnung Jasper Jin bearbeiten und einen Abschnitt für Ihre persönliche Einführung hinzufügen. Das Tolle an Squarespace ist, dass es eine Liste von Designoptionen hat , die Sie per Drag & Drop in eine beliebige Vorlage ziehen können. Eine davon ist die Absatzoption. Dann wird Ihre Projekteinführung für jedes Ihrer Projekte auf Hover sein. Diese Vorlage zeigt nicht die ausführlichen Beschreibungen, über die wir für Ihre Projekteinführung gesprochen haben, aber es gibt genug Platz, um alle diese Informationen hier zu haben. Das Beste an dieser Vorlage ist die eigentliche Fallstudie Seite. Es hat diese wirklich tolle Animation, wie Sie jeden der verschiedenen Abschnitte animiert nach unten scrollen , was es wirklich leicht zu lesen macht und legt viel Wert auf jede Phase Ihrer Fallstudie. Also, wenn Sie daran interessiert sind, die Scroll-Animation zu haben, würde ich empfehlen, mit Jasper Jin zu gehen. Etwas für Squarespace zu beachten ist, dass Sie Animationen nicht anpassen können. Sie sollten eine Vorlage finden, die die gewünschten Animationen enthält, oder Sie können Webflow verwenden und Ihre eigenen benutzerdefinierten Animationen erstellen. Die nächste Vorlage heißt York. Dieser ist Jasper sehr ähnlich, da er diese Scroll-Animation für die Fallstudienseite hat. Die Sache, die in diesem hier anders ist, ist, dass Ihre Projekteinführungen unterschiedliche Variationen in den Größen haben können. Der Jasper verwendet ein Gitter, in dem jedes Projekt die gleiche genaue Größe haben wird. Während diese, wenn Sie Visuals haben, wo Sie das Gefühl haben, dass Sie die gesamte Breite der Website so aufnehmen müssen , zum Beispiel, sollten Sie vielleicht diese verwenden. Etwas zu beachten ist, dass diese beiden Vorlagen einfache Navigationen ganz oben auf der Website haben, was wirklich wichtig ist. Wahrscheinlich wird Ihre Navigation einen Home-Button haben , der Ihre Projekte und Ihre persönliche Einführung beherbergt, sowie einen Link zu jeder Fallstudie. Dann eine Info-Seite und möglicherweise eine Kontaktseite. Sie können einen Kontaktbereich auf Ihrer Homepage oder unter Ihrem About Bereich auflisten, oder es kann eine eigene Seite haben. Alle sind großartige Optionen. Wenn Sie das Gefühl haben, dass Ihr Kontaktbereich nicht genug Klicks bekommt, würde ich empfehlen, den Kontaktbereich in der Navigation selbst zu haben. Für Ihre Info Seite würde ich mehr ins Detail über Ihren identifizierten Prozess gehen und mehr in Ihre Persönlichkeit gehen. Die nächste Vorlage heißt Stella. Dies ist eigentlich die Vorlage, die ich für mein Portfolio verwendet habe. Das, was mir an dieser Vorlage gefallen hat, war der Projekteinführungsabschnitt. Ich mochte, wie ich einen Text über ein Foto legen konnte , ganz einfach mit dem Learn More Button. Als ich mir diese Vorlage ansah, konnte ich leicht sehen, wie meine Arbeit in diese Abschnitte passen könnte. Ich mochte auch die volle Farbe mit Hintergründen. Ich habe das hier unten für meine Kontaktseite verwendet, und ich habe das Gefühl, dass es wirklich hilft, dass dieser Abschnitt auffallen. Ein Nachteil dieses Portfolios ist, dass es keine Animation auf keiner dieser Seiten hatte. Die einzige Animation, die ich zu meiner hinzufügen konnte, war Parallax Scrollen, das war die einzige Animation, an der ich interessiert war. Glücklicherweise war ich in der Lage, diese Vorlage mit dieser Animation anzupassen, aber die meisten Animationen müssen mit der Vorlage selbst kommen. Die Übergangsanimation, die wir in den anderen beiden Vorlagen gesehen haben, während Sie die Seite nach unten scrollen, war nicht etwas, was ich mit diesem erreichen konnte. Daher ist es wirklich wichtig, sich vorzustellen, wie Ihre Arbeit und Präsentation in diese Vorlagen passen. Sie möchten eine auswählen, die am meisten repräsentiert wie Sie sich vorstellen, dass Ihre gesamte Arbeit angelegt wird. 6. Design und Veröffentlichen mit Webflow: Werfen wir nun einen Blick auf Webflow. Webflow ist ein wirklich großartiges Tool, weil es Ihnen erlaubt, Ihr Portfolio von Grund auf neu zu entwerfen und es zu veröffentlichen, sobald Sie mit demselben Tool fertig sind. Sobald Sie mit dem Entwerfen fertig sind, können Sie auf „Veröffentlichen“ klicken und es geht sofort live. Webflow kommt auch mit Vorlagen. Ich selbst habe keine der Vorlagen von Webflow verwendet, weil ich das Gefühl habe , Webflow zu verwenden, ist es selbst zu entwerfen, aber wenn Sie eine Vorlage verwenden wollten, wenn Sie auf ihrer Hauptwebsite gehen, können Sie Optionen dort. Ich bin mir nicht sicher, ob sie so durchdacht sind wie die in Squarespace erstellten Vorlagen, aber es kann Ihnen helfen, loszulegen, falls Sie mit CSS oder HTML nicht sehr vertraut sind. Jetzt müssen Sie nicht unbedingt Code kennen, um Webflow zu verwenden, aber es ist sehr nützlich. Die Art und Weise, wie Webflow funktioniert, ist es Ihnen eine Design-Schnittstelle ähnlich einer Entwurfswerkzeug-ähnlichen Skizze. Wenn Sie verschiedene Elemente ziehen und ablegen, wie beispielsweise eine Navigationsleiste, wird es nicht so flüssig auf Ihrer Leinwand landen, wie es in einer Designsoftware wäre, und das liegt daran, dass HTML als Framework verwendet wird. Sie müssen verstehen, wie HTML und CSS Inhalte organisieren, um herauszufinden, warum die Dinge nicht so funktionieren, wie sie sein sollten. Dies ist Wilians Portfolio, und wir sind in der Lage, selbst in das Design zu gehen und sehen, wie er einige dieser Elemente geschaffen hat. Sie können ganz am Anfang sehen, dass er hier höchstwahrscheinlich eine Navigationsleiste im linken Bereich verwendet. Hier sind alle Ihre verschiedenen Optionen, mit denen Sie arbeiten müssen. Sie verfügen über Abschnitte, Container, Raster und Spalten. Diese basieren alle auf HTML. Div Blöcke, Listenelemente, Absätze, wieder, alle HTML. Aber sie haben auch erkennbare Elemente, die Sie wie eine Navigationsleiste ziehen und ablegen können. Eine tolle Sache an Webflow ist, dass es versucht Ihnen dabei zu helfen, Elemente zu erstellen, die reagieren. Mit dieser Nav Bar, die wir erstellt haben, könnten wir ganz oben auf dem Bildschirm gehen und klicken Sie auf Tablet-Modus, oder Telefonmodus, um zu sehen, wie diese reagieren, und es sieht aus wie ein Hamburger-Menü ist, wie es reagieren wird. Nun, da dies ein Design-Tool ist, hat Webflow einige Navigationsobjekte wie die in die Software selbst integriert. Wenn Sie möchten, dass die Navigation anders funktioniert, können Sie das auf jeden Fall tun. Gehen wir zurück in den Desktop-Modus. Ihr linkes Bedienfeld wird alle Ihre Layoutelemente sowie Schaltflächen, an denen Sie in Fotos platzieren möchten, enthalten sein. Dann auf der rechten Seite ist, wie Sie alles in Bezug auf Farbe, Schriftauswahl, Abstand zu stylen . Hier ist Wilians persönliche Einführung. Er hat drei Spalten, jede mit einem Foto und einer Beschreibung, ein wenig über das, was er als UX-Designer macht. Wenn Sie etwas Ähnliches haben möchten, würden Sie hier im linken Abschnitt gehen und auf „Spalten“ klicken. Ich werde sie hier platzieren, und dann gibt es mir die Möglichkeit zu entscheiden, wie viele Spalten ich gerne haben würde. Lasst uns drei machen. Jetzt ziehe ich ein Foto ein. Sie können sehen, dass das Foto automatisch linksbündig ausrichten wird. Das liegt daran, dass wir wieder HTML als unser Framework verwenden, und in HTML wird alles automatisch nach links ausgerichtet. Es ist nicht so einfach wie die Verwendung einer Vorlage in dem Sinne, dass wir alles ziehen können, ein Element an eine beliebige Stelle auf der Seite ziehen können. Wir werden tatsächlich in die CSS gehen und arbeiten müssen , um seine Position so zu bekommen, wie wir es wollen. Aber bevor ich das mache, werde ich etwas Text hinzufügen, also gibt es einen Absatz, und zum Glück mit Webflow können Sie die Sachen anderer Leute bearbeiten, ohne wirklich zu speichern. Wilian muss mich anrufen und fragen, was ich mit seinem Portfolio gemacht habe. Es erlaubt Webflow nur, eine Community aufzubauen falls Sie daran interessiert sind, wie andere Leute bestimmte Dinge entwerfen. Sie können ganz einfach auf ihre Website gehen, sie in Webflow öffnen und selbst sehen. Jetzt habe ich ein Foto und ein Absatzelement in jedem Abschnitt. Jetzt möchte ich alle meine Fotos so zentrieren, dass sie in jeder Spalte zentriert sind. Ich gehe hier rüber zum Styling-Panel. Es gibt ein paar verschiedene Möglichkeiten, dies zu tun. Genau hier steuern Sie auf diese Weise das Auffüllen, wie viel auf jeder Seite Ihres Elements ist. Nun, die Sache über das Padding ist, dass Sie überprüfen müssen, wie es auf einem Telefon und auf einem Tablet reagierend aussieht, denn wenn Sie viel Polsterung haben, wird es auch auf Ihr Telefon übersetzen, und dann die Polsterung kann Ihr Bild vollständig aus dem Bildschirm schieben. Dies ist, wie ein wenig über CSS zu wissen , wird Ihnen helfen, wenn Sie Webflow verwenden. Es ist besser, Prozentsätze zu verwenden , zum Beispiel im Padding Abschnitt. Lassen Sie uns nun dieses Bild so neu positionieren, dass es zentriert ist. Wenn wir nach unten scrollen, schauen wir uns an, wie Wilian alle seine Gegenstände zentriert hat. Es sieht so aus, als hätte jede Spalte ihre eigene Polsterung. Dieser grüne Abschnitt stellt hier die Polsterung dar. Jetzt haben wir alle unsere Bilder zentriert, und wir haben ein sehr ähnliches Säulenstyling, das Wilian hat. Ich möchte nur zur Kenntnis nehmen, dass das Tun dieser Dinge im Vergleich zur Verwendung einer Vorlage ein wenig Zeit in Anspruch nimmt. Mit einer Vorlage können Sie leicht einen Abstandshalter hinzufügen, z. B. auf Squarespace, der nur ein Drag & Drop ist, und Sie können Dinge sofort zentrieren. Natürlich war Webflow nicht furchtbar schwer, aber bestimmte Dinge werden ein wenig länger in Webflow dauern , weil Sie es von Grund auf neu erstellen. Wenn Sie die Zeit haben, Ihr Portfolio vollständig auszublenden, würde ich empfehlen, es zumindest zu versuchen, zu sehen, ob es für Sie ist. 7. Schlussbemerkung: Vielen Dank, dass Sie diesen Kurs absolviert haben. Lassen Sie mich wissen, wenn Sie Fragen zu Ihrem UX-Portfolio haben und überprüfen Sie das Arbeitsblatt. Es wird Links zu allen Ressourcen, zusätzliche Beispiele und Tipps und Tricks haben. Vergewissern Sie sich, dass Sie Ihr Portfolio verknüpfen, damit Sie Feedback erhalten können. Danke.