UI UX Design und Entwicklung meistern: Grundlagen zur Brillanz

1. Kurs-Einführung: Willkommen zum einfachsten interaktiven und unterhaltsamsten Kurs, den es gibt Es führt Sie von den Grundlagen des UIUX-Designs und der Entwicklung bis hin zu dem, was Sie brauchen, um diese Fähigkeit zu beherrschen Bevor wir beginnen, möchte ich Ihnen zeigen, was wir lernen werden Ich habe diesen Kurs in UIUX-Design und Forschung unterteilt UIUX-Design und Forschung wo Sie die Faktoren, Stufen und alles über UX lernen werden , Stufen und alles Beim Design und der Entwicklung von Benutzeroberflächen habe ich es erneut in die Grundlagen des Grafikdesigns unterteilt, sodass Sie sich mit Tools wie Photoshop, Illustrator und Figma gut auskennen werden wie Bei der UI-Entwicklung werden wir die Grundlagen von HTML, CSS und JavaScript erlernen die Grundlagen von HTML Nun zu einer kleinen Einführung über mich Ich bin Mariam und das ist mein Gesicht. Meine Arbeit findest du auf Mariam Ein paar Einblicke in die Caeojourney als Vorwarnung: Ich habe seit dem 11. Standard immer gezeigt, dass ich mich in der Welt der Animation befinde . Ich habe in meinem Grundstudium PSE-Animation studiert. Dann wurde ich für Praktika bei Deloit als Grafikdesigner ausgewählt Praktika bei Deloit als Aber 2019 fühlte ich mich eingesperrt. Zu diesem Zeitpunkt bin ich auf UIUX-Design gestoßen. Seitdem ich UIUX-Design entdeckt habe, habe ich es nie bereut, weil dieses Gebiet Spaß macht und gefragt ist Jetzt habe ich sechs Jahre Erfahrung, weshalb ich glaube, dass es an der Zeit ist, etwas weiterzugeben, indem ich meine Fähigkeiten auf Online-Plattformen weitergebe. Lass uns anfangen. 2. Was ist UX-Design?: Okay, wofür steht UX? Es ist Benutzererfahrung und was bedeutet das? Es geht darum, wie Benutzer mit etwas interagieren. Nun, was bedeutet Design? Es ist das Aussehen und die Funktionalität von etwas. Was passiert also, wenn wir beide Begriffe zusammenfügen, UX-Design? UX-Design ist also im Grunde genommen, zu entwerfen, wie etwas aussieht und funktioniert, damit es für andere einfach und unterhaltsam ist. Immer noch verwirrt, schauen wir uns einige gute und schlechte UX-Beispiele an, um UX besser zu verstehen. Sollen wir? Nun, ein paar Beispiele für gutes Nutzererlebnis können deine Zahnbürste , eine Wasserflasche oder einfach ein Lichtschalter Lassen Sie mich das für Sie etwas näher aufschlüsseln. Zahnbürsten funktionieren nur, wenn Sie Zahnpasta auf die Bürste auftragen und sich die Zähne putzen Das ist es. Was macht eine Wasserflasche? Wir öffnen die Flasche, trinken daraus und schließen sie. Das ist es auch schon. Was macht ein Lichtschalter? Wir schalten ihn einfach ein und aus, wenn wir das Licht brauchen. So einfach ist gutes UX. Schauen wir uns nun große Designs an. Das erste Bild ist von einem Restaurant. Es ist eine Meno-Karte, und wir alle wissen, dass es schwierig ist, Gerichte aus einer Meno-Karte auszuwählen , wenn keine Bilder zur Verfügung gestellt werden und wenn zu viele Gerichte aufgeführt sind Was ist mit einer Waschmaschine? Es gibt so viele Tasten und manchmal ist es überwältigend überhaupt zu starten eine Waschmaschine überhaupt zu starten, es sei denn, Sie haben eine Anleitung. Das Gleiche gilt für den Mikrowellenherd. Lassen Sie uns unsere Beispiele nicht darauf unterteilen. Schauen wir uns ein anderes Beispiel für Down-Normal an. Dies ist ein Beispiel für eine Schieb- und Zugtür. Es ist ein klassisches Beispiel dafür, dass Designs verwirrend werden können, unabhängig davon, ob Sie sich nicht sicher sind, ob Sie eine Tür öffnen oder ziehen sollen. Wenn sich auf beiden Seiten der Tür Griffe befinden, deutet der Griff darauf hin, an der Drucktür zu ziehen, aber das Schild hat gedrückt, sodass es offensichtlich verwirrend wird. Ein gutes UX ist eine flache Platte zum Schieben und ein Griff zum Ziehen. Dieses Design sagt Ihnen deutlich, was zu tun ist. Kein Schild erforderlich. Ich denke, wir haben das Thema UX-Design inzwischen verstanden. Schauen wir uns nun die Faktoren des UX-Designs an. Eine davon wird die Erwartung der Benutzer sein. Zweitens wird es leicht zu lernen sein. Drittens sind Freiheit und Kontrolle, und viertens Überraschung und Freude. Schauen wir uns das anhand eines Beispiels für eine Flipcard an. Jetzt öffnen wir die Flipcard-App und sehen alle beliebten Produkte, die die Leute sofort alle beliebten Produkte, die die Leute kaufen, wenn wir uns Wenn wir etwas Bestimmtes wollen, müssen wir nur in der Suchleiste nach dem Produkt suchen, und genau das erwarten die Nutzer von Ich glaube, Flip Card macht einen sehr guten Job, wenn es darum geht, diesen UX-Faktor Was machst du, sobald du Flip Cart betrittst? Sie suchen nach Ihrem gewünschten Produkt und sobald Sie es erhalten haben, kaufen Sie es. Ich denke nicht, dass es selbst als Erstbenutzer schwer ist. liegt daran, dass es einfach ist lernen, wenn ich diese App verwende. Was ist nun, wenn ich meine Meinung ändere und diese Bestellung stornieren möchte? Was mache ich? Habe ich die Möglichkeit? Das wird ein großes Fett sein. Das ist auch ziemlich einfach, also macht das den dritten Faktor zunichte. Was ist der vierte Faktor? Es ist Überraschung und Freude. Alles, was der SuperCinsFlip-Einkaufswagen hat, die Gutscheincodes, die Verkaufsplakate, die Broschüren und die Werbegeschenke, die mit der Bestellung geliefert werden , fasziniert mich einfach und ich nutze die App noch Jetzt wissen wir, was gutes UX ist, schlechtes UX ist und wir kennen die Faktoren. Aber wie gestalten wir UX-Design? Dafür sollte es einige Stufen und Schritte geben. Klicken Sie auf das nächste Video , um mit den Phasen des UX-Designs zu beginnen. 3. Phasen des UX-Designs: besteht aus fünf Hauptphasen UIC-Designprozess besteht aus fünf Hauptphasen: Verstehen, Analysieren, Ideenfindung, Validierung und Iteration Lassen Sie uns jede dieser Phasen durchgehen, damit wir diese Prinzipien effektiv auf unsere Projekte anwenden können diese Prinzipien effektiv auf unsere Projekte anwenden Schritt eins ist zu verstehen. Stellen Sie sich vor, Ihr Chef hat Sie einem neuen Kundenprojekt zugewiesen. Schritt eins, du verstehst. Sie setzen sich mit dem Kunden , um seine Vision genau zu verstehen. Es geht nicht nur darum, oberflächliche Fragen zu stellen, sondern auch darum, das Projekt auf den Punkt zu bringen. Sie werden Fragen stellen wie Was ist der Zweck des Produkts? Wer sind die Zielnutzer? Welche Farbpaletten stellen Sie sich vor? Was sind die Geschäftsanforderungen und Ziele? Sie müssen auch die Produkte, Benutzer, Wettbewerber und Branchentrends untersuchen. In dieser Phase besteht das Ziel darin, so viele Informationen wie möglich aufzunehmen , um ein klares Verständnis dafür zu erlangen, was der Kunde und die Benutzer von diesem Projekt erwarten. Sobald Sie alle Informationen gesammelt haben, ist es an der Zeit, sie zu analysieren, und das ist unser zweiter Schritt. Hier werden wir quantitative und qualitative Umfragen durchführen . Was sind qualitative Umfragen? Hier werden Sie tiefer in die Erkenntnisse der Nutzer eintauchen. Indem Sie eine kleine Anzahl von Benutzern interviewen, stellen Sie ihnen offene Fragen, um umfangreiche und detaillierte Antworten zu erhalten Wenn Sie beispielsweise eine Fitness-Lernplattform entwerfen, könnten Ihre Befragten Hier sind ein paar offene Fragen, die Sie stellen könnten. Wie halten Sie die Konsistenz Ihrer Fitnessroutine aufrecht? Vor welchen Herausforderungen stehen Sie , wenn Sie versuchen, fit zu bleiben? Was halten Sie von der Nutzung von Online-Plattformen für die Fitnessausbildung? Offene Fragen ermöglichen es Benutzern nun, durchdachtere und ausführlichere Antworten zu geben , die Ihnen helfen, ihre wahren Bedürfnisse und Probleme zu verstehen. Lassen Sie uns nun über quantitative Umfragen sprechen. Hier geht es mehr um die Zahlen. Sie werden geschlossene Fragen an eine größere Gruppe von Personen senden , um eine umfassendere Perspektive zu erhalten. Was sind nun geschlossene Fragen? Sie erfordern spezifische begrenzte Antworten wie Ja oder Nein oder eine Auswahl aus bestimmten Optionen. Schauen wir uns einige Beispiele an. Wie oft trainierst du jede Woche? Benutzt du regelmäßig Fitness-Apps? Schaust und verfolgst du Fitnessvideos? Mit quantitativen Umfragen sammeln Sie Daten zu Trends und Mustern. Dies ist genauso wichtig, um die Bedürfnisse der Benutzer in größerem Maßstab oder in großen Mengen zu verstehen . Sobald Sie beide Arten von Recherchen gesammelt haben, erstellen Sie Benutzerpersönlichkeiten und Empathie-Maps Mithilfe dieser Tools können Sie sich ein Bild davon machen, wer Ihre Nutzer sind , was sie benötigen und welche Einstellung sie zu den Problemen haben müssen, die Ihr Produkt lösen soll Was kommt als nächstes Stufe drei. Lassen Sie uns Ideen entwickeln. Jetzt, da Sie ein solides Verständnis der ersten beiden Phasen haben , ist es an der Zeit, Ideen zu entwickeln. Das ist der lustige Teil Sie werden so viele Ideen wie möglich generieren, egal wie verrückt sie erscheinen. Von hier aus beginnen Sie mit dem Brainstorming, dem Skizzieren, der Erstellung von Io-Frames, Ziel ist es, alle Erkenntnisse und Ideen in greifbare Lösungen zu alle Erkenntnisse und Ideen in greifbare Lösungen Kommen wir nun zur vierten Phase, die bestätigt ist. Sie haben jetzt Ihr Design und Ihren Prototyp, aber woher wissen Sie, dass es bei Benutzern funktioniert, oder? Hier kommt die Validierung ins Spiel. Eine beliebte Methode ist das Testen der Benutzerfreundlichkeit. Sie werden echte Benutzer mit Ihrem Produkt interagieren lassen, um zu sehen, wie einfach es für sie zu verwenden ist. Eine andere Methode sind A/B-Tests, bei denen Sie zwei verschiedene Versionen Ihres Designs präsentieren zwei verschiedene Versionen Ihres und herausfinden, welche besser abschneidet. Das Feedback aus diesen Tests ist kalt, weil es die Stärken und Schwächen Ihres Designs hervorhebt . Dann wiederholen wir und das ist unsere fünfte Phase. Der UX-Designprozess endet nicht, sobald das Produkt validiert ist Es ist Zeit, zu verfeinern und zu verbessern. Sie nehmen das Feedback, das Sie erhalten haben, auf, überprüfen Ihre Designs und nehmen die erforderlichen Änderungen vor. Dann testest du erneut. Dieser iterative Prozess setzt sich auch nach der Markteinführung Ihres Produkts fort, da sich die Benutzerbedürfnisse und Markttrends weiterentwickeln Dieser Zyklus aus Verstehen, Analysieren, Ideenfindung, Validierung und Iteration bildet das Rückgrat eines Es ist kein einmaliger Prozess, sondern ein fortlaufender Prozess, der sicherstellt, dass sich Ihr Produkt im Laufe der Zeit fortlaufender Prozess, der sicherstellt, dass sich Ihr Produkt weiter verbessert nun im nächsten Video Schauen wir uns nun im nächsten Video die Grundlagen des Grafikdesigns 4. Grundlagen des Grafikdesigns: Was ist Grafikdesign? Es ist alles, was Sie sehen , was Linien, Formen, Texturen und Ausgewogenheit beinhaltet . Lassen Sie es uns aufschlüsseln. Linien können dünn, dick, kurvig sein, alles, was Elemente voneinander trennt und ihnen Bedeutung verleiht Zum Beispiel die Website der New York Times. Sie verwendet Linien, um Ihren Blick durch den Inhalt zu leiten, wodurch die Benutzeroberfläche leicht zu bedienen ist und die Dinge extrem einfach gehalten werden. Wir haben zwei Arten von Formen, geometrische und organische Formen. Was sind nun geometrische Formen? Quadratische Kreise, Dreiecke, Polygone, Sechsecke. Sie sind die, die du seit der Schule kennst. Organische Formen wie Blätter, Wolken, Berge, die der Natur entstammen und für eine flüssigere, natürlichere Atmosphäre sorgen Sie werden organische Formen genannt. Lassen Sie uns jetzt über Formen sprechen. Form ist nur eine Form mit Tiefe, Schatten und Licht. Gib einem flachen Kreis etwas Schatten, Licht und Tiefe, und bam, du hast eine Kugel Das Gleiche gilt für das Dreieck. Schau dir diese Menükarte an. Die Art und Weise, wie Schatten, Linien und Formen zusammenarbeiten , macht dieses Design interaktiver und unterhaltsamer. Ohne diese Elemente würde es sich flach und langweilig anfühlen. Das Gleiche gilt für dieses Poster. Lassen Sie uns jetzt über das Gleichgewicht sprechen. Bei Balance geht es darum, dass sich die Dinge gleichmäßig anfühlen. Es wird durch Farbe, Größe, Anzahl der Elemente und die Art und Weise, wie Sie den negativen Raum verwenden, beeinflusst Anzahl der Elemente und die Art und Weise, . Finden Sie das Gleichgewicht und Ihr Design wird sich harmonisch anfühlen. Schreiben Sie einfach. Genau wie dieses Webdesign. Texturen können über Erfolg oder Misserfolg eines Designs entscheiden. sie benutzt werden, verleihen sie Tiefe, übertreiben es und es ist ein Chaos Wie dieses Design, bei dem zu viel Textur das Gesamtbild ruiniert hat Lassen Sie uns nun über die Drittelregel sprechen. Es unterteilt Ihr Design in neun gleiche Teile und hilft Ihnen so, eine ausgewogene Komposition zu erstellen Schauen Sie sich zum Beispiel dieses Bild an. Wenn das Motiv außerhalb der Mitte platziert wird, werden sowohl das Modell als auch der Hintergrund hervorgehoben, wodurch das Bild dynamischer wird. Die meisten Designs folgen dieser Regel , weil sie den Blick des Betrachters auf natürliche Weise lenkt. Aber manchmal kann es einfach effektiv sein, sie zu brechen. Ich meine, am Ende des Tages zu experimentieren ist der Schlüssel. Außerdem sind dies die Websites, die sich in Ihrer Karriere als Grafikdesigner oder URUX-Designer als nützlich erweisen werden in Ihrer Karriere als Grafikdesigner oder URUX-Designer als nützlich erweisen Grafikdesigner oder URUX-Designer als Sei es für Symbole oder Bilder, sie sind alle lizenzfrei Bleiben Sie dran und wir werden uns ansehen, wie Layout und Komposition all diese Elemente zu fantastischen Designs zusammenführen 5. Layout und Komposition: Layout und Komposition sind entscheidend für das Design. Sie sorgen durch fünf Hauptprinzipien für Struktur und Klarheit : Nähe, Leerraum, Ausrichtung, Kontrast, Hierarchie und Wiederholung Lassen Sie uns sie aufschlüsseln. Bei Nähe geht es darum, verwandte Elemente zu gruppieren , um den Inhalt klarer und verständlicher zu machen klarer und verständlicher zu Nehmen wir zum Beispiel diesen Lebenslauf. Details wie Ausbildung, Erfahrung und Fähigkeiten sind übersichtlich gruppiert Wir können dem leicht folgen. Alles ist an seinem Platz, sodass es sehr gut lesbar ist. Schauen Sie sich jetzt diese Website namens Slice an. Sie können sehen, wie Text und Grafiken gruppiert sind. Text auf der rechten Seite, Grafiken auf der linken Seite, alle verwandten Elemente liegen nahe beieinander, wodurch ein Gefühl der Nähe entsteht. Das Gleiche gilt für die Karten zur automatischen Kontozahlung und zur Ausgabenanalyse Obwohl die Designs unterschiedlich sind, sind sie so gruppiert, dass sie ein einziges Thema vermitteln Als nächstes kommt der weiße Raum, auch bekannt als negativer Raum. Hier geht es darum, leeren Raum zu nutzen, um Unordnung zu reduzieren und die Übersichtlichkeit zu verbessern. Stellen Sie sich das so schon einmal diese minimalistischen Bilder gesehen bei denen nur zwei Farben verwendet werden, aber Sie sehen deutlich zwei Männer, die sich gegenüberstehen , oder einen Schlüssel oder Bären, die sich umarmen Das ist die Stärke von Weißraum im Design. Wir machen komplexe Grafiken einfach und übersichtlich. Auf die Ausrichtung, wo alles zusammenpasst. Schauen Sie sich diese Kreditkarten-Website namens OneCard an. Sie werden feststellen, dass Text links und Grafiken rechts ausgerichtet links und Grafiken Auch hier werden Nähe und Leerraum verwendet. Kannst du sie bemerken? ob links, rechts oder mittig, Ausrichtung sorgt dafür, dass alles organisiert und optisch ansprechend ist. Lassen Sie uns nun in Figma eintauchen, um die Ausrichtung anhand einer praktischen Aktivität zu untersuchen Hier sind ein paar Formen, und wir werden sie an den Rändern dieses Rahmens ausrichten an den Rändern dieses Rahmens Aber bevor wir das tun, lassen Sie uns zunächst mit einer Designdatei in Figma Fahren Sie fort und erstellen Sie Ihre neue Designdatei. Stellen Sie sicher, dass Sie Ihrer Designdatei einen Namen geben. Ich werde diese Datei als mein erstes Figma-Projekt bezeichnen. Jetzt werde ich auch diese Seiten umbenennen. Auf der ersten Seite werden die Grundlagen der Ausrichtung behandelt. Jetzt füge ich die Grundlagen der Ausrichtung ein, die ich für Sie erledigt habe, indem ich einfach auf Strg C, Strg V geklickt habe, oder ich könnte einfach mit der rechten Maustaste klicken und kopieren Einfügen. Fangen wir jetzt an. ersten Form richte ich sie links nach oben rechts aus und diese nach oben in der Mitte. Diese Werkzeuge auf der rechten Seite sind sehr praktisch für Ausrichtungszwecke. Kommen wir zu den Dreiecken. Dieses zur linken Mitte, das letzte Dreieck zur rechten Mitte, und das mittlere bleibt in der Mitte Nun zu den Kreisen. Erster nach links unten, letzter Kreis nach rechts unten und der mittlere Kreis nach unten in der Mitte. Das war's für diese Aktivität. Lassen Sie uns jetzt etwas über Kontrast lernen. Kontrast ist der Schlüssel, um Elemente hervorzuheben, Aufmerksamkeit zu erregen und zu zeigen, worauf es beim Design ankommt. Kontrast kann über Erfolg oder Misserfolg Ihres Designs entscheiden Wir müssen ihn mit Bedacht einsetzen Nehmen wir Cred als Beispiel. Sie verlassen sich stark auf Schwarz und Weiß. Warum? Weil es eine elegante, minimalistische Atmosphäre , die Raffinesse und Einfachheit widerspiegelt und seinem Premium-Markenimage passt Ehrlich gesagt geht es darum, eine starke visuelle Wirkung zu erzielen, ohne den Benutzer zu überfordern Um den Kontrast zu überprüfen, haben wir Tools wie den Adobe Contrast Checker Es hilft sicherzustellen, dass Ihr Design barrierefrei ist , indem es eine Vorschau von normalem Text, großem Text und grafischen Elementen anzeigt Ich empfehle, zwei kontrastierende Farben zu wählen , die alle drei Tests bestehen normaler Text, großer Text und grafische Elemente Wenn sie nicht bestehen, belasten sie Augen Ihres Benutzers und vergessen Sie nicht, die Farbenblindheit zu überprüfen Studien zufolge sind weltweit einer von 12 Männern und eine von 200 Frauen farbenblind Verwenden Sie den Schalter in der Kontrastprüfung, um Farbenblindheit zu simulieren Dadurch wird sichergestellt, dass Ihr Design für alle verständlich ist. Hier sind einige Beispiele für guten und schlechten Kontrast, damit Sie den Unterschied erkennen können. Lassen Sie uns nun über Hierarchie sprechen. Stellen Sie sich Hierarchie im Design wie eine Befehlskette am Arbeitsplatz vor. Als Neuling zeigen Sie dem Kunden Ihre Arbeit nicht sofort. Zuerst geht es an Ihren Teamleiter, dann an den Manager und schließlich, nach mehreren Genehmigungen, an den Kunden Das gleiche Konzept gilt für Design. Hierarchie führt Benutzer durch Ihre Inhalte und betont dabei, was am wichtigsten ist Nehmen Sie wieder Vertrauen in die Hand. Beachten Sie die Überschriften groß und fett sind, während der Haupttext viel kleiner ist Das ist Hierarchie in Aktion. Es sagt dir, wo du zuerst suchen musst. Ich hab's. Okay. Gehen wir jetzt zur Wiederholung Wiederholung sorgt für Konsistenz und stärkt die Identität Ihres Designs Aus diesem Grund halten wir uns während des gesamten Projekts an eine definierte Farbpalette, Schriftstile und Komponenten Sei es auch dann, wenn das Projekt etwa 40 Webseiten hat. Schauen Sie sich zum Beispiel Eudemi oder Skillshare an, deren Kurskarten sich im Layout so oft wiederholen, was die Designstruktur und Lesbarkeit verstärkt Denn am Ende des Tages möchten Sie die Nutzer dazu bewegen, sich für die Kurse anzumelden, anstatt das Design-Layout von Udemi oder Skillshare zu sehen von Udemi Damit haben wir uns mit dem Layout und der Zusammensetzung befasst . Als nächstes kommen Schriften und Typografie. Wir sehen uns im nächsten Video. 6. Nächstes Video – Nächster Mittwoch; Bleiben Sie dran: Hey, Leute, nur eine kurze Vorwarnung. Mein nächstes Video erscheint nächsten Mittwoch. Aber wenn Sie nicht warten möchten, nehmen Sie an meinen interaktiven Online-Kursen für Live-Präsenzsitzungen mit Feedback in Echtzeit teil. Für weitere Informationen kontaktieren Sie meinen Manager über Whatsapp über den Link in der Biografie oder besuchen Sie Mare Purves Punkt Wir sehen uns in der nächsten Klasse oder im nächsten Video. Tata