Ein Neu-Design erfordert auch im Bereich Webdesign je nach Webseite eine gewisse Halbwertszeit. Aktuelle Trends sind da zwar nett, aber die meisten Webseiten sollen ja auch in 2 Jahren noch zeitgemäß wirken. Da man in vielen Design-Bereichen das »Rad« nicht neu erfinden kann bzw. muss, ist Inspiration eine wichtige Quelle. Ich möchte Euch daher unsere kondensierte Auswahl sehenswerter Webseiten vorstellen, die für unser Neu-Design in bestimmten Punkten einflussreich waren. Natürlich macht das allein noch kein gutes Neu-Design, aber nachahmenswerte oder zumindest nachdenkenswerte Punkte sind bestimmt für jeden dabei. Viel Inspiration!
Aus vielerlei Gründen finde ich eine 960 Pixel-Aufteilung vorteilhaft. Der klassische 960-Grid hat jedoch meiner Meinung einen wesentlichen Nachteil: zu kleine Spaltenabstände (white space) – auch bei hier vorhandenen Außenabständen. Daher haben wir die Abstände auf jeweils 30 Pixel vergrößert und den Inhalt auf insgesamt 960 Pixel verbreitert. In der gängigen Minimalauflösung von 1024 Pixel-Breite passt die Seite noch voll ins Bild.
Für noch größere Flexibilität haben wir daher wenige div
-Container mehr in Kauf genommen. So können wir fast jede Aufteilung realisieren und die Spalten notfalls bis zum Rand reichen lassen. Derzeit arbeiten wir noch an der Hauptnavi sowie dem Bereich rechts oben (und natürlich den Bildern).
Sehenswerte Umsetzungen im Grid-Bereich gibt es auf den Grid-Tool-Seiten zuhauf. Eine anschauliche deutsche Seite als Beispiel dazu (Ausschnitt):
Die Tonalität bzw. das Look and Feel im Sinne der Gesamterscheinung ist hell und dezent im Hintergrund, wobei das Beige dem kühlen Grauton etwas Wärme verleiht.
Sehenswerte Webseiten zum Look and Feel:
Beim Logo spielten viele Überlegungen eine Rolle. Ich will mich hier auf die Größe im Webdesign beschränken, wenngleich die Beispiele nicht ihr Logo dafür verwenden:
Unter Referenzen zeigen wir Beispiele in relativ großer Breite, damit man auch gleich etwas sieht und nicht dafür auf jedes Bild zur Webseite klicken muss. Per Mootools-Plugin werden zudem nur die Bilder geladen, die im Bildschirmausschnitt zu sehen sind. Das gleicht die hohe Datenmenge durch die Bilder etwas aus.
Auch dazu gab es einige Vorbilder:
Wer extrem kontrastreiche Layouts mag, für den hier noch zwei sehenswerte Bonus-Tipps:
Ich hoffe, dieser Ausschnitt konnte Euch zu einigen sehr sehenswerten Webseiten führen und zeigen, inwieweit wir uns davon inspirieren ließen.
Feedback willkommen!
Im Blog schreibt Robert Hartl über CMS, SEO & Webdesign. Kontakt →
Vielen Dank für die tollen Ideen.
Ich werde mich inspirieren lassen und vielleicht komme ich ja auf neue Ideen!
Oliver Pfeil →
Kommentar 2
27. Dezember 2010 um 20:43 Uhr
eine wirklich schöne Zusammenstellung. Auch wenn ich der 980px Variante nach wie vor nur Gutes abringen kann. Wie kommt Ihr auf 960?
Webdesign Maurer →
Kommentar 3
13. August 2011 um 18:23 Uhr
Hallo „Webdesign Maurer“, auf 960 Pixel kommt man, wenn man mit Abständen von 30px rechnet.
Robert Hartl
Kommentar 4
16. August 2011 um 07:09 Uhr
Kommentare werden erst nach manueller Freischaltung sichtbar. Die übermittelten Daten werden entsprechend der Datenschutzerklärung zur Verarbeitung des Kommentars gespeichert.
Nibelungenplatz 2
D-94032 Passau
Tel.: +49 (0)851/ 966 31-31
Fax: +49 (0)851/ 966 31-41
E-Mail: kontakt@netprofit.de
Schöne Inspirationen di du hier auflistet. Vorallem die Typografie der Logos.
Kommentar 1
10. Februar 2010 um 10:19 Uhr