Einführung in das UI-Design: Grundprinzipien des UI-Designs für UX/UI-Designer:innen (+Figma Design Übung)

1. Promo: Heute werden wir mehr über die Prinzipien des UI-Designs lernen. Wenn wir uns andere Benutzeroberflächendesigns ansehen, können wir normalerweise feststellen, welches Design besser funktioniert. Aber wenn du anfängst alleine zu arbeiten, ist es plötzlich nicht mehr so einfach. Ich zeige Ihnen, was den Unterschied ausmacht, und gemeinsam werden wir uns mit folgendem befassen. Visuelle Hierarchie und warum ist dieser Schlüssel zu allem. So erstellen Sie mit Farbe, Größe und Form ein System mit besonderem Augenmerk auf Typografie und Größe. Wir werden lernen, warum Einfachheit immer gewinnt. Warum Whitespace ein geheimer Superheld ist und was Gitter und Abstandssysteme für uns tun können. Ich zeige Ihnen , wie Sie darauf aufmerksam machen können, wo Sie es wirklich brauchen und warum es so wichtig ist , etwas Emotionen für den Erfolg hinzuzufügen. Wir werden diesen Kurs abschließen, indem wir unsere eigene Coworking-Website aus einem Drahtgitter mit all unseren neu erlernten Fähigkeiten entwerfen unsere eigene Coworking-Website aus . Dieser Kurs ist für Sie, wenn Sie ein absoluter Anfänger oder ein erfahrener Designer und Ihre UI-Fähigkeiten verbessern möchten. Dies ist ein Kurs von moonlearning.io. 2. Entformungs: Was ist UX/UI-Design?: Bitte beachten Sie, dass es sich um einen zweiteiligen Kurs handelt, sodass Sie möglicherweise entweder den Teil über UX-Prinzipien oder den Teil über die UI-Prinzipien beobachten . Im Idealfall kombinierst du die beiden. Auf jeden Fall möchte ich sicherstellen, dass Sie über die beiden verschiedenen Begriffe im Klaren sind und was es bedeutet, sie zu kombinieren. Sobald Sie anfangen, tiefer in die Welt der UX, UI einzutauchen, werden Sie feststellen, dass es viel Lärm und Diskussionen über diese Begriffe gibt. Was genau sie beinhalten, ob UX und UI, und UI sollten in einem Begriff kombiniert werden oder nicht. Lassen Sie mich das aus meiner Sicht und Erfahrung beleuchten . Zweifellos ist UX Design der Ort, an dem Sie die Reise beginnen werden. Was beinhaltet das UX-Design? Kurz gesagt, Sie werden versuchen, allgemeine Muster, Verhalten und Erwartungen zu verstehen . All dies, um eine Gesamtstruktur und Reihenfolge der Funktionsweise des Produkts zu schaffen. Als Ergebnis hätten Sie normalerweise ein Skelett und eine Form von Wireframes und Flussdiagrammen, die ein Produkt oder Feature skizzieren , das Sie vorschlagen. Eine weitere sehr wichtige Aufgabe des UX-Designs ist das Testen und Iterieren während des gesamten Lebenszyklus eines Produkts. Es gibt nie fertige Online-Produkte. Während die Benutzererfahrung, wie der Name sagt, versucht, die Gesamterfahrung des Benutzers zu verbessern, befasst sich das Design der Benutzeroberfläche mit den tatsächlichen Layoutelementen. Jetzt werden das zuvor entworfene Flussdiagramm und die Wireframes lebendig. Ein guter UI-Designer hat normalerweise eine hervorragende Vorstellung davon was während des UX-Prozesses passiert, und umgekehrt. Während des UI-Prozesses definieren Sie dann Styleguides, Farbe, Typografie, Komponenten und das allgemeine Layout für alle responsiven Designs. Sie werden höchstwahrscheinlich einen Prototyp erstellen , der getestet wird, wo Sie wieder auf das UX-Design verlinken. So wie wir Hand in Hand von UX zu UI arbeiten, müssen Sie dasselbe von der Benutzeroberfläche bis zur Entwicklung tun. Wenn es um die Entwicklung geht, hören Sie von zwei Hauptteilen. Front-End-Entwicklung, bei der CSS und HTML, das sogenannte Markup geschrieben wird. Hier wird das Interface erstellt , das wir sehen. Das ist es, was uns als UI-Designer interessiert. Dann gibt es das sogenannte Back-End. Hier wird der Code geschrieben. Das könnte JavaScript, Java, Python oder jede andere Sprache sein. Es stört uns als Designer nicht wirklich. Hier passiert die ganze Logik hinter den Kulissen. Wir UI-Designer haben selten viel damit zu tun. Front-End und Back-End sind offensichtlich verbunden, und es könnte Frameworks geben, die sich mit Front-End wie React JS befassen . Aber all das kann sicher dem Entwicklungsteam überlassen werden . Sie müssen sich nicht selbst programmieren. Sie sollten jedoch technische Anforderungen und Grundprinzipien des Front-End-Designs als UI-Designer verstehen und Grundprinzipien des . Dies hilft Ihnen dabei, Ihre Dateien und Designs richtig einzurichten . Jetzt, in einem großen Unternehmen oder einem geschäftigen Projekt, Sie sich möglicherweise nur mit dem UI-Design. Du richtest vielleicht einfach Designs in Figma ein, und das war's. Sie werden jedoch immer noch Überschneidungen sowohl mit UX-Design als auch mit der Entwicklung und müssen Ihre Grundlagen kennen. Möglicherweise arbeiten Sie auch nur als UX-Designer. In diesem Fall werden Sie höchstwahrscheinlich keine Designarbeiten machen. Aber Sie werden mit Recherchen, Strategien und Tests und der Definition neuer Funktionen beschäftigt sein . Sie müssen sich jedoch immer noch darüber im Klaren sein, wie sich Entscheidungen im Interface-Design auf die Benutzererfahrung auswirken und beeinflussen werden . Wenn Sie in tiefer Benutzerforschung arbeiten, tun Sie das vielleicht tatsächlich, aber normalerweise haben Sie so viel Glück und sagen ab und zu einem Designer Hallo. In einigen Fällen, insbesondere in kleineren Unternehmen oder freiberuflichen Projekten, können Sie jedoch insbesondere in kleineren Unternehmen oder freiberuflichen Projekten, viele Hüte tragen. Wenn wir über UX, UI-Design sprechen, ist es normalerweise dieser Bereich, den Sie hier hervorgehoben sehen. Sie beginnen wahrscheinlich mit einigen Recherchen, Einrichten von Personas und dem Einrichten eigener Wireframes. Sie übersetzen diese Wireframes dann in Design und geben sie an die Entwicklung weiter. Die meisten UX- und UI-Designer verlieren in der Regel einen Teil des vertieften Teils des UX-Designs. Das stimmt, aber normalerweise keine große Sache bei unkomplizierten kleineren Projekten. Dies ist auch der Bereich, mit dem ich mich während dieser beiden Kurse beschäftigen werde . Bitte beachten Sie, dass die UX-Recherche eingehend kein Teil dieses Kurses ist. Es stimmt, dass in einigen Stellenausschreibungen der Begriff UX und UI oft verwirrt sind. Möglicherweise wird UX Design beworben, aber sie bitten Sie , alles einzurichten, von Wireframes bis zur Fertigstellung von Handle-Dateien. Wenn Sie jemals Zweifel haben, zeichnen Sie einfach dieses einfache Diagramm hier auf ein Blatt Papier und zeigen Sie Ihrem potenziellen Kunden oder Mitarbeiter, und zeigen Sie Ihrem potenziellen Kunden oder wo Sie tätig sind, und stellen Sie sicher, dass dies der Bereich ist, nach dem er auch sucht und nicht nur ein Schlagwort, das sie benutzten. Seien wir auch ehrlich, es ist normalerweise kein einfacher Prozess bei dem Dinge weitergegeben werden. Auch in den meisten Unternehmen beabsichtigen sie nicht einmal, dass es so ist. Es wird immer viel Hin und Her und viel Diskussion. Das ist eigentlich eine gute Sache, denn nur wenn UX, UI und Entwicklung Hand in Hand arbeiten, wirklich großartige Produkte lebendig. Hören Sie nicht auf die Pförtner, finden Sie Ihre Leidenschaft und genießen Sie die Überschneidung und lernen Sie aus verschiedenen Bereichen des digitalen Designs. 3. Hallo und ein Wort zur Gestalttheorie: Heute werden wir uns die wichtigsten Prinzipien des UI-Designs ansehen um Hierarchie und Harmonie in unseren Entwürfen zu schaffen. Die Prinzipien, die ich Ihnen vorstellen werde , basieren hauptsächlich auf der berühmten Gestalttheorie und einigen relevanten Extras. Aber fangen wir mit dem Kern von allem an. Was ist die Gestalttheorie und warum ist sie noch so viele Jahre später relevant? Gestaltpsychologie wurde Anfang des 20. Jahrhunderts in Deutschland und Österreich von Max Wertheimer, Kurt Koffka, Wolfgang Kohler gegründet. Gestalt ist ein deutsches Wort und bedeutet so viel wie Form oder Form. Als Verb würde gestalten gestalten bedeuten zu entwerfen. Kurz gesagt, was die Gestalttheorie sagt, ist, dass wir ganze Muster und nicht einzelne Komponenten wahrnehmen. wurde eine Reihe von Regeln darüber festgelegt , wie wir diese Muster wahrnehmen. Diese Regeln sind später wirklich statisch, zum Beispiel in den 90ern, einige weitere wurden von anderen Psychologen hinzugefügt. Zu der Zeit, als die Gestalttheorie dokumentiert wurde war UX UI noch nicht wirklich eine Sache. Das ist wirklich wichtig zu verstehen. Gestalttheorie ist kein Trend, sondern die Grundlage dafür, wie unser Verstand Dinge liest und interpretiert. Daher ist es der Kern des UI-Designs. Sobald wir diese Regeln verstanden haben wie das menschliche Gehirn Muster interpretiert, können wir mit ihnen spielen, um unser Design zu erstellen und zu strukturieren. Die Prinzipien, die ich Ihnen vorstellen werde , basieren hauptsächlich auf Gestalt, aber es wurden auch einige andere relevante Themen und Erkenntnisse hinzugefügt , die für das UI-Design spezifisch sind. Wir werden uns mit den folgenden Aspekten befassen, um Hierarchie und Harmonie in unserem Layout zu schaffen. Der ästhetische Usability-Effekt und warum wir uns überhaupt mit Design beschäftigen. Was ist eigentlich die visuelle Hierarchie? Das Gesetz von Pragnanz und warum Einfachheit entscheidend ist. Das Gesetz der Ähnlichkeit, Farbe, Größe und Form und die Rolle, die sie in unserem UI-Design spielen. Wir werden uns den Text genauer ansehen und die Zielgröße berühren und wie dies im Design eingerichtet wird. Wir werden über das Gesetz der Nähe sprechen. Hier werden wir uns mit Abstandssystemen und Gittersystemen befassen und warum es so wichtig ist , sie zu verwenden und wie man sie benutzt. Das Gesetz der Gemeinsamen Region. Wir werden Abschnitte erstellen und ein wenig über Leerzeichen und sanfte Abstände in unserem Layout sprechen . Der unterhaltsame Rest des Effekts. Dies ist wirklich wichtig , um in Ihrem Design darauf aufmerksam zu machen, wo Sie es tatsächlich wollen und benötigen. Das Gesetz des gemeinsamen Schicksals. Dies ist sehr wichtig bei der Interaktion mit dem Benutzer zur Verhaltensprognose. Zum Abschluss werden wir darüber sprechen, Ihrem Design etwas Emotionen hinzuzufügen . 4. Ästhetische Usability – Warum sogar die Sorge mit Design?: Der ästhetische Usability Effekt besagt im Grunde, dass Benutzer, wenn sie eine Schnittstelle optisch ansprechend finden, davon ausgehen, dass das Produkt brauchbarer ist. Mit anderen Worten, wenn es besser aussieht, denken die Leute, dass es besser funktioniert. Dies ist wirklich eine Entscheidung, die wir in Millisekunden treffen. Jetzt ist dies kein Freiticket, aber es ist im Grunde ein Vertrauensbonus , den Sie erhalten können, und stellen Sie dann sicher, dass Sie es sichern. Dies ist auch der Grund, warum es nicht ausreicht, einfach Bilder einzufärben und zu gut gestalteten Drahtrahmen hinzuzufügen . Hier haben wir ein Beispiel, das Produkt auf der linken und rechten Seite in Inhalt und Funktionen genau gleich, aber es bekommt ein ganz anderes Gefühl von Komfort und Vertrauen. Der ästhetische Usability-Effekt zeigt auch , dass Menschen kleinere Fehler und Probleme im Umgang mit einem Design toleranter sind kleinere Fehler und Probleme im Umgang mit , das sie ästhetisch ansprechend finden. Beachten Sie, dass wir nur hier über kleinere Probleme sprechen, aber Sie müssen sich bewusst sein was für Sie allgemein positiv klingt und Ihr Endprodukt tatsächlich eine Hürde sein kann tatsächlich eine Hürde sein Usability-Tests und etwas, das Sie in Forschungs - und Explorationsphasen beachten sollten. Was heißt das für uns? Auch wenn die Benutzerfreundlichkeit unser Hauptaugenmerk ist, muss unser UI-Design immer noch gut aussehen, um den Benutzer zum Einstieg zu bringen. Es ist der erste Eindruck und macht sie eher bereit, unser Produkt in toleranteren kleinen Schwierigkeiten auszuprobieren , daher müssen UX und UI Hand in Hand gehen, um ein wirklich erfolgreiches Produkt zu erhalten. Wie wäre es, den ästhetischen Usability-Effekt beim Testen und Recherchen im Auge zu behalten ? Ihre Testbenutzer und Sie werden wahrscheinlich voreingenommen reagieren, die Meinung, dass etwas einfach zu bedienen ist, ist nicht dasselbe , wie es tatsächlich einfach zu bedienen ist. Deshalb ist es so wichtig, zuerst die Informationen und Funktionen zu entwerfen, die Sie benötigen, wie in einem Drahtgitter, Architekturflüssen usw., also arbeiten Ihre UX im Grunde genommen alle Ihre UX. Darauf aufbauend putzen Sie Ihr Design für Ihre Zielgruppe ansprechende und ästhetische Weise und nicht umgekehrt. Darüber hinaus können Sie oder besser gesagt, sollten Sie dann natürlich testen und iterieren, aber stellen Sie sicher, dass Sie mit der Foundation beginnen und nicht mit dem Make-up. Die versicherte Ästhetik ist Mittel zum Zweck, aber nicht um das Ziel zu beenden. Lasst uns zusammenfassen. Wenn es besser aussieht, denken die Leute normalerweise, dass es besser funktioniert. Benutzer sind toleranter; Stress auf kleinere, nicht größere Fehler, wenn es um ein ästhetisch ansprechendes Design geht. Dies ist im Allgemeinen eine großartige Sache, kann aber auch zu verzerrten Ergebnissen bei Usability-Tests und -forschungen führen , also seien Sie sich dessen bewusst. 5. Was ist Visuelle Hierarchie?: Was macht den Unterschied im Design aus? Was ist das Geheimnis hinter einer perfekten Verteilung von Raum, Größe und Kontrast, die uns so erfreulich erscheint? Der Kern von allem ist eine funktionierende visuelle Hierarchie. visuelle Hierarchie ist eine Methode zur Organisation von Designelementen, um eine Reihenfolge von Bedeutung zu kommunizieren. Wenn Sie ein Projekt starten, werden Sie höchstwahrscheinlich mit wichtigen Informationen bombardiert , die kommuniziert werden müssen. Die Marke, ein Preis, das Logo, das Produkt, die Kopie, die Testimonials glücklicher Benutzer und so weiter. Wenn Sie sie weiter hinzufügen, wird sich Ihre Seite ziemlich überladen anfühlen. Das Problem ist, dass auf diese Weise alles auf Ihrer Seite Aufmerksamkeit des Benutzers konkurriert. Benutze einen kleinen Trick. Stellen Sie sich vor, dass alle Elemente auf der Seite entsprechend der Bedeutung sprechen oder schreien , die Sie ihnen gegeben haben. In diesem Beispiel wird dies wahrscheinlich ziemlich unangenehm klingen und ziemlich überwältigend sein. Anstatt einen Kampf der zufälligen Aufmerksamkeit zu schaffen, können Sie mit der visuellen Hierarchie alle Informationen hinzufügen , aber so, dass sie eine friedliche Grundlage schafft, die leicht verdaulich ist und Ihre Aufmerksamkeit auf die Highlights. Schauen wir uns einige Beispiele aus der realen Welt an. Hier ist ein Beispiel für WIX , das ein Website-Builder ist. Wie üblich habe ich überhaupt keine Beziehung zu diesem Unternehmen. Ich zeige dir das nur, weil ich denke, dass es eine großartige Hierarchie hat. Beachten Sie nun, wie die Hierarchie hier aufgebaut wird. Wir beginnen mit einer großen Hauptüberschrift, unserem Alter von 1 Jahren. Es gibt etwas Kopiertext, der kleiner ist und Sie werden wahrscheinlich nicht lesen. Dann haben Sie hier den Aufruf zum Handeln. Beachten Sie, wie das hervorsteht. Dies ist wahrscheinlich das wichtigste Element auf dieser Seite, obwohl es klein ist, verwendet es die Highlight-Farbe. Dies ist der einzige Punkt , an dem wir die Hervorhebungsfarbe auf dieser ersten Seite der Seite verwenden . Diese sogenannte Helden-Sektion. Natürlich haben wir ein paar Bilder. Das ist wirklich, um uns in Stimmung zu bringen, das Produkt zu zeigen. Wenn wir nach unten scrollen, können Sie sehen , dass sich nicht nur die Farbe ändert. Dies zeigt uns ganz klar, dass dies ein Abschnitt ist und wir hier einen neuen Abschnitt betreten. Aber schauen Sie sich auch die Hauptüberschrift der Topographie H1 an. Dann ist das wahrscheinlich H2. Sie können auch sehen, dass diese auf dem gleichen Niveau von Bedeutung sind . Dann können Sie hier sehen, dass ich weitere Informationen hinzufüge , aber es geht in der Hierarchie nach unten. wir weiter nach unten scrollen, können Sie sehen, dass sie uns jetzt die Vorlagen zeigen und bemerken, wie keine dieser Vorlagen hervorsteht. Es gibt kein Sonderangebot, nichts, was uns wirklich auffallen lässt. Das ist alles das Gleiche. Dies ist eine Sammlung von Vorlagen. Sie können auf der ganzen Seite wirklich sehen, wie diese Hierarchie funktioniert. Wenn wir zum Beispiel weiter unten sind, können Sie immer noch sehen, dass es sich einen H2-Kopiertext und einen Aufruf zum Handeln handelt. Selbst wenn wir hier auf eine andere Unterseite gehen, gehen wir zu der ersten, die wir finden. Sie können das wieder sehen, wir haben einen Heldenbereich und Sie können die Hauptüberschrift, einen Einführungstext, Call to Action und Bilder sehen . Wenn Sie dann nach unten scrollen, können Sie sehen, wie gut es funktioniert. Auch hier haben wir Hauptüberschriften, Unterüberschriften, und es ist alles ein wirklich großartiges System, das wir durchsuchen können. Lasst uns zusammenfassen. Die visuelle Hierarchie hilft dabei, Elemente zu organisieren, um eine Reihenfolge von Bedeutung zu kommunizieren. Es lenkt die Aufmerksamkeit eines Benutzers auf Ihrer Seite. Du kannst das wirklich so steuern, wie du es willst und brauchst. Es ist optisch viel erfreulicher. Es hilft, das Scannen und Verstehen zu erleichtern. Sie können die Aufmerksamkeit auf die Highlights lenken, die Sie wirklich kommunizieren möchten. 6. Gesetz von Prägnanz Einfachheit ist wichtig!: Das Gesetz von Pragnanz oder manchmal auch als Gesetz der Einfachheit bezeichnet , besagt , dass Formen mit einer einprägsamen und einfachen Struktur bevorzugt einer einprägsamen und einfachen Struktur um eine Überwältigung zu vermeiden. Unsere Augen werden komplexe Formen in einfache zerlegen. Untersuchungen zeigen auch, dass Menschen besser in der Verarbeitung sind und sich damit an einfache Formen erinnern. Ihr Auge ist verstreut und wird weniger erfreulich sein , weil unser Verstand ständig versucht, es zu organisieren. Wenn Sie keinen guten Grund für ausgefallene Formen haben, halten Sie sich an klare Linien und einfache Formen und Layout. Wie Sie auf diese Weise sehen können, ist es viel einfacher, alle Informationen darüber zu verarbeiten , was genau auf dieser Seite passiert. Es ist eine Win-Win-Situation, weil es Ihr Leben so viel einfacher macht , wenn es um die Programmierung geht, und wissen, dass einfache Formen ein Design nicht langweilig machen. Sie können dynamisch mit verschiedenen Größen verwenden, indem Sie diese verschiedenen Formen, Farben und Abstände verwenden. Schauen wir uns ein Beispiel an. Diese Seite besteht so ziemlich aus einer Form, nämlich einem Rechteck mit abgerundeten Ecken. Wie Sie sehen können, ist es nicht langweilig, aber es ist sehr klar, sehr einfach zu navigieren und zu erfassen, und es gibt viele Möglichkeiten, mit diesen einfachen Formen zu spielen. Sie benutzen Oberschenkel, sie verwenden Farbe und sie verwenden bestimmte Gefühle von Bildern in Schatten und spielen mit der Topographie, um dieses Layout zum Leben zu erwecken. Wie Sie sehen können, können wir unserem Geist viel kognitive Belastung nehmen unserem Geist viel kognitive Belastung damit beschäftigt sein wird , komplexe Formen sonst in einfache zu zerlegen die damit beschäftigt sein wird , komplexe Formen sonst in einfache zu zerlegen. Lasst uns zusammenfassen. Das menschliche Auge vereinfacht komplexe Formen in einfache einheitliche Formen. Einfache Formen führen zu einer geringeren kognitiven Belastung. Versuchen Sie daher, Formulare mit einer einprägsamen und einfachen Struktur zu verwenden einer einprägsamen und einfachen Struktur , um den Benutzer nicht zu überwältigen. 7. Recht der Ähnlichkeit – Farbe, Größe und Form: Das Gesetz der Ähnlichkeit ist eines der ursprünglichen Gestaltprinzipien wenn es um die Gruppierung geht. Es besagt im Grunde, dass Elemente, die optisch ähnlich sind , als verwandt wahrgenommen werden. Ihre wichtigsten Werkzeuge, um dieses Zugehörigkeitsgefühl zu erzeugen , sind Farbe, Größe und Form. Beachten Sie, dass die Bestellung, die ich Ihnen vorlege, nicht zufällig ist. Farbe ist der stärkste Kommunikator, gefolgt von Größe und dann Form. Sie können sie natürlich kombinieren. Lassen Sie mich Ihnen hier dieses kleine Beispiel zeigen, wie mächtig diese kleinen Änderungen wirklich sein können. Wie bei allem in der UX UI ist der Schlüssel dazu, einen klaren Styleguide zu haben , wenn Sie bestimmte Regeln festlegen. Für Farbe haben Sie beispielsweise eine festgelegte Palette und definieren dann Farben, haben Sie beispielsweise eine festgelegte Palette und definieren dann die als Neutrale oder Ihre Hervorhebungsfarben verwendet werden sollen. Es empfiehlt sich, die Hervorhebungsfarbe als Methode zu verwenden , um dem Benutzer zu kommunizieren, was umsetzbar und anklickbar ist. Also würde ich meine Highlight-Farbe nicht zufällig für eine Überschrift verwenden , nur weil ich denke, dass es gut aussehen würde. Aber ich würde es zum Beispiel auf einem anklickbaren Link oder auf einer Schaltfläche verwenden . Diese Form gilt für eine Schaltfläche auf meiner Seite, die sich auch als Teil einer Gruppe identifiziert und daher erwarte ich ein bestimmtes Gruppenverhalten, das für die Typografie gleich ist. Dies ist ein Thema, das immer wieder auftaucht, da es ein sehr wichtiger Teil unseres UI-Designs ist. Sie können Stile für Überschriften festlegen, Text und Schaltflächen kopieren und so weiter. Außerdem haben alle Komponenten auf meiner Seite Regeln für die Verwendung von Farbe, Form und Größe festgelegt. Schauen wir uns ein Beispiel aus dem realen Leben an. Hier sind wir wie gewohnt auf der Spaces-Website , absolut keine Beziehung. Ich zeige dir das nur, weil ich die Benutzeroberfläche mag und denke, dass es sich lohnt, es anzusehen. Gehen wir das nun strategisch durch und schauen uns zuerst die Farbe an. Was haben sie mit Farbe gemacht? Sie wählten dieses senfige Gelb als Highlight-Farbe. Jetzt muss ich ein Wort zu Kontrast und Zugänglichkeit sagen , wenn ich mir das ansehe. Es ist sehr wichtig, dass Sie bei der Auswahl Ihrer Farben den Kontrast und die Zugänglichkeit überprüfen. Sie können Google und eine Kontrastprüfung auswählen oder auch ein Plug-In ausprobieren, z. B. in Figma, um Ihren Kontrast zu überprüfen und der Kontrast muss hoch genug sein. Diese Kontrastprüfer werden Ihnen sagen, ob sie hoch genug ist , um sicherzustellen, dass sie für alle lesbar ist. Dieser wird, um ehrlich zu sein, wahrscheinlich nicht bestehen, weil dieser Senf auf Weiß definitiv nicht für jeden lesbar ist . Sie können sehen, dass ich in meinem Stylesheet für meine Farben dies als Farbe markiere, damit welche Farbe auf welche Farbe passen kann. Wenn Sie mehr über die Barrierefreiheit in Farbe erfahren möchten, habe ich einen vollständigen Kurs über Farbe im UI-Design. Bei dieser Farbe geht es ihnen jedoch wirklich gut, dass sie sie nur für umsetzbare und anklickbare Elemente verwenden . So kannst du alle Knöpfe sehen. Dann kann ich zum Beispiel hier die Büros sehen, wenn sie verfügbar sind, ich kann den Standort sehen. Dies ist ein Link, auf den ich klicken kann, und hier ist dies ein Link, auf den ich klicken kann. Das ist Farbe. Dann wäre der nächste die Größe. Was machen die mit Größe? Wir können sehen, dass es von der ersten Überschrift an eine wirklich klare Hierarchie gibt. Dann können wir sehen, lass mich das hier überprüfen, kleinere Schlagzeilen passieren hier unten. Was passiert mit Shape? In der Form haften sie die meiste Zeit wirklich an sehr einfachen dreieckigen rechteckigen Formen. Aber dann haben wir zum Beispiel auch diese kleinen Icons, die uns die verschiedenen verfügbaren Büros zeigen . Hier siehst du hier, sie haben ein rundes Icon benutzt, damit ich irgendwie sehen kann , dass diese Symbole verwandt sein müssen. Auch Formen wie Effekte, wie wenn ich schwebe, habe ich einen kleinen Schatten. Ich sehe, dass sie verwandt sind. Hier haben wir zum Beispiel Formen als diese gezeichneten Formen. Hier kommen wir auch an verschiedene Orte, die in diesem Stil gezeigt werden , so dass sie eine wirklich schöne und einfache Hierarchie schaffen . Lasst uns zusammenfassen. Visuell werden ähnliche Gegenstände als verwandt wahrgenommen. Sie können dieses Gefühl der Zugehörigkeit mit Farbe, Größe und Form erzeugen. Orientierung, Verhalten und Bewegung können auch eine wichtige Rolle spielen. Verwenden Sie einen Styleguide oder ein Designsystem für einen systematischen und konsistenten Ansatz. 8. Ein wenig mehr zu Text und Tastengröße: Größe ist ein sehr wichtiges Element wenn es um das Erstellen einer Hierarchie geht. Größere Elemente werden als wichtiger wahrgenommen als kleinere Elemente. Dies kann mit Bildern, Texten oder Informationsblöcken verwendet werden. Schauen wir uns ein Beispiel an. Hier haben wir eine Homepage, auf der Bilder und Texte in Ordnung sind und gestylt sind, aber sie sind relativ ähnlich groß. Wenn wir durch die Größenbestimmung eine Hierarchie hinzufügen, erreichen wir so etwas. Sie können sehen, dass dies uns sofort hilft, wichtige Informationen zu scannen und uns zu konzentrieren. Während dies bei Bildern oder Informationsblöcken ziemlich einfach ist , ist Typografie wirklich der Ort, an dem Sie sich konzentrieren müssen. Was bedeutet das und wie können wir das erreichen? Seien Sie sich klar darüber, welche Überschriften, Sublines, Intro oder Kickertext sind. Beachten Sie auch, dass die Wahrnehmung der Größe erreicht werden kann, indem etwas wie ein fett gedruckter Text über einem regulären Text oder Großbuchstaben verwendet wird. Um sicherzustellen, dass Sie mit Ihrer Typografie und Größenbestimmung in Ihrem gesamten Design konsistent und strategisch sind, stellen Sie sicher, dass Sie eine Typskala verwenden, um klare Regeln festzulegen. Um dies zu tun, beginnen wir mit unserer Basisschriftgröße. Dies ist der gebräuchlichste Text, bei dem es sich um Ihren Standardtext handelt oder Text kopieren. Standardmäßig ist dies in fast allen Browsern auf 16 eingestellt. Abhängig von deiner Schrift könntest du theoretisch etwas größer oder kleiner werden. Aber 16 ist im Allgemeinen eine gute Schriftart in Grundgröße, um online zu arbeiten. Normalerweise versuche ich es dabei zu belassen. Auf diese Weise weiß ich, dass ich eine gute Lesbarkeit haben werde, und ich weiß auch, dass meine Basisschriftgröße einem rem entspricht, was dem Root-Wert ist, dem Wert, der im Browser für die Root-Schriftgröße festgelegt ist. Sobald wir uns für unsere Basisschriftgröße entschieden haben, fügen wir die anderen Größen hinzu. Die H1-H3 sind die Überschriften 1-3, und das nennt man HTML. Der H1 ist deine Hauptüberschrift, dein Haupt-Intro. Im Allgemeinen sollten Sie nur ein H1 pro Seite haben. Dies ist auch aus Gründen der Suchmaschinenoptimierung. Aber dann können Sie so viele H2s oder H3s haben , wie Sie benötigen, und Sie könnten sogar mehr hinzufügen. Wenn Sie also mehr Unterüberschriften wünschen, können Sie eine H4 oder ein H5 hinzufügen und so weiter. Die tatsächliche Größe und das Gewicht, das Sie diesem Stil zuweisen , liegt wirklich bei Ihnen. Sie könnten sie ganz nach dem Zufallsprinzip Ihren Bedürfnissen zuweisen. Sie könnten ein Verhältnisskalierungssystem verwenden, oder wie in diesem Beispiel könnten Sie in Schritten von acht vorgehen. Das geht sehr gut mit meinem Acht-Punkte-Abstandssystem. Wichtig ist, dass Ihr H1 der prominenteste ist und dann langsam an Bedeutung und Hierarchie abläuft. Sie können auch andere Dinge wie Links oder Schaltflächen, Beschriftungen und Zitate hinzufügen . Wie viele Sie benötigen, hängt wirklich von Ihrem Design ab. Was Sie hier sehen, wäre wahrscheinlich das absolute Minimum. Sie können Ihre Typenskala wirklich an Ihre Bedürfnisse anpassen. Versuchen Sie jedoch, es so einfach wie möglich zu halten , da es sonst ziemlich chaotisch werden kann. Wenn Sie sich für Ihre Größe entscheiden, müssen Sie beachten, dass Sie für verschiedene Bildschirmgrößen entwerfen. Normalerweise entwerfen wir zuerst etwas, das als Mobile bezeichnet wird. Das bedeutet, dass Sie alle Ihre Größen für den kleinsten Bildschirm festlegen und sich dann dort hocharbeiten, wo Sie Änderungen benötigen. Es gibt verschiedene Strategien, wie Sie Skalen für reaktionsschnelles Design einrichten können. Wenn Sie mehr über Typografie im UI-Design erfahren möchten , habe ich einen ganz separaten Kurs dazu, indem ich verschiedene Einheiten, Größentechniken und Reaktionsfähigkeit durchgehe . Neben der Hierarchie ist es auch wichtig zu bedenken, dass die Größenbestimmung eine wichtige Rolle für die Benutzerfreundlichkeit und Zugänglichkeit spielt. Alle Ihre Touch-Ziele, wie Schaltflächen oder anklickbare Symbole, müssen groß genug sein , damit Benutzer nicht nur mit der Maus, sondern auch mit dem Finger auf einem Tablet klicken nicht nur mit der Maus, können. Es gibt viel Nachforschungen wie groß das wirklich sein sollte. Es kann sich ein wenig unterscheiden, aber nicht signifikant. Ich verwende die Zahl, die durch die Human Interface-Richtlinien von Apple Design angegeben wird, die derzeit besagt, dass 44 Punkte eine ideale Zielgröße sein sollten. Beachten Sie nun, dass es in Ordnung ist, wenn der Artikel selbst etwas kleiner ist. Der wichtige Teil ist der anklickbare Bereich, also sieht man das ganz rechts hier. Stellen Sie einfach sicher , dass der Bereich, in dem sich Ihr Artikel befindet, groß genug ist. Dies ist besonders wichtig, wenn anklickbare Elemente nebeneinander hinzugefügt werden, z. B. eine Reihe von Schaltflächen. Stellen Sie immer sicher, dass genügend Platz zwischen ihnen vorhanden ist , um den Benutzer nicht zu frustrieren, indem versehentlich die falsche Schaltfläche aktivieren. Beachten Sie nun, dass ich hier von Punkt spreche, und wir entwerfen eine UI-Software im sogenannten 1x, bei der 1 Pixel 1 Punkt entspricht. Oft fragen die Leute, wie hoch die physische Größe sein wird , die ich später auf dem Bildschirm sehe? Nun, es ist ein wenig schwierig zu beantworten da Sie Pixel oder Punkte als solche nicht in Zentimeter oder Millimeter übersetzen können . Aber es würde ungefähr etwas etwa einem Zentimeter entsprechen . Das ist wirklich eine gute anklickbare Größe. Aber das ist wirklich nur etwas , um es zu verstehen und es sich beispielsweise auf einem Gerät vorzustellen, wenn Sie testen. Verwenden Sie in Ihrer Designarbeit etwas zwischen 44 und 48 und Sie sollten auf der sicheren Seite sein. Lasst uns zusammenfassen. Größere Elemente werden als wichtiger wahrgenommen als kleinere Elemente. Seien Sie systematisch und haben Sie eine klare Hierarchie. Im Allgemeinen für alles, aber besonders wenn es um Typografie geht. Denken Sie daran, verschiedene Bildschirmgrößen zu berücksichtigen. Stellen Sie sicher, dass Ihre Touch-Ziele groß genug sind. 9. Recht der Nähe – Spacing und Raster: Wenn wir Objekte in unser Layout platzieren, müssen wir das Gesetz der Nähe berücksichtigen. Es bedeutet einfach, dass Objekte in der Nähe zueinander als Gruppe und nicht als einzelne Teile angesehen werden . Dieser Effekt ist eines der ursprünglichen Gestaltprinzipien und es ist großartig, ein Gefühl der Gruppierung und Zugehörigkeit zu erzeugen. Wie können wir das verwenden, wenn es um das UI-Design geht? Wir können damit ähnliche Informationsknotenpunkte gruppieren und unser Layout aufräumen. Das Gesetz der Nähe kann fast überall in Ihrem Design angewendet werden. Wie hier können Sie sehen , dass, obwohl mein Text eine Hierarchie in Bezug auf die Größe angewendet hat, Sie ihn immer noch als zum oberen Teil des Layouts gehören. Während es jetzt Teil der folgenden Bildbibliothek wird . So wie Nähe ein Gefühl der Gruppierung erzeugen kann, können Sie auch das genaue Gegenteil erreichen , indem Sie negative oder Leerzeichen hinzufügen, dies kann sehr praktisch sein. Zum Beispiel zwischen Abschnitten, um eine klare Unterscheidung zu schaffen. Pixel kosten kein Extra, also benutze sie und lass es atmen. Negativer Leerraum oder Leerzeichen machen den Unterschied in einem Design aus. Wie bei allen Gestaltungselementen sollte die Raumnutzung ein systematischer Ansatz sein. Ein System, das Ihrem Design nur Konsistenz verleiht , es aber auch einfacher macht Komponenten nach denselben Regeln später in Ihrem CSS einzurichten. Es gibt zwei Werkzeuge , die die Positionierung und Distanzierung in Ihrem Design, dem Rastersystem und dem Abstandssystem bestimmen die Positionierung und Distanzierung in Ihrem Design, . Jetzt werden die beiden oft verwirrt und es ist wichtig zu verstehen, was jeder von ihnen tut und dass sie die meiste Zeit Hand in Hand arbeiten. Rastersysteme legen die horizontale Verteilung und das breitere Layout fest. Die Note, die Sie verwenden, liegt Ihnen und Ihrem Entwicklungsteam. Sie würden Ihre Gegenstände innerhalb des Rasters platzieren und dann die eingestellte Rinne als horizontalen Abstand verwenden. Für Ihren vertikalen Abstand und für den Abstand innerhalb der Elemente verwenden Sie jedoch ein Abstandssystem. Das Abstandssystem ist im Grunde ein Vielfaches Ihrer Grundgröße, das Sie definieren. In meinem Fall verwende ich gerne und empfehle es dringend, ein Acht-Punkte-Abstandssystem zu verwenden. Meine kleinste Größe und Basisgröße beträgt acht als Distanz, und dann ist alles andere ein Vielfaches von acht. Es gibt viele Vorteile, warum Sie ein Acht-Punkte-Skalierungssystem oder auch ein Vier-Punkte-Skalierungssystem verwenden würden oder auch ein Vier-Punkte-Skalierungssystem , das in letzter Zeit sehr beliebt ist. Diese beiden Abstandssysteme skalieren erstaunlich gut mit der Schriftgröße des Browsers, die normalerweise standardmäßig auf 16 eingestellt ist und ein Vielfaches von vier und acht ist, sowie Symbolen, die Sie normalerweise in 24 oder 48 Pixel Größe finden. Ein weiterer Aspekt ist, dass diese Zahlen beim Export von Assets in andere Auflösungen sehr gut skalieren, da Sie sie skalieren können, aber auch auf beispielsweise 1,5 skalieren können, wenn es um Android geht. Auf diese Weise vermeiden Sie halbe Pixel und Unschärfe. Ich habe einen separaten umfangreichen Kurs über Auflösungs- und Abstandssysteme sowie eine ausführliche Ursache für Netze. Wenn das für Sie neu ist, sollten Sie sich unbedingt etwas ansehen, um ein besseres Verständnis zu erlangen. Lasst uns zusammenfassen. Objekte, die sich in der Nähe zueinander befinden, werden als Gruppe angesehen. Dies ist großartig, um ein Gefühl der Gruppierung und Zugehörigkeit in Ihr Layout zu erzeugen. Whitespace ist König, benutze es. Fügen Sie Abstand zwischen Abschnitten hinzu. Fügen Sie Konsistenz mit dem Raster- und Abstandssystem hinzu. 10. Gesetze der gemeinsamen Region – Abschnitte in deinem Layout: Das Gesetz der gemeinsamen Regionen besagt , dass Elemente mit definierter Region tendenziell als zusammengehörig wahrgenommen werden. Dies war nicht Teil der ursprünglichen Gestalttheorie, wurde aber später von Parma in den 90ern hinzugefügt. Gemeinsame Region ist ein leistungsfähiges Werkzeug , das dem Benutzer eine klare Struktur verleiht, zu dem, was zusammen gehört. Es kann wie eine kleine Layouttechnik erscheinen , um Dinge hervorzuheben, aber es macht einen solchen Unterschied. Gemeinsame Region kann alles sein, von einem Umriss bis zur Vase, subtiler Grauton im Hintergrund, der Ihre Seitenkreuzung entwickelt. Das Erstellen dieser Abschnitte ist ein großartiger Helfer den Benutzer, um nicht überfordert zu werden. Spiel einfach damit und du wirst den Unterschied sehen, den es macht. Schauen wir uns ein Beispiel aus dem realen Leben an. Dies ist die Haferflocken-Seite, wie üblich, keine Beziehung. Ich mag die UX einfach sehr und wollte es dir zeigen. Sie können sehen, dass sie eine sehr subtile graue Hintergrundfarbe und dann im Gegensatz dazu nur die weiße Hintergrundfarbe verwenden sehr subtile graue Hintergrundfarbe und . Sie können sehen, dass dies wirklich schöne Abschnitte erzeugt. Man bekommt eine sehr, sehr großartige Struktur, ohne überhaupt ein Element zu haben, das man bewusst bemerkt. Abgesehen davon, wie vollständige Hintergrundfarbe und das Erstellen von Abschnitten, wird der gemeinsame Bereich auch in kleineren Elementen verwendet, wie Sie hier sehen können, z. B. eine gemeinsame Region und einen Schatten und es zeigt deutlich, dass dies ein zusammengehörender Abschnitt ist. Mal sehen, ob wir in Züge fahren. Sie können sehen, dass es mehr Karten erzeugt. Wann immer ich diese Region habe, dann ist dies ein Thema, diese Themen immer noch in einer anderen gemeinsamen Region liegen , dem Hintergrund hier. Sie können sehen, dass sie sich überschneiden können, aber es ist sehr klar, dass es zusammengehört. Weiter unten. Zum Beispiel haben wir eine Tabelle, und hier können wir auch sehen, dass diese Zeile mit einer gemeinsamen Region hervorgehoben wird, was sehr deutlich macht, dass dies einige Informationen sind, die zusammengehören und relevant für uns. Beachten Sie nun auch, dass es sich nicht unbedingt um einen Farbblock handeln muss. Hier haben wir zum Beispiel nur Linien, aber dies schafft auch eine gemeinsame Region. Dies liegt an dem sogenannten Schließungsgesetz, das auch ein Gestalttheoriegesetz ist. Was es tut, bedeutet, dass unser Gehirn unvollständige Formen vollenden wird, um eine Form zu erzeugen. Sie können beispielsweise hier unten sehen, dass dadurch eine gemeinsame Region entsteht, obwohl es einen offenen Raum in der Form gibt. Wie Sie sehen können, können Sie wirklich damit spielen. Das einzige, worauf Sie achten sollten, ist, es nicht zu überbeanspruchen achten sollten, ist, es nicht zu überbeanspruchen und keine gemeinsamen Regionen ineinander zu verschachteln. Wenn Sie weitere Abschnitte mit inneren gemeinsamen Regionen erstellen möchten , möchte ich Ihnen dieses Beispiel hier zeigen. Sie müssen sich im Grunde einer Art Hierarchie bewusst sein , Sie erstellen sie. Hier können Sie sehen, dass sie diese gemeinsame Region wie diesen äußeren Kasten geschaffen haben, und sie verwendeten einen Schatten und eine gewisse Tiefe, so dass sie sehr prominent und sehr mächtig ist. Dann wollten sie wieder zwei Unterabschnitte innerhalb dieser gemeinsamen Regionen erstellen , und was sie taten, ist, den für die Hauptgruppe verwendeten Effekt nicht wiederzuverwenden, sondern sie verwenden etwas viel Subtileres, wie zum Beispiel ein sanfter Farbwechsel. Du könntest die meiste Zeit auch nur Leerzeichen benutzen, das ist mehr als genug. Weiter hier unten kann man tatsächlich sehen, dass sie diesen Ansatz nicht verwendet haben, was es getan hat, ist, dass sie dieselbe äußere gemeinsame Region und ein Inneres verwenden , sie begannen sich mit einem ähnlichen Ansatz von Linien zu teilen. Sie können sehen, dass es nur ein bisschen überladener wird und es einfach nicht so klar und sauber ist wie das, was sie hier oben gemacht haben. Sie können sehen, dass es ein sehr einfaches, aber sehr leistungsfähiges Konzept ist , das Sie für so ziemlich jedes Design verwenden können . Lasst uns zusammenfassen. Elemente mit einer definierten Region werden tendenziell als zusammengehörig wahrgenommen. Diese einfache Technik ist ideal für die Strukturierung Ihres Layouts. Eine Region kann eine vollständige Hintergrundfarbe oder einen Umriss haben. 11. Von Restorff – Aufmerksamkeit zeichnen, wo du brauchst: Der Von-Restorff-Effekt, auch Isolationseffekt genannt, besagt, dass innerhalb einer Gruppe ähnlicher Elemente, die anders sind, am meisten in Erinnerung bleiben wird. Ein klassisches Beispiel ist eine einer Preistabelle , in der Sie das Angebot hervorheben möchten , das Sie am meisten hervorheben möchten. Was hier passiert, ist, dass alles dem Gesetz der Ähnlichkeit folgt, um zu zeigen, dass es sich um dieselbe Familie handelt und Preisentscheidungen nennt. Dann färben wir einfach in einem dieser Fälle zum Hervorheben. Hier gaben wir ihm einen roten Rand und wir haben den Button hervorgehoben. Durch die Hervorhebung dieser Wahl wird dem Benutzer mehr Aufmerksamkeit geschenkt, hervorgehoben und mit größerer Wahrscheinlichkeit in Erinnerung bleiben. Schauen wir uns einige Beispiele aus dem realen Leben an. Hier haben wir ein Weihnachtsangebot. Sie können sehen, dass Sie, obwohl diese Boxen fast gleich sind, diese Boxen fast gleich sind, dem oberen grünen Feld viel mehr Aufmerksamkeit schenken werden. Dies liegt an der markanten Farbe. Wir haben hier auch eine Vorauswahl und wir haben etwas, das auf ein sehr gutes Preis-Leistungs-Verhältnis hinweist. Ein weiterer Bereich, in dem wir den Isolationseffekt verwenden , ist, wenn wir Rabatte oder etwas Besonderes an einem Produkt anzeigen möchten Rabatte oder etwas Besonderes , das wir in einem Online-Shop verkaufen. Hier können Sie beispielsweise sehen, dass es sich um einen normalen Einkaufswagen handelt , der den Artikel verkauft. Wenn wir einen Rabatt haben, fügen wir hier etwas Rot zum Preis hinzu, automatisch auf dieses Produkt lenkt unsere Aufmerksamkeit automatisch auf dieses Produkt lenkt. Der Von-Restorff-Effekt muss nicht immer etwas mit Preisen oder sehr auffälligen Angeboten zu tun haben. Es kann auch auf sehr subtile Weise verwendet werden wie Sie auf dieser Seite sehen können, wo das Produkt sehr vereinfacht ist. Dann fügen wir einfach ein paar Bilder hinzu, auf denen die Leute es zum Beispiel tragen, oder ein bisschen mehr von einem Stimmungsbild, das die Aufmerksamkeit auf sich zieht. Es kann wirklich etwas Dynamik hinzufügen, wenn Sie eine Reihe ähnlicher Elemente haben und einen oder mehrere davon hervorheben möchten . Lasst uns zusammenfassen. In einer Gruppe ähnlicher Gegenstände wird derjenige, der anders ist, am meisten in Erinnerung bleiben. Dies ist ideal, um auf Ihre Hauptmerkmale aufmerksam zu machen. Die Farbe ist sehr effektiv, aber achten Sie darauf, Probleme mit der Barrierefreiheit zu berücksichtigen. Zum Beispiel Farbenblindheit oder ausreichender Kontrast. 12. Gesetz von allgemeiner Fate – Verhaltensmäßige Vorhersage: Das Gesetz des gemeinsamen Schicksals besagt, dass zwei oder mehr Elemente, die sich auf die gleiche Weise verhalten, als Teil einer Einheit wahrgenommen werden. Es spielt keine Rolle, wie weit Elemente voneinander entfernt sind oder wie unterschiedlich sie aussehen. Wenn sie sich bewegen oder sich zusammen ändern , erscheinen sie als eins. Dies ist besonders wichtig , wenn es darum geht , für die Interaktion mit dem Benutzer zu entwerfen. Ein klassisches Beispiel dafür sind Diashows oder FAQ-Dropdowns. Sobald Sie auf eine klicken und sehen, dass es geöffnet wird, werden Sie wissen, dass sich der Rest der Gruppe genau gleich verhalten wird. Ein weiteres nettes Beispiel ist die Headspace-Website , die dies oft nutzt. Wie üblich, keine Beziehung zum Produkt, ich zeige Ihnen nur großartige UX. Hier sehen Sie zum Beispiel einige Anführungszeichen, und wenn ich klicke, verhalten sie sich genauso und bewegen sich. Weiter unten sehe ich diesen Abschnitt hier, in dem neue Informationen angezeigt werden, wenn ich auf eine Schaltfläche klicke . Ich werde wissen, dass dies wahrscheinlich all diesen Knöpfen hier passieren wird , da sie sich genauso verhalten. Lasst uns zusammenfassen. Zwei oder mehr Elemente, die sich auf die gleiche Weise verhalten, werden als Teil einer Einheit wahrgenommen. Elemente dürfen nicht unbedingt gleich aussehen , noch müssen sie sich in der Nähe befinden. Dies kann als Layouteffekt oder als erweiterte Interaktion verwendet werden. 13. Viszerale Reaktion – Emotion in deinem Design : Es ist wichtig, dass Sie Ihr Produkt nach den gemeinsamen U, Xi-Prinzipien bauen . Es bietet Ihnen eine solide Grundlage und einen soliden Rahmen. Um Ihr Design wirklich hervorzuheben, müssen Sie jedoch eine instinktive Reaktion hervorrufen. viszerale Reaktion bedeutet, dass Sie möchten, dass Ihr Design ein Gefühl erzeugt , das nichts mit Logik zu tun hat und nicht das Ergebnis von Gedanken ist, sondern So sehr Sie sich auch strikt an die Regeln halten können , wenn es um Gestaltungsprinzipien geht, ist dies genau das Gegenteil Es ist schwer vorherzusagen und schwer zu testen, aber es ist im Grunde die Identität Ihrer Marke, die Sie kommunizieren. Das Herz und die Seele. Stell es dir wie eine Person vor. Es ist höchstwahrscheinlich eine Kombination aus der Art und Weise, wie er oder sie geht und spricht, aussieht, es gibt etwas Lustiges oder etwas Cooles. Es ist sehr individuell und auch sehr unterschiedlich, ob es den Leuten gefällt oder nicht. Stellen Sie also sicher, dass Sie Ihre Nutzer und Ihre eigene Marke kennen. Es geht wirklich darum, als Ganzes authentisch zu sein. Schauen wir uns einige Beispiele und verschiedene Möglichkeiten an, um instinktive Reaktionen hervorzurufen . Bilder der einfachste und wichtigste Weg, um Ihren Benutzer wirklich in Ihre Welt hineinzuziehen Dieses Beispiel zeigt sehr gut, wie Sie Bilder in verschiedenen Größen verwenden können , um sie wirklich in das Erlebnis einzubeziehen wirklich in das Erlebnis einzubeziehen So wie hier bekommen wir das Abenteuer und die Temperatur und das ganze Erlebnis fühlt sich wirklich nah Beachten Sie auch, dass sie die Farben Blau und Orange, also warme und kalte, komplementäre Farben, sehr gut verwenden warme und kalte, komplementäre Farben, , um diese Botschaft zu vermitteln. Video ist sogar stärker als das Bild allein. Hier können Sie sehen, dass Video verwendet wird, um wirklich eine Stimmung zu vermitteln, anstatt nur das Produkt zu zeigen. Beachten Sie auch die Farben im Video und wie sich diese auf der gesamten Seite wiederholen. Es dreht sich alles um wirklich sanfte Farben, Beige wie im Kopf, und eine sehr ruhige Atmosphäre. Eine bestimmte Person oder ein bestimmter Charakter zu haben, der Sie durch das Produkt oder die Erfahrung führt , ist auch wirklich großartig, um eine Bindung zum Benutzer aufzubauen. Sie werden das häufig in der persönlichen Entwicklung wie beim Sport sehen . Es könnte die tatsächliche Person sein, aber es könnte auch ein erfundener Charakter sein. Headspace macht da einen wirklich tollen Job und hat kleine Charaktere erfunden , die dich durch die Meditation führen Typografie kann auch eine großartige Möglichkeit sein , ein Gefühl zu vermitteln Normalerweise wirkt es etwas moderner und grafischer, aber das muss nicht unbedingt so sein Es geht auch darum, wie Ihr Text geschrieben ist. Ist es lustig? Ist es poetisch? Wie spricht es mit dem Benutzer? Selbst wenn Sie ein Produkt oder eine Software zeigen, können Sie in der Art und Weise, wie Sie es zeigen, sehr kreativ sein. Es ist wichtig, konsistent zu sein und ein Gefühl zu erzeugen . Lassen Sie uns zusammenfassen. Die viszerale Reaktion ist ein Bauchgefühl, das die Stimmung bestimmt Was oder wer bringt Ihre Marke dazu, Bilder, Videos, Farbkombinationen, Typografie und Tonfall zu verwenden , um diese Stimmung zu erzeugen Das ist die Kirsche auf dem Sahnehäubchen. Stellen Sie sicher, dass es auf einem soliden UxUI-Erlebnis basiert. 14. Downloadmaterial: Vielleicht möchten Sie mit mir zusammenarbeiten, also habe ich einige Dateien vorbereitet, die Sie herunterladen können. In dem Kurs, den Sie belegen, navigieren Sie einfach zu Projekt und Ressourcen und dort finden Sie alle Informationen und den Link, über den Sie das Material herunterladen können. Oder du navigierst zu meinem Profil, wo du auch einen direkten Link zur Download-Seite findest. Auf dieser Seite finden Sie eine Vielzahl von Downloads. Sie können einfach den Kurs auswählen, den Sie gerade belegen, und klicken Sie dann einfach auf „Herunterladen“, damit die Datei automatisch für Sie heruntergeladen wird . Um eine Figma-Datei zum Herunterladen zu öffnen, ist es wichtig, dass Sie ein Figma-Konto haben. Navigieren Sie in Ihrem Konto zu new und klicken Sie auf „Importieren“. Sie können dann eine Datei auswählen , die Sie öffnen möchten. Es kann einen Moment dauern, da sie ziemlich groß sind, aber sobald Sie sie importiert haben, befinden sie sich auf Ihrem Konto und Sie müssen diesen Vorgang nicht wiederholen. Ich arbeite für die meisten meiner Designs mit Google-Schriften. Wenn Sie mit der Figma-App arbeiten, müssen Sie nichts tun. Alle Google-Schriften werden automatisch vorinstalliert. Wenn Sie im Browser mit Figma arbeiten möchten, müssen Sie nur die Schriftart durchsuchen , die Ihnen als fehlt angezeigt wird. Zum Beispiel, Poppins, ich benutze viel und dann kannst du diese Schriftart direkt herunterladen, installiere sie auf deinem Computer und schon kannst du loslegen. Alle Ressourcen sind für bestehende Studierende kostenlos und Sie müssen keine zusätzlichen Informationen eingeben. Sie können natürlich auch eine der anderen Dateien herunterladen , falls Sie interessiert sind. Unter Allgemein füge ich immer alles hinzu , was meiner Meinung nach nützlich sein könnte. Es gibt zum Beispiel eine Bootstrap-Vorlage und dann eine Liste mit Links für Inspirationsbücher und -blöcke, die sich wirklich hervorragend für das UX-UI-Design eignen. Diese Liste der Downloads wächst stetig. Stellen Sie also sicher, dass Sie wiederkommen und von Zeit zu Zeit einen Blick darauf werfen. 15. ÜBUNG --> Figma --> Figma -Funktion: Lassen Sie uns diese ganze Theorie in die Praxis umsetzen. Ich habe eine Figma 5 für dich vorbereitet. Verwenden Sie die Importfunktion, um die Datei zu sehen und wir können loslegen. In dieser Datei finden Sie die Übung auf der ersten Seite. Unsere Übung ist, dass wir einen Entwurf für einen kleinen offenen Co-Working Space einrichten werden . Wir erhalten einen Brief mit allen Informationen zu verfügbaren Materialien wie Bildern und anderen Markenelementen. Wir hatten auch unser imaginäres UX-Team daran gearbeitet und sie gaben uns zunächst einen grundlegenden Drahtrahmen. Sie können jetzt die Prinzipien anwenden, die Sie in diesem Kurs gelernt haben , um Ihr erstes Design einzurichten. Ich fasse sie noch einmal für Sie hier in der Übungsbeschreibung zusammen . Auf der zweiten Seite der Datei finden Sie eine vorgeschlagene Lösung, die ich für Sie vorbereitet habe. Dies ist nur für Sie da, um sich inspirieren und neugierig zu machen, wie man diese Aufgabe angehen könnte. Es gibt keine Lösung wie eine Lösung zu entwerfen. Deiner ist vielleicht genauso gut oder sogar besser als meins. Machen Sie es sich wirklich zu eigen, versuchen Sie, sich an die Prinzipien des Designs zu halten, aber schreiben Sie den Brief neu und erstellen Sie daraus ein ganz neues Projekt für Ihr Portfolio. Du hast jetzt das Sagen. Genieße. 16. Möchtest du UX hinzufügen?: Wenn Sie neugierig sind herauszufinden, wie dieser Drahtgitter aus unserer Übung überhaupt erstellt wurde und was Sie sonst noch tun könnten, um Ihre UX zu verbessern, empfehle ich Ihnen , den ersten Teil dieser UX/UI zu nutzen Intro. Unseren UX-Geschlechtsverkehr finden Sie hier auf Skillshare. Suche einfach nach Mondlernen und du siehst alle Kurse bis jetzt. In diesen Kursen sehen Sie den UX-Kurs hier oben. In diesem Kurs finden Sie alle Prinzipien zum UX/UI-Design. Am Ende eine Übung, in der wir darüber sprechen werden , wie man dieses Drahtgitter erstellt. 17. Vielen Dank!: Gut gemacht, um diesen Kurs zu beenden. Zögern Sie nicht, uns unter moonlearning.io zu kontaktieren, wir sind immer daran interessiert, Ihr Feedback zu hören. Sie würden uns auch einen großen Gefallen tun, wenn Sie sich einfach eine Minute nehmen und hier eine Bewertung abgeben könnten . Wenn Ihnen dieser Kurs gefallen hat, dann achten Sie auch darauf, dass Sie sich unsere zusätzlichen Kurse ansehen. Bei moonlearning.io decken wir alle Themen ab, von den Grundlagen des UX/UI-Designs bis hin zu Figma bis hin zu einigen Code-Grundlagen. Besuchen Sie unsere Website unter moonlearning.io, wo Sie sich auch für unseren Newsletter anmelden können.