TYPO3 Webdesign... oder Webdesign für TYPO3? Wie funktioniert das?
Die Frage wollen wir anhand eines typischen TYPO3-Projektbeispiels erörtern. Wir beschreiben Ihnen also nun einen typischen Typo3 Webdesign-Prozess. Weitere Beispiele für Webdesign aus unserem Haus finden Sie hier.
In einem ersten Schritt erstellen wir gemeinsam mit dem Kunden ein Webdesign-Briefing. In Textform. Anschliessend wird auf Basis dieses Webdesign-Briefings eine bzw. auf Kundenwunsch und je nach Budget auch bis zu drei Webdesigns erstellt. Die Webdesign-Entwürfe werden als Skizze entwickeln im JPG-Format bereitgestellt.
Hier sehen Sie zwei Webdesigns für unseren Kunden aditago. Jeder Webdesign-Entwurf besteht aus einer Homepage und mehreren Folgeseiten. Klicken Sie bitte auf das jeweilige Bild, um eine Großansicht zu sehen.
Webdesign 1
 |
 |
 |
 Webdesign-Typo3 Homepage 1 |
Webdesign-Typo3 Folgeseite 1.1 |
Webdesign-Typo3 Folgeseite 1.2 |
 |
 |
|
Webdesign-Typo3 Folgeseite 1.3 |
Webdesign-Typo3 Folgeseite 1.4 |
|
| Das Webdesign 1 zeichnet sich aus durch eine ausgewogene Bildsprache, die dem eigentlich technisch geprägten Thema "Hard- und Software für die Zutrittskontrolle bei Massenevents" sehr lebendig erscheinen läßt. Die Homepage hat einen etwas größeren Kopfbereich. Das Kopfbild kann je nach Jahreszeit ausgetauscht werden. Die Folgeseiten haben einen deutlich kleineres Kopfbild, um Platz für Inhalte zu schaffen. Es sind mehrere Varianten einer Fogeseite dargestellt. Idee dieses Entwurfes ist, je Kapitel eine eigenständiges Kopfbild zu entwickeln. Zusätzlich wurd der Slogan "Zugang zur Freizeit" entwickelt, der oben rechts auf der Homepage platziert ist. | ||
Webdesign 2
 |
 |
 |
Webdesign-Typo3 Homepage 2 |
Webdesign-Typo3 Folgeseite 2.1 |
Webdesign-Typo3 Folgeseite 2.2 |
 |
Auch bei diesem Entwurf ist die Bildsprache äußerst gelungen. Der frech fröhlich lachende Junge auf vor dem Hintergrund des Halleneingangs macht Lust auf Freizeit und auf Zutrittslösungen von aditago. Die vertikale Hauptnavigation (links) ist durch eine Metanavigation, horizontal im oberen rechten Bereich ergänzt. Zur Standortbestimmung und Orientierung des Nutzers auf der Seite wird ein Brotkrumenmenue verwandt. Auch bei diesem Entwurf kann die Kopfleiste variiert werden. Wiederkehrendes Element neben dem Logo ist der kleine Junge, der in den Kollagen der Kopfleiste in verschiedenen Posen auftaucht. | |
Webdesign-Typo3 Folgeseite 2.3 |
||
Webdesign - Logos
|
|
|
|
|
|
| Im Falle von "aditago" existiert weder ein CI noch ein Logo. Die Firma hat sich gerade erst neu gegründet. Darum haben wir parallel zum eigentlichen Webdesign auch mehrere Varianten für ein Logo entwickelt. Hier sehen Sie das Ergebnis. | |
| ||
Der Kunde hat sich für den Entwurf 1 entschieden. Im nächsten Schritt wurde das Design in einen HTML-Protypen umgesetzt.
Nach erneuter Abnahme des HTML-Prototypen durch den Kunden beginnt die Umsetzung in Typo3. | ||
(Dieses und weitere Projekte wurden von TYPO3-Macher in Hamburg realisiert, siehe TYPO3 Hamburg)
TYPO3 Templates
Informationen zu vorgefertigten TYPO3 Templates finden Sie hier: TYPO3 Templates.