Die Entwicklung aller Icons für die gesamte Adobe Produktpalette findet in unseren schönen Stadt Hamburg in einem kleinen Team unter der Leitung von Bettina Reinemann statt. // Über die Präsentation Adobe bietet eine breite Produktpalette an Software an, für ganz unterschiedliche Benutzergruppen und verschiedenste Geräte - von "desktop" bis "mobile". Für diese Bandbreite Icons zu gestalten ist eine große Herausforderung: sie sollen möglichst eine gemeinsam Sprache sprechen; hinsichtlich der Metaphern und Symbolik, sowie des Stils, als auch der Größen. Bei tausenden von Icons den Überblick zu behalten und eine gewisse Konsistenz zu wahren, ist eine wesentliche Aufgabe des Icon Teams bei Adobe. Aber nicht nur die Konsistenz ist zu wahren, auch die verschiedenen Kulturen und deren Interpretation von Symbolen sind zu berücksichtigen. // Über die Referentin Bettina Reinemann ist Senior Experience Design Lead bei Adobe Systems Inc. und leitet das Icon Team in der Hamburger Niederlassung von Adobe. Bettina ist Diplom-Designerin (Illustratorin), sammelte internationale Erfahrung als freie Illustratorin und hat sich 2001 auf Icon Gestaltung für (Adobe-) Software spezialisiert. Bettinas Profil auf LinkedIn: de.linkedin.com/pub/bettina-reinemann/1/860/155 // Wann 12. Februar 2013 | 19.00 Uhr // Wo Adobe Systems Engineering GmbH Große Elbstr. 27, 22767 Hamburg // Photos http://www.mprove.de/art/13/ixdahh-icons.html

1. ICON Design at Adobe
Bettina Reinemann | Senior Experience Design, Lead
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. Icon Design in Hamburg
§ Adobe
§ Experience Design Team - kurz: XD
§ Brand & Icon Team
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
Adobe: Gründung Dezember 1982 von Charles Geschke und John Warnock
Hauptsitz San Jose, Californien, USA -- 12.000 Mitarbeiter weltweit
Das Experience Design Team (XD) besteht aus um die 100 Mitarbeiter alleine in den USA , hauptsächlich in San Francisco -
und weiteren Kollegen in China, Indien, Rumänien, Schweiz, Holland, Deutschland
XD besteht nicht nur aus Designern - es gibt ebenso ein Team an Entwicklern, sowie die Bereiche User Research und Programm
Management
Das Brand & Icon Team ist zum einen verantwortlich für das Adobe Branding - sprich das Erscheinungsbild der einzelnen Programme,
wie zum Beispiel die App. Icons, und - das gehört zur Aufgabe meines Teams - die Gestaltung der sogenannten workflow icons, die sieht
ein Benutzer nachdem er ein Adobe Programm gestartet hat und damit arbeitet.
Die mittleren vier Köpfe in der Illustration - ja, das ist das komplette Icon Team.
Eingerahmt und toll unterstützt von einer Programm Managerin und einem Entwickler.

3. Icons
kennen und benutzen heutzutage
Alle
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3

4. Ein Icon...
informiert
übersetzt
warnt
beschreibt
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4

5. Wo helfen Icons?
...wo Worte zuviel Platz ...zum schnelleren
einnehmen würden Auffinden in Listen
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5

6. Ein Icon zeichnen
...ist die Kunst
ein Objekt oder eine Idee auf das Wesentliche zu
reduzieren und das mit nur wenigen Strichen oder Formen.
etwas Abstraktes bildlich darzustellen
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6

7. Die Anfänge...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
ResEdit auf dem Mac, noch vor MacOs X :)
Hier: das Illustrator Programm Icon in 8 bit (256 Farben)
Bei 4 bit sind es nur 16 Farben...

8. Die Anfänge...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
Alle icons wurden als native Formate für das jeweilige Betriebssystem erstellt - für den Mac also in ResEdit

9. Die Anfänge...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Einführung der 32bit Farbtiefe für Icons und UI Elemente -- Millionen von Farben und den Alpha-Kanal:
Transparenz und Schlagschatten - die neuen Stilmittel und nicht mehr wegzudenken (siehe Pfeil)
Icons, Paletten, Dialoge... alle bekamen Schlagschatten
Photoshop statt ResEdit, aber immernoch gepixelt
Ausgeliefert und eingebaut wurden fortan PNG Bildformate (zum größten Teil)

10. Evolution in kleinen Schritten...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
CS 5: Vektorgrafiken als Quelldatei
Gelegenheit den Stil zu überarbeiten
Bis heute wird er weiter optimiert

11. ...manchmal zu großen??
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11

12. Icons für Adobe...
Wieviele Icons befinden sich auf dieser
(verkleinerten) Benutzeroberfläche?
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12

13. Icons für Adobe...
89
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13

14. Icons für Adobe...
Ps CS6 tools
Ai CS6 tools
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
Eine Übersicht der gesamten Photoshop und Illustrator Werkzeuge

15. Icons für Adobe...
Ps CS6 tools
Ai CS6 tools
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
Nur 1 Drittel etwa sind Überschneidungen
insgesamt hat jedes dieser beiden Programme 800+ icons!

16. Icons für Adobe...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
wo es früher ein icon gab -- sind es heute 4

17. Icons für Adobe...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
...plus Variationen für andere Bereiche

18. Icons für Adobe...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
Touch Icons:
8 Standard Größen für eine Vielzahl an Auflösungen und sämtlicher Betriebsysteme

19. Icons für verschieden Produktgruppen - “Icon Themes”
Professional Touch / Mobile
Consumer Acrobat Familie; Connect Pro
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
Produktgruppen - Benutzer-Zielgruppen - STIL Gruppen (themes)
Wo es paßt werden die selben Grundformen (shapes) als Basis genommen
Eine Produktgruppe = ein gemeinsamer Stil
Metaphern unabhängig und weitestgehend identisch

20. Konsistenz in der Bildsprache
Photoshop Photoshop
Elements touch
2012 2012
CS 5 CS 6
2010 2012
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20

21. Der Stilomat...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
...Knopf drücken und los...

22. Der Stilomat...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
(Animation)

23. “One shape fits All”
Professional
heller Untergrund
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23

24. “One shape fits All”
Professional
dunkler Untergrund
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Die Stile (siehe swatches) sind genau die selben wie für hell!

25. Invertieren - Ja oder Nein
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25

26. Invertieren...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26

27. Invertieren...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27

28. Erhitzte Gemüter...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28

29. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
(Animation)

30. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Ein Beispiel:
Obwohl die Ausgangsform ein VEKTOR icon war, sieht die Verdopplung nicht sauber aus
Andersrum ist das Ergebnis auch nicht einwandfrei
Vektoren werden optimiert um als Pixel Bild best möglich auszusehen

31. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
Pfade eines Vektorbildes

32. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
grün = 200 % (bzw. 50 %)

33. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33

34. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34

35. Skalieren
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
Vektorgrafiken in Pixelformate exportieren - flatten
(Animation)

36. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
(Animation)

37. Bestellung neuer Icons...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37

38. Wer von Adobe bestellt
bei uns?
Programm Manager
Experience Designer
Entwickler
oder auch wir selber :)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38

39. Suchen...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
...im eigenen Bestand - vermeiden unnötiger Varianten
Externe Online Suchmaschinen - welche Metaphern gibt es, welche sind am häufigsten, welche scheinbar bekannt...

40. Neue Icons...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
Unterschiedlichen Formen - hier: Pfeile - können verschiedene Gründe haben:
Programme wurden noch nicht von uns bearbeitet
Viele Designer...
Oder neue Produkte, die von Adobe gekauft wurden...

41. Was ist zu beachten
Welche Produkt Gruppe
Wo wird das icon im UI eingesetzt
Erlaubt der Kontext Reduktion
Muß es international lesbar sein
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
Produkt Gruppe: Zugehörigkeit bedingt Stilrichtung
Plazierung in der Benutzeroberfläche bestimmt die Größe und gegebenfalls die Machart
Kontext Analyse
Internationale Nutzung

42. Einmal andersrum:
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42

43. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43

44. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.