Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Farbkonzepte

No description
by

Nicole Poethig

on 27 April 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Farbkonzepte

Farbkonzepte und Layout 1 2 Webdesign-Trends 3 4 Retro & Vintage Hand-Drawing 5 Web 2.0 Die Zielgruppe kennen

- Die Monitorauflösung muss auf die Zielgruppe angepasst sein.
- Je älter die Zielgruppe desto niedriger die Auflösung und umso kleiner der Monitor
- Je jünger die Zielgruppe desto höher die Auflösung und umso größer der Monitor
- Standard 1024 x 768 Pixel - Ist der sichtbare Bereich im Browserfenster, ohne scrollen zu müssen, dort wo die wichtigsten
Elemente (Logo. Navi...) platziert sind
- Bei einer Auflösung von 1024 x 768 Pixeln ist der sichtbare Bereich 960 x 600 Pixel, weil der Browserrahmen, Tabs oder Favoriten etc. den Platz einnehmen.
- Die Gestaltung kann auch über den Bereich 960 x 600 Pixel gehen, man muss jedoch bedenken das dieser Bereich nur für Leute mit großem Monitor sichtbar ist.
- Die Höhe ist flexibel.
Viewport

- alte und traditionelle Gestaltungselemente, die sehr verspielt sind
- charakterlich alt wirkende Typografie
- große Serifenschriften und Handschriften
- Eyecatcher, grafische Elemente, Fotos und Illustralionen
- Fotos im Sepia-Farbton
- Illustrationen von Personen und Fahrzeugen im 20er bis 80er-Jahre-Stil (Bsp. Persil)
- Schaltflächen und Navigationselemente im altertümlichen-Design (z.B. Knöpfe aus Metall oder Kunststoff)
- Farbkonzept: sepiaähnliche Braun- und Grautöne oder vielfarbige Farbkonzepte (Farbenfrohe Zeit 1970) Retro & Vintage - Handgeschriebene und gezeichnete Elemente (Icons, Sprechblasen, Pfeile, Linien etc.)
- kann sehr gut mit dem Retrostil kombiniert werden Hand-Drawing Web 2.0 - sehr gesättigte Farben
- bizarre Farbkonzepte
- Komplementärkontraste
- horizontale Ausbreitung der Seite auf dem Monitor
- viele Icons
- Glossy-Stil (Objekte und Flächen wirken wie auf Hochglanz poliert)
- schlichtes Design
- große Texte und Bedienelemente
- Navigationselemente befinden sich meist horizontal am oberen Seitenende
- dreckiges, schmutziges und kaputtes Design (Kratzer, Flecken, herunterlaufende Farbe, Graffiti, zerrissene oder abgerissene
Kanten, agressive Fonts, Zierelemente wie Tesafilm, Schrauben, Heftzwecken, Büroklammern)
- Farbkonzept ist sehr düster gehalten (z.B. Webseiten von Horrorfilmen oder Rockbands) Grunge 6 Grunge Scribble
Scribbels für Designer
Scribbels für Kunden
Buchprojekt Scribbel
Gestaltungsraster
- ein unsichtbares System von
Hilfslinien (Zeilen und Spalten),
dient der Konstruktion eines Designs
- innerhalb dieses Rasters werden
alle Layoutelemente ausgerichtet
- Ziel ist ein einheitliches und harmonisches
Erscheinungsbild
- möglichst detailiert und
später nicht von der Vorlage
abweichen
- Farben verwenden und
Browserrahmen einzeichnen

- Zweck, um Layout-Ideen
gemeinsam zu besprechen
- soll nicht ausgearbeitet
sein, sondern lediglich
einen Anhaltspunkt
über die Anordnung
der Elemente geben
- Anordnung der geplanten
Layoutelemente
- Unterschiedliche Farbflächen
schraffieren
- Notizen am Seitenrand Fixed versus Fluid-Layout
(festes oder variables Design)
Fixed Layout
- für eine bestimmte Bildschirmauflösung optimiert
- Nachteil: bei geringer Bildschirmauflösung entsteht eine horizontaler Scrollbalken, bei hoher Auflösung - weißer Freiraum
- Einsatz von Pixelwerten

5.1.1 Fluid Layout
- Layouts passen sich in der Breite dem Monitor des Users an (Mindestbreite vorausgesetzt)
- Vermeidet weißen Freiraum und horizontale Scrollbalken
- Beispiel (Onlineshops mit viel Inhalt Amazon.com)
- Einsatz von Prozentwerten für die Breiten der Elemente

5.2 Ausrichtung (im Browserfenster)
- Der Großteil aller Webseiten wird zentriert dargestellt
- Ausnahme sind Webportale und Nachrichtenseiten, diese werden links ausgerichtet,
aufgrund von Werbeflächen die rechts platziert sind (z.B. Anzeigen)
- rechtsbündige Seiten sollten vermieden werden, das sie für den User unpraktisch und ungewohnt sind
(der Leserichtung widersprechen)

5.3 Symmetrie und Asymmetrie
- in der Regel sind Webseiten immer asymmetrisch aufgebaut d.h. die Elemente sind nicht an einer imaginären vertikalen Mittelachse gespiegelt
- Symmetrie wirkt ruhig, harmonisch und übersichtlich aber die Spannung geht verloren
- Asymmetrie schafft Spannung, Eyecatcher, Icons oder Illustrationen sollten so positioniert werden das kein Ungleichgewicht entsteht

5.4 Gleichgewicht
- Achten Sie darauf das keine optischen Schwerpuntke im Layout entstehen, die nicht durch ein Gegengewicht ausgeglichen werden, es sei denn sie wollen den Blick des Users gezielt an eine Stelle lenken
- Ebenso wichtig ist es, das innerhalb des viewport kein ungewolltes Gleichgewicht entsteht

5.5 Der goldene Schnitt
- der kleinere Teil verhält sich zum größeren wie der größere zur Gesamtstecke (Verhältniszahl 1,62)
- Beispiel: 960 px / 1,62 = 593 px 960 px - 593 px = 367 px
- Wirkung: harmonisch und ausgeglichen

5.6 Die Drittelregel
- Die Strecke oder Fläche wird horizontal und vertikal in drei gleiche Teile geteilt.
- Die Schnittpunkte sind die idealen Orte um Objekte zu positionieren.
- Gesamtbild wirkt harmonisch und ästhetisch

- Website verfügt über keine
Unterseiten
- Alle Inhalte sind auf einer Seite
untereinander präsentiert
- Die Navigation verweist mittel Ankerlinks
auf weiter unten liegende Bereiche
der Seite (Wikipedia) Full-Single-Websites

7.1 Raster berechnen

- z. B. Schriftgröße von 12 Pixeln, Arial, 60-80 Zeichen pro Zeile, optimale Fließtextbreite = 380 Pixel
- Content in mehrere Spalten aufteilen, Zwischenräume von mind. 20 Pixeln einplanen,
es ergibt sich eine Spaltenbreite von 80 Pixeln, in denen ich meine Inhalte ausrichten kann.

7.2 Branding Area

- Horizontaler Bereich am Kopf der Seite, in dem das Logo, entsprechend dem Raster, positioniert wird
- eine völlig leere branding area in der nur das logo positioniert ist, ist ein modernes Gestaltungsmittel und hebt das Logo
optisch hervor

7.3 Hauptnavigation

- die Navigation soll horizontal direkt unterhalb der Branding-Area verlaufen
- als erstes verfassen wir Navigationspunkte, Schriftart und -größe und richten diese am Raster aus

7.4 Content

- für den Inhalt sind im Beispiel 380 Pixel in der Breite eingeplant, somit lässt das Raster einen mehrspaltigen
Layout-Aufbau zu.

7.5 flexibel den Inhalt gestalten

- für den Inhalt sind im Beispiel 380 Pixel in der Breite eingeplant, somit lässt das Raster einen mehrspaltigen
Layout-Aufbau zu.

7.5.1 Grid-Systeme

- es handelt sich um Systeme, die Photoshop-Dateien mit eingezeichnetem Raster enthalten
- Vorgefertigter Seitenaufbau (Rasterbezogen)

7.5.2 960-Grid-System

- am häufigsten eingesetz und kostenlos
- Umfasst u. a.: Photoshop, Fireworks, CSS-Vorlagen sowie ein mehrseitiges PDF-Dokument
- diese Dokumente bieten eine gute Vorlage zum scribbeln von Weblayouts
- Vorteil: ein Raster welches sich problemlos durch 2, 3, 4, 5 und 6 teilen lässt und somit alle gängigen mehrspaltigen
Layouts realisierbar sind
Gestaltungsraster gestalten The End.
Full transcript