designidee.ch

«Design ist kein Zufall!»

Diese Seite ist eine Zusammenfassung der wichtigsten Designbereiche wie Typografie und Farbe, zeigt aber auch psychologische Aspekte des Designs auf.


Das Buch:Die Inhalte im Bereich Designprinzipien basieren auf dem sehr lehrreichen und inspirativen Buch "Design - Die 100 Prinzipien für erfolgreiche Gestaltung" (ISBN-10: 3830712952).

Die Inhalte wurden auf die wichtigsten 11 Prinzipien runtergebrochen.

Der Autor Jan Cibula, webedu.ch ag

Gut zu Wissen

«Immer schön Mass halten...»

Ein guter Designer sollte folgendes Wissen...

  • Masseinheiten:
    1 inch = 2,54cm.
  • Auflösung/Pixeldichte (dots per inch):
    72dpi (bei Mac) - 96dpi (bei Windows) - Retina (von 217-401 dpi).
  • Papierformate:
    A4»210x297mm | A3»297x420mm | A5»148x210mm | A6»105x148mm
  • Farbräume:
    RGB (Bildschirm, additiv / Rot-Grün-Blau) | CMYK (Druck, subtraktiv / Cyan-Magenta-Yellow-Key) | LAB (grösster Farbraum: Luminance-Grün/Rot-Blau/Gelb).| Hexadezimal (Webbasierte Angaben z.B: #FF9900 rot-grün-blau).
  • Bildschirmauflösungen (ScreenResolution):
    4K (4096x3072) | 2K (2048x1536) | WUXGA (1920x1200) | FullHD "1080p" (1920x1080) | HDV "720p" (1280x720) | XGA (1024x768) | SVGA (800x600) | DVD Pal (720x576) | VGA (640x480)


typographie_know_how.pdf [Wissenswertes rund um Druck/Print/Web] | Responsinator [Anzeige/Test verschiedener Handyauflösungen]

Grundlagen zur Farbe

«Farbe soll Aufmerksamkeit erregen, Elemente gruppieren, Inhalte vermitteln und Ästhetik verstärken.»

Wird Farbe falsch eingesetzt, kann sie Form und Funktion eines Designs verderben.

Benutze gesättigte Farben vorsichtig und kombiniere wenige davon, ansonsten könnte dies das Auge "erschlagen". Beachte, dass einige Teile der Bevölkerung Probleme mit dem Farbsehen hat!

  • Farbpalette: Verwende Farben sparsam (max. 5) und nicht als einziges Mittel der Informationsvermittlung.
  • Farbkombination: Achte auf eine harmonische Farbwahl durch rechtstehende Positionen im Farbrad.
  • Farbsättigung: gesättigte (reine) Farben erwecken Aufmerksamkeit, entsättigte (gebrochene) Farben werden freundlicher und professioneller empfunden .
  • Symbolismus: Achte auf die gefühlsbezogene Wirkung von Farben, warme Farbtöne und kalte Töne.



https://color.adobe.com/ [Diese Farben passen zusammen]

Grundlagen zur Typografie

«Achte bei Deinen Arbeiten auf Ausrichtung & Leserlichkeit. Man wird es Dir danken.»

Textelemente sollten so platziert werden, dass der Rand von Zeilen/Spalten in einer Linie ist.

  • Spationierung: Durch sperren des Textes (Zeichenabstand) wird die Leserlichkeit erhöht.
  • Zeilenabstände (Durchschuss): Ein grösserer Zeilenabstand wirkt luftiger und leichter zu lesen.
  • Kontrast: wichtig zum Lesen (kein rot auf schwarz!)
  • Spalten: Langer Text sollte nicht in zu breiten Spalten umgebrochen werden, besser für's Auge.
  • Ausrichtung: Flattersatz (linksbündig), Blocksatz, Mittelachse.
  • Hervorhebungen: Kursiv, Fett, Unterstrichen oder invers sind möglich, sollten aber sparsam eingesetzt werden.
  • Kerning: Es gibt Schriftarten welche ein unschöne und unregelmässige Zeichenabstände aufweisen.
  • Schriftarten: Serifen, Serifenlos und Monotype
  • Aliasing: Weichzeichnen der Schrift für den Bildschirm.


http://type.method.ac/ [Kerning Game] | http://www.dafont.com/ [Fonts] | http://visual.ly/history-typography [Grafiken/Statistiken/Inspiration]

#01 | Form folgt Funktion

«Die Schönheit des Designs ergibt sich aus der Reinheit der Funktion.»

Eine beliebte Aussage von Designern, vor allem von erfolgreichen Designern.

Optimiere und reduziere die ästhetische Form für eine klare Funktion. Eine Mischung beider Varianten ist manchmal auch möglich.

Beispiel(e): Soll eine Uhr schnell und genau gelesen werden ist die digitale Anzeige besser. Steht die pure Ästhetik im Vordergrund, ist eine minimalistische Analoganzeige gefordert.

#02 | Chunking

«Die Technik, bei der viele Informationseinheiten zu einer begrenzten Anzahl Einheiten (Chunks) zusammengefasst werden.»

Auf diese Weise werden Informationen vom Betrachter einfacher verarbeitet und leichter memorisiert. Strukturierte Inhalte bleiben besser im Gedächtnis.Der Informationsspeicher unseres Kurzzeitgedächtnis ist begrenzt, deshalb werden nur kurze Einheiten verarbeitet und in das Langzeitgedächtnis weitergeleitet.

Sollen sich Informationen im Gedächtnis einprägen, teilt man diese am besten in kleine Einheiten "häppchenweise" auf.

Beispiel(e): Wörterreihen oder Telefonnummern werden in kleinen Gruppen besser gespeichert. Du hast ja auch mit den Kärtchen für die Fremdsprachen am besten lernen können.

#03 | Gesetz der Geschlossenheit

«Die Neigung, eine Gruppe von Einzelelementen als erkennbares und geschlossenes Muster zu sehen.»

Unser Gehirn versucht immer ein Muster, eine Ordnung zu erkennen. Deshalb werden fehlende Teile ergänzt.

Auf diese Weise werden Informationen vom Betrachter einfacher verarbeitet und leichter memorisiert. Strukturierte Inhalte bleiben besser im Gedächtnis.Der Informationsspeicher unseres Kurzzeitgedächtnis ist begrenzt, deshalb werden nur kurze Einheiten verarbeitet und in das Langzeitgedächtnis weitergeleitet.

Erstelle Designs, welche weniger komplex sind, aber dafür interessanter wirken. Lasse bewusst Elemente weg.

Beispiel(e): Fehlende Informationen werden vom Gehirn ergänzt und bekannte Formen werden geschlossen, um ein Muster zu vervollständigen.

#04 | Symmetrie

«Symmetrie ist die optische Entsprechung von Elementen innerhalb einer Form.»

Symmetrie wurde seit jeher mit Schönheit assoziiert. Bei Pflanzen, Tieren und Menschen finden sich Symmetrien wieder.

Es gibt drei Arten von Symmetrien:

  • Spiegelung
  • Rotation
  • Translation
  • Verwende Symmetrien für ein harmonisches und stabiles Gleichgewicht in Fotografie und Design. Manchmal kann aber auch ein unsymmetrisches Design spannend und dynamisch wirken ;-)

    Beispiel(e): In der Architektur steht Symmetrie für eine stabile Ordnung und suggeriert Sicherheit. Die Pariser Notre Dame beinhaltet alle drei Symmetriearten.

#05 | Benutzerfreundlichkeit durch Benutzbarkeit & Bestätigung

«Je flexibler ein System ist, desto mehr nimmt seine Benutzbarkeit ab.»

Bestätigung:
Technik, mit der unerwünschte Aktionen verhindert werden, indem diese vorher verifiziert werden.

Webseiten oder andere grafische Bedienoberflächen sollten für Benutzbarkeit optimiert werden. Wäge aufgrund der Zielgruppe ab, wie flexibel eine Auswahl sein darf. Baue Bestätigungen und Zusammenfassungen ein.

Beispiel(e): Eine Fernbedienung kann flexibel sein, dadurch aber die Benutzbarkeit unnötig erschweren.Übersichten oder Bestätigungen verhindern falsch ausgefüllte Formulare oder unbeabsichtigte Aktionen. Bei geübten Usern kann dies aber auch nerven.

#06 | Goldener Schnitt - Drittelsregel

«Mathematisches Verhältnis zwischen Elementen einer Form (Höhe zu Breite) das 0,618 beträgt.»

Der Einfachheit halber kann man das Verhältnis 0,618 runden auf 0,666. So wird aus dem goldenen Schnitt die Drittelsregel.

Der goldene Schnitt findet sich überall in der Natur, der Kunst und der Architektur. Piet Mondrian und Leonardo da Vinci bauten den Schnitt in ihre Bildwerke ein.

Setze die Drittelsregel für deine Designs und Fotos ein. Das dadurch entstehende Bild wird immer (unbewusst) als stimmiger angenommen.

Beispiel(e):Ein Screendesign oder ein Foto sollte die Drittelsregel möglichst beinhalten. Bei Landschaftsaufnahmen sind 1/3 Landschaft und 2/3 Himmel oder umgekehrt.

#07 | Ökonomieprinzip & Hicks Gesetz

«Bei einer Auswahl an funktional ähnlichen Designs soll das einfachste gewählt werden.»

Hicks Gesetz:
Je mehr Alternativen zur Auswahl stehen, desto länger braucht man, um sich zu entscheiden.

"Die Natur arbeitet auf möglichst kurzem Wege". (Aristoteles)

Hast Du mehrere Designvarianten mit denselben Funktionen erstellt, wähle davon das einfachste! Weglassen erhöht oft die Funktionalität und Ästhetik eines Designs. Bei Auswahlen solltest Du die Anzahl Alternativen begrenzen.

Beispiel(e): Je mehr Einstellungen für ein Gerät vorliegen, desto länger braucht der Benutzer um sich zu entscheiden (Kaffeemaschine).

#08 | GIGO (Garbage In - Garbage Out)

«Die Qualität von Systemausgaben hängt von der Qualität der Systemeingaben ab.»

Gute Eingaben führen zu guten Ergebnissen und schlechte Eingaben zu schlechten Ergebnissen.

Computerprogrammierer haben festgestellt, dass gute Eingaben zu guten Ergebnissen und schlechte Eingaben zu schlechten Ergebnissen führten.

Dies gilt heute in allen Systemen: interaktive Bildschirmeingaben (Web-Formulare), Wirtschaft, Technik, Ernährung und Pädagogik.

Beachte, dass Du aus einer qualitativ schlechten Logovorlage kein gutes "hervorzaubern" kannst.
Verlange vom Kunden immer saubere, brauchbare und bestmögliche Daten.


Bei Eingabeformularen kannst Du Fehleingaben mit etwas Aufwand umgehen und saubere Ausgaben sicherstellen.

#09 | Informationsorganisation

«Es gibt 5 Prinzipien zur Organisation von Information: Kategorie, Zeit, Ort, Alphabet und Hierarchie.»

Die Informationsorganisation ist einer der wichtigsten Faktoren, um die Meinung eines Benutzers zu beeinflussen.

  • Alphabetische Organisation
  • Zeitliche Organisation
  • Örtliche Organisation
  • Hierarchische Organisation
  • Kategorische Organisation

Organisiere die Information in Deinem Design oder auf Deiner Website nach einem der obigen Prinzipien. Arbeite mit Gruppen oder Hierarchien für Navigationen.

#10 | Bedürfnishierarchie

«Damit ein Design erfolgreich ist, muss es erst die grundlegenden Bedürfnisse der Zielgruppe erfüllen. Erst dann können Bedürfnisse auf höherer Ebene berücksichtigt werden.»

Die Bedürfnisse sollten dieser Reihe nach befriedigt werden

  • Funktionalität (Videorecorder muss zumindest aufnehmen können)
  • Zuverlässigkeit (VR sollte zuverlässig funktionieren)
  • Benutzbarkeit (VR sollte einfach bedienbar und fehlertolerant sein)
  • Leistung (VR kann nach Stichworten aufnehmen)
  • Kreativität (VR kann auch optisch gut aussehen und sogar Kultstatus erreichen, wenn das Design ausgefallen ist)

Gehe bei allen Designarbeiten nach diesen Ebenen vor. Du kannst Dir sogar eine Checkliste machen.

Ein B&O Designerhandy wurde bereits in der Testphase "abgeschossen", 90% der Probanden konnten nicht einmal eine SMS schreiben. Und: weshalb wurde Google so erfolgreich?

#11 | Umgekehrte Pyramide

«Methode der Informationspräsentation, bei der die wichtigsten Fakten und Daten am Anfang stehen.»

Was? Wo? Wann? Wer? Warum? Wie?

Die umgekehrte Pyramide besteht aus einem Vorspann (kritische Information) und einem Hauptteil (erläuternde Information).
Der Vorspann sollte die wichtigsten Fragen beantworten: Was? Wo? Wann? Wer? Warum? Wie?
Der Hauptteil erweitert diese Hierarchie mit tiefergehenden Informationen, meist in derselben Reihenfolge.

Auch bei Webseiten oder Berichten sind diese Methoden zu berücksichtigen und garantieren die Aufmerksameit des Lesers.

Vor allem im Journalismus ist diese Methode sehr gebräuchlich. Heutzutage werden im Web mehr Informationen erst über einen Link "mehr..." (auf einer eigenen Seite) präsentiert.