Category Archives: Design

Visual Interface Design

Visual Interface Design

  1. CONSISTENTIE In concept (wat ben je nu eigenlijk aan het maken), in stijl, in kleurkeuze, in sfeer
  2. WERK METHODISCH EN SYSTHEMATISCH Ontwerpmethode volgen (van onderzoek naar concept) stap 1 stap 2 stap3 en weer terug naar 1(Iteratief), convergeren divergeren (wiebertje), worst case; ontwerp voor de extremen, kleurkeuze na onderzoek.
  3. LESS IS MORE, form follows content Ontwerpen is verwerpen, reduceren van ontwerpelementen (typo, grafische elementen zoals lijnen, kleuren). Wat is noodzakelijk, wat maakt het totaal sterker?
  4. SHOW IT Laat ontwerpproces zien, laat je keuzes zien, laat variaties zien, laat schetsproces zien, vestig de aandacht op de sterke punten in je ontwerp.
  5. USE IT Als je goed bent in onderdelen van visual design zoals ordenen, fotografie, typografie > gebruik het! Zo niet, OEFEN, OEFEN.
  6. SCHETS, SCHETS OPNIEUW Niets weggooien, risico nemen, ga nog een stap verder als je denkt dat je er bent.
  7. AANDACHT Verzorg je werk van schets tot presentatie, geef alles voldoende kwaliteit, kritisch naar je eigen werk kijken, uitlijnen, orden je elementen, Ruim op (van overbodige ruis in je ontwerp tot genummerde mappen met documenten). Met aandacht en plezier werken is zichtbaar in het werk.
  8. TWIJFEL Vraag je bij alles af: kan dit ook anders (andere kleur, andere volgorde) maak variaties en kies op basis van het DOEL van je ontwerp. Kijk naar andere producten en vraag je af waarom het zo vormgegeven is.
  9. HET IS MOEILIJK Kijk bewust om je heen! Overal is inspiratie! Waarom zijn sommige dingen meer userfriendly dan andere? Waarom raak je soms frustreerd van een voorwerp/verpakking/handeling/.. ligt het aan jou of aan de ontwerper? Ontleed wat je ziet. Maar houd het wel leuk; durf te beginnen met de clich�s, durf te beginnen met verre-van-perfecte ideen, durf fouten te maken, maar leer er wel van. Have fun!
  10. FOLOW THE RULES, STICK TO THE RULES, BREAK THE RULES PS Niets is verboden maar de Comic Sans is wel verboden.

Designing InterFaces

  1. http://designinginterfaces.com/
  2. http://time-tripper.com/uipatterns/Introduction

UI Patterns and Techniques

Organizing the Content

  1. Two-Panel Selector
  2. One-Window Drilldown
  3. Wizard
  4. Extras On Demand
  5. Intriguing Branches


Getting Around

  1. Clear Entry Points
  2. Global Navigation
  3. Color-Coded Sections
  4. Animated Transition


Organizing the Page

  1. Visual Framework
  2. Center Stage
  3. Titled Sections
  4. Card Stack
  5. Closable Panels
  6. Movable Panels
  7. Diagonal Balance
  8. Responsive Disclosure
  9. Responsive Enabling
  10. Liquid Layout


Commands and Actions

  1. Action Panel
  2. Smart Menu Items
  3. Progress Indicator
  4. Multi-Level Undo
  5. Command History


Showing Complex Data

  1. Overview Plus Detail
  2. Row Striping
  3. Sortable Table
  4. Jump to Item
  5. Cascading Lists
  6. Tree-Table


Getting Input From Users

  1. Forgiving Format
  2. Fill-in-the-Blanks
  3. Input Hints
  4. Input Prompt
  5. Dropdown Chooser
  6. Illustrated Choices
  7. Good Defaults


Builders and Editors

  1. Edit-in-Place
  2. Smart Selection
  3. Composite Selection
  4. One-Off Mode
  5. Constrained Resize


Making It Look Good

  1. Deep Background
  2. Few Hues Many Values
  3. Corner Treatments

Organizing the Content

  1. Overview Plus Detail
  2. Hub and Spoke
  3. Extras On Demand
  4. Step-by-Step Instructions
  5. One-Window Drilldown
  6. Intriguing Branches
  7. Multi-Level Help

Getting Around

  1. Clear Entry Points
  2. Toplevel Navigation
  3. Color-Coded Divisions
  4. Animated Transition
  5. Detail View Navigation

Organizing the Page

  1. Visual Framework
  2. Center Stage
  3. Titled Sections
  4. Card Stack
  5. Closable Panels
  6. Movable Pieces
  7. Progressive Disclosure
  8. Progressive Enabling
  9. Property Sheet
  10. Diagonal Balance
  11. Liquid Layout

Getting Input From Users

  • Good Defaults
  • Forgiving Format
  • Fill-in-the-Blanks
  • Input Hints
  • Input Prompt
  • Dropdown Chooser
  • Remembered Choices
  • Illustrated Choices

Showing Complex Data

  1. Sortable Table
  2. Tree-Table
  3. Alternating Row Colors
  4. Cascading Lists
  5. Jump to Item
  6. New-Item Row


Commands and Actions

  1. Multi-Level Undo
  2. Smart Menu Items
  3. Prominent Done
  4. Prominent Cancel
  5. Action Groups
  6. Rollover Effects
  7. Progress Indicator
  8. Command History
  9. Macros


Direct Manipulation

  • Smart Selection
  • Edit-in-Place
  • One-Off Mode
  • Spring-Loaded Mode
  • Constrained Resize
  • Composite Selection
  • Simultaneous Views

Stylistic Elements

  • Deep Background
  • Few Hues, Many Values
  • Contrasting Font Weights
  • Corner Treatments
  • One-Pixel Lines
  • Skins