Vom Grafikdesign zu UI/UX| Eine App für Mobilgeräte von Grund auf gestalten

1. Einführung: Hi. Mein Name ist [unhörbar]. Ich entwerfe visuelle und User Experience für digitale Produkte. Design war schon immer meine größte Leidenschaft und wurde zur Hauptrolle meines Lebens, als ich mich für Grafikdesign entschieden habe. Nach dem Abschluss bekam ich meinen ersten Job als Grafikdesignerin in einem Unternehmen, das an Gesundheitsprodukten arbeitet. Ich entwerfe Modelle, die sicherlich weit entwickelt ist, für die Arbeit mit technischen, Interaktion mit US-Designern, [unhörbar] Produkt-Maßnahmen, dann [unhörbar] die Kombination von Design und Technologie Dinge, die Sie [unhörbar] sollte es hineinschauen. Zuerst wusste ich nicht, wie es geht, ich beginne mit mir selbst als Studium, Online-Kurse zu machen, Artikel zu lesen und YouTube-Tutorials anzuschauen. Es dauerte eine Weile, um die Grundlagen des U I Unix Design-Prozesses, gemischte Mythologien zu lernen und mehr darüber zu erfahren , wie man eine Website, modale Anwendung oder ein Dashboard von Grund auf neu entwirft . Jetzt [unhörbar], dass ich als Grafikdesigner [unhörbar] arbeite. Heute in dieser Klasse werde ich Sie durch alle Schritte führen, die ich getan habe um einige kleine Grafik-Design zu U I Unix Design. Aber wir werden über die Ähnlichkeiten und Unterschiede von D-Stahlfüllungen sprechen. Nun oder zu Tools und Software müssen Sie lernen, was Sie tun sollten, um auf U I Unix-Design zu wechseln, und schließlich werden wir eine Split-Sharing-Anwendung zusammen entwerfen. [ unhörbar] Sobald Sie Ihr erstes U I Unix-Projekt für Ihr Portfolio generiert haben. Wir werden dieses Projekt in vier Schritten entwerfen. Zuerst werden wir zurücksetzen, Ich Verbündete, sondern auch über Benutzerinterviews, Online-Umfragen und kompensieren. Weiter in den zweiten Schritt, in dem alle Personas, Storyboards und Benutzerflüsse erstellen können . [ unhörbar] und Brainstorming Ideen wie Skizzieren, Erstellen von Prototypen und Erstellen von Vibrationen. Schließlich entwerfen Sie das U I mit figma. Als [unhörbar] für grafische [unhörbare] Designer? [ unhörbar] Design [unhörbar] selbst [unhörbar]. 2. Designrollen verstehen: Bevor ich in das Projekt eintauche, würde ich Ihnen gerne mehr Informationen über [unhörbar] geben. Es war einmal, Design bedeutet Grafikdesign. Aber heute gibt es mehr designbezogene Positionen wie UI, UX , visuelles Design, Attraktion Design, [unhörbar] häuft sich ständig. Ich bin dabei, Ihnen eine sehr kurze Definition für eine [unhörbare], damit Sie nicht durch die Titel verwirrt werden. Beginnen wir mit Grafikdesign. Grafikdesign hat wahrscheinlich eine der besten neuen Job-Titel in der Welt von Design und Technik. Sie arbeiten oft mehr mit Druckdesigns und Lieferbestandteilen. Grafikdesigner kennen die Grundlagen des Designs, wie Typografie, Farbtheorie, Illustration und sogar Fotografie. Der andere Begriff, den Sie häufig gehört haben, ist es Benutzeroberfläche oder UI-Design. Einfach ausgedrückt, UI ist jedes visuelle Element, das ein Benutzer mit anderen technologischen Geräten interagieren könnte, einschließlich mobiler Apps und Websites. Ein UI-Designer ist im Wesentlichen dafür verantwortlich, wie alles auf der Seite in Bezug zueinander ausgerichtet ist. Sie entscheidet über die höhere Arbeit von Elementen wie [unhörbar], Textilien, Farben usw. Das Ziel ist es, die Interaktion so einfach und effizient wie möglich zu gestalten. Auf der anderen Seite, UX, die für User Experience Design steht. Es geht in erster Linie darum, wie sich das Produkt anfühlt. UX-Designer betrachten Design aus der Denkweise eines Benutzers und lösen potenzielle Probleme. Dazu recherchieren, skizzieren, erstellen Prototypen aus weißen Rahmen und führen verschiedene Arten von Tests mit Anwendern durch, um die ursprüngliche Idee zu verbessern. Die Benutzeroberfläche konzentriert sich darauf, wie ein Produkt aussieht und funktioniert. Dazu gehört alles, von der Gestaltung des Navigationsflusses einer Website bis hin zum visuellen Design. UX konzentriert sich jedoch darauf, wie sich das Produkt anfühlt und sorgt dafür, dass alles für die Benutzer zufriedenstellend ist und sie glücklich macht. Stellen Sie sich einen menschlichen Körper vor, die Knochen sind der Code. UX ist alles, was den Körper gut funktioniert und UI ist alles außerhalb, was den Körper ansprechend und schön aussieht. Die andere Gestaltungsregel ist das visuelle Design. Visuelles Design entstand aus einer Mischung aus Grafik- und UI-Design. Es konzentriert sich auf die Visualisierung einer Website oder eines anderen digitalen Produkts. Sieht das Endprodukt gut aus? Das ist die Frage, die visuelle Designer beantworten. Außerdem haben Sie möglicherweise Produktdesigner gehört. Product Designer ist eine Summe des Begriffs, um einen Designer zu beschreiben , der in der Regel an der Erstellung des Looks, UI und Feel, UX, eines ganzen Produkts beteiligt , UI und Feel, UX, ist. Haben Sie die geschäftlichen Ziele verstanden? Welches Problem wird dieses Produkt lösen? Wer hat dieses Problem? Sie arbeiten mit größeren Verantwortungsbereichen und betreuen die Produktvision von hohem Niveau. Es gibt andere designbezogene Positionen in der Branche, aber ich wollte diejenigen hervorheben, die Sie häufig gehört haben. Im nächsten Video werden wir darüber sprechen, warum gute Grafikdesigner mit einer starken Design-Fähigkeiten leicht zu UI/UX-Design wechseln können. Was sind die Gemeinsamkeiten zwischen diesen beiden Bereichen? 3. Großartige Vorteile für Grafikdesigner Überziehen: Grafikdesign und UI/UX-Design verfügen über viele überschneidende Fähigkeiten. Die Karriereverschiebung kann natürlich für diejenigen kommen, die bereits über große Designfähigkeiten verfügen. Eine der ähnlichen Fähigkeiten ist emotionales Design. Sowohl Grafikdesigner als auch UX-Designer versuchen, eine emotionale Verbindung mit ihren Nutzern zu schaffen. Grafikdesign geht es darum, Benutzer Emotionen durch Bilder, Farben und Typografie hervorzurufen , aber UX-Designer beschränken sich auf den visuellen Teil des Designs. Wir konzentrieren uns auf: Informationsarchitektur, Interaktionsdesign und Zugänglichkeit der Gestaltung. Die andere Fähigkeit, die sie beide haben, ist die Aufmerksamkeit auf Details. Design liegt im Detail, und Grafik-Design-Fähigkeiten orientieren sich oft an einer großen Konzentration von Details wie dem Scannen von Text und der Ausrichtung von Elementen. UX-Designer sind die gleichen; sie achten genau auf Details, die ein Produkt verbessern und den Benutzern ein besseres Erlebnis bieten würden . Außerdem sind sie beide qualifiziert im kreativen Denken. Designer sind Problemlöser. Grafikdesigner und UX-Designer sind gleichermaßen kompetent im kreativen Denken und Lösen von Problemen. Um zu verstehen, warum UX-Designer kreative Denkfähigkeiten benötigen, sollten Sie zuerst über den UX-Design-Thinking-Prozess lernen. Design Thinking ist ein kontinuierlicher Prozess, der durch die folgenden Phasen fließt: Empathisieren, Definieren, Ideieren, Prototypen und Test. In jeder Phase werden Probleme gerahmt, Fragen und Ideen auftauchen, bis die besten Lösungen erscheinen. Die andere überlappende Fertigkeit ist Design Conventions. Konventionen sind die Auswahl guter Lösungen, die Benutzer mochten oder fanden leicht zu verstehen im Laufe der Jahre. Um es besser zu verstehen, betrachten wir Konventionen zur Farb- und Formverwendung. Das erste Zeichen verwendet zwei starke Konventionen, um Gefahr zu vermitteln; die Farbe Rot und die Rautenform. Obwohl das Wort Warnung auf beiden Zeichen sichtbar ist, kann das erste Bild die Nachricht ohne die Texte vermitteln. Das zweite Bild benötigt einen Text, um ihn sofort zu identifizieren. Viele Grafikdesigner sind bereits mit Konventionen im Web- oder App-Design vertraut , sodass sie sich leicht an eine UX-Design-Rolle anpassen können. Die andere ähnliche Fähigkeit ist Ästhetik. Einer der Vorteile für Grafikdesign Umzug auf UI/UX-Design ist, dass sie Dinge schön machen können. Grafikdesigner haben diese natürliche Fähigkeit, Dinge visuell [unhörbar] zu machen , indem sie Ausrichtungsprinzipien der visuellen Hierarchie verwenden. Aber visuelles Design kann die allgemeine Benutzererfahrung eines Produkts verbessern , indem Benutzer sich besser fühlen. Vergessen Sie nicht, dass Grafikdesign-Fähigkeiten ein Vorteil sind, wenn Sie an einem UX-Projekt arbeiten. Designfelder sind übertragbar, wenn Sie also eine neue Spezialität lernen möchten, müssen Sie nur üben, nichts ist unmöglich. 4. Warum sollten du in UI/UX Design wechselst?: Es ist so angenehm, in der Technik innovative digitale Produkte zu entwickeln und mit den Verbrauchern zu interagieren. Ich möchte Ihnen einige Gründe nennen, warum UI/UX der beste Job der Welt ist. UI/UX-Designer sind sehr gefragt. [ unhörbar] intelligente Geräte sind zu einem wesentlichen Bestandteil unseres Lebens geworden. Damit ständig für UI/UX Design. Der andere Grund ist, dass UI/UX-Designer mehr sind als Grafikdesigner. Ein UX-Designer verdient mehr als nur ein UI-Designer, während ein UI-Designer mehr verdient als nur ein Grafikdesigner. Laut PayScale beträgt das Durchschnittslohn für einen Grafikdesigner in Amsterdam 29.000€, während ein durchschnittlicher UX-Designer 58.000€ erhält. Der andere Grund, warum Sie zu UI/UX wechseln sollten , ist, dass Sie sich beim Entwerfen eines digitalen Produkts nie langweilig fühlen würden, da UX-Designer jeden Tag verschiedene Arten von Fragen haben. Du veränderst das Leben der Menschen. Die zentrale Rolle des Produktdesigns besteht darin, das Leben der Menschen angenehmer als je zuvor zu gestalten , damit Sie sich als Produktdesigner so zufrieden fühlen, weil Sie direkt mit den Benutzern verbunden sind und Sie die Auswirkungen Ihres Designs sehen können. Einer der wichtigsten Gründe, warum ich UI/UX liebe , ist der kollaborative Designprozess, den es hat. UX-Designer arbeiten eng mit anderen Designern, Entwicklern, Produktmanagern und sogar Stakeholdern zusammen, um sicherzustellen, dass die endgültigen Designs allen Erwartungen entsprechen. Der andere Grund für die Umstellung auf das UI/UX-Feld ist die Chance auf Produktforschung und -tests. Sie werden viel recherchieren und das scheint Ihnen wie eine Tour zu sein. Sie werden eine Menge Leute brauchen und mit ihnen sprechen und analysieren, wie [unhörbar] ihr Leben beeinflussen, wie sie sich fühlen, was sie brauchen. Dies ist ein sehr großer Vorteil gegenüber traditionellen Design-Sites, die im Laufe der Zeit hinter dem Schreibtisch sitzen und einfach ohne Interaktion mit dem Endbenutzer entwerfen. Der letzte Grund ist die Nachfrage nach multiqualifizierten UI/UX-Designern. Unternehmen bevorzugen es, einen UX/UI-Designer zu mieten , anstatt eine bestimmte Regel für UX zu entwerfen. [ unhörbar] hängt von der Größe des Unternehmens oder Budget, aber zum Glück für Grafikdesigner wandte UX-Designer, dass Sie in der Lage, sich von anderen Kandidaten abheben , weil Sie bereits wissen, visuelle und Kommunikationsdesign, und Sie sind ein multifunktionaler Designer. Was ist die Roadmap für Grafikdesigner, die UI/UX-Designer werden? Im nächsten Video werden wir über Möglichkeiten sprechen, wie Sie diese Fähigkeiten üben können. 5. Roadmap für Grafikdesigner in UI/UX Designern: Grafikdesign spricht bereits die Sprache des Designs. Sie müssen nur Ihre Fähigkeiten auffrischen, um diejenigen einzubeziehen, die einzigartig für UI/UX-Design sind. In diesem Video werden wir darüber sprechen, wie Sie diese Fähigkeiten schärfen können. Die erste ist Bildung. Wir können Ihre lokalen Top-Universitäten suchen, die spezialisierte Kurse wie Mensch-Computer-Interaktion, User-Experience Design oder Interaction Design anbieten. Die andere Möglichkeit, neue Fähigkeiten zu erwerben, die ich selbst immer wähle, ist das Lernen mit großartigen Bildungsprogrammen, Online-Plattformen wie Skillshare, Coursera, Udemy und LinkUp. Es gibt viele andere Online-Plattformen. Ich habe gerade die berühmtesten aufgeführt. Sie können auch in YouTube suchen. YouTube hat viele Tutorials von Designern erhalten, die Produktdesign, Design-Software lehren oder einfach nur ihre Erfahrungen zum Ausdruck bringen. Nummer zwei liest UI/UX-Artikel. Ein guter Ort, um UI/UX-Artikel zu finden, ist Medium. Es gibt einige gute Publikationen, die Sie abonnieren können wie Muzli, Prototypr.io, UX Design, CC, UX Planet. -Org. Andere Websites, um mehr über UX zu erfahren, sind IDEO, UX Magazine und Smashing Magazine UX Abschnitt. Nummer drei lernt Prototyping. Interaktiver Prototyp ermöglicht es, das Produkt wirklich zu erleben. Daher ist es für jeden UI/UX-Designer unerlässlich, ein Prototyping-Tool zu erlernen. Es gibt einige Prototyping-Tools wie InVision, Marvel App, Axure, Framer oder Flinto. Nummer vier ist immer auf dem Laufenden mit UI-Trends. Ehemalige Designer und Behance, mit UI-Design-Trends unterrichtet zu werden. Auf Behance gibt es viele kreative Profis, die Ihre neuesten Arbeiten auf der Plattform präsentieren. Dribbble ist eine Social-Design-Portfolio-Plattform, die Behance ähnlich ist, aber vor allem zeigt Werke in Illustration und User Interface Design. Um Ihre Werke auf der Plattform veröffentlichen zu können, müssen Nutzer eine Einladung von anderen Mitbenutzern erhalten. Führen Sie eine Suche nach Einladungen durch, und wechseln Sie zu den letzten Beiträgen von Benutzern. Diese Benutzer veranstalten in der Regel einen Mini-Wettbewerb, um ihre Werke zu überprüfen, bevor sie eine Einladung weiterleiten. Alternativ können Sie sich UPLabs und Awwwards ansehen. Nummer fünf ist es, UI/UX zu üben. Es gibt einige Möglichkeiten, wie Sie UI/UX-Design üben können. Wenn Sie keine tatsächlichen Projekte haben, in denen Sie anwenden können, UI/UX-Wissen, können Sie an der täglichen UI-Herausforderung teilnehmen und Ihre Lieblings-in Ihr Portfolio setzen. Sie können viele Fälle zu Studien über Design einer App oder Website bei Medium finden. Nicht zuletzt können Sie durch die Bewerbung für Praktika mehr praktische Fähigkeiten erwerben. Sie haben die Möglichkeit, von anderen Designern im Design-Team zu lernen, sowie die Möglichkeit, ein Portfolio aus einem tatsächlichen Projekt aufzubauen. Vergessen Sie auch nicht, sich an die Gewohnheit zu gewöhnen, um Feedback zu bitten. Auch hier sind Dribbble oder Behance großartige Orte, um Ihr Design zu präsentieren. Nummer sechs konzentriert sich auf den Aufbau eines UI/UX-Portfolios. In der Designbranche fragt der Arbeitgeber immer nach einem Designportfolio, wann immer Sie sich für eine Designposition bewerben möchten . Einer der besten Orte, um Hunderte von Designportfolios zu finden, ist Bestfolios.com. Sie können die Portfolios des Designers, ihre Projekte, Fallstudien oder ihre Lebensläufe anzeigen. Für Ihr Portfolio können Sie Ihre Grafik-Design-Werke wie visuelle Designs, Markenidentitäten, Infografiken, Logos verwenden. Sie sind alle zu Ihrem Vorteil. Menschen sind visuelle Kreaturen und sie genießen es, ein wunderschön gestaltetes Design zu sehen. Aber für Ihr UI/UX-Portfolio sollten Sie Fallstudien schreiben. Fallstudien sind Prozess oder Aufzeichnung Ihrer Forschungen und Entscheidungen für die Gestaltung eines digitalen Produkts. Erwähnen Sie das Problem, Ihre Lösungen, Ihre Gedanken und alles, was Sie bei der Gestaltung Ihres Projekts erlebt haben. Auch für den Aufbau Ihres Portfolios müssen Sie nicht unbedingt eine Website von Grund auf neu erstellen. Es gibt einige Website-Builder, die Portfolio-Vorlagen für einen festen Preis pro Monat anbieten , wie Squarespace, Wix oder Webflow. Nummer sieben nimmt an Workshops und Veranstaltungen teil. Vernetzung ist unerlässlich. Manchmal werden die besten Möglichkeiten gefunden, wenn jemand im Feld Sie für eine Position empfiehlt. Für die Vernetzung sollten Sie lokale UI/UX-Communities finden. Sie können einige auf hackerthon.com oder einfach Google für Design-Jobs oder UX-Wettbewerbe in Ihrer Nähe finden. Besuchen Sie meetup.com auch, um Workshops, Konferenzen und UX-Veranstaltungen in Ihrer Nähe zu finden . Wenn Sie vom Grafikdesign zum UI/UX-Design wechseln möchten, wird es nicht so schwierig sein, wie Sie vielleicht denken. Zwar gibt es eine Lücke zwischen Grafikdesign-Maßstäben und UI/UX-Designskalen, es ist keine unschlagbare. Sie müssen nur diejenigen üben und einschließen, die einzigartig für das UI/UX-Design sind. 6. Recherche, Interviews, Umfragen und Konkurrenzanalyse: Dieser Teil ist der beste Teil unserer Klasse. Kurz bevor ich in das Projekt eintauche, würde ich Sie gerne fragen, machen Sie das Projekt Schritt für Schritt mit mir und laden Sie jedes Stück Projekt, Aufgaben am Ende jedes Schrittes hoch. Vergessen Sie auch nicht, Ihre Fragen zu stellen, lassen Sie keine Fragen unbeantwortet. Beginnen wir, mit allem Design ist Split Sharing Mobile Application. Ich habe dieses Thema für das Projekt dieser Klasse gewählt , weil ich dachte, dass Sie bereits mit Szenarien vertraut sind , in denen eine Split-Sharing-Anwendung verwendet wird. Ich denke, Sie verstehen das meistens, wenn Sie mit Freunden zum Essen gehen und nach dem Abendessen [unhörbar]. Die meiste Zeit eine Pause, werden wir voran gehen und seine Kreditkarte Fuß die Rechnung für jeden, nicht nur dumm, aber wenn es eine große Gruppe von Freunden, das ist, wo der Schmerz beginnt. Wenn Sie entwerfen möchten, eine mobile Anwendung, Website oder jede Art von digitalen Produkten. Der Prozess, den Sie durchlaufen, hängt von der Größe des Unternehmens, dem Budget oder dem Zeitrahmen des Projekts ab. Der Entwurfsprozess beginnt jedoch normalerweise mit Forschung und Analyse. Definieren wir zuerst das Ziel. Haben Sie eine klare Denkweise darüber, was wir entwerfen werden. Das Ziel dieser App ist es, Probleme zu lösen, mit Rechnung Aufteilung zwischen Freunden für ein Abendessen. In einem echten Projekt, wenn Sie [unhörbar] erhalten Sie mehr Informationen durch die Durchführung ist Stakeholder-Interview. Stakeholder-Interview hilft Ihnen, sich über Business Schools, technische Einschränkungen bei Stakeholdern aktuelle Leads über Benutzerbedürfnisse zu informieren. Das Hauptziel dieses Interviews ist es, Informationen darüber zu erhalten, was sind die Geschäftsziele? Gibt es bereits vorhandene Forschungs- oder Designmaterialien? Was ist bereits über die Nutzer bekannt? Irgendwelche Rückmeldungen? Zum Beispiel, genug Feedback, Kunden-Support-Anrufe, Nachrichten , Bewertungen, das Wichtigste ist, dass es keine richtigen Einheiten der Forschung ersetzt. Andere Fragen könnten sein, wer sind bekannte Konkurrenten? Wie sieht der Markt aus? Gibt es technologische Einschränkungen? Andere Projektspezifikationen wie Fristen, Teammitglieder. Während eines Stakeholder-Interviews ist es so einfach, dass Sie es in drei Schritten tun können. Zuerst sollten Sie Ihre Fragen vorbereiten, damit Sie sich nicht gegenseitig Zeit verschwenden, dann denken Sie über das Interview nach. Wenn es sich um ein kleines Projekt handelt, können Sie es in einem Interview geben, aber wenn es sich um ein komplexeres und größeres Projekt handelt, sollten Sie es in mehreren Interviews mit mehreren Personen wie Produktmanagern, Produkteigentümern , Technischer Manager, Leitung Designer. Im ersten Schritt sollten Sie die Dokumente alle Ihre Notizen und ihre Antworten aufzeichnen. Der zweite Schritt hilft Ihnen, mehr Informationen über das Projekt zu erhalten und Missverständnisse zu vermeiden. Bemalt, Benutzerreise, stellte sich vor, wir haben fünf Freunde, die ein Restaurant betreten, sie sitzen und dann warten sie auf das Menü. Nach dem Durchsuchen des Menüs zu Szenarien kann passieren. Ist der Kellner bereit, die Bestellung zu bekommen? Wenn nein, sollten sie mehr warten und das ist die Frustration. Ich markiere Frustrationen mit roter Farbe. Wenn ja, werden sie bestellen und Essen bekommen. Nach dem Essen. Wenn sie fertig sind, werden sie um die Rechnung bitten. Sie bekommen die Rechnung und plaudern darüber, wie man die Rechnung bezahlt. Zwei Fälle sind möglich. Sie sollten es gleichmäßig oder pro Lohn pro Artikel aufteilen. Wenn sie es gleichmäßig aufteilen, ist es viel einfacher, da ein Gesamtbetrag durch fünf Personen geteilt wird. Aber in den meisten Fällen sind Gerichte anders für eine ist teurer, während ein anderer kann ein günstigeres Essen bestellt haben, so sollten sie jeden Anteil berechnen. Freunde nehmen ihre Kreditkarten heraus, zwei Szenarien sind möglich. Wenn Sie Lohnabrechnung auf Zahlungsmethode gefunden, was zu einer längeren Gewichtung für den Kellner führt, um die Zahlung zu verarbeiten. Ein Lohn [unhörbar] zahlt die ganze Rechnung, dann sollte der Rest berechnen, wie viel jeder zu zahlen hat und wie zu zahlen? Welches sind die Rechnungen Frustration für unseren Zielbenutzer? Dann zahlen sie ihn oder sie alle zurück. Am Ende verlassen sie den Tipp und verlassen dann das Restaurant. Lassen Sie uns hypothetische Probleme nach Benutzerfrustrationen auflisten, um dies zu bestimmen. Hier werden wir uns nur auf Probleme konzentrieren, die sie mit dem Teilen der Rechnung und Zahlungsprozess erlebt haben . Die hypothetischen Probleme sind darüber nachzudenken, wie man die Rechnung aufteilt, um Splitter zahlt für alle zu zahlen. Wie viel jeder zahlen sollte, wenn sie unterschiedliche Bestellungen hatten und darauf warten, dass ein Kellner die Zahlung verarbeitet, dann machen wir Hypothese darüber, wer dieses Problem hat. Jugendliche mit einem Alter von 18 bis 35 Jahren, also ist das eine gute erste Hypothese, weil sie Technologie täglich einsetzen und bereits mit Zahlungen über eine App vertraut sind. Für eine validierende Hypothese sollten Sie mit Menschen sprechen. Zum Beispiel führen Sie fünf Gäste aus, es ist entscheidende Beobachtung oder Ihre Kunden verstehen, wie ihre Bedürfnisse, Haus oder Leben sind und wie Ihr Produkt in ihr Leben passen würde. Für ein erstes Benutzerinterview. Sie müssen nicht unbedingt Leute ins Büro einladen. Sie können es im Café machen, während Sie darauf warten, dass Ihre Freunde ankommen, oder sogar per Fernzugriff über Skype oder Google Hangout. Stellen Sie immer Ihre Hypothesentests im Kontext vor, zum Beispiel, wenn Sie mit Ihren Freunden für eine Mahlzeit oder Online-Umfragen unterwegs sind. Online-Umfragen, wenn sie sorgfältig konsultiert werden, kann es immer noch sehr nützlich sein. Vor allem, wenn Sie sie als und zusätzliche und ergänzende Vorträge verwenden. Denken Sie daran, je kürzer Ihre Umfrage ist, desto besser. Es gibt großartige Tools für die Durchführung einer Online-Umfrage, wie Survey Monkey, Google Forms und Wufoo, wenn ich es richtig ausspreche, bieten sie Ihnen klare Daten in Form von Zusammenfassung für jede Antwort. Basierend auf den Ergebnissen der Verwendung von Tenures und Umfragen können Sie jede scharfe Hypothese überprüfen. Sag, das ist nicht das, was passiert ist. Die meisten Leute im Inneren, Sie erwähnten, dass in der Regel 1 Prozent die Rechnung bezahlt und für andere berechnet , und sie haben keine Probleme, auf einen Kellner zu warten, um die Zahlung zu bearbeiten. Aber sie fügten auch hinzu, dass die manuelle Berechnung von Artikeln frustrierend ist und es schwierig ist, sogar Gruppenausgaben aufzuteilen, sagen wir über Kundenhypothese. Wir haben verstanden, dass die meisten Interviews College-Studenten sind, die alleine leben, also kümmern sie sich um ihre Ausgaben. Dann sollten Sie neue Hypothese testen und bei Bedarf verfeinern. Wir durchlaufen den Kundenentwicklungszyklus, um unseren potenziellen Kunden näher zu kommen. Wir machen Hypothesen, wir testen sie, und nach unseren Erkenntnissen verfeinern wir sie. Dann, wenn Sie ein besseres Verständnis der Benutzer gegen den Markt haben , um zu sehen, was Wettbewerber Anwendungen tun. Was bieten sie den Kunden an? Diese Forschung wird als Konkurrentenanalyse bezeichnet. Wettbewerbsanalyse geht es darum, herauszufinden, was Konkurrenten im Moment tun. Nur im Hinterkopf, keine Fehler von Ihren Konkurrenten zu kopieren. Zur Vermeidung von Konkurrenten Fehlern. Sie können Benutzertests der Wettbewerber Anwendung oder Website durchführen. Das Ziel ist es, ihre Fehler zu identifizieren, die es nicht in Ihrem Design verwenden und nach einer besseren Lösung suchen. einen User-Test durchzuführen, müssen Sie einfach Ihre Campusbewerbung einem Freund geben. Geben Sie ihnen eine Aufgabe und notieren Sie alle Schwierigkeiten, die sie haben. Zum Beispiel, für eine Split-Sharing-Anwendung, werde ich meinem Freund sagen, eine neue Erfahrung mit ihren Freunden zu erstellen, und ich werde notieren , wenn ich sehe, ob sie verwirrt wird , das sind die neuesten Probleme, die Sie nicht in Ihre Design. Konkurrenten zu finden, können Sie einfach Google Splitwise. Wie Sie sehen, gibt es eine Liste von Sachen, Split-Sharing-Apps, die uns helfen, unsere Konkurrenten zu finden. Eines der guten Werkzeuge ist SimilarWeb. Es ermöglicht Ihnen, alles im Detail zu überprüfen, sogar Keywords, die der Wettbewerber verwendet hat. Das andere Tool, das ich mag, um relative Produkte zu finden, ist Alternativeto.NET. Wenn Sie im Suchfeld suchen, zeigt AlternativeTo Ihnen Informationen über die App, wie Website, es erhöht Funktionen, Tags und auch Screenshots. Ein weiteres Werkzeug, um Wettbewerber zu finden, ist Product Hunt. Genau wie AlternativeTo können Sie die Produktinformationen sowie relevante Produkte sehen . Hier lesen Sie die Kritiken der Leute. Das ist so gut. Es lässt Sie wissen, wie die Leute über die Splitwise denken. Für Ihre Hypothesenanalyse sollten Sie Ihre komponierten Informationen schreiben, wie Website-Adresse, Screenshots die Stärke wie ein schönes Feature, eine schöne Benutzeroberfläche oder eine Schwäche wie [unhörbare] Studenten. Für diese Klasse werden wir eine Splitwise überprüfen. Zuerst werden wir eine kurze Zusammenfassung für das Produkt schreiben. Sie erhalten alles, was Sie über das Produkt wissen, wie Website-Adresse, Produktrate in Google Play, [unhörbar] Store und so weiter. Wer ist der Zielkunde? In Splitwise ist Zielkunde Mitbewohner und Freunde, die Ausgaben teilen. Über das Produkt, den Service oder die Preise ist ein Splitwise kostenlos, aber es bietet einige Funktionen exklusiv für Benutzer , die für $2,99 pro Monat abonniert haben. Sie müssen wissen, was Ihr Mitbewerber seinen Kunden bietet , weil Sie davon profitieren können. Stärken hier sind großartige Funktionen wie automatische Berechnung, gleichmäßige und ungleichmäßige Aufteilung, Zahlungen über die App, Zahlungsanforderung, Zuweisung von Artikeln an Freunde, Anzeigen der Zahlungsverlauf und Schwächen von Merkmalen oder Optionen. Splitwise bietet keine implizierenden Elemente automatisch an, scannt nicht in der kostenlosen Version und ist nicht in Echtzeit. Ich speichere auch die Screenshots und habe versucht, die App zu überprüfen und die Notizen aufzuschreiben. Außerdem arbeite ich mit der App und zeichne meinen Bildschirm auf. Ich sehe die Funktionalität, Features, Animationen und wenn der Konkurrent Änderungen vornimmt und neue Versionen veröffentlicht, kann ich auf meine Aufnahmen und Schleudern zurückkommen. Laden Sie für Ihre Aufgaben eine One-Split-Share-Anwendung herunter und installieren Sie sie oder verwenden beliebige Split-Sharing-App, die Sie bereits in Ihrem Telefon haben. Wie das Beispiel hier. Schreib dir eine Sache auf, die du magst, und eine Sache, die du siehst, könnte besser sein. Es wäre großartig, wenn Sie die Screenshots für das hochladen, was Sie mögen und was Sie nicht mögen, damit Ihre Klassenkameraden Ihren Standpunkt besser verstehen können. So schön, Ihre Bewertungen zu sehen und zu lesen. 7. Analysen und Personas, Storyboards und User: Nachdem Sie als echte Benutzer gesprochen haben, basierend auf den Informationen, die Sie erhalten, können Sie Personas erstellen. Personas sind fiktive Charaktere, die erstellt wurden, um verschiedene Benutzertypen darzustellen, die Ihr Produkt auf eine sehr ähnliche Weise verwenden werden. Die beste Methode besteht darin, 3-5 verschiedene Personas zu definieren und sie so zu beschreiben, als wären sie echte Menschen. Beginnen Sie mit einem Namen, einem Job, Leben und Stil oder ihren Hobbys, und vielleicht sogar einem Code, den der Benutzer sagen könnte. Wir werden dies verwenden, um ein aktuelles Profil für jede Person zu erstellen. Zum Beispiel, hier drin haben wir Dan. Dan ist 25 Jahre alt. Er ist ein Marketing-Praktikant. Er ist so präzise. Er kümmert sich darum, nicht von seinen Freunden Unachtsamkeit vermasselt zu werden, wenn es um die Rechnung geht. Er zahlt meist für seine Freunde, dokumentiert die Quittung, in der Regel durch ein Bild, dann geht nach Hause und Nachrichten jeder einzelne der Partei getrennt, um zu identifizieren, was sie vor der Mathematik bekam, ist ein Taschenrechner. Er wird selten vergessen, aufzuladen. Normalerweise schickt er eine nette Erinnerung für vergessliche Freunde. Wir haben auch Sarah. Sie ist 28 Jahre alt. Sie ist Grafikdesignerin und kümmert sich nicht um ein paar Cent Unterschied, sehr um den genauen Dan. Normalerweise hinterlässt sie ein paar Eros zu Texten und Trinkgeld, und je nach Laune wird sie entweder geizig oder großzügiger sein mit der Menge, die sie hinzufügen. Nach dem Abendessen, sie wird sofort gehen zahlen ihre Rechnung Splitter Freund, um zu vermeiden, später zu vergessen. Eine andere Person ist Robin. Robin ist 22 Jahre alt und er ist Student. Robin ist viel weniger vorsichtig, als es um die Bezahlung geht, und oft wird von verschiedenen Parteien gejagt, um seine Rechnungen zu bezahlen. Normalerweise hat er einen sehr schrecklichen Mobilfunkdienst und wird davon absehen, sein Telefon aufzunehmen, um seine Gebühren sofort zu bezahlen. Das wird wahrscheinlich drei Arten von Personas in einer Gruppe von Freunden zu finden. Mit Personas können Sie Storyboards erstellen. Storyboards sind großartige Werkzeuge, um zu beschreiben und zu veranschaulichen, wie ein Benutzer für das Produkt anzieht. Sie zeigen jede Traktion, die erforderlich ist, um ein Ziel zu erreichen, wie ein Comic. Dan, Sarah, Robin und Mia betreten das Restaurant. Sie sitzen und bestellen Essen. Sie beenden ihr Essen und Dan bittet den Kellner, die Rechnung mitzubringen. Freunde fangen an, darüber zu reden, wer für das Essen bezahlt. Dan nimmt sein Handy raus und schlägt vor, dass er für alle bezahlt. Sie können ihn zurückzahlen. Kellner bringt die Rechnung, Dan bezahlt das Geld. Dann erstellen Sie eine Gruppe mit seinen Freunden. Nimmt ein Bild von Rechnung über Happy Split. Happy Split scannen Sie das Foto und zeigt Listen der Ausgaben an Dan. Dan weist jedes Essen auf Bestellung zu und zapft auf Ladung. Sarah, Robin Mia, erhält eine Benachrichtigung auf ihrem Handy. Sie klopfen auf die Rückzahlung. Freunde verlassen das Restaurant. Jetzt basierend auf Storyboards, können wir Benutzer Flow erstellen. Wir können Benutzer Flows Layer verwenden, um die Reise zu überprüfen, und wir können Referenz auf jedem Schritt erstellen. Benutzerfluss ist der Pfad, den ein Benutzer auf einer Website oder App verwendet, um eine Aufgabe abzuschließen. Es gibt tolle großartige Tools, die Sie verwenden können, um einen Benutzerfluss zu erstellen. Der, den ich genossen habe, mit mehreren Projekten zu arbeiten, ist flowmap.com. Es ist so einfach, damit zu arbeiten. Das andere Tool ist macflow.com. diesen können Sie auch Drahtframes und Sitemaps erstellen. Für dieses Projekt würde ich gerne Flow-Maps verwenden, also lasst uns anfangen. Dan öffnet die App. Er möchte eine Rechnung erstellen und dann eine Gruppe erstellen. So fügt er seine Freunde in die Gruppe und dann kann er entweder die Rechnung scannen oder Elemente manuell eingeben. Wenn Rechnung hinzugefügt wird, sollte er jedem Freund Gegenstände zuweisen. Nachdem er Tipp- und Tipptaste auf Ladungstaste hinzufügt, sieht er eine Erfolgsseite, die ihm sagt, dass seine Freunde die Rechnung erhalten haben. Erstellen Sie für Ihre Aufgabe eine Persona für einen College-Student. Wie die Probe, notieren Sie seine Bedürfnisse, seine Ziele und seine Einstellung. Ich freue mich darauf, Ihre Person zu sehen und sie mit Ihnen zu besprechen. 8. Erkunden: Nun, da Sie alles bereit von Ihrem [unhörbaren], nehmen Sie Ihren Bleistift und Notizbuch und haben Sie Spaß. Für diese Klasse werden wir auf dem Home-Bildschirm arbeiten und einen neuen Aufwand oder Build-Prozess hinzufügen. Lasst uns anfangen. Jetzt, da wir Konkurrenten Apps gesehen haben und wir wissen, wonach wir in diesem Stadium suchen. Auf dem ersten Startbildschirm möchte ich dem Benutzer eine Zusammenfassung anzeigen, wie ein Gesamtguthaben, die Menge an Geld, die sie schuldet, und auf der anderen Seite, die Menge an Geld, die sie schuldet. Sie sieht die Liste ihrer Freunde und die Menge an Geld, die sie ihr geben sollten, oder sie sollte zurückzahlen. In der Registerkarte alles, was sie sehen, ist Freunde, Gruppen, Hinzufügen Schaltfläche für das Hinzufügen einer neuen Rechnung, Benachrichtigungen und Einstellungen. Außerdem füge ich solche Bücher hinzu, um Freunde zu finden und eine Schaltfläche zum Hinzufügen neuer Freunde. Wenn sie auf die Schaltfläche „Hinzufügen“ klickt, geht sie auf eine Seite, auf der sie andere Empfänger der Rechnung auswählen muss. Wieder haben wir ein Suchfeld, die Untergruppen, Liste der Freunde und schließlich Liste der Kontakte. Wenn mein Freund ausgewählt wird, die nächste Schaltfläche angezeigt. Wenn sie mehr als einen Freund wählt, wird die nächste Schaltfläche konvertiert, um eine Gruppe zu erstellen. So kann sie leichter unterscheiden, was passiert. Wenn Empfänger hinzugefügt werden, muss sie die Rechnung scannen. Ich füge Fleisch-Symbol hinzu, wenn sie die App in Dunkelheit verwendet, genau wie die Kamera, kann sie Elemente auch manuell eingeben. Wenn diese Rechnung gescannt ist, wird alles gleichmäßig unter Freunden aufgeteilt, aber sie kann eine geteilte ungleichmäßige Option wählen. Plötzlich muss sie jedes Element einem Freund zuweisen oder der ganzen Gruppe einen Gegenstand zuweisen. Tippen Sie dann auf die unbestätigte Schaltfläche. Der geringere Schritt ist die Wahl der Höhe der Steuer. Ich gebe einige Optionen wie kein Tipp, fünf Prozent, 10 Prozent, und gebe auch einen benutzerdefinierten Tipp ein. Alle Ausgaben werden mit den Empfängernamen aufgelistet. Und dann, wenn sie auf Ladungstaste tippt, sieht sie die Erfolgsseite, die besagt, dass Freunde die Rechnung erhalten. Das war's. Papierprototyping, wie Sie vielleicht vermutet haben, ist ein Skizzieren Screenshots von Papier, um es wie ein digitales Produkt zu präsentieren. Papierprototyping hat unterschiedliche Komplexitätsgrade. Die grundlegendsten sind Skizzen jedes Bildschirms auf einem Papier, und alle Usability-Tests, die Skizzen werden nach Benutzeraktionen gewechselt. Sie können jedoch weiter gehen und fortschrittlichere Prototypen mit dem Wesentlichen produzieren. Es hilft Ihnen, Schaltflächen und Symbole schnell und präzise vorab zu erstellen. In der fortgeschrittensten Phase können Sie Fotos Ihrer Papierskizzen in digitale Prototyping-Software hochladen und tatsächliche Interaktionen mit einem Tool wie Pop-Prototyping auf Papier hinzufügen. nach dem Testen Ihrer Papierprototypen Wenn Sienach dem Testen Ihrer PapierprototypenProbleme gefunden haben, können Sie den Prozess erneut iterieren, wenn Benutzer Probleme haben, während sie mit Ihrem Prototyp arbeiten den Prozess erneut iterieren Dies wird Ihre Skizze wieder [unhörbar]. Wenn alles gut gelaufen ist und es kein Problem gab, können Sie Ihre Idee strukturieren und weitere Details hinzufügen, um Drahtmodelle zu erstellen. einem Drahtmodell handelt es sich um eine vereinfachte Kontur Ihres Produkts mit geringer Wiedergabetreue . Drahtmodelle sind das rückwärtige Design. Warum du nicht zu viele Details eingehen kannst. Sie müssen eine Volumenkörperdarstellung des endgültigen Versuchsplans erstellen. Sie sind auf Ihrem Weg für das gesamte Projekt und für die Menschen, mit denen Sie arbeiten, wie Projektmanager, andere Designer, Texter und das gesamte Team, so dass sie ein gut erstelltes, gut strukturiertes Drahtmodell benötigen. Diese Werkzeuge zum Erstellen von Drahtmodellen sind [unhörbar], die Sie bereits kennen, nur im Hinterkopf, die UI-Elemente für Wireframes und High-Fidelity-Prototypen zur Verfügung stellen. Das andere ist Wireframe CC, es ist ein minimales Werkzeug. Es macht das Erstellen von Drahtmodellen nicht kompliziert. Die, die ich heute liebe, um unsere Wireframes zu erstellen, ist [unhörbar]. Genau wie Just-in-Mind verfügt Moqups über gebrauchsfertige Schablonen für alle gängigen Anwendungsfälle. Außerdem können wir Ihre Drahtmodelle einfach in einer Skizze, [unhörbar] oder sogar Photoshop erstellen . Ich erstelle Wireframes oberhalb des Benutzerflusses damit ich nichts zurücklasse. Also lasst uns einfach anfangen. Dies ist die Leinwand, die Sie in Moqups haben, um die Größe Ihres Kunstboards zu ändern. Wechseln Sie zu Arbeitsbereich und wählen Sie Seiteneinstellungen aus. Dies ist die Größe eines iPhone 8. Außerdem finden Sie iOS- und Materialdesignkomponenten. Diese Bibliotheken erleichtern das Erstellen von Drahtmodellen erheblich. Ich beginne mit dem Einbringen und benutze die Satzungsleiste. Im Kommentarbereich finden Sie alle gängigen Objekte, die Sie zum Erstellen Ihres Drahtmodells benötigen, z. B. ein Rechteck, eine Schaltfläche, gefüllten Text usw. Für alle unsere Skizzen vergessen Sie nichts in Ihren Wireframes. Manchmal müssen Sie möglicherweise ein Teil in Ihrem Design enthalten, aber normalerweise ist es besser, keine Farbe in Ihren Drahtmodellen zu verwenden. Wireframes sind Destruktor für Design und sie sollten keine Art von visueller Spezifikation präsentieren. Vor allem, wenn Sie sie in Ihren Besprechungen mit dem Rest des Teams wie Entwicklern oder Produktmanagern präsentieren möchten. Es ist besser, Ihre Aufmerksamkeit nicht auf irgendeine Farbe abzulenken. Machen Sie es nicht falsch aus Wireframes. Die Skizzen, Papierprototypen und Drahtmodelle sind kostengünstige Werkzeuge, um das Produkt zu entwerfen und zu testen. Verbringen Sie nicht viel Zeit mit etwas, das viele Iterationen benötigt. Wireframes sollen nicht schön sein. Von dort übertragen wir Wireframes in Low-Fidelity-Prototypen. Wir wollen so schnell wie möglich neue Traktionen testen. Wir verwenden InVision für die Herstellung eines Prototyps. Einen Prototyp in InVision zu erstellen, ist so einfach. Wir müssen nur Ihre Wireframes oder Bilder hochladen, oder wenn Sie in einer Sketch oder Photoshop entworfen haben, können Sie das Craft-Plug-in herunterladen, um Ihre Designs einfach an InVision zu senden. einen Prototyp zu erstellen, müssen Sie Hotspots erstellen. Die Bereiche, die mit einer anderen Seite verknüpft werden, wie eine Schaltfläche, dann wählen Sie das Einfügeziel. Sie können auch einen Link zu Ihrem Prototyp mit Ihrem Team teilen, damit diese Feedback abgeben können. Denken Sie daran, dass Sie das Design in jeder Phase testen sollten. Zuerst mit Hypothese, dann mit der Skizze, der dritten Stufe mit Drahtmodellen und dann mit dem endgültigen Entwurf. Dies jedes Mal, wenn Sie Ihre Verfeinerung testen und Ihr Design verbessern und den Prozess erneut iterieren. Zeichnen Sie für Ihre Aufgabe Ihre Ideen für die gesamte Bildschirmfreigabe-Anwendung und verdecken Sie Ihre Skizze dann in einem Drahtmodell. Wie das Beispiel sehen wir Sie einen Home-Bildschirm mit folgenden Funktionen skizzieren : Liste der Freunde, Liste der Gruppen, Ausgaben hinzufügen Schaltfläche für das Hinzufügen einer neuen teuren Rechnung, Benachrichtigungen und Einstellung. Entscheiden Sie, wie Sie alle diese Funktionen in einen einzigen Bildschirm einfügen möchten , und wählen Sie dann, wenn Sie mit dem Skizzieren fertig sind, ein Werkzeug für die Umwandlung Ihrer Skizze in ein detaillierteres Drahtmodell. Es könnte [unhörbar] oder einfach Photoshop sein. Laden Sie Ihre Arbeit hoch und erhalten Sie Feedback von Ihren Klassenkameraden. 9. Erstelle Create, Icons, Schriftarten und Farben: Es ist Zeit, mehr Details hinzuzufügen und eine Benutzeroberfläche, die Benutzeroberfläche, ein [unhörbares] Frames zu entwerfen . Entwerfen der Benutzeroberfläche, die Benutzeroberfläche ist die einfachste Arbeit für Grafikdesigner, weil Sie bereits mit den visuellen Designs vertraut sind. Aber für eine mehr Design-Anwendung, die erste Frage, die Sie vielleicht stellen, ist, wie sollte ich die Unterschiede zwischen Android und iOS kennen? Woher soll ich die Richtlinien kennen? Was ist mit den Größen? Beginnen wir einfach mit Android- und iOS-Unterschieden. Erstens haben sie unterschiedliche Richtlinien. Google verwendet Material Design, iOS verwendet menschliches Interface-Design. Ich habe ihre Links in den Ressourcen des Projekts erwähnt. Google hat eine Designsprache namens Material Design erstellt. Wenn Sie für Android entwerfen, ist dies etwas, das Sie auf jeden Fall überprüfen müssen. Es gibt so viele großartige Werkzeuge zu überprüfen, UI-Muster, Icons, Farben und Testdesigns. Zum Beispiel hilft das Farbwerkzeug Designern bei der Auswahl von Farbparteien. Für iOS gibt es die Human Interface Design Richtlinien von Apple. Dies ist eine erschöpfende Liste von Designmustern für iOS-Apps. Apple, bietet sogar einige Beispiele Photoshop oder Sketch Ressourcen auf dieser Website. Das Zurück- und Vorwärtsbewegen zwischen Bildschirmen ist eine häufige Aktion, die Benutzer in Apps ausführen. Auf Android gibt es unten ein universelles [unhörbares]. Die Zurück-Taste ist eine einfache Möglichkeit, zurück zu einem vorherigen Bildschirm zu gehen und es funktioniert in allen Apps. Der Ansatz auf iOS ist ein wenig anders. Offensichtlich gibt es hier keinen universellen Back-Button und dies verändert das Design ein wenig. Jeder andere Bildschirm muss eine Schaltfläche in der oberen linken Ecke haben. Nur um besser zu verstehen, lassen Sie uns eine alte Version von Facebook App vergleichen. App-Einstellungen und -Optionen. Auch hier folgen Apps für beide Plattformen einem anderen Ansatz. Die beliebtesten Muster hier sind das Hamburger-Menü auf Android und Tippen auf das Menü auf iOS. Mediums Android App hat ein Hamburger-Symbol auf der Oberseite, das verschiedene App-Optionen und Bereiche zeigt. Jetzt, bei Medium für iOS, gibt es den vertrauten Button Tippen Ansatz. Beachten Sie, wie einige Optionen aus den Android-Apps Hamburger in die Registerkarte Benutzeroptionen auf iOS geschoben werden. Gleichförmigkeit. Immerhin gibt es immer Ausnahmen. Nicht alle Apps folgen unterschiedlichen Interaktionen und UI-Entwurfsmustern für die beiden Plattformen. Einige Apps folgen Material-Design-Mustern auf iOS wie Gmail, andere folgen dem gleichen menschlichen Schnittstellenmodell auf beiden, wie Instagram. Zum Beispiel können Sie in einer Skizze Ihr Kunstboard auswählen und alle Größen auf verschiedenen Geräten sehen, wie Apple, Android, responsive Web- und Papierprototypen. [ unhörbar] ist das gleiche, wählen Sie Art Board und Sie können die Liste der Gerätegrößen sehen. Auch auf Fotoshop und Illustrator. Sie können Ihre Gerätegröße einfach auswählen. Ein wichtiges Element im Design der Benutzeroberfläche sind Symbole. Symbole sollten so einfach und rationalisiert sein, dass sie auf dem kleinen Ansichtsport eines Modellbildschirms gut aussehen . In einer iOS-Situation haben Sie genug Zeit, Ihre eigenen Icons für jedes Projekt zu entwerfen , aber in Wirklichkeit stehen Sie unter so viel Druck und Sie müssen die fertigen Icon-Sets verwenden. Es gibt tolle Websites, die Sie finden und herunterladen können Symbole von Flaticon, Icon-Finder und Icons8. Denken Sie daran, dass Sie besser eine Reihe von Symbolen verwenden, anstatt Symbole einzeln herunterzuladen. Es bietet ein konsistenteres Design. Eine Schriftart kann leicht das subtilste und ansprechendste Unterscheidungsmerkmal für Ihr UI-Design sein. Es gibt vier Schriftarten, die ich hauptsächlich für die Gestaltung einer Website oder mobilen Anwendung verwende. Der erste ist Open Sans. Open Sans ist für Druck-, Web- und Mobilschnittstellen optimiert und verfügt über eine ausgezeichnete Lesbarkeit. Roboto ist Teil der Google-Familie und es ist die Standard-Android-Handys seit 2012. Es funktioniert gut für Körpertypen. Avenir Next ist ein geometrisches San Serif-Typ Gesicht, es ist sehr vielseitig mit sechs Möglichkeiten und ist in allen Größen lesbar. Proxima Nova eignet sich für moderne, inhaltsorientierte Websites und mobile Apps. Genauso gut für Überschriften und Körpertyp. Eine der wichtigsten Phasen Ihrer Erstellung sind Farbdiagramme, manchmal verbringen wir Stunden, um die beste Farbparität zu wählen. Nun, [unhörbar] und Tipps, um Ihre Farbparität einfacher zu wählen. Der erste ist die Farbbedeutung. Zuerst sollten Sie über grundlegende Konzepte über Farben Bescheid wissen. Jede Farbe hat eine Bedeutung, die je nach Kultur variiert. Zweite Instanzen Farben erzeugen Emotionen. Sie sollten also mehr über die Bedeutungen erfahren, um es im richtigen Kontext zu verwenden. Blau ist beispielsweise mit Zuverlässigkeit, Produktivität, Vertrauenswürdigkeit und Sicherheit verbunden . Sie sehen verschiedene Schattierungen von Blautöne in großen Social-Media-Plattformen wie Facebook und Twitter. Lassen Sie sich von der Natur inspirieren. Die besten Farbkombinationen kommen aus der Natur. Sie werden immer natürlich aussehen. Außerdem sieht man nie reines Grau oder reines Schwarz in der Natur. Fügen Sie Ihrer Farbe also ein wenig Sättigung hinzu. Unterbewusst wird es den Benutzern natürlicher und vertrauter aussehen. Nummer drei zieht kontrastreiche Aufmerksamkeit auf sich. Mit Kontrastmischung, Konsum von Informationen einfacher. Ein sehr häufiges Beispiel ist schwarz oder dunkelgrau und weiß. Diese beiden Farben erzeugen viel Kontrast. hoher Kontrast kann dazu beitragen, Ihre Inhalte besser lesbar zu machen. Übertreiben Sie Helligkeitsunterschiede zwischen Vorder- und Hintergrundfarben und vermeiden Sie die Verwendung von Farben ähnlicher Helligkeit. Nummer vier erhält Inspiration von Dribble oder Behance. Wenn Sie UI entwerfen, ist Dribble einer der besten Orte, um Ideen zu erhalten. Es ermöglicht Ihnen auch, nach Farbe zu suchen. Wenn Sie also visuelle Recherchen über eine bestimmte Farbe durchführen, wie andere Designer sie verwendet haben und welche Farbkombination gut passt, können Sie dieses Tool verwenden. Es gibt einige beliebte Werkzeuge, die Sie verwenden können, um Ihre Farbparität einfacher zu finden. Die erste ist bei Adobe Color CC, die ursprünglich Adobe Color genannt wurde. Es ist ein kostenloses Tool. Wählen Sie einfach einen Farbschemastil aus und ziehen Sie Farbauswahl, um Ihr neues Designschema zu erstellen. Sie erhalten vollständige RGB-Hex-Details, und die meisten Farben können angepasst werden, um hellere, dunklere Farbtöne zu enthalten , die immer noch in das Schema passen. Der andere ist Paletton. Es ist ähnlich wie Adobe Color CC, aber Sie sind nicht nur auf fünf Töne beschränkt. Wenn Sie in erster Linie Farben haben, können Sie mit den zusätzlichen Tönen spielen. Die andere ist die Materialpalette. Es ist ein großartiges Werkzeug, um eine Vorschau der Farben in Aktion zu sehen. Die Web-App paart zwei Farben zu einem Mock UI Design mit dominanten und untergeordneten Farben zusammen . Obwohl Design auf Materialdesignfarben beschränkt ist, ist die Live-Statistik-Funktion eine gute Möglichkeit, Ihr Auge zu trainieren und zu erfahren, welche Farben oft am besten zusammenarbeiten. Es gibt eine Anzahl von Software, die Sie für die Gestaltung guter Websites oder Apps Schnittstelle verwenden können : Sketch App, [unhörbar] oder Figma. vier Jahren wechselte ich zu Sketch für Photoshop und ich habe es seitdem so sehr geliebt. Figma ist Sketch sehr ähnlich. Beide sind vektorbasiert. Sie haben eine Infinitiv-Leinwand, auf der Sie Kunstbretter erstellen können, um sie zu entwerfen. Aber mit Figma können Sie einen Link zu Ihrem Projekt mit dem Rest des Teams teilen, insbesondere mit anderen Designern, um Feedback zu hinterlassen und Ihr Design zu kommentieren. Sie können Elemente exportieren und sogar das Projekt mit Ihnen bearbeiten. Im Allgemeinen ist es ein sehr kollaboratives Werkzeug. Außerdem können Sie Figma verwenden, unabhängig davon, ob Sie einen Mac oder PC haben. Heute werden wir in dieser Klasse unsere App in Figma so gestalten, wie sie für Windows und Macintosh-Schüler vereinbart ist, und Sie können Ihr Projekt ganz einfach mit uns teilen. Es ist mein erstes Projekt, das mit Figma entworfen wurde. Es wird interessant sein. Figma verfügt über eine Desktop-Version sowie eine Browser-Version. Wir können uns in Ihr Konto einloggen und die bisherigen Projekte ansehen, an denen Sie gearbeitet haben. Lassen Sie uns voran und erstellen Sie ein neues Projekt. Wie Sie sehen, müssen wir hier eine Leinwand machen. Dies sind die Schichten, die Komponenten und zum Starten verwenden wir diesen Werkzeugrahmen, um ein Kunstboard zu erstellen. Sie wählen hier die Größe Ihres Design-Rahmens: Telefon, Tablet, Desktop, Uhr, Papier oder sogar Social Media Posts oder Banner. Ich wähle ein iPhone 8. Ich habe das Kunstwerk in „Home“ umbenannt. Vor dem Start habe ich iOS UI-Kits von iOS-Design heruntergeladen, [unhörbar] für Figma. Diese Bibliotheken helfen sehr. Sie müssen keine Unternehmen von Grund auf neu erstellen. Auch Figma verfügt über eine Bibliothek für das Materialdesign, wenn Sie eine App für Android entwerfen möchten. Ich kopiere eine Symbolleiste aus dem UI Kit. Ich möchte meine Symbolleiste darauf erstellen, weil ich das Telefon nicht im iOS-Kit verwendet habe. Ich ersetze es durch Avenir Next. Ich habe meine Symbole bereits in Illustrator vorbereitet. Gemäß dem Drahtmodell und den Skizzen bringe ich die Symbole in die Symbolleiste ein. Für die Schaltfläche Hinzufügen zeichne ich einen Kreis mit einem Plus in der Mitte. Für die Farbpalette entschied ich mich, ein kühles Grün mit dem rötlichen Orange zu verwenden. Vergessen Sie nicht, kleine Details. Sie können Ihre Wireframe-Seite einbinden, um die Benutzeroberfläche darauf zu entwerfen. Für Symbole verwende ich fast immer Feathericons Set. Sie sind sehr einfach und minimal. Auch für Text und Titel verwende ich nie reines Schwarz oder reines Grau. Ich ziehe es vor, eine dunkle Farbe wie dunkelblau zu verwenden , besonders wenn Sie grün oder blau in Ihrer Arbeit haben, es sieht sehr ansprechend aus. Ich liebe Emojis. Ich liebe es immer, die Chance zu haben, Emojis zum Interface-Design hinzuzufügen. Ich habe das Gefühl, dass die Leute sehr gut mit ihnen auskommen, vor allem Jugendliche, da sie sie den ganzen Tag für das Chatten mit Freunden in Messenger-Apps verwenden . Wenn das Gesamtlayout fertig ist, können Sie weitere Details hinzufügen. Details, die das Design schöner machen. Ich verwende andere Farben für Kleinteile. Ich glaube, wenn dies eine App für Studenten ist, muss es in einer Weise frisch aussehen, dass Jugendliche es lieben würden. Eine der farbenprächtigsten Apps, die ich in meinem Leben gesehen habe, ist Zenly. Wenn ich mich nicht irre, hat Snapchat es erworben. Es sieht so frisch aus. Ich liebe die Verwendung von Farben. Die App sieht so lebendig aus. Die Homepage ist fertig. Vergessen Sie nicht, die Figma-Datei herunterzuladen. Dort können Sie die Homepage und den vollständigen Prozess des Hinzufügens einer neuen Rechnung, Seiten, neu erstellte Wireframes und Prototypen für frühere sehen. In Figma können Sie auch Prototypen erstellen. Es ist genauso einfach wie die InVision App. Hier können Sie den Rahmen des Designs wählen. Ist es vertikal oder horizontal? Sogar das Modell Ihres iPhone. Es ist großartig, siehst du. Sie können auch die Hintergrundfarbe wählen. Als Erste Schritte wählen Sie den Frame oder die Objekte in einem Frame aus und verbinden ihn mit einem anderen Frame, z. B. das Erstellen von Hotspots in der InVision App. Wenn der Benutzer auf der Startseite auf die Schaltfläche Hinzufügen klickt, geht er zur nächsten Seite, wo er seinen Freund oder Freunde auswählt, um eine Rechnung zu erstellen. Wenn sie mehr als einen Freund auswählt, wird die Schaltfläche „Weiter“ in eine Schaltfläche „Gruppe erstellen“ umgewandelt. So ist es für einen Benutzer einfacher zu unterscheiden, was passiert. Dann fängt sie ein Foto der Rechnung ein, und dann wählt sie gleichmäßig teilen und ordnet dann ihre Freunde den Ausgaben zu, wählt die Steuer aus und tippt auf die Schaltfläche „Laden“. Die letzte Seite ist ebenfalls mit der Homepage verlinkt. Lassen Sie uns eine Vorschau sehen, was wir getan haben. Sehen Sie, das ist der Prototyp mit Figma. Möglicherweise haben Sie schöne Interaktionen für mobile Apps und Websites von Designern in Three bill oder Behance gesehen . Sie können solche Animationen des Prinzips erstellen. Es ist eine sehr praktische App und super einfach zu arbeiten. Entwerfen Sie für Ihre Zuweisung die Benutzeroberfläche für die Startseite. Sie haben bereits die Skizze und erstellt durch einen Rahmen für. kannst du tun. Sie können Schnittstelle in Figma oder jeder anderen Software, die Sie bereits haben, entwerfen und Sie fühlen sich einfach mit ihm. Laden Sie einfach ein JPG Ihrer endgültigen Arbeit hoch. Teilen Sie es wie im Beispiel. Dies ist die letzte Aufgabe und zeigt, was Sie während dieser Klasse gelernt haben. Ich warte darauf, Ihre geteilten Sharing-Apps zu sehen. Vergessen Sie auch nicht, Ihre Fragen zu stellen. 10. Abschluss: In Ordnung. Wir sind bis zum Ende gekommen. Wir haben eine Menge tolle Arbeit geleistet. Ich hoffe, Sie, kreative Jungs, hatten Spaß beim Erstellen von Ideen für eine geteilte Aktie [unhörbar] Anwendung in kurzer Zeit. Es ist wichtig, alle Anstrengungen zu wissen, die Sie zum Start bringen. Sie mit Aktionen, die Sie nach dem Start WerdenSie mit Aktionen, die Sie nach dem Startausführen, näher an die perfekte UX Ihrer App bringen? Es liegt in Ihrer Verantwortung als UX-Designer, das Nutzerverhalten zu antizipieren. Reibungsloses visuelles Erlebnis zu schaffen, ist nicht einfach. Es braucht Zeit, Mühe, Hingabe, aber mit den richtigen Tools können Sie Ihre App schnell und effektiv optimieren. Indem Sie Analysetools verwenden, um aus der In-App-Lebensdauer Ihrer Benutzer zu lernen, können Sie die Benutzererfahrung Ihres Lebens erstellen. Denken Sie auch daran, dass Sie ein guter Designer sein werden, wenn Sie arbeiten und Ihre Arbeit mit anderen teilen, um Feedback zu erhalten. Ich weiß, wie es sich anfühlt, wenn Sie gerade angefangen haben und Sie nicht zufrieden mit dem, was Sie noch entwerfen, aber glauben Sie mir, Arbeit und Austausch mit anderen, um Feedback zu erhalten hilft Ihnen, besser zu werden und mehr zu arbeiten. Arbeiten, üben, teilen Sie es mit anderen, erhalten Sie Feedback und viel Glück.