 Ich freue mich heute hier zu sein und ich freue mich noch mehr unsere nächste Speakerin vorstellen zu dürfen. Yvonne Dekopf ausgebildete Fotografin, Diplomdesignerin und Mentorin, selbstständig seit über 20 Jahren im Bereich Design und sie erzählt uns heute wozu eigentlich Design und gibt uns einen kleinen Einblick in die Welt des Designs, der Farben, der Schriften und viele mehr. Damit bitte begrüßt ihr mit einem kräftigen Applaus und deine Bühne. Dankeschön, ich hoffe hört mich gut, ich hör mich gut. Ja wozu Design? Diese Folie ist ein gutes Beispiel dafür wie man es nicht macht. Also ich bin, hat der Lukas schon gesagt Fotografin und Diplomdesignerin, habe in Berlin bzw. Potsdam Kommunikation Interface Design studiert. Mit den ersten Screen Designs habe ich 2004 angefangen mit WordPress arbeit ich seit 2013. Ja und dann mache ich eben dieses Mentoring, begleite Menschen dabei ihr Design zu verbessern oder zu professionellisieren. Ob man das jetzt Mentoring Coaching Tutoring nennt, habe ich mich auch noch nicht so ganz festgelegt und mit dem Ger Zimmermann und dem Matthias Kurz, der auch hier vorne sitzt, mache ich inzwischen, organisieren wir das Meetup in Bern, genau. Und die Webadresse yvondikov.ch slash gerollstein 23, da findet ihr dann auch nachher noch die Folien, aber ich habe auch am Ende noch ein QR Code, den ihr dann abfotografieren könnt. Genau, also so ist besser. Also ich mag es grundsätzlich aufgeräumt, wenn ich in Raum reinkomme und da ist so chaos, dann finde ich mich nicht so zurecht und ja dann fange ich so an zu sortieren und zu strukturieren und guck guck, was ist jetzt da thematisch los und so, nur so das so als kleinen Einstieg. Das Wort aufgeräumt wird jetzt glaube ich noch ein bisschen öfter vorkommen. Wenn ein Design aufgeräumt ist, könnte man grundsätzlich sagen, ist es auch zu einem Drittel barrierefrei oder wenn man eine Website gestaltet und die aufgeräumt ist, dann ist sie eben auch zu einem Drittel barrierefrei. Ich habe, ich sag das so grob, ihr habt vielleicht den Vortrag auch von Maya Binke vorhin gesehen. Einige Sachen werden sich unter Umständen wiederholen. Barrierefreiheit ist eben Design, Inhalt und Technik und ich spreche aber vor allem jetzt über das Design. Also eben Farbenkontraste, Schriftgrößen und so weiter. Farben, Schriften und Bilder und werde auch ein paar Kombinationen von Farben und Schriften zeigen und ein paar auf ein paar Layout Beispiele eingehen. Fangen wir an bei den Farben. So, das ist jetzt mal so ein Farbkreis, eben deshalb haben wir das Licht auch runtergedimmt. Ich hoffe, man sieht das gut oder man hat auf jeden Fall eine Vorstellung. Farbkreis kennt ihr alle. So, wenn man jetzt richtig tief in den Farbtopf greift, dann kann da so was bei rauskommen. Abgesehen auch, hier ist jetzt so der Kontraste auf dem Button sogar ganz gut, auf meinem Bildschirm nicht so doll. Jetzt habe ich mal diese Farben rausgepickt, das sind so sieben. Sieben und zwar ziemlich kräftige und auffällige Farben. Da habe ich dieses Screen-Design eben diese Farben rausgepickt und habe mal die jetzt mit diesen gestrichelten Linien einfach geändert. Ich zeige euch noch mal den Unterschied. Hab das einfach ein bisschen angepasst an das, was sowieso schon existiert, nämlich das Orange, das Blau. Ich habe das T-Shirt von der Frau noch geändert. Die T-Shirtfarbe mit diesem Grün fand ich jetzt auch nicht so. Also, ja, da war viel los. Also ich habe das jetzt mal auf fünf Farben reduziert. Ja, ist so, würde ich sagen, schon eben ein bisschen aufgereimter und harmonischer. So, wer stelle ich jetzt in Farbpalette, wenn man jetzt sich nicht so viel mit Farben beschäftigt. Okay, jetzt sind jetzt mal so vier Grundfarben. Und wenn ich da jetzt, das sind jetzt ziemlich gesättigt und knallig dadurch, wenn ich jetzt schon mal die Sättigung ein bisschen runter dimme. Also ihr seht den Unterschied. Dann ist schon mal ein bisschen weniger aufdringlich. Ja, und dann nehme ich mir vielleicht diese zwei Farben da draus oder diese zwei oder diese zwei und dann kann ich diese zwei Grundfarben vielleicht erweitern durch Abstufungen, füge noch ein Antrazidfarben hinzu, also so ein dunkelgrau und ein helles grau. Dann habe ich eigentlich schon eine Farbpalette, mit der ich so mal arbeiten kann. Ein paar Beispiele. Hier ist jetzt zum Beispiel mit sehr verwandten Farben gearbeitet, also alles so grün Töne. Es ist sehr simpel, die Farbauswahl und sehr harmonisch. Hier ist es jetzt schon, wenn man sich diese acht Farben anschaut, geht das ein bisschen knalliger. Also dieses grün ist fast neon und das ist noch eine Abstufung davon. Dieser Hintergrund hier, der ist sehr hellroser. Hier sieht man auch den Kontrast, glaube ich, weiß, hellroser. Und obwohl eben diese knallfarben eingesetzt sind, sind die wirklich dosiert als Akzente eingesetzt. Also hier funktioniert das gut, wenn man eben dosiert mit knallfarben oder sehr starken Farben arbeitet. Auch ein schönes Beispiel. Hier ist einfach her, oder wie soll ich sagen, hier sind die kompimentär Farben. Das haben wir auch schon gehört. Das sind die Farben, die sich im Farbkreis gegenüberlegen, also in dem Fall grün und orange. Es ist gezielt aber eben mit Kontrasten gearbeitet. Der Hintergrund ist dunkel und auch wenn die Farbpalette relativ groß ist, ist es sehr dosiert eingesetzt. Und es wirkt durch diesen Kontrast natürlich auch außergewöhnlich. Also schönes Beispiel, wie man mit Farben auch arbeiten kann. Fazitfarben, weniger ist mehr. Vorsicht, mit zu vielen knallfarben Abstufungen von Farbtönen nutzen, wie jetzt aus dieser Farbpalette zum Beispiel. Mit benachbarten Farben arbeiten ist auch gute Geschichte und Kontraste beachten. Übrigens, die Folien können ja nachher auch runterladen. Also 1 zu 1 müsste gar nicht euch. Also die Frage ist, ob das kommt drauf an. Also das ist jetzt mal so eine Palette, wo ich sagen kann, okay, da habe ich eine Auswahl und die ist so harmonisch gewählt, dass ich jetzt nicht da in die Bedrolle komme, zu viel zu machen. Das kommt total drauf an. Zum Thema Text und Typografie. Das Kapitel ist ein bisschen länger. Sorry. Grundsätzlich zum Thema Schriftsatz und Schriftbild. Jetzt haben wir hier mal so einen Text. Also Buchstabenwüste. Der ist jetzt unformatiert. Wenn ich da jetzt zum Beispiel schon mal die Satzbreite verkleinere, kann ich da schon mal was tun, um der Lesbarkeit entgegenzukommen. Dann mache ich die Schrift größer. Dann kann ich mit Zeilenabstand arbeiten. Dann kann ich noch Abstände zwischen den einzelnen Absätzen einsetzen. Dann kann ich auch die, ah, noch diese Früh, dieses, das Team 2020, wie zum Beispiel, macht es eigentlich schon ein paar Diffots so gut. Da ist eigentlich schon mal so grundsätzlich alles so eingestellt. Das ist schon mal cool. Jetzt kann ich noch damit arbeiten, dass ich die Zwischenüberschriften zum Beispiel Fett mache oder vielleicht größer. Ich kann noch zur Lesbarkeit oder als Hilfe, um Text zu strukturieren. Kann ich mit Linien arbeiten. Und dann kann ich auch mit verschiedenen Schriftstilen arbeiten, indem ich jetzt zum Beispiel diesen Einleitungstext Kursiv setze oder auch die Zwischenüberschriften Kursiv setze. Hier jetzt zum Beispiel ein Beispiel, was ich erst kürzlich gefunden habe. Ich habe erst gar nicht erkannt, ist das jetzt eine Auflistung oder ein Fließtext. Weil für ein Fließtext wäre der Zeilenabstand viel zu groß. Also zumindest ist das sehr verwirrend irgendwie. Und wenn es eine Liste sein soll, fehlt für mich ein bisschen das Erkennungsmerkmal dafür, dass es eine Liste ist. Also ihr seht die kleinen Pünktchen davor, finde ich so schon visuell. Also was ich sagen will, ist die Information, die man bringen will, sollte so strukturiert oder aufgebaut sein, dass man auch visuell sofort erkennt, was es ist. Thema Block Satz hatten wir bei Maya auch schon. Und das ist genau das, was dann entsteht. Die Zeilen, die hier markiert sind, entweder sind die Abstände zwischen einzelnen Wörtern zu groß oder was auch passieren kann, sind so eng, dass es eigentlich am Ende ein Wort ist, so optisch. Auch ein schönes Beispiel, wo Block Satz weniger gut funktioniert. Also es ist einfach so die Wörter fliegen dann durch diese Lücken einfach ziemlich rum. Ja und hier habe ich mich auch gewundert, wieso was entsteht. Ja also man sieht, es ist schwierig, man weiß nicht, wo man dahin schauen soll und wo der Text anfängt und aufhört. Also lieber Flatter Satz. Das sieht dann so aus. Flatter Satz heißt das, weil das hier so flattert. Und bei schmalen Spalten ist auch im Flatter Satz so, dass da auch so große Lücken entstehen können, wie jetzt zum Beispiel ganz links. Und da bietet sich dann eine automatische Silbentrennung an. Genau, dann ist der Text egal, ob im Flatter Satz oder im Block Satz so, dass die einzelnen Leerzeichen auch so einen Platz haben, dass es nicht zu viele Lücken gibt. Großbuchstaben, auch Versalien genannt, ihr kennt das wahrscheinlich auch. Wenn ich jetzt dieses Textbeispiel komplett in Großbuchstaben schreibe, sieht das ungefähr so aus. Kann man nicht lesen, also schwierig. Hier haben wir auch noch ein schönes Beispiel, auf der linken Seite alle sind Großbuchstaben, auf der rechten Seite mit Groß- und Kleinbuchstaben und so fürs Auge ist das viel verständlicher. Jetzt würde ich euch gerne erklären, warum das so ist. Wenn ich das Wort Webdesign jetzt mal in Großbuchstaben schreibe und da drunter in Groß- und Kleinbuchstaben und da jetzt mal so Kästen drüber setze, kann man fast das Wort drunter schon lesen, ohne dass man das Wort ganz sieht. Und das liegt einfach daran, wir haben Ober- und Unterlängen, also oben das sind die Oberlängen, unten das sind die Unterlängen und die geben uns eine zusätzliche Information über eine Form und die Buchstaben können wir deshalb, also wir haben mehr Informationen über den Buchstaben und können ihn deshalb besser wahrnehmen. Also wenn Großbuchstaben einsetzen, dann für Zwischenüberschriften, so wie jetzt in diesem Beispiel, da geht das gut. Und ich würde sagen, wenn man mit Großbuchstaben arbeitet, dann am besten einfach eine Zeile mehr nicht. Habt ihr das gehört? Also sie sagt am besten ganz lassen, man sagt nur acht Buchstaben in einer Zeile, das heißt Webdesign ist das Wort auch schon zu lang. Ja, kann man sich drüber streiten, ich finde das geht jetzt noch. Aber ja, hier ein Logo, wo man auch super sieht, obwohl bei dem oberen Wort die Unterlängen fehlen und bei dem unteren Wort die Oberlängen, es hat eben genug Ober- und Unterlängen, so dass man das trotzdem gut lesen kann. Also funktioniert natürlich nicht mit jedem Wort, je mehr Unterlängen und Oberlängen ist so besser. Und wenn man Großbuchstaben benutzt, dann bloß nicht noch irgendeine verstöckelte Schrift, weil ich lese da zum Beispiel Wertdesign oder Wert irgendwas. Also das bitte auch vermeiden. Klingt irgendwie alles logisch, aber wenn man es dann so sieht. Thema Kontraste hatten wir vorhin bei Maya auch schon, eben also das ist definitiv ist jetzt zu wenig Kontrast. Wenn ich jetzt den Hintergrund dunkel mache hier, in dem Fall ist jetzt der Hintergrund schwarz und die Schrift weiß. Und da bietet sich dann an, damit der Kontrast nicht zu stark ist, weil das flimmert so ein bisschen, den Text hell grau zu machen. Also wenn ich das jetzt nochmal so im Vergleich, es ist viel angenehmer für das Auge, das so zu lesen. Das ist eine ganz neue Website, auf die ich vor kurzem gestoßen bin. Da habe ich mich gefragt, wer hat das verbrochen. Also die Kontraste, das flimmert ziemlich durch die Farbwahl. Es ist auch zu wenig Kontrast. Die Zeilen sind extrem lang. Ich habe mal gelernt im Studium 50 Zeichen maximal in eine Zeile. Einfach, wir lesen ein Text und wenn wir im Augenwinkel die nächste Zeile quasi gar nicht erkennen können, schon so im Augenwinkel, dann ist es schwer die nächste Zeile wiederzufinden. Also wenn die Zeilen zu langsam sind, genau. Und der Text ist zentriert, finde ich, eignet sich auch nicht so für Fließtext. Also eben, weil auch die Zeilen anfängen immer wieder springen. Auch zu vermeiden sind zu dünne Schriften. Auch natürlich hier hat man einfach zu wenig Kontrast. Hier ist jetzt eine Art, also eben in der Überschrift Großbestaben verwendet und ich finde dies auch ein bisschen zu schnürkelig für jetzt so eine große oder so eine Überschrift. Und im Fließtext haben wir sehr wenig Farbkontrast von Schrift zu Hintergrund. Die Schrift ist sehr dünn und auch sehr schmal. Ja, wenn man viel Text hat, dann manche Kunden, die denken, okay, wir wollen ganz, ganz viel Info auf die Website packen und dann nehmen sie eine schmale Schrift, damit mehr Text hinpasst. Ja, aber ob man den Text dann nachher liest, ist dann eben auch die Frage. So, wie wähle ich denn jetzt eine Schrift aus? Das werde ich ganz oft gefragt und man kann das jetzt auch nicht so pauschal beantworten, leider. Was ich oft mache, okay, ich gucke mir erst mal an, gibt es ein Corporate Design. Wenn es ein Corporate Design gibt und da hat sich schon mal jemand Gedanken gemacht, dann gibt es in der Regel auch ein Style Guide, da sind schon Schriften festgelegt, da sind auch Kombinationen vielleicht festgelegt. Aus dem Logo kann man auch einige Sachen sich vielleicht ablesen oder schauen, okay, was gibt es für ein Stil? Die Geschäftspapiere oder gibt es Geschäftspapiere wie Siekenkartenbriefköpfe oder Rechnungsvorlagen, da kann man auch mal reinschauen. Und was ist das Image und was ist überhaupt insgesamt die visuelle Sprache von dem Kunden oder von dem Unternehmen? Wenn ich jetzt diese zwei Wörter nehme und mir die Schriften dazu anschaue, also man kann hier gut sagen, okay, Schrift spricht. Wenn ich das jetzt wechseln, funktioniert irgendwie besser. Also vom Stil zeigt die Schrift auch das, was es ist oder beschreibt das auch mit, also ein Schriftstil, beschreibt auch mit ein bisschen das, worum es geht. Schriften finden. Okay, erst mal macht Sinn, die Ziele zu definieren. Welche Wirkung soll die Schrift haben? Okay, es sollte lesbar sein, das sollte grundsätzlichen Ziel sein. Die Struktur, wie viel Text habe ich, wie wird die Schrift eingesetzt, welche Funktionen, bei Funktionen spreche ich vor allem das Thema Tabellen an. Es gibt zum Beispiel Tabellenziffern oder wenn man, das habe ich kein Beispiel. Auf jeden Fall, es gibt Schriften, die haben ein Schriftssatz oder Zeichen, die sind für bestimmte Anwendungen vorgesehen. Und darüber sollte man sich auch im Klaren sein, okay, wo werden viele Zahlen benutzt und welche Schriften sind denn dafür auch dann notwendig. Und bei der Umsetzung, okay, wie viel Textinhalt habe ich, wie muss der strukturiert werden. Daraus ergibt sich dann vielleicht auch die benötigte Schriftanzahl. Und natürlich sollte man sich dann über die Kombination von Schriften Gedanken machen. Ja, es kann nur eine geben. Also nur eine kann die Hauptdarstellerin sein. Auf der linken Seite haben wir da zwei sehr ausgefallene Schriften. Wenn wir die jetzt kombinieren, also für den Fließtext sowieso so eine Schnückelschrift zu nehmen, ist eben auch schwierig lesbar. Lieber im Fließtext eine klassische und in der Überschrift kann man dann auch gerne was ausgefalleneres benutzen. Außer man kombiniert das wieder mit Versalien. Was Sinn macht es sich mit Schriftfamilien zu arbeiten? Das ist jetzt ein Beispiel von einem Google-Fond. Ich weiß gar nicht, wie man es ausspricht. Allegria. Auf jeden Fall gibt es dort eine SANS, eine SANS SC. Das SC steht für Small Caps. Also wir haben hier auf der linken Seite oben einfach eine ganz normale. Das ist ohne Serifen. Also das SANS oder SANS auf Französisch ausgesprochen steht für ohne. Auf der rechten Seite oben haben wir dann das Pendant mit Serifen. Serifen sind diese kleinen Füßchen. Hier haben wir ja hier bei dem N, bei dem R. Und dann gibt es eben für beide Varianten nochmal einen Small Caps-Schnitt. Das sind dann eben die kleinen Großbuchstaben. Auf jeden Fall sind wir hier in einer Familie und alle vier Beispiele hier haben eben so einen ähnlichen Charakter. Und dann gibt es noch die Möglichkeit aus den verschiedenen Dicken oder mit den verschiedenen Dicken zu arbeiten. Also wir haben davon 100 bis 800 alle Möglichkeiten. Fürs Web würde ich bei 400 anfangen. Und so könnte das jetzt zum Beispiel sein. Das sind jetzt eben aus dieser Schriftfamilie fünf verschiedene Schnitte. Mal Fett, mal nicht Fett. Und so kann man auch gut eben mit Auszeichnungen. Also Auszeichnung, Fett, eine Schrift Fett zu machen ist zum Beispiel eine Auszeichnung oder eine Schrift kursiv zu machen, ist auch nennt man Auszeichnung. Genau. Also kann ich quasi mit fünf verschiedenen Schriften schon auch ein Schriftbild erzeugen, was nicht total durcheinander ist. Aufgeräumt quasi. Gugge von Lokaleinbetten nicht vergessen, wissen wir, glaube ich hoffentlich inzwischen alle. Fazitüpo. Lesbar muss es sein. Nicht zu wilde Kombinationen auf Rhythmus im Schriftbild achten, Großbuchstaben und ausgefallene Schriften für kurze Überschriften, maximal eine Zeile oder eben maximal acht Buchstaben, wenn man das preferiert. Blogsatz vermeiden und nicht zu viel extra oder bis hin zu keine extra, aber ganz im Fließtext. Fotos und Bilder. Das ist auch eine relativ neue oder aktuelle Website, auf der ich auch letztens war. Und dann ist dieser Saalplan da neben dieser Tabelle mit den Preisen. Und gerade wenn man mit Bildern arbeitet, die grafisch sind oder wo eben auch noch mal eine Tabelle oder Zahlen dargestellt werden, so wie hier, dann grenzt sich das Bild in dem Fall einfach sehr schlecht vom Inhalt ab. Also was man ganz einfach machen kann, einfach ein Pixel-Border drumherum setzen, zum Beispiel andere Möglichkeit wäre einfach, das sieht man jetzt leider nicht. Das ist so ein ganz leichter grauer Hintergrund und dadurch, dass der, ich muss jetzt leider erklären, dadurch dass eben dieser Hintergrund von dem Bild hell grau ist, gibt es hier eine Kante. Und dann erkennt man eindeutig, okay, das ist ein anderer Bereich als jetzt der Inhalts- oder Content-Bereich. Oder man kann natürlich auch mit Schatten arbeiten oder in der Kombination. Also ja, zu viel würde ich auch nicht machen, aber man könnte jetzt zum Beispiel auch den Hintergrund leicht hell grau machen und einen Schatten drumherum setzen. Genauso hier auf der linken Seite ohne Rahmen, auf der rechten Seite mit Rahmen. Ich finde, das macht unheimlich viel aus, dass man weiß, ah, das ist Text, der erklärt und dann ist es ein Bild, was etwas veranschaulich. Das sehe ich auch ganz oft, so eine Portfolioübersicht. Und dann sind das Screenshots von Websites, die einen weißen Hintergrund haben, präsentiert auf einer Website mit einem weißen Hintergrund. Also das hebt sich hier zum Beispiel an der Stelle auch überhaupt nicht vom Hintergrund ab, ist einfach schwierig zum zu begreifen, wo ist das Bild oder der Inhalt zu Ende und wo nicht. Also auch hier vielleicht ein bisschen Abstand, ein Schatten drum. Fertig. Das ist jetzt eine Kombination. Okay, sehr breiter Rahmen, farbiger Hintergrund, Schatten, ja, funktioniert gut. Wenn die Bilder relativ homogen sind, dann ergibt sich auch automatisch, also wenn es keinen weißen Hintergrund auf dem Bild gibt, heben die sich natürlich vom weißen Hintergrund auch ohne Rahmen oder ohne Schatten gut ab. Das sehe ich auch ganz oft. Weiße Schrift auf Bildern, die weiße Elemente im Hintergrund haben. Hier arbeite ich dann gerne, das ist auch noch ein Negativbeispiel. Also auch hier haben wir solche viel Struktur im Hintergrund, die ich schriftlich einfach nicht gut lesen. Und dann bietet sich an so ein Overlay oder so ein Filter darüber zu legen, sodass einfach der Kontrast zwischen Hintergrund und Schrift so eindeutig ist, dass man es besser lesen kann. Responsive Design, da sollte man solche Sachen beachten, habe ich jetzt auch kürzlich gefunden. Also jetzt mal abgesehen vom Rest, der Kopf auf der Desktop-Seite ist angeschnitten und ja in dem Fall auf dem Handy gut, auch mal abgesehen davon, dass das Menü da oben so komisch angeschnitten ist. Aber da sollte man wirklich gucken, dass ein Bild auf beiden oder auf allen, wie sagt man, Device ist, auf allen Geräten einfach funktioniert. Also man kann zum Beispiel auch sowas wählen, dann geht man da sicher, dass das auf beiden Geräten gut aussieht. Man kann auch unterschiedliche Bilder nehmen, keine Frage, genau, man könnte zum Beispiel den Hochformat auf dem Mobile einsetzen und den Querformat ist natürlich ein bisschen, also einfach, dass man das mit bedenkt. Sieht anders aus, der Ausschnitt ist anders. Genau. Darstellungsgröße, da war ich auf der Webseite von IKEA und habe gedacht, man kann die Bilder alle gar nicht sehen, die sind so klein auf der linken Seite und die sollen ja eigentlich dazu dienen, irgendwie, dass man sich zu Recht findet, finde ich in dem Fall auch nicht so schlau gewählt. Zum Glück steht unten drunter, was es sein soll. Was ich auch oft sehe, dass so Fotos irgendwie in so ein Layout reingequetscht werden, also ich sehe es zum Glück nicht zu oft, aber ich verstehe es gar nicht, ehrlich gesagt, wie sowas entsteht, aber macht sowas nicht. Also hier ist ganz klar, gerade wenn ich ein Produkt verkaufen will, dann sollten die Bilder auch das Produkt so darstellen, wie es ist. Also ich sehe das auch bei Personen oder Porträtfotos, dass die dann irgendwie so zusammengequetscht sind, dann sind das so Eierköpfe oder ich weiß nicht, ich verstehe das nicht wie, warum, also ja. Fazit Bilder, klar, sind wie unverfälscht, optische Trennung zum Hintergrund, Abstände zwischen den Bildern sind wichtig, Schriftaufbildern mit einem Overlay, ja, man kann die Bilder natürlich auch noch abrunden, das habe ich jetzt hier mal weggelassen, Responsive Design bedenken und die Bilder korrekt zuschneiden. Jetzt zeige ich noch ein paar Layout Beispiele. Auf der linken Seite das, was ich gefunden habe, auf der rechten Seite die aufgeräumte oder meine aufgeräumte Version. Ich habe da ziemlich viel geändert, zum Beispiel habe ich den Verlauf aus dieser Navigation oben, aus dieser Top Bar einfach mal weggenommen, also Verläufe auf Schrift. Man sieht keinen Verlauf, ja, das ist genau der Grund, warum es nicht funktioniert, ganz oben die Top Bar, da ist in jedem Menü-Punkt so ein Verlauf von weiß bis hellblau. Wie bitte? In der Schrift, genau, in der Schrift, danke. Dann diesen Heterbereich, ich habe das Logo reduziert, ich habe die Linien rausgeworfen, wo ich denke, da müssen eigentlich gar keine Linien hin, mit den Abständen gearbeitet, habe die Typografie angepasst, also in dem Fall ohne sie riefen, einfach, dass man es besser, auch in dem Fall besser lesen kann. Dann diese Bilder, ich weiß gar nicht, das war glaube ich, ein, da waren drei Bilder auf ein Bild gepackt, also so ein Panorama-Format. Auch hier beim Mobile, wenn ich das zusammenquetsche, ist das nachher vielleicht ein Bildchen, was 5 cm breit und 1 cm oder 2 cm hoch, kann man nicht mehr sehen. Also erstmal grundsätzlich Bilder würde ich trennen, dann würde ich die gleich breit machen, einen Rahmen drum setzen, Abstand so, dass man auch weiß, ah, das sind drei Bilder, auf der linken Seite erkenne ich gar nicht, okay, sind das jetzt drei, vier Screenshots oder, genau. Im Content-Bereich, da muss ich erst mal auch danach suchen, worum geht es eigentlich, also den Seitentitel habe ich schon mal viel größer gemacht. Ja, und auch hier aus den Beispielen, die wir vorhin schon gesehen haben, hier ist der Text auf der linken Seite zentriert, kann man nicht gut lesen, Schriftgrößte ist zu klein, Zeilen sind zu lang, genau, das habe ich dann auch hier, und die Content-Bereite habe ich auch reduziert, in dem Fall. Gruppierung und Ordnung durch Flächen. Jetzt haben wir hier drei solche Teaser mit einem Button darunter, wenn ich da jetzt zum Beispiel so ein Hintergrund dazu, oder hinter diesen Content-Packe, dann ist viel eindeutiger, ah, das sind diese drei Elemente und heben sich natürlich so auch viel besser davon ab, von dem, was da drunter kommt, nämlich dieser Button, also man kann auch mit diesen leichten Hintergrundflächen gut Elemente miteinander verbinden. Linke Seite habe ich so gefunden, und wenn ich da jetzt mal so Kästen drumherum setze, dann haben wir so ganz viele wild verteilte Rechtecke, und auch hier habe ich dann, erst mal, also ich muss wirklich gucken, okay, welcher Abschnitt gehört jetzt zu was? Ja, ich glaube, ich muss gar nicht so viel erklären, also ich habe einfach geguckt, okay, welche Elemente gehören zu einem Abschnitt, und habe das eindeutig einfach getrennt, indem ich auch mit unterschiedlich hellen Hintergründen gearbeitet habe. Also Sie fragt gerade, ob ich denen das schon angeboten hätte, das sehe geil aus. Nein, habe ich nicht, aber ich habe gefragt, ob ich das Beispiel benutzen darf. Ja, genau, ja hier sieht man auch ganz schön, man kann auch mit vollflächigen Fotos und eben auch mit diesen flächenfarbigen Flächen dunkel oder hell auch gut arbeiten und Abschnitte voneinander trennen. Gruppierung und Ordnung durch Abstände, Abstände sind ganz wichtig. Hier haben wir jetzt zum Beispiel oben das Original und unten meine aufgeräumte Version, vielleicht auf den ersten Blick sieht das gar nicht so anders aus, aber es ist zum Beispiel schon, wenn man jetzt das anschaut, wenn ich jetzt da so einen Rahmen drum setze, um das, was in diesem Kasten, an Inhalt drin ist, dann ist oben zum gesamten Rahmen, zu diesem Trapez oder so, wenig Abstand dadurch, dass ich einfach mehr Abstand drum herum habe, in dem unteren Beispiel, ist schon mal viel klarer, was zusammen gehört und was nicht. Also bei dem oberen Beispiel, das Kategorien, das hängt so sehr am Rand oben, die Suche ist ziemlich weit unten und der Abstand, ich zeige das noch an dieser Folie, kann man noch besser erkennen, hier im oberen Beispiel ist der Abstand von oben zum Wort Kategorien kleiner, als der zu dem Content, der unter dem Wort Kategorien kommt. Unten im Beispiel ist es so, hier ist der Abstand fast gleich, auf jeden Fall sollte die Überschrift beim Content sein, weil einfach, dass klar ist, das gehört zusammen, es ist optisch einfacher, das zu verstehen. Hier habe ich so ein, jetzt mal dieses Page-Page-Bilder-Divvy, da habe ich zum Beispiel, oder wenn man sich das oberer Beispiel anschaut, ist der Abstand von Page-Bilder zu Divvy größer als der zu dem Icon, da ist die Zusammengehörigkeit nicht so ganz klar, dadurch, dass ich den Zeilenabstand hier verringere, ist der Abstand hier zwischen den beiden Wörtern kleiner oder fast gleich wie der, das heißt, das hier gehört ja erstmal zusammen und dann gehört das zusammen, also so kann ich quasi auch schon visuell Dinge ordnen. Ja, ich denke auch dieser Suchbereich, der muss nicht so breit sein wie oben, den habe ich dann auch noch ein bisschen schmaler gemacht. Also das Fazit zu diesem Kapitel klare Gruppen, was gehört zusammen, was gehört nicht zusammen, auf welche Elemente kann ich eventuell verzichten, Linienflächen, Schatten oder wo brauche ich wirklich Linien oder Verläufe oder was auch immer, auf Zwischenräume und Abstände achten und Luft zum Atmen lassen, eben wie in den Räumen, in die man reinkommt, wenn ich da nicht durchkommen ist, ist das irgendwie so, also wozu das Ganze? Also Design ist Kommunikation, wenn wir was vermitteln wollen, dann sollte das so verpackt sein, dass wir es auch über das Design oder das ist quasi die Verpackung, über die man auch visuell besser verstehen kann. Wenn es aufgeräumt ist, ist übersichtlicher und diese Klarheit führt eben dazu, dass es verständlicher ist. Das war es. Oh wow, ich war mega schnell. Also hier ist nochmal der Link und auch der QR-Code. Ich hoffe, der ist groß genug, eben da findet ihr diese Folien jetzt, die ich hier gezeigt habe, unten zwei, drei Links. Man kann einen Design-Check auch, man kann mit seiner Website auch zu mir kommen und sagen so, guckt doch mal da drüber, dann finde ich in der Regel ganz viel Zeug. Und ja, mein Kontakt. Vielen Dank. Ja, jetzt fragt es Fragen aus dem Publikum. Ist sie eine Hand? Also er fragt, ob der Design-Check auch genutzt wird. Also ich habe das jetzt schon in zwei, drei Meetups gemacht, dass die Leute ihren Link mitbringen konnten quasi und dann haben wir das so vor versammelter Mannschaft mal so ein bisschen, sind wir da durchgegangen, fünf bis zehn Minuten oder so. Die Idee, den Design-Check auch so online anzubieten, das habe ich jetzt relativ neu. Also von daher, also du darfst der Erste sein. Also auf dem Link in Profil ist zum Beispiel ein direkter Link, kann man an Termin buchen oder eben auch unter diesen Links ist auch dieser Link für einen Design-Check. Ja, danke Yvonne. Eine Frage, was machst du gegen den schlechten Geschmack, den Auftraggeber? Weil das ist alles, ja, ja, ja, ich unterschreibe jetzt alles, was machst du dagegen? Der hat halt einfach einen schlechten Geschmack. Wie gehst du damit um? Ich nimm die nicht. Nee, ist natürlich schwierig, aber irgendwie, also bisher habe ich es immer geschafft, die Leute zu überzeugen. Und tatsächlich, ich finde meine Kunden auch, ja, also ich zeige gute Beispiele, ich zeige Beispiele, wo ich denke, die könnten gut zu dieser Person oder zu diesem Kunden passen. Ja, ich höre mir natürlich, das hast du ja auch so schön deinem Vortrag erklärt, Kommunikation ist alles. Also ich rede ganz viel mit den Leuten und versuche auch wirklich dann herauszufinden, okay, was ist jetzt wirklich das Bedürfnis? Und in der Regel nehmen die meine Designs wirklich an. Also, ja. Erst mal ein schöner Vortrag, vielen Dank dafür. Danke. Das sind ja letztendlich Sachen aus der Gestalttheorie, die du beschrieben hast. Also Nähe, Form, Farbe erzeugt Zugehörigkeit. Und was ich schwierig finde in den Beispielen, das ist immer ganz offensichtlich, weil die hat man ja so gewählt, dass sie das zeigen. Aber mit dem Kunden finde ich das manchmal schwer, wenn sie dann sagen, ja, du müsstest mir quasi helfen. Was gehört thematisch zusammen? Wo ist der Zusammenhang quasi? Was soll beieinander stehen? Und dann kommen die quasi ins Schwimmen. Und dann muss man mit denen eigentlich quasi die Struktur ihrer Firma oder ihre Webseite durchgehen, wo man auch eigentlich quasi das Design gerade bespricht, weil man quasi jetzt den Leuten dabei helfen muss, ihre Gedanken zu sortieren. Weil letzten Endes geht es ja darum, Gleichartiges zu gruppieren, damit die Zuordnung klar sind. Aber wenn die das selber nicht klar haben, so was macht man? Dann wird man ja quasi zum Berater. Also, ja, ist so definitiv. Also, wenn mir nicht klar ist, was der Kunde vermitteln möchte, also ich stelle so lange Fragen, bis ich das gerafft habe. Weil wenn ich das nicht verstanden habe, dann kann ich das ja nicht in Design transformieren, was andere verstehen sollen. Also, es ist ganz oft, dass ich auch mit Cardsorting arbeite. Es kommt immer ein bisschen drauf an, wie viel Inhalt es wirklich gibt. Manche Inhalte sind wirklich relativ einfach zu strukturieren. Aber wenn das sehr komplex ist, dann mache ich wirklich mit den Leuten, weiß nicht, zwei, drei Stunden Workshop. Und wir sortieren erst mal. Also, dann haben wir Kärtchen, schreiben Stichworte drauf. Es ist klar, es braucht eine Kontakteite. Wenn die noch Newsletter wollen oder eben wo, dass man mal so die Karten verteilt und ich mache das dann auch gerne so haptisch auf einem großen Tisch nachher ein Foto und so, dass man wirklich mal gruppieren kann. Dass man Inhalte, ich habe das auch schon gemacht, dass ich eine Website hatte, wo einfach ganz viel Text, Text, Text, Text, Text. Ich habe dann die, die waren nicht so komplex, aber es gab sicher so fünf, sechs Seiten mit viel Text. Ich habe die einfach ausgedruckt komplett und die ganzen Dinger zerschnitten und wirklich geguckt, okay, das ist Content, der wiederholt sich hier. Da packen wir mal hier zusammen, also wirklich so vom groben ins kleine und dann reduzieren. Also ja, man fängt beim Strukturieren und beim Aufräumen erst mal an. Ja, oft. Keine Fragen. Wir haben echt noch Zeit, ne? Ich habe echt gedacht, das dauert viel länger, aber ja. Dann danke ich dir für den Vortrag. Danke. Für die tollen Einblicke. Wir haben noch ein kleines Geschenk.