Benutzt Raster beim Designen!

  • von Lennart Prange

raster Raster sind im Print Bereich schon lange Standard. Fast jede Zeitschrift hat ein Raster. Raster sind auch in der Stadtplanung normal. Es wird Zeit, dass Webdesigner sich daran gewöhnen, ebenfalls mit Rastern zu arbeiten. Sie haben viele Vorteile und diese will ich euch im heutigen Beitrag näher bringen. Ich verdeutliche das Ganze an einem Beispiel.

Kommentare und Social Bookmarks würden mich wirklich freuen. Viel Spaß mit dem Beitrag. Hoffentlich zeigt er einigen von euch etwas Neues ;).

Warum sollte man Raster verwenden

  • Einheit – Die Website sollte auf jeder Unterseite wieder zu erkennen sein. Durch ein Raster wird das extrem vereinfacht.
  • Organisation – Ein Raster ist vor allem dazu da, den Content und die Boxen zu organisieren.
  • Genau – Wenn man das Raster genau befolgt, ist es möglich viel genauer zu arbeiten. Abstände werden automatisch immer gleich, Boxen bekommen immer die gleiche Breite.
  • Übersicht – Dem Nutzer hilft ein Raster ebenfalls. Da alles organisierter ist, kann er einfacher die Übersicht behalten.
  • Es macht alles einfacher und schneller!
Raster in Aktion

Ich werde jetzt ein contentlastiges Design erstellen. Als Grundlage benutze ich ein Raster.

Schritt 1 – Raster erstellen

Als erstes muss man das Raster festlegen. Man sollte darauf achten, genug Spalten anzulegen. Sonst bekommt man später nur Probleme.

1

Schritt 2 – Der Header

2

Schritt 3 – Die Navigation

3

Schritt 4 – Die Sidebars

4

Schritt 5 – Der Content

5

Schritt 6 – Fertig

Natürlich sieht das Endergebnis nicht berauschend aus, aber es ist doch recht gut strukturiert. Ich hoffe, dass ich euch mit diesem Beitrag die Anwendung von Rastern etwas näher gebracht habe. Kommentare würden mich freuen. Viel Spaß damit!

6

Achtung!

Denkt daran, nicht nur im Raster zu denken. Sonst wird die Seite schnell langweilig.

18 Kommentare

  1. OrangeBlue
    18. November 2008 um 23:35 Uhr

    Netter Artikel, jedoch werde ich die “Raster-Technik” nicht anwenden…

  2. chrishartmann
    19. November 2008 um 09:55 Uhr

    Grids are Good – im Grunde ist das Thema ja schon seit längerem extrem hip und natürlich sinnvoll. Als Standardwerk zu diesem Thema sollte man die Präsentation von Khoi dringend durchlesen – diese geht ein wenig detaillierter auf das Thema ein:
    http://www.subtraction.com/pics/0703/grids_are_good.pdf

    Folgende Links sind zudem lehrreich:

    Blueprint CSS Framework
    http://www.blueprintcss.org/

    Grid-Designer fürs konzeptionelle Herantasten:
    http://grid.mindplay.dk/

  3. Daishi
    19. November 2008 um 12:20 Uhr

    Als Stammleser (hihi) habe ich natürlich auch diesen Beitrag mir genehmigt :D.
    Demnächst plane ich eine neuen KMU Seite und ich werde diese Prinzip wohl anwenden, danke für die Erinnerung :D.

  4. Lennart Prange
    19. November 2008 um 15:04 Uhr

    Danke für eure Kommentare 🙂

    @OrangeBlue: Wieso? Was spricht dagegen?
    @Chris: Super Kommentar. Subtraction kennt man natürlich. Die Präsnetation ist sehr gut.
    @Daishi: 😀 Kein Problem

  5. 960.gs
    19. November 2008 um 19:47 Uhr

    Auch gut ist das CSS-Gridsystem von 960.gs. Das ist eine fertige Sammlung an CSS-Klassen, die man dann nur noch einfach anwenden muss.

    http://960.gs/

  6. Felix Nagel
    20. November 2008 um 15:45 Uhr

    Ich muss regelmäßig Raster umsetzen. Und mag sie nicht. Ein gewisses Raster einzuhalten ist natürlich immer sinnvoll — fällt meiner Meinung aber unter “Gestaltung”.

    Web ist kein Print. Den Satz sollten sich viele “Webdesigner” mal an den Desktop pinnen.

  7. Lennart Prange
    20. November 2008 um 16:57 Uhr

    Hi Felix,

    natürlich sind Web -und Printdesign 2 völlig verschiedene Sachen, aber das heißt nicht, dass man Wissen aus dem Printbereich, nicht auf den Webbereich übertragen kann.

    Raster sind natürlich kein Muss, aber bei sehr Contentlastigen Seiten mehr als sinnvoll. Außerdem macht es einem das Leben viel leichter.

    Hier kannst du mal schauen, wie wichtig und entscheidend Raster sind: http://www.webdesignerwall.com/trends/grid-and-column-designs/

  8. Markus
    20. November 2008 um 16:58 Uhr

    Ich habe stets Bedenken gegenüber Grid-Frameworks, da man sich damit doch ziemlich dem bereits bekannten Tabellen-Layout-Prinzip annähert. Das meine ich im Sinne von div-Suppen, die für das Grid notwendig sind, jedoch für den semantischen Gehalt der Seite völlig unnötig sind.

    Natürlich machen solche Frameworks & starren Konzepte die Webseitenerstellung erheblich leichter. Doch was damit gemacht wird ist: Prinzipien des Printdesign werden auf das Webdesign übertragen – was in meinen Augen ein großer Fehler ist. Webseiten sind nun mal keine festgezurrten “Blätter”, auf denen man malen kann. Die “Best-Viewed with…”-Zeiten sind mittlerweile vorbei, weshalb jede Seite nach Möglichkeit so gecodet sein sollte, dass sie unabhängig vom Ausgabegerät ansprechend, aber zumindest zugänglich ausgegeben wird.

    Gestalte ich eine Seite jedoch anhand eines Grids, so setze ich irgendwo immer implizit Dinge wie Seitenbreite etc. voraus, die ich so nicht einschätzen kann.

    Vielleicht eine etwas krasse Meinung, die man aber natürlich gerne diskutieren kann 🙂

  9. xwolf
    21. November 2008 um 10:11 Uhr

    Alles schön und gut. Aber bei dem Beispiel baust du eine doch sehr statische Seite, die nur für die Browserdarstellung mit einer gewissen Mindestbreite gut ist.

    Moderne Webseiten sollten aber auch so aufgebaut sein, daß man dieselbe Seite mit selber URL auch in anderen Ausgabemedien anzeigen kann. Wo bleibt das flexible Layout, wie reagiert deine Seite auf eine kleinere Sichtbreite?
    Wie reagiert es gar auf den Besuch eines Handhelds?
    Und da allein die T-Com dieses Jahr 450.000 IPhones verkauft hat, geht es bei der Anzeige von Webseite in Handhelds nicht mehr um ein Nischenmarkt von Freaks.

    xwolfs letzter Beitrag..Datenschutz ist Bürgerrecht – Daten zurückholen

  10. sascha
    23. November 2008 um 03:03 Uhr

    Ohne Raster, keine guten Ergebnisse. Eine Seite ohne Raste,
    hat im pro. Berreich nichts zu suchen, außer es nennt sich Kunst und ist Abstrakt. Netter Artikel!

  11. misterx
    23. November 2008 um 03:18 Uhr

    @xwolf:
    Mhh nicht ganz! Das Iphone nutzt die Webkit engine, also die des Safari. Die Seite wäre nicht mehr leserlich wenn sich alles dem Display eines Mobilen Gerätes anpasst. Ausser es ist für Zwerge. Dafür nutzt man die Funktion des Zoom’s. Und by the way. Als alternative wäre hier die Gerasterte Tabelle zu nennen. Damit erreichst du dann eher dein Ziel. Somit trifft dieser Artikel 100% auch auf die kommende mobile Generation zu. Und die Tabellen auf die eher alte generation.

    @Markus:
    Keine Angst vor Grids! Das Grid hilft meist nur bei einer Einteilung der Seite, und hat primär nichts mit dem späteren look & feel zu tun. Jedes gemalte Bild benutzt ein Raster, welches elementar für Seitenverhältnisse sorgt

    @Felix Nagel:
    Das Web und der Print sind fast Identisch. Da gibt es max. Systemabhängige technische Grenzen, mehr nicht.

    p.s. 960 ist extremst genial !

  12. Elusian
    17. Januar 2009 um 16:11 Uhr

    Raster werden im Webbereich schon immer genutzt, bewusst oder unbewusst. Erfolgreiche Seiten haben ein Raster welches man nicht unbedingt auf Anhieb sichtet. Gerade Aussagen wie die vom OrangeBlue zeigen, dass hier der Designbegriff als solcher noch nicht verstanden wurde. Okay, nun muss man auch davon ausgehen das hier nur wenige mit einem Abschluss im Design-Studium aufwarten kann.

  13. Nico
    17. Januar 2009 um 20:09 Uhr

    Sehr Interessante Methode und toller Artikel, aber ich denke ich bleibe da Lieber bei meiner Methode “Einfach drauf los” 🙂

    Nicos letzter Beitrag..Fragen über Fragen ?!?

  14. Patrick
    14. Oktober 2011 um 08:09 Uhr

    Ich finde Raster ne feine Sache. Ich finde jede Seite sollte Raster haben, da Sie die Seite extrem übersichtlich machen.

Trackbacks/Pingbacks