Pixeldrama » Raster

GridMaker für Photoshop

Benjamin — Tue, 06 May 2008 19:21:45 +0000

Ein kleines Skript hilft ein Raster blitzschnell und pixelgenau mit Photoshop zu erstellen. Die Höhe der einzelnen Rasterreihen wird nach dem goldenen Schnitt berechnet.

Für die Installation einfach den Ordner Adobe Photoshop CS2\Vorgaben\Skripten aufrufen und dort das Script ablegen. Dann in Photoshop unter Datei/Skripten aufrufen.

Website besuchen: GridMaker Reboot

Screendesign mit 960-Raster

Benjamin — Thu, 27 Mar 2008 11:32:44 +0000

Raster, oder im englischen Sprachgebrauch Grid genannt, sind nicht nur gerade im Aufwind bei den Screendesignern da draußen, sondern unterstützen tatsächlich die Entwicklung eines sauberen Layouts ganz ungemein.

Nathan Smith hat jetzt ein Raster für 960px angefertigt. Als Template für die üblichen Verdächtigen unter den Grafikprogrammen und als HTML-Template kann das Raster auf 960.gs. herunter geladen werden.

Website besuchen…

via

Designen mit Grid… diesmal mit Excel

Benjamin — Sat, 16 Jun 2007 16:09:39 +0000

Um geeignete Proportionen zu finden, benutze ich ganz gerne eine Vorlage, die ich mir in Photoshop oder Gimp als Ebene einbinde. Dabei komme ich nicht umhin, den Taschenrechner zu zücken, um Gesamtenbreiten zu berechnen. Vor allem ist die Geschichte meist recht unflexibel. Soeben ist mir ein wirklich abgefahrener Artikel auf Design Canopy über gelenkigere Grids untergekommen. Die Grundlage des Grids wird nicht mit einem konventionellen Grafikprogramm erstellt, es kommt eine Software für Tabellenkalkulation zum Einsatz – Excel. Bemerkenswert, wenn jemand bei seiner Arbeit plattformübergreifend denkt, von so einem Geist lebt die Szene, großartig.

Website besuchen…

Einiges über Rasterlayouts und ein 720px-Raster

Benjamin — Fri, 11 May 2007 12:04:43 +0000

Für Webdesigner ist es eigentlich Plicht sich mit dem Thema Rasterlayout zu beschäftigen. Zur Zeit gibt auch es eine kleine Welle in den einschlägigen Designblogs. So gibt es den endlosen Diskurs fluis/liquid Layouts vs fixed Layouts. Heute aber nur zu den fixen Layouts, welche auch schon vielen Fragen aufwerfen, die unbedingt der Klärung bedürfen. Dabei sollten keine Dogmen verbreitet werden, sondern immer die konkrete Aufgabenstellung und Zielgruppe den Leitfaden spinnen.

Was man mit Grids so alles anstellen kann, ist auf Subtraction nachzulesen. Dort hat man sich die Mühe eines hypothetischen Redesigns eines bekannten Suchportals gemacht, um zu erklären, wozu ein Grid ein gut ist. Am Ende des Artikels gibt es ne klasse Präsentation im PDF-Format. Pflichtlektüre!
Auch lesenswert ist Tanz auf dem Raster auf cold-heat.de, dort könnt ihr Christian Mücke beim Spielen mit einem Rasterlayout über die Schulter gucken.

Inspiriert durch den Artikel Gridding the 960 von Cameron Moll habe ich mich an eine Rastervorlage für 720px gemacht. Sie basiert auf dem Grid von Christian Watson.

Download
720px-grid-png.zip
grid-720px-ps.zip

Wieso jetzt 720px? Zum Beispiel sollte bei Projekten immer die Zielgruppe berücksichtigt werden, also welche Endgeräte kommen zum Einsatz und die daraus resultierende Breite für das Layout, um das ungeliebte horizontale Scrollen zu vermeiden. Viele Websites spekulieren schon auf eine Mindestauflösung von 1024×768 und entscheiden sich für eine Breite rund um die 900px-960px. Damit ist schon ein Puffer für Browserseitenleisten, Scrollbalken und nicht bildschirmfüllende Fensteransicht einberechnet. Ein Trend, der den Fortschritt bei der Hardware Tribut zollt, denn mit dem Einzug von Flachbildschirmen in Haushalte und Büros, kam auch eine höhere Auflösung. Doch gerade bei Firmenauftritten oder Informationsseiten setze ich noch auf 720px Breite, um auch für alte Geräte mit 800×600 oder kleine Fenster gewappnet zu sein. Daher die Entscheidung auch ein 720px-Raster vorrätig zu haben…

Onlineauftritt der Berliner Verkehrsbetriebe ist barrierefrei

Benjamin — Fri, 27 Apr 2007 13:22:18 +0000

Diese Meldung ist absolut nicht aktuell. Die BVG hat schon Ende 2005 einen saftigen Relaunch hingelegt. Mir ist das gar nicht aufgefallen, obwohl ich ein passionierter Anhänger der öffentlichen Verkehrsmittel bin und früher auch die Onlineauskunft der BVG genutzt habe. Die Gründe, warum mir der Relaunch entgangen ist, liegen auf der Hand.

Die Seite war oft nicht erreichbar
aktuelle Fahrplanänderungen aufgrund von Bauarbeiten nur unzureichend deklariert
Vom damaligen Look and Feel bekam ich regelmäßig Herzklopfen, Schweißausbrüche und fürchte noch heute das ich als Spätfolge Augenkrebs erleide

Das alles hat mich zur Alternative S-Bahn getrieben. Erst gestern bin ich nach langer Zeit wieder auf die Seite der BVG gestoßen und war verwundert. Ein ruhiges, fast angenehmes Klima wehte mir entgegen, ich wurde nicht sofort gelb verstrahlt, obwohl die Farbe sich durch das Layout zieht. Alles ist am richtigen Ort, das Auge rastert schnell die wichtigsten Funktionen der Seite. Standardmäßig warf ich ein Blick auf meine Firefoxextension HTML VALIDATOR, und der nickt die Seite also sauberprogrammiert ab. Ein Erlebnis das ich gerade bei großen Webauftritten selten genießen kann. Einzig der W3C Markup Validation Service meckert und spuckt einen Fehler aus. Ein tieferer Blick auf den Quelltext offenbart, dass Tabellen dort eingesetzt werden, wo es gilt tabellarischen Inhalt aufzubereiten, dass die CSS-Selektoren zumindest eine interpretierbare Bezeichnung besitzen, dass h(X) Tags sinnvoll eingesetzt werden.

Umgesetzt hat diesen runden Auftritt eine berliner Agentur namens exozet interact, und damit dem weitverbreiteten Vorurteil, große Agenturen würden nur halbfertige Produkte abliefern und dem aktuellen Stand der Technik nicht gerecht werden, ein schönes Gegenbeispiel gesetzt.

Das aber noch einiges im Argen liegt und so proffessionelle Arbeit eher selten abgeliefert wird, kann hier nachgehört werden. Der Relaunch der Süddeutschen Zeitung gibt kein gutes Bild ab, das konnten andere schon 2005 besser. Dabei sitzen die doch im gepriesenen Hightechstandort München?