Deine Millionen AIDA Hier wurden Bilder im Grid-Layout an die Boxen skaliert (fast responsive).
Es gibt Agenturen die mit Bildemotionen, Coporate Designs mit Ihren Kunden entwickeln.
Wie? (design-THINKing & CI-CD)
Bild(er)-Text(e), stehen selten für sich allein, wobei moderne Screendesigns, EMOTIONEN immer mehr in den Vordergrund rücken. (Unsere Seh- und Anwendungsgewohnheiten sind es, die es prägen.)
Fast 80% unserer Wahrnehmungsrealität wird durch Sehnervinformationen gerägt.
Nur 1-7 Prozent nehmen wir bewußt wahr, der Rest; prägt auch indirekt unsere Emotionen.
Farben spielen dabei eine wesentliche Rolle.
WEB-Farbnamen-Übersicht!
Colors / Farben im Web - Übungen
conic-gradient() - gewinkelte Farbverläufe
Kreis mit konischem SW-Verlaufkonischer Farbverlauf mit weichen ÜbergängenFarbkreis mit 8 Segmenten harten Übergängen und einem Loch in der Mitte (Donut)Wer sagt, das das Element rund sein muss?Strahlen durch ein Prisma; Zentrum ist 0 30%Riss im Himmel
Aufgabe(n)
Variiert die hier gegebenen Figur(en)-Verläufe und erfahrt dadurch, wie das ganze funktioniert.
Kreis 1 = konischer SW-Verlauf um 180 Grad drehen!
Kreis 2 = Statt Farbnamen, rgba-Werte verwenden
Kreis 3 = Innenring etwas vergrößern und an Hintergrundfarbe anpassen!
Kreis 4 = Kopieren und Kreis 5 ersetzen, Diesen dann um 45Grad drehen!
Kreis 6 durch Kreis 3 ersetzen und wie folgt variieren (Kreis 3 bleibt unberührt!).
Statt 8 Farben nur 6 Farben verwenden.
Diese zeigen dann jeweils die Hauptfarbe des RGB- und CMY-Farbkreises.
Artefakte durch Bildkomprimierung
Technisch gibt es viele Möglichkeiten Bilder modern und einfach
in Ihrer Dateigröße durch unterschiedliche Speicherfromate und
deren entsprechende Komprimierungen, zu verkleinern.
Bilder im Web
In dieser Übung soll anhand eines eigenen Bildbeispiels mit meinem Namen
und verschiedenen Effekten gezeigt werden wie sich unterschiedliche
Komprimierungen auf die Bilderwiedergabe auswirkt.
An einer mit HTML erstellten Liste (mit Aufzählung) wird nach der Reihe
gleich gezeigt, wie sich drei verschiedene Komprimierungsarten auf die
Bildqualität auswirken.
Ansichtsliste verschiedener Bild-Komprimierungen
„Für Web speichern“ aus Photoshop:
Höchste JPG-Komprimierung des Bildexportes (= geringste Bildqualität).
Gleiche Dateigröße bei Verwendung einer GIF-Datei mit entsprechender Bildqualität.
Bester Kompromiss der Bildqualität, bezugnehmend auf die Datengröße. (Artefakte nicht mehr sichtbar!)
An diesen Beispielen sollten Sie erkennen wie sich die unterschiedlichen
Kommprimierungen auf die Bildqualität auswirken.
Die verschiedenen sichtbaren Bildstörungen nennt man auch Kompressions-Artefakte.
Als Einstieg mal ein Beispiel, das ausserhalb unserer Website entstanden ist. Deine Millionen am AIDA-Beispiel. Hier wurden Bilder im Grid-Layout an die Boxen skaliert. Diese wirken responsive.
Screendesign Einstiegsjahr
