Details. Bild und Überschrift auf der Startseite von Dr. Web

Heute nehmen ich die Startseite von drweb.de – einem Webmagazin für Webdesign als Beispiel und verbessere ein Detail auf der Seite. Schauen wir uns an in welchem Verhältnis Bilder und Überschriften stehen.

Kinder lieben Bücher mit Illustrationen, eine Seite ohne Bilder ist für sie langweilig. Das gleiche gilt auch für Erwachsene, anders zu denken wäre naiv. Erwachsene suchen Illustrationen in Zeitschriften, schauen Werbebanner an und finden Katzenbilder süß. Alle mögen Bilder.

Ein Bild fühlt sich am besten, wenn es ganz oben in der Hierarchie des Textblocks stehtdetails-illustration

Ein Bild hinter dem Überschrift trennt Text vom Überschrift und unterbricht das Lesen. Dabei wird die Illustration schneller bemerkt als Text und der Leser wird gezwungen mit seinem Blick vom Bild zur Überschrift und dann zum Text hoch und runter zu springen.

Daher mein Vorschlag das Bild über den Überschrift zu stellen:drweb-details

Spüren sie die Änderungen? Das scannen der Webseite ist jetzt leichter.

weiter lesen

Details. Bildergalerien auf deutsche-startups.de

Schauen Sie sich die Bildergalerie auf der Website deutsche-startups.de an. Was fällt auf? Kleine Bilder, gedrückt in eine Spalte neben dem Sidebar. Wie kann ich schnell helfen? So:deutsche-startups-details-bildergalerie

CSS-Änderungen:

Ich würde die Bilder auf 100% der Breite anzeigen, dafür sind aber mehrere Änderungen notwendig. Und natürlich sollen die Bilder alle auf einer Seite sein, ohne die ganze Seite immer neu zu laden, aber das ist die nächste Geschichte.

weiter lesen

Details. Computerbild Website

Durch kleine Änderungen können Websites besser werden. Heute stelle ich Änderungen an der Startseite von Computerbild.de vor. Mit nur einer Änderung in CSS wirkt die Website aufgeräumter.
computerbild-details

#cbheader .metanav{
background: #f1f1f1;
}

Das wars.

weiter lesen