kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. Peter

    Verfasst am 14. April 2010 um 22:15 Uhr.

    Eindrucksvolle Icon-Übersicht, hätte nicht gedacht, dass es insgesamt Tausende sind. Mir haben die schlichten „Bauklötze“ schon immer gut gefallen – jetzt weiß ich auch warum.

  2. Schorschi

    Verfasst am 14. April 2010 um 23:38 Uhr.

    Wow wirklich sehr interessanter Artikel mit beeindruckenden Fakten. Hätte niemals gedacht dass hinter solchen „einfachen“ Icons so viel Aufwand und Gedanken stecken.
    Wenn ich aber mir das Resultat anschaue ist es wirklich beeindruckend gut! Gerade der Umgang mit den Farbverläufen ;)

  3. Duy

    Verfasst am 15. April 2010 um 7:34 Uhr.

    Schöner Artikel!
    Auf jeden Fall finde ich die neuen Icons gut! Aber ob sie besser sind als Vorgänger CS4?
    Bei der CS5 find ich die 3D Gestaltung cool, aber bei der CS4 ist der Farbkontrast der schwarzen Buchstaben auf der farblichen Fläche – zum Teil, nicht überall – meistens besser gewesen! Worüber ich etwas überrascht bin, ist der Letterpress-Effekt bei den neuen Icons, hatte angenommen dieser würde wegfallen.
    Im Großen und Ganzen: Tolle Entwicklung!

  4. raum|bild|welt

    Verfasst am 16. April 2010 um 1:18 Uhr.

    Also … – vom Kontrast und damit von der Lesbarkeit der Icons ausgehend ist zweifellos die weisse Schrift der CS3 das non-plus-ultra!
    Bei der CS5 fällt das [Br]-Icon aus der Reihe, da nur hier die Schrift dunkler als der Hintergrund ist – diese Inkonsequenz ist absolut inakzeptabel!
    Ansonsten finde ich die CS5-Icons durchaus gelungen und die aufwendig gestalteten Splash-Screens gefallen mir auch;

    Das Beispiel mit den Flash-Graphiken zeigt eindrucksvoll, welch enormer Aufwand hinter einem solchen Projekt steckt – Danke dafür!

    und das noch: mal wieder die „alten“ deutschen Gestalter herzunehmen ist bestimmt kein Fehler! Da kann JEDER noch was lernen!
    http://de.wikipedia.org/wiki/Otl_Aicher

    • Jonas

      Verfasst am 16. April 2010 um 7:49 Uhr.

      @raum|bild|welt: Und was das Bridge-Icon angeht, so stimme ich dir voll und ganz zu! Darüber habe ich mich auch schon geärgert :) Ich wüsste auch gerne warum sich die Designer dafür entschieden haben hier von der Linie abzuweichen. Übersehen haben werden sie es wohl kaum.

  5. GMdV

    Verfasst am 29. Juni 2010 um 12:47 Uhr.

    Danke für die sehr feine Präsentation.

    Mir gefällt die Aufmachung der CS5 (insbesondere die Splashscreens) auch ausgesprochen gut.

    Die einem Einheitlichkeitsfanatiker wie mir äußerst sauer aufstoßende Inkonsequenz bezüglich des Bridge Icons ist wohl von Adobe einen Strategie dieses Icon aus den Quickstartleisten rauszuhalten. ;)

    Soll ja ständig im Hintergrund und über die Programme verfügbar sein.

  6. Jo

    Verfasst am 30. Dezember 2014 um 20:57 Uhr.

    Die Freude wäre grenzenlos, würde Adobe endlich damit anfangen, statt Zeit und Geld auf reine Kosmetik zu verwenden, an der Konsistenz von Tools und Shortcuts der Programmfamilie zu arbeiten. Wir schreiben das Jahr 2014 – und es nervt immer noch!

    *****ss auf Icons und Splashscreens.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.