Softwareentwicklung - files.schoenberg.mobi · gut lesbar ist, ist ein bestimmter Zeilenabstand wichtig. Die Lesbarkeit eines Textes ist abhängig von: - der Füllung der Seite die

newsletter schoenberg newsletter Webdesign

1 newsletter schoenberg ….. Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]

Ing. Schönberg Christian Einzelpreis: kostenlos

Softwareentwicklung

Ing. SCHÖNBERG Christian *

Softwareentwicklung

Schallermühle 6/5,

A-4844 Regau

[email protected]

*) Einzelunternehmen SCHÖNBERG gegründet 2002 © 2002 - 2014

Webdesign: Allgemeines:

Was bedeutet eigentlich Webdesign.

Das Wort Design bedeutet in seiner

genauen Definition, den Entwurf, die

Gestalts- bzw. die Formgebung eines

Gegenstandes. Und Webdesign definiert

eben diese Punkte in Bezug auf die

Webseitengestaltung. Im Webdesign

werden verschieden Inhalte einer

Webseite in Einklang gebracht und dem

Besucher zugänglich gemacht. Am

Anfang des Designprozesses steht

natürlich einmal der Inhalt, der dem

Besucher nähergebracht werden sollte.

Diese Inhalte haben natürlich ein

bestimmtes Ziel. Dieses kann sein, dass

man dem Besucher Informationen

geben will, oder wie es am häufigsten

der Fall ist, dass man dem Besucher

etwas verkaufen will. Die

Hauptaufgabe des Webdesigns ist es

den Inhalt möglichst funktional,

zugänglich und attraktiv umzusetzen.

Bei der Umsetzung müssen natürlich

auch gewisse Vorgaben (z.B. Corporate

Design, usw.) beachtet werden. Der

Designprozess gliedert sich auf in die

Analyse, der Konzeption, dem Entwurf

und schließlich der Präsentation. Die

Analyse ist das Zusammentragen aller

Informationen und die Verdeutlichung

in Schaubildern, Modellen, Skizzen,

Fotos, usw. Der Entwurf zeigt nicht,

wie die Sache letztendlich aussehen soll,

sondern was sie leisten soll.

Anschließend wird die Präsentation

erstellt, die die Lösung möglichst

überzeugend darstellen soll.

wesentliche Designelemente

Wesentliche Elemente des Webdesigns

sind vor allem das (X)HTML bzw.

HTML5, sowie das CSS bzw. CSS3.

Gemäß Definition wird der (X)HTML

Text nicht programmiert, sondern

geschrieben.

Einfaches Beispiel für eine HTML-

Quelltext:

<HTML>

<HEAD>

< TITLE > Beispiel < /TITLE >

< /HEAD >

< BODY >

< H1 > Hauptüberschrift < /H1 >

Jetzt kommt der Text.

< /BODY >

< /HTML >

CSS-Beispiel:

H1 {

FONT-SIZE: 16pt

}

http

://s

choe

nber

g.co

mpa

ny

Ing. Schönberg Christian

Weitere tolle und kostenlose

Softwaretools unter:

http://schoenberg.co.at/blog-software

http://schoenberg.company/

http://schoenberg.company/



2 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]

Allgemeines

Webstandards

Layout und Gestaltung

Weiteres:

Außerdem gibt es auch Unterschiede

von der Seite her. Es gibt, Statische

Seiten:

- diese haben eine fixe Höhe und

Breite

- haben fest definierte Farben

- eine pixelgenaue Platzierung

von Texten und Bildern

- bei mehreren Seiten muss man

blättern

Dann gibt es interaktive

Webdokumente:

- diese haben variable Höhen

und Breiten

- Farbdarstellung kann vom

Anwender beeinflusst werden

- Durch Klicken erreicht man

weitere Seiten

Weiters ist zu beachten, dass eine

Webseite nicht in allen Browsern gleich

aussehen.

Es gibt standardkonforme Browser, wie

z.B. Mozilla Firefox, Netscape, Opera,

Safari, sowie bedingt standardkonform

der Internetexplorer. Dann gibt es auch

immer noch Anwender die ältere

Browser verwenden. Und ein immer

wichtigerer Browser betrifft mobile

Webanwendungen.

Nun zu den Webstandards:

Früher wurden zumeist Inhalt, Struktur

und Formatvorlagen in einer Datei

untergebracht.

Dies hatte zur Folge, dass bei einem

notwendigen Update alle Dateien

geändert werden mussten. Modernes

Html bedeutet, dass Inhalt und

Struktur, sowie die Formatvorlagen

getrennt sind. Das heißt, bei einem

Update muss nur mehr die

Formatvorlage geändert werden und

alle Seiten sind automatisch

aktualisiert.

Weiters wird immer öfter der Begriff

„Barrierefreiheit“ verwendet. Dahinter

verbirgt sich, dass die Webseite für alle

Personengruppen, auch benachteiligten

Personen, zugänglich sein sollte.

Jetzt zur Gestaltung und dem Layout:

In diesem Zusammenhang spielt die

visuelle Wahrnehmung eine wichtige

Rolle.

Umfeld und Figur Trennung:









Umfeld

Drittelregel

Prägnanz

Es gibt kein Nichts, in dem sich ein

Objekt befindet. Alle Elemente haben ein

Umfeld. Durch das Gesetz der Figur-

Trennung erklärt die

Gestaltspsychologie diesen

Zusammenhang. Gegenstände heben sich

von Ihrem Umfeld ab, z.B. durch den

Kontrast, die Farbe, die Kontur bzw. der

Bewegung.

Dann gibt es noch den sogenannten

goldenen Schnitt. Dieses ist das wohl

bekannteste Proportionsgesetz. Werden

Webseiten nach dem goldenen Schnitt

getrennt, so erhält der Betrachter ein

Gefühl der Harmonie und Ästhetik.

Weiters ein wichtiges Gesetz ist die

Drittregel. Eine Aufteilung von 2:1

erzeugt den Eindruck von Ordnung und

Stabilität. An diesem Punkt sollte sich

das Element befinden, dass die größte

Aufmerksamkeit erhalten soll.

Gute Gestaltung und Prägnanz:

Es ist eine Eigenheit von uns Menschen,

dass wir beim Betrachten eines Bildes

zuerst eine Kategorisierung in einfache

Formen durchführen. Erst anschließend

werden dann die anderen Elemente

wahrgenommen.





Hinweis:



http://schoenberg.company





Nähe, Geschlossenheit

Gleichheit, Ähnlichkeit

Vertrautheit

Nähe:

Nahe bei einander liegende Objekte

werden zumeist als Gruppe

wahrgenommen. Bei größeren Abständen

wird dies als Trennung der Gruppe

erfasst.

Dies hat zur Folge, dass im Webdesign

häufig die Inhalte in Inhaltsbereiche

aufgeteilt werden.

Gleichheit oder Ähnlichkeit:

Das bedeutet, dass mehrere Gegenstände

die gleiche Merkmale aufweisen, als

zusammengehörig wahrgenommen

werden.

Geschlossenheit:

Gegenstände die eingerahmt oder auf

sonstige Weise geschlossen sind, werden

als Einheit vom Auge erfasst und ziehen

die Konzentration auf sich. Das ist auch

der Grund warum wichtige

Textabschnitte oftmals eingerahmt

werden. Das gleiche gilt natürlich auch

im Webdesign.

Erfahrung und Vertrautheit:

Sehen wir bekannte Formen, Muster

usw., dann haben wir das Gefühl von

Vertrautheit. Diese Formen bzw. Muster

müssen nicht einmal zu Gänze

abgebildet sein, sondern es genügen

bereits Ausschnitte, denn unser Gehirn

ergänzt die fehlenden Teile.





Hinweis:








Einfachheit, Harmonie

Symmetrie, Asymmetrie

Linien, Flächen

Einfachheit und Harmonie:

Eine Gruppe wird auch als Einheit

betrachtet, wenn die Anordnung der

einzelnen Elemente den Eindruck einer

visuellen Verbindung darstellt.

Symmetrie und Asymmetrie:

Symmetrische Anordnungen habe die

Eigenschaft, dass diese die

Aufmerksamkeit auf sich ziehen.

Außerdem werden diese als Harmonisch

gewertet, wenn die Elemente gleichmäßig

auf beiden Seiten einer Achse aufgeteilt

sind.

Das Gegenteil davon ist die Asymmetrie.

Webseiten mit asymmetrischer

Anordnung bauen die Spannungsfelder

auf und regen den Besucher an, sich am

Geschehen zu beteiligen.

Das heißt, wenn Sie Harmonie vermitteln

möchten, dann sollte eine symmetrische

Anordnung gewählt werden. Wollen Sie

jedoch den Besucher in Ihren Bann ziehen

und zum aktiven Teilnehmen animieren,

dann sollten Sie der asymmetrischen

Anordnung den Vorzug geben.

Visuelles Gewicht:

Unter Gewicht wird hierbei verstanden,

welche Aufmerksamkeit bestimmten

Elementen gegeben wird. Diese ist

abhängig von der Größe, der Farbe, der

Helligkeit, der Form und der Lage.

Linien und Flächen:

Linien werden zumeist als dekorative

Einlage verwendet.

Es gibt einige Richtlinien betreffend der

Gestaltung:

- 0,3 bis 0,6 pt für Spalten und

Kästen

- 1 pt starke Linien sollten

vermieden werden

- 2 bis 4 pt bieten guten Kontrast

zum Grundtext

- 8 bis 12 pt sinnvoll für

Übergangsbereiche zwischen

Flächen









Typografie

Schriftarten

Lesbarkeit

TYPOGRAFIE:

Bei der Typografie geht es um die

Gestaltung der Schriften. Schriften

finden sich überall, in Werbungen, auf

Plakaten, Briefen, usw. Diese werden je

nach Gestaltung mehr oder weniger

bewusst wahrgenommen.

Unsere Schriftzeichen bestehen zuerst

einmal aus Groß- und Kleinbuchstaben

und Ziffern. Dann besteht die

Möglichkeit, dass wir verschiedene

Schriftarten auswählen, diese können

wir außerdem noch Fett, Halbfett, breit,

schmal, kursiv oder in Farbe darstellen.

Wichtiges Merkmal der Schrift im

Webdesign ist die Lesbarkeit. Diese

wird bestimmt durch:

- die verwendete Schrift

- die Schriftgröße

- die Schrift- und Seitenfarben

- die Buchstaben- und

Wortzwischenräumen

- die Zeilenlänge

- den Zeilenabstand

- die Silbentrennung

Je nach verwendeter Schrift wird dies

unterschiedlich wahrgenommen.

Weiters ist es sinnvoll, Schriftarten

nicht zu mischen und diese nur

innerhalb einer Schriftenfamilie zu

kombinieren. Diese können natürlich

durch Fett-, Kursiv-, usw.

hervorgehoben werden.





Hinweis:








Zeilenbreite

Textausrichtung

Zeilenbreite und Satz:

Damit es für den Besucher angenehm zu lesen ist, sollte eine Zeile aus ca. 60

bis 70 Zeichen bestehen. Sind die Zeilen zu kurz, entsteht beim Leser evtl. ein

Gefühl der Unruhe. Zu lange Sätze sind hingegen mühsam zu lesen, so dass

auch diese zu vermeiden sind.

Textausrichtung:

Sind mehrere Sätze in einem Abschnitt gleichlang, so wird dies als Blocksatz

wahrgenommen. Diese Blocksätze sind am PC allerdings eher schwer lesbar.

Deshalb ist der Flattersatz zu bevorzugen.





Hinweis:








Silbentrennung

Zeilenabstand

Kontrast und Farbe

Silbentrennung:

Hierbei ist zu beachten, dass Browser keine Silbentrennung kennen.

Umbrüche vermeiden:

Umbrüche sollten generell vermieden. Dies erreicht man vor allem dadurch,

dass man am Ende eines Satzes lange Wörter vermeiden sollte.

Zeilenabstand:

Damit ein Text gut lesbar ist, ist ein bestimmter Zeilenabstand wichtig.

Die Lesbarkeit eines Textes ist abhängig von:

- der Füllung der Seite

- die Laufweite der Schrift

- dem Buchstaben- und Wortabstand

- der Zeilenlänge

- und natürlich dem Zeilenabstand

Kontrast und Farbe:

Zumeist wird natürlich ein dunkle (z.B. schwarze) Farbe für den Text und eine

helle Farbe für den Hintergrund verwendet. Es ist allerdings auch umgekehrt

möglich. Das heißt, heller Text auf dunklem Hintergrund. Dies bewirkt, dass

der Text fetter und gedrungener erscheint.









Kontrast und Farbe

Schriftgröße

Farben

Schriftgröße:

Damit Texte am Bildschirm besser lesbar

sind, werden diese von Windows bzw.

Mac sozusagen geglättet.

Bei großen Schriften ist zu beachten,

dass die Darstellung nicht auf jedem

Betriebssystem bzw. Browser optimal

sein kann.

Farben:

Die Farbe ist ein sehr wichtiges aber

zugleich auch ein sehr subjektives

Gestaltungsmittel. Die additiven

Grundfarben sind, wie wir wissen, die

Farben Rot, Grün und Blau. Am PC

kennen wir dieses als RGB-System.









Farbwirkung

Farbkontraste

Farbabstufungen

Dann gibt es die subtraktiven Farben.

Diese sind die Farben Cyan, Magenta,

und Gelb. Diese finden im Farbdruck

deren Anwendung.

Farbwirkung:

Oftmals sind bestimmte Farben für

Webseiten bereits durch Firmenlogos,

usw. vorgegeben.

Farben haben folgende Wirkungen:

- psychologische Wirkung

- symbolische Wirkung

- soziale Wirkung

Farbwirkungen:

- Cyan: kühl, sachlich, frisch,

sportlich

- Magenta: modern, kühl,

emotional, kommunikativ

- Gelb: Freude, Optimismus,

sonnig, heiter, anregend,

Eifersucht

- Rot: Leidenschaft, Aktivität,

Kampf, Gefahr, Wärme,

unruhig, aufwirbelnd,

aggressiv

- Grün: Hoffnung, Ruhe,

ausgleichend, erfrischend,

sauer, herb, unreif

- Blau: Harmonie, Treue,

Vertrauen, Verlässlichkeit,

Sachlichkeit, Distanz, Kälte

- Weiß: Reinheit, Sauberkeit,

Leichtigkeit, kühl, sachlich

- Schwarz: Macht, Eleganz,

Funktionalität, geheimnisvoll,

sachlich, Gewalt, Tod, Härte,

Schwere

Farbkontraste und Farbabstufungen:

Farbkontraste entstehen vor allem

durch Farben im Hintergrund.





Hinweis:








Wahrnehmungsgesetz

Impressum

Das Wahrnehmungsgesetz besagt

folgendes:

Komplementärfarben (helle und

dunklere Farben) sollten Sie verwenden,

wenn Sie verstärkte Aufmerksamkeit

erhalten möchten.

Benachbarte warme Farben erzeugen ein

Gefühl der Harmonie.

Bezüglich der Farbabstufungen lässt sich

sagen, dass sattere (kräftigere) und

dunklere Farben mehr

Aufmerksamkeit auf sich ziehen.

Hellere und weniger gesättigte Farben

eignen sich eher für den Hintergrund.

Gedämpfte und ausbalancierte Farben

wirken harmonisch und beruhigend.





Hinweis:






Documents

Softwareentwicklung - files.schoenberg.mobi · gut lesbar ist, ist ein bestimmter Zeilenabstand wichtig. Die Lesbarkeit eines Textes ist abhängig von: - der Füllung der Seite die