UX-Fallstudie schreiben, gestalten und veröffentlichen | UI/UX-Portfolio

1. Trailer: Du scrollst durch Behance und siehst eine Fallstudie , die wunderschön gestaltet ist und eine fesselnde Geschichte erzählt, und du denkst, wow, das könnte ich nie tun. Nun, es ist an der Zeit, das zu überdenken. Ich bin Maddy Beard. Ich bin Produktdesigner und Ersteller von Designinhalten. Ich habe für Agenturen, kleine Unternehmen, große Unternehmen wie Adobe und Tech-Startups gearbeitet große Unternehmen wie Adobe und , die strategische Designarbeiten erledigen. [MUSIK] Während meiner gesamten Karriere habe ich, wie die meisten Designer, verstanden , wie wichtig es ist, Fallstudien zu erstellen. Ob Sie einen neuen Job finden, Ihre Glaubwürdigkeit als Designer steigern oder einfach Ihre Arbeit mit der Community teilen möchten, die Ihr Portfolio von heute behält , ist äußerst wichtig. Vertrauen Sie mir, ich verstehe es, es kann verlockend sein, all die harte Arbeit an einem Projekt zu beenden , ein paar Bilder auf Instagram oder Ihrer Website zu posten und dann weiterzumachen. Es lohnt sich jedoch, sich etwas Zeit zu nehmen, um für jedes Projekt, das Sie machen, eine überzeugende Fallstudie zu erstellen , sei es ein persönliches Projekt, ein Projekt für einen freiberuflichen Kunden oder für das Unternehmen, das Sie sind arbeitet bei. In diesem Kurs möchte ich Ihnen helfen, all diese großartige, manchmal unordentliche Arbeit aus einem aktuellen Projekt zu entnehmen manchmal unordentliche Arbeit aus und es in etwas zu verwandeln , das eine Geschichte erzählt und Ihre Stärken als Designer hervorhebt. Sie können diesen Prozess für vergangene Projekte und Projekte nutzen . Dieser Kurs ist für UX- und Produktdesigner auf jeder Ebene gedacht , egal ob Sie ein Projekt von der Schule zeigen, eines Ihrer neueren Kundenprojekte anzeigen möchten zeigen, eines Ihrer neueren Kundenprojekte oder vielleicht in der Branche für ein während, und Sie möchten nur eine neue Art, Ihre Fallstudien mit etwas mehr Absicht darzustellen. Die folgenden Videos helfen dir dabei, etwas herauszubringen , auf das du wirklich stolz bist. Folgendes benötigen Sie, ein Projekt, das Sie kürzlich abgeschlossen haben, hoffentlich haben Sie einige Notizen oder Skizzen oder jede Art von Prozessarbeit, Google Docs, Apple-Notizen oder einen Ort, an dem Sie die Inhalte, Zugriff auf Adobe XD, Figma oder ein ähnliches Design-Tool. Einige nette Gerätemodelle, mit denen ich Sie auf einige meiner Favoriten hinweisen kann , und auf ein Online-Portfolio wie Behance oder Ihre persönliche Website. Ich werde Sie an einem Hauptbeispiel durch diese Lektionen führen, einer Fallstudie, die ich für eines meiner letzten Projekte erstellen werde , und weil mein Stil offensichtlich nicht der einzige Stil Ich werde auf dem Weg unzählige andere Beispiele teilen . Fallstudien sind bei weitem die Nummer eins, nach der ich auf meinem Instagram und YouTube gefragt werde. Daher freue ich mich sehr, euch endlich diesen vollständigen Prozess zeigen zu können, den ihr selbst erledigen könnt. Lasst uns gleich eintauchen. [MUSIK] 2. Projektübersicht: Das Projekt für diesen Kurs ist es, eine starke Fallstudie aus einem Projekt zu erstellen eine starke Fallstudie , das Sie bereits durchgeführt haben. Es spielt keine Rolle, ob dies das 1. oder 31. Projekt ist , das Sie jemals gemacht haben, Sie haben wahrscheinlich noch nie zuvor Fallstudien genau wie diese angegangen . Zögern Sie nicht, Ihre eigenen Details zu machen und Ihren eigenen Weg damit zu gehen, wenn Sie andere Ideen haben als Ihre eigenen Details zu machen und Ihren eigenen Weg damit zu gehen, wenn Sie das, was ich zeige. Meine Aufgabe ist es, Sie einfach durch diesen Prozess zu führen und Ihnen zu zeigen, was für mich funktioniert , um eine Fallstudie zu erstellen, die tatsächlich interessant zu lesen und anzusehen ist . Zuerst sammeln wir zunächst alle Sachen aus Ihrem Projekt zusammen. Als Nächstes skizzieren und schreiben wir den Inhalt. Dann entwerfen wir die Fallstudie in Adobe XD, Sie können jedes Programm verwenden, das Sie möchten. Auf dem Weg dorthin werde ich Tipps und Tutorials für Dinge teilen , die Sie in diesen Teil aufnehmen möchten. Zuletzt werden wir die besten Möglichkeiten durchgehen, Ihre Fallstudien hochzuladen und in Behance zu veröffentlichen, wenn Sie sich dort entscheiden, sie zu präsentieren. Natürlich können Sie es auch auf Ihrer persönlichen Portfolio-Site präsentieren . werde ich einen Aktionsschritt Am Ende jeder einzelnen Lektion werde ich einen Aktionsschritt teilen. Ich empfehle mir während dieses Prozesses zu folgen und Ihre Arbeit unten im Diskussionsbereich zu veröffentlichen Ihre Arbeit unten im Diskussionsbereich um Feedback zu erhalten und Fragen zu stellen. Aber natürlich wissen Sie, wie Sie am besten lernen, also können Sie sich in jedem Tempo durch die Klasse bewegen , in welchem Tempo Sie möchten. Jedes neue Projekt kann entmutigend erscheinen, aber ich werde Sie durch einfache, unkomplizierte aber ich werde Sie durch einfache, Schritte führen, damit Sie am Ende eine abgeschlossene Fallstudie haben, wenn Sie dieser Klasse folgen . [MUSIK] 3. Arten von Fallstudien: Während meiner Recherche für diesen Kurs habe ich mir Dutzende von Fallstudien angeschaut und fünf verschiedene Kategorien entwickelt , in die Ihre passen könnten. Werfen wir einen Blick auf jeden einzelnen und teilen sie auf, damit Sie bestimmen können , welche Art von Fallstudie Sie während dieses Kurses erstellen werden. Verbesserung Nummer 1, ein Produkt gab es bereits und Ihr Projektziel war es, es in irgendeiner Weise zu verbessern, vielleicht durch bessere Benutzerflüsse, neue Funktionen oder eine bessere Organisation. Diese Fallstudie von Amy Lima ist aus Grund dafür ein großartiges Beispiel, da sie bereits seit über 30 Jahren im Geschäft sind, aber sie wollten ihre Versicherungen direkt an Verbraucher verkaufen . Um dies zu erreichen, mussten sie ihre Benutzererfahrung verbessern, um es einfach genug zu machen, damit ihre demografischen, technisch versierten Millennials nutzen und vertrauen konnten. Nummer 2, stell dir neu vor. Sie bemerken die Möglichkeit, einen Problembereich mit neuen Lösungen zu verbessern , die möglicherweise nicht sofort implementiert wurden. Dieses TV-Guide-Projekt von Abdallah Salem macht das wirklich gut. Sie stellen fest, dass es derzeit mehr Möglichkeiten denn je gibt , wenn es darum geht, was zu beobachten ist, und diese Entscheidungen sind sehr fragmentiert und auf Dutzende von Anbietern und Plattformen verteilt. Ihre Lösung umfasste universelle Suche, Personalisierung und intelligente Empfehlungen. Nummer 3, gemahlen. Ihr Projekt erstreckt sich von Konzeption bis zur Veröffentlichung eines neuen Produkts. Darin fällt mein Projekt bei Bubble. Ich betrachte diese Fallstudie Eat Explorer von Tony Jean als erdacht. Es ist eine Übersetzungs-App für Restaurantmenüs, um die kulturellen Barrieren von Lebensmitteln speziell für internationale Studenten entwickelt wurden. Nummer 4, Visionär. Ihr Projekt ist konzeptioneller Natur und nicht unbedingt an ein Unternehmen gebunden , obwohl es futuristische Ideen und Möglichkeiten für Unternehmen hat . Ich würde sagen, dass die drei Fallstudien, an denen ich bei Adobe gearbeitet habe , in diese Kategorie fallen. Dieses Projekt, gute Nachbarin von Julie Sandusky, ist konzeptionell, aber es hat unzählige Möglichkeiten in der realen Welt, da es auf realen Forschungen und Problemen beruhte , Lebensmittelverschwendung durch Erleichterung des Austauschs von Lebensmitteln in Gemeinden. Nummer 5, Höhepunkt. Dies ist definitiv weniger verbreitet , was Portfolios angeht, aber definitiv immer noch wertvolle Arbeit. Bei diesem Typ handelt es sich bei Ihrem Projekt eher eine Datensatz-Analyse, die Ergebnisse aus Forschungsergebnissen zeigt, die helfen könnten, ein Projekt zu gestalten oder anderen Designern dabei zu helfen , sich über einen bestimmten Bereich zu informieren. Dieser Artikel von BMR beschreibt den aktuellen Stand der Checkout- und E-Commerce-Erfahrungen durch acht häufige Fallstricke und Best Practices. Die Bestimmung der Kategorie, in die ein Projekt fällt hilft Ihnen, die Geschichte herauszufinden , die Sie erzählen werden, und auf die wir in zukünftigen Lektionen viel detaillierter eingehen werden. Der einzige Aktionspunkt für diese Lektion besteht jedoch darin, darüber nachzudenken und zu sehen, ob eines davon das Projekt beschreibt, mit dem Sie arbeiten. Sobald Sie das unten haben, können Sie sich gerne tiefer in eines der Beispiele eintauchen , die ich gezeigt habe. Ich werde einen Link im Ressourcenbereich zu einer kleinen Datenbank hinterlassen, in der ich alle wirklich guten Beispiele für Fallstudien gesammelt habe , die ich während meiner Recherche gefunden habe. Schauen Sie sich das an und wir sehen uns in der nächsten Lektion, in der wir alle Ihre Projektmaterialien zusammenstellen um sich darauf vorzubereiten, diese Fallstudie zu knacken. 4. Stücke zusammenstellen: Bevor wir weiter gehen, möchte ich Ihnen einen Überblick darüber geben, was eine überzeugende Fallstudie ausmacht. Was sind die Must-Haves, was sind die Schönen zu Habenden? Worauf sollten Sie sich konzentrieren, worauf sollten Sie sich nicht konzentrieren? Denken Sie daran, dass wir in zukünftigen Lektionen viel detaillierter auf all diese Dinge eingehen viel detaillierter auf all werden, also werde ich nicht zu viel Zeit damit verbringen, aber ich möchte Ihnen einen schnellen Überblick geben, damit Sie es können Behalte sie im Hinterkopf, während du deine Materialien sammelst. Meine Must-Haves sind eine Problem - oder Opportunity-Aussage. Was sind die Ziele? Wie würde Erfolg aussehen? Ihre Rolle und mit wem Sie zusammengearbeitet haben, natürlich nicht die spezifischen Personen, sondern ihre Rollen und wie das Team zusammenkam. Warum hast du bestimmte Entscheidungen getroffen? Was hat Ihre Designrichtung und Priorisierung vorangetrieben? Normalerweise ist das in Form einer formellen oder informellen Forschung. Einige Prozessarbeiten, Grafiken Ihrer endgültigen Ergebnisse und Ergebnisse oder Erfolgsmetriken. Einige nette Menschen könnten eine eingehende Erklärung Ihrer Forschung und Ergebnisse sein, die Zitate oder Daten, ein visuelles System oder Markenrichtlinien sein können . Weitere Prozessartefakte wie Empathie, Maps, Personas, Sitemaps, Benutzerflüsse. Mockups, die interaktiv sind, um bestimmte Funktionen hervorzuheben. Vielleicht eine zukünftige Roadmap, wenn etwas nicht priorisiert werden könnte oder vielleicht einige Initiativen angesprochen werden, die in Zukunft von Vorteil wären. Schließlich, Herausforderungen, denen Sie gegenüberstanden sind und wie Sie sie überwunden haben. Ich möchte betonen, dass Sie es nicht müssen, und tatsächlich sollten Sie all diese Dinge nicht einbeziehen. Wenn Sie nur überwältigt wären, meine ganze Liste zu hören, stellen Sie sich vor, wie überwältigt jemand Ihre Fallstudie ansehen würde Ihre Fallstudie alles Mögliche enthält. Der springende Punkt dieser Klasse ist es, dir beizubringen , wie man eine überzeugende Geschichte erzählt. Eine überzeugende Geschichte enthält keine Tonnen von monotonen Details. Denken Sie immer an Ihren Leser. Wie viel Zeit müssen sie das eigentlich durchlesen und verstehen? Es geht darum, es prägnant zu halten. Aber es ist wichtig, zuerst alles zusammenzubringen und dann zu bestimmen, was wichtig ist und was nicht, um Ihre Geschichte zu erzählen. In dieser Lektion werden wir alles zusammenstellen und später werden wir herausfinden, was wir nicht brauchen. Lassen Sie uns damit einen neuen Ordner auf unserem Desktop erstellen und ihn als unseren Projektnamen bezeichnen. Zum Beispiel nenne ich meine Bubble-Fallstudie erstelle dann ein paar Unterordner. Hier sind diejenigen, die ich empfehle, Forschung zu empfehlen Hier können Sie Informationen über Wettbewerbsanalysen, Daten, Interviewaufzeichnungen oder Notizen, Rekrutierung von Materialien, Umfragen, Ergebnissen usw. veröffentlichen. Der nächste Ordner sind Skizzen. Dies kann Scans Ihrer analogen Skizzen oder Screenshots aus Skizzen auf Ihrem iPad oder wo auch immer Sie skizzieren, beinhalten Screenshots aus Skizzen auf . Als Nächstes XD-Dateien, vielleicht haben Sie verschiedene Dateien für Ihre Wireframes, verschiedene Iterationen, Ihre endgültigen Designs. Mockups. Wenn Sie bereits etwas markiert oder exemplarische Vorgehensweisen aufgezeichnet haben, können Sie diese dort hineinlegen. Außerdem können Sie die Mockup-Vorlage, die Sie verwenden möchten, dort stecken Sie verwenden möchten, dort Meine Favoriten sind unten im Ressourcenbereich verlinkt. Als nächstes folgen Ergebnisse, Datenanalysen oder Zitate, die mit Ihrer tatsächlichen Lösung zu tun haben mit Ihrer tatsächlichen Lösung und was Sie getestet und validiert haben. Dies sind die Ergebnisse der Erfolgsmetriken. Schließlich habe ich einen Ordner namens Behance, Krieg schließlich unsere endgültigen Fallstudienakten exportieren wird . Nehmen Sie alles, was Sie von diesem Projekt bekommen haben , und geben Sie es in alle verschiedenen Ordner aus. Machen Sie sich keine Sorgen, wenn Sie nicht all diese Dinge haben, das ist völlig in Ordnung, aber fühlen Sie sich auch nicht auf alle Beispiele beschränkt, die ich gegeben habe. Sie können damit abhängig von Ihrem Projekt Ihren eigenen Weg gehen , wenn Sie möchten. Nochmals, fügen Sie später einfach alles hinzu, wir werden herausfinden, was tatsächlich relevant ist. Ich würde auch empfehlen, dieses Zeug zu überprüfen, während Sie es durchgehen und in den Ordnern organisieren. Dadurch wird Ihr Gedächtnis aktualisiert, da Sie dieses Projekt möglicherweise eine Weile nicht mehr gesehen haben. Sobald Sie diese Ordner mit all Ihren Projektdaten ausgefüllt haben , fahren wir mit der nächsten Lektion fort, in der Fallstudie mithilfe von Story-Strukturen skizziert wird Ihre Fallstudie mithilfe von Story-Strukturen skizziert wird. [MUSIK] 5. Deine Geschichte umreißen: [MUSIK] Sehr schnell bevor wir unsere Umrisse schreiben, möchte ich Ihnen den Fehler Nummer eins mitteilen, den ich sehe , wie so viele Leute machen, wenn ich Portfolios überprüfe , und es geht um Prozessarbeit . Ja, Sie sollten sich auf einen Teil der Prozessarbeit konzentrieren , die Sie geleistet haben, aber das bedeutet nicht, jeden Schritt des UX-Prozesses zu definieren. Ich denke, dass so viele der Fallstudien, die ich von Junior-Designern gelesen habe , einen sehr generischen idyllischen UX-Prozess skizzieren, der nur Definitionen verschiedener Übungen auslöst. Zum Beispiel habe ich so etwas wie nächstes eine User-Persona erstellt. Eine Benutzerpersönlichkeit ist ein archetypischer Benutzer, dessen Ziele und Merkmale die Bedürfnisse einer größeren Gruppe von Benutzern darstellen und dann eine Momentaufnahme ihrer Benutzerpersönlichkeit enthalten . Dies gibt keinen Einblick, wie Sie tatsächlich dorthin gekommen sind, wo Sie es gemacht haben. Einstellung von Managern und Kollegen von Designern wissen bereits, was eine Person ist und potenzielle Kunden, die sich Ihre Fallstudie ansehen könnten. Kümmere dich nicht um seine genaue Definition. Diese Leute möchten wissen, warum Sie festgestellt haben, dass Benutzerpersonas im Rahmen dieses Projekts wichtig sind, wie Sie die Informationen im Inneren entwickelt haben und vor allem, was sie geholfen haben du entdeckst oder entscheidest. Überlegen Sie, was der Wert in diesem Schritt war und wenn es kein wichtiger Teil der Geschichte ist, überspringen Sie sie einfach. Ich werde immer wieder zu diesem wirklich wichtigen Punkt zurückgebracht diesem wirklich wichtigen Punkt mit Ihrer Fallstudie eine Geschichte erzähle. Genau wie jede Geschichte wird keine Struktur genau dieselbe sein , aber es könnte Ihnen helfen, so darüber nachzudenken. Die Problemaussage ist Ihr anstiftender Vorfall, das Endergebnis ist Ihre Lösung, und dazwischen haben Sie einen Höhepunkt , der die wichtigste Entdeckung oder Aktion ist , die führte zum Endergebnis und bestreut , dass Sie einige andere Informationen haben , die die Geschichte bereichern und das Bild malen. Lassen Sie uns nun ein Beispiel mit dem Projekt durchgehen , an dem ich gerade arbeite. Für jede Story muss man zuerst die Szene setzen. Für mich denke ich, dass es wichtig ist, die Szene zu setzen , wer das Team war und welche Rollen unsere Rollen waren. Jetzt, der anstiftende Vorfall oder das Problem oder die Gelegenheit für die steigende Aktion, möchte ich meine Ziele einbeziehen, so Erfolg aussehen würde, und dann einige Wireframes, US-Stile, Funktionen Priorisierung, Benutzerflüsse und Design-Iterationen. Dies alles führt zu dem Höhepunkt, für diese Geschichte die Einführung unseres MVP oder eines minimalen tragfähigen Produkts für unsere Beta-Nutzer ist . Dann füge ich für die folgende Aktion Daten ein, die gesammelt wurden, und Einblicke, die aus dem Start gesammelt wurden. Für die Entschließung werde ich die endgültigen Erfolgsmetriken einbeziehen. Dies ist meine Story-Struktur, aber denken Sie daran, dass es verschiedene Arten von Fallstudien gibt. Was ist, wenn es sich bei Ihnen nicht um ein Bodenprojekt handelt, sondern eine der anderen vier Kategorien? Nehmen wir uns eine Minute Zeit , um potenzielle Story-Strukturen für die anderen vier Kategorien zu veranschaulichen potenzielle Story-Strukturen für , die wir in weniger als drei skizzierten, beginnend mit der Verbesserung. Eine Fallstudie zur Verbesserung könnte in etwa so aussehen. Wir haben die Aussage über die Problemchancen als den anstiftenden Vorfall, dann haben wir einige Forschungsergebnisse, die uns zu einer Priorisierung führen , die der anstiftende Vorfall ist. finde heraus, woran wir arbeiten werden. Wir könnten auf einige Herausforderungen stoßen, also wäre dies etwas , das als Nächstes skizziert werden sollte. Während Sie diese Herausforderungen meistern, arbeiten Sie wahrscheinlich an Entwürfen und Iterationen die zu dem Höhepunkt führen, der ein Feature-Launch ist. Einführung dessen, was wir glauben, wird das Produkt verbessern, und danach als Schlussfolgerung natürlich darüber sprechen, werden wir als Schlussfolgerung natürlich darüber sprechen, ob es das Produkt tatsächlich verbessert hat. Wie lauteten die Ergebnisse oder Erfolgsmetriken aus diesem Projekt? Als Nächstes ist es neu vorzustellen. Auch hier beginnen wir mit der Problem - oder Opportunity-Erklärung. Als Nächstes könnten wir Inhalte zur Analyse der aktuellen Lösungen einbeziehen , die bereits vorhanden sind, denn wenn wir etwas neu erfinden , besteht die Wahrscheinlichkeit, dass es eine Wettbewerbsanalyse gibt , die das haben wir während des gesamten Projekts gemacht. Als Nächstes können Sie die wichtigsten Treiber skizzieren oder basierend auf den Recherchen, die Sie durchgeführt haben, was soll die neue Lösung haben? Vorfeld dieser neuen Lösung können Sie Recherchen skizzieren, Ihre Strategie umfasst einige Wireframes und Designs. Der Höhepunkt hier ist natürlich die neue vorgeschlagene Lösung. Dann möchten Sie vielleicht die Reaktionen zeigen , die Menschen auf diese neue Lösung oder Testergebnisse hatten , die Sie daraus erhalten haben. Schließlich, da dies nur neu erfunden wird und es sich nur um eine vorgeschlagene Lösung handelt, können Sie die nächsten Schritte, Imbissbuden oder eine Zusammenfassung abschließen können Sie die nächsten Schritte, Imbissbuden oder eine Zusammenfassung abschließen , da dies wahrscheinlich nicht das Ende des Weges für dieses Projekt ist. Als nächstes ist visionär und wieder haben Sie es wahrscheinlich satt, dies zu hören, aber wir beginnen immer mit dem Problem oder der Gelegenheit. Da es sich eher um ein konzeptionelles Projekt handelt, möchten Sie möglicherweise Ihre Hypothese angeben, um darüber zu sprechen, welche Vorteile Sie sich vorstellen, dass sie sich aus einer solchen Lösung ergeben könnten. Beginnen Sie dann mit Ihren Recherchen, verschiedenen Iterationen, vielleicht einigen Herausforderungen, denen Sie gegenüberstehen, alle zu dieser potenziellen Lösung führen. Als nächstes sprechen Sie ähnlich wie bei der letzten über einige der Reaktionen, die Menschen auf diese potenzielle Lösung hatten , wenn Sie sie potenziellen Benutzern oder Unternehmen zeigen und damit abschließen konnten potenziellen Benutzern oder Unternehmen was auch immer die nächsten Schritte daraus ergeben könnten. Zuletzt, Kombination. fängst du mit einem Problem oder einer Frage an. Möglicherweise geben Sie Ihre Abschlussarbeit oder Ihren Vorschlag an, und der größte Teil dieser Fallstudie wird Beweise und Beispiele sein. Der Höhepunkt hier ist, welche Maßnahmen der Leser ergreifen sollte, und danach können Sie diese Ergebnisse, die Sie geteilt haben, wirklich zusammenfassen . Jetzt bist du dran. Skizzieren eine Story-Struktur, die auf allem basiert , was Sie hier gelernt haben. Es kann eine sein, die ich bereits geteilt habe, oder Sie verwenden möglicherweise etwas, das je nach Projekt etwas anders ist je nach Projekt etwas anders und füllen Sie es mit diesen Story-Punkten aus, um darüber nachzudenken, wie die Geschichte Ihres Projekts ist entfaltet. Wie sind Sie vom Problem zur Lösung gekommen? Zögern Sie nicht, ein Foto oder einen Screenshot davon zu machen und es unten im Diskussionsbereich zu teilen. Ich würde es gerne sehen und ich weiß, dass andere Schüler davon profitieren würden , eine Reihe verschiedener Beispiele zu sehen. In der nächsten Lektion werden wir diese kleine Storystrukturskizze verwenden , um unsere Gliederung zu erstellen und dann tatsächlich die Kopie zu schreiben , aus der Ihre Fallstudie besteht. [MUSIK] 6. Den Inhalt schreiben: Jetzt ist es an der Zeit, diese Fallstudie wirklich zu knacken. Wenn du so etwas wie ich bist, ist das Schreiben des Inhalts bei weitem der entmutigendste Teil. Aber keine Sorge, wir werden das in verdauliche Stücke zerlegen . Sobald Sie mit diesem Teil fertig sind, wird sich der Rest des Prozesses ganz natürlich entfalten. Ich eröffne gerne ein neues Google Doc. Da ich es hasse, mit einer leeren Seite zu beginnen, erstelle ich eine Aufzählungspunkt-Gliederung basierend auf der Story-Struktur, die wir bereits erstellt haben. Fangen wir an, das zu tippen. Wir fangen mit ein paar Hintergrundinformationen an. Hier werden das Wann, das Wer und ein bisschen mehr Informationen über meine Rolle enthalten . Als nächstes folgt die Problemaussage. Hier habe ich die eigentliche Problemaussage oder Gelegenheit. Dann denke ich, dass ich hier ein paar Bilder von dieser Gelegenheit haben möchte , und das wird sinnvoller sein wenn Sie mein Projekt ein wenig kennenlernen, während wir daran arbeiten. Als Nächstes nenne ich diesen Abschnitt den Weg zum MVP. Ziele oder wie würde Erfolg aussehen, Feature-Priorisierung, wir werden Wireframes, UI-Stile, Benutzerflüsse, Designiterationen einschließen UI-Stile, Benutzerflüsse, , und hier denke ich, dass ich jedes Feature oder jeden Flow anzeigen möchte . Setze Visuals. Als nächstes kommt der Start, also dieser Höhepunkt. Sprechen Sie über den Start von MVP mit unseren Beta-Nutzern. Ich könnte anfangen, über Marketing zu sprechen, also wie wir die Beta-Nutzer bekommen haben. Nach diesem ersten Start werde ich über Herausforderungen und Verbesserungen sprechen, also einige gesammelte Daten und Erkenntnisse, die wir gesammelt haben, mehr Feature-Priorisierung und mehr Iterationen. Schließlich wird die Lösung einige Erfolgskennzahlen, Imbissbuden und Erkenntnisse sein . Jetzt, da wir mit diesem Skelett arbeiten können, können wir die nächsten Stunden dauern, vielleicht viel schneller, wenn Sie ein schneller Autor sind, und beginnen, jedem dieser Aufzählungspunkte eine Erklärung hinzuzufügen . Ich mache das jetzt und komme zurück und rede darüber, wie ich es angegangen bin. Ich werde das auf hohem Niveau durchmachen, aber natürlich können Sie sich die eigentliche Live-Fallstudie ansehen wenn Sie jedes einzelne Wort lesen möchten. Lassen Sie uns zuerst die Hintergrundinformationen durchgehen. Ich entschied mich, dass ich die Zeitleiste, die Teammitglieder und dann ein bisschen mehr in meine Rolle aufnehmen wollte die Zeitleiste, die Teammitglieder und dann ein bisschen mehr in meine Rolle da meine Rolle nicht nur im Produktdesign war, sondern auch viele andere Dinge getan habe. Ich wollte sicherstellen , dass das klar ist. Dann habe ich mir etwas Zeit genommen, um meine Problemaussage zu schreiben. Das hat tatsächlich eine Weile gedauert. Ich werde das für Sie lesen, da dies einer der wichtigsten Teile der Fallstudie ist. So viel von den saftigen Sachen in sozialen Bereichen passiert im Kommentarbereich. Da sich Social immer mehr in Richtung Kurzform-Videoinhalte bewegt , warum sollte das Kommentieren nicht nachziehen? Wir stellen fest, dass dies tatsächlich bereits passiert, aber es gibt keine großartigen Tools oder Plattformen , die es fördern. Dieser Kommentarinhalt , der so reich, witzig, informativ oder aufschlussreich sein könnte , fühlt sich einfach amateur an. Das ist also das Problem. Ich habe hier notiert, dass ich ein Bild des Greenscreen-Effekts auf TikTok aufnehmen möchte , weil ein Beispiel dafür ist, wie dies bereits passiert, aber es sieht aus und fühlt sich wirklich amateur weil es dort ist nicht viel , das den Menschen dabei hilft. Dieser Greenscreen-Effekt ist gut, aber er ist super glitchy und sieht einfach nicht sehr professionell aus. Dann kommen wir in die Gelegenheit ein. Wir haben diese Gelegenheit genutzt, um Bubble zu erstellen Die Social-Video-Kommentar-App, Benutzer Inhalte aus dem Internet abrufen, einen kurzen Videokommentar darüber aufzeichnen und Reaktionen von ihren Freunde. Das Ganze ist meine Problem - und Opportunity-Aussage. Dann habe ich das, das ein wenig in Szene setzt , aber um ehrlich zu sein, bin ich mir nicht ganz sicher, ob ich das benutzen werde oder nicht. Es könnte übertrieben sein. Wenn Sie es hier bemerken, nenne ich diese Abschnitte nicht als Überschriften des UX-Prozesses. Ich nenne sie etwas spezifischeres für das Projekt. Diese Hauptüberschrift wird Road to MVP heißen. Ich skizziere die Ziele und aufgrund dieser Ziele, welche Funktionen wir letztendlich priorisieren wollten. Jedes Mal, wenn ich hier in der Gliederung Aufzählungspunkte habe, werden dies tatsächlich Aufzählungspunkte in der Fallstudie sein. Nicht alles muss im Absatzformat ausgeschrieben werden. Aufzählungspunkte sind eine wirklich gute Möglichkeit, Ihren Standpunkt zu vermitteln , ohne jemanden dazu zu zwingen, so viel zu lesen. Ich habe hier mehr Notizen darüber , was ich einbeziehen möchte. Nach der Feature-Priorisierung möchte ich möglicherweise einen animierten Flow für jedes dieser Funktionen zeigen . Vielleicht auch Wireframes oder eine Reisekartenskizze für jeden , dann UI-Iterationen. Ich möchte einen der Bildschirme auswählen und zeigen, wie sich die Benutzeroberfläche von der ersten bis zur letzten Iteration entwickelt hat. Vielleicht skizzieren Sie einige Dinge die in diesen Prozess eingeflossen sind, wie, das hat uns wegen XYZ nicht gut gefallen, das hat bei Benutzern wegen XYZ nicht gut funktioniert und zeigen, wie wir von A nach Z gekommen sind Als nächstes zeige ich ein wenig über das Designsystem. Dies ist nicht zu 100 Prozent notwendig, aber wie gesagt, ich habe auch andere Dinge getan als nur Produktdesign. Ich habe auch viel am Branding gearbeitet, also dachte ich, es wäre schön, das hier zu zeigen. Ich möchte einige Herausforderungen und Kompromisse skizzieren , die wir eingehen mussten. Denn wenn es um einen MVP geht, ist es nur das minimal lebensfähige Produkt. Ich möchte nur einige der Kompromisse zeigen , die wir eingehen mussten. Dann werde ich über den Beta-Launch, den Start des MVP und darüber sprechen, wie wir diese Beta-Nutzer bekommen haben, ein bisschen Marketing, da ich einige Marketingdesign-Arbeiten hatte , die in dieses Projekt eingeflossen sind. Welche Erkenntnisse und Verbesserungen entstanden danach daraus? Daten, die wir gesammelt haben, und insbesondere, wo ich diese Daten erhalte, etwa Fehlerberichte, die wir haben, App-Feedback innerhalb der Bubble-App. Weitere Feature-Priorisierung und Hinweise hier, dass Sie lesen können, was wir verbessern möchten, nachdem wir Feedback erhalten haben. Zuletzt der öffentliche Start. Was waren die Ergebnisse davon? Wir haben all diese Ergebnisse, die ich habe, und alle Imbissbuden beim Lernen. Vielleicht hast du nicht all diese Daten, das ist völlig okay. Sie können einfach ein Zitat darüber zeigen, was jemand gesagt hat , als er damit interagierte, das zeigte , dass es eine gute potenzielle Lösung sein könnte. Positive, negative Zitate, solche Dinge. Sie können auch einfach Ihre Imbissbuden und Erkenntnisse aus dem Projekt teilen , insbesondere wenn es sich um ein Schulprojekt oder eines Ihrer ersten Projekte oder ein Projekt aus dem Bootcamp handelt. Nicht alles wird all diese Daten haben, und das ist völlig in Ordnung. Zum Beispiel einige der persönlicheren Erkenntnisse , die ich teilen wollte, bin ich ganz am Ende einbezogen. Schnell zu arbeiten und frühzeitig Feedback zu erhalten, war etwas, das ich wirklich aus diesem Projekt herausgeholt habe. Es ist etwas, in dem ich nicht sehr gut war, bevor ich mit dem Projekt begonnen habe, und ich habe gerade gelernt, wie wichtig es ist, und ich wurde während dieser Arbeit viel besser darin. Jetzt möchte ich einige allgemeine Tipps zum Schreiben dieser Art von Inhalten teilen . Erstens Pfandrecht auf Überschriften und Untertitel. Dies wird wirklich dazu beitragen, ein Gleichgewicht zwischen Tiefe und auf einen Blick Verdaulichkeit zu finden. Eine skimmable Fallstudie ist sehr wichtig, insbesondere für die Einstellung von Managern. Versuchen Sie zu schreiben, als würden Sie einem anderen Designerfreund von diesem Projekt erzählen . Sie würden nicht mit den Details im Unkraut stecken bleiben, aber Sie würden die wichtigsten oder interessantesten Dinge hervorheben . Definiere nicht den UX-Prozess, rede darüber, was du tatsächlich getan hast und erzähle diese Geschichte. Halte es kurz. Ich hätte nicht mehr als drei Sätze pro Absatz. Wenn ein Abschnitt lang wird, denken Sie an a, schneiden Sie unnötige Flusen oder b aus teilen Sie ihn in zwei Abschnitte , die jeweils einen Hauptpunkt haben. zur vierten Lektion zurück, wenn Sie eine Auffrischung über die Must-Haves im Vergleich zu den Netto-Haves benötigen. Schreiben Sie schließlich nicht, was Sie mit Bildern zeigen könnten. Notieren Sie sich während des Schreibens einfach , welche Bilder Sie wo zeigen werden. Normalerweise lege ich diese Notizen kursiv in Klammern, damit sie sich vom geschriebenen Inhalt abheben . Schließlich können Sie sich die Beispiele in meiner Mini-Datenbank ansehen , wenn Sie stecken bleiben. Lassen Sie sich aber auch nicht durch die Vergleichsfalle gelähmt. Jedermanns Projekt ist so anders, also versuche mit deiner Waffe zu gehen. Der Aktionsschritt für diese Lektion ist der schwierigste, aber Sie können es tun. Schreiben Sie diesen Inhalt und ich verspreche, wenn Sie etwas darüber nachdenken, wird der Rest dieses Prozesses reibungslos verlaufen. Wie immer können Sie unten im Diskussionsbereich Fragen stellen , und ich helfe gerne weiter, wenn ich kann. In der nächsten Lektion öffnen wir Adobe XD oder Ihr Design-Tool Ihrer Wahl und bereiten Ihre Datei bereit. Komm zurück und wir sehen uns in dieser Lektion, wenn du bereit bist. [MUSIK] 7. Richte deine XD-Datei ein: Wenn es darum geht, Ihre Datei einzurichten, haben Sie zwei Möglichkeiten. Jetzt ist es an der Zeit zu entscheiden, ob Sie Ihre Fallstudie für Behance oder Ihre persönliche Website optimieren möchten. Ich zeige dir schnell, wie man beides macht. Aber was sind die Vor- und Nachteile von jedem? Meiner Meinung nach können Sie mit Behance nichts falsch machen, besonders wenn Sie nach neuen Möglichkeiten suchen oder daran interessiert sind , Ihre Arbeit vor anderen Designern zu bringen, ist Behance dafür ist ein großartiger Ort. Da ich auf Behance vorgestellt wurde, bekomme ich tatsächlich viele Jobanfragen in meinen Behance DMs. Das heißt, wenn es um Behance geht, gibt es definitiv viel weniger Flexibilität bei der Auslegung Ihrer Inhalte, insbesondere Ihres Textes. Deshalb verwende ich den Designansatz , den ich mache, indem ich den gesamten Text in Adobe XD auslege und als PNGs exportiere. Mit diesem Ansatz können Sie jedoch nicht für andere Haltepunkte optimieren, insbesondere mobil, daher versuche ich normalerweise, den Text ziemlich groß zu halten. Das bringt mich zu den Vorteilen der Optimierung für Ihre persönliche Website, z. B. auf Webflow, Squarespace oder wo immer Sie Ihre Website hosten und erstellen. Wenn Sie damit umgehen, können Sie dies eher als ein tatsächliches Webseiten-Designprojekt behandeln , da Sie tatsächlich die Kontrolle über das genaue Layout haben und wie es an verschiedenen Haltepunkten skaliert wird. Der andere Profi ist, dass Ihren eigenen kleinen Speicherplatz Sie Ihren eigenen kleinen Speicherplatz im Internet haben, in der Regel ein bisschen professioneller erscheinen und Sie haben die vollständige Kontrolle darüber, was der Benutzer sieht, während er sich ansieht Ihre Fallstudie. Das sind meiner Meinung nach die Vor- und Nachteile, aber warum kannst du nicht das Beste aus beiden Welten haben? Es gibt tatsächlich ein paar Möglichkeiten, dies zu tun. Nummer 1, haben Sie Ihre eigene persönliche Website und erstellen Sie im Arbeitsbereich Miniaturansichten für jedes Werk , das mit dem entsprechenden Behance-Projekt verknüpft ist. Das mache ich jetzt. Beachten Sie, dass ich das Behance-Projekt in einem neuen Tab geöffnet habe, damit Benutzer niemals von meiner Website weggenommen werden . Nummer 2, lassen Sie Ihre Arbeit für Behance auf Behance auf Behance optimieren, haben Sie dann aber auch eine Version in Ihrem persönlichen Portfolio. Abhängig davon, wie viele Fallstudien Sie haben und wie ausführlich sie sind, könnte dies sehr zeitaufwändig sein. Es ist etwas, das ich persönlich schon lange machen wollte, aber ich habe mir einfach noch nicht die Zeit genommen. Die gute Nachricht ist jedoch, wenn Sie sich entscheiden, einfach mit Behance zu beginnen, können Sie immer das von Ihnen erstellte Behance-Design verwenden und später darauf zurückkommen, um es in Webflow oder Squarespace zu erstellen und später darauf zurückkommen, um . Sie müssen keine ganz anderen Layouts entwerfen. Bei allem, was gesagt ist, der einzige Unterschied darin, wie Sie Ihre Kunsttafel für jeden Ansatz einrichten würden ist der einzige Unterschied darin, wie Sie Ihre Kunsttafel für jeden Ansatz einrichten würden, die Höhe Ihrer Kunsttafeln. Wenn Sie sich entscheiden, für Behance zu optimieren, möchten Sie einen vertikalen Stapel von Kunsttafeln erstellen , die 1920 Pixel breit und 1080 Pixel hoch sind . Behalten Sie die Breite immer gleich, aber Sie können die Höhe ein wenig variieren und es spielt keine Rolle. Sie dann zur Seite Erstellen Sie dann zur Seite eine weitere Kunsttafel mit 808 mal 632 Pixeln. Dies wird für Ihre Miniaturansicht sein. Wenn Sie Behance ganz mischen und nur XD verwenden möchten, um das Layout für die Seite zu entwerfen, die Sie in Ihrem Website-Builder erstellen möchten. Sie entwerfen nur auf einer einzigen 1920 Pixel breiten Kunsttafel , die am Ende so lang ist, wie Sie es möchten. Dann würde ich auch empfehlen, ein langes Kunstbrett mit einer mobilfreundlichen Breite zu erstellen . Ich verwende 375 Pixel , da dies die kleinste gemeinsame Telefonbreite ist. Denken Sie daran, dass das Erstellen einer Webseite in Webflow oder Squarespace nicht Teil dieser Klasse ist. [MUSIK] Wenn Sie noch keine Erfahrung damit haben oder gerade kein persönliches Portfolio haben, dann würde ich empfehlen, vorerst bei Behance zu bleiben . Das ist es für die Einrichtung, einfach genug. Als Nächstes füllen wir Ihr Design-Assets-Panel und Ihre XD-Datei mit allen Stilen aus, die Sie für Ihre Fallstudie benötigen. 8. Deine Stile definieren: Jetzt, da wir unsere XD-Datei eingerichtet haben, machen wir uns die Dinge einfach und füllen unser Asset-Panel mit allen Stilen aus, die wir in Zukunft benötigen werden. Dies ist super einfach, da Sie wahrscheinlich dieselben Stile verwenden möchten , die Sie im Projekt selbst verwendet haben. Dies könnte so einfach sein wie das Durchblättern Ihrer XD-Bibliotheken und das Einziehen der Bibliotheken, die Sie für Ihr Projekt verwenden. Wenn Sie das noch nicht getan haben oder nicht mit der Funktionsweise von Bibliotheken in XD vertraut sind , ist das wirklich einfach. Lasst uns das jetzt durchmachen. Es gibt drei Dinge, die Sie eine Bibliothek haben, Farben, Typenstile und Komponenten. Für eine Fallstudie wie diese sind Farben und Typenstile definitiv die wichtigsten. In dieser Projektdatei lenke ich Ihre Aufmerksamkeit nur nach links , wo wir unser Asset Panel haben. Sie können sehen, dass wir Farben, Zeichenstile und Komponenten haben. Komponenten sind wie Symbole, aber wir konzentrieren uns wieder nur auf Farben und Textstile. Die Art und Weise, wie Sie diese hier bevölkern lassen, ist super einfach. Nehmen wir an, wir löschen das vorerst, dieses rote, und es wird sagen, dass ich es hinzufügen möchte. Ich wähle nur ein Element aus , das diese Farbe hat, und ich komme hierher und klicke auf den Plus-Button, und dann nennen wir diesen Datensatz rot. Sie können das Gleiche auch für Textilien tun. Vielleicht will ich einen Stil für dieses Tag, ich kann hier einfach plus treffen. Aber was ist, wenn ich in der Lage sein möchte, aus einer anderen Akte wie meiner Fallstudienakte auf diese Assets zugreifen aus einer anderen Akte wie meiner Fallstudienakte auf diese Assets zu können. Sie können dies ganz einfach als Bibliothek veröffentlichen. Wir werden auf dieses Share-Icon kommen. Es wird mir sagen , dass diese aktuelle Datei zur Veröffentlichung bereit ist, also klicke ich nur auf „Veröffentlichen“. Wenn ich jetzt zu meiner Fallstudie wechsle , kann ich hierher gehen, auf Libraries anzeigen klicken, und ich finde diese Bibliothek genau hier in der ich all diese Stile einziehen kann. Wenn Sie nicht einmal Lust haben, damit umzugehen, können Sie einfach einige Elemente oder Bildschirme aus Ihrer Datei kopieren und einfügen und die Farben und Textstile abrufen und in dieser Fallstudie einer neuen Bibliothek hinzufügen -Datei. Natürlich bist du hier nicht auf irgendetwas beschränkt. Ich werde wahrscheinlich viele dieser Textstile vergrößern müssen , denn bevor ich für eine mobile App entwarf, werde ich jetzt für eine Behance-Fallstudie entwerfen. Möglicherweise müssen Sie auch weitere Textstile hinzufügen, und Sie können sogar Dinge ändern und eine völlig andere Schriftart verwenden. Sie können verschiedene Farben verwenden, wenn Sie möchten, es liegt ganz bei Ihnen, aber es ist meiner Meinung nach viel einfacher, diesen Ort zu haben, an dem Sie anfangen können. Es ist auch wichtig zu beachten, dass Sie zwischen Ihren Bibliotheken und den Dokument-Assets, die Sie haben, hin und her wechseln können . Diese Assets, die für dieses Dokument spezifisch sind, im Vergleich zu einem eine andere Bibliothek. An dieser Stelle können Sie auch einige verschiedene Symbole oder Logos oder Illustrationen einbringen , wenn eines davon für Ihr Projekt relevant ist. Sie können sie entweder zur Seite halten oder Sie können den Befehl K drücken und sie tatsächlich zu Komponenten machen , die in diesem Abschnitt herunterleben in diesem Abschnitt herunterleben werden, um wann immer Sie sie benötigen, eingezogen und wir werden in der zukünftigen Lektion viel tiefer in die Grafik einsteigen der zukünftigen Lektion viel tiefer in die Grafik Wenn Sie also so etwas noch nicht haben, machen Sie sich keine Sorgen. Sobald Sie einige Stile in Ihrer Fallstudienakte vorbereitet haben , gerne zur nächsten Lektion übergehen, in der Sie eine der häufigsten Fragen beantworten werden , die ich zu meiner Behance bekomme Fallstudien. [MUSIK] 9. Diesen nahtlosen Look bekommen: [HINTERGRUND] Ich möchte eine häufig gestellte Frage beantworten eine häufig gestellte Frage , bevor wir uns mit der Erstellung dieser Fallstudie befassen nahtlose Webseite aussehen . Wie lasse ich meine Fallstudien wie eine reibungslose, , obwohl sie aus einer Reihe verschiedener Kunsttafeln bestehen und die Antwort überlappende Elemente sind. Lassen Sie mich Ihnen ein paar Beispiele zeigen. Dies ist eine meiner alten Fallstudien und ich möchte Ihnen zeigen, wie viele sich überlappende Elemente ich verwende, um diesen Look zu erzielen. Zuerst sprechen wir über die Hintergrundelemente. Wenn wir dieses iPhone vorerst aus dem Weg bewegen, können Sie sehen, dass die Hintergrundfarbe dieser beiden Kunsttafeln diese grau-beige Farbe ist. Was ich übertrieben habe, ist diese weiße Art von Wellenform. Was ich getan habe, ist, dass ich es tatsächlich auf diese beiden Kunsttafeln dupliziert habe . Wenn du also siehst, wenn ich diese lösche, kannst du sehen, dass es tatsächlich zwei separate Formen gibt. Wenn ich einfach auf „Command C“ drücke und dann zu dieser Kunsttafel gehe und auf „Command V“ klicke , wird es standardmäßig eingefügt. Aber wenn ich es einfach aufschiebe, bis es perfekt in der Linie ist und dann mache ich „Command linke Klammer“, bis es ganz nach hinten geht. Dann habe ich diese Form geschaffen , die sich auf zwei verschiedenen Kunsttafeln fortsetzt. Das ist nur der Hintergrund. Ich mache das an ein paar verschiedenen Orten. Hier habe ich diese Wellenform verwendet, die grün ist Anstatt diesen wirklich scharfen Übergang zu haben bei dem es definitiv wie zwei separate Kunsttafeln aussieht, bin ich mit dieser grünen Wellenform gekommen , damit sie fließt irgendwie ein bisschen reibungsloser in diesen Inhalt ein. Ich mache das Gleiche hier mit dieser Form, und ich mache es auch mit anderen Elementen, zum Beispiel diesem iPhone-Modell, man kann sehen, dass es sich tatsächlich um zwei verschiedene Bilder handelt. Ich habe es auf diese Kunsttafel dupliziert und dann einfach wieder aufgeschoben , damit es sich perfekt anpasst und es wie eine perfekte Fortsetzung des visuellen Elements aussieht . Ich habe das Gleiche mit diesem Bild gemacht. Hier unten habe ich es mit diesem Mock-up gemacht. Die Leute werden damit gestolpert , weil Kunsttafeln als Masken fungieren. Sie können nicht einfach ein Element zwischen zwei Kunsttafeln werfen und den genauen Effekt erzielen, den Sie wollen. Stattdessen müssen Sie es manuell kopieren, einfügen und ausrichten. Dass es auf der einen und anderen Kunsttafel dupliziert wird. Es ist super einfach, aber zoomen Sie einfach ganz hinein und überprüfen Sie, ob die Fortsetzung perfekt übereinstimmt. Es versteht sich wahrscheinlich von selbst, dass Sie Ihre Kunsttafeln genau wie einen Hintern gegeneinander aufstellen müssen, damit dies funktioniert. Das war's. Es ist ein einfacher Tipp, aber es gibt Ihnen die Möglichkeit, Ihr Behance-Projekt wie eine Website reibungslos zu scrollen und super flexibel mit dem Aussehen zu gestalten Ihr Behance-Projekt wie eine Website reibungslos zu scrollen und super . Probieren Sie dies mit ein paar verschiedenen Formen, Masken oder Fotos aus verschiedenen Formen, Masken oder und sehen Sie, ob Sie damit herumspielen können, wie das funktioniert Dann sind Sie bereit, die Technik anzuwenden, wenn wir tatsächlich anfangen erstellen Sie Ihre Fallstudie [HINTERGRUND] [MUSIK] in der nächsten Lektion [MUSIK]. 10. Die that erstellen!: Jetzt, da Sie alle notwendigen Teile haben , um diese Fallstudie zu erstellen, ist es wirklich an der Zeit, sie gemeinsam zu verwirren. Machen Sie weiter und öffnen Sie alles, was Sie haben. Sie sollten die leere Designdatei haben , die Sie gerade für Ihre Fallstudie eingerichtet haben, alle Designdateien aus Ihrem Projekt selbst, Ihre schriftliche Gliederung und Ihren Ordner voller Projektnotizen und laufender Arbeit und solche Dinge. Das erste, was ich gerne mache, ist das Header-Image zu erstellen , das meine Fallstudie startet. Dies kann in jedem Stil sein, den Sie mögen. Zusammen mit dem Wichtigsten, das in diesem Header-Abschnitt ein starkes Bild ist , füge ich auch den Titel meines Projekts, eine einzeilige Beschreibung und ein paar Hintergrundinformationen hinzu für sofortigen Kontext. Dann gehe ich einfach durch die verschiedenen Abschnitte meiner Gliederung und kopiere und füge die Kopie in meine Fallstudiendatei ein, lege sie auf der Kunsttafel aus, und die ganze Zeit überlegen, was ich zeigen kann, versus einfach zu erzählen. Zum Beispiel erinnern Sie sich in meiner Problemaussage, dass ich den Greenscreen-Effekt auf Tiktok verwiesen habe. Ich zeige einen echten Screenshot, vielleicht sogar ein GIF davon. Es gibt ein Visual gepaart mit dem Verbalen, das wirklich den Punkt darüber bringt , was jetzt passiert, und es gibt die Möglichkeit für eine bessere Lösung. [MUSIK] Sobald ich zwei oder drei Abschnitte angelegt habe, ich gerne sicher, dass sie gut zusammenfließen und einige visuelle Variationen haben. Manchmal mache ich das mit Hintergrundfarben, manchmal mit Formen, Bildern, solchen Dingen. Sobald ich dies getan habe, kann ich dieses Muster während der restlichen Fallstudie mit konsistenten Überschriften- und Körpertextstilen wiederholen Fallstudie mit konsistenten . [MUSIK] Genau wie alles andere im Design gibt es keine genaue Formel für diesen Prozess. Das Beste, was ich tun kann, ist dir einfach zu zeigen wie ich es angehe und dich auf ein anderes großartiges hinweisen Beispiele in dieser Datenbank, die ich im Ressourcenbereich erwähnt habe. Aber bei allem, was gesagt möchte ich eine Reihe verschiedener Möglichkeiten durchgehen , wie Sie Informationen visuell präsentieren können. Das werden wir in der nächsten Lektion machen. 11. Visuelle Informationen visuell präsentieren: Während Ihrer Fallstudie gibt es verschiedene Möglichkeiten für Sie, Informationen visuell darzustellen. Dies wird dazu beitragen, dass die Fallstudie so viel verdaulicher und weniger textlastig ist. Es gibt acht Hauptwege , die wir durchgehen werden: Daten, Ikonographie, Diagramme, Highlights, Aufzählungspunkte , Zitate, Bilder und Modelle. Während wir gehen, zeige ich Ihnen viele Beispiele aus anderen Fallstudien. Wenn Sie sich diese also vollständig ansehen möchten, schauen Sie sich einfach die Mini-Datenbank an, die in der Ressource verlinkt ist abschnitt. Sprechen wir zuerst über Daten. Jedes Mal, wenn Sie über Metriken oder Recherchen sprechen, sollten Sie sie mit einem Balkendiagramm, einem Kreisdiagramm oder etwas anderem visuell präsentieren , das die Zuschauer auf einen Blick verstehen können. Ikonographie, wenn Sie einen Abschnitt mit mehr als zwei oder drei verschiedenen Punkten haben , prüfen Sie, ob Sie eine Reihe von Symbolen verwenden können , um jeden einzelnen Punkte einzuführen oder darzustellen. Charts. Visuals müssen nicht nur Bilder, Formen oder Symbole bedeuten. Die Art und Weise, wie Sie Text auslegen, kann auch dazu beitragen, einen Abschnitt einfacher zu lesen und zu verstehen. Prüfen Sie, ob es Abschnitte Ihrer Fallstudie gibt , in denen Sie Ideen und Texte visuell organisieren können . Highlights, genau wie die Verwendung eines größeren Textstils für Ihre Überschriften, ist das Hervorheben wichtiger Punkte eine weitere großartige Möglichkeit, Ihre Fallstudie verdaulicher und geschickter zu machen . Aufzählungspunkte, versuchen Sie lange Absätze von Texten zu vermeiden lange Absätze von Texten da diese nicht leicht scanbar sind. Verwenden Sie stattdessen Aufzählungspunkte wann immer Sie können. Zitate, wenn Sie ein Angebot haben , das während Ihrer Recherche wirklich informativ war oder ein Angebot, das die Auswirkungen Ihrer Lösung zeigt. Sie könnten es verstärken, indem Sie es so gestalten , dass es sich in Ihrer Fallstudie abhebt. Bilder, ich persönlich verwende gerne Bilder, um meine Fallstudie ansprechend zu halten. Diese Art von Visualisierung macht oder bricht Ihre Fallstudie wirklich nicht. Wenn Sie zu viel verwenden, kann es tatsächlich von Ihren Hauptpunkten ablenken. Stellen Sie also sicher, dass alle von Ihnen verwendeten Bilder relevant sind. Normalerweise versuche ich selbst Bilder zu fotografieren, aber wenn ich es nicht kann, verlasse ich mich auf Unsplash. Sie haben viele wirklich hochwertige Optionen , die gebührenfrei sind. Zuletzt Mockups. Mockups sind ein wirklich wichtiger Bestandteil der meisten Fallstudien. Stellen Sie daher sicher, dass Sie hochwertige Mockups verwenden oder erstellen. Ich habe einige meiner Favoriten in den Ressourcenbereich dieser Klasse aufgenommen . Fühlen Sie sich frei, sie einfach zu halten oder sie wie dieses Beispiel wirklich zu Ihren eigenen zu machen. Einige davon sind möglicherweise nicht relevant für Ihre Fallstudie und das ist völlig in Ordnung. Das Schlimmste, was Sie tun können, ist alles einzubeziehen und Ihre Fallstudie zu überfordern , was sie wirklich verwirrend macht und Ihre Botschaft verwässert. Wenn Sie Zweifel haben, halten Sie es kurz. Bevor Sie mit der nächsten Lektion fortfahren, finden Sie hier Ihren Aktionsschritt. Entwerfen Sie jeden Abschnitt, indem Sie Ihrer schriftlichen Fallstudie folgen. Das mag einschüchternd klingen, aber alles, was Sie wirklich tun, ist den schriftlichen Teil Ihrer Fallstudie mit allen visuellen oder visuellen Bildern zu kombinieren Ihrer Fallstudie mit , die sinnvoll sind. Sie haben bereits die ganze harte Arbeit geleistet die Geschichte zu erzählen. Zögern Sie nicht, das Feld leer zu lassen oder Platzhalterformen für alle Bereiche zu erstellen Platzhalterformen für alle Bereiche , in denen Sie Animationen einschließen möchten. [MUSIK] Das werden wir in der nächsten Lektion angehen. 12. Ein animiertes GIF erstellen: Freunde, die wir kurz davor sind , diese Fallstudien abzuschließen. In dieser Lektion werde ich Sie durchführen, wie Sie ein animiertes GIF erstellen , das in Ihre Fallstudien aufgenommen werden kann, unabhängig davon, wo Sie am Ende veröffentlichen. Für meine Bubble-Fallstudie ist eigentlich nicht viel Animation an dem Projekt beteiligt. Um euch das zu zeigen, bin ich zu einem meiner bisherigen Projekte und Fallstudien, die als Phase bezeichnet werden, übergegangen . Das sehen wir uns hier an. Wenn Sie nach unten scrollen, können Sie sehen, dass ich das so entworfen habe, wie ich meine sprudelte Fallstudie entworfen habe. Vertikal gestapelte Zeichenflächen wie diese, die alle die gleiche Breite haben. Ich möchte Ihnen zeigen, was ich mache, wenn ich entscheide, dass ich eine Animation in einem dieser Abschnitte haben möchte. Für diesen Abschnitt wollte ich zeigen, es aussehen würde, wenn jemand auf diese Skala gezogen und eine Zahl ausgewählt hat. Ich habe eine Animation erstellt, indem ich diese Zeichenfläche hier zweimal dupliziert und das Design manipuliert habe. bleibt jede einzelne Sache Bis auf diese wenigen Elemente bleibt jede einzelne Sache gleich. [NOISE] Das, ich bin gerade zu den Sieben übergegangen, und diese Linie habe ich gerade herausgezogen, um lang genug zu sein, um das zu erreichen. Dann habe ich diesen Abschnitt einfach auf diese nächste Zeichenfläche dupliziert und dasselbe gemacht, diesen Selektor auf die Acht verschoben und dann im Prototypmodus verkabelt. Wenn wir in den Prototyp-Modus wechseln, habe ich einen Zeitauslöser gemacht und diesen in eine Schleife gesetzt. Nach 0,5 Sekunden wird es automatisch auf diesem Bildschirm animiert. Ich habe das Lockern, Erleichtern und raus gemacht , und dann habe ich hier nach 0,7 Sekunden dasselbe gemacht, und dann wird es nach weiteren 0,7 Sekunden wieder zum Anfang laufen. Wenn Sie mit dem Animieren und Verwenden von Auto Animate in XD nicht gut vertraut sind, habe ich einige Tutorials auf meinem YouTube-Kanal , die Sie als Ressourcen verwenden können, um dort nachzuholen. So sieht das hier aus, genau das schauen Sie sich hier an, es ist im Grunde nur eine Looping-Animation die hier ein bisschen Bewegung zeigt, die es optisch ein bisschen mehr macht interessant. Um dies als Video aufzunehmen, wollen wir [NOISE] wieder nach oben gehen, um diesen Prototyp abzuspielen , und wir werden nur Rekord erreichen. Ich möchte sicherstellen , dass meine Maus völlig aus dem Weg ist , mein Cursor, und ich lasse das ein paar Mal durch die Schleife spielen , um sicherzustellen , dass wir mindestens einen wirklich guten vollen haben der Animation in diesem Video. Dann höre ich auf mit der Aufnahme und speichere diesen MP4. Wir haben diese Animation hier und ich werde sie im QuickTime Player öffnen , damit wir diese auf einen vollständigen Zyklus kürzen können. In QuickTime drücke ich nur Command T, um zu trimmen, und ich werde nur eine [MUSIC] perfekte Schleife finden. Genau dort sieht es gut aus und dann befehle ich S zum Speichern. [NOISE] Ich nenne das einfach getrimmt, und wir können den längeren dort loswerden. Eine wirklich einfache App, die ich gelernt habe, um einen MP4 in ein GIF zu verwandeln, heißt Gifski. Das findest du im App Store. Es sieht so aus im App Store auf dem Mac, es gibt auch ein Tool namens GifTuna, das Sie verwenden können, wenn Sie einen Windows-PC verwenden, das meiner Meinung nach dasselbe ist . Wir werden das öffnen, [NOISE] und es sieht einfach so aus, dieses süße kleine Fenster, wenn Sie es öffnen, und ich ziehe diesen MP4 einfach direkt in dieses Fenster. Die einzigen Einstellungen, die wir ändern möchten, sind die Breite, wir werden 1920er Jahre machen, da dies die Breite der übrigen Zeichenflächen ist. Wir wollen sicherstellen, dass die Schleife für immer läuft. Wir haben die Qualität bis nach oben und die geschätzte Größe beträgt nur 1,9 Megabyte. diese Weise überschätzt normalerweise die Größe, ich zeige Ihnen, was es tatsächlich ist. Ich werde feststellen, wenn Sie eine viel längere Animation haben, müssen Sie die Qualität möglicherweise ein wenig herabstufen, aber meiner Erfahrung nach aber meiner Erfahrung hat das nie einen großen, großen Unterschied gemacht. Es sieht immer sehr hochwertig aus, weshalb ich dieses Tool wirklich liebe und es ist kostenlos, wenn ich das noch nicht erwähnt habe. Ich klicke auf „Convert“. Das hat weniger als 20 Sekunden gedauert, also werden wir jetzt nur Speichern unter machen, und das speichern wir auf unserem Desktop. Jetzt wähle ich einfach darauf aus und drücke die Leertaste, um eine Vorschau anzuzeigen, wie das aussehen wird. Wie Sie sehen können, ist es super hochwertig, die Geschwindigkeit ist schön, es ist überhaupt nicht nervös oder verzögert, alle Farben sehen super genau aus. Wenn Ihnen gefällt, wie das aussieht, wiederholen Sie den Vorgang für alle anderen Animationen, die Sie in Ihre Fallstudie aufnehmen möchten , und legen Sie alle Ihre GIF-Dateien in den Behance-Ordner, den Sie haben zu Beginn des Unterrichts gemacht. Normalerweise nenne ich diese Dateien mit Zahlen, die auf der Reihenfolge basieren , in der die Zeichenflächen erscheinen werden, in Ihrer Fallstudie. Sie können dieses GIF mit all Ihrem P und Gs mischen, die Sie in der nächsten Lektion exportieren werden. Sie kennen Ihren Aktionsschritt für diese Lektion, erstellen Sie Ihre Gifs und legen Sie sie in dem Ordner ab, der nach Ihren Wünschen organisiert ist. In der nächsten Lektion exportieren wir den Rest Ihrer Fallstudie und laden ihn tatsächlich auf Behance hoch. [MUSIK] 13. Exportieren und Hochladen: [MUSIK] Zuallererst ja, du hast es geschafft. Ihre Fallstudie ist endlich fertig, herzlichen Glückwunsch. Jetzt müssen Sie es nur noch für die Veröffentlichung vorbereiten. Abhängig von der Annäherung, die Sie verfolgen , werden Sie in eine von zwei Richtungen vorwärts gehen. Wenn Sie diese Fallstudie tatsächlich zu Squarespace oder Webflow erstellen , werden Sie diese Kunsttafeln nicht wirklich exportieren. In diesem Fall möchten Sie nur die einzelnen visuellen Assets wie Ihre Bilder, Formen und Mockups exportieren die einzelnen visuellen Assets wie Ihre Bilder, . Sie können alle diese Elemente einfach in einem Ordner speichern und wenn Sie Ihre Seite erstellen, können Sie sie einfach einbringen. Ich denke jedoch, dass die meisten von Ihnen für Behance optimiert haben. Wenn dies der Fall ist, können Sie tatsächlich durchziehen, jedes einzelne Art-Board auswählen, auf „Command E“ klicken, um diese SPNGs in den zuvor erstellten Behance-Ordner zu exportieren . Wenn Sie organisiert bleiben möchten, nenne ich diese Kunsttafeln normalerweise gerne in aufsteigender Reihenfolge, beginnend oben, bei einem, dann 2, 3, 4 usw., damit sie in Ihrem organisiert bleiben können Behance-Mappe. Steigen Sie als Nächstes in Ihr Behance-Konto und klicken Sie auf „Arbeit teilen“. Dies wird ein neues Projekt eröffnen. Eine Anmerkung hier, Sie werden den Prototyp als Option zum Importieren von XD oder Figma sehen Prototyp als Option zum Importieren von XD oder , und Sie können dies absolut frei tun. Manchmal tut ein Prototyp ohne Kontext jedoch nicht wirklich viel für Ihren Betrachter. Denken Sie daran, dass der springende Punkt Ihrer Fallstudie darin besteht, die Geschichte darüber zu erzählen , wie Sie dieses Problem gelöst haben. Bevor Sie einen Prototyp hinzufügen, fragen Sie sich, wo oder ob dieser Prototyp in Ihre Geschichte passt. als Nächstes auf „Image“, navigieren Sie zu Ihrem Behance-Ordner und wählen Sie alle PNGs und GIFs aus, die Sie hochladen möchten. Sobald diese geladen werden, werden Sie feststellen, dass zwischen ihnen ein Standardabstand vorhanden ist . Um das zu entfernen, klicken Sie auf der rechten Seite auf „Styles“ und ändern Sie es von 60 Pixel auf Null und klicken Sie dann auf „Speichern“. Stellen Sie sicher, dass Ihre Bilder in der richtigen Reihenfolge sind. Wenn Sie die Reihenfolge überhaupt bearbeiten müssen, bewegen Sie den Mauszeiger über ein Bild, klicken Sie auf das blaue Bearbeitungssymbol und wählen Sie Projekt neu anordnen aus. Von hier aus können Sie die neue Bestellung ändern und speichern. Eine Sache zu beachten: Wenn Sie GIFs mit Hintergrundfarben verwenden , die nicht weiß sind, bemerken Sie möglicherweise etwas Funky. Da Ihr GIF möglicherweise ein anderes Qualitätsbild als Ihre PNGs hat, die Farbe möglicherweise nur ein wenig geändert . Wenn dies der Fall ist, machen Sie sich keine Sorgen, es ist eine super einfache Lösung. Gehen Sie zurück zu XD und wählen Sie alle statischen Kunsttafeln , die dieselbe Hintergrundfarbe haben. Gehen Sie in das Pipettenwerkzeug und probieren Sie die exportierte GIF-Hintergrundfarbe. In XD wird es wie zwei verschiedene Hintergrundfarben aussehen, aber sobald sie alle in Behance sind, werden sie vollkommen konsistent sein. Der Aktionspunkt für diese Lektion ist einfach. Folgen Sie einfach den Schritten, die ich gemacht habe, um alles in ein Behance-Projekt hochzuladen , und in der nächsten Lektion fügen wir den letzten Schliff hinzu, wie Miniaturansicht, Projekttitel , Beschreibung und alle Tags. Bis bald. 14. Fertigstellen und veröffentlichen!: Hier kommt der letzte Schliff. Sie haben alle Ihre Bilder in Ihr Behance-Projekt hochgeladen und hoffentlich haben Sie sich durchgezogen, um sicherzustellen, dass keine Tippfehler oder seltsame, funky Dinge vor sich gehen. Jetzt ist es fast an der Zeit, auf „Veröffentlichen“ zu klicken, in die Einstellungen zu gehen und eine Projekt-Miniaturansicht hochzuladen. Zu Beginn des Kurses ließ ich Sie dafür eine Kunsttafel einrichten, aber wenn Sie das noch nicht entworfen haben, keine Sorge, gebe ich Ihnen ein paar Tipps. Nummer 1, verwenden Sie nicht zu viel Text, aber fügen Sie eine wirklich kurze Beschreibung hinzu, damit jemand weiß, was zu erwarten ist, wenn er darauf klickt. Sie verfügen über relevante Mockups, damit die Zuschauer wissen, was das tatsächliche Output des Projekts war. Wählen Sie den interessantesten Bildschirm Sie auf Ihrem Mockup präsentieren möchten. Persönlich nehme ich gerne mein Header-Design und passe es einfach für dieses Miniaturbild damit sie am Ende super ähnlich aussehen. Geben Sie als Nächstes Ihrem Projekt einen Titel. Der Titel spielt keine Rolle wenn Sie dies nur als Portfolio verwenden, aber wenn Sie versuchen, auf der Plattform tonnenweise Nutzen zu erhalten, benennen Sie es etwas, wonach die Leute suchen könnten. Die beiden Projekte, die ich vorgestellt habe, hießen Smart Diffuser App und Cycle Syncing App. Aber um ehrlich zu sein, hatten meine Titel vielleicht nichts damit zu tun, vorgestellt zu werden. Wer weiß es? Fügen Sie als Nächstes ein paar Tags hinzu. Dies ist eine weitere Gelegenheit, über relevante Suchbegriffe für Ihr Projekt nachzudenken . Normalerweise beginne ich mit UI, UX, Produktdesign und werde dann spezifischer, wie die Automatisierung der zukünftigen mobilen Apps, das App-Design und ähnliches, fülle dann die Tools aus, die du in der Kategorien, in die Ihr Projekt fällt. Schließlich fügen Sie die Beschreibung hinzu, die ich normalerweise kopiere, und fügen Sie einen der ersten Abschnitte meiner Fallstudie für diesen Absatz ein, der das Projekt gut einführt, und das war's. Korrekturlesen Sie alles noch einmal und klicken Sie dann auf „Veröffentlichen“. Auf Behance vorgestellt zu werden, sollte nicht dein Ziel sein, denn um ehrlich zu sein, hast du nur sehr wenig Kontrolle darüber. Vielleicht möchten Sie jedoch wissen, dass Ihr Projekt nur einmal bei Ihrer ersten Veröffentlichung an das Behance-Kurationsteam gesendet wird einmal bei Ihrer ersten Veröffentlichung an das Behance-Kurationsteam . Laden Sie also nicht einfach die Hälfte Ihrer Fallstudie hoch und kommen Sie dann zurück und beenden Sie sie später, veröffentlichen Sie erst, wenn Sie fertig sind. Sie kennen Ihren Aktionsschritt hier, füllen Sie alle Felder für dieses Behance-Projekt aus und klicken auf „Veröffentlichen“. Ernsthaft, ihr solltet wirklich stolz auf dich sein , dass du so weit gekommen bist. Das ist eine Menge Arbeit. Ich hoffe wirklich, dass Sie den Link im Diskussionsbereich unten mit mir teilen. Ich würde absolut gerne sehen, was ihr geschaffen habt, und ich weiß, dass andere Schüler der Klasse wirklich davon profitieren würden , diese als Inspiration zu sehen. [MUSIK] 15. Abschließende Bemerkungen: Zuerst möchte ich einen großen Glückwunsch Abschluss dieser Klasse aussprechen. Sie sind dem nächsten Job einen großen Schritt näher dran , gewinnen mehr Glaubwürdigkeit als Designer und inspirieren die kreative Community. Ich hatte ehrlich gesagt so viel Spaß euch durch den Prozess des Schreibens, Entwerfen und Veröffentlichen Ihrer eingehenden Fallstudien zu führen. Vergessen Sie nicht, Ihre Projekte unten im Bereich der Klassengemeinschaft hochzuladen . Ich möchte wirklich sehen, woran Sie gearbeitet haben. Sie können den Link zu Ihrem Projekt veröffentlichen oder ein paar Ihrer Lieblings-Kunsttafeln oder alle Ihre Kunsttafeln hochladen paar Ihrer Lieblings-Kunsttafeln oder alle Ihre Kunsttafeln , es liegt ganz bei Ihnen. Wenn Ihnen dieser Unterrichtsstil gefallen hat, Sie sich gerne meine andere Klasse hier auf Skillshare ansehen. Es heißt Intro to UX für Grafikdesigner sowie meinen YouTube-Kanal und Instagram, wo ich auch ständig Design-Inhalte teile. Danke, dass du während der ganzen Zeit bei mir geblieben bist, und ich hoffe, euch bald in einer anderen Klasse oder einem anderen Video zu sehen . Tschüss. [MUSIK] Meine Hände sind so kalt. [NOISE] Sehr generisch idyllisch, wie sagt man das? Idyllisch. Idyllisch. Komm schon Kumpel, du schaffst das.