Lehrgang zu Grundlagen im UX/UI Design für Drahtmodelle und Prototypen

1. Einführung: Hey, willkommen zu diesem Skillshare Kurs über User Experience Design und Drahtrahmen Grundlagen. Danke fürs Einstimmen. In dieser Klasse werden wir Schritt für Schritt gemeinsam eine Reihe von Drahtframes für eine mobile App erstellen. Ein bisschen über mich. Mein Name ist Sarah Bannister und ich bin freischaffende User Experience Designer und User Interface Designer. Ich habe an Marken wie Ford und Streamlette gearbeitet. Ich bin leidenschaftlich für das Entwerfen von Websites und mobilen Apps, die Probleme lösen , gut aussehen und benutzerfreundlich sind. Ich erinnere mich an den Tag, an dem ich merkte, dass Design meine Traumkarriere sein würde. Ich war so aufgeregt zu erfahren, dass es eine Karriere gab, die mein Bedürfnis nach einem kreativen Outlet erfüllen konnte und gleichzeitig Alltag der Menschen durch Design und Technologie leichter wird. Wenn Sie so etwas wie ich sind und diese gleichen Werte teilen, wird Design ein wunderbares Outlet für Sie sein, um zu erkunden und möglicherweise eine Karriere in beginnen. Diese Klasse wird Ihnen nützlich sein, wenn Sie wenig bis gar keine Erfahrung in Grundlagen des Benutzeroberflächendesigns oder des User Experience Designs haben, aber ein Interesse daran haben, sie zu erkunden. Cool. Lasst uns anfangen. 2. Was ist ein Wireframe?: Drahtgittermodelle sind ein wesentlicher Bestandteil des Produktdesignprozesses. Ein Drahtmodell ist ein Skelett-Mockup eines Web- oder App-Konzepts. Ein Wireframe kann in einer Vielzahl von Visuals geliefert werden, von niedriger bis hoher Wiedergabetreue, was bedeutet, dass ein Drahtmodell mit etwas so Einfachem wie Bleistift und Papier oder Stift und Whiteboard erstellt werden kann , bis hin zur Erstellung grafischer Drahtmodelle in einer Designsoftware wie Sketch, Adobe XD, Balsamiq oder Axure. Low-Fidelity-Wireframes werden in der Regel zu Beginn eines neuen Entwurfsprozesses empfohlen. Das liegt daran, dass Sie mehrere Konzepte nutzen und schnell testen können, ohne eine Menge Zeit oder Kosten in sie investieren zu müssen. Sie können dann die verschiedenen Ideen nehmen und sie vor Anwender-Test-Teilnehmer oder Kunden stellen, um Feedback zu erhalten. Sie können schneller Feedback erhalten und dann die erforderlichen Revisionen vornehmen , um die beste Designstrategie für Ihr Produkt einzugrenzen. Wireframes sind ein früherer Teil des Produktdesigns oder des sogenannten Design-Thinking-Prozesses, der von einem Designunternehmen IDEO geprägt wurde, aber sie beginnen nicht am Anfang. Wireframes sind Teil des physikalischen Entwurfsprozesses, der kommt , nachdem Sie viele Recherchen und Entdeckungen zu dem Produkt durchgeführt haben , das Sie entwerfen werden. Diese Erkennungsphase ist ausreichend Informationen für eine ganze andere Klasse. Nehmen wir an, dass wir bereits unsere Forschungs- und Entdeckungssprints durchlaufen haben, und wir wissen bereits, dass wir Wireframes für eine mobile Reise-App entwerfen werden. 3. Was ist ein Prototyp?: Für diese Klasse bauen wir auch einen anklickbaren Prototyp mit unseren Wire-Frames für den letzten Unterricht in der Klasse aus. Ein Prototyp korreliert mit den Drahtrahmen, es gibt jedoch zwei verschiedene Konstruktionsleistungen. Prototypen sind interaktive Demonstrationen, wie Ihr Produkt funktionieren und aussehen wird. Prototypen können auch niedrige bis hohe Wiedergabetreue sein, Sie können Prototypen aus Ihren Papier- und Bleistiftskizzen oder aus Ihren vollständig entworfenen High-Fidelity-App-Designs erstellen. Ein Prototyp führt einen Benutzer in der Regel durch bestimmte oder mehrere Task-Flows und kann Interaktionen und Animationen enthalten oder nicht. Prototypen sind wichtig für den Produktentwurfsprozess, da sie es Ihnen ermöglichen, Ihre beabsichtigten Entwürfe an Benutzer und Benutzer zukommunizieren Ihre beabsichtigten Entwürfe an Benutzer und Benutzer zu , Entwickler oder andere Teams im Übergabe-Prozess zu testen, oder an Kunden und Stakeholder, denen Sie Ihre Entwürfe präsentieren müssen, nehmen sie Ihr statisches Design und machen es lebensechter. Wenn Sie sehen können, wie Benutzer mit Ihrem Produkt interagieren und sehen, was in Ihrem Design funktioniert und was nicht funktioniert, können Sie auf diese Weise die besten Revisionen für Ihr Produkt vornehmen. 4. Der Designprozess: Wissen über den Entwurfsprozess ist eine wichtige Fähigkeit , die Sie Ihrem Werkzeugsatz hinzufügen können, wenn Sie in die Designwelt einsteigen. Ich werde kurz über den Prozess gehen, der als Design Thinking bekannt geworden ist, der von der Designfirma IDEO populär gemacht wurde. Der erste Schritt im Design-Thinking-Prozess besteht darin, sich einzufühlen. Empathie ist von entscheidender Bedeutung, wenn Sie Produkte entwerfen, die von Menschen verwendet werden. diesem Sprint können Sie mehr über die Court Pin Points erfahren, die Sie für die Zielgruppe lösen möchten, die Ihre App möglicherweise verwendet. Ihre Designleistungen für die Empathiephase von Design Thinking können Benutzerrecherchen und Statistiken sowie ein Verständnis der Zielgruppe umfassen Benutzerrecherchen und Statistiken sowie , für die Sie entwerfen. Der zweite Schritt des Design-Thinking-Prozesses ist die definierte Phase. In der entscheidenden Phase des Design-Thinking-Prozesses nehmen Sie alle Informationen, die Sie während des Empathy-Sprints über Ihre Benutzer gesammelt haben , und synthetisieren sie zu wichtigen Takeaways, die Ihnen helfen, Ihren Ansatz zu definieren auf die Probleme hin, die Sie festgestellt haben, dass Ihr Produkt lösen wird. Ihre Ergebnisse für die Definierungsphase können wichtige Erkenntnisse aus Benutzerforschung und Interviews, Strategiedefinitionen wie Problembeschreibung, Geschäftsziele, Benutzeranforderungen und-zielesowie Erfolgsindikatoren umfassen Strategiedefinitionen wie Problembeschreibung, Geschäftsziele, Benutzeranforderungen und-ziele Benutzeranforderungen und . wie Metriken und KPIs. Der dritte Schritt im Design Thinking Prozess ist die Ideate Phase. Nachdem Sie ein solides Verständnis Ihrer Strategie und Benutzerbedürfnisse haben, können Sie beginnen, verschiedene Ideen zu entwickeln, die potenzielle Lösungen für das Problem oder mehrere Probleme sein könnten , die Ihr Produkt lösen möchte. Dies ist der Teil, in dem kreatives Denken gefördert wird. Denken Sie außerhalb der Box nach Möglichkeiten, wie Sie diese Probleme beheben können. Ergebnisse für die Ideate-Phase können Skizzen aus verschiedenen Brainstorming-Techniken und eine verengte Liste von Features enthalten Skizzen aus verschiedenen Brainstorming-Techniken , die in Ihre verschiedenen Entwurfskonzepte integriert werden könnten . Der vierte Schritt im Design Thinking Prozess ist das Prototyping. Abhängig von der zeitlichen Beschränkung des Projektumfangs können Sie bestimmen, welche Treue für Ihre Drahtmodelle und Prototypen erforderlich ist. In dieser Prototyping-Phase werden Sie die Konzepte, die Sie in der Ideationsphase entwickelt haben , in einen interaktiven Prototyp umwandeln, der die primäre Aufgabenklausel auflegt , die ein Benutzer bei der Verwendung von Ihr Produkt. Sie verwenden diese Prototypen, um echte Testteilnehmer Ihrer Zielgruppe schnell mit Ihrem Produkt zu bekommen . Dies ist wichtig für die abschließende Testphase, in der Sie Feedback erhalten , damit Sie Ihre endgültigen Entwurfsüberarbeitungen vornehmen können. Ergebnissen Ihrer Prototyping-Phase gehören unter Umständen Drahtmodelle Ihrer Benutzerflüsse und Prototypen mit niedriger bis hoher Wiedergabetreue. Der fünfte Schritt im Design Thinking Prozess ist das Testen. In dieser letzten Phase des Design-Thinking-Prozesses testen Sie, wie viele Konzepte erhalten wurden, um zu bestimmen, dass die Zeit erlaubt. Diese Testphase kann rote Flaggen oder Probleme mit Ihrem Design aufdecken , die Sie sonst nicht bemerkt haben, bevor Sie mit echten Leuten testen. Auf diese Weise können Sie die Revisionen vornehmen, die für Ihre Low-Fidelity-Designs erforderlich sind, während Sie die Treue erhöhen , damit Sie Designfehler später auf der Straße nicht entdecken , nachdem Sie mehr Zeit oder Geld für sie ausgegeben haben, sagen wir in der Entwicklungsphase. Ergebnisse für die Testphase können Benutzerfeedback basierend auf Ihrem vorläufigen Entwurf, enthaltenen Funktionen und Benutzerflüsse umfassen Benutzerfeedback basierend auf Ihrem vorläufigen Entwurf, . Design ist ein extrem iterativer und etwas unlinearer Prozess. Mit jeder Revision, die Sie für ein Produkt mit einem menschenzentrierten Fokus machen, werden Sie eine Form des Design-Thinking-Prozesses abschließen . In dieser wichtigen reflektierenden Phase überprüfen Sie das Feedback und die Ergebnisse Ihrer Tests, die Sie darüber informieren, wo Sie Revisionen vornehmen können, damit Sie den Designprozess erneut mit neuen Konzepten beginnen können, bei denen es sich um verbesserte Versionen Ihrer zuvor getestetes Design. 5. Was ist ein User Task Flow?: Da eine App, an der Sie vielleicht als UX- oder UI-Designer arbeiten , aus vielen verschiedenen Bildschirmen, manchmal Hunderten von Bildschirmen und Bildschirmen sowie verschiedenen Funktionen bestehen kann. Im Interesse dieser Klasse arbeiten wir daran, einen einzelnen Aufgabenablauf für eine mobile Reise-App abzuschließen. Ein Aufgabenablauf für Benutzer ist eine Aufgabe, die Benutzer mit Ihrer App oder Ihrem Produkt abschließen würden. Der Flow sollte Ihren Benutzer zum Einstiegspunkt der Aufgabe führen sie durch jeden Schritt bis zum letzten Schritt und zu erreichbaren Ergebnissen führen, z. B. das Hinzufügen eines Ereignisses zu seinem persönlichen digitalen Kalender oder das Online-Kaufen eines Produkts. Erfolgreiche Konvertierungen hängen davon ab, einen benutzerfreundlichen Flow zu erstellen. Wenn Benutzer nicht herausfinden können, wie sie die primäre Aufgabe, die Ihre App bietet, erledigen können, verwenden Benutzer Ihr Produkt einfach nicht. Wir können einen soliden Umriss für unseren Nutzerfluss bestimmen indem wir unsere Geschäftsziele und Nutzerbedürfnisse verstehen, die wir in der entscheidenden Phase des Design-Thinking-Prozesses festgelegt haben. Die Fokussierung auf die Geschäftsziele und Benutzerbedürfnisse wird die Anforderungen für die Kunden und Stakeholder erfüllen , die in das Projekt investiert werden und bestimmte Erfolgsmetriken erfüllen wollen, während gleichzeitig dem Benutzer dabei hilft, seine Ziele zu erreichen und fühlen Sie sich zufrieden mit Ihrem Produkt. Für den Wireframeing-Teil unserer App werden wir einen Aufgabenablauf entwerfen, der den Benutzer durch den Prozess der Reservierung in einem Hotel für eine Reise-App führt . Andere Aufgabenabläufe, die Sie möglicherweise für eine Reise-App entwerfen, können das Buchen eines Fluges, das Erforschen verschiedener Aktivitäten in Ihrem Reiseziel und das Buchen Ihrer Party für verschiedene Attraktionen oder das Planen eines Termins mit einer Reise umfassen Erforschen verschiedener Aktivitäten in Ihrem Reiseziel und das Buchen Ihrer Party für verschiedene Attraktionen . -Agenten. Wie Sie sehen können, können Sie viele verschiedene Aufgabenabläufe für eine einzelne App haben. Ich möchte nicht, dass diese Klasse zu viel Zeit in Anspruch nimmt, also bleiben wir einfach bei dem einen Aufgabenablauf. Beginnen wir mit unseren Wireframes. 6. Wireframing: Dies sind die Werkzeuge, die Sie folgen müssen, um einen Bleistift- und Papierdrahtrahmen zu erstellen. Das erste, was ist Gitterpapier. Ich habe eine Ressource enthalten, die Sie herunterladen und drucken können verschiedene Abmessungen von Rasterpapier, einschließlich mobiler Abmessungen, die von einer Telefongrafik eingerahmt werden, in der Sie Rahmen innerhalb von verkabeln können. Die zweite Sache ist ein Bleistift und Radiergummi. Während Sie in Stift zeichnen können, ist es schön, in der Lage zu sein, Ihre Fehler zu löschen oder Revisionen zu machen. Das letzte, was Sie brauchen, ist ein Lineal, um sicherzustellen, dass Sie Formen und Linien schön und eng halten, und so sieht alles konsistent aus. Optional können Sie eine Drahtrahmen oder eine UI-Schablone bei Amazon bestellen. Sie brauchen dies nicht, aber es ermöglicht Ihnen, schnell und präzise Dinge zu zeichnen, wie zum Beispiel, wo sich Ihre sozialen Symbole befinden könnten oder andere gängige UI-Elemente. Lasst uns anfangen. 7. Wireframing: Das Ziel eines Drahtmodells ist es, die Skelettstruktur des Designs jedes Screenings zu skizzieren . Drahtmodelle bestehen aus Formen, Linien, Boxen, Text und Schaltflächen. So Dinge wie Bilder, Farbe, Kunstrichtung, Topographie, diese Dinge sind im Drahtrahmenprozess nicht wichtig und sie werden tatsächlich davon abgeraten, weil Sie nicht möchten, dass Ihr Benutzer in die feinen Details und was das endgültige Design sein könnte, arbeiten wir nicht auf das endgültige Design hin. Ich habe bereits erwähnt, Farbe ist nicht ratsam und dies ist in der Regel der Fall. Es gibt Fälle, in denen Sie Farbe verwenden möchten. Zum Beispiel verwende ich es für CTAs, so hilfreich für mich, damit ich mich daran erinnern kann, was ich beabsichtigte, interaktiv zu sein , sowie die anderen, denen ich mein Design übergebe. Während ein Drahtmodell im Grunde ein grober Entwurf ist, möchten wir alles konsistent halten, was die Größe und den Abstand angeht. Je besser Sie Ihre Papier skizzierten Drahtmodelle aussehen lassen können, desto lesbarer und nutzbarer sind sie und Sie erhalten konsistenteres Feedback von Ihren Benutzern beim Testen. Alles, was Sie wollen, ist, dass Ihr Design lesbar und sauber ist. Es ist wichtig, sich nicht allzu in die Details zu verwickeln. Zum Beispiel wissen wir wahrscheinlich noch nicht einmal, welche Kopie wir verwenden möchten. Sie können Platzhalter für Bilder und Kopieren verwenden, z. B. kleine rechteckige Kästchen oder Quadrate. Dies wird Block-Framing genannt und gehen, um den Benutzerfluss für diesen Drahtrahmen zu skizzieren. Der erste Teil ist die Navigation und die Möglichkeit, Hotels zu durchsuchen. Der zweite Schritt ermöglicht es dem Benutzer, An- und Abreisedaten festzulegen und die Anzahl der Gäste festzulegen, die bleiben werden. Der dritte Schritt ist die Möglichkeit, verschiedene Angebote zu durchsuchen. Viertens, die Möglichkeit, eine Detailseite zu einem verfügbaren Angebot anzuzeigen. Fünfter Schritt besteht darin, endlich ein Zimmer zu buchen. Im sechsten Schritt werden die Benutzer aufgefordert, ihre Informationen und Zahlungsdetails einzugeben, und der letzte Schritt wird die Buchungsbestätigung sein. 8. Scannen und Hochladen deiner Wireframes: Eine Scanner-App nimmt automatisch die Entwürfe Ihrer Dokumente an und verbessert sie, wie ein echter Scanner Dokumente kopieren und übertragen würde. Sie werden viel lesbarer sein, da der Kontrast automatisch für Sie angepasst wird. Sobald Sie Fotos von all Ihren Entwürfen aufgenommen haben, übertragen Sie sie einfach auf Ihren Computer, damit wir sie dann als nächstes in eine Prototyping-Software hochladen können. 9. Prototyping in InVision (Invisionapp.com): Als nächstes gehen wir zu invisionapp.com und erstellen ein kostenloses Konto auf invision. Sobald Sie in Ihrem Konto sind, klicken Sie auf die große rosa Schaltfläche in der oberen rechten Ecke, um ein neues Projekt zu starten. Benennen Sie das Projekt, und wählen Sie Prototyp aus der Liste der Projektoptionen aus. Als Nächstes können Sie Ihre Dateien einfach per Drag & Drop in diesen Dashboard-Bereich ziehen. Wenn Sie eine Überarbeitung an Ihrem Entwurf vornehmen, die Originaldatei überschrieben, wenn Sie eine Datei mit dem gleichen Namen eingeben wirddie Originaldatei überschrieben, wenn Sie eine Datei mit dem gleichen Namen eingeben. Es ist also einfach, wenn Sie versuchen, Ihre Entwürfe nur zu aktualisieren , nachdem Sie Revisionen festgestellt haben. Sie können auch die allgemeinen Titel der Bildschirme umbenennen , ohne die Dateinamen hier zu ändern. Klicken Sie nun auf einen der Bildschirme. Als nächstes gehen wir in den Build-Modus hier unten. Jetzt klicken wir einfach und ziehen über ein Element mit unserer Maus und dies wird ein so genannter Hotspot erstellen. Ein Hotspot ist, wo der Benutzer klickt, um eine Interaktion mit Ihrem Prototyp auszulösen. Wir gehen durch und erstellen Hotspots für jeden Bildschirm, bis wir einen voll funktionsfähigen Prototyp haben , der es einem Benutzer ermöglicht, Ihren Aufgabenablauf zu durchlaufen. Sie haben jetzt einen funktionierenden Prototyp Ihres Designs, den Sie Ihren perspektivischen Testteilnehmern zeigen oder Ihren Denkprozess den Stakeholdern präsentieren können. Oder Sie können Ihren Freunden und Ihrer Familie einfach zeigen , dass Sie wissen, wie Sie mobile Killer-Apps entwerfen. 10. Schlussbemerkung: Du hast es geschafft, tolle Arbeit. Wir haben gerade Drahtmodelle und einen voll funktionsfähigen Prototyp gebaut. Ich würde gerne die Arbeit aller sehen. Bitte laden Sie Bilder Ihrer Wireframes in die Projektgalerie hoch und sprechen Sie ein wenig über Ihre Erfahrungen. Was war dein Lieblingsaspekt beim Wireframing? Was war der schwierigste Teil? Haben Sie sich dafür entschieden, einen anderen Aufgabenablauf für eine mobile Reise-App oder eine andere App als in der Klasse zu entwerfen ? Für welche anderen App-Ideen könnten Sie in Zukunft versuchen? Noch besser, Sie könnten auch einen Link zu Ihrem Live Envision Prototyp in Ihre Projektbeschreibung einfügen. Sie können dies mit dieser Schaltfläche tun. Ich kann es kaum erwarten, deine Entwürfe zu sehen. Vielen Dank für die Teilnahme an dieser Klasse.