softwareentwicklung - files.schoenberg.mobi · gut lesbar ist, ist ein bestimmter zeilenabstand...
TRANSCRIPT
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
*) 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
newsletter schoenberg newsletter Webdesign
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:
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
newsletter schoenberg newsletter Webdesign
3 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company
newsletter schoenberg newsletter Webdesign
4 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company
newsletter schoenberg newsletter Webdesign
5 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
newsletter schoenberg newsletter Webdesign
6 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company
newsletter schoenberg newsletter Webdesign
7 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company
newsletter schoenberg newsletter Webdesign
8 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
newsletter schoenberg newsletter Webdesign
9 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
newsletter schoenberg newsletter Webdesign
10 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company
newsletter schoenberg newsletter Webdesign
11 newsletter schoenberg …… Impressum: Ing. SCHÖNBERG Christian, Schallermühle 6, A-4844 Regau, [email protected]
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.
Ing. Schönberg Christian
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.co.at/blog-software
Hinweis:
Weitere tolle und kostenlose
Softwaretools unter:
http://schoenberg.company