 Ja, hallo. Danke, Karl, für die kleine Einleitung. Ich schieke jetzt noch gerade da mein, so, ja, dann lege ich kurz los. Eben, du hast ja schon gesagt, ich bin Fotografin und Designerin. Ich habe in Potsdam beziehungsweise Berlin Kommunikationsdesign, Interfacedesign studiert. Mit Screendesign habe ich schon 2004 angefangen und mit WordPress arbeite ich seit 2013. Inzwischen habe ich einige Websites für Kunden gemacht. Ich arbeite eben selbstständig in diesem Bereich Fotografie und Design. Und Webdesign mache ich schon ziemlich lange inzwischen. Und mein neues Projekt heißt Ich mach das jetzt. Das ist ein Mentoring für Design. Auf der Website Ich mach das jetzt.design könnt ihr das dann auch mal ansehen. Ja, dann gehe ich mal weiter. Wozu Design ist der Titel des Vortrags? Grundsätzlich würde ich sagen, also ich mag es aufgeräumt und ich denke auch Design sollte aufgeräumt sein. Ganz allgemein kann man auch sagen, wenn eine Website aufgeräumt ist oder ein Design aufgeräumt ist, erfüllt es ebenfalls einen großen Teil der Regeln für eine barrierefreie Website. Barrierefrei haben wir uns alle schon mal mehr oder weniger miteinander gesetzt. Das kommt ja dann auch demnächst. Und eben bei der Barrierefreiheit geht es um darum, dass eine Website im Bezug auf Design, Inhalt und Technik aufbereitet ist. Heute gehe ich auf das Design ein. Wir sprechen über Farben, Kontraste, Stiftgrößen und so weiter, was eben auch für Barrierefreiheit gilt. Und ich spreche eben über Farben, Schriften und Typografie. Wir gehen ein bisschen auf Bilder ein und dann erzähle ich noch ein bisschen was über Kombinationen und habe auch noch ein paar Layout Beispiele. Fangen wir an mit den Farben. Hier geht es vor allem auch um die Kombination von Farben und Kontraste. So, jetzt haben wir da mal unseren Farbkreis. Also uns stehen da ziemlich viele Farben zur Verfügung. Und ja, wenn ich da jetzt ziemlich tief in den Farbhopf greife, dann kann das auch mal so aussehen. Also hier ist ziemlich viel los, nicht nur was die Farben angeht, auch typografisch und mit diesem Muster im Hintergrund. Ich habe mir jetzt mal die Farben rausgepickt. Und hier sehen wir schon, da sind ziemlich viele verschiedene Farben vorhanden. Und auch sehr viele Knallfarben, wie jetzt zum Beispiel dieses Grün, das Rot und das Orange. Und jetzt habe ich mir erlaubt, das mal anzupassen oder ein bisschen aufzuräumen. Und habe jetzt zum Beispiel eben diesen grünen Button gegen das Orange, was ja sowieso schon auch in dem Screen vorhanden ist, getauscht. Das T-Shirt habe ich blau gemacht, statt in diesem grün-gelb. Und oben diese Top-Bar auch in einem Violett. Also, ich würde sagen, das ist so schon viel harmonischer und so sieht das dann aus, wenn es aufgeräumt ist. Wie stelle ich denn jetzt eine Farbpalette? Also, jetzt nehmen wir mal so vier Knallfarben aus diesem Treis. Das könnte so aussehen. Und wenn ich jetzt schon die Sältigung ein bisschen runternehme, ich hoffe, ihr seht das an euren Bildschirmen zu Hause gut. Also, den Unterschied, den sieht ihr sicher schon mal. Also, allein schon, wenn ich die Sältigung unternehme, dann ist es schon ein bisschen ruhiger und nicht mehr so aufdringlich. Wenn ich mir jetzt zwei Farben aus diesen vier Farben nehme, nämlich zum Beispiel diese zwei oder diese zwei oder die. Und erweitere die dann um Abstufungen von diesen beiden, von diesem grün und von dem blau. Dann habe ich eigentlich schon mal eine Farbpalette, wenn ich jetzt ein bisschen unsicher bin, die gut funktioniert. Jetzt kann ich natürlich auch noch einzelne Knallfarben hinzufügen. Und jetzt zeige ich noch ein paar Beispiele von Websites. Hier zum Beispiel haben wir eine Farbpalette, die sehr homogen und auch die Fotos sind an diese Farbpalette angepasst. Ein weiteres Beispiel haben wir hier, wenn wir jetzt auf der rechten Seite die Punkte betrachten, dann sind da auch ziemlich viele intensive Farben in der Palette. Aber wenn man die Screens anschaut, dann sieht man schon auch, dass die knalligen Farben eher als Akzente eingesetzt sind. Also, wenn Knallfarben dann lieber dosiert, damit es nicht so überladen ist. Und dieses Beispiel fand ich auch noch sehr schön, was so ein bisschen untypisch ist, weil oft machen wir die Websites. Okay, die haben grundsätzlich erstmal einen hellen Hintergrund, weiß oder hellgrau oder beig. Und was ich hier toll finde, dass das mal dunkler Hintergrund ist. Und das funktioniert natürlich auch gut, wenn die Kontraste eben dann auch stimmen mit der Strift auf dem Hintergrund und den Bildern und so weiter. Also Fazitfarben weniger ist mehr. Vorsicht mit zu vielen Knallfarben. Dann gerne Abstufungen von einzelnen Farbtönen benutzen und auch mit benachbarten Farben arbeiten und natürlich die Kontraste beachten. Das nächste Kapitel Text und Typografie ist ein bisschen umfangreicher. Grundsätzlich sollte man sagen, okay, Text und Typografie dient der Lesbarkeit. Zum Stift hat es allgemein. Wenn ich da jetzt so ein Text habe, dann ist das erstmal eine zynische Wüste aus Buchstaben. Und ich gehe jetzt ein paar Screens durch und zeig euch, was ich verändert habe, damit dieser Text eben lesbarer wird oder lesbar wird. Ich habe erstmal die Satzbreite verändert, also den ganzen Schrift-Satz schmaler gemacht, so dass die Zeilen nicht mehr so lang sind. Die Schriftgröße verändert, also größer gemacht. Zeilenabstand verändert, also größerer Zeilenabstand, damit die Linien auch noch besser als einzelne Linien erkennbar sind, so dass das Auge die Linien auch besser folgen kann. Dann haben wir hier Abstände noch zwischen den einzelnen Absätzen, also sprich die Zwischenüberschriften haben immer noch einen Abstand zum Inhalt, also zum Fließtext. Was toll ist bei den ganz neuen Screens, wie jetzt zum Beispiel von dem WordPress Seam 2023, hier ist eigentlich schon grundsätzlich das ziemlich gut gemacht. Die Schriftgröße ist okay, der Zeilenabstand ist gut, die Satzbreite ist gut, also die Zeilen sind nicht zu lang. Und es gibt automatisch auch Abstände zwischen den einzelnen Absätzen. Was ich natürlich jetzt noch weiter machen kann, ist, dass ich zum Beispiel die Zwischenüberschriften Fett auszeichne. Ich kann die H2 auch ein bisschen größer machen, je nachdem, das ist natürlich jetzt ein relativ kurzes Textbeispiel. Aber wenn ich jetzt längere Texte habe und noch mehr Zwischenüberschriften, kann ich natürlich auch Text skulpturieren, indem ich Trainer einsetze. Und was ich jetzt hier noch gemacht habe, zum Beispiel mit Schriftstilen, also der oberste Abschnitt hier, der ist jetzt zum Beispiel kursiv gesetzt, so dass der sich auch vielleicht als Einleitungstext noch mal ein bisschen besser hervorhebt. Zum Thema Blogsatz. Blogsatz ist so, also das hier ist ein klassischer Blogsatz, der ist links und rechts bündig. Das, was oft passiert, vor allem, wenn Spalten sehr schmal sind, dass hier so große Lücken entstehen. Also die Zeilen, die ich jetzt markiert habe, also vor allem die obere hier, hier sind sehr große Abstände zwischen den einzelnen Wörtern, hier unten auch sehr stark und in der Mitte sehen wir, da ist der Abstand fast gar nicht vorhanden zwischen den einzelnen Wörtern. Noch ein Beispiel, sondern auch ein krasses Beispiel. Man weiß eigentlich gar nicht so richtig, wo man hingucken soll. Soll sind eben auch sehr, sehr große Lücken zwischen den einzelnen Wörtern, wie jetzt diese zweimarkierten Zeilen besonders. Und noch ein Beispiel, was ich zufällig gefunden habe. Ja, das sind wie so einzelne Bräckchen, die auf so einem Hintergrund rumfliegen. Und ich würde sagen, flatter Satz bietet sich da besser an, also Vorsicht mit Blocksatz, vor allem eben bei schmalen Zeilen. Und flatter Satz heißt das deshalb, weil das jetzt zum Beispiel hier an der rechten Seite so platt hat. Noch eine Möglichkeit, um mit schmalen Spalten umzugehen, ist eine automatische Silbentrennung. Das kann man über diesen CSS-Befilm zum Beispiel eingeben, so dass dann eben, wie man jetzt zum Beispiel hier in der zweiten Zeile sieht, ganz rechts in dem Beispiel, dass die Wörter automatisch getrennt werden. Denn auch bei flatter Satz und schmalen Zeilen, wie jetzt hier zum Beispiel ganz links, wenn Wörter sehr lang sind, wie das erste Wort jetzt hier in der dritten Zeile, dann wird das eben, springt das in die nächste Zeile und dann entsteht hier auch ein ganz großer Freiraum. Das nächste Thema, wo ich etwas darüber sagen möchte, sind Großbuchstaben, auch Versalien genannt. Wenn ich jetzt zum Beispiel mein Textbeispiel komplett in Großbuchstaben schreibe, dann sieht das so aus. Und hier ein Beispiel, links die Überschriften sind mit Großbuchstaben geschrieben, rechts in Groß- und Kleinbuchstaben und man sieht schon, das lässt sich in Groß- und Kleinbuchstaben viel besser lesen. Und irgendwie haben wir das ja alle vielleicht schon mal gehört, dass man für Fließtexte keine Großbuchstaben benutzen soll. Und ich würde euch gerne mal erklären, warum das denn so ist. Also wir nehmen jetzt das Wort Web-Design einmal in Großbuchstaben, einmal in Groß- und Kleinbuchstaben. Und wenn ich da jetzt so Blöcke drüber setze, dann sieht man schon, dass man selbst unten das Wort fast noch lesen kann. Und das liegt daran, dass dieses Wort eben unten Ober- und Unterlängen hat. Und das gibt uns eine zusätzliche Information beim Lesen, diese uns erleichtert, den Text wahrzunehmen und zu erfassen. Also so sieht das dann schön aus, wenn ich die Großbuchstaben eben oder Versalien gezielt einsetze, für kurze Zwischenüberschriften, dann funktioniert das gut. Also ich würde mal so als Regel sagen, okay Großbuchstaben, eine Zeile und nicht länger. Noch ein schönes Beispiel dafür, dass Text auch gut lesbar ist mit Ober- und Unterlängen. Das ist dieses Logo, obwohl jetzt zum Beispiel von den Wörtern, die sind so durchgeschnitten, kann man trotzdem noch gut lesen, worum es geht. Natürlich würde das nicht funktionieren, wenn diese Wörter nicht so viele Ober- und Unterlingen hätten. Also in dem Fall funktioniert das sehr gut. Und was ich auch nicht empfehle, die Kombination zum Beispiel von speziellen Schriften in Kombination mit Großbuchstaben. Also das Beispiel auf der linken Seite. Ich stelle mal immer wieder drüber und lese da Wertdesign. Also das B ist fast ein R, also lieber so wie auf der rechten Seite, eben dann also für Großbuchstaben auch einfacher und klare Schriften benutzen. Noch zum Thema Kontrast und Vorder- und Hintergrund. Wenn ich jetzt zum Beispiel einen weißen Hintergrund habe und helles Schrift funktioniert das natürlich so nicht. Das heißt, wenn ich gerne vielleicht was ausgefalleneres machen möchte oder ein bisschen was anderes, dann empfehle ich einen dunklen Hintergrund. Und bei dunklem Hintergrund, hier ist die Schrift jetzt, also der Fließtext ist jetzt weiß. Und das, was ich noch machen würde oder was ich oft mache, wenn ich einen dunklen Hintergrund benutze, dass ich die Schrift, den Fließtext etwas abdunkle, also ein ganz helles grau benutze. Also man sieht den Unterschied im grau und weiß. Bei dem weiß überstrahlt, also der Kontrast ist fast zu stark auf dem dunklen Hintergrund und das überstrahlt so und macht eben auch die Schrift nicht so schön lesbar. Also es ist fast ein bisschen anstrengend fürs Auge. Also hier noch mal die Variante, die besser funktioniert. Noch auch ein Hinweis für dünne Schrift-Schnitte, wie jetzt hier zum Beispiel auf der linken Seite, ist jetzt ein sehr dünner Schnitt, eben mit der Front-Wade 100 und ich würde immer mindestens 400 mit 400 beginnen und dann aufwärts, wenn man dann noch verschiedene Kontraste haben möchte. Ich zeig auch gleich noch Beispiele. Wie wähle ich denn jetzt Schriften aus? Okay, grundsätzlich muss man sich natürlich fragen, okay, gibt es ein Corporate Design? Wenn es kein Corporate Design gibt, dann muss ich mir vielleicht überlegen, okay, was ist das Image, was will ich rüberbringen, wie soll die visuelle Sprache sein, soll das fröhlich daherkommen, soll das seriös erscheinen und dann ist natürlich auch abhängig, welche Schrift ich wähle, welche Anwendung ich habe und was die Schrift können soll, also welche Funktion die Schrift haben soll. Also Thema Tabellenziffern, das wäre jetzt ein bisschen zu weit, aber auch das gibt es. Es gibt spezielle Ziffern für Tabellen. Und wenn ich jetzt zum Beispiel diese zwei Schriftarten miteinander vergleiche und die Wörter anschaue, also die Arztpraxis in dieser Schnörgeschrift funktioniert mäßig gut. Wenn ich das jetzt einfach mal tausche, dann funktioniert das zum Beispiel schon besser. Also hier sieht man auch gut eben Schrift spricht und kann auch eben ein Image vermitteln. Und wenn ich mich jetzt eben auf die Suche nach Schriften mache, dann ist es natürlich auch abhängig davon, okay, wie viel Textinhalt habe ich, also je mehr Text, desto eher muss ich schauen, dass der gut strukturiert wird. Und danach richtet sich dann vielleicht auch, wie viele Schriften ich brauche und daraus ergibt sich dann auch, ob ich Kombinationen brauche, ob ich vielleicht in Texten Dinge hervorheben muss. Ja, also das ist so ein bisschen grob, wie man sich daran tasten kann. Noch zum Thema Kombination von Schriften. Auf der linken Seite haben wir jetzt zwei sehr verspielte Schriftarten. Wenn wir jetzt jeweils diese beiden auf die rechte Seite nehmen, jeweils für die Überschrift und als Textschrift eine klare Schrift nehmen, dann funktioniert das zum Beispiel viel besser. Also dieser Spruch nur eine kann die Hauptdarstellerin sein, passt für mich ziemlich gut eben nur eine. Was ich sehr gerne mache, wenn ich mit verschiedenen Schriften arbeiten möchte, beziehungsweise wenn ich viele Schriften oder mehrere Schriften brauche, um eben Texten zu strukturieren, dann eignet sich gut Schriftfamilien. Also das ist jetzt zum Beispiel ein Google-Fond Allegria, also die Schriftfamilie heißt Allegria und dann gibt es eben einen Schnitt hier links oben, der ist ohne Serifen. Auf der rechten Seite, der ist mit Serifen. Serifen sind diese kleinen Füßchen beim E, beim N, hier bei dem D, ihr könnt euch das denken. Und hier haben wir jetzt dann noch unten links und rechts jeweils ein Schriftsschnitt. Die Abkürzung SC steht für Small Caps, das sind kleine Großbuchstaben und hier auf der linken Seite eben nochmal die Variante ohne Serifen und auf der rechten Seite mit Serifen. Und dadurch, dass das alles in einer Schriftfamilie ist, ist das, wie soll ich sagen, look and feel ist sehr ähnlich. Also es kommt eben aus einer Familie. Und dann kommt noch dazu, dass wir jetzt von all diesen vier Schrifttypen nochmal jeweils verschiedene Fetten haben. Also von dünn über regular bis fett, haben wir dann eben auch noch Möglichkeit, Schrift auszuzeichnen. So, jetzt mal ein Beispiel, wie das eingesetzt werden könnte. Also in diesem Text ist jetzt diese Allegria eingesetzt, sind fünf verschiedene Schnitte mit jeweils, also jetzt zum Beispiel hier oben für diesen Einleitungstext in 500 Italik, der die Zwischenüberschriften sind in Small Caps mit 700 font-weight. Also ich denke, das ist ein bold oder vielleicht schon semi-black oder ich weiß nicht, da gibt es ja je nach Schrifttyp auch unterschiedliche Bezeichnungen. Und eben ich kann im Fließtext zum Beispiel auch dann auszeichnen mit kursiv und fett oder nur fett. Also so und dieses Schriftbild ist trotzdem noch harmonisch, weil es eben aus einer Familie ist. Also Fazitipo, lesbar muss es sein. Nicht zu wilde Kombinationen wählen, auf Rhythmus im Schriftbild achten, also Rhythmus meine ich, da fällt mir jetzt zum Beispiel auch schon wieder dieser Blocksatz ein, da ist der Rhythmus ziemlich holprig. Also ihr könnt euch so ein gesamtes Schriftbild anschauen und dann auch ziemlich schnell feststellen, okay, das lässt sich fließend lesen, also der Rhythmus ist harmonisch und angenehm. Versalien und ausgefallene Schriften für kurze Überstriften, wie gesagt, maximal eine Zeile. Blocksatz eher vermeiden oder eben auch mit dieser automatischen Silbentrennung arbeiten und keine extravaganz im Fließtext mit extravaganz meine ich zu verschnörkelte Schriften. Dann kommen wir zum Thema Fotos und Bilder. Auch hier ist wieder die Message, okay, es sollte klar sein und man kann sich immer wieder fragen, okay, was sollen denn die Bilder ermitteln zum Thema Ränder und Schatten. Was ich oft sehe, wie jetzt zum Beispiel hier auf der linken Seite, dass man Screenshots, die Zahlen oder auch Text zeigen, dass das Screenshots eingesetzt sind im Fließtext und was ich jetzt hier gemacht habe, habe ich einfach nur einen Rahmen drum gesetzt übers Padding, ein bisschen Abstand nach oben, nach unten und nach innen zum Bild und ja und so lässt sich schon viel besser das Bild optisch trennen im Fließtext. Also jetzt zum Beispiel auf der linken Seite, dadurch dass dieses Bild jetzt keinen Rand hat, ja, kann ich, lässt sich für mich schwer erahnen, okay, wo ist jetzt Inhalt, also Text und wo ist Bild oder Illustration oder was auch immer. Auch ein klassisches Beispiel Screenshot von der Portfolio Seite mit verschiedenen Screenshots von Websites und besonders jetzt bei diesem Beispiel hier etwas in der Mitte. Der Header hat auch einen weißen Hintergrund und trennt sich natürlich deshalb nicht so gut von diesem weißen Hintergrund, genauso hier mit dieser Welle und wenn ich jetzt zum Beispiel auch hier einfach einen Schatten dahinter setze und vielleicht den Abstand ein bisschen vergrößere, trennen sich diese einzelnen Bilder schon viel besser voneinander. Auch eine Variante, farbiger Hintergrund, ein dicker Rahmen um das Bild drum, noch einen Schatten und das sind jetzt so viele Merkmale, die dann dazu führen, dass sich das Bild gut vom Hintergrund trennt. Wenn ich jetzt keinen Rand da drum setze um Bilder, kann man natürlich auch machen, aber hier ist natürlich dann wichtig oder was hier gut funktioniert. Es gibt eben keinen weißen Hintergrund auf dem Bild oder auf den Bildern selber. Es hat wenig Struktur im Anschnitt, also es sind sehr homogene Hintergründe, heben sich natürlich dann auch sehr gut von einem weißen Hintergrund ab. Eben auch ohne Schatten oder ohne Rand. Zum Thema Text auf Bildern, das habt ihr wahrscheinlich auch schon öfter gesehen. Weiße Schrift auf einem Bild, wo ein weißer Hintergrund zwischendurch ist, wie jetzt hier zum Beispiel, also ja, kann man einfach auch nicht so gut lesen. Das Gleiche auch hier, wenn wir einen sehr strukturierten Hintergrund haben, dann hebt sich die Schrift nicht so gut ab, was ich hier empfehlen kann oder was ich auch selber oft mache, dass ich einfach mit so einem Filter oder so ein Overlay auf das Bild lege, so dass die Schrift sich besser abhebt. Man könnte ja auch mit Schatten arbeiten, einen Schatten, der um die Schrift rum geht. Ich bevorzuge eher jetzt so ein Filter, also mit Schatten, bei Schrift muss man auch ein bisschen schauen, ob das dann noch gut aussieht. Und was ich auch hin und wieder sehe, ist eine Verzerrung von Bildern, wie jetzt zum Beispiel hier auf der linken Seite. Ja, das sieht, ich weiß ehrlich gesagt gar nicht, wie so was passiert, ob das ein System automatisch macht oder ob die Leute das so zuschneiden, damit das dann ins Layout passt. Also davon würde ich abraten. Also jetzt gerade auch bei diesem Muster, oder wenn es um Produktfotografie geht, dann wird hier bei dem linken Beispiel schon auch ziemlich klar, so sieht das Produkt sicher nicht aus. Also das Fazit für Bilder, klar, simple, unverfälscht. Also eine optische Trennung zum Hintergrund ist wichtig. Die Abstände zwischen den Bildern sind wichtig. Schrift auf Bildern, eben könnte man mit einem Overlay lösen. Die Bilder eventuell auch abrunden, das gibt es auch noch eine Möglichkeit, die habe ich jetzt hier in den Beispielen weggelassen. Responsive Design Bedenken kommt natürlich auch noch dazu. Also wenn ich jetzt zum Beispiel ein Bild im Header benutze, dann muss ich mir überlegen, okay, sieht das auf dem Handy, auf dem Mobile auch noch gut aus? Ist der Bildausschnitt noch okay, sonst muss man halt auch vielleicht schauen, dass man ein anderes Bild sich raussucht für die Mobile Variante und die Bilder natürlich korrekt zuschneiden. So, jetzt gehe ich auf ein paar Layouts ein. Auf der linken Seite seht ihr immer das Originalbeispiel, was ich im Web gefunden habe und auf der rechten Seite meine aufgeräumte Variante. Was habe ich hier gemacht? Einige Sachen habe ich da gemacht. Also die Top Bar, da habe ich gesehen, okay, diese einzelnen Menüpunkte hatten so einen Verlauf. Das habe ich dann einfach weiß auf dunkelgrau und ohne Verlauf. In dem Header habe ich ziemlich aufgeräumt. Das Logo habe ich etwas reduziert. Linien, die da waren oder Hintergründe, die meiner Meinung nach nicht notwendig waren, habe ich rausgeschmissen. Ich habe die Abstände geändert und man sieht schon, dass da viel mehr Freiraum entsteht und das wirkt dann auch viel übersichtlicher. Dann diese Bilder, das war insgesamt ein ganz schmales Panorama-Bild, wo diese drei Bilder draufgesetzt wurden. Die habe ich voneinander getrennt, sodass die alle drei gleich bereit sind, jeweils auch so ein Rand haben, ein Pixel-Rand und ein Abstand dazwischen, sodass auch klar ist, okay, das sind drei verschiedene Bilder. Hier auf der linken Seite habe ich den Eindruck, da weiß ich erst gar nicht, okay, ist das jetzt ein Bild? Sind das zwei Bilder? Sind das drei, vier oder vielleicht fünf Bilder? Und für die Responsive-Variante ist natürlich auch besser, die Bilder voneinander zu trennen, damit die sich dann untereinander stapeln. Also wenn ich jetzt auf der linken Seite das Bild so nehme, wie es ist und auf einem Mobile mir vorstelle, dann ist das vielleicht zwei Zentimeter hoch und dann kann ich eigentlich nichts mehr erkennen. Im Content ist mir aufgefallen, der Titel war eigentlich fast gar nicht erkennbar, also den habe ich erst mal ziemlich groß gemacht, sodass man auch sieht, auf welcher Seite ich mich befinde oder was das Thema dieser Seite ist. Und hier nochmal der Unterschied, also ich habe auch den Zeilenabstand, die Zeilenlänge, Satzbreite, alles was wir vorher schon gesehen haben umgesetzt. Und was man hier noch auf der linken Seite auch gut sieht, zentrierter Text für den Fleece Text ist auch nicht gut lesbar. So, dann hier wieder auf der linken Seite das Original, auf der rechten Seite meine Variante. Im Header habe ich zum Beispiel auch Hintergrundflächen weggenommen, die meiner Meinung nach auch nicht notwendig waren. Und dann ist mir zum Beispiel auch aufgefallen, dass hier auf der linken Seite die einzelnen Abschnitte gar nicht so klar war, was gehört jetzt zusammen. Und ja, und durch diese einzelnen farblich hinterlegten Flächen habe ich eben diese Abschnitte deutlich voneinander getrennt und so ist klar, okay, dieses Bild mit diesem Button und mit diesem Text, das gehört zusammen. Also es geht hier eben auch um Gruppierung durch Flächen. Auch noch ein Beispiel, hier haben wir jetzt zum Beispiel, haben wir Bild und Text jeweils und da ist jetzt keine Hintergrundfläche und nur alleine durch seine leichte Hintergrundfläche hält das schon zusammen und wird als ein Element wahrgenommen. Und auch hier nochmal zwei Screens von einer Website, wo man auch gut sieht, dass man eben gut mit diesen Hintergrundflächen spielen kann, ob das jetzt in Form von Fotos ist oder unifarbenen Flächen, ob in Beech oder in so einer Knallfarbe, die eben jetzt in dem Fall auch im Logo vorkommt. Ja, sieht man ganz gut, wie sich das dann schön trennt, wie man damit spielen kann. Probierung durch Abstände. Hier haben wir jetzt oben ein Screen vom Original und darunter, wie ich den jetzt in dem Fall, wie jetzt CSS und ich habe dann ein Screenshot davon gemacht, wie ich das verändert habe. Man sieht schon grundsätzlich, dass hier einfach mehr Freiraum ist. Also das, was jetzt der große Unterschied ist, sind die Abstände. Ich gehe mal noch zum nächsten Screen, da sieht man das ganz gut. Also die Elemente, die innerhalb dieses Trapez oder dieses 6X sind, diese Elemente, wenn ich die jetzt umrabe, dann ist nach außen sehr wenig Platz. In der unteren Version ist nach außen mehr Platz und deshalb habe ich auch automatisch das Gefühl, dass das eine Gruppe ist. Also hier in den Kreisen auf der rechten Seite sieht man eben deutlich auch, der Abstand jetzt zum Wort kategorieren ist unten viel größer als oben im Original. Also alleine dadurch, dass eben der Abstand nach innen kleiner ist und der Abstand nach oben größer, halten die Inhalte besser zusammen. Und wenn ich jetzt zum Beispiel alleine schon dieses kleine Eiken mit typo anschaue, ich habe jetzt zum Beispiel den Zeilenabstand verändert, weil erstmal gehört dieses Wort Page-Bilder Divi, das ist ja erstmal ein Element, das vorher zusammen gehört, bevor es sich quasi mit diesem Eiken, mit diesem Bildschirm verbindet. Und eben, wie man hier links im Kreis sieht, ist das insgesamt harmonischer als jetzt hier oben. Ja, und was ich noch verändert habe, ich habe diese Suchleiste ein bisschen schmaler gemacht, diesen Rand jetzt zum Beispiel habe ich in dem Fall weggenommen, weil also der Rand, diesen Border um das Suchfeld herum, weil der Kontrast ist ja zum Hintergrund stark genug, so dass ich den nicht brauche, also eben auf Elemente verzichten, die man nicht wirklich braucht. Und was mich auch noch gewundert hat, dass jetzt zum Beispiel die Strift hier sehr hell war, die habe ich jetzt zum Beispiel auch noch dunkel gemacht, damit der Kontrast einfach noch besser ist. Also Fazit Layout, klare Gruppenbilden. Man kann sich gut immer fragen, okay, was gehört zusammen, was eher nicht, auf welche Elemente kann ich verzichten, Linienflächen schatten und so weiter, dann immer schön die Zwischenräume und Abstände kontrollieren und in dem Ganzen gerne Luft zum Atmen lassen. Also wozu Design, Design ist Kommunikation. Also wir wollen ja etwas vermitteln. Und wenn es aufgeräumt ist, dann ist es automatisch übersichtlicher. Und diese Klarheit führt natürlich dazu, dass Websites oder allgemein Design auch verständlich ist. Also schließt sich der Kreis wieder mit der Kommunikation. Ja, das war es von meiner Seite aus. Und ja hier gerne nochmal der Link von meiner Website, von meinem neuen Projekt. Und ja, jetzt würde ich dann einladen für Fragen. Und ja, ich hoffe, es hat euch gefallen. Und ja, freue mich auf eure Fragen.