Dein Online aufbauen

1. Einführung: Hallo zusammen. Im heutigen Video geht es darum, wie Sie Ihre UX-Designportfolio-Website erstellen. Ich bin Kristine und ich bin eine UX-Slash-Produktdesignerin und arbeite in San Francisco. Dieses Video ist eine Schritt-für-Schritt-Anleitung, wie Sie Ihr Portfolio in weniger als einer Stunde erstellen können. Dies ist das Portfolio, das ich direkt aus meinem UX-Design-Bootcamp heraus erstellt habe. Und es ist dasselbe Portfolio , das mir geholfen hat, meinen ersten Vollzeit-UX-Design-Job zu bekommen, nachdem einen Monat lang mein Bootcamp für dieses Tutorial abgeschlossen habe. Ich werde Wix verwenden, um meine Website zu erstellen. Ich empfehle auch niemandem, der mit UX-Design anfängt , seine eigene Website zu programmieren? Nein, nein, nein, vergeuden Sie nicht Ihre Zeit damit. Ich weiß , dass einige Leute diesen Rat anbieten und vielleicht ist es das, woran sie wirklich interessiert sind , es sei denn, du wirst Entwickler und genau das willst du tun. Verschwenden Sie keine Zeit damit, Programmieren zu lernen , denn es ist ein Ganzes, ein anderes Biest. Ich denke nicht, dass es sich wirklich lohnt dass Ihre Zeit Energie und Konzentration auf das nimmt , was wirklich wichtig ist, nämlich dass Sie Ihre Designs verbessert und die Inhaltsstrategie Ihres Falls wiederholt haben. Studien. Ich bin auch kein Fan davon nur PDF-Versionen Ihres Portfolios zu haben. Wenn Sie sich für eine Arbeit in der Technik bewerben, sollten Sie tun, was ist Industriestandard? Und was der Industriestandard ist, ist, dass Sie eine Portfolio-Website haben. UX-Bootcamps lernen Sie nicht , wie Sie Ihre Portfolio-Website erstellen. Sie geben dir Projekt-Aufforderungen, damit du deine Modelle erstellen und Ergebnisse erstellen kannst. Sie werden Ihnen jedoch nicht wirklich beibringen wie Sie Fallstudien schreiben oder wie Sie einen Website-Builder verwenden , um Ihre Website zu veröffentlichen. Ich habe viele Designer auf LinkedIn angehalten , sich ihre Portfolios angesehen und viele Fallstudien gelesen, um zu verstehen, wie ich meine eigenen Fallstudien strukturieren kann. Alles, was ich heute mit Ihnen teilen werde , war etwas , von dem ich mir wirklich wünschte , jemand hätte es mir damals erzählt oder Inhalte gemacht. Du bist also willkommen. Ich möchte auch klarstellen, dass diesem Video nicht beschrieben wird wie Sie den Inhalt Ihres Portfolios tatsächlich erstellen können. Das wird ein separates Video sein, denn ich möchte nicht , dass dieses Video eine Stunde lang ist. Also hab ich dich. Aber nicht heute ohne weiteres. Lass uns mit dem Bauen beginnen. 2. Deine Portfolio-Website erstellen: Am Ende dieses Videos werden wir etwas erstellen, das wie dieses Portfolio aussieht. Dies sind meine ersten UX-Design-Portfolios. Es gibt also viele Dinge, die ich anders gemacht hätte , wenn ich zurückgegangen wäre. Aber ich werde dir nur zeigen wie es damals aussah. Dies ist ein sehr einfaches Layout dessen, wie ein UX-Design-Portfolio normalerweise aussieht. Daran ist nichts wirklich ausgefallenes. Es ist ein Zwei-mal-Zwei-Raster mit Fallstudien. Und ich würde empfehlen, dass Sie mindestens drei bis fünf Fallstudien haben, von denen mindestens zwei bis drei UX-Design-bezogen sind. Die anderen können eher mit visuellem Design oder Grafikdesign zu tun haben. Die erste Fallstudie , die Sie haben sollten ist das Projekt, auf das Sie stolz sind und das Sie vor Ort interviewen und über das Sie mehr sprechen würden . Also werden wir eine der Fallstudien ausarbeiten , die meine Levi's Fallstudie ist. Was es wirklich ist, ist eine Menge Text und Bilder, die einfach auf eine Seite gestellt werden. An dieser Fallstudie ist auch wirklich nichts besonders ausgefallenes. Es geht wirklich mehr um den Inhalt. Und auch in diesem Video geht es nicht darum , wie man den Inhalt einer Fallstudie erstellt. Ich habe den Inhalt der Fallstudien bereits verfasst und würde sie in ein Word-Dokument in meinen Notizen einfügen. Ich habe den gesamten Inhalt hier geschrieben, Ich habe den gesamten Inhalt hier geschrieben nur weil es einfacher ist, Dinge zu bewegen, ist einfacher, meine Fallstudie dazu zu schreiben und zu bearbeiten, als alles auf meiner Website ändern zu müssen und es gibt weniger Hin und Her, wenn Sie Ihre Fallstudien aufschreiben bevor Sie tatsächlich daran arbeiten Aufbau Ihres Portfolios. Fangen wir also von vorne an. Sie erstellen ein neues Konto und erstellen oben rechts eine neue Website . Und das wird Sie durch die Einrichtung Ihres Portfolios führen. Also möchte ich eine Designer-Website. Ich möchte einfach eine Vorlage auswählen , weil ich dadurch viel Zeit sparen kann. Die Vorlage, die ich gewählt habe. Es gibt viele Vorlagen wie : Oh, diese ist nett. Ich würde mit diesem gehen. Ich glaube, ich habe gesehen, dass dieser von einem anderen Designer benutzt wurde. Der ist ziemlich cool, aber der, den ich benutzt habe, warum kann ich ihn nicht finden. Okay. Ich denke, das liegt daran , dass ich diese Vorlage gerade verwende, also kann ich sie nicht mehr verwenden. Lass uns das machen. Ich bin ein bisschen deprimiert, weil mein Portfolio jetzt ein bisschen anders aussehen wird, aber es ist in Ordnung, okay, ja, das ist eine nette Vorlage. Ich werde einige dieser Dinge entfernen. Das erste, was ich gerne mache, ist zum Themenmanager zu gehen und die Textilien zu wechseln. Ich mag die Textilien von diesem Artikel wirklich, also werde ich sie einfach so behalten, wie es vielleicht der Absatz ist. Ich möchte es in etwas anderes ändern. Ich mag Avenir Light, aber Georgia funktioniert. Okay, lass uns einfach mit dem weitermachen , was hier verfügbar ist. Also werde ich Text, Titel und thematische Texte hinzufügen. Setze Überschrift eins ein. Und das wird Hallo sein, ich bin Christine, werde dort ein Emoji platzieren. Dann bin das eindeutig nicht ich. Also werde ich das Bild ändern, Medien hochladen. Was ich tun werde, ist das zuzuschneiden, damit es mehr mittig ausgerichtet ist. So wie so. Perfekt. Pop auf. Ich mache Chun, Chun, John Buns, Chun, Knöpfe, Knöpfe. Es ist irrelevant. Diese kleinen Texte sind irrelevant. Ich werde auch einen Absatz hinzufügen. Und das Schöne daran ist, dass Sie jeden Text anpassen, anpassen und den Zeilenabstand , damit er nicht so eng aussieht. Ja, das gefällt mir. Okay. Ich werde das ein wenig verschieben, damit das Raster Ihnen hilft, in diesem Bereich zu bleiben , sodass, wenn jemand Ihr Portfolio auf einem iPad betrachtet, all Ihre Inhalte, all wichtige Inhalte befinden sich nicht außerhalb dieses Rasters, sodass Sie alles in einer schönen Ansicht sehen können. Ich werde es einfach rausnehmen. Sie können Social Bar hinzufügen. Was ich am Wix-Editor mag, ist, dass Sie die Umschalttaste gedrückt halten und auf den gesamten Inhalt klicken und ihn einfach nach unten bewegen können. Es ist wie an Figma zu arbeiten. Es ist großartig. Und während wir nach unten gehen, werden wir diesen Bereich nutzen, um unsere Fallstudie zu erstellen. Ich werde tatsächlich die ganze Zeile löschen , weil ich sie setzen werde. Meine Arbeit. Meine Arbeit. Okay. Ich werde nur ein einfaches Zwei-mal-Zwei-Raster haben. Bevor wir das tun, werde ich das Logo hier ändern und mein eigenes Logo hinzufügen. Also werde ich ein Bild setzen, meine Uploads. Wir werden das zur Seite hinzufügen und mir ein Logo besorgen. Hoppla, ich habe das auf Procreate gemalt. Ich wurde geboren und dachte, ich mache mir ein Logo. Eigentlich. Ich werde mich über uns verstecken, es wird Seite über die Arbeit sein. Ich werde das löschen. Okay? Was das ist, du kannst hier einen Anker setzen. Sie können der Site einen Anker hinzufügen. Sobald Sie das hinzugefügt haben, gelangen Sie mit dieser Zeile, wenn Sie darauf klicken , dorthin, wo die Linie beginnt. Ich werde einen Blog hinzufügen weil ich zeigen möchte, dass ich blogge, eine neue Seite erstelle und einen Blog lege und das als meine zweiten Posten habe . Sie sehen also genau hier den Arbeitsblog für dieses Logo, wir werden auch auf die Homepage verlinken. Also gehst du zur Seite Home. Ja. Erledigt. Wenn ich auf einer anderen Seite bin und auf dieses Logo klicke, wird es mich zurück in diesen Biobereich bringen. Es war wirklich wichtig , dass Sie es super klar machen , was Sie tun, wer Sie sind und warum jemand sollte dich beauftragen? meinem aktuellen Portfolio heißt es Produktdesigner, aber als ich zu dieser Zeit zu UX wechselte, habe ich mich als UX-Designer bezeichnet weil ich nicht wirklich Teil eines Produktteams war und es nicht besaß ein Produkt von der ersten Idee bis zur endgültigen Einführung. Ich war nicht der Product Owner. Du kannst einen kurzen kleinen Autotext darüber schreiben , was dich besonders macht. Aber ehrlich gesagt ist die Biografie aller für das UX-Design gleich. Ich würde also nicht zu viel schwitzen oder zu viel Zeit mit diesem Abschnitt verbringen. Gehen wir zum Arbeitsabschnitt, um dieses Zwei-mal-Zwei-Raster zu erstellen Gehen Sie zu Hinzufügen und klicken Sie auf das Kästchen. Los geht's. Hier ist meine Containerbox und ich werde diese Größe für 67 gleich machen. Sobald Sie dieses Feld haben, fügen Sie eine Hover-Interaktion hinzu. Wir werden später eine Hover-Interaktion verwenden. Und dann fügst du ein Bild hinzu. Ich klicke auf die Levi's. Ich habe es hinzugefügt. Ich lege das auf 467 und befestige es an der Box. Und ich werde den Mauszeiger bewegen und Effekte wählen, okay, also werde ich sie wachsen lassen. Ups, ich werde das anpassen. Ich werde es leicht um 110% wachsen lassen . Wenn wir uns das ansehen, wird die Vorschau von Lass uns wachsen. Ich will auch ein bisschen Schatten. Du siehst dort einen kleinen Schatten. Eigentlich sind die Schatten zu stark. Also wenn du den Mauszeiger bewegst, wollte ich auch ein dunkles Overlay haben. Also gehe ich zur Containerbox und setze das auf die gleiche Dimension. Wir benutzen das, damit ich es ausrichten kann. Und dann mache ich das zu 50% undurchsichtig. Und dann möchte ich auch Text hinzufügen. Also werde ich Text hinzufügen, der weiß ist. Und ich nenne es UX-Design. Und dann füge ich eine weitere Überschrift hinzu. Warum? Richten Sie es mittig Okay, lass uns das tatsächlich in der Vorschau ansehen. Jedes Mal, wenn ich den Mauszeiger bewege, wird Levi's UX-Design angezeigt. Jetzt gehe ich zu Control Command oder Command C, füge es ein und füge es einfach auf der Seite ein. Dann tausche ich einfach die Kopie und die Bilder aus . Also klicke ich auf dieses Bild, ändere das Bild, ändere das Bild, setze es für Lineage ein, was eine Grafikdesign-Arbeit war, die ich gemacht habe. Bild ändern, setzen, berühren. Und da haben wir schon das Netz. Und ich gehe rein und ziehe mich um. Der Titel Grafikdesign, Touch, Marketingdesign, UX-Design. Und ich werde die Typen ein bisschen runterkriegen. Lassen Sie uns das in der Vorschau ansehen. Habe die Gerüchtelinie von Levi und führe sie nach. Jetzt werden wir eine erste Fallstudie erstellen . Also gehe ich zu Seiten und erstelle eine Seite namens Levi's Hide. Ja, da haben wir's. Okay, die Seite existiert also noch, aber sie ist jetzt im Menü versteckt. Ich fange an, Texte hinzuzufügen. Ich werde meinen Header hinzufügen. Ich beginne immer damit, zuerst meine Fallstudie aufzuschreiben, und füge dann Bilder hinzu, um das zu ergänzen, was ich in meiner Fallstudie schreibe. Ich habe den Titel also schon so , ich gehe nicht hin und her und ich habe hier eine Menge Texte. Ich werde nur kopieren und einfügen. Fügen Sie also Texte zum Thema Text hinzu. Ich werde auch mehr Zeilenabstand setzen, einfacher zu lesen. Und dann füge ich ein Bild hinzu. Ich werde alle meine Fallstudienbilder in großen Mengen hochladen. Dies ist das Hauptbild. Was ich auch an diesem Wix-Editor liebe , ist, dass Sie mehrere Bilder gleichzeitig hinzufügen können. Wenn ich möchte, kann ich sie einfach per Massenauswahl auswählen und der Seite hinzufügen. werde ich nicht tun, denn das wird ein bisschen chaotisch sein. Also werde ich nur zwei Bilder hinzufügen. Acht, achtundzwanzig, zwanzig mittig, richten Sie es aus. Bumm. Dann kopiere diesen Titel. Und kopiere das Problem und den Prozess und füge es ein. Oh, etwas hat sich geändert. Hoppla. Oh, du kannst auch Command Z und es wird wieder zu dem zurückkehren , was es war. Damals. Ich hatte das Gefühl, dass ich Post-its aufstellen musste. Ich denke, wenn ich mein Portfolio jetzt wiederholen würde, wenn ich das Bootcamp jetzt beendet hätte, würde ich wahrscheinlich keine Post-its schreiben , denn das ist etwas, das viele Junior-Designer formuliert haben. Es sei denn, Sie lassen eine unternehmensweite oder eine sehr große Teaminitiative für eine Brainstorming-Sitzung in einem echten Unternehmen zu. Ich denke nur, dass es nicht so wertvoll ein Artefakt in Ihrer Fallstudie zu haben . Wenn du es sagen willst, kannst du es nicht. Ich würde es wahrscheinlich nicht tun, wenn ich zurückgehen würde. Jetzt, da wir die Levi's Fallstudie erstellt haben, werden wir sie hier mit dieser Miniaturansicht verlinken. Wie werden wir das machen? Klicken wir auf den Container. Gehe zu schweben. Weil du auf den Hover-Status klickst. Sie werden hinzufügen, um den Mauszeiger über eine Schaltfläche zu bewegen. Das ist also ein Hack , den ich bei Google gefunden habe, weil ich nicht herausfinden konnte , wie man eine Seite mit dieser Box verknüpft. Also werde ich das Design ändern. Machen Sie den Hintergrund transparent, gehen Sie zu Text und minimieren den Schaltflächentext vollständig, damit Sie ihn nicht sehen. Du wirst es mit einer Seite verlinken. Ich klicke auf Levi's. Wir sind startklar, also schauen wir uns das mal in der Vorschau an. Oh, es gibt einen Mauszeiger auf den Tasten oder wir lassen das auf 0 Opazität. Also das graue Kästchen und dann zeigen es. Ich werde es anklicken. Es wird die Fallstudie erscheinen, aber ich will diesen seltsamen Übergang nicht. Um die Animation loszuwerden, gehen wir zu Seitenübergängen und klicken auf Keine. Das wird dazu führen, dass wir zurück zur Homepage gehen. Du wirst auf die Levi's Fallstudie klicken und sie wird diese seltsame Animation los , wenn wir fertig sind und sie gemacht haben. 3. Fragen und Antworten: Als ich Sie auf Instagram gebeten habe, Ihre Fragen einzureichen, haben mich viele von Ihnen gefragt wie viele Details sind zu viele Details? Kannst du erklären, was dokumentiert werden sollte und was nicht? Ich versuchte online zu recherchieren. Die Antworten, die ich erhalte, sind so vage, ich nicht sicher bin, welche Teile des Prozesses ich hervorheben oder hervorheben sollte , bevor Sie Ihre Website erstellen, um einen guten Teil der Zeit damit zu verbringen , über die UX Ihrer Website nachzudenken und klare Nachrichten. Und der beste Weg, dies zu tun , besteht darin , Ihre Fallstudien aufzuschreiben, bevor Sie jedem Ihrer Projekte Bilder hinzufügen , und diese drei Fragen zu beantworten. Erstens, was waren die Produkte und welches war das Problem, das Sie für Nummer zwei lösen wollten , wie haben Sie dieses Problem gelöst? Was hast du getan, Nummer drei? Nun, als Ergebnis oder Ergebnisse weil Sie dieses Problem mit Ihren Designs lösen. Eine andere Person erwähnte, dass ich immer wieder verschiedene Dinge höre zwischen der Fokussierung auf Bilder und der Konzentration auf das Erzählen der Geschichte. Welcher ist es? Sie müssen eine Geschichte mit überzeugender Grafik erzählen? Das ist meine Antwort. Die Antwort ist also, dass Sie wirklich beides haben sollten. Ich weiß, dass dieser Satz, eine Geschichte zu erzählen, im UX-Design ständig ohne wirkliche Mittel herumgeworfen wird . Verstehen die Leute, . Verstehen die Leute was du den Leuten zu sagen versuchst? Verstehen Sie, was Sie tatsächlich zur Lösung des Problems getan haben war ein Problem und ein tatsächliches Geschäfts- oder Benutzerproblem. Und nicht nur eine Umschulung einer App, die Ihnen gefällt. Deshalb würde ich mich fragen, welche Details für jeden, der meine Fallstudie liest, wichtig sind, damit er versteht, was ich mit diesem Projekt gemacht habe. Und meine Faustregel lautet, wenn ein High-School-Schüler Ihre Fallstudie lesen kann und er Ihre Fallstudie lesen kann und versteht, was Sie tatsächlich getan haben. Das ist eine gute Fallstudie, denn jeder, der keinen Hintergrund in UX-Design oder Ihrem Projekt hat , sollte in der Lage sein zu verstehen, was Sie mit Ihren Designs beheben wollten . Und anstatt alles als Standard anzuzeigen, sollten Sie sorgfältig überlegen , welche interessanten Teile Ihrer Projekte Sie wirklich hervorheben möchten und wie Sie dies erreichen ganz oben in Ihren Fallstudien , damit Sie die Aufmerksamkeit der Menschen auf sich ziehen. Und wie kommen Sie auf natürliche Weise dazu, zu teilen, wie Sie den Problemraum definieren? Welche Art von Lösungen haben Sie sich ausgedacht, wie haben Sie Ihre Entwürfe validiert und was war das Ergebnis der von Ihnen vorgenommenen Neugestaltungen? Eine andere Frage war, dass Personalverantwortliche so viele Portfolios durchblättern. Wie sticht man hervor? Halten Sie es super einfach? Oder viele Informationen, Klarheit der Botschaft ist wirklich wichtig. Das ist also etwas , das Sie immer berücksichtigen sollten, während Sie an Ihrer Fallstudie arbeiten Verstehen die Leute, was ich zu sagen versuche? Wenn Sie jemand sind, der mit UX-Design anfängt, das Einzige, was Sie wirklich hervorheben kann ist das Einzige, was Sie wirklich hervorheben kann, ein gutes visuelles Design in Ihren Fallstudien zu haben Ich sehe so viele Bootcamp-Portfolios, dass nur habe sehr Low-Fi-Wireframes. Und sie sind sehr schnell, ich werde ehrlich sein, einige von ihnen sind wirklich hässlich und ich denke , du bist ein Designer. Sie sollten die Grundlagen des visuellen Designs kennen. Ich werde so viel Hass bekommen, wenn ich sage , dass ich einfach real sein werde. Es gibt eine Möglichkeit, großartige Textfelder und graue Felder hübscher als der Durchschnitt zu gestalten. Ich habe versucht, 90% der Bilder zu zeigen, die ich in meiner Fallstudie zeige. 90% davon sind High-Fidelity-Mockups. Ich zeige selten Wireframes. Und Sie fragen sich vielleicht: Nun, Christina, ich habe keinen Hintergrund in visuellem Design. Ich habe einfach kein Auge dafür. Was mache ich? Man kann ein I entwickeln und ich glaube wirklich, dass visuelles Design etwas ist, das man verbessern kann. Ich war früher nicht wirklich gut im visuellen Design und jetzt, wie mir die Leute sagen, hat mir Ihre Ästhetik sehr gut gefallen. Eine gute Möglichkeit besteht darin, gutes visuelles Design zu studieren. Und all diese Quellen sind für Sie öffentlich zugänglich. Du kannst dir viele verschiedene Design-Systembibliotheken verschiedener Unternehmen ansehen, wie Google Material Design und Airbnb hat auch ihr Designsystem öffentlich veröffentlicht, das du sehen kannst und du kannst sehen Sie den Stil ihrer Tasten und ihrer Komponenten. Es ist sehr wichtig, dass Sie sich mit den verschiedenen UI-Komponenten vertraut machen den verschiedenen UI-Komponenten , die in verschiedenen Apps verwendet werden. Laden Sie eine Reihe verschiedener Apps herunter, um zu sehen welche Art von Designs sie verwenden und welche Art von Interaktionen für verschiedene Abläufe verwendet werden. Auf diese Weise können Sie, wenn Sie Design studieren und viel gutes Design betrachten , entwickeln, was gutes visuelles Design ist. Und wir sehen uns später. Tschüss.