Transkripte
1. Einführung: Hallo Menace Jo Jo und Basing San Francisco. Ich mache UX Design seit über 12 Jahren. Dies ist eine Anfänger-Level-Klasse und ich werde Ihnen einen Überblick über effiziente Sie
XT nicht Prozess beibringen . Ich werde Ihnen beibringen, wie zu entwerfen und Gewicht zu erstellen Seite von Grund auf ausgestorben sein und wird darauf hinweisen, einige sehr wichtige beste Prozesse. Und ich werde Ihnen zeigen, wie Sie die kostenlose nutzen, die Sie mögen, um Zeit zu sparen. Dieser Kurs ist für Leute, die neu sind, ausgestorben zu sein oder Sie zusätzlichen Freund Prozess für einen Grafikdesigner oder für Anfänger, die Sie X Design lernen möchten. In dieser Klasse lernen
Sie einen Überblick über einen guten UX-Designprozess. Verwenden grundlegender nützlicher Tools in Adobe XY So erstellen Sie eine Informationen, Architektur und Benutzer, wie Sie Low und High Fidelity y Freunde in Adobe X'd erstellen, wie Sie Ihre entworfen, um Entwickler,
dicke Inhaber und Benutzer oder Kritik und Feedback
teilen und verschieben . Also, wenn ich schon sie an einem effizienten Sie ausgezeichneten Prozess festhalten und vergessen Sie nicht, mir zu folgen und zu stehlen Aktien
2. Entwerfen (hohe Ebene): UX-Design im Design im Allgemeinen geht es darum, kritisches Denken zu lösen, Erfahrungen zu
schaffen und visuell ansprechend und geschmackvoll oder sogar unvergesslich zu machen, wenn der Benutzer diese Linien erlebt. Nicht gut, die Leute sollten überhaupt nicht bemerken, während Sie das Produktproblem verwenden. Arbeite uns einfach. Es soll sehr intuitiv sein. Gutes Design. Es schafft Möglichkeiten, Informationen und Messaging leicht zu verstehen und zu verdauen jedes Element in diesen verwendet. Ich wurde aus einem bestimmten Grund auserwählt, und es ist nicht zufällig da. Schritt eins. Verstehen Sie den wichtigsten Aspekt der hohen Qualität Wunsch ist es, den Benutzer wirklich zu verstehen . Dies kann ganz einfach mit einigen Techniken und Fragen gemacht werden. Wir müssen diesen Stern mit dem Benutzer fragen und beantworten. Sobald die Probleme, mit denen der Benutzer konfrontiert ist, bekannt sind, können
wir anfangen, über die Lösung nachzudenken. Aber bevor wir die Lösung wirklich entwerfen, müssen
wir an anderen Designaspekten arbeiten, die unsere Lösung prägen. Schritt zwei. Forschung Zuerst sollten
wir anfangen, die Marke zu verstehen. Wie ist das Projekt? Ich arbeite daran, mich mit der Marke auszurichten, um die Mission und die Ziele zu verstehen, bevor ich mit dem nächsten Schritt
übergehe. Wir wollen die Probleme der Nutzer und den Hof des Gehirns identifizieren und sehen, wie sie sich ausrichten bevor wir die Lösung entwerfen. Ein guter Design-Prozess erfordert, dass wir wirklich verstehen, unsere Benutzer gut beobachten Benutzer in ihrer natürlichen Umgebung für bestehende Produkte und versuchen, in ihren Kopf zu bekommen, indem so viele
Fragen wie möglich stellen,
verstehen, was sie versuchen zu erreichen, was sie mögen und nicht mögen. Was wollen und erwarten die Benutzer ni? Was sind die Schmerzpunkte? Und wir können diese Informationen verwenden, um Benutzerpersona zu bilden. Nächster Schritt Benutzer-Tests in der frühen Phase. Wir brauchen keine Millionen von Benutzern zu befragen. Der effektive Weg zum Testen in der frühen Phase ist Test 3, um zielgerichtete Benutzer mit
Low-Fidelity-Prototypen zu bekämpfen . Er wird Zeit sparen, und es bringt uns genug Daten, um mit dem Projekt voranzukommen. Schritt drei auf den Läusen. Sobald Sie alle Recherchen haben, nehmen Sie alle Daten, die Sie haben, und legen Sie visuell in yusor personas. Dies wird jedes Mal nützlich sein, wenn Sie zurückgehen und die Verwendungen auch verstehen müssen. Sie sagten, Personas werden sehr nützliche Leitfaden in zukünftigen Schritten des Designs sein. Wenn wir auf der bestehenden Website oder einer App arbeiten würden. Wir werden anfangen, aufgezeichnete Daten zu analysieren. Es ist alles, was wir. Sie gehen zu Ihnen und es ist alles, was immer wieder von potenziellen Nutzern kommt und
herausfinden , wie wir uns treffen können? Dies ist Bedürfnisse der Stakeholder Bedürfnisse und Verwendung. Es braucht Schritt für Anfang, um tatsächliche Design-Star zu bauen, indem die
Informationsarchitektur erstellt wird , um den Inhalt,
Hierarchie und Wegfindung zu definieren . Beginnen Sie mit der Suche nach einer Verwendung von Flow. Dies ist, wie die Verwendung von, um von Punkt A nach Punkt B innerhalb der App zu gehen und wie die App mit dem Benutzer
interagiert. Lo Fidelity Ehefrau Freund ist wie eine Blaupause des Design-Stars. Diese bin ich niedrig für den einzigen Draht Freund, um die Idee über zu bekommen, und es kann geteilt werden und erhalten Feedback. Beginnen Sie mit dem Testen mit den Benutzern im Prototyp. Beobachten Sie, wie sie es verwenden. Werden sie verwirrt? Ist das Jahr mehrere genug? Ist es einfach, die Informationen zusammen zu finanzieren Feedback Lokal und verfeinert und sicherzustellen, dass es immer noch Geschäftsziel und Benutzerbedürfnisse braucht. Nach dem Entwurf, Kritik, Feedback und Redesign und Neugestaltung einige mehr, wünschen Sie ständig unsere Low-Fidelity-Frau Freund teilen, Prototyp für Tests und sammeln Feedback mit dem Ting. Er wird nur mit Kollaborationen besser, bevor wir. Dies sind High-Fidelity-Drahtrahmen mit Ihrem Brainstorming, der Boob oder und sie sehen und fühlen für das gesamte visuelle Design. Diese ich bin Musterfarbe, Topographie, Schaltflächensymbole, Bilder und mehr. Finalisiert die hohe Fidelity Frau Miete und die Arbeit mit der Entwicklung ing, um zu decken, dass diese nicht in ein echtes Produkt. Dies erfordert die Liebe Zusammenarbeit mit den Entwicklern, kontinuierliche Diskussion T zurück und Review Abschnitte. Mehrere Überprüfungen und es Reviews werden zum endgültigen Design führen, das gut für alle Benutzer funktionieren wird. Schritt fünf. Mittagessen Nachdem der Prada ins Leben gerufen
hat, ist es mehr zu tun, es ist die Zeit für Rio Benutzeranalyse. Wir sollten uns Fragen stellen, wie. Wie reagieren die Benutzer? Wo kämpfen wir? Lösen wir ihre Probleme in punktuellen Rial? Nutzer-Feedback hilft uns, unsere Fehler zu verstehen und Ideen für Verbesserungen zu erhalten. Wir können gehen und wir finden das Design für die nächste Version des Produkts. Sie können alle Schritte für die nächste Version des Produkts als sicher befolgen. Mit einigen Reflexionen des Nutzer-Feedbacks, werden
Sie wertvolles Wissen, das Sie verwenden können, um sicherzustellen, dass zukünftige Projekte und Design falsch für reibungsloser
3. Grundwerkzeuge von Adobe XD: wenn Sie Mittagessen wird XY sein. Der Begrüßungsbildschirm bietet einen Ausgangspunkt für Ihren Wunsch, und es enthält hilfreiche Ressource ist, um Sie loszulegen. Wenn Sie bereit sind, ein neues Design zu erstellen, klicken Sie unter jede Voreinstellung für, es sei denn, die zusätzlichen Größen sind vorhanden. Sobald ich eine neue Datei erstellt habe, ist
das erste, was ich tun werde, die Datei zu speichern und sie zu lesen. Sie haben Optionen, um es auf dem Tuch oder auf Ihrem Computer zu speichern. SS Der aussagekräftige Mac an der Spitze. Sie sind drei Modi in Adobe X'd Design Prototyp in Freigabe. Verwenden Sie diese. Ich bin alt. Um die Bildschirme zu entwerfen, verwenden Sie Prototyp Moto Draht-Interaktionen, die den Fluss aus dem Töpfer simulieren, den Sie entwerfen. Verwenden Sie Ihre Abstimmung, wenn Ihr Projekt bereit ist, überprüft zu werden. Du bist eine starke Tour zu zeichnen. Objekt auf Ihrem sind arm Indem Sie auf Shift-Taste halten, können
Sie ein perfektes Quadrat durch ein Ziel zeichnen. Im Dreieck ändern
Sie den Bleistift wie die Umschalttaste. Zeichnen Sie einige kurvige Linien mit Penta Krieg. Er ist eine Technikschule. Ich markiere sie einfach und Sie können zum Property Panel hier auf der rechten
Seite gehen . Nur so lassen Sie Ihre Lieblings-Fonds, die Sie verwenden möchten, und ändern Sie die Größe des Fonds und den Spaß. Warte, wenn du willst. Verwenden Sie SS-Panel, um Farben zu verwalten, Charakterzellen und sehen Bullen, so wie ein Objekt kann die Kragen LA Kings Panel können Sie hinzufügen anwenden und Manager von Hawkings.
4. Informationsarchitektur: Informationsarchitektur. Nennen Sie die Akte und sicher, dass Strohhalm oder Kreis und färben Sie sie. Hinzufügen einer Beschriftung Cole Home und Union Cane. Änderung des Fun Stil nach Ihren Wünschen. Stock ziehen Einige Linien Kribbeln. Zwei Seiten sind
unter der
Homepage verbunden unter der . Haben Sie die erste Ebene Seite in der zweiten Ebene Seite als Beispiele für diese Klasse. Sie können mehr Seiten in Details für Ihr Projekt erstellen. Es ist es . Hier ist unsere Informationsarchitektur. Jetzt können Sie deutlich sehen, wie die Webgröße strukturiert.
5. Persona: Persona gehen durch mit diesem Zeug. Öffnen Sie die persönliche Datei, die WAAS im angegebenen Rahmen zuerst das persönliche Bild in
die R vier importiert . Wenn Sie fließend in, hier ist der Inhalt in Design-Layout zu einem Tempel, es drücken gemeinsame Verschiebung und ich zwei wichtige Das Bild. Halten Sie die Umschalttaste gedrückt, wenn Sie das Bild vergrößern, um Verzerrungen zu vermeiden. Jetzt möchte ich verschönern. Legen Sie ein wenig auf, indem Sie Farben in neuen versteiften Telefongrößen hinzufügen, um die visuelle
Hierarchie zu verbessern ,
indem Sie die Telefongröße anpassen, um das Layout ausgeglichener aussehen zu lassen und einfach gehen an Bord zu
gehen. Um dieses Reparaturfeld hier zu erhalten, können
Sie das Raster in dieser Schalttafelzeile ein- und ausschalten. Neid. Etwas mehr ein paar Meter ausrichten. Teoh Elch Diese persönliche Datei uns Ihre Basis für das zukünftige Projekt.
6. User: Sie, Sir. Flow öffnen, Haben Sie eine brandneue Datei, Vorname und speichern Sie die Datei. Ich werde einen Yusor Flow nennen. Und das tat das gleiche für die Außenbord-Knicks, und wir verwenden Zecken in Richtung zu schnell. In meinem Telefon, Sie sagten Informationen, die ich schützen, dass wir früher erstellt uns die Anleitung, um den Fluss zu legen Wir erstellen Homepage auf dieser Seite Teil dieser Seite. Jetzt gibt es queer, das Kribbeln für die Homepage, ein Textlogo für die Seite auf der Homepage. Ich möchte eine drei Schicht Action-Symbole haben goto, dass viele drücken Shift ich, um
die Symbole zu importieren . Ich werde das gleiche für sie selbst verwenden. Flow. Ich werde im Auto erschaffen. Gehen Sie hier zur College-Auswahl. Nicht nur jede Abdeckung, die Sie in der gleichen Größe Lisa Ausrichtungswerkzeug bevorzugen, um ausgewählte
Objekte auszurichten . Kakao-Aktionsseite hinzufügen. - Jetzt ist diese oben auf der Seite Logo und diese beiden Symbole bis zum unteren Alter für den Topf eine Seite. Ich möchte nur Bilder von schönen Produkten zeigen. Jeder will eine solide durch Kribbeln zu mir präsentieren die Produktbilder. Ich würde das hellere Blau für die Platzhalter-Bilder verwenden, indem Sie die Optionstaste gedrückt halten, um die Bilder für den Topf der Detailseite zu duplizieren, Ich werde ein großes Bild und eine Beschreibung für die Produkte haben wir waren. Rechtwinklig zeigt die Textbeschreibungen an. Sie können die Größe der Grafik auch ändern, indem Sie die Größe in die Linie „Bedienfeld A“ eingeben und das Layout
neu ausrichten, bis Sie damit zufrieden sind. Es basiert auf Fehlern, um die Richtung und Interaktion zur Verfügung zu stellen. Der Kreis zeigt eine Verknüpfung an. Verwenden Sie Pin, um Drama abzuhalten. Warum diese Klemmfarbe
auch die Strichgröße erfüllt . Dies schaffen einen weiteren Link von Produktbild zu Produkt, sagte
er Paige. - Ich
werde den Indikator duplizieren, damit ich nicht wieder so zeichnen muss. Call to Action auf der Homepage, um Produktdetails. Seite dies bei einer anderen kowtow Aktion zu einem Produkt, bis Seite dies. Kopieren Sie die Schaltfläche auf der Startseite, die Sie erstellen möchten. Das sieht für mich nicht konsistent aus. Nehmt mir die Details für die vielen Artikel, wenn Sie mögen, aber ich werde die Liste für diese Demo letzte Nacht überspringen. Im Verfall ist
der Taktstock mit dem Warenkorb verknüpft. Uh, das ist es trifft ein High-Level-Beispiel für die Verwendung von Flow
7. Low: Lofa Daily Draht. Friends Open Pre mate Low Fidelity Frau Freund, dass WAAS in der Klasse Wasser zur Verfügung gestellt. Dies kaut Drähte für Website bestimmte Zeit, um durch diese wiederverwendbaren Elemente zu blättern. Öffnen Sie eine neue Datei und speichern Sie sie auf dem Desktop. Und denken Sie daran, ihnen das Kunstbrett. Verwenden Sie Informationsarchitekturen, die wir als Leitfaden für das Layout Ihrer Website erstellt haben. Halten Sie die Optionstaste gedrückt, um den Außenborder zu duplizieren. Das erste, was ich auf der
Website setzen würde , ist es ein Logo. Also, dieser Stern setzt ein Logo in unsere Frau. Freunde importieren die Symbole, die in einem grenzüberschreitenden Rahmen zur Verfügung gestellt wurden. Oder Sie können ein neues von Grund auf neu erstellen, das zu Ihrer Marke passt. Wir haben Menü-Symbol Shoppingplätze auf der Suche, und wir werden diese drei Symbole auf der gesamten Website verwenden. Das machte das ganze Ding blau wie das Drahtfreund-Kit. Schalten Sie das Gitter ein. 10. Hilfe bei der Positionierung der Objekte. Es ist auch hilfreich für die Erstellung responsive Website kurz und siehe Kopien, um das
Produkt zu beschreiben . Lassen Sie uns zurück zu Frau Frank es und kopierte Elemente, die für unser Projekt, jede Homepage ist ein großes Ihr Bild. So Musik und sehen Sie die derzeit beworbenen Elemente, wenn sie zu den Websites verleihen. Ein ständiger Aufruf zum Handeln ist für diese Thomas Website wichtig. Halten Sie Platz kam, um in das Fenster zu greifen. Das ist hinzufügen Karussell, beschweren sich auf der Homepage, um den Boden zu fördern. Ich würde nur Kreise für Karussell für diese Projekte verwenden. Unsere Homepage Sport jetzt kopieren alles von zu Hause, Seite unser Board und fügen Sie es auf die Startseite mit aufwändiger Reinigung Verwendung Tinkle Toe, die
an ihm beginnen . Zuerst war
ich bei einem Durchsuchungsbefehl. Platzieren Sie Wassertests, um Sie daran zu erinnern, was im Textfeld zu tun ist. Lassen Sie uns viele Elemente
enorm hinzufügen . Die Detaillinks können zur Informationsarchitektur hinzugefügt werden. Für diese Kurzversion brauchen
wir sie jetzt nicht. Ich möchte eine Trennlinie hinzufügen, um die verschiedenen Abschnitte für eine bessere visuelle
Hierarchie zu unterscheiden . Ähm, ich werde den Einheimischen wieder auf die Speisekarte stellen. Dies wird Ash Social Media Icons finanzieren die vor Mai Frau Freund. Dies geht weiter, um eine Seite wieder zu teilen. Dies reduziert das Element, das wir bereits erstellt haben. Logo auf Nachteile und Bildplatzhalter rezitiert das Bild, um die Plata bei einem
Produktnamen darzustellen und die Schriftarten formatiert. Was wir hier tun, ist zurück zu gehen, zurück, zurück, zurück. Sobald ich mit Look and Feel und Position zufrieden bin, werde
ich verwickelt anfangen. Halten Sie das Bild im Produkt, gehen Sie durch die Eigenschaft und klicken Sie auf Gruselig. Ich mag 12 Produkte für diese Seite auf der Hasser in Richtung der Seite zeigen. Letzter Bildschirm ist die HelPage unserer Partei. Ich möchte das Bild vergrößern, um die Produkte zu präsentieren. Fügen Sie Hater Sub-Hater in der Beschreibung hinzu. Nimm den Rum. Es einige für unsere Platzhalterbeschreibung. - Kopieren Sie Symbole e von der cremate Draht Freund Zuletzt fügen Sie einen Anruf zu Action Button ein Last Loaf, Adelie Frau, Frankreich geboren.
8. Hochfeste Fidelity: Hi, Fagili Drahtfreund. Nehmen Sie einfach den Laib eine tägliche Draht Front und wieder speichern Sie es eine Säge hohe Treue weg von Ich
werde nur eine kurze jedes Auge für hoch und diese Graben mit dem gleichen für alle nach oben und lesen Name es Klicken Sie auf das Bild Platz Viertel umfassen Idiot als Importe und Ihre -Bild aus der bereitgestellten Klasse. Um das hier zu bestellen. Wählen Sie das Bild der Perlenohrringe aus dem Bild-Viertel. Nächste Fertigkeit Edo. Schicken Sie das Bild nach hinten. Nun wird dies zu einem anderen Raster in der Regel verwendet 24 Spalten für das Grab, so dass wir die
Position von den Objekten messen können . Wird das Logo durch das Rial-Logo ersetzt, das in der Klasse vier Ordnung vorgesehen ist, und ändern
Sie dann die Farbe der Elemente, um Kragen zu bringen. Dafür benutze ich, ähm, hat Farbe. 33333 als das Bring-Halsband und diese Anzeige, die in das Assets-Panel auf der linken
Seite abdeckt . Und jetzt gibt es den Knopf in dieser DUI geändert. Für alle Schaltflächen und die Karussell-Symbole. Auch die Icons für das Menü, den
Warenkorb und die Lupe. - Gehen wir zu einem zweiten Flughafen. Zuerst umbenannt
dies die Unsere Bretter, die hoch für Delhi Draht Freund, und dann dieser Schritt zurück zu den ersten sind arm und dann kopieren Sie die Al Amends. Bisher sind
die ersten unser Board und D die Loaf Adelie Elemente auf Second schlecht. Dann schritt ein neues Element auf die Kranken und Außenbordwände. Jetzt das hier. Ersetzen Sie das Logo und dann das. Wie die Elemente, die im Menüabschnitt sind. England hat versucht und versucht, Teoh und ändern Sie das Element Qala nach Ihren Wünschen in diesem Grey
College . Schauen Sie einfach zu. Und dann machte das horizontale Ich in das Rosa. Und schließlich hat
es die Rückseite der Farbe aus dem Menü geändert. Und jetzt ist es Stil zu Fuß nach Hause, perfektioniert das Aussehen und Gefühl von den vielen Artikeln. Die neuen Elemente passen Elemente an die perfekte Position in der Größe, und sobald Sie mit dem Look und Feel zufrieden sind, ist
es, dass wir auf die dritte Außenbordseite das Produktdetail Seite Sam T. Zuerst diese ersetzen lokale und Symbole und zweite dieses Spiel Testkragen zum Gehirn, öffnen Sie die Bildrand. Und so, wie Bata-Bilder und jetzt die Magie. Es wird passieren, indem Sie das Bild ziehen und ablegen, dass wir es einfach in das wiederholte
Raster auswählen , und dies tun das gleiche für den Tex und eins. Und schließlich, die letzte Seite die Produktdetailseite. Ersetzen Sie das Logo und Symbole und passen Sie es an. Dies hat das Gehirn teppich und ändern Knopfdruck Icon Farben. Jetzt heißt es die Call to Action und zwei Karren und diese perfekte positioniert für
das Symbol , das
klicken , Drogen klicken auf die zweite 1 Ich will.
9. Interaktiver Prototyp: interaktive Portal-Typ Klicken Sie auf Thea Poren, die Sie sagen möchten, wie der Startbildschirm klicken Sie auf das große Symbol in der oberen linken Ecke. Blau zeigt an, dass schlecht ist uns erfolgreich den Home-Bildschirm gesendet. Klicken Sie auf das Objekt, das Sie verlassen möchten, wählen Sie Shop jetzt, und ziehen Sie dann auf die Seite. Du verbindest gerne Teoh. Gehen wir zurück zur Startseite in Select und nicht einen Aufruf zur Aktion und Link zu der Seite. Dies macht die lokale gehen zurück auf die Homepage ist klicken Sie auf das Jahr in Button und Naked, verlinkt mit der Fatah-Seite. En macht das Menü, aber er geht zurück auf die Homepage. Jetzt gibt es Make the shop now Button Link zur Parodie Video Seite und Low gehen zurück zur Homepage. Noch ein niedriges Golding Zurück zur Homepage. Dieser Link. Hören Sie drei Bild zu Produkt. Ito Seite. Jetzt spielte er Icon in der oberen rechten Ecke und überprüfen Sie die Arbeit, indem Sie nach oben und unten scrollen. Stellen Sie sicher, dass alle Links korrekt waren. Nachdem wir die Überprüfung der Links bestanden
haben, können wir mit dem Teilen beginnen. Ich werde zum Team arbeiten für P zurück das, äh, gießt das Highlight in blauen Verbündeten Ah, die werden geteilt werden. Es gibt fünf Gebäude Presets, Design Review, Entwicklung Präsentation, yusor Tests und benutzerdefinierte. Dies wählen Sie die Entwicklung für dieses Projekt standardmäßig. Abwärts Globale Assets ist ausgewählt. ID erfordert nur ein Kennwort für dieses Projekt. Lassen Sie uns auf Create Link klicken, um das Projekt nach seinem hochgeladenen Klick auf den Total
Generated Your L auf das Bubble Icon hochzuladen . Wirklich Kommentare und Pin verwenden, um den Bereich anzuheften, lügen
Sie, um Kommentar zu führen. Hier ist eine Möglichkeit, wie Sie sehen können, wie häufig der Benutzer
das Mix-Symbol erstellt hat . Es ist in der Entwicklung Icon hier drin. Viewer-Entwickler können die Design-Spezifikationen sehen. Sie können CSS Kohle- oder Donald-Assets kopieren. Es ist sehr praktisch.
10. Ende: vielen Dank, dass Sie Ihr Projekt mit der Fähigkeit erstellt haben. XY Ich hoffe, du hast Spaß beim Lernen mit mir. Ich glaube wirklich, dass er eine leistungsfähige Anwendung ist, um Ihre Idee zu überqueren, ob Sie den
ersten Timer haben , Ein Grafikdesigner, ich hoffe, er hilft Ihnen, Ihre Ideen zum Leben zu erwecken. Und ich werde es lieben, es zu sehen. Sie können mir folgen auf noch teilen Sie Ihre kostenlose, um mir eine Nachricht auf sozialen Medien durch
Instagram oder bei mir auf verlängern und vielen Dank für das Ansehen zu senden .
Jill Chu, Product Designer
