Zeit für ein neues Layout

Z

Seit dem ich vor einiger Zeit bei einem Update auf eine aktuelle Version von WordPress mein altes Design in weiten Teilen unbrauchbar gemacht habe (ärgerlich, übrigens), habe ich mich mit einem Template von der Stange über Wasser gehalten. Mehr schlecht als recht, wie ich für mich festgestellt habe: Richtig Spass gemacht hat mir Bloggen in einem „fremdem“ Design nicht.

Aber auch vor diesem Faux Pass hatte ich mich gedanklich bereits von dem alten Layout verabschiedet und war auf der Suche nach etwas neuem.

Dabei war mir eigentlich vom ersten Moment an klar, dass das neue Design auf Grids basieren soll. Also einem flexiblen Raster, das unterschiedliche Kombinationen von Content-Containern aufnehmen kann, insgesamt aber dennoch in einem festen Rahmen steckt.

Das Raster für das neue agenturblog Design sieht dementsprechend so aus:

agenturblog Grids

Mein Grid nutzt also insgesamt neun Layout Spalten, die man zu zahlreiche Kombinationen zusammenfassen (oder auch solitär verwenden) kann: Die einspaltige Teaserbox (besteht aus 8 Layout Spalten), die Spalte für das Datum (eine Layout Spalte), normale Blog Beiträge (5 Layout Spalten), Flickr Bilder (nutzt alle 8 Spalten) etc.

An manchen Stellen, wie beispielsweise im unteren Bereich der Homepage, oberhalb des Teasers, breche ich diese Raster dann ausnahmsweise nochmal auf, um einen dreispaltigen Bereich innerhalb von 8 Layout Spalten zu schaffen. Der Footer passt dann wieder exakt in das Raster und hebt diesen kleinen Ausbruch hoffentlich wieder auf.

Einen kleinen Trick hat mir vor einiger Zeit Khoi Vinh bei einem Workshop in London verraten: Wenngleich das Raster als solches auch gar nicht immer zu deutlich und optisch präsent sein muss, so hilft es der optischen Führung des Auges ganz ungemein, wenn man an zentraler Stelle (bei mir oberhalb des Headers) die Grundstruktur des Rasters aufzeigt. Das Auge ist so in der Lage, sehr leicht den gesamten Kontext mit dieser Struktur in Verbindung zu bringen – ganz ohne weitere Hilfslinien.

Fairerweise muss man sagen, dass noch nicht alles so ganz 100% funktioniert. Beispielsweise wollte ich neben den klassischen Beitragsseiten auch noch mit einer zweispaltigen Version aufwarten – die habe ich aber derzeit noch nicht angefasst. Es gibt sicher noch eine ganze Reihe Bugs, vieles passt noch nicht wirklich, aber immerhin ist das heute wieder ein Start in eine eigenes Layout – und wie Mark, der mir in den letzten Tagen freundlicherweise bei der HTML/CSS Umsetzung geholfen hat sagte: Guter Pfusch ist noch lange keine schlechte Arbeit…

In diesem Sinne, viel Spass mit dem neuen, gridbasierten Agenturblog Layout – alles wird gut!

33 Kommentare

  • Super Design! Vorallem der Header und die Blogstruktur gefällt mir am besten, ist mal was neues.

  • Nicht schlecht! Gute Arbeit.

    Mich persönlich haben allerdings die „optische Führung“ über dem Header, da es meines Erachtens das Erscheinungsbild stört. Ich meine, welcher Leser will wirklich wissen, aus wievielen Grids dein Blog besteht?

    Weiter würde ich vorschlagen, dass Grau, welches du bei der Navigationsschrift und beim Copyright benutzt einen Tick dunkler zu gestalten. Vor allem auf dem weißen Hintergrund ist es nicht ganz so gut lesbar.

    Dies soll keine Kritik sein, sondern einfach ein paar Anmerkungen.

  • Das neue Design ist schön gekommen, viel whitespace – ich mag das.
    Auf 2 Sachen möchte ich hier aber noch hinweisen:
    1. Linkfarbe im Content: Ist tatsächlich gleich wie der Text, wahrscheinlich ein Fehler? Hier würde ich auf eine Farbe aus dem Header-Bild zurückgreifen. Das würde die Texte in den Artikeln auch auflockern, wenn viel Text vorhanden ist.
    2. In der Einzel-Artikel-Ansicht verwendest du ein anderes Header Bild als auf der Startseite. Eigentlich könntest du dasselbe verwenden wie auf Home, nur halt die Höhe des divs begrenzen und den gewünschten Teil anzeigen lassen. Ich hoffe du weisst, wie ich meine.

    Auf jeden Fall viel Spass mit dem neuen Layout!

  • Danke Euch für das Feedback. Insbesondere die Farben der Links müssen n natürlich noch geändert werden (erkennt sonst keiner) und mit dem Bild hast Du auch recht Aaron, das sollte man zukünftig so lösen!

  • Also das einzige was noch fehlt, bei einer schmalen Auflösung klebt der Text an den Seiten dran, das stört ein wenig.

  • Nur weil man in Photoshop ein paar Ebenen einfärbt und diese dann als Grid bezeichnet, wird ein Layout nicht automatisch besser. Sieht schon trendy aus, so ein Bild mit Drid, gell? Aber schau in die Seitenleiste mit der Blogrolle. Da hältst du dich nicht dran. Die gestrichelte Linie oben wirkt sehr unruhig. Und das kursive Logo wenn sich gar nix Kursives weiter findet? Ich finde es das Design natürlich Welten besser als deinen Zwischenstep aber geschlossen ist es halt nicht.

  • @Arne: Perfekt ist es sicher noch nicht – aber mal ein Anfang. Grundsätzlich sind Raster oder Grids eine super Sache, aber bestimmt nicht „trendy“, sondern seit vielen vielen Jahren die Basis von Gestaltung.

  • […] Oliver Wagner hat seinem agenturblog ein neues Layout verpasst. […]

  • Leider wissen viele nicht, wie mit einem Grid/Raster wirklich umgegangen wird. Falscherweise konstruieren Sie einen Raster und füllen das ganze einfach mit Text, Bilder etc. auf. Wie das dann aussieht kann man sich vorstellen – der Raster tritt zu stark in den Vordergrund.
    Besser ist es, zuerst Skizzen für die Idee/Layout zu erstellen und dann den dafür benötigten Raster zu konstruieren. Ganz nach dem Motto Form folgt Inhalt und nicht umgekehrt.

  • Interessant was sich so fern deines RSS Feeds auf der Seite tut. Ohne deinen Beiträge zu den Designwechseln hätte ich es nicht mal gemerkt.

  • […] Wagner gönnt sich wieder mal ein neues Layout, sieht gut aus imho. Mann, verdammt, ich könnte neidisch werden, ach, ich bin neidisch. Manche […]

  • Webdesign mit Grids (Gestaltungsraster)

    In letzter Zeit kommen im Webdesign immer häufiger Gestaltungsraster in Sprache. Jedenfalls kommt mir das so vor. Erst auf der SXSW 2007 hielten Khoi Vinh und Mark Boulton den Vortrag „Grids Are Good“. Darin erklärten sie die Vorteile un…

  • Nettes, duftiges Design. Allerdings stören die Einkerbungen am Header oben das Erscheinungsbild. Sie sind wirklich nicht nötig und sollten entfallen.

    Es interessiert wirklich keinen, wie und wo Deine Spalten platziert sind. Das gelingt schon alleine durch die unterbrochenen Linien, die zwischendurch auftauchen.

    Also, schöner wäre es, das Design intuitiv aufzunehmen und zu genießen. ;–)

  • In der Tat, ein nettes Design :-) Sollte ich mal irgendwann Zeit haben, steht ein eigenes Design für mein(e) Blog(s) sicher auch auf dem Programm.

    Eine Sache störte mich allerdings ein bisschen, nämlich, dass ich nicht auf den Satz „X Kommentare“ klicken konnte um direkt zu diesem Feld hier zu gelangen. Komplett gelesen hatte ich es ja schon im Feedreader.

    Aber nur ne Kleinigkeit, ansonsten cool :-)

  • Ein sehr cooles Layout!

    Aber warum nicht die grauen Grid-Anzeiger-Balkon oben etwas größer machen? Dann sehen sie nicht so überflüssig sondern gewollt aus?

  • […] genommen, welches eine Art Gerüst mit den wichtigsten WordPress-Elementen liefert. Des neue Layout vom Agenturblog hat mich dazu animiert, es auch einmal gridbasiert zu versuchen und so teilt sich mein neues Theme […]

  • Gefällt mir gut, aber der Vorvorgänger bleibt immer noch mein Favorit! Die Headergrafik ist gewöhnungsbedürftig… hat aber ihren eigenen Charme…

  • @Oliver
    Da gerade zufällig gesehen:

    Dein Kommentare muss noch freigegeben wereden!

    In „werden“ hat sich ein „e“ zuviel eingeschlichen.

    Gruss

    Daniel

  • Auf den ersten Blick fand ich alles total unübersichtlich. Ich fand eben nicht genau diese Struktur! Erst als ich ein wenig gescrollt habe und das Prinzip mit den drei Sektoren realisiert habe, habe ich mich zurecht gefunden. Die angedeuteten grids über dem header machen für mcih zumindest nicht wirklich Sinn. Irgendwie bringt das garnichts, wenn man als Normal-Leser nichts von grids weiß! Wirklich ansprechend finde ich übrigens den footer! Ich hätte sowas unte den header gapackt aber aus dieser Perspektive habe ich das noch nie gesehen und muss sagen; cool! ;)

    mfg Max

  • […] Zeit für ein neues Layout : agenturblog.de […]

  • Es gibt wohl im Design nichts schwierigeres als ein Konzept eiskalt durchzuziehen. Wenn ich davon lese, dass gerade erst aufgestellte Design-Richtlinien sofort – auch wenn nur unten :-) gebrochen werden, fühle ich mich sofort in meinem Designer Alltag!

  • […] Umstieg auf ein rasterbasiertes Theme liegt schon wieder ein dreiviertel Jahr zurück und in den letzten Wochen überkam mich […]

  • […] visuell veranschaulicht, wie es aussehen kann, hatOliver Wagner – Agenturblog: Zeit für ein neues Layout. gitter, grid based layout, grids, […]

  • Mein letzter Kommentar war wohl übereilig, hab erst jetzt den Hinweis im Footer auf das Quommunication Template gefunden. Sorry, naja wer lesen kann ist klar im Vorteil

  • […] hat auch Agenturblogger Oliver Wagner das neue Layout seines Blogs strikt nach Rastern aufgebaut. Es fällt sofort die klare, übersichtliche Struktur auf. Das Auge braucht nicht lange, um […]

Instagram