 Ich bin nicht dafür Englisch-Sprecherin und Französisch-Sprecherin. Ich probiere es doch auf Deutsch und ich biete um Entschuldigung in voraus, wenn es Fehler gibt. Ich darf Yvonne Dickopf begrüßen für Wo zu Design. Yvonne ist Designerin, sie ist auch Fotografin, sie arbeitet hauptsächlich für Selbstständige. Sie wird das alles prima erklären. Ich bitte euch nochmals für diejenigen, die das vielleicht vorher nicht gehört. Nach diesem Vortrag machen wir noch ein Gruppenfoto mit alle Teilnehmer der Worldcamp. Da auf der Treppe, gerade 10 nach 4, nach diesem Vortrag. Das wäre schön, wenn möglichst viele dabei sind. Danke. Merci. Wie du schon gesagt hast, ich bin Fotografin und Designerin. Mein Name ist Yvonne Dickopf. Ich habe in Berlin bzw. Potsdam Kommunikations- und Interface-Design studiert. Ich habe damals schon die ersten Screen-Designs mit Photoshop gemacht und auch HTML-Grundkurs. Seit 2013 arbeite ich mit WordPress. Ich mag es aufgeräumt. Grundsätzlich, wenn da irgendwie Zeug rumliegt, dann werde ich ein bisschen nervös. Design sollte auch aufgeräumt sein. Das führe ich mal so kurz ein. Man könnte sagen, zu ungefähr einem Drittel ist es barrierefrei. Zur Barrierefreiheit zählen tendenziell diese drei Aspekte. Das Design, der Inhalt, wie ist der Text, wie ist das sprachlich aufgebaut, der Inhalt einer Webseite und wie ist es technisch aufgebaut. Ich spreche heute über den ersten Punkt, nämlich das Design. Alles, was ich erzähle, könnte man sagen, ist auch für die Barrierefreiheit tendenziell brauchbar diese Regeln. Ich werde über Farben sprechen, überschriften, Bilder und deren Kombinationen und werde noch ein paar Layout-Beispiele in Gesamtbeispiele zeigen. Fangen wir an mit den Farben. Grundsätzlich kann man sagen, es sollte grundsätzlich mal stimmig sein. Da haben wir diesen Farbkreis. Da können wir jetzt ganz viele schöne, tolle Farben auswählen. Wenn man davon vielleicht ein paar zu viele auswählt, könnte so was dabei rauskommen. Ich hoffe, an den Screens sieht man es ein bisschen besser, wenn es um Farben geht. Was hier auch schon mal ein bisschen schwierig ist, ist, dass man den Kontrast von dem Button nicht ausreichend ist. Ich habe die Hauptfarben rausgepickt und dann sieht man schon, das sind ziemlich viele. Jetzt habe ich mir erlaubt, die mal auszutauschen oder ein bisschen aufzuräumen. Ich habe zum Beispiel dieses grün gegen das Orange ersetzt. Das T-Shirt habe ich mir erlaubt, einfach hellblau zu machen. Das war oben. Dann habe ich geändert von dem hellblau in das Violett, was ich auch in diesem Hintergrund, in diesem Farbverlauf wiederholt. Grundsätzlich ist das schon mal harmonischer. Wie herstelle ich denn jetzt eine Farbpalette? Jetzt nehmen wir einfach diese vier Hauptfarben ziemlich knallig. Wenn ich jetzt schon mal die Sättigung ein bisschen runterschraube, ist das nicht mehr ganz so aufdringlich. Dann nehme ich vielleicht diese zwei Farben oder diese zwei oder diese zwei und erweitere die dann um ein paar Abstufungen. Das ist der gleiche Farbton, aber einfach ein bisschen weniger Deckkraft. Ergänze das vielleicht noch um ein Antrazid und ein Hellgrau. Dann habe ich eigentlich schon eine Farbpalette. Wenn ich mit Farben ein bisschen unsicher bin, habe ich schon eine Farbpalette, mit der ich gut arbeiten kann. Ein paar Beispiele. Hier haben wir auch Farben aus der gleichen Region der Farbpalette. Also da oben, da sind noch zwei. Ganz helle eben, das sieht man vielleicht auf denen. Das war meine Befürchtung, aber okay. Wie man aber schon an dieser Website auch sieht, es gibt so Abschnitte, die seht ihr glaube ich, da gibt es helle Flächen. Was ich hier eigentlich sagen will, okay, da sind relativ viele Farben benutzt, auch knallige Farben, aber diese knalligen Farben sind ziemlich dosiert eingesetzt. Also für die Hintergründe sind hauptsächlich schwächer Rüffer. Auch vielen Dank, ich glaube, das geht besser. Also für die, die Knallfarben sind auf jeden Fall eben dezent eingesetzt für die Akzente und Buttons und ja, wie ihr seht. Auch noch ein schönes Beispiel finde ich, hier ist es auch relativ gewagt, würde ich mal so sagen. Trotzdem ist es gut eingesetzt, sollte man natürlich auf die Kontraste achten, dass man Schrift noch gut lesen kann auf dem Hintergrund. Yeah, yeah, I know, sorry, I'm trying my best duty. Ja, das ist immer das Ding mit Beamer und Farben und Bildschirmen. Ja, auf jedem Bildschirm, auch wenn man Websites baut, je nachdem ist das mit Farben nicht so einfach, dass die so dargestellt werden, wie man das gerne hätte. Also grundsätzlich würde ich sagen, Fazit mit Farben, Vorsicht mit zu vielen Knallfarben, Abstufungen von Farbtönen benutzen, vielleicht eher mit benachbarten Farben aus diesem Farbkreis arbeiten und die Kontraste beachten. Jetzt erzähle ich was zum Thema Text und Typografie. Es wird ein etwas längeres Kapitel, aber ist auch irgendwie logisch. Wir haben auf Websites viel mit Text und Inhalt zu tun. Grundsätzlich, denke ich, ist es wichtig, dass das Ganze lesbar ist. Zum Schriftsatz allgemein. Wenn wir jetzt da mal so ein Text haben, der ist unformatiert, dann haben wir da so ein Wald aus Buchstaben und jetzt pass ich den mal so ein bisschen an. Also das, was ich als Allererstes anpasse, ist die Satzbreite. Also die, dass die Zeilen einfach nicht mehr so lang werden. Ich verändere die Schriftgröße. Also ich mache die Schriftgröße, ändere den Zeilenabstand, mache vielleicht noch einen Absatz nach den einzelnen Abständen. Das wird immer übersichtlicher. Partifo ist das, das ist jetzt ein Screenshot von der Subpage vom Team 2023. Das ist eigentlich schon ziemlich gut ab dieser Stelle eingestellt. Also Schriftgröße, Zeilenabstand, Satzbreite, Abstände zwischen den Absätzen. Was ich natürlich jetzt noch machen kann, ist, dass ich die Zwischenüberschriften auszeichne, indem ich sie fett mache, oder vielleicht auch ein bisschen größer. Was ich auch noch gut machen kann, ist, dass ich Linien dazwischen setze. Also das ist jetzt natürlich ein sehr kurzes Textbeispiel, aber wenn ich so riesen lange Texte habe, dann ist es natürlich schon hilfreich, diesen Text so strukturieren. Dann kann das hilfreich sein, oder eben dieser Schriftauszeichnung zu strukturieren. Ja, und dann kann man natürlich noch mit den Schriftstilen spielen oder einsetzen. Also jetzt ist dieser Einleitungstext einfach in der Kursiven und auch diese Zwischenüberschriften kursiv. Zum Thema Blocksatz. Ich weiß nicht. Ja, jetzt ist dieses Textbeispiel einfach mal ein Blocksatz gesetzt. Blocksatz ist, wenn es links und rechts bündig ist. Und dann passiert das, was hier an diesen markierten Zeilen sieht. Die Oberzeile da entstehen so große Lücken. Was in der Mitte passiert, das wird so eng, dass es kaum Abstand zwischen den einzelnen Wörtern gibt. Und ja, ganz unten entstehen auch sehr große Lücken. Das ist ein ganz krasses Beispiel. Und vor allem, wenn die Spalten je schmaler eine Spalte ist, so größer werden diese Lücken. Also auch bei diesen markierten Zeilen sieht man das ziemlich deutlich. Man sucht irgendwo, also es ist unübersichtlich, man weiß gar nicht, wo man anfangen soll zu lesen. Das habe ich noch gefunden und fand das auch sehr verwirrend. Also lieber Flatter-Satz. Flatter-Satz heißt das deshalb, weil das rechts so flattert. Und wenn Blocksatz und auch schmale Spalten, die Kombination, wie gesagt, ist schwierig, dann bietet sich das zum Beispiel auch an, vielleicht auch im Mobile, also beim Responsive Design bei schmale Spalten, eine automatische Silbentrennung im CSS einzusetzen, vielleicht eine eigene Klasse anzulegen dafür. Großbuchstaben, auch Versalien genannt. So, jetzt habe ich den ganzen Text in Großbuchstaben. Und ja, irgendwie wissen wir das alle. Großbuchstaben im Fließtext kann man nicht gut lesen. Hier mal ein Beispiel. Auf der linken Seite ist das Original. Das sind zwar noch relativ kurze Titel. Und trotzdem lässt sich das auf der rechten Seite besser lesen mit Groß- und Kleinbuchstaben. Und irgendwie wissen wir das, glaube ich, alle. Großbuchstaben im Fließtext nicht so gut lesbar. Und ich würde euch gerne erklären, warum. Einmal das Wort in Großbuchstaben, einmal in Groß- und Kleinbuchstaben. Wenn ich da jetzt so Blöcke drüber setze, dann haben wir immer noch eine Information durch die Ober- und Unterlängen, die uns helfen, dabei ein Wort zu begreifen oder zu erfassen. Also, das sind die Ober- und Unterlängen. Also, so wäre jetzt ein Beispiel dafür, wie es sich anbietet, Großbuchstaben einzusetzen, nämlich in Zwischenüberschriften. Ich würde sagen, maximal eine Zeile. So könnte man so als Grundregel verwenden. An dem Logo sieht man ganz gut, obwohl die Wörter abgeschnitten sind, durch die Ober- und Unterlängen haben wir genug Informationen, die Wörter trotzdem noch zu lesen. Funktioniert natürlich nicht mit allen Wörtern. Also, es funktioniert natürlich nur mit den Wörtern, die genug Ober- und Unterlängen haben. Ein Stück Wasser nehmen. Ja, und auch die Kombination von Schriften, die sehr verspielt sind, wie jetzt hier auf der linken Seite in Kombination mit Großbuchstaben, ist auch nicht so... Das ist ja jetzt ein Extrembeispiel, aber daran sieht man es ganz gut. Im Kontrast von Vorder- und Hintergrund, wenn wir jetzt den gleichen Text hell haben auf dunkel oder eine helle Farbe, helle Schrift auf hellem Hintergrund, helle Farbe auf hellem Hintergrund, sieht das so aus. In dem Fall funktioniert das natürlich besser auf dunkelem Hintergrund. Hier ist jetzt der Text weiß. Und da ist natürlich auch sehr ein harter Kontrast wiederum. Also, ich würde den hellen Text auf dunkel eher leicht abdunkeln, also mit einem hellen Grau arbeiten. Das überstrahlt nicht so. Also, gerade auf den Screens weiße Schrift, 100% weiße Schrift auf dunkelem Hintergrund, überstrahlt halt ziemlich stark. Ja, und was ich auch empfehlen würde, ist es eine 400, die Fundweight auf 400 zu stellen, also in der Regel ein regular Schnitt. Sieht man hier auch, wenn es zu dünn ist, dann ist der Kontrast eben auch nicht ausreichend. So, wie wähle ich dir jetzt Schriften aus? Ja, die Frage wurde mir auch schon öfter gestellt, ist nicht so pauschal zu beantworten. Vielleicht muss man sich erst mal fragen, okay, wie sieht das Corporate-Design aus? Gibt es ein Corporate-Design? Wenn es kein Corporate-Design gibt, kann man sich vielleicht ein bisschen Gedanken darüber machen, okay, kann man wie ein bisschen eins erstellen? Okay, und dann ist die Frage okay, was will ich denn durch die Schrift erzählen? Also, will ich freundlich daherkommen? Will ich seriös daherkommen? Also, Schrift spricht? Also, welche visuelle Sprache möchte ich sprechen? Dann gibt es natürlich noch den Punkt, okay, wofür brauche ich die Schrift? Also, es gibt zum Beispiel auch Tabellenziffern, wenn man viele Tabellen hat, dann gibt es Schriften, deren Zahlen alle gleichbreit sind, die in der Tabelle so hin und her verschoben sind. Ja, und hier sieht man das eigentlich ganz gut. Also, das Wort Arztpraxis in dieser Schrift funktioniert, glaube ich, umgekehrt, ein bisschen besser. Wenn ich mich dann auf den Weg mache und eine Schrift finden möchte, kann man sich noch fragen, okay, wie viel Textinhalt habe ich denn überhaupt? Wie muss der strukturiert sein? Also, eben welche Menge. Und danach ergibt sich dann auch vielleicht die Anzahl der Schriften. Also, wenn ich wirklich viel Text habe, eben wie ich vorher mit den Linien und den Zwischenüberschriften gezeigt habe, kann man sich dann überlegen, okay, wie will ich den strukturieren? Und dann kann man schon natürlich gucken, okay, ich brauche jetzt, was weiß ich, 4, 5 Schriften. Ja, und dann die Frage eben, wie kombiniere ich die miteinander? Und ja, ich finde den Spruch ganz gut. Nur eine kann die Hauptdarstellerin sein. Auf der linken Seite haben wir jetzt eigentlich 2 Hauptdarstellerinnen und die konkurrieren so ein bisschen miteinander. Und auf der rechten Seite haben wir die gleichen Schriften, wie auf der linken Seite nur jeweils in der Überschrift und dann in Kombination mit einer Schrift als Text, der sich einfacher auch lesen lässt. Ein gutes Beispiel jetzt zum Beispiel, das sind 4 Google-Fonds, ist aber aus einer Schriftfamilie. Was ich hier zeigen will, okay, da gibt es jetzt zum Beispiel diese Allegria sans, dann gibt es die gleiche auf der rechten Seite oben mit Serifen. Also das sans steht für ohne Serifen. Unten links haben wir die ohne Serifen, aber in Small Caps, also das sind kleine Großbuchstaben. Und auf der linken Seite das gleiche dann mit Serifen. Also Serifen, das sind diese kleinen Füßchen. Und dann gibt es eben aus jeder dieser Schriftfamilien nochmal verschiedene Fetten, von Sinn bis Black, mit denen wir dann auch noch, also die man gut miteinander kombinieren kann. Und was ich damit sagen will, ist, also obwohl man sagt ja manchmal, man hört das okay, nicht zu viele Schriften auf einmal verwenden, aber wenn man in einer Schriftfamilie bleibt, ändert sich im Prinzip das Lücken viel nicht so, wenn man eben in einer Schriftfamilie bleibt. Das ist jetzt einfach ein Beispiel dafür, das könnte man gut miteinander kombinieren. Ah ja, das ist das Beispiel dafür. Also hier sind jetzt zum Beispiel aus dieser Schriftfamilie 5 verschiedene Schnitte mit verschiedenen Fetten, also mal kursiv, mal nicht kursiv, ganz oben in dem Einleitungstext ist mit Serifen, die über Schriften sind eben in Small Caps. Und man sieht insgesamt okay, das Schriftbild, das fliegt nicht auseinander oder so, es bleibt alles im gleichen Design. Also grundsätzlich würde ich sagen, Typografie sollte lesbar sein, es sollten nicht zu wilde Kombinationen sein, dann auf den Rhythmus achten, also wie jetzt zum Beispiel in den Blogsatz mit diesen Lücken, also dass man wirklich ein Text gut, dass er sich gut lesen lässt. Versalien und ausgefallene Schriften für kurze Überschriften verwenden, maximal vielleicht eine Zeile, Blocksatz möglichst vermeiden und ja, nicht zu viel extra, aber ganz im Fließtext. Fotos und Bilder. Auf der linken Seite sehen wir das Original, auf der rechten Seite habe ich per CSS mit diesen vier Zeilen einfach mal so einen Rahmen da drum gesetzt. Also gerade, wenn wir einen langen Inhaltext haben, wo dann Bilder drin vorkommen, wo wiederum Text drauf vorkommt, dann finde ich erst recht, dass wichtig, dass die wie abgegrenzt werden vom Rest, sonst lässt sich das wie kaum unterscheiden vom Inhalt, also Text und Bild. Auch ein klassisches Beispiel, ein Portfolio von Websites, das sind jetzt einzelne Screens, dann sehen wir das in diesem Raster und die Screens, die jetzt selber einen weißen Hintergrund haben, sind eben wieder auf dem weißen Hintergrund, sind eben im gesamten weißen Hintergrund ab. Und ja, da kann man auch ganz leicht durch vielleicht eben einen Rand, einen Schatten, vielleicht die Abstände zu den einzelnen Bildern noch verändern. Ja, und das auch, hier sieht man ganz gut das, da sind jetzt viele Möglichkeiten eingesetzt. Da gibt es einen relativ dicken weißen Rand, einen Schatten und dieser Rand ist weiß und dann haben wir noch eine andersfarbige Hintergrundfläche. Da können sich Bilder auf denen viel los ist, auch gut vom Hintergrund abheben. Dann gibt es natürlich auch die Variante, wenn die Fotos selber so homogen sind und selber einen starken Kontrast haben, dann können sie sich natürlich auch ohne Schatten oder ohne Rand vom Hintergrund gut abheben. Jetzt zum Beispiel hier, ja, das sieht man jetzt auch wieder. Also ganz besonders in Online-Shops sehe ich das oft, dass gerade Freisteller, also das ist jetzt auch durch den Screen nicht so super zu sehen, aber wenn weiße Hintergründe eben auf weißem Hintergrund sind, dann fliegen die Gegenstände so durch die Gegend und man ist besser den Hintergrund vom Foto selbst ein bisschen abzuheben, rund oder eckig. Grundsätzlich würde ich sagen, okay, auf der linken Seite haben wir ein eckiges Bild, auf der rechten Seite ist es auf jeden Fall schon insgesamt ein bisschen weicher. Man könnte schon mal sagen, okay, ja, dieses Eckige ist auf jeden Fall härter. Und ich finde, dass die Rundenbilder sich noch immer gut in Content integrieren. Für dem Raster funktioniert das natürlich gut, wenn es eckig ist, weil da ist sowieso klar, dass es das Raster, wenn das jetzt alles rund wäre, dann wären das so bunte Punkte, die rumfliegen würden. In dem Fall funktioniert eckig gut. Wenn man sich jetzt entscheiden will, okay, soll das groß sein, das Foto, soll es klein sein, soll es rund sein, soll es eckig sein. Erstmal muss man sich natürlich fragen, okay, was will ich darstellen oder wo da ist das, was auf dem Foto zu sehen ist, muss das groß zu sehen sein, ja oder nein. Wenn nicht, dann würde ich jetzt zum Beispiel eher so machen, wie ganz rechts, und das dann rund machen. Die linken Seite, das ist nicht so ganz klar, also es passt sich nicht so gut ans Layout an. Und in dem Blog-Editor ist das ja auch noch cool, man muss nicht mehr irgendwie mit Transparenzen in Photoshop oder so arbeiten. Ich kann ein quadratives Bild hochladen, kann da auf Bild klicken, auf diesen Kreis und abgerundet anklicken und dann ist das automatisch rund. Wenn es quadratisch ist. Text auf Bildern, das haben wir wahrscheinlich auch schon oft gesehen, weiße Schrift auf dem Hintergrund, der viel Struktur hat oder auch weiß im Hintergrund ist, funktioniert auch nicht so gut. Das funktioniert auch nicht so gut, eben auch gerade wenn viel Struktur auf dem Bild ist und dann bietet sich das an, so ein Overlay dazwischen zu legen oder vielleicht mit einem Schatten zu arbeiten, aber ich finde diese Overlay-Funktion eigentlich auch noch sehr praktisch. Ja, und Bilder im Hero, manche Kunden, die können sich dann liefern mir ein Bild und sagen dann, ja, so hätte ich das gerne und dann ist aber, weiß was ich, dann ist hier ein Kopf und da ein Kopf und wenn ich das dann responsiv mache, sind die zwei Köpfe weg. Ja, es gibt natürlich auch die Möglichkeit zu sagen, okay, für Mobile nehme ich ein anderes Foto, also einfach, dass man das auch mit bedenkt, wenn man mit Bildern arbeitet. Ja, was ich auch oft sehe, ist, dass die Bilder dann so verzehrt werden. Ich weiß gar nicht, ob die Leute das manuell machen oder ob das irgendein System automatisch macht, dass dann Bilder wirklich wie gequetscht und verzehrt werden. Ja, macht sowas nicht, das sieht nicht gut aus. Ich habe übrigens, also einmal kann das PDF übrigens auch runterladen, es gibt dann noch einer gleichen Link. Ich habe eine Linkliste auf diesem PDF, wo es auch ein paar Tools gibt, wo man wirklich einfach Bilder hochladen kann und die in dem gleichen, also dass die Proportionen gleich sind, zuschneiden kann, also man braucht nicht Photoshop, um das zu tun. Also wichtig bei Bildern ist sicher die optische Trennung zum Hintergrund, auch wenn das auf dem Screen leider nicht so doll rübergekommen ist, Abstände zwischen den Bildern beachten, eben bei Schriftaufbildern gerne mit Overlay, die Bilder eventuell abrunden, also mal drüber nachdenken, ob das eine Option ist, responsive Design bedenken und die Bilder korrekt zuschneiden. Jetzt bringe ich ein paar noch so Gesamt-Layout-Beispiele und hierbei geht es grundsätzlich darum, dass einfach ein Web-Design übersichtlich ist oder vor allem die Information übersichtlich ist. Auf der linken Seite haben wir das Original, auf der rechten Seite meine Version oder meinen Vorschlag dazu. Ich habe da ein bisschen aufgeräumt und mal angefangen in dieser Top-Bar. Da ist ein Verlauf in der Schrift gewesen. Das habe ich vereinfacht. Dann habe ich den Header ziemlich auseinander genommen. Also ich habe das Logo erst mal vereinfacht, habe den ganzen ein bisschen mehr Platz gegeben, auch was die einzelnen Elemente im Header angeht. Ich habe Linien und Flächen, wo ich gedacht habe, okay, die sind eigentlich nicht notwendig, um mir zu visuell das Ganze aufzuteilen, habe ich rausgeschmissen. Die Bilder, also das war jetzt zum Beispiel ein Bild, da waren drei Bilder auf einem Bild zusammengesetzt. Fürs Responsive ist natürlich auch nicht so toll, weil dann ist das, glaube ich, nicht acht Zentimeter breit und drei Zentimeter hoch. Das sieht man auch nicht mehr so gut. Auch hier habe ich die Klar voneinander getrennt, einen Abstand dazwischen, den gleichen Abstand, dass die Bilder alle gleich breit sind, einen Rahmen drum gesetzt. Und lassen sich natürlich mit Responsive Design dann auch untereinander stapeln. Im Content, wir haben vorhin über Blogsatz, ich habe was über Blogsatz gesagt, Fließtexte zentriert zu setzen, ist auch nicht so gut lesbar. Unser Auge versucht immer, wenn die Zeile gelesen hat, in die nächste Zeile zu springen, und wenn die immer sich ändert, dann ist das schwierig, die nächste Zeile zu finden. Also ich habe dann noch eben die Schriftgröße verändert und wieder die Satzbreite angepasst. Und vor allem habe ich den Titel vergrößert. Den habe ich als Erstes irgendwie gar nicht gefunden. Ja, noch mal im Vergleich. Die zwei Screens nebeneinander. Ja, und auch hier auf der linken Seite, das Original. Und ich würde sagen, vom Design habe ich da eigentlich gar nicht viel verändert. Also auch wenn das jetzt Geschmackssache ist, dass die Button so orange sind und der Header mit einem hellblauen Hintergrund, muss man nicht mögen. Auf jeden Fall, ja, habe erstmal von dem Logo diesen Hintergrund weggenommen, dass da nicht ein farbiger Hintergrund nochmal auf dem Hintergrund ist. Ich habe mir erlaubt, auch einfach diese Schaltflächen in der Hauptnavigation wegzunehmen. Weil ich glaube, dadurch, dass eben dieser Header schon eine eigene farbige Fläche hat, erkennt man ja, okay, das ist die Hauptnavigation, hat Navigation, da braucht es nicht nochmal zusätzliche Schaltflächen. Ja, und im Content war mir persönlich erstmal nicht klar, okay, gehört das überhaupt zusammen? Also es gibt eine ziemlich harte Trennung durch diesen Schatten oder diesen Rahmen. Ja, auf jeden Fall auf der linken, auf der rechten Seite wäre meine Idee, das so klarzustrukturieren und eher mit Hintergrundflächen abzu, die einzelnen Abschnitte voneinander zu unterscheiden. Natürlich wird der Content länger, aber ich denke mir, ich weiß nicht, ich habe das eigentlich schon ziemlich früh mitbekommen, oder hat man im Studium, haben die das erzählt? Wir sind ja auf Websites, man kann ja scrollen. Also, ja, und wenn ich jetzt diese drei Fotos habe, jeweils ein Text darunter, könnte ich zum Beispiel auch durch eine Hintergrundfläche, also vorhin habe ich das getestet und da hat man das besser gesehen. Auf jeden Fall gibt es da jetzt eine Hintergrundfläche hinter dem Text und so wird das besser einfach als Gruppe zusammengehalten. Also ich gehe nochmal kurz zurück, ohne diese Hintergrundfläche, ja, fliegt es auch wieder alles ein bisschen um und durch so eine einfache Hintergrundfläche kann man gut auch Objekte oder Elemente zusammenhalten. Auch hier sieht man ganz gut, man kann eben auch mit diesen Farben, mit farbigen Hintergrundflächen arbeiten, um einzelne Partien voneinander abzugrenzen. Gruppierung durch Abstände, oben das Original, unten meine Version. Was wir jetzt hier zum Beispiel schon mal sehen, das, was ich gelb umrahmt habe, unten haben wir viel mehr Platz ringsrum, also sprich, das bildet schon mal insgesamt eine eindeutigere Gruppe im Gegensatz zu oben. Ich habe zum Beispiel den Abstand, der Abstand hier ist kleiner als der oben, oben ist der Abstand, oben der Grüne, kleiner als der da drunter und dadurch ist die Zusammengehörigkeit von dieser Gruppe nicht so ganz klar. Und dann habe ich noch die einzelnen Icons. Also ich habe erst mal, ich bin auf diese Website gekommen und dachte, okay, irgendwas ist da komisch. Und wenn man sich jetzt den Abstand oder den Zeilenabstand von diesem Page-Bilder Divi anschaut, oben, dann ist der Abstand größer als der zum Icon. Das heißt, ich habe erst mal den Zeilenabstand verringert, sodass das Wort erst mal zusammengehört und dann den Bezug zum Icon hergestellt, indem ich diese Abstände korrigiert habe. Das ist wie schon mal ein einzelnes Element, als einzelnes Element klarer erkennbar. Dann habe ich den Suchblock noch etwas verschmalert. Und auch hier ist jetzt zum Beispiel, im oberen Beispiel ist ein Rand um dieses Suchfeld und dadurch, dass der Kontrast ja eigentlich von dem Suchfeld schon genug ist zum Hintergrund, braucht man meiner Meinung nach nicht noch diese Linie. Das ist das, was man eigentlich nicht braucht, weg. Also, beim Layout, was gehört zusammen, was nicht? Auf welche Elemente kann man verzichten, im Linienflächen, Schatten, oder vielleicht auch Farben, die zu viel sind, auf Zwischenräume und Abstände achten und Luft zum Atmen lassen. Also, wozu Design? Design ist Kommunikation, wenn es aufgeräumt ist, ist es übersichtlicher und diese Klarheit macht die Dinge verständlicher. Ich bin ziemlich schnell, oder? Das geht. Wir haben auf jeden Fall noch Zeit für Fragen. Vielen Dank. So, vielen Dank, Yvonne. Sehr interessant. Und es gibt sich Fragen jetzt dazu. Ja, Yvonne, mich würde die Frage nach Farbverläufen, was du da überdenkst, weil jetzt kann man ja mit WordPress Farbverläufen machen. Und ich habe da jetzt kein Beispiel gesehen. Was ist deine Meinung dazu? Also, Farbverläufe waren tatsächlich bei uns im Studium, im Hinterfestdesign verpönt, sind jetzt irgendwie total im Kommen. Aber wenn jetzt zum Beispiel diesen Screen, ich gehe noch mal schnell zurück. Hier ist ja auch... Warte, Moment. Wir haben auch einen leichen Farbverlauf. Find ich in dem Fall überhaupt nicht störend. Weil es ist trotzdem eine homogene Fläche auf Buttons, je nachdem, wenn der Kontrast ausreicht. Also, wenn wir jetzt auf einem Button einen Farbverlauf haben und die Schrift da drauf hat, vielleicht die gleiche Farbe ist natürlich nicht so geeignet. Ja, ist irgendwie, ich weiß nicht, Geschmackssache auch. Also, ich habe nichts gegen Farbverläufe, aber ich denke, der gesamte Farbverlauf sollte noch so viel Raum haben, dass es nicht zu bunt wird und immer noch relativ homogen bleibt. Beantwortet das deine Frage? Ja. Okay, hier vorne. Ja, ich habe jetzt keine Frage, aber vielleicht noch eine Ergänzung, weil da ist das ja auch angesprochen, ein Thema Barrierefreiheit, responsives Design und so. Gerade für die Suchmaschinenoptimierung geht es halt eben nicht nur darum, technische Optimierungen zu berücksichtigen oder es die Seite schnell lädt oder solche Geschichten, sondern eben auch die Suchmaschine schaut sich natürlich auch das Design an. Und was man da eben häufig sieht, ist, dass im Algorithmen auch bewerten, wie gut ist der Kontrast. Zum Beispiel, dass man halt eben, wenn man halt weniger prägnante Farben verwendet, dass man dann eben einen guten Kontrast zueinander hat, suchmaschinen Algorithmen berücksichtigt. Und was du halt erwähnt hattest, vielleicht noch mal unterschreichen zum Thema, ja, sagen wir mal, Übersichtlichkeit und Klarheit, dass man eben Schaltflächen auch so anwendet, dass man sie eben auch mit den Fingern zum Beispiel gut bedienen kann. Also Platz zwischen Inhalten, was jetzt insbesondere Schaltflächen betrifft, also Buttons, und sie halt eben auch so Design oder so gestalten, dass sie halt eine Größe haben, um die Fingereingabe zu erreichen sind. Genau. Und dass sich halt Dinge nicht überlagern sollten, so was. Das sind halt noch mal Sachen, die halt für die Suchmaschine auch noch mal eine Relevanz durchaus darstellt. Danke. Man kann ja im Web animieren, schriften die Reinfliegen, bilden die aufzummen, wieder zuzummen. Was ist deine Meinung dazu? Ich denke, das ist... Es ist natürlich Geschmackssache wie in mir, aber was ist deine Meinung? Ich glaube, es kommt auf die Menge drauf an. Und wie viel Aufmerksamkeit muss man haben? Also wenn ich jetzt zum Beispiel eine Slideshow habe mit Bildern, und da sind irgendwie 30 Bilder drin, die da so durchlaufen, finde ich das anstrengend. Also einfach fürs Auge. Ich denke, da kann man sich auf sich selbst auch ein bisschen verlassen. Ja, weniger ist vielleicht mehr. Wenn es nötig ist, wenn da mal so was reinkommt, was wirklich Aufmerksamkeit möchte, würde ich sagen, okay. Aber wenn ständig irgendwas rumfliegt, nee, danke. Die Schweiz ist ja ein Land von Typografie, mit Helvetika, Frutiger. Und vor über 30 Jahren hat, so alt bin ich eben schon, da hat SBB oder IBM Raster unglaublich darauf Wert gelegt, dass einheitlich typografiert wurde. Und ich sehe das jetzt bei den Jungen, dass die ganz mutig Serifenschriften mit Groteskschriften mischen, kursiv versus nicht kursiv im Titel. Und das erstaunt mich eigentlich, dass das geht, aber es ist sehr attraktiv, um zu lesen und zu schauen, was ist da passiert in den letzten Jahren? Boah. Also, da fragst du mich was. Also, ich finde es auch keine 100-Prozent-Typografen. Ich interessiere mich sehr für Schriften. Ich kaufe Schriften wie andere Frauen Schuhe. Ähm... Ähm... Ähm... Gott, ich weiß... Ihr seid einfach mutiger geworden, als Web-Design. Also, ich finde es grundsätzlich cool, dass man wirklich auch inzwischen mehr Auswahl hat, als jetzt Arial und Comic-Song. Ähm... Ich denke, im Web gelten einfach irgendwie andere Richtlinien, als wie für Printmedien, weil die Art und Weise, wie Medien konsumiert werden, hat sich sicherlich auch geändert. Das heißt, man liest heutzutage nicht mehr Zeile für Zeile, das heißt, man liest zwischen Überschriften und man versucht, im Web viel mehr strukturiert zu arbeiten. Das heißt, man achtet mehr darauf, dass man vielleicht Aufzählungspunkte benutzt. Und die Aufmerksamkeit Spanne ist, glaube ich, im Web eine andere, als die, wenn ich einen Fließtext in einem Buch lese, wo ich wirklich Zeile für Zeile lese, wo es sich in den letzten Jahren eigentlich mit Serifen... oder wo es sich eigentlich schon seit Jahrzehnten eigentlich, wo man eben mit Serifen arbeitet, ist, glaube ich, im Web... diese strikten Regelungen, und es kommt, glaube ich, auch sehr stark darauf an, an welche Zielgruppe richte ich mich. Also, habe ich einen Blockbeitrag, wo ich jetzt wirklich... keine Ahnung, einen Roman schreibe oder habe ich eine Textpassagen im Sinne einer Auflistung. Und deswegen, denke ich, gelten im Web einfach andere Spielregeln und die Art und Weise, wie Texte konsumiert werden, ist, glaube ich, im Web eine andere, ist meine Meinung dazu. Wenn nicht, dürfte auch eine Meinung dazu sagen. Ja, gerne. Ich finde, das ist auch ein bisschen ein Modesachentwicklung. Also, wenn man schaut, auch Kleider, die waren noch in den 50er, 60er, vielleicht sogar in den 70er-Jahren noch sehr strikt und so weiter. Und jetzt sieht man völlig durchgemischte Strukturen, Farbenformen und so weiter. Man wagt sich mehr allgemein, glaube ich, oder Möbel, vielleicht auch. Es ist einfach so ein Trend, eine Entwicklung, man kann einverstanden damit sein oder nicht, aber vielleicht wagt man sich mehr heutzutage als früher und das gilt auch für Web oder Prenze, also in Typografie. Aber klar, ich würde auch nach wie vor sagen nicht zu viel. Manchmal sieht man auch Beispiele, dass es dann so überladen, dass es irgendwie nicht mehr passt oder überladen ist. Zum Thema Serifen. Eine Zeit lang hat man auch gesagt, bloß keine Serifenschriften im Web. Heutzutage ist das schon ein bisschen anders, weil die Auflösung von den Screens so hoch ist, also Serifenschriften eben, wenn sie nicht zu klein sind. Aber das gilt dann eben auch für die Serifenlosen. Ja. Ich hätte vielleicht auch eine ganz knappe Frage zum Schluss. Ich habe gesehen, auf verschiedenen Folien hast du Kästchen oder Bilder mit eine ganz leichte Schattierung. Ist das zum empfehlen in der Allgemeinung, das ein bisschen hervorzuheben? Jetzt auf Websites. Ja, genau. Also ich würde grundsätzlich sagen, dass es immer hängt ein bisschen ab von den Bildern an sich. Wenn die schon homogen sind, braucht es ja vielleicht eben gar keinen Schatten. Oder wenn jetzt wie in einem Einbeispiel, wenn die Fotos eben relativ homogen sind und abgegrenzt sind, dann braucht es meiner Meinung nach nicht noch zusätzlichen Rand oder einen Schatten. Wenn das nicht der Fall ist, dann vielleicht, das kommt dann eben drauf an, will man einen harten Kontrast schaffen, dann vielleicht einen wirklichen Knallharten, also eben bei diesen Screens mit den Tabellen. Da würde ich jetzt, ja eben entweder einen Schatten, den man aber auch wirklich deutlich sieht oder einfach so einen Rand machen. Seid noch da? Mach uns ab. Können wir die vorletzte Folie noch mal so anschauen, bitte? Die vorletzte. Ja, die. Nein, die. Die mit den Gleichheitszeichen. Den Programmierer und den Mathematiker stört, dass die Gleichheitszeichen nicht untereinander sind. Es ist mir klar, dass man, wenn man das macht, wenn man das ändert, dass man dann andere Sachen aufgibt, dann ist das ein sehr guter Bild. Hast du einen Kommentar zu meinem Kommentar? Also, ehrlich gesagt, ich, du glaubst gar nicht, wie viele Gedanken ich mir gemacht habe, um eben auch euch zu vermitteln, was ich sagen will. Weil darum geht es ja irgendwie am Ende, wenn ich sage Design, Design, Kommunikation. Also ich hab sicher probiert, was besser aussieht, die Gleichzeichen untereinander oder nicht. Müsste ich jetzt tatsächlich wieder ausprobieren, das untereinander und gucken, okay, geht das auch oder entscheide ich mich trotzdem wieder dafür. Aber so insgesamt ist das doch schön. Man kann so viel machen. Also weiß nicht, es gibt auch so Momente, wo ich sage, ich will das perfekte Design, aber es gibt so viele Lösungen. Also ich hab sicher nicht immer die geilste Lösung, aber ich hab vielleicht eine geile von 5.000 geilen. Also ja, ich wollte ein bisschen mehr sagen. Vielleicht, ich bin Grafikerin und Patientin für Typografie und Webdesign und du hast es eigentlich selbst gesagt, ich muss ein bisschen schmunzen bei den Fragen. Entschuldigung, Design ist Kommunikation. Schussendlich abschatten, ja oder nein, Verläufe, ja oder nein, sie riefen ja oder nein. Es geht darum, was will ich kommunizieren. Mit allem, was ich designe, mit allem, was ich weglasse, schaffe ich eine Aussage. Und da muss man vielleicht daran denken, also wegkommen von, ich mach das jetzt mal ein bisschen schön. Ich sage immer, mein Firmenmotor ist Communicator and Decorate. Und das kann vielleicht auch nicht gestalten, helfen, sagen, ja, was will ich aussagen mit dem, was ich designe. Danke. Da ist Antwort dazu. Hallo, Hallo. Ich habe vielleicht noch eine Anmerkung, die mir wichtig ist, weil ich das häufig beobachte mit Leuten, wo wirklich nur so ein Tunnelblick zum Design haben. Ich finde Webdesign geht es natürlich einmal um das Rheinoptische, das Rheinvisuelle. Aber natürlich sollte man halt auch berücksichtigen, dass es halt auch noch Rhein-Petersen gibt, die halt wichtig sind. Man sollte zum Beispiel, was ich beobachte, ist, dass viele, die halt aus eher so Background-Print-Design kommen, dass sie dann sagen, okay, ich habe jetzt hier eine Schrift, einen Absatz, und jetzt mache ich noch einen Absatz. Den Absatz gestalte ich jetzt als sozusagen als Überschrift. Dann erlebt man es häufig, dass sie die Fund-Wide einfach nach oben setzen. Und vielleicht das Ding auf Bould Text oder H2 Text, also Text für Überschriften oder auch Bould und Strong Text. Aber das geht ja mit dem Blog-Editor jetzt ziemlich cool. Also du kannst ja wirklich, du kannst eine H1 bestimmen oder eine H2 bestimmen und kannst sagen, aber das ist jetzt S, M, L, XL. Ja, genau, genau. Ne, das ist halt oder halt viele sagen dann halt auch viele sagen dann, okay, dann frage ich halt, warum hast du jetzt die H1 nicht genutzt? Ja, die H1 war mir zu prägnant nach einer H1, eine H4 genutzt. Ja, die H2 und die H3, die war mir zu fett. Also solche Spielregeln müssen man natürlich auch berücksichtigen, weil wir halt in einem ja, HTML halt schematischen Web unterwegs sind. Ja. Genau. Also das zählt für mich zum Thema Web-Design einfach auch mit dazu, wenn man jetzt sagt, okay, man schaut sich eben nicht nur rein das Visuelle an, sondern auch mit Hintergrund sich überlegen, okay, was hat das jetzt für Konsequenzen auf meine schematische Darstellung. Ich glaube, wir haben noch Platz für eine letzte Bemerkung vielleicht. Ist gut. Ah. Ein bisschen viel auf einmal. Aber es ging gegangen. Ne, noch dazu zum schematischen, natürlich auch die Wiederholbarkeit, was man vielleicht immer wieder vergisst im Web, dass man nicht für jedes Bild die beste Schriftlösung haben kann, weil ein Bild ist oben hell und unter dunkel oder umgekehrt, hat mehr oder weniger Schatten und Punktpunkte und so weiter und ich weiß nicht, ob es da auch Plugins gibt oder ob es heute möglich ist, dass das automatisch entweder dunkel oder hell und weil das ist ja auch ein eine Charakteristik vom Web, dass es eben nicht nur für einen wir stimmen den Inhalt, sondern es müsste eigentlich dann jedes Bild hineinpassen und jeder Text hineinpassen mit der Zeit. Der Inhalt soll sich ja ändern und ändern können. Gerade wenn es um Blocks, um Zeitungseiten geht und so weiter ist das schon, glaube ich, auch ein Thema. Das nicht jedes einzelne Bild einzeln abfertigt werden kann, wie es jetzt ganz sicher da gemacht wurde teilweise auch. Ich habe ehrlich gesagt, ich habe es nicht ganz verstanden. Ich habe eben einfach die Frage, dass man berücksichtigt, dass man ja eigentlich ein Schema darstellt, wo dann je nachdem ganz verschiedenen Inhalt hinein kommt und gerade wenn man Overlay von Textaufbildern macht, kann das zu ganz eigenen Problemen. Was mit einem Bild geht, funktioniert mit dem anderen nicht und so weiter. So, ich glaube, ich muss euch unterbrechen, weil die andere fertig sind und wir machen jetzt das Gesamtbild. Vielen, vielen Dank.