09.02.2011
by Yves Weißig
Screenshot - Architekturbüro Defort - 09.02.2011
Für das in Sprendlingen ansässige Architekturbüro Defort entstand in enger Zusammenarbeit mit Sina Defort ein Internetauftritt. Eingesetzte Techniken hierbei waren das 960 Grid System, HTML und CSS. Die Seite ist ab sofort unter www.defort-architekten.com, .net und .de zu erreichen. Highlight ist eine Galerie auf der Startseite. Das Design ist bewusst schlicht und modern gehalten, zwei Attribute mit denen sich das Architekturbüro Defort identifiziert.
07.11.2010
by Yves Weißig
San Francisco - Golden Gate Bridge
Was wäre eine Webseite ohne Grafiken und Bilder? Richtig, nur halb so attraktiv für den Benutzer. W&S IT-Consulting legt deshalb neben technischer Expertise auch großen Wert auf Design (und Usability). In der “Behind the scenes”-Serie führen wir Sie hinter die Kulissen des “W&S IT-Consulting Blog“, zeigen Ihnen das Innenleben, die Entstehung und die Macher. Starten wollen wir mit den “Eyecatchern” einer jeden Webseite, bei uns prominent im oberen Drittel der Seite platziert, den Bildern. Sie sollen sich gut ins Design einfügen, den Besucher auf der Seite halten und die Identität der Domain unterstreichen.
Für den richtigen “Eyecatcher” gibt es viele Quellen. Beim “W&S IT-Consulting Blog” haben wir uns auf Eigenkreationen beschränkt. Da diese allesamt für die Gallerie im oberen Seitenteil beschnitten werden mussten, präsentieren wir Ihnen daher hier eine Auswahl nochmal in voller Größe. Das Thema sind Weltmetropolen, Bilder von San Francisco, Los Angeles, Frankfurt, London und Zagreb begleiten unsere Seite. Die Verknüpfung die beim Benutzer abgerufen werden soll ist: Die Welt wächst zusammen, IT hilft uns dabei. Auf der Seite von “W&S IT-Consulting” (www.ws-it-consulting.com) sind wir einen anderen Weg gegangen. Dort werden nur Grafiken verwendet die das Motto “We connect… science and IT.” unterstreichen.
Los Angeles - Walt Disney Concert Hall
Die Technik: Um mehrere Bilder zu präsentieren, nutzen wir einen Slider, dieser wechselt periodisch das Bild. Realisiert wird dies durch jQuery und CSS. jQuery ist eine freie, umfangreiche JavaScript-Klassenbibliothek zur DOM-Manipulation und CSS ist eine deklarative Sprache zur Gestaltung von Elementen auf einer Seite. Alle Bilder sind in einer Liste (<ul><li></li></ul>) angeordnet. Die Liste konfigurieren wir mit CSS in der Art, dass zwischen den Bildern keinerlei Räume entstehen und alle horizontal angeordnet werden (display: inline;). Mit dem jQuery-Plugin ScrollTo können wir nun zwischen den einzelnen Listeneinträgen hin- und her-scrollen. Die Overlays erlauben es dem Benutzer vorzeitig (vor Ablauf der 10 Sekunden) zum nächsten Bild zu wechseln.
Es müssen aber nicht immer eigene Quellen sein, Anlaufpunkte für Bilder und Grafiken im Netz sind:
Frankfurt - Skyline
Fazit: Bilder und Grafiken sind immens wichtig für einen Internetauftritt. Sie animieren den Benutzer auf der Seite zu verweilen und sollten daher mit Bedacht ausgewählt werden. Richtig eingesetzt ergeben sie zusätzliche Anreize für den Besuch einer Seite. Die Menge und Form der eingesetzten Mittel sollte auf den Inhalt der Seite ausgerichtet sein, ein Informationsportal sollte entsprechend weniger Grafiken und Bilder einsetzen als der Internetauftritt eines Designstudios (hierbei können Designmittel prominent eingesetzt werden um den Inhalt zu unterstreichen).
