Das Design der Creative Suite – Icons, Splash-Screens, Entwicklung

creative-suite-5-concept-art

Adobe hat am Montag um 17 Uhr MEZ den Start der Creative Suite 5 eingeleitet. Die gängigen Blogs, Twitter und Facebook waren in Windeseile mit den neusten Features gefüllt so dass der Launch wohl kaum unbemerkt an Euch vorbeigegangen sein dürfte.
Zwei Tage nach dem Event ist es nun möglich eine erste Bilanz der Reaktionen zu ziehen und den ganzen Hype mit etwas Abstand zu betrachten. Wie bereits bei den letzten beiden Creative Suits wurden auch diesmal die Icons der Programme massiv kritisiert. Ein Grund für mich einen Post von Adobe aufzugreifen und Euch einmal zu zeigen warum die Damen und Herren die Icons so entworfen haben wie sie nun einmal jetzt aussehen.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Inspiration durch Otl Aicher

Die Grundüberlegungen der Adobe-Splash-Screens gehen auf den berühmten Typografen und Gestalter Otl Aicher (1922 - 1991) zurück. Zu den Werken Aichers gehört unter anderem das Corporate Design der Sparkasse und der Lufthansa, die Entwicklung der Schriftart Rotis, sowie die Erstellung der Piktogramme für die Olympischen Spiele 1972. Für diese weltberühmten Piktogramme schuf Aicher zunächst ein Raster aus welchem er anschließen die Symbole entwickeln konnte. Die Icons und vor allem die Splash-Screens der CS5-Familie sind auf Grundlage eben jenes Rasters entwickelt worden.

Adobe CS5 Icons - Raster nach Otl Aicher

Zunächst wurden einige Entwürfe umgesetzt die über Transparenz und eine sehr ausgeprägte Geometrie verfügten. Hier einige frühe experimentelle Prototypen der Splash-Screens von Photoshop und InDesign.

Experimentelle Splash Screens der Creative Suite 5

Anschließend wurden auf Grundlage des Rasters einige Basiselemente entworfen die später in unterschiedlichsten Konstellationen in der Gestaltung der Splash-Screens verwendet wurden.

Adobe CS5 Splash Screen Entwicklung nach Raster von Otl Aicher

Splash-Screen Finishing

Auf dieser Basis wurden nun entsprechend der Farbschemata die Verläufe hinzugefügt und die Farben festgelegt. Insbesondere die Ausarbeitung der Verläufe hat enorm viel Zeit in Anspruch genommen. Hier erneut einige Beispiele für Splash-Screens der CS5.

Adobe CS5 Splash Screens


Icon-History

Die Icons der Creative Suite waren bis zur Version CS3 ein illustratives Icon; meist wurde das "Photoshop Eye" aufgegriffen. Ich erinnere mich noch genau als ich auf einer Messe zum ersten Mal die Icons der CS3 sah. Ich muss zugeben, dass ich nicht gerade begeistert war. Erst als Adobe die CS4 veröffentlichte konnte ich mich mit den Icons anfreunden, gefiehl mir der schwarze "Aufdruck" doch deutlich besser als der weiße Text der CS3.
Die Icons der CS5 sind denen der CS3 und CS4 sehr ähnlich. Was die Grundüberlegungen der Icon-Designer angeht so hat sich hier jedoch einiges getan. So wurde beispielsweise erstmals in dieser Produktlinie eine weitere Farbe und eine weitere Dimension eingefügt um die einzelnen Programme besser unterscheiden zu können. Das die Icons für manche Betrachter wie ein Buch wirken ist übrigens nicht beabsichtigt.

Adobe CS4/CS5 Icon Entwicklung


Und noch einmal alle Programmicons im direkten Vergleich.

Adobe Creative Suite 5 Icons - CS3, CS4, CS5


Über 10.000 Dateien

Insgesamt wurden in unter 6 Monaten über 10.000 Grafiken für die Programme der Creative Suite angefertigt. Hier ein kleiner Auszug aus dem Bereich Flash.

CS5 Asset Flash

Feedback

Wie gefallen Euch die Icons bzw. das Design der Creative Suite 5? Ich für meinen Teil finde die neuen Icons sehr gelungen - auch wenn ich einige Zeit gebraucht habe um mich an den allgemeinen Stil zu gewöhnen.

Update: Entwicklung des Creative Suite 6-Designs

Adobe hat nun auch einen Beitrag zum Design der CS6 veröffentlicht.

Design-Entwicklung der Creative Suite 6. Hier am Beispiel von Dreamweaver CS6.
Design-Entwicklung der Creative Suite 6. Hier am Beispiel von Dreamweaver CS6. Quelle und Copyright: Adobe

Dieser Artikel und alle verwendeten Grafiken basiert fast vollständig auf Envolving the System Part 2 von Adobe Inspire.