Das 960px Gestaltungsraster
Die Verwendung stringenter Gestaltungsraster oder »Grids« erlebt momentan eine kleine Renaissance. Sehenswerte und funktionierende Beispiele sind z.B. AIGA oder Subtraction. Nun hat sich Nathan Smith mit dem 960 Grid System die Mühe gemacht, Templates zusammenzustellen, die Gestaltern bei der Arbeit helfen sollen. Er bietet einen File zum Download an, der sowohl Vorlagen für Photoshop, Fireworks, Visio und OmniGraffle als auch das zugehörige HTML- und CSS-Paket enthält.
The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.
Wie hilfreich die HTML- und CSS-Vorlagen für andere Gestalter sind, vermag ich nicht zu sagen, da ich so etwas lieber selbst schreibe. Auf jeden Fall sollte man die Bezeichner in Sachen Semantik für eigene Projekte überarbeiten.
Werbeunterbrechung
Kommentare und Feedback (24)
Folgende Seiten verweisen auf diesen Beitrag
- Struktur dank 960px Gestaltungsraster von bitmatixmedia (15.05.2008):
Da ich schon seit Längerem ein Freund von rasterbasierten Websites bin, habe ich mich umso mehr gefreut, als ich vor einigen Tagen auf den Beitrag von Manuela im pixelgraphix Weblog gestoßen bin. Sie schreibt dort über das von Nathan Smi...
Werbung
Vorheriger Artikel: Wo ist nur die Zeit hin?, nächster Artikel: Ein Exemplar von »Modernes Webdesign« zu gewinnen
25.03.2008, 16:07
Es wäre schön, wenn man immer mit 960 Pixel arbeiten könnte. Da aber oft auch Werbung bedacht werden muss, wird alles wieder viel schmaler. Leider.
25.03.2008, 16:48
@Daniel: Die Werbung kann doch auch ins Grid integriert werden. Oder spricht da was dagegen?
25.03.2008, 18:07
Habe mir das 960Grid eben mal angeschaut und bin davon recht angetan. Schein wirklich gut durchdacht zu sein.
Allerdings sehe auch ich die DIV-Klassen-Bezeichnungen als sehr kritisch an.
Eine Bezeichnung wie “<div class=“grid_1 prefix_2 suffix_9”>” ist im Code nicht wirklich gut zu einem bestimmten Bereich der Website zu zu ordnen.
Was mir sehr gut gefällt sind die Photoshop- und PDF-Vorlage. Sehr schön um mal eben einen schnellen Sketch anzufertigen, der auch ins Raster passt.
Viele Grüße aus Bonn, Oliver
25.03.2008, 20:08
Habe mir das Paket geladen und fange an Gefallen daran zu finden. Zu bemängeln habe ich allerdings auch die DIV-Klassen-Bezeichnungen. Danke für den Link.
25.03.2008, 23:41
Respekt, da steckt ne Menge Arbeit drin.
Den HTML Teil würde ich auch knicken, allerdings kann sich der ein oder andere Webdesigner mal ansehen, das pixelgenaue Webgestaltung sehr wohl möglich ist.
26.03.2008, 08:24
Daniel, Manuela: Ich denke, dass gehört auf jeden Fall dazu, Werbung im Grid zu plazieren/mit einzubauen.
26.03.2008, 09:27
Das “Framework” ist auf ein bestimmtes Raster fixiert. Prima. Da ist Bluprint weiter. Und YAML und YUI Grids sind noch wesentlich weiter. Es ist nicht nur schade, daß jemand seine Energie in die Veröffentlichung eines relativ unspannenden Projektes steckt, sondern daß er auch noch öffentlichkeitswirksam von allen Seiten gepusht wird. So ein Raster habe ich gerade auch zum zweiten Mal entwickelt. Es ist nicht schwer. Wenn man Floats begriffen hat, kann man sich relativ leicht selber ein solches System bauen, ohne daß man alle Eventualitäten abfangen muss.
Es ist fraglich, ob der Hang zu Grids wirklich sinnvoll ist. Jedenfalls zeigen die beiden großen Frameworks YUI Grids und YAML, daß man die Grid-idee auch mit einem vernünftigen, sozusagen multifunktionalen Framework abfackeln kann. Da sind solche beschränkten Schnellschüsse wie diese 960er nutzlos.
All diejenigen, die jetzt so begeistert aufschreien, sollten sich lieber mit der Idee hinter den Grids beschäftigen und dann entweder YUI Grids oder YAML lernen. Da haben sie mehr davon. Oder sie machen es wie ich selber. Kein Hexenwerk, nur ein paar Zeilen CSS, um die Floats in die richtige Richtung zu bekommen.
26.03.2008, 09:43
@Jens: Ich halte ja bisher wenig von Frameworks auch wenn YAML hier noch ein angenehme Ausnahme ist. Ich finde man kann durchaus auf den HTML/CSS Teil verzichten und sich an die psd halten. Ist wirklich hilfreich als Vorlage. Den Rest würde ich immer selber machen.
26.03.2008, 09:53
Mir gefällt die Richtung, in die das Blueprint CSS Framework geht, besser. Habe wirklich schon sehr gute Erfahrungen damit gemacht. Trotzdem werde ich mir das 960 Grid System mal genauer anschauen. Mit YAML hingegen hab ich nie was anfangen können, weil es einfach völlig überladen ist.
26.03.2008, 11:37
Eine nette Zahl. Dier Vorlagen sind sicher für überladene Zeitungsportale gut zu gebrauchen. Ich möchte mich allerdings als Gestalte nicht in einem 40er/60er Raster bewegen müssen, das ist mir zu klobig.
YAML oder andere CSS-Frameworks finde ich interessant aber meistens extrem überladen und viel zu komplex. Abgesehen davon möchte ich unabhängig bleiben. :-D
26.03.2008, 12:28
Huhu,
ich hab, nach reichlichem überlegen festgestellt das 972px ideal sind weil:
Es lässt sich durch 18px und durch 12px teilen.
Also man schafft 12 Spalten, oder 2, 4, 6
Wenn man bei einer Standardschriftgröße von 1em = 16px ausgeht
und in der Regel davon 0.75em verwendet lande ich bei 12px bei einer idealen Zeilenhöhe von 150% im Web lande ich wieder bei den oben angeheiligten 18px.
Kann mir jemand folgen oder ist das zu abstrakt?
Ich kann dann Stege von 9px verwenden und hab ein feines Raster.
Würde das gern mal zur Diskussion stellen.
26.03.2008, 14:30
@Pascal: Toll. Marc Boulton und andere sind auf diese Idee schon vor längerer Zeit gekommen. Such mal in einer Suchmaschine Deiner Wahl nach “Grids” oder “Grid-Layout”.
26.03.2008, 16:29
Ich kann mir nicht helfen, aber diese Grid-Systeme erinnern mich immer an Adobe GoLive und begeistern durch absolute DIV-Wüsten. Die moderne Art des Tabellenlayouts/-designs, vgl. auch den Reboot diverser deutscher Zeitungs- und Nachrichtenportale.
Selbst wenn es in Sachen Zugänglichkeit und Validität keine Probleme bereiten sollte, produziert das Ganze zumindest mächtigen Overhead, der vermeidbar ist und sich mit Listen & Co. wesentlich eleganter lösen läßt.
Besser als Tabellen ja, aber ne Webseite wird mit HTML beschrieben nicht mit InDesign gesetzt.
Immerhin, das Logo auf der 960er Seite ist klasse!
26.03.2008, 17:29
@pascal: gut durchdacht, ist da der “goldene schnitt” auch miteingeplant?
26.03.2008, 18:32
Manueller Trackback ;)
Gestaltung von Formularen anhand eines Grundrasters
http://labuschin.com/journal/design/gestaltung-von-formularen-anhand-eines-grundrasters
27.03.2008, 18:34
Vielleicht könnt ihr einen interessierten Laien aufklären. Bedeutet Grid dass sich die Größe der DIVs nie ändert? Muss man einem CMS immer sagen das nur eine genau Anzahl an Zeichen hinein passt?
28.03.2008, 11:07
Ich finde die Idee sehr gut, weil Templates einem die Arbeit stark vereinfachen. Man muß sich nicht immer ein Grundgerüst programmieren sondern kann sich ein schon fertiges Grundprogramm an seine Wünsche anpassen.
Tanja
28.03.2008, 23:16
In den Kommentaren prallen zwei Welten aufeinander – die eine Seite nutzt solche Grid-Vorlagen und die andere Seite schreibt alles selbst ;)
Welche der beiden Seiten ist die bessere? Keine, da es eine individuelle Entscheidung ist. Als Gedankenstütze finde ich es aber hilfreich und so betrachte ich vieles ;)
Ralph
29.03.2008, 16:41
Ich habe sowohl Erfahrungen mit Blueprint und YUI Grids gesammelt und muss zusammenfassend sagen, dass die gefühlte Zeit in Verstehen, Nachbearbeitung und Korrekturen/Anpassungen grösser ist als die gesparte Zeit, die man benötigen würde, ähnliche Ergebnisse selbst zu coden.
Einen wesentlichen Vorteil sehe ich jedoch in der Verwendung als Prototype und als schnelle Mock-Up Hilfe. Auch 960 scheint primär in diese Richtung zu gehen.
Ich weiß auch nicht mehr, wo ich es gelesen habe, aber einige Leute vom Fach raten definitiv davon ab mit solchen Frameworks live zu gehen…
31.03.2008, 13:44
Selber schreiben, immer wieder selber schreiben, bringt die meiste Erfahrung und damit relative Unabhängigkeit von Drittlösungen. ;-)
01.04.2008, 10:15
naja die vorgefertigten grids sind schon ne sache, bin auch ziemlich verwundert, dass das ganze jetzt wieder so stark im kommen sind.
muss mich wohl auch mal wieder stärker damit befassen.
02.04.2008, 22:31
Grid-Design war ist die ganze Zeit aktuell, aber das Problem ist ganz einfach: Das Netz entwickelt sich rasant vorwärts und diese Entwicklungen ziehen dann wieder von anderen Themengebieten die Aufmerksamkeit weg….
02.04.2008, 22:34
@Andrej: Darf ich Dich fragen, wie Deine Kenntnisse vor der Verwendung von Blueprint usw. war? Was war so schwierig bei der Verwendung von diesen Grids?
Ich selbst habe keine Erfahrung damit. Aus diesem Grund würde ich gern mehr über Deine Erfahrung wissen wollen ;)
Ralph
22.04.2008, 14:07
Ich denke mal für jemanden für mich, der beinahe noch keinerlei Erfahrungen mit DIV hat, ist sowas zum Einstieg geeignet. Um das Verständnis zu übermitteln.. wüsste sonst keine “Lehrmittel”.