praegnanz.de büro für intervernetzte medien

Gerrit, 08.04.2007

Einführung: Raster im Webdesign

Im Netz gibt es hunderte Tutorials darüber, wie man eine moderne Website zu bauen hat – manche sehr gelungen, mache eher nutzlos. Fast immer jedoch geht es um die Umsetzung eines vorgegeben Layouts. Doch Layouts fallen meistens nicht vom Himmel, und der Job eines Webdesigners besteht – zumindest laut meinem Verständnis – eben nicht nur aus HTML/CSS/JavaScript. Auch das Screendesign ist wichtig, ganz unabhängig von der Begeisterung für Technik und Semantik. Doch wo bleiben die guten Tutorials, wenn es um das Screendesign einer Website geht? Wer erklärt uns, wie man professionell entwirft, worauf man achten muss, und erläutert dies anhand von realistischen Beispielen?

Khoi Vinh tut das. Er ist Design-Director bei der New York Times und hat auf der SXSW-Konferenz zusammen mit Mark Boulton einen tollen Vortrag über Layout-Raster bzw. Raster-Layouts gehalten. Hierbei haben sich die beiden unfassbar viel Arbeit gemacht und einen grafischen Relauch der Yahoo-Startseite vorbereitet, der auf einem Grid (Raster) basiert. In der dazugehörigen Präsentation zeigen sie alle einzelnen Schritte und Überlegungen auf, die letztlich zum fertigen Screendesign geführt haben – hochinteressant und unendlich lehrreich!

Beispielfolie mit Raster-Tutorial

Die Präsentationsfolien zum Download gibt es in Khoi Vinhs Blog, und dies ist nun wirklich ein absoluter Pflichtdownload für alle, die sich Webdesigner nennen wollen. Herzlichen Dank an die Macher!

Wer noch mehr über Gestaltungsraster im Generellen erfahren möchte und durch die Folien ein bisschen angefixt wurde, sollte sich außerdem mal das Praxishandbuch Gestaltungsraster aus dem Hermann-Schmidt-Verlag ansehen. Hier geht’s zwar größtenteils um Printdesign, aber viele der Prinzipien und Herangehensweisen lassen sich auch auf webbasiertes Rasterdesign übertragen.

... und bald seid auch Ihr ein echter Rasterfarian!

(Autsch! Sorry, den konnte ich mir nicht verkneifen!)

15 Kommentare

  1. Stephan am 8. April 2007 #

    Danke für den tollen Link, man findet dort im Grunde genommen alles was man für die Rasteranwendung im Web benötigt. Als großer Fan von Rastern kann ich auch das Praxishandbuch Gestaltungsraster, welches sich in in meinem Besitz befindet, wärmstens weiterempfehlen. Neben dem sehr umfangreichen Inhalt und den vielen Anschauungsbeispielen werden einem die Informationen zudem durch einen lockeren Schreibstil der Autoren hervorragend nähergebracht. Note 1 dafür von mir.

  2. Nicolas am 8. April 2007 #

    Super Tipp, danke an dieser Stelle. Im Grunde ist es auch nur logisch so zu gestalten, wenn man bedenkt, dass die menschliche Wahrnehmung genauso funktioniert, indem das Auge die Umgebung abtastet bzw. rastert und zu einem Gesamtbild zusammensetzt. Ein nach dem Rasterverfahren gestaltetes Layout müsste also am ehesten den menschlichen Sehgewohnheiten entsprechen.

  3. MIke am 9. April 2007 #

    Die Werbung nervt aber, vor allendingen weil es noch animiertes Flash ist :(

  4. FreeJack am 9. April 2007 #

    Raster passen sehr gut für Print, da dort Dokument-
    und Schriftgrößen fest stehen.

    Im Web gilt das nicht. Auch nicht wenn Khoi mit
    »establishing constraints« anfängt.

    Schade dass er nicht mehr zu dynamischen Layouts
    sagt, die sich an Browser- und Schriftgrößen
    anpassen.

    Fazit: Tolle Sache, für’s Web nur eingeschränkt
    zu empfehlen … ;-)

  5. Simon Reinhardt am 9. April 2007 #

    Ja, das hat mich auch gestört. Das sieht man auch ganz schnell, wenn man auf seiner Seite mal die Schriftgröße hochschraubt, dann passt es da hinten und vorne nicht mehr.
    Gleichmäßige Proportionen und Aufteilen in gleichgroße Abschnitte scheint mir eine tolle Idee zu sein, aber man sollte sich dabei nicht an Elementen mit festen Pixelgrößen wie Werbebannern festmachen. Andererseits ist das natürlich ein Problem für Portalseiten wie Yahoo, die viel Infos auf eine Seite packen müssen und dann keine überlappenden/abgeschnittenen oder in der Luft hängenden Werbebanner gebrauchen können. Hier auf Prägnanz klappt das noch ganz gut; also an der Seite schwebendes oder kleine Bannerchen im Fließtext sind mit einem flexiblen Layout vereinbar (auch wenn sie da natürlich ein Unding sind, bei den ganzen Filmchen kann sich ja kein Mensch mehr auf’s Lesen konzentrieren).

  6. Gerrit am 9. April 2007 #

    Mit elastischen Techniken und anderen Tricks lassen sich auch Rasterlayouts zoombar umsetzen!

  7. Alex am 9. April 2007 #

    toller link, und gibt einen schönen denkanstoss zur weiteren layout gestaltung

  8. Martin am 9. April 2007 #

    Sehr schön ist auch das Buch »Raster für das Webdesign« von Veruschka Götz. Es steht in Bezug auf die Nutzung von Rastern im Webdesign recht Ähnliches drin, geht aber auch auf Raster im Printbereich ein. Lohnt sich in jedem Fall.

  9. Julian am 10. April 2007 #

    hab mir jetzt mal ein paar Sachen in Bezug auf Raster angeschaut und festgestellt, dass man das oft automatisch umsetzt.
    Ich denke mal dass wenn man das bewusst mit in die Planung einfließen lassen kann einen schon ein Stück voran bringt.

    Julian

  10. Ludwig M. Solzen am 10. April 2007 #

    Cfr »Vertical grids, accessible web apps« http://www.zeldman.com/2007/04/10/ala235-grids-accessible-web-apps/

  11. Milian Wolff am 11. April 2007 #

    Wirklich sehr interessant. Heute hab ich auch noch den dazu passenden Artikel auf A List Apart gelesen. Da konnt ich nicht anders und hab »TypoGridder« geschrieben, ein Javascript, dass automatisch ein Grid erstellt und es anzeigt. Ich hab eine kleine Projektseite erstellt, wo man auch das dazu passende Bookmarklet finden kann.

    Hoffe das kommt dem einen oder anderem von euch zugute.

    Mensch, liegt ja noch viel vor mir, was ich da an Text ans Grid anpassen muss :)

  12. Adrian C. am 12. April 2007 #

    ich muss sagen, dass dieses dokument sehr hilfreich und auch sehr interessant ist. ich muss zwar jetzt etwas umdenken beim designen, aber das dürfte das kleinere problem sein ;-)

  13. Simon Reinhardt am 13. April 2007 #

    Nochmal verspätet die Antwort: ich bezweifle nicht, dass man elastische und zoombare Rasterlayouts machen kann. Aber Khoi Vinh propagiert das nicht, er legt sich an Werbebannern mit Pixelgrößen fest. Ist halt die Frage, ob man die Werbebanner mittendrin haben will und sich somit also wohl oder übel an ihnen ausrichten muss, oder ob man sie so getrennt hält, dass man das restliche Layout flexibel gestalten kann.
    Ansonsten finde ich die Idee toll!

  14. Frederik am 24. Mai 2010 #

    super tutorial, vielen dank !

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.