Thomas Hirt » 03 Entwurf

Raster entwickeln

tomhirt — Tue, 05 Jan 2010 14:17:55 +0000

Ein Raster ist ein Ordnungssystem. Es erlaubt Bild und Textelemente auf einer Fläche zu organisieren. Ein Raster sollte in gedruckten Medien, wie auch in digitalen Medien eingesetzt werden.

Tutorialreihe:
Raster entwickeln

Weiterführende Informationen
Buch: Rastersysteme für die visuelle Gestaltung von Josef Müller-Brockmann
Buch: Typographie von Otl Aicher
Typolexikon – Gestaltungsraster
Rasterbild erstellen für Prototyping in Photoshop oder Hintergrundbild für HTML Seitenentwicklung
Sammlung Rastersysteme
Raster erzeugen mit 960 Layoutgrid
Sammlung Seiten mit einem Raster erstellt
ERCO Digital Manual mit Seitenraster
Buch: Designing for Small Screens
Photoshop Plugin für einfache Rastererstellung
Dynamische Rastersysteme (Responsive Design bzw. reaktionsfähiges Layout):
http://lessframework.com/
http://framelessgrid.com/
http://goldengridsystem.com/

Schriften einsetzen

tomhirt — Mon, 04 Jan 2010 14:34:35 +0000

Neben Bildern werden in einem Gestaltungsraster auch Text eingesetzt. Die Organisation eines Textes innerhalb des Gestaltungsrasters spielt eine wichtige Rolle. Die Schrift wird ausgewählt nach kulturellen und gestalterischen Betrachtungsweisen. Bekannten Schriften sind die Helvectica, Rotis, Univers, Frutiger, Akzidenz Grotesk, Futura, Meta und die DIN Schrift.

Weiterführende Informationen
Schiftensammlung bei Linotype
Schriftensammlung bei Fontshop
Schriftensammlung von Paratype
Schriftensammlung von Fonts.com
Helvetica Film
100 besten Schriften
Online Community zum Thema Typografie
Typografische Fachbegriffe
Hauschriften von Unternehmen
Forum Typografie
Typolexikon und Definition Typographie
Schriften überprüfen
Schrift und Idenität
Slanted Weblog über Typografie
Webfonts mit Photoshop gestalten (Plugin)
Google Webfonts
Webfonts einsetzen Infos im Fontshop
Typekit
Fontface
Unicode der Welt-Zeichen-Code
Apple Typografie
Typografie Kategorie auf Wikipedia
Schriften vergleichen Nr.1
Schriften vergleichen Nr.2
Blindtext einsetzen
Umrechnung von Schriftgrösse in px zu em

Zeichen entwickeln

admin — Sun, 03 Jan 2010 12:22:33 +0000

Die visuelle Gestaltung beinhaltet auch die Gestaltung von Zeichen und Zeichensystemen. Die Semiotik ist die Wissenschaft, die sich mit Zeichensystemen aller Art befasst.

Weiterführende Informationen:
Decodeunicode Projekt
Zeichensystem: Pictorial Communication Language
Piktogramme von Otl Aicher
Martin Krampen: Die Welt der Zeichen
Isotype von Gerd Arntz
GUI Elemente Sammlung
Wireframe Toolbar Icons
Anton Stankoswki: Gebrauchsgrafik und Ausstellung Gelsenkirchen
Herbert Kapitzki
iPad GUI als Photoshop Datei
Piktogramme US Transport
Icons für Interfaces
Online Farben Werkzeuge:
colorhunter.com
http://kuler.adobe.com/
colorschemedesigner.com
dasplankton.de
colorotate.org
neteffect.dk
colorjack.com
aviary.com
Farben

detaillierte Screens entwerfen

tomhirt — Sat, 02 Jan 2010 21:23:31 +0000

Exemplarische Screens der Anwendung werden erstellt und zeigen eine grafische Ausarbeitung und ein Gesamtlayout. Sie geben einen visuellen Eindruck, wie Raster, Schrift und Zeichen zusammen ein einheitliches Corporate Design zeigt.

Weiterführende Informationen

detaillierte interaktive Prototypen erstellen

tomhirt — Sat, 02 Jan 2010 18:01:08 +0000

Interaktionen zu gestalten bedeutet, die Funktionen und das Verhalten eines Interfaces zu entwickeln, wenn ein Nutzer mit einer Anwendung oder einem Endgerät interagiert. Interaktive Demonstratoren und Filmabläufe simulieren die möglichen Nutzerszenarien.

Folgende Themen müssen beachtet werden:

1. Physiologische Ergonomie
Touchscreen-Geräte werden mit den Händen bzw. den Fingern bedient. Daraus ergeben sich verschiedene physiologische Anforderungen, wie z.B. bestimmte Mindestgrößen von Schaltflächen.

2. Erlernbarkeit
Die Erlernbarkeit beschreibt die Komplexität der Gesten, die zum Bedienen des Interface nötig sind.

3. Selbstbeschreibungsfähigkeit
Kann das Interface ohne Anleitung bedient werden, ist es selbstbeschreibend.

4. Funktionalität
Die Funktionalität bezeichnet alle Optionen die eine Applikation über den Normalgebrauch hinaus anbietet.

5. Motivation
Ist das Interface motivierend, wird der Nutzer seine Funktionen ausprobieren und die Interaktion mit den Inhalten als besonders interessant empfinden.

Weiterführende Informationen:
Screentoaster Screenrecording
Onlinetool Screencast-o-matic
iShowU Screenrecording Software, Mac
Keynote für iPad Prototyp
Adobe After Effects
Adobe Flash
Interaction Patterns, Wikipedia
Interaction Patterns
Buch: Designing Interactions von Bill Moggridge
Apple Multi-Touch Gesten

Dokumentation erstellen

tomhirt — Fri, 01 Jan 2010 13:49:00 +0000

Die Dokumentation und Präsentation spielt eine große Rolle innerhalb des Designprozesses. In einem Erscheinungsbild Handbuch (Corporate Design Manual) werden die Gestaltungsregeln dokumentiert. Zusätzlich werden die technischen Spezifikationen festgehalten. Kurze Filme stellen die Ergebnisse in komprimierter Form vor.

Weiterführende Informationen
Publikationsreihe Corporate Design
Corporate Identity Manuals
ERCO Digital Manual
Apple HCI Guidelines OSX, HTML
Apple HCI Guidelines als PDF