Netzgeflüster: Nützliche Webdesign Ressourcen

Wenn man eine Weile nichts mit Webdesign gemacht hat, wie kommt man aus dem Loch wieder raus? Und wie macht man einigermaßen moderne Webseiten? Wie so oft gibt es darauf wohl nur zwei Antworten. Erstens: man muss was machen. Zweitens: Man muss hinterfragen, was man da gerade gemacht hat und wenn es Mist ist, korrigieren oder neu machen. Auch ich habe mich neulich hingesetzt, neu gemacht und dabei viel gelernt. Ich behaupte nicht, dass mein Werk die Perfektion ist, aber ich habe so lange „gemacht“ bis ich zufrieden war und wenn ich es nicht mehr bin, dann naja – siehe zweite Antwort. 🙂 Auf dem Weg dahin habe ich einige Ressourcen gefunden, die mir halfen meine Kenntnisse aufzufrischen und zu modernem Webdesign zu finden. Und die möchte ich heute mit euch teilen.

Accessibility

Eigentlich war es ein Vortrag von Dark Kay, der mir die Augen über Accessibility geöffnet und gezeigt hat, worauf ich in der Vergangenheit viel zu wenig Augenmerk gelegt habe. Dass ich die Schriftgröße auf meinen Webseiten einigermaßen lesbar halte, ja okay, daran habe ich mich schon versucht zu halten. Aber was heißt lesbar? Und für wen? Da fängt’s schon an. Ich kann Darek Kays Accessibility Notes sehr empfehlen. Wer es gern trockener mag und tiefer eintauchen will, findet sicherlich auch in den Web Content Accessibility Guidelines (WCAG) 2.1 ähm … Guidance. Sehr nützlich finde ich die Webseite Contrast Ratio.

Farbe

Eigentlich heißt der Artikel von Illustrator’s Lounge 10 Really Helpful Colour Tools for Illustrators und nicht „… for Webdesigners“. Aber ich finde, dass man in jedem gestalterischen und schöpferischen Bereich wo man „irgendwas mit Farbe macht“ sehr davon profitieren kann. Beispielsweise, wenn man eine harmonische Farbkombination sucht und nicht wieder seine 2 Lieblingsfarben nehmen und dann gedanklich am Rad der Komplementärfarben drehen will.

Responsiveness

Schaut den Blog an. Das Theme kommt schon zum Großteil fertig. Ich musste nie Responsiveness selber schreiben. Bis ich es musste. Man redet sich ja gern ein „ach das geht schon so“. 😉 Nein, häufig ist das in Wirklichkeit nicht der Fall. Responsiveness gehört zu modernem Webdesign einfach dazu. Das merken Autor*innen und Webdesign-Bastler dann spätestens, wenn sie die Webseite mal im Debug-Mode des Browsers mit Smartphone-Maßen öffnen. Genau das richtige Maß an Wissen, das man sich aneignen sollte, hat das Tutorial der W3Schools HTML Responsive Web Design.

Zum Nachschlagen

Die ja wohl absolut nützlichste und auch noch optisch sehr ansprechende Webseite HTML Arrows macht das nachschlagen von HTML & ASCII (Escape) Character Codes sehr einfach und angenehm.

Coole Spielereien und was für die Optik

Ob die CSS Background Patterns von MagicPattern wohl ewig kostenfrei bleiben weiß ich genauso wenig wie welche Lizenz hier verwendet wird oder werden soll. Weil ich keine Angabe finden konnte, ob die sehr coolen und auch auf der Webseite anpassbaren Pattern Creative Commons sind oder nicht, habe ich sie dann nicht benutzt. Aber ich finde die Muster sehr cool, v.A. weil sie aufwendig selber zu basteln wären und responsive sind (weil CSS und nicht Bild).

Aufmerksame Leser*innen des Blogs wissen ja schon, dass ich für Stockphotos auf „The internet’s source of freely-usable images“ Unsplash zurückgreife. Aber die Angst bleibt immer, dass man mal ein Foto erwischt, dass jemand widerrechtlich hochgeladen hat. Eine Angst, die man (leider) grundsätzlich immer haben muss, wenn man das Foto nicht selber gemacht hat. Also wenn möglich: selber machen.

Welche Tools machen euch das Webdesign-Leben leichter? Welches der oben vorgestellten wird euch helfen? Kommt ihr in eurem Job oder in eurer Freizeit mit Themen wie Responsiveness und Accessibility in Kontakt?

Netzgeflüster ist eine Kategorie meines Blogs in der ich mich immer zwischen dem 10. und 15. eines jedes Monats Themen aus IT, Forschung, Netzwelt und Internet widme genauso wie Spaß rund um die Arbeit mit Bits und Bytes. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert