Clothed In Purple

Das Design

Flat-Design - Flach, schlicht und edel

Die Firma Apple hat es beim neuen mobilen Betriebssystem IOS 7 (für Ipad und Iphone, erschienen im Herbst 2013), gezeigt: Flach ist wieder angesagt und top modern. Rund bei Apple sowieso.

Das ganze nennt sich Flat-Design, es wird auf Schatten und 3-D-Effekte verzichtet, da alles zweidimensional, einfach und übersichtlich, aber denoch edel und schlicht wirken soll. Wenige Monate vorher hat es die Firma Microsoft mit dem Betriebssystem Windows 8 ähnlich gemacht und ein flaches Kacheln-Design entwickelt.

Wohin geht der Trend?

Die zwei Platzhirsche der Computer-Branche (Apple und Microsoft) konzentrieren sich auf das Layout-Thema "Flach-Design". Somit können Sie davon ausgehen, daß sich diese Thematik, egal ob Sie es mögen oder nicht - in den allgemeinen Medien wie Fernsehen (Trailer, Fernseh-Studio-Design), Print-Medien, Musik-Medien oder insbesondere natürlich in den Internet-Medien längerfristig wiederfinden wird.

Alles rund

Die Fotos sind abgerundet, die Boxen und die Buttons auch. Und alles liegt auf einer abgerundeten Konstruktion. Und diese Rundungen funktionieren, obwohl wir rechteckige Grafiken verwendet haben. Die moderne CSS-Technik macht es möglich.

Halb-Transparente Buttons

Oben haben wir für Sie ein Aufklapp-Menü eingebaut. Fahren Sie über die Links der Gruppen 01-04 und es öffnen sich die Untermenüs. Falls Sie Ihr eigenes Foto einbauen, so scheint es eben auch durch die Buttons.


Die Technik

Rundung mit CSS3-Befehlen

Mit der neuen CSS-Technik ist es jetzt möglich, abgerundetete Objekte herzustellen, ohne extra runde Grafiken einbauen zu müssen. Auch Ihre rechteckigen Fotos, falls Sie unsere ersetzen wollen, werden dann abgerundet! Übrigens sind die halb-transparenten Buttons im Haupt-Menü nur oben links und oben rechts abgerundet, daß erforderte etwas mehr Quellcode, sieht hier aber spannender aus als eine Komplett-Abrundung.

Moderne Browser können CSS3

Es gibt keine technischen Nachteile, sollte man die Seite in einem älteren Browser ansehen. Es würde dann halt alles rechteckig statt abgerundet aussehen. Zum Bespiel kann der Browser Internet Explorer in der Version ab 9 die Rundungen darstellen. In der schon älteren Version 8 des Internet-Explorers gäbe es dann halt keine Rundungen. Bei Browsern-Konkurrenten, wie Firefox, Google Chrome, Safari oder anderen wäre es ähnlich.


Der Bonus

Wir haben ein zweites Design für Sie entwickelt, damit Sie die Möglichkeiten der Variation erkennnen. Das zweite Design ist hier auf index2.html anbei.
Dr. Mike Muster GmbH & Co. KG  Spezialstrasse 55  47234 Sampletown