WEBDESIGN (Farbe, Typo, Bild, Layout)

Webfarben Farben auf dem Computermonitor entstehen durch rotes, grünes und blaues Licht (RGB). Durch die additive Mischung können auf modernen Monitoren 16 Millionen Farbvarianten dargestellt werden. Die Anzeige einer Webseite ist jeweils abhängig, was für Hardware auf dem Computer bzw. was für Einstellungen auf dem Browser installiert sind. Das bedeutet, dass man nicht von einer bestimmten Anzahl verfügbarer Farben auf einem Rechner ausgehen kann. Damit die Wiedergabe der Farben einer Webseite und der dort enthaltenen Grafiken nicht verfälscht wird, sollte bei der Programmierung der Web Seiten und bei der Bildbearbeitung nach Möglichkeit eine einheitliche Web Palette benutzen. Anderenfalls könnte es passieren, dass homogene Farbflächen bei Grafiken gerastert oder Farben falsch dargestellt werden. Websichere Farben Früher hielt man sich an das Standard Schema, das von den Browsern optimal interpretiert wird. Die Standard Palette wurde eingesetzt, da auf den Computern nur 256 Farben anzeigen wurden (8 bit Grafikkarte). Die Standard Palette bietet 216 Farben. Heute haben die Computer kaum mehr Grafikkarten mit weniger als 24 bit Farbtiefe. Sogar die Mehrheit der Mobiltelefone beherrscht mittlerweile über 16,7 Millionen Farben. Folglich sind websichere Farbcodes ein Dinosaurier mit bemerkenswertem Bekanntheitsgrad. Trotz allem werden die Farbcodes der websicheren Farben heute noch überdurchschnittlich oft verwendet, da die Farbpalette eine übersichtliche Orientierungshilfe bei der Zuordnung von Farbtönen bietet. Checkliste Webfarben: max. fünf unterschiedliche Farbtöne wählen Monochrome Farbpalette auswählen oder mit einer komplementären Farbe als Akzent arbeiten drei Grundfarben: Basisfarbe (geringe visuelle Kraft, Unterstützung anderer Farben), Hauptfarbe (grosse visuelle Kraft, definiert Kommunikation), Highlight Farbe (Elemente hervorheben, oft Kontrast zu anderen Farben) Farbe von Schrift und Hintergrund mit genügend Kontrast wählen Farbsymbolik beachten (z.b. Rot Signalfarbe) / Achtung: kulturelle und länderspezifische Unterschiede (Beispiel Post: Post CH, Mail UK, Mail USA) Farbkonzepte entwickeln Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Anhand eines Moodboards entsteht bereits ein erstes Stimmungsbild in der Planungsphase. Mittels eines Farbschemas können Farbkonzepte erstellt werden. Hierbei gibt es die Möglichkeit von folgenden Farbzusammenstellungen: monochrome Farben (einzelner Farbton kombiniert mit Sättigungs und Helligkeitsstufen) / Beispiel monochrome Website Komplementärfarben (im Farbkreis 180 gegenüberliegend) / Beispiel starker Kontrast Triaden (drei Farben im Farbkreis im gleichen Winkelabstand zueinander) / Beispiel Vielfarbigkeit WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 1 von 6

Webschriften Bei Webschriften beachtet man die Schriftfamilie, Schriftgrösse, Zeilenabstand sowie Schriftfarben und Hintergrundfarben. Grundsätzlich sind serifenlose Schriften (Sans Serif / Groteskschriften) besser am Bildschirm lesbar als Schriften mit Serifen. Ferner können auf Webseiten nur Schriften (Fonts) dargestellt werden, die auf dem Computer installiert sind. In jedem Betriebssystem sind speziell für die Darstellung auf Internet Seiten einige Standard Schriften vorhanden. Diese Browser Schriften sind jedoch von Betriebssystem zu Betriebssystem verschieden. Die meisten Browser haben zudem einen Standardschriftgrösse von 16 Pixel (16px = 1em) für den Fliesstext (p) eingestellt. Grundsatz bei Webschriften, sie sollten auf dem Bildschirm gut lesbar sein. Websichere Schriften Damit Schriften angezeigt werden, müssen sie auf dem Ausgabecomputer installiert sein. Diese Schriften werden mit dem Betriebssystem mitgeliefert. Folgende Schriften sind Standards und werden praktisch überall angezeigt: Arial (Standardschrift Microsoft, universell, beliebig, gut leserlich) Helvetica (zeitlos, neutral, emotionslos, weit verbreitet) Times New Roman (MS Word Standardschrift, markant, platzsparend, Zeitungsschrift, altbacken) Verdana (die Schrift fürs Web, gut leserlich, platzsparend, abgenutzt) Trebuchet MS (serifenlose Alternative zu Arial/Verdana, frisch, Formen nicht ausbalanciert) Georgia (harmonisch, unauffällig) Lucinda Grande / Sans (MAC Schrift, klare Formen, gut leserlich) Courier (Schreibmaschinenschrift, monospace, schlecht leserlich, verstaubt) Comic Sans (weit verbreitet, unseriös) Checkliste Webtypo: serifenlose Schriften sind im Web besser leserlich nicht zu viele Schriften wählen, max. 2 reichen üblicherweise falls mehrere Schriften: nicht zu ähnlich, identische Farben und Schnitte erzeugen Harmonie Schrift nicht zu eng gestalten / Beispiel verschiedene Schriften Basisschriftgrösse (Fliesstext) gross genug wählen Zeilenabstand bei unterschiedlichen Schriftgrössen anpassen (z.b. bei Titel grösserer Abstand als bei Fliesstext) Zeilen maximal 60 bis 80 Zeichen breit Blocksatz oder zentrierte Sätze beim Fliesstext vermeiden Tonwert zwischen Schriftfarbe und Hintergrundfarbe ausreichend und angenehm gestalten Webfonts eigene Schriften einbinden Seit 2007 können Webfonts per CSS (Gestaltung/Webseiten Design) eingesetzt werden. Wenn eine Schrift eingebunden werden soll, die nicht bereits Online erhältlich ist (wie beispielsweise Google Web Fonts), muss die Schrift mit allen Daten auf dem Speicherplatz/Server des Webhoster installiert werden. Die Schrift wird dann jeweils mit der Website mitgeliefert und auf den Browsern angezeigt. Hierbei wird üblicherweise das Standardformat OpenType (.otf) oder das Open Font Format (.woff) eingesetzt. Google Web Fonts: Google bietet eine Palette von Webfonts an (Google Web Fonts), die Online kostenlos erhältlich sind und der Webseite mitgegeben werden können. WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 2 von 6

Web Bilder Praktisch keine Webseite kommt ohne Bilder aus. Bilder sagen mehr als viele Worte und vermitteln schnell, direkt und sind ein effektives Mittel, um Emotionen zu transportieren. Illustrationen werden als Icons/Symbole eingesetzt, Fotos für Inhalte oder Hintergründe. Bilder verwenden Bilder sind urheberrechtlich geschützt. Ausnahme bilden Bildzitate, das heisst, für wissenschaftliche Arbeiten ist die Verwendung fremder Bilder erlaubt, sofern kein anderes Bild dafür in Frage kommt. Es gibt die Möglichkeit freie Bilder ohne Gegenleistung zu verwenden. Hierfür gibt es im Web einige Portale. Es empfiehlt sich jedoch auch hier den/die Urheber/in zu erwähnen. Das Urheberrecht endet zurzeit 70 Jahre nach dem Tod oder nach Veröffentlichung des Werkes. Creative Common: Creative Common ist ein Lizenzierungsmodell, das sich im Internet durchgesetzt hat. Da das klassische Urheberrecht für das Massenmedium Internet zu starr ist, kann man mit diesem Modell entscheiden, was wie weitergeben werden darf. Nebst dem Bild werden Link zu Originalwerk sowie Linzenzbestimmungen mitgegeben. Dateiformate für Bilder/Grafiken Es gibt drei übliche Bild /Grafikformate, welche von allen Browsern unterstützt werden GIF, JPG und PNG. Sie unterscheiden sich in Farbtiefe, Kompression, Transparenz und Animation. Farbtiefe: Die Farbtiefe bestimmt, wie viele Bits zum Speicher der Farbe eines Pixels verwendet werden. Je grösser die Farbtiefe, umso detailgetreuer und klarer sind die Farben der Grafik. Kompression: GIF /PNG Grafiken können mittels Dateiverarbeitung verlustfrei komprimiert werden. Bei JPG Bildern muss die anhand der Kompressionsrate eingestellt werden, jedoch ist der Qualitätsunterschied auf Bildschirmen bei mittlerer Kompressionsrate (10 20%) nicht sichtbar. Dateiformat GIF Das erste Format im Internet von der Firma CompuServe lizenzfrei entwickelt. Das Format GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt interlaced), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen abspeichern, die dann selbstständig ablaufen. Dateiformat JPG Im JPEG Format (Joint Photographic Experts Group, Vereinigte Photoexperten Gruppe) sind bis zu 16.7 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die Darstellung von Fotos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei auf ein Minimum reduziert werden. Dateiformat PNG PNG (portable Network Graphics) ist ein Rasterformat. Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für diese Transparenzen werden Alphakanäle genutzt. Grafiken können so z.b. auf jeden farbigen Hintergrund eingesetzt werden. Ein kleiner Nachteil ist, das sehr alte Browserversionen ein paar Probleme mit dem PNG Format haben. Es werden z.b. die transparenten Bereiche dann nicht transparent dargestellt. WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 3 von 6

Dateigrösse Digitale Bilder sind auf einzelnen Bildpunkten aufgebaut (Pixel). Die Anzahl Pixel eines Bildes wird absolute Auflösung genannt und wird immer in Breite mal Höhe angegeben. Fotos und Grafiken auf Webseiten benötigen selten mehr Bildhöhe, als der Monitor zulässt. Eine Bildschirmauflösung von 1024x768 Pixel ist immer noch weit verbreitet. Ein Retina Display (13 Zoll) hat jedoch bereits eine Auflösung von 2560x1600 Pixel. Hinzu kommen noch die Randleisten des Browsers, die das Darstellungsfeld der Webseite zusätzlich einschränken. Im Normalfall sollte man für ein Bild nicht scrollen müssen. Eine ideale Bildgrösse ergibt sich somit aus der Darstellungshöhe des sichtbaren Bereichs im Browser. Üblich für ein Bild mit Seitenverhältnis von 4:3 ist 640x480 Pixel. Für Bilder, die sich in einem Popup Fenster öffnen bietet sich eine Bildgröße von 800x600 Pixel an. Für Monitore mit HD Auflösung können die Bilder eine Größe von 960x640 Pixel aufweisen. Bildauflösung Ein Monitor kann zwischen 72 dpi und 96 dpi (dots per inch) darstellen. Bei 96 dpi sind das 96 Bildpunkte in einem Viereck von 2,54 x 2,54 cm Seitenlänge. Ausnahme bilden die neueren Retina Displays mit 227 dpi (im Vergleich: Eine Tageszeitung verfügt über eine Auflösung von 150 dpi). Die Fotos und Grafiken benötigen somit grundsätzlich für die Bildschirmdarstellung eine wesentlich geringere Auflösung als für den Druck. Eine höhere Bildauflösung ist also nicht gleich besser, sondern teils für die Bildschirmdarstellung sinnlos. Die Dateigröße wird unnötigerweise aufgebläht und verlangt längere Ladezeiten. Allerdings haben Tablets und Smartphones (ca. 300 dpi) eine höhere Bildschirmauflösung als der Computer. Deshalb muss je nach Gewichtung auch die Auflösung angepasst werden. WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 4 von 6

Layout Wahrnehmungsgesetze Anhand psychologischer Forschungen konnten Regeln festgestellt werden, die der menschlichen Wahrnehmung zu Grunde liegen. Folgende Grundregeln sind bei der Gestaltung zu beachten: Figur und Grund: Was nehmen wir als Grund und was als Figur wahr? Je deutlicher die Form einer Figur gestaltet ist, umso mehr scheint sie im Vordergrund zu liegen. Nähe / Ähnlichkeit: Elemente, die nahe beieinander liegen, werden als Einheit wahrgenommen. Diese Nähe kann aber auch entstehen, wenn die Elemente sich entweder durch Form, Farbe oder Grösse ähnlich sind. Geschlossenheit / Erfahrung: Getrennte Formen können je nach Anordnung trotzdem als Ganzes erscheinen. Dies geschieht weil wir durch unsere Erfahrungen etwas hineininterpretieren. Fortsetzung: Grundelemente, wie beispielsweise Linien, werden trotz Unterbrechung fortgesetzt. Symmetrie: Symmetrische Element werden als ordentlich wahrgenommen. Können aber ebenso auch schnell langweilig wirken. Gestaltungsregeln Aufgrund oben aufgeführter Erkenntnisse der menschlichen Wahrnehmung können Gestaltungsregeln abgeleitet werden. Folgende werden auch beim Webdesign oft angewandt: Goldener Schnitt: Der goldene Schnitt ist ein besonders harmonisches Verhältnis von Elementen. Das Verhältnis 1:1.618 kommt in der Natur häufig zum Zug und deshalb spricht es uns ästhetisch an. Im Webdesign hilft es eine harmonische Seitenaufteilung, beispielsweise zwischen Navigation und Inhalt, zu erzeugen. Drittregel: Bei der Drittregel wird Inhalt in neun gleichgrosse Rechtecke geteilt. Die wichtigen Elemente werden jeweils auf den Schnittlinien dieses Rasters platziert. Dies erzeugt ein dynamisches Bild und wirkt spannender, als wenn beispielsweise alles mittig platziert wird. Webseiten gestalten (Elemente und Zwischenraum) Inhalte / Elemente Eine Website besteht sicherlich immer aus folgenden drei Inhalten/Elementen, die jeweils auf einer Seite verteilt werden: >> Navigation/Menü (Navi) >> Inhalt/Content (Titel, Fliesstext, Bilder) >> Logo/Header Die Navigation beinhaltet die Verlinkung zu den Unterseiten der Webseite, fungiert als Inhaltsverzeichnis, soll logisch aufgebaut werden und gestalterisch überzeugen. Der Inhalt des jeweiligen Themas/Kapitels ist das grösste Element der Website. Hier werden alle Informationen zu Thema platziert. Nebst Fliesstext und Titel kann dieser Teil Bilder, Multimedia und weitere Verlinkungen beinhalten. Das Logo dient als Erkennungsmerkmal und ferner als Home Button. Anhand der Verlinkung gelangen die Website Besuchenden immer wieder auf die Startseite / Landing page. WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 5 von 6

Muster Desktop und Mobile Layout Aufteilung (drei Spalten und eine Spalte) ) WEBDESIGN (Farbe, Typo, Bild, Layout) Zwischenraum / Weissraum Der Raum zwischen diesen Elementen wird Weissraum/Negativraum genannt und ist einn wichtiges Gestaltungselement. Hierbei gibt ess den Makroweissraum (zwischen den Hauptelementen) und den Mikroweissraum (zwischen den Abschnitten, Titeln etc.). Der Weissraum istt ein wichtigess Gestaltungselement viel Weissraum hebt die einzelnen Elemente klarer hervor während bei zu wenig w Weissraum die Übersicht schneller verloren wird und es ferne eine billige Wirkung haben kann. Gestaltungsraster Anordnung der verschiedenen Elementen (Navigation, Content, Bilder etc.) können nach einem Gestaltungsraster vorgenommen werden. Rasterr sind klar, strukturiert und vorhersehbarr inhaltsbasierte Webseiten bauen fast immer auf einem Raster auf. Allerdings können Raster auch zu einem engen Korsett werden und teils langweilig aussehen künstlerische Webseiten verzichten oft auf Raster. Prinzipiell tendieren rasterlose Webseiten jedochh zu chaotischer und unübersichtlicher Darstellung. Deshalb lohnt es sich für Anfänger/innen mitt einem Gestaltungsraster zu arbeiten. Wichtig W bei Rastern ist, dasss sie sich gut teilen lassen. In der Praxis haben sich 12er oder 16er Raste bewährt. Ausgangsbasis ist die Grösse des Ausgabegeräts, denn inzwischen werden Webseiten auf unterschiedlichen AusgabegerätA ten dargestellt (Mobile, Tablet, PC). Mit einer Auflösung von 1024x786pxx bedient man jedoch die meisten m Desktop Computer,, deshalb empfiehlt es sich, mit einer solchen Gestaltungsrastergrösse zu beginnen. Das D Gestaltungsraster kann dann ebenso für kleinere Ausgabegeräte dienen, indemm man einige Rasterspaltenn weglässt undd den Inhalt auf a das reduzierte Raster verteilt. WEBBASICS (http://www.webbasics.ch/) / Silvia Popp / 2016 Seite 6 von 6