kulturbanause® blog » Fireworks

3 Webdesigner, 3 Standpunkte: Photoshop vs. Fireworks vs. InDesign

Jonas Hellwig — Thu, 20 Sep 2012 09:09:31 +0000

Es gibt Fragen die polarisieren. Apple oder Samsung? Coke oder Pepsi? Fireworks oder Photoshop? Oder vielleicht doch lieber InDesign? Ich bin der Meinung, man sollte das Tool nutzen, in dem man sich am wohlsten fühlt. Unabhängig davon ob das Programm ursprünglich für den Einsatz im Webdesign gedacht war und vorausgesetzt, dass die Qualität des Projekts nicht leidet. Doch warum schwören einige Webdesigner auf Photoshop und andere auf InDesign, Illustrator oder Fireworks? Ich habe die Webdesigner Ivo Mynttinen, David Hellmann und Christian Seitz gefragt und interessante Antworten erhalten.

Bitte stelle dich unseren Lesern kurz vor und erzähle uns welche Art von Projekt du normalerweise bearbeitest

Ivo Mynttinen

Ich bin ein 20-jähriger User Interface Designer. Momentan wohne ich in Nürnberg. Seit etwa einem halben Jahr bin ich selbständig und entwerfe für meine Kunden (meist Startups aus der Bay-Area) innovative Designkonzepte für Webapps, Mac Apps und iOS Apps. Seitdem ich 15 bin experimentiere ich mit (damals noch Macromedia) Fireworks und konnte mir so ein sehr solides Wissen über mein favorisiertes Design-Tool, sowie einige andere Programme der Creative Suite aneignen.

David Hellmann

Ahoi! Ja namentlich nennt man mich David Hellmann und sonst bin ich im anonymen Internet meist unter dem Namem: davidhellmann zu finden! Wenn ich nicht vor einem Bildschirm sitze fahre ich oft ein wenig Rad. Früher BMX heute dann eher MTB.

Ivo Mynttinen, David Hellmann, Christian Seitz (v.l.)

Meistens gestalte ich Websites was für mich heißt, dass ich in Photoshop gestalte und teilweise später auch noch den HTML/CSS Part mit übernehme. Kommt aber immer auf das einzelne Projekte an. Eines meiner letzten Freelance Projekte war Deutsches Obst und Gemüse wo ich für den Designpart verantwortlich war: www.deutsches-obst-und-gemuese.de

Nett oder? :)

Christian Seitz

Hallo, ich heiße Christian Seitz und arbeite als freiberuflicher Grafik-Designer für Digital- und Printmedien. Mein Schwerpunkt liegt dabei auf umfangreicheren Publikationen wie Katalogen oder Magazinen im Printbereich. Nebenbei blogge ich auf herrseitz.de über Themen rund um Fotografie, Mountainbike, Skifahren und Workflows aus dem Mac-User-Alltag.

Hast du einen bestimmten gestalterischen Stil? Inwiefern unterstützt dich „dein“ Programm dabei?

Ivo Mynttinen

Wer ein wenig Zeit damit verbringt, sich meine Arbeiten auf meinem Portfolio anzusehen, wird schnell feststellen, dass ich stark darauf achte, Benutzeroberflächen sauber und einfach zu gestalten. Gerne verliere ich mich jedoch auch in Details, die sehr häufig das „gewisse Extra“ meiner Arbeiten ausmachen. Auch wenn es sich stark nach einem Klischee anhört, inspirieren mich die Designs von Apple, allerdings auch Arbeiten von Agenturen wie z.B. MetaLab oder Softfacade.

Portfolio Ivo Mynttinen

Fireworks bietet mir genügend Möglichkeiten, um solide Designs zu erstellen, eignet sich aber auch hervorragend dafür, mal eben ein erweitertes Mockup zu erstellen. Den größten Vorteil von Fireworks sehe ich allerdings darin, dass ich persönlich damit extrem viel Zeit sparen kann - gerade weil hier viele Dinge einfach anders angegangen werden als z.B. mit Photoshop.

David Hellmann

Ich glaube der ändert sich immer mal bzw. hängt auch das stark vom Projekt/Kunde ab. Da ich ja wie oben schon erwähnt Photoshop als MEIN Programm sehe kann ich nur sagen das ich mit Photoshop immer das Gefühl habe alles machen zu können. Egal ob clean oder verspielt. Ich finde in Photoshop einen weg. Bei anderen Programmen kam mir das nicht so vor. (Die gelbe Hölle!!! :)

Es wird nicht grundlos sein, dass wohl die meisten mit Photoshop arbeiten, oder?

Christian Seitz

Wenn mich das Briefing nicht in eine bestimmte stilistische Richtung lenkt, bin ich ein Fan von klarer, reduzierter und funktionaler Gestaltung, die durch gute Typographie, stimmige Proportionen und einem klaren Ordnungssystem – am Besten mit viel Weißraum – überzeugt.

Mein Programm der Wahl ist Adobe InDesign. Es kommt mir durch die Möglichkeit der einfachen Einrichtung auch komplexerer Rastersysteme in horizontaler als auch vertikaler Richtung entgegen. Ich weiß, dass ist nichts weltbewegendes und schon lange vorhanden, aber ich finde es immer wieder hilfreich beim Aufbau neuer Layouts. Überhaupt bin ich ein Fan des numerischen Gestaltens, sprich viele Objekte werden mit Hilfe der Koordinaten/Transformieren-Palette final platziert.

Benutzeroberfläche von InDesign CS6

Wie ist es dazu gekommen, dass du dieses Programm nutzt?

Ivo Mynttinen

Fireworks war das erste „Bildbearbeitungs“-Programm, was mir in die Hände kam. Bereits nach den ersten Stunden konnte ich für damalige Verhältnisse gute Ergebnisse erzielen. Gerade die steile Lernkurve ist wohl einer der Gründe, weshalb ich nach wie vor Fireworks-Nutzer bin.

David Hellmann

Gruppenzwang! Klarer Fall. Ganz früher hatte ich noch PaintShop Pro 7 wenn ich mich recht erinnere. War eigentlich auch ganz cool. Aber sind wir ehrlich. Man kommt an Adobe Sachen einfach nicht vorbei im professionellen Umfeld. Und da Photoshop halt verbreiteter ist als andere Sachen bin ich schlussendlich auch dort gelandet. Bereut habe ich es nicht.

Christian Seitz

Ich arbeite am Liebsten mit Programmen, die ich gut und schnell und vor allem aus dem FF bedienen kann. Das ist bei mir mit InDesign der Fall. Meist muss es ja im Job schnell gehen und da finde ich das Umdenken von InDesign nach Photoshop – vor dem Hintergrund des Entwerfens und mit Deadlines im Nacken – eher störend.

Deshalb bin ich mehr froh als skeptisch, dass Adobe die Software immer mehr zum crossmedialen Layoutwerkzeug ausbaut. Kommt mir entgegen. Sehr.

Bezogen auf Webdesign - was sind für dich die Vorteile des Programms?

Ivo Mynttinen

Die Möglichkeit, alle Seiten eines Projekts unkompliziert in einer Datei zu bearbeiten und die Tatsache, dass in Fireworks fast ausschließlich mit Vektor-Elementen gearbeitet wird.

Ein weiterer Vorteil ist, dass Benutzeroberflächen für unterschiedliche Auflösungen (z.B. iPhone und iPad Apps) fast ohne nachträgliches Verbessern von Details skaliert werden können. Außerdem sagen mir die Layer-Styles sehr zu, welche sich 1:1 zu CSS3 konvertieren lassen.

David Hellmann

Wie oben geschrieben habe ich einfach das Gefühl an keine Grenzen zu stoßen bei dem was ich mache. Das ist für mich wichtig. Ein anderer wichtiger Punkt ist, dass ich mich wohl fühle mit dem Programm. Auch ich hatte das ein oder andere mal schon Fireworks auf, aber kam damit einfach nicht wirklich zurecht. Vielleicht auch eine Sache der Gewöhnung aber wer weiß, vielleicht sind wir auch einfach nicht für einander gemacht :)

Die Website von "Deutsches Obst und Gemüse" wurde in Photoshop gelayoutet

Christian Seitz

Am Besten finde ich, mehrere Seiten mit unterschiedlichen Größen in einem Dokument anlegen zu können und bei einem Wechseln zwischen Print und Online nicht umdenken zu müssen.

Welche Webdesign-Aufgaben bewältigt das Programm nicht optimal?

Ivo Mynttinen

Sobald es darum geht, aufwendigere Illustrationen zu erstellen, ist man mit Photoshop eindeutig besser dran. Ich bin der Meinung, dass man mit Fireworks absolut alles machen kann, was auch in Photoshop geht - nur steigt der Aufwand enorm, wenn man beispielsweise detaillierte Icons erstellen möchte.

David Hellmann

Es sind eher so Kleinigkeiten… Die fehlende Möglichkeit, dass man den Eckradius von Vektor-Objekten nicht nachträglich ändern kann. Das sind zwar Kleinigkeiten, würden aber oft großes bewirken. Etwas sehr gutes gibt es seit CS6 ja nun endlich "Pixel Snapping"!!! :) Letztendlich wird jedes Programm immer irgendwelche Schwächen haben bzw. Sachen die man als nicht optimal empfindet. Aber das ist ja völlig normal.

Christian Seitz

Ich finde, den Export von Grafiken für die Umsetzung könnte man noch optimieren.

Was stört dich an anderen Programmen?

Ivo Mynttinen

Die direkte Konkurrenz Photoshop ist mir zu unflexibel und zu aufwendig. Sketch 2, ein relativ neues Programm, welches Fireworks sehr nahe kommt aber erfrischende Konzepte mit einbringt, die man in einem Adobe Programm wohl niemals erwarten darf, ist mir momentan noch zu instabil.
Eventuell werde ich, sobald sich das geändert hat, dennoch den Schritt gehen von Fireworks zu Sketch zu wechseln.

Screenshot von Sketch 2 - © Sketch

David Hellmann

Stören direkt nichts. Ich finde einfach ich hab mich nie damit wohl gefühlt wenn ich es genutzt habe. In Photoshop arbeitet man ja viel mit Ebenen in Fireworks sind diese zwar auch da aber haben da nicht so den Stellenwert wie in Photoshop. Klar, ein Fireworks Mensch der zu Photoshop kommt wird wohl das gleiche anders herum sagen. Für mich gibt es aktuell einfach keinen Grund auf ein anderes Programm zu wechseln.

Ach was mich bei Fireworks immer aufgeregt hat war, dass man die Werte (Breite einer Box z.B.) nicht mit den Pfeiltasten ändern konnte sondern immer tippen musste :)

Christian Seitz

Wie oben schon erwähnt, stört mich in erster Linie das Umdenken in der Bedienung. Wobei ich bei „anderen Programmen“ an Photoshop, Fireworks oder Illustrator denke. InDesign arbeitet objektorientiert, Photoshop eher ebenenorientiert. Hat beides seine Daseinsberechtigung. Aber ich kann – und hab's auch nicht wirklich intensiv probiert – auf Ebenenbasis nicht gestalten.

Illustrator ist InDesign noch am ähnlichsten – deshalb komm ich damit wahrscheinlich auch prima klar.

Zu Fireworks kann nicht besonders viel sagen. Hab ich nur mal oberflächlich probiert.

Nutzt du ergänzende Plugins, Tools oder andere Programme für die Erstellung deiner Designs? Wenn ja in welchen Bereichen?

Ivo Mynttinen

Ich verwende keine zusätzlichen Plugins. Für diverse Aufgaben nutze ich natürlich Photoshop und selten auch Illustrator.

David Hellmann

Photoshop Plugins:

GuideGuide! Einfach genial!
DevRocket ist auch ganz nett.
Bjango Aktionen

Andere Apps:

Pochade, ein globaler Colorpicker der sich in der Menüleister versteckt. Ist super!
WhatFont: Super Chrome Plugin

Guide Guide Photoshop-Plugin

Christian Seitz

Ja. Ich verwende zwar InDesign für die Layoutarbeit, aber ergänzenden Aufgaben, beispielsweise das Entwickeln von Buttons, Schriftzügen oder Icons mach' ich in Illustrator.
Bilder bearbeite, retuschiere oder optimiere ich in Photoshop und Text für Webseiten schreibe ich in iA Writer. In InDesign wird das dann alles vermixert. ;-)

Welche Features würden deinen Webdesign-Workflow beschleunigen? Was wünschst du dir für kommende Programmversionen?

Ivo Mynttinen

Mehr Stabilität, eine überarbeitete Benutzeroberfläche, bessere Gesten-Unterstützung sowie Optimierungen für Retina Screens wären ein Anfang. Leider hielt sich Adobe bei den letzten Major-Updates mit neuen Features immer stark zurück, weshalb ich relativ wenig Hoffnung habe, all diese Features in der nächsten Version zu sehen.

Benutzeroberfläche von Fireworks CS6

David Hellmann

Die Möglichkeit Eckradien nachträglich zu ändern für Vektorobjekte.
Eine Art Bibliothek in Photoshop wäre auch ganz cool denke ich. Sowas wie es in Flash gibt in der Art.
Cloudsync für die Settings. Das wäre toll :) Auch das Mustern, Pinsel etc. alles in der Cloud abgelegt wird und man überall das gleiche findet.

Christian Seitz

Schwierige Frage. Ich komm' so eigentlich ganz gut zurecht. Was ich verbessern würde, wäre eventuell die Farbpalette bzw. das Farbraum-Management. Man kann im Moment noch ganz leicht RGB und CMYK Farben vermischen, was ich weder im Webdesign noch bei Print-Projekten sinnvoll finde. Die Exportfunktion für Grafiken würde ich verbessern oder sogar eine Slice-Funktion einführen.

Weitere Features würde ich mich im Moment gar nicht fordern trauen, da ich mich noch nicht mal richtig mit den ganzen neuen Features von InDesign CS6 auseinander gesetzt habe – ausgenommen die PDF-Formularfunktion. Die find ich schon erste Sahne. ;-)

Zum Thema

A Real Web Design Application
Creating Wireframes And Prototypes With InDesign – Smashing Magazine
Infografik zur Kategorisierung der Adobe-Produkte - Interessant ist, dass Adobe sowohl Photoshop als auch Fireworks unter "Bildbearbeitung" einsortiert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

Jonas Hellwig — Tue, 06 Sep 2011 21:33:41 +0000

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Wie wurde getestet?

Ich habe mir für meinen Test drei prominente Dienste ausgesucht: JPEGmini, PunyPNG und Yahoo Smush.it. Bei allen Diensten habe ich mir die Standard-Funktionalität ohne Benutzeraccount angeschaut. Es ging mir in erster Linie darum, die Dateigröße der optimierten Grafik zu beurteilen. Erweitere Funktionen wie die Verwaltung von Alben, der Upload zu Online-Bilddatenbanken etc. waren für mich nebensächlich.

Ich habe für meinen Test vier JPG-Dateien und drei PNGs erstellt und bei allen Diensten hochgeladen. Bei diesen Dateien handelt es sich um typische Grafiken die ich im Web verwende. GIF-Dateien kommen aufgrund ihrer schlechten Kompression generell nicht in Frage.

Das Ergebnis: JPEGmini für JPGs, Smush.it als Allrounder

Das Ergebnis hat mich ehrlich gesagt selbst überrascht. JPEGmini erzeugte bei JPG-Grafiken die mit Abstand kleinsten Dateien. Allerdings muss erwähnt werden, dass bei JPEGmini sehr geringe optische Unterschiede erkennbar sind. Diese sichtbare Kompression ist vor allem bei scharfen Kanten erkennbar - kann meiner Meinung nach allerdings vernachlässig werden.
PunyPNG und Smush.it erzeugten bei der JPG-Kompression etwa gleich große Dateien. Ein großer Nachteil von PunyPNG ist jedoch die Upload-Begrenzung auf 150KB. Mit einem Pro-Account kann die erlaubte Dateigröße auf 500KB erhöht werden.

Bei der Kompression von PNG-Files scheidet JPEGmini aus. Hier können nur JPG-Dateien komprimiert werden. PunyPNG und Smush.it erlauben die Kompression von PNG und erzeugten erneut vergleichbare Ergebnisse. Ärgerlich ist allerdings auch hier der geringe Upload von PunyPNG.

Ausgangsbild	JPEGmini	PunyPNG	Smush.it
336 KB (*.jpg)	119 KB	Upload nur bis 150 KB	324 KB
270 KB (*.jpg)	57 KB	Upload nur bis 150 KB	258 KB
78 KB (*.jpg)	23 KB	71 KB	69 KB
115 KB (*.jpg)	25 KB	106 KB	106 KB
561 KB (*.png)	Upload nur von JPG-Dateien	Upload nur bis 150 KB	516 KB
147 KB (*.png)	Upload nur von JPG-Dateien	135 KB	135 KB
49 KB (*.png)	Upload nur von JPG-Dateien	45 KB	45 KB

Benutzerfreundlichkeit

Neben der reinen Qualität der Ergebnisse spielt auch die Benutzerfreundlichkeit eines Dienstes eine große Rolle.

Bei PunyPNG und bei Smush.it können auch ohne Benutzeraccount mehrere Dateien parallel hochgeladen und komprimiert werden. PunyPNG begrenzt diese Zahl jedoch auf 15 Dateien. JPEGmini erlaubt ohne Account nur den Upload von einzelnen Dateien, was den Workflow durchaus behindert.

Der Download der komprimierten Dateien sieht ebenfalls sehr unterschiedlich aus. Sofern nur eine Datei hochgeladen wird, stellt PunyPNG die Datei unter dem Original-Dateinamen zur Verfügung. Die Ursprungsdateien können also einfach überschrieben werden. Smush.it stellt immer ein ZIP-Dokument zur Verfügung und JPEGmini ergänzt den Dateinamen um den Suffix "_mini". Insbesondere der Suffix ist natürlich sehr unpraktisch, da die Dokumente manuell umbenannt werden müssen.

Fazit

Tja - welcher Dienst soll es nun sein? PunyPNG scheidet für mich ganz klar aus. Zwar war ich bisher ein großer Fan dieses Dienstes, habe aber jetzt die Grenzen kennengelernt. PunyPNG schränkt den Benutzer einfach an zu vielen Stellen ein: Maximal 15 Dateien im Upload bei maximal 150 KB Dateigröße sind zu schwach. Vor allem, da die optimierten Dateien ähnlich groß sind wie bei Smush.it.

Smush.it lässt sich hingegen optimal in meinen Workflow integrieren. Es können beliebige Grafikformate hochgeladen werden, es existiert keine wirkliche Begrenzung in der Upload-Größe und es ist auch möglich mehrere Dateien parallel hochzuladen. Die Ausgabe erfolgt zwar als ZIP-Archiv, innerhalb des Archivs werden allerdings die ursprünglichen Dateinamen beibehalten. Für Smush.it existiert sogar ein WordPress-Plugin das Dokumente beim Upload in die Mediathek automatisch komprimiert. Praktischer geht es kaum noch.
JPEGmini hat mich überrascht. Zwar ist das Tool nicht besonders komfortabel, die Dateigröße ist allerdings unschlagbar gering. Ich werde mit Sicherheit in Zukunft meine JPG-Layout-Grafiken mit JPEGmini manuell komprimieren.

Update: Fehlerhafte Skalierung im Responsive Webdesign

Ich habe noch einen schweren Bug im mobilen Safari entdeckt. Nachdem ich die Hintergrundgrafik meiner Seite mit JPEGmini komprimiert hatte, wurde die dem body zugewiesene Grafik auf dem iPad falsch skaliert. Ich gehe davon aus, dass es mit dem nach der Kompression fehlenden Datei-Header und dem im Responsive Design festgelegten Skalierungsfaktor zu tun hat. Ihr solltet diesen Fehler im Hinterkopf behalten und nach einer Optimierung kontrollieren. Bei Elementen mit einer zugewiesenen Breite (wie dem Footer-div) trat dieses Problem nicht auf.

Noch mehr Tools zur Bildkompression

Wenn ihr noch weitere Tools zum Komprimieren von Bildern sucht, schaut in folgende Liste:

Tools zum Thema "Image Compression"

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Fireworks-Grafiken für lau: Fireworks Labs

Jonas Hellwig — Fri, 27 May 2011 07:25:17 +0000

Adobe Fireworks ist für Websites und Interfaces durchaus eine Photoshop-Alternative. Photoshop konzentriert sich mehr auf den illustrativen, fotografischen bzw. Composing-lastigen Bereich. Fireworks hingegen integriert Elemente die wir in ähnlicher Form bereits aus Illustrator und CSS kennen. Je nach Vorliebe und Projekt kann also Photoshop oder Fireworks die Nase vorne haben.
Mit FireworksLabs ist nun eine neue Quelle für hochwertige Fireworks-Downloads an den Start gegangen.

Auf FireworksLabs werden regelmäßig Grafiken aus dem Bereich Webdesign veröffentlicht und zum gratis-Download angeboten. Das Angebot ähnelt ein wenig der Photoshop-Quelle 365psd.com, kann aber von der Qualität der angebotenen Grafiken absolut mithalten. Auch auf FireworksLabs veröffentlichen verschiedene Autoren Webdesign-Ressourcen.

Fireworks Labs

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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

Jonas Hellwig — Wed, 14 Apr 2010 18:44:24 +0000

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.

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.

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.

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

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.

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.

Und noch einmal alle Programmicons im direkten Vergleich.

Ü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.

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.

The CS6 Desktop Brand System

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

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.