BEIER-CHRISTIAN.eu » design

Design made in Germany

Christian Beier — Fri, 26 Jun 2009 14:13:11 +0000

Mit »Design made in Germany« ist ein neues Designmagazin auf dem deutschen Markt erschienen – vielleicht auch eins, das ich länger als drei Ausgaben lese. Denn bisher fand ich noch kein Magazin interessant genug oder konnte mich sogar damit anfreunden. Mit »Design made in Germany« könnte sich das jedoch bald ändern, denn es erscheint zumindest in meinem bevorzugtem Medium – dem Internet. Angeboten wird eine PDF-Version die ansprechend gelayoutet ist und eine HTML-Version, welche ein optimiertes Layout aufweist. Als Goodie wird jeder Artikel auch als einzelne PDF-Datei angeboten.

Über das Themenspektrum lässt sich meist bei der ersten Ausgabe nicht viel sagen. In der ersten Ausgabe sind sie jedoch recht interessant. Wie sich das weiterentwickelt wird sich zeigen. Das Querlesen in der S-Bahn hat jedoch heute schon viel Spaß gemacht. Im Gegensatz zur PAGE, finde ich die Themen jedoch handfester und nicht so künstlerisch abgehoben.

Video über die Entstehung einer Corporate Identity

Christian Beier — Thu, 23 Apr 2009 15:50:25 +0000

Wie die Corporate Identity einer Grafikdesignagentur entsteht, zeigt das von der Agentur LLR Hamburg produzierte Video. Sehr nett gemacht und es wird deutlich, wie die einzelnen Bestandteile ineinandergreifen und so eine unverwechselbare Marke gebildet wird.

11 hilfreiche Ressourcen für UI-Patterns

Christian Beier — Mon, 01 Dec 2008 20:06:13 +0000

Bei Programmierer sind »Design Patterns« schon recht bekannt und sie helfen allgemeine Probleme elegant zu lösen. Denn bei der Arbeit sind Systemarchitekten und Programmierer immer wieder mit alltäglichen Problemen konfrontiert. Auch im Webdesign werden Patterns immer häufiger eingesetzt. Die Lösungen sind meist allgemeingültig und dem Endanwender bereits bekannt. So dass er diese Pattern »wieder erkennt« und somit schneller mit der Website interagieren kann bzw. sich auf dieser besser zurechtfindet. Letztendlich helfen UI-Patterns dem Designer, eine Website zu kreieren die eine wesentlich bessere Nutzbarkeit für den Anwender schafft.

In dieser Liste habe ich elf interessante Ressourcen zu diesem Thema zusammengestellt, die dabei helfen sich in das Thema einzuarbeiten oder Patterns zusammengestellt haben.

An Introduction to Using Patterns in Web Design

Gute Einführung von Ryan Singer auf 37signals, wie Patterns im Webdesign genutzt werden können. Gezeigt wird hier die Entwicklung eines Screens nach dem Prinzip des »Epicenter Design«.

Yahoo! Design Pattern Library

Die Design Pattern Library im Developer Network von Yahoo! ist die wohl bekannteste Sammlung dieser Art. Hier finden sich viele gute Lösungen und Abhandlungen, wie zum Beispiel Drag and Drop, Ratings and Reviews und für Page Grids.

Designing Interfaces

Auf der Website des gleichnamigen Buches befindet sich eine schöne Sammlung von grundlegenden Mustern und »Best Practices« im Interface Design. Wesentlich umfangreicher ist natürlich das Buch, welches ich sehr empfehlen kann.

Collection Design Patterns

Eine umfangreiche Sammlung von Lösungen im Webdesign von Chris Messina. Gezeigt werden Lösungen zu diversen Designproblemen wie 404-Fehlermeldungen, Warnungen und Nachrichten, Login-Formulare, Tagclouds, …

Interaction Design Pattern Library

Eine sehr umfangreiche Sammlung an Mustern, die speziell die Fallstricke des Webdesigns behandeln. Geordnet sind sie nach dem Anwendungsgebiet und Kontext. Alle Pattern werden umfangreich beschrieben und mit vielen Beispielen illustriert.

The UI Pattern Factory

UI Pattern Factory beschreibt sich selbst als einen Mix aus Mustern für das Interfacedesign und einer UI-Gallerie. Es ist ein Platz für »Best Practices«-Lösungen, Inspirationen und zur Diskussion.

Konigi

Konigi ist zwar keine Seite für Design Patterns im speziellen, hier werden eher Interfaces im Gesamten besprochen. Eine sehr schöne Inspirationsquelle für alle Interfacedesigner.

Pattern Tap

Keine theoretischen Abhandlungen, sondern eine Fülle an Beispielen von gelungenen Interfaces. Es gibt Sammlungen für Rahmen, Hintergründe, Breadcrump-Navigationen, Kalender und andere Anwendungsgebiete im Webdesign.

UI-Patterns.com

Eine weitere Bibliotheken von Lösungsmöglichkeiten für verschiedene Anwendungsfälle.

Designing Social Interfaces

Über »Designing Social Interfaces« hatte ich schon vor ein paar Tagen im Sideblog geschrieben. In diesem Wiki werden Gestaltungsmuster speziell für Soziale Interfaces, für das zukünftige Buch der beiden Autoren gesammelt.

Ajax Patterns

Ajax Patterns ist jetzt keine direkte Ressource für Interfaces, sondern beschäftigt sich mit dem Verhalten von AJAX-Anwendungen dem Nutzer gegenüber. Die Website ist ein Wiki, so dass jeder neue Verhaltensmuster beisteuern kann.

Entwurfsmuster für soziale Interfaces

Christian Beier — Wed, 26 Nov 2008 20:17:31 +0000

»Designing Social Interfaces« ist ein Wiki zum zukünftigen Buch von Christian Crumlish und Erin Malone indem sie Pattern für die Entwicklung von sozialen Interfaces zusammentragen. Design Patterns können die Entwicklung von Software insbesondere bei allgemeinen Problemen stark vereinfachen und elegante Lösungsansätze aufzeigen. Sie helfen zudem, Fehler im Interface Design zu vermeiden, die andere schon gemacht und bereits Lösungen gefunden haben.

Ist Grafikdesign Kunst?

Christian Beier — Tue, 11 Nov 2008 19:04:41 +0000

… Diese Frage und die dazugehörige Website geisterte heute schon den ganzen Tag durch Twitter. Diese einfache aber doch für manchen Grafikdesigner entscheidende Frage, kann von jedem unter »Is graphic design art?« beantwortet werden. Kurt Weidemann sagte zu diesem Thema übrigens:

»Der Künstler macht was er will, der Designer will was er macht.«

index Logo – Inspiration für die Logo-Entwicklung

Christian Beier — Fri, 31 Oct 2008 14:28:43 +0000

Aktuell beschäftige ich mich gerade intensiv mit dem Thema Corporate Design / Geschäftsausstattung / Signet-Design. In der Berufsschule habe ich zu diesem Thema letztens das Buch »index Logo« entdeckt. Dieses beschäftigt sich mit der Signet-Entwicklung aus mehreren Richtungen: Es ist ein Bilderbuch mit vielen Logo-Inspirationen, es vermittelt theoretische Grundlagen und gibt praktische Tipps was bei der Entwicklung zu beachten ist und wie Ideen gefunden werden können. Abgerundet werden die Kapitel mit kurzen Statements von namhaften Designern.

Das Buch ist recht klein und durch die vielen Bilder auch sehr schnell durchzulesen. Für den Umfang des Buches finde ich den Preis von 27,95 Euro jedoch ziemlich stolz. Selbst die Verkäufern in der Buchhandlung schaute recht verwundert auf das Taschenbuch und den Preis.

Ich kenne allerdings kein Buch, welches so viel Wissen in dieser kompakten Form vermittelt. Aber hätte ich in der Schule nicht bereits in das Buch hineinlesen können und mich davon überzeugen lassen können, hätte ich es mir sicherlich für diesen Preis nicht geleistet.

index Logo – Inspiration für die Logo-Entwicklung
Claudia Herling, erschienen im mitp Verlag
ISBN: 978-3-8266-5947-8

Kostenlose Broschüre zu Korrekturzeichen

Christian Beier — Mon, 14 Jul 2008 08:15:25 +0000

»Korrekturzeichen nach DIN 16 551« heißt eine neue Broschüre von Cleverprinting. Auf den acht Seiten wird gezeigt, welche Korrekturzeichen es gibt und wie sie korrekt angewendet werden. Zum Ausdrucken und Hinlegen für alle Gestalter sehr empfehlenswert.

Yahoo! Design Stencil Kit

Christian Beier — Mon, 09 Jun 2008 19:11:25 +0000

Yahoo! Design Stencil Kit soll die Arbeit für Webdesigner vor allem im Grafikprozess unterstützen. Angeboten werden im Kit diverse Vorlagen für Kalender, Buttons, Bedienelemente und OS Oberflächen unter anderem in den Formaten XML (Microsoft Visio), PNG, SVG und PDF.

Skizzen-Vorlagen vom iPhone und Nokia N95

Christian Beier — Fri, 06 Jun 2008 08:58:05 +0000

»Sketch paper for the mobile designer« bietet das Weblog labs.boulevart an. Wer Interfaces für mobile Endgeräte wie das iPhone oder das Nokia N95 lieber auf Papier plant findet hier verschiedene Vorlagen. Bei diesen wird jeweils das Gerät im korrekten Maßstab abgebildet und der Bereiche für das Interface ist komplett leer. Angeboten werden die Vorlagen im PDF- und Photoshop-Format.

Photoshop & Co bei Web-Layouts überspringen?

Christian Beier — Thu, 05 Jun 2008 10:02:48 +0000

In ihrem Weblog »Signal vs. Noise« haben 37signals einige Gründe aufgeführt, warum Sie Web-Layouts nicht erst in einem Grafikprogramm wie Photoshop entwerfen, sondern vom Skizzenbuch direkt in den HTML/CSS-Editor wechseln. Eine der Hauptgründe mit der diese Vorgehensweise begründet wird ist, dass die Photoshop-Layouts – wie auch die Entwürfe auf Papier – nicht klickbar und sich damit keine Interaktion vermitteln lässt. Zudem lassen sich Entwürfe auf Papier schneller anfertigen: »Sie sind schnell, billig und schmutzig«.

Ein weiterer Grund ist die Typografie im Internet: Photoshop und Co. konnten die Texte noch nie so darstellen, wie sie später auch im Browser erscheint. Dazu spielen im Webdesign einfach zu viele Faktoren eine Rolle, dass Photoshop-Entwürfe 1:1 in das Internet übertragen werden können. Zudem verleitet das designen in Photoshop sehr dazu, sich in unzähligen Details zu verlieren (ich spreche hier aus Erfahrung).

Gleichzeitig mehren sich aber auch die kritischen Stimmen dieser Praxis. 37signals hätten es schließlich sehr einfach, weil sie für keine Kunden arbeiten müssen. Für normale Webdesigner die mit Kunden zusammenarbeiten, wäre eine solche Vorgehensweise kaum vor dem Kunden zu vertreten. Einige Interessante Stimmen dazu bei Gerrit und Manuela.

Der Kunde möchte schließlich sehr genau sehen können was er später geliefert bekommt. Allerdings gibt es hierbei auch wieder einen Nachteil: Kunden denken – wenn Sie einen ausgearbeiteten Screen-Entwurf sehen – es sei schon ihre Seite. Da wie oben angesprochen sich eine Seite nicht immer zu 100% genau im Browser umsetzen lässt, meckern Kunden häufig später herum, wenn Elemente nicht genauso aussehen und platziert sind wie auf dem Screen-Entwurf gezeigt.

Ich selber versuche in letzter Zeit immer häufiger die Entwürfe in Photoshop wegzulassen. Meistens reduziere ich sie auf Wireframe, die zur groben Visualisierung der Größenverhältnisse dienen (siehe dazu einen Beitrag bei den Webkrauts). Anschließend erstelle ich HTML/CSS/JavaScript-Prototypen die schon die komplette Funktionalität enthalten. Diese Prototypen lassen sich dann später sehr schnell und einfach in das jeweils verwendete Content Management System einbinden.

Sofern ausreichende Kenntnisse in HTML/CSS vorhanden sind, lassen sich Prototypen im Browser meist schneller erstellen, als der Entwurf in Photoshop oder Fireworks. Und hier hat man schon eine Version mit der direkt gearbeitet werden kann und die nicht erst in das eigentliche Medium portiert werden muss.

Bei sehr Grafik-lastigen Websites können Photoshop-Screens aber auch ihre Vorteile haben, da hier bereits bei dem Entwurf die benötigten Grafiken erstellt werden und für die HTML-Umsetzung nur noch »herausgeschnitten« werden müssen.

Wie man in den Diskussionen schnell erkennen kann, gibt es bei diesem Thema keinen richtigen Weg. Bei jedem Projekt und Kunden sollte abgewogen werden, welcher Weg am produktivsten, nutzbringendsten und schnellsten ist. Worauf sich ein Webdesigner allerdings nicht mehr einlassen sollte ist, etliche unterschiedliche Screens in Photoshop zu bauen. Mit maximal drei Screens (Startseite und zwei Unterseiten) sollte sich das Meiste und Wichtigste visualisieren lassen. Ansonsten läuft grundlegend etwas falsch.