Aus dem Portfolio: Webdesign für Madaus.de
Im April dieses Jahres erhielt ich von Hans Dorsch, vielen Lesern sicher als Autor von Mac professionell bekannt, den Auftrag, ein neues Layout für das Traditionsunternehmen MADAUS zu gestalten. Die Webpräsenz der Firma Madaus sollte komplett umgestaltet, in (X)HTML und CSS umgesetzt und durch Typo3 angetrieben werden.
pixelgraphix war dabei für die Gestaltung und die Umsetzung des Layouts zuständig. Der neue Entwurf sollte optisch nicht allzu weit vom damals verwendeten Layout abweichen, jedoch ein luftigeres und frischeres Outfit tragen. Neben den zwei Hauptnavigationen, der Suche und den verschiedenen Formatierungen für Listen und Untermenüs waren die Bereiche Kontent links und »luftige« Sidebar rechts klar vorgegeben und zu bearbeiten.
Der erste Entwurf enthielt so schon alle wichtigen Elemente für die Startseite, jedoch wurde die geteilte Navigation als störend empfunden. Die Suche sollte gleich zugänglich sein.
Im zweiten Entwurf für die Startseite, haben alle Elemente ihre jetzige Position und Funktion. Lediglich die Sidebar wurde später auf eine Spalte reduziert, mit der Option, mehrere Banner auch nebeneinander anzeigen zu können.
Nach vollständiger Abstimmung der Startseite wurden zwei weitere Unterseitentemplates in Photoshop gestaltet.
Diese sollten alle später im CSS zu formatierenden Elemente enthalten. Das verwendete Fotomaterial stammt von iStockphoto.
Da die erste Abstimmung nach der Vorstellung des Startseiten-Designs schon viele Feinheiten eingeschossen hatte, könnten die Templates dann sofort in (X)HTML- und CSS-Dateien umgesetzt werden. Die wichtigsten Blöcke und Formatierungen wurden dabei in englischer Sprache kommentiert. Der Kunde erhielt außerdem eine Photoshop-Datei zur leichteren Gestaltung künftiger Header-Bilder.
Ende August hatten alle Beteiligten ihre Arbeiten abgeschlossen und die »neuen« Seiten von MADAUS konnten online gehen.
Weitere Screenshots und Informationen sind im Referenzbereich: Madaus zu finden.
Werbeunterbrechung
Kommentare und Feedback (17)
Werbung
Vorheriger Artikel: Xcast: Podcasts am Mac verwalten, nächster Artikel: Beetlebum Screencast #1
04.09.2006, 13:30
Wow, große Firma, großer Auftrag, gute Arbeit!
Glückwunsch!
04.09.2006, 13:44
Sehr frisch frühlingshaft und angenehmer Whitespace zwischen den Bestandteilen, was bei derlei Auftritten nicht selbstverständlich ist. Die Farbwahl ist klasse, grün und violett -> Hip! Ist schön geworden.
Das Menü läßt sich bei deaktiviertem JavaScript nicht bedienen, da es ohnehin mit Tabellen umgesetzt wurde, wäre dies vielleicht eine Alternative? Zugegeben, der Prozentsatz an Surfern mit »JavaScript off« ist gering.
Homöopathie ist noch nicht ans Design angepaßt, oder? Sahen vorher alle Seiten so aus? Dann ist das aber jetzt ein optischer Quantensprung gewesen. ;-)
04.09.2006, 14:24
Der Bereich MADAUS “be well” ist auch sehr schön. Ist der auch ein Werk von Pixelgraphix? Die Icon sind echt süß :-)
04.09.2006, 14:37
Ist zwar OT, aber welches Theme nutzt Du für Firefox bei den Screenshots? Sieht schön aus …
04.09.2006, 14:38
Eine sehr gute Arbeit, wie ich finde.
04.09.2006, 14:41
Mir gefällt das Layout auch sehr gut, allerdings ist es etwas irretierend wenn man bspw. den Hauptmenulink Unternehmen ausgewählt hat, die “Untermenuepunkte” links unter der grossen Teasergrafik erscheinen, die Hauptnavigation aber weiterhin das “Pulldownmenue” mit nocheinmal den selben Menupunkten anbietet.
04.09.2006, 16:13
Das Design gefällt mir gut, hat aber eine Schwäche: Als Schriftgröße wird “80%” verwendet und beim Anzeigen der DropDown-Menüs dann trotzdem mit einer festern Größe des oberen Bereichs von 83 Pixeln gerechnet. Wenn man nun eine andere Standardgröße im Browser eingestellt hat, liegt das Menü nicht an der richtigen Stelle (Beispiel: Im IE “Schriftgradangaben der Webseiten ignorieren”, in Firefox andere Schriftgröße als 16 wählen). In Opera ist gar bei Standardwerten ein kleiner Abstand zwischen Menü und DrowDown-Menü. Und ich will an dieser Stelle nicht darüber diskutieren, ob prozentuale Angaben ausgehend von normalen Browsereinstellungen wirklich sinnvoll sind ;).
Viel schlimmer jedoch ist, dass die Seite in Opera schlecht nutzbar ist (nutzbar schon, wie halt ohne JavaScript), da das DropDown-Menü nach kurzer Zeit verschwindet, selbst wenn man mit der Maus auf diesem ist, wie im IE und im Firefox, wenn man das Menü verlässt. Das Problem habe ich jetzt nicht weiter analysiert, ist auf jeden Fall ärgerlich, zumal Deutschland laut Opera der größte Markt im Desktop-Browsergeschäft der norwegischen Softwareschmiede ist und grade hier so etwas nicht sein sollte.
04.09.2006, 16:35
Hab ich irgendetwas nicht ganz mitbekommen? Sind Meta-Tags heute nicht mehr modern oder wieso sehe ich keine ? (aber vielleicht liegt´s auch an meinem Opera G)
Ansonsten: Nice Design … auch wenn ich´s persönlich etwas zu grün finde .. aber über Geschmack läßt sich bekanntlich streiten :)
04.09.2006, 17:04
Vielen Dank für die vielen Kommentare bisher. Wie beschrieben, habe ich das Design und die Vorlagen geliefert, an der Programierung und konkreten Umsetzung von Inhalten habe ich nicht mitgewirkt. Die Hinweise zur Funktionalität reiche ich gern weiter. Vielen Dank dafür!
John, genau, Homöopathie hat ein etwas anderes Format und kommt noch.
Michael, der Bereich »be well« ist nicht von mir gestaltet worden, soweit ich weiß, ist Hans dafür »verantwortlich«. Die Screenshots sind in Camino aufgenommen.
04.09.2006, 17:30
… danke, Camino hatte ich irgendwie gar nicht auf der Liste. =8-)
05.09.2006, 13:13
Sehr schöne Arbeit!
06.09.2006, 12:49
Hallo Manuela,
ganz ehrlich? Ich weis leider nicht, was an dem Layout so toll sein sollte. Außer Farben und einigermaßen gelungenen Header sehe ich nur langweilige Kästchen. Die Kontaktseite sieht grauenhaft aus. Warum muss man gerade bei so einer Site, so viel an dem Aussehen der Formularelementen drehen? Da nicht alle sich gestallten lassen, bekommt man am Ende nur ein Brei aus verschiedenen Styles.
Andrei
06.09.2006, 14:21
Hallo Andrei, ob das Design langweilig ist oder nicht, ist sicher Ansichtssache, oder? Die Anforderungen an einen solchen Webauftritt lassen sich nicht in drei Worte fassen und auch hier nicht diskutieren. Den Aufbau und die Styles im Formular finde ich persönlich keinesfalls erschreckend, auch wenn ich mit der Gestaltung nicht betraut worden bin.
07.09.2006, 17:38
Vielen Dank für die Kommentare zu diesem Projekt.
Für alle Interessierten. So sah die Startseite vorher aus.
Das Design war nicht schlecht. Nur eben sehr steril und einförmig.
Es sollte eben, wie Manuela schon sagte, mehr Raum für Emotionen geschaffen werden.
Mit dem neuen Design sind wir auch flexibler als das vorher. Der Punkt Homöopathie wird möglicherweise mit dem gleichen Template, aber anderer Farbgebung integriert werden.
Die technischen Punkte gebe ich gerne an die Programmierer weiter.
10.09.2006, 23:04
Booooooooah, sieht aber gut aus!!! Ich möchte auch sowas irgendwann können.. Eine tolle Leistung, finde ich! MfG.
19.03.2007, 12:30
Great for this document i`m search many days in the world wide web,but now i found this information on your site.
Thanks for help,thats the answer of all my questions i`v had
Thanks again
Timo
05.02.2008, 14:05
Sehr gute Arbeit, muss man dir lassen.