 Gut, nachdem wir das mit der Technik einmal aussortiert haben starten wir in unseren ersten deutschsprachigen Vortrag des Tages. Umberto ist Diplom-Designer, Dozent für UI und hat nach vielen Vorträgen auf WordPress Meetups jetzt den Schritt auf die große Bühne beim Worldcam Deutschland gewagt. Er wird uns führen durch die zwölf goldene Designregeln. Ich habe die Folien schon gesehen, ich weiß was auf uns zukommt, ich bin sehr gespannt, was er sagen wird. Wir halten uns gar nicht länger auf, sondern versuchen unseren Rückstell ein bisschen aufzuholen. Umberto, bitte. Guten Morgen. Bin ich laut genug? Ja, können mich alle hören? Moin. Bisschen spielts, 10.12, deutsche Pünktlichkeit, aber ich bin ja auch kein Deutscher, also passt schon. Hi, ich bin der Umberto, Diplom-Designer, also ich durfte noch Diplom studieren vor vielen Jahren. Hi, ich bin der Umberto, Diplom-Designer, gib mir mal das andere Mikro, das scheiße, gib mir mal das andere Mikro. Wo? Mein Signal, kriegst du nicht mehr? Doch, ist doch da. Okay, also, zweieinzig, nochmal, Diplom-Designer, 2008, ich durfte noch Diplom studieren, ich habe Kommunikationsdesign studiert, Schwerpunkt, Grafik, diese ganzen Sachen. Ich bin inzwischen Dozent einer IU International Hochschule, ich unterrichte User-Interface-Design. Das hat auch manchmal mit UX-Design zu tun, aber heute erzähle ich ganz viel über UI-Design. Manchmal mache ich da auch Web-Design, was so paar andere Sachen gibt. Dann habe ich auch noch ein Hauptjob. Ich bin Geschäftsführer und früher war ich frei beruflich unterwegs, der Link abgehen will. Wir machen UI-Design und Package ganz viel. Das benutze ich. Tod? Ich darf nicht, ich muss hier stehen bleiben. Das ist ein Dorf, wenn man der erste Pikal ist. Lass mich hier stehen. Ist gut, ist gut, okay. Wo darf ich stehen? Ton, Ton, Ton. Prima, also, und auch ich nutze WordPress, das ist seit 2010. Es gibt ein Page-Bilder Elementor, den habe ich auch sehr viel genutzt in letzter Zeit, aktuell nicht mehr so oft, aber ich bin immer noch Elementor Germany Community, die zusammen mit einem Mika, die hier vorne sitzt. Und bei World Clean-Up Day, das ist ein NGO, bin wir sehr Creative Leader. Genug über mich? Let's go. Ja, wir haben uns vorbereitet. Kommen wir zur ersten Regel. Sie hat insgesamt 12, ihr wisst, die erste wäre Klarheit und zielgerichtetheit. Das ist auch eigentlich die wichtigste Regel. Wenn ihr euch vorstellt, eure User sind keine Gedankenbläsern. Also, setzt nicht einfach irgendwas voraus, die Business. Also, sagt nicht, ja, das wird ja sich schon so denken können. Und das Gegenteil ist der Fall, eigentlich wollen sie überhaupt nicht nachdenken. Also, macht es so einfach, das geht, die wollen eigentlich überhaupt nicht nachdenken. Das ist eigentlich das Grundprinzip von allem, was wir machen, macht den User so einfach, es geht. Wenn sie auf so eine Selbstzeit gehen, haben sie immer eine Aufgabe. Also, sie wollen irgendwas machen, irgendwas erreichen. Es gibt sehr, sehr viele von diesen Aufgaben, die sie schaffen wollen und sie wollen diese Aufgabe erfüllen. Und macht ihnen so einfach, es geht. Und sie wollen auf den ersten Blick verstehen, was sie sehen und wie sie diese Funktion nutzen können. Macht es ihnen so einfach, wie es irgendwie möglich geht, ihr Ziel zu erreichen. Bei der Benutzerfreundlichkeit geht es um Menschen. Das müssen wir uns immer vor Augen halten, bei einem Design, bei einem technologischem Quatsch. Es geht immer darum, wie sie Dinge verstehen und nutzen und nicht um Technologie. Also, habt ihr mal den User, den Menschen im Blick. Dieses Schlauer, dieses Schlauer Zitat war für uns. Die stellt ich später noch mal vor. Regel, mach Elemente deutlich und gut sichtbar ohne unnötige visuelle Komplexität. Aufgabe, jedes Element sollte immer eine Aufgabe haben. Also, dekorative Elemente sind okay. Aber überlegt immer, wenn ihr eine Seite designt, hat das Element jetzt wirklich eine Aufgabe. Es ist einfach nur Dekoration. Fokussiert euch auf das Wesentliche, identifiziert die Hauptbotschaft und die Funktion des Details. Wenn es in der Hauptbotschaft ist, betone sie auch. Reduziere unnötige oder rein dekorative Elemente. Stellt ihr sicher, dass die Navigation einfach unbenutzerfreundlich ist. Wort klar. Regel 2, Erwartung und Konventionen. Konventionen sind über Einkünfte das, was die Leute erwarten. Da nächste große Regel erfindet, dass Internet muss rollen. Man versucht es auch noch nicht mal. Wir schaffen es. Also, nimmt das, was da ist, als Basis und interpretiert nicht zu viel oder versucht nicht zu viel Innovation da reinzubringen, häufig kann das auch gerne mal schiefgehen. Konventionen sind etabliert. Es sind etablierte Praktiken, Muster und Elemente, die User seit Jahren und vielleicht auch hier Jahrzehnten kennen. Und da sind unsere unausgesprochene Regeln des Userinterfestes. Das hat zur Folge, dass sich eure User einfach schneller zu Recht finden, dass sie nicht nachdenken müssen, dass sie sofort rauskriegen, wo bin ich, was mache ich und was kann ich hier tun. Und da gibt es ein paar gängige Konventionen, wie ist Coin von oben nach unten. In ganz wenigen Auswerb dürfen wir auch mal von links nach rechts, aber in der Regel machen wir das von oben nach unten. Die Navigation hat sich etabliert, machen wir nach oben oder an der Seite, wenn es sehr komplexiert, wenn wir Applikationen haben, wenn wir sehr große Shops haben, dann lieber an der Seite. Das hat sich auch etabliert, sogar seit fast Beginn des Internets, weil die die ja so an der Seite unten... Nee, geht gar nicht. Also werde ich jetzt auch nach unten. Das Logo machen wir eher oben links oder in der Mitte oben rechts, ist aber vom Leselfluss sehr schlecht. Das heißt, wenn der auf die Seite geht, der erste Blick geht immer nach links oben und da wollt ihr eigentlich schon immer die Seite zeigen und das Logo zeigen, wer ist der Hauptsender. Deswegen, also so rein vom Blickfang haben wir immer so ein Z. Packen wir das oben links. Man kann es auch in die Mitte packen, das sieht auch bübsch aus, je nachdem, was wir zeigen wollen, aber so oben rechts ist es eher verschwettet. Eigens, eigentlich ist es ein ganz großes Thema. Eigens haben eine etablierte Bedeutung, viele Ereignisse, wir kennen die und wir sollten sie auch nicht neu interpretieren. Zum Beispiel Suchen im Einkaufswagen, Einstellungen, Abflug Flughafen zum Beispiel, wo da auch der Filter, jeder der versucht irgendwie neue Ereignisse einzuführen für bestimmte etablierte Aktionen, ist da eher irritiert die Leute mehr, als dass er Innovation schafft. Formulare, Formulare sollten wirklich erwartungsgemäß funktionieren. Es gibt sehr fancy Formulare, die mit ganz viel Animationen sind, und klick hier, klick da, klick dort. Seid da eher vorsichtig mit, ist bei so wichtigen Dingen wie Formularen auch her nicht so zu empfehlen. Dazu viel Grafikreinzubring, zu viel Design. Es muss einfach in das Erscheinungsbild passen, aber immer noch der Erwartung entsprechend. Buttons, Buttons, was haben wir schon für 100 von verschiedenen Buttons gesehen, haben eine riesen, wichtige Funktion. Wir haben aber so einen gewissen Stil, wie so ein Button aussieht. Man kann ihn natürlich auch mal rundmachen, oder als Kals, oder als Acht-Eck. Es funktioniert, aber nur in ganz wenigen Ausnahmen, in der Regel ist ein Button so. Also rechnäckig oder maximal-quadratisch, bleibt dabei. Mobilgeräten hat sich der Hamburger-Button etabliert. Man kann auch, nee, eigentlich nicht, nimmt den Hamburger-Button, die verstehen sonst nicht, was sie da klicken können. Das ist eine etablierte Praxis, aber wir sollten dabei bleiben. Es gibt noch viele andere Konventionen und Erwartungen der User. Man kann sich auch mal selber Gedanken machen, wer mal so ein Gesamtprojekt hat, verstehen die Leute das. Man sollte das auch immer hinterfragen, ist das wirklich für jeden sichtbar, für jeden auch entsprechend verständlich? Regel 3. Konsistenz. Konsistenz ist ein großes, wieder ein wichtiges Thema. Macht einheitlich. Das ist das übergeordnete Thema. Bei allen Elementen, die ihr auf der Seite habt, macht sie, so gut es geht, einheitlich. Das bedeutet ihr macht einheitliche Raster und einheitliches Raster und einheitliches Gestaltungs-Raster. Also hier ist es nicht CSS Grid gemeint, sondern im Prinzip das Raster, was unten drunter liegt. Einheitliche Menüs ist wichtig. Schaltflächen, Buttons, Schriftarteln, kommen wir gleich noch ein bisschen tiefer dazu. Schriftgrößen sollten auf jeden Fall einheitlich sein. Je nach Wichtigkeit kommen wir auch gleich dazu. Farbschemata und einheitliche Abständen. Du definierst klare Desigungsrichtlinien. Am besten machst du das auch in einem Style Guide, den du irgendwo hinterlegst. Der muss nicht für alle sichtbar sein, aber für alle Team-Spieler sollte das auf jeden Fall sichtbar sein. Desigungsrichtlinien bedeutet auch, dass ihr eine begrenzte Farbpalette hast. Ihr habt maximal zwei Schriftarteln, also nicht Fett und Leid, sondern Times und Areal, zum Beispiel. Neben einheitliche Schriftgrößen definiert Standards für Größen und Abstände. Das gilt für Raster, für Bilder, für Schaltflächen, Textfelder und auch vieles mehr. Da kommen wir schon zu viel cool. Wie soll die Organisation, kann man auch anders nennen und das ist dann hier reichlich. Die Grundpräzipe sind Gruppen, Größe, Farbe und Platzierung. Das sind die Grundelemente hier reichlich oder die Organisation. Das ist eigentlich das größte Wort. Anweisung hier, wo hat man die Elemente nach ihrer Wichtigkeit? Die Wichtigkeit steht oben und die Wichtigkeit steht unten. Die größten Elemente ziehen normalerweise auch die größte Aufmerksamkeit drauf. Wenn ihr das beachtet und wisst, dass ich einen Button Kontakt losmache, dann ist entsprechend super wichtig. Wenn ihr Sections anlegt und das ist im Moment State of the Arts, dann ist eine Section immer eine Informationsgruppe. Ihr solltet die einzelnen Sektionen auf der Seite auch wirklich klar voneinander unterscheiden, dass der User weiß, wo ich gerade bin. Also bin ich jetzt im Kontaktbereich, bin ich jetzt im FHQ Bereich, bin ich jetzt oben im Hero-Header und unterscheide das wirklich sehr, sehr klar und habe immer im Kopf, okay, jede Sektion eine Idee. Also sprich, wenn ihr von oben nach rücken geht, macht irgendwie ein Rhythmus da rein. Das könnt ihr über die Hintergrundtabe machen, überraben, über die Weide vielleicht. Aber das Prinzip ist einfach jeder Sektion eine Idee. Variiert Größen, wie gut es geht und so oft es geht, damit sie auch wirklich mal gelungen werden können. Prinzipier, Elemente, die nah zueinander stehen, werden mal als Einheit mal gelungen und das schafft Zusammenhängen des Strukturen. Also wenn ihr Dinge zueinander platziert, werden die auch entsprechend als einheitliches, also als eine Gruppe wahrbilden. Das schafft ihr durch Form, das schafft ihr durch Farben als Hintergrundfarbe oder entsprechende Hintergrundbilder. Ihr könnt Blockgrößen, also Gruppengröße oder Blockgrößen nutzen um da auch eine gewisse Hierarchie zu schaffen. Sprich, wenn ich jetzt ein eher unwichtiges Element habe, mache ich den Block natürlich ein bisschen kleiner, als jetzt den großen wichtigen Bereich. Regel 5, gut hinterzwerden, Feedback. Jetzt wird jetzt keine ganz große Regel, aber wenn ihr Aktionen habt, also Buttons, Formulare usw. will der User eine Reaktion darauf haben. Das heißt, er will ein Feedback haben. Also er will sagen, ich habe das jetzt erreicht. Gibt dem User ein Feedback, wenn ihr irgendwas macht, indem ihr auf den Button klickt, wo er Havert durch den Farbwechsel, durch den Strichgrößen oder was auch immer, einfach, dass er sieht, okay, hier passiert was. Sagt Danke. Jeder freut sich über einen Beigestellen, wenn er irgendwas erreicht hat. Zum Beispiel ist das ein, ja, wir haben deine Bestellung erhalten. Das kann nicht nur diese E-Mail-Sale, die danach kommt, sondern auch einfach eine danken Seite im Anschluss des Formulas. Macht für den User einfach nochmal klar, ihr seid jetzt geschafft, Aufgabe erfüllt. Danke und Tschüss. Und zeigt auch Freutigkeit. Also eine Danke kann ganz, ganz viel erreichen. Wenn ihr Fehlermeldungen habt, gestaltet ihr möglichst Pregnanz und auch Unmisserstellen. Also nicht ganz klein, da ist irgendwie ein Fehler auf der Seite, weil du hast was falsch rausgeführt. Jedes muss groß sein, das muss Pregnanz sein. Du hast dir gerade ein Fehler gemacht. Wir bist auch irgendwie in einer stechenden Farbe, dass der sofortiges Feedback bekommt. Okay, das war jetzt nicht in Ordnung. Aber zur nächsten Regel Nummer 6, Halbzeit. Farben, ein spannendes Thema. Farben sind, könnt ihr euch vorstellen, wie Musik in einem Film ist. Wir sind eigentlich die primären Auslöser von Emotionen. Kein Element auf so einer Seite oder in so einem Branding kann mehr Emotionen auslösen als Farbe, als einfach nur um das Thema Emotionen, weil der Farbe auch geht. Also ich kann da nicht mehr Informationen rüberbringen. Also ich kann es an die Blau nicht reinschreiben. Hey, ich stehe ja für Seriosität und so weiter. Das erzeugt das einfach. Ja, also die Farben bei die Emotionen, das Verhaltenung und die Wahrnehmung und den Userfluss dieser Geräte, die Wahrnehmung der Benutzer. Weiter gehts. Jede Website, jedes Brand, jedes Forum oder was auch immer hat so eine ganz eigene Melodie über den Thema der Töne bleiben. Und die Wahl der Farben bestimmt welche Emotionen, welche Stimmung sie bei Wurzel hier sprechen, TV ruft. Da haben wir zum Beispiel die gesetzlichen Töne. Das ist eine fröhliche Pop-Sau, weil der ja so perfekte, jugendliche, innovative Markt. Doppel Farben, eine melodische Cello-Klänge, strahlende, der sehr heilte und sprächende Eleganz. Ja, Pastellfarben sind dann eher so die sanften Klänge, also für Ruhe stehen, Frühling, bla bla, auch so Tätigkeit. Dann haben wir die eher so knalligen Farben. Das kommt jetzt hier ziemlich und sehr floristierende Farben eigentlich, die sind eher wie die Qualitm-Tekno-Beats und 50 Beats pro Minute. Glaubt mir, das sind Wechsfarben und neutrale Töne. Ganz wichtig, es sollte sich auch immer irgendwie reinmischen. Habt einfach im Hinterkopf, dass hier jede knallige Farbe oder jede Tekno-Farbe immer mit der neutralen Farbe auch mischt, damit der ja noch ein bisschen Ruhe eingehen kann und das im Bund einen schönen Kontrast. Wenn ihr so eine Marke habt, oder so ein Thema auf eurer Seite, bleibt bei der Farbpalette der Marke, führt da nicht zu viele neue Farben ein. Ihr könnt eine Farbe so wie hier, den Blau, könnt ihr durch Abstufung, durch Helligkeit, durch Sättigung, durch Mischen, könnt ihr eine komplette Farbpalette erstellen. Wenn wir jetzt hier auf der linken Seite hatten, haben wir da sehr viel Harmonie drin. Der Bier ist nicht farbgeregnet, aber ist auch nicht schlimm. Bei der Farbwahl achtet bitte auf genügend Kontrast. Allein wegen der Barrierefreiheit, Kontrast ist da ein ganz großes Thema. Kontrast ist auch das Thema bei der Farbgestaltung. Es bringt nichts in den Blauton zu haben und ein so mini-Pauton. Daneben, die Unterschiede werden eigentlich kaum wahrgenommen. Also sprich, zu dem Blau nimmt er hellere Farbe, die dazu passen oder entsprechend dunkler. Wenn ihr Aktion habt, also der berühmte Call to Action, oder der Filter oder was auch immer, nutzt da Aufhängefaden. Also sagen, hey, hier kannst du mich klicken. Ich bin für dich da. Ich bin dafür da, dass du deine Aufgabe erfüllen kannst. Da nutzt ihr Aufhängefaden. Da was darum wie Emotion gilt, geht es natürlich auch um kulturelle Unterschiede. Hachtet gerade in der Farbgestaltung auf kulturelle Unterschiede, was bei uns für Tod steht. Als Beispiel schwarz steht voran das für Frühlichkeit, steht für Leben. Andersrum bei weiß ist bei uns herne fröhliche hellen Farbe, woanders steht entsprechend für Tod. Also es gibt da sehr große kulturelle Unterschiede in der Farbwahrnehmung, weil wenn ihr eine internationale Seite macht, müsst ihr da entsprechend recherchieren. Genau, die Farbwahl, es gibt da Richtlinien, welche Farben zusammengehen, welche Farben so gar nicht gehen. Da kann man sehr, sehr schöne Tests auch machen, ob die Farbwahl, die ich da auf der Seite habe, überhaupt barrierefrei ist. Ob bestimmte Menschen, die bestimmte Farben nicht wahrnehmen können, also eine Rot-Grün-Schwäche oder solche Sachen, die können einfach eure Seite nicht so wahrnehmen, wie ihr euch das wünscht. Und entsprechend solltet ihr das testen. Da ist die Hauptregel eigentlich nur, macht eine Information nicht alleine über die Farbe. Das heißt, ihr müsst das dann auch entsprechend über die Form, über die Größe lösen, nur die Farbe als Informationstrainer, das funktioniert auch. Also ihr müsst immer in einer Kombination gehen, im Quellcode, entsprechend über eine Areale lebt und so weiter. Aber immer im Hinterkopf, dass die Farbe, die ihr seht, sehr, sehr viele andere einfach auch nicht wahrnehmen können. Kommt mal zur Regel 7. Typo. Einmal der Lieblingsthemen. Die Grafin ist wie Koch. Und die Schrift, Atmen. Da könnt ihr euch vorstellen, wie wir die Basis zutaten. Also habe ich jetzt Pasta drin, habe ich Tomaten drin. In dem entsprechenden Rezept. Weil wenn ich dann koche und das irgendwie zusammensetze, das Gericht, ich drücke Größe und die entsprechende Anordnung, sagt, wir stimmen das, dass man das. Und die entsprechende Technikop, das Gericht, es gibt es doch dünnst, so kann man sich typografieren, ich spreche vorstelle. Zu viel Typografie und ein Gericht wird ungenießbar. Also zu viel von irgendeiner Zutat passt. Wenn ihr da zu wenig drin habt, fährt jetzt ein Geschmack und Tiefe. Das richtige Maß, das ist entscheidend. Entsprechend der Schwürstel zu guter Typografie. Bei aller Fancy Typografie, die es hier draußen gibt, ist das grobaste Ziel. Die sollte immer den Inhalt dienen und den Benutzer dienen. Also sie sollte nichts für sich stehen, sie sollte einfach nur schön sein und sagen, hey, ich bin Typografie, ich bin Text. Sondern sie sollte den User immer unterstützen. Das müsste immer im Kopf behalten. Wenn ihr Schriften nutzt, nutzt sie den User. Oder nutzt sie den Winner. Der Schlüssel für gute Typografie ist Kontrast. Das ist der Hauptschüssel des Haupts, der Erfolgsfaktor schlechthin für gute Typografie, ist immer Kontrast. Da wendet klarer und gut lesbare Schriftart für eure Haupttexte. Also eine Comic-Sanz, als lesetext geht muss, funktioniert muss. Wo beide Times the Roman als Freestext auf der Webseite auch schwierig wird. Einfach weil wir das ein bisschen anders kennen inzwischen. Nutzt einfach klare und gut lesbare Schriftarten und auch hier wieder Testen. Testen können wir gleich noch. Wählt ein sehr Kontrast in den Schriftgrößen für unterschiedliche Überschriften. Also H1 zu H2 sollte deutlichen Überschrift haben. Runderschied haben, wie die H2 zu H3. Da gibt es ein paar Techniken, wie man das ganz gut erreichen kann. Da gibt es zum Beispiel Fluid-Typografie. Könnt ihr mal googeln, was das ist. Das bedeutet, dass die Schriften in einem bestimmten Verhältnis zueinander vergrößert werden. Ich habe in einer anderen Wirtschaft mal gesagt, das ist immer verdoppelt. Man kann es auch kleiner machen. Ein Verhältnis von 1,414 zum Beispiel, goldener Schnitt. Wenn ich eine Basisschriftgröße von 16 Pixengabel, was einem Standard-Rennen entspricht, multipliere ich das mal 1,414 als Beispiel und erreiche da die H4 oder H5-Schriftgröße und gehe mal soweit. Irgendwann lasse ich bei rund 60 Pixeln oder bei 4,8 Rem, zum Beispiel, dass so Herrmann die entsprechenden Schriftgröße erreichen. Es etabliert sich immer mehr bei den Schriftgrößen Clamp. Da gibt es wunderbare Rechner, die man googeln kann, wo sich die Schriftgröße auf Basis der Bildschirmbreite errechnet. Dann gibt es nicht mehr klar vor, ich will 4 Rem darstellen, weil 4 Rem könnte auf einem Smartphone viel zu groß sein, 4K-Monitor viel zu klein. Und so kann man sagen, von bis und dieses Clamp ein bisschen sehr spannender und sehr, sehr guter hat, Schriftgrößenwerte stellen. Seid bitte sehr zurückhaltend mit mehreren Schriftfamilien, also Times, Areal oder Helvetica mit der Bühne sehr. Da solltet ihr möglichst zurückhaltend sein. Ihr könnt Schriftfamilien mischen, natürlich könnt ihr das, wenn ihr das macht, mischen aber nicht die gleichen Klassenmitteln, also der Sans mit der Sans-Mission geht meistens schief oder oft, also zwischen oft und fast immer. Wenn ihr der Klasse-Serif mit Sans-Serif mischt, geht das eigentlich ganz oft klar. Und das könnt ihr euch als Regel mitnehmen, da kann man Schriften, dann fällt das gut mischen. Ich habe eben schon mal gesagt, dass Serif-Schriften für Liestexte oder für lange Texte auf Webseiten sind, aber dann als Headline natürlich, super. Ihr könnt Schriften-Schnitte als ihr 15 habe ich noch. Ihr könnt Schriften-Schnitte natürlich verwenden und solltet das auch, aber dann bitte sinnvoll. Also Schriften-Schnitte bedeutet Fett, Light Kursiv, Extended und so weiter. Wenn ihr Schriftstärken nutzt, ist eine gute Regel, die ihr haben nutzen könnt, wenn ihr mindestens eine Schriftstärke überspringt. Das heißt, wenn ihr die Schriftstärke 300 als gerade in der Headline habt und ihr habt dann die nächste, nimmt ihr nicht wohl 400 daneben, weil dann ist der Kontrast zu gering. Ihr nehmt eine 500 oder eine 600, wenn ihr es total dramatisch folgt, dann nehmt ihr 700. Aber 100 zu 200, das funktioniert nicht, also mindestens 200 dazwischen. Wenn die bedankt sind, also Medium, Light und Extra Bold und so weiter, dann nehmt ihr immer noch einen dazwischen, also eine Light mit einer Regular, funktioniert nicht gut. Nehmt ihr, wie war die Bold. Nehmt eine Adgemessung gut die leseiliche Zeilenhöhe. Und da könnt ihr einfach nur testen. Das kann man kaum sagen. Nehmt jetzt irgendwie ein Rem, eins Rem, kann man nicht sagen, weil jede Schrift da unterschiedlich ist und jedes Gerät auch anders ist. Da gibt es aber auch eine Faustformel, die ihr euch merken könnt. Die Größe, die Schriftgröße, kleiner darf der Zeilenaufstand, je kleiner die Schriftgröße, desto größer der Zeilenaufstand. Das ist eine Faustformel, die ihr euch einfach mitnehmen könnt. Dabei ist die Hauptidee, das Bold, Heavy, Italic, Light, Hairlight, Schmal, aber niemals das Regular. Interactions. Interaktionen und Animationen sind wie Gewürze in eurem Gericht. Sie können gerade um Gerichts, weil die beim Kochen und jetzt auch immer noch neben dem ganzen Komplexität und auch Tiefe. Aber Gericht ohne Gewürze, ohne Salz, ohne Pfeffer, schnelle Pfade und auch ziemlich langweilig. Allerdings, wenn ihr das überwürzt, überwertet das auch den Geschmack und kann das ganze Gericht komplett ruinieren. Also zu viel Salz, zu viel Pfeffer. Schmeckt nicht mehr. Letztes Morgen, weniger ist oft mehr. Aber es sollte wahrnehmbar sein. Wenn ihr Gewürze drin habt oder Animationen, Mikrointeractions und Markeninteractions, man soll schon sehen, dass es die gibt und die sind auch gut. Aber übertreibt es nicht. Man hat der schmale Grad bei den Interaktionen. Da ist auch wieder die Regel. Einfachheit geht vor. Jeder Interaktion sollte intuitiv sein und auch leicht verständlich. Beachtet das Tempo zu schnell oder zu langsam. Animationen irritieren die User. Oder wenn sie auch zu heftig sind, zu schnell sind, schreckt sie sie sogar ab. Menschen mit ADHS zum Beispiel, die klicken dann weg. Die sind dann nicht mehr da. Dabei ist es wichtig, dass es gewisse Konsistenz dabei beachtet. Wenn ihr einen Farbwechsel beim Button habt, dann solltet ihr auch immer da sein. Und nicht nur auf einer Seite. Und man so schafft ja ein Kuhrenz-Erlebnis. Beide würden sein. Achtet dabei bitte auf fließende Übergänge zwischen den Verschiebungen. Also nicht zu ruckwürdig und nicht zu ausladen bei den Interaktionen, sondern dass es nicht loslässt. Dass sich das in den Smooth anfühlt. Und dass wir da sagen, okay, das fühlt sich ja doch natürlich an. Regel Nummer 9. Die Sponsor Design. Ich muss ja gar nicht zu viel erzählen. Die meisten kennen es hier. Stellt euch das vor wie ein Teil, dass sich der Perfekt anpasst an den verschiedenen Körpergrößen. Also sprich, ihr habt ein T-Shirt. Das ist ein Wunder-T-Shirt, das passt zu 40 Kilo, aber es passt doch zu 140 Kilo. Zugänglichkeit. Achtet beim Josephter-Festival auf Ziegänglichkeit. Man kann sich das auch vorstellen in einem barrierefreien Gebäude. Das stellt halt sicher, dass jeder da rein kann. Dass jeder das benutzt kann. Unabhängig von seinen Fähigkeiten. Es sollte reutstuhlgerecht sein. Das bedeutet Zugänglichkeit. Dekusierung geht nochmal ein Stückchen weiter. Stellt halt sicher, dass sich jeder repräsentiert und wertgeschützt hört. Also wenn ihr Webseiten gestaltet und dann nur Frauen drin hat, könnte das auch, die alle nur Bikinis sagen, ah, oder was auch immer, könnte das auch schon was schnelles Gegenteil umschlagen. Also achtet da drauf, dass wenn ihr das gestaltet, dass sich alle wertgeschätzt fühlen und vor allem kulturelle Persönlichkeiten. Berücksichtigt das. Mobile und passt ja, dass die Seile einen größeren Bildschirm haben. Warum machen wir das? Die Zuführung ist leichter, als zu weglassen. Wir werden größer, statt größer und kleiner werden. Achtet auf eine flexible Gesteilung, weil das sich die Wasser an alle Gebenheiten am Asken hört. Erlaubt, bitte die Anpassung vom Text grüßen. Also wir machen keine Texte, sondern in einem Reven oder so. Weil manchmal braucht jemand einfach einen größeren Schrift. Wenn ihr die Buttons gerade mobil gestaltet, achtet da drauf, dass die wirklich auch groß genug sind, dass man mit dem Finger oder mit dem Daumen das auch treffen kann. Wenn die zu klein sind, treffen die die Buttons entsprechend. Beachtet die Farben, den Teils. Also für mich auf die Information eben nicht nur über die Farbe, sondern über Texte, über Screenreader, hinter Art Information und so weiter. Haltet Standardsein, die bei ihrer Freiheit vorgibt, so gut es geht. Entsprechend und beachtet die kulturelle Setibilität. Was hier bei uns passt, passt woanders womöglich Milch. Regel Nummer 10. Skalierbarkeit. Kind denkt doch mal in der Zukunft. Also hier fangen neue Projekte an und das ist womöglich erstmal so eine kleine Miniseite. Eventuell wird darauf auch mal was größer sein. Wie so ein Baum, der als kleiner Krei manchen immer größer wird. Sobald die Systembauen was von Beginn auch größer werden kann, wenn möglich ist das Ganze. Und wie es geht, zeige ich euch auch jetzt. Das Designsystem sollte alle Elemente bereiten, und die wichtigsten Aspekte auch entsprechend definieren. Du kannst auch Styleguide bringen. Erstellt ist Styleguide und macht es sichtbar, dass alle, die an diesem Projekt mitarbeiten, darauf auch entsprechend zu befahren. Am besten macht ihr das, indem ihr wieder verwendbare Designmodule erstellt. Also sprich, ein Kontaktformular kann sich entsprechend anpassen. Die Wahl der Wahl mit entsprechenden Templates zu Arbeiten Templates erstellen, die ich immer wieder benutzen kann. Und benutzt der Raster Layouts am besten. Also sprich, 12-spaltiges Raster hat sich etabliert, das müsste ich nicht machen, aber das Ziel steigt bei der Gestaltung Events. Mein großer Tipp an euch ist, dass man in der CSS-Klasse und die Variablen so oft es geht, sich einem guten Entwickler zu nicht sagen, aber das sind ja gerade die UI-Design, deswegen sage ich das doch. Und in den Programmen wie Figma und Chrome, also XD, nutzt da die Möglichkeit für Kronenten so exzessiv, wie SP. Ich spreche erst als Herr und habe eben gesagt, ich arbeite mit Elementor, wie der Hubs früher, ID-basiertes Design skaliert sich. Also das kann nichts skalieren, ihr müsst immer wieder in die Elementor rein und sie neu anpassen. Deswegen, da wo es geht, möglichst nicht auf ID-Basis arbeiten, sondern auf Klassenbasis, dann habt ihr auch skalierbare Systeme. Es geht eigentlich immer, aber Regel ist, da nutzt es relativ einheit, also %em statt statische Einheit, allein schon für die Barrierefreiheit. Und Dokumentation zu Cloud Basis. Für uns kaotische Designer, ganz wichtig für Entwickler her nicht, bleibt organisiert, Nutzer, Konsistenz, Namen und entsprechende Ordner, und das ist das Storyboard bei dem Film. Also wir erst mal ein Storyboard, bevor wir einfach zu drehen. Und das ist bei uns in der Gestaltung, ist das Wireframe. Ich bin auch da, wo die Webseite sprechen mit Wireframes, wo von vorderlich zu gestalten. Also viele gehen erst schon direkt in den Pagebilder rein. Ich empfehle das nicht. Sondern da der erst mal ein I-Touch-Frame um zu gucken, wohin geht die Reise und wie gestaltige Elemente wegen Wireframe haben. Ich starte mit einem Smartphone. Robert Huring. Er achtet dabei auf eine sehr klare Struktur. Mit ihr habe ich entsprechend auf die Design. Also macht da keine Schock-Farben rein und so weiter, das bringt bei den Wireframe in der Regel nichts. Sondern macht die so einfach, irgendwie entsprechend sehr einfach. Und nutzt da, wo es Sinn macht, entsprechende Platzhalter. Wenn ihr Beschriftung macht, macht sie klar. Und das ihr wirklich jeder versteht. Das ist eine Ditter-Aktivität. Entsprechend für, wenn ihr dann bei Prototypen seid, da, wo es Sinn macht, dass ich sehr okay, wenn ich diesen Button klicke, komme ich auf die nächste Seite. Macht riesengroßes Spalt. Seid flexibel dabei. Und kommen wir zur letzten Regel. Machen wir eine entsprechende Generalprobe. Und das sollten wir auch bei UI-Design machen. Testen, testen, testen. Und macht das nicht erst zum Schluss, sondern sehr, sehr früh schon, dass wir frühzeitig schon erkennt, da, wo uns Fehler sein können. Wenn ihr User-Tests macht, dann definiert klare Aufgaben und Ziele für die Tester, um gezielte Rückmeldung zu machen. Also setzt die da dran und sagt, bestellen mal ein Produkt im Item Shop. Wie einfach ist das? Das wäre dann seine Aufgabe, beobachtet das und dann kriegt er entsprechende Rückmeldung und guckt genau, was die machen. Wie lange sie brauchen, ob sie irgendwo stecken bleiben. Und wenn sie dir Feedback geben, höre dann about. Das ganz dokumentieren wir entsprechend. Dann habe ich jetzt noch ein... Das ist mein persönlicher Bibel. Das Standardwerk für alle UI und UX Designer ist Don't Make Me Think von Steve Krupp. 2011 hat er das geschrieben. Er ist entsprechend nicht erschreckend. Wenn die Graphic, wenn das Layout noch ein bisschen outdated aussieht, hat er aber nichts an seiner Aktualität verloren. Wenn ihr euch noch ein bisschen mehr informieren wollt, mehr Ressourcen wollt, mehr gucken wollt, wo krieg ich noch mehr Information. Hier sind so ein paar Seiten, die ich sehr, habe ich noch eine tolle Entfehlung. Product Design Pro Cool geht dann mal drauf. Da findet ihr unfassbar viel Information von Freitouren bis Nachschlagewerke etc. Zusammenfassung. Wir haben über Klart gesprochen. Wir haben über Erwartungen und Konventionen gesprochen. Konsistenz, visuelle Organisation, Feedback, Typographie, Interactions, Responsiveness, Stabilbarkeit, Wireframes, Protests. Vielen Dank. Wir müssen da die Fragen in der Stelle kürzen, weil sonst laufen wir in die nächsten Sessionsreihe. Wenn ihr Fragen überlegt, geht auf uns zu. Wir haben ein kleines Geschäk. Unser Speaker-Geschäk. Wir machen eine Binsicht-Kleidung. Wir sind in wenigen Minuten mit dem Eikon-Talks. Das heißt, Eikon zu Themen, das wird sehr leise. Wir haben nicht viel zu trinken. Wir sind gleich wieder da. Wir trinken da. Wir trinken da.