ICON Design at Adobe       Bettina Reinemann | Senior Experience Design, Lead© 2013 Adobe Systems Incorporated. All Rights...
Icon Design in Hamburg  §   Adobe       §   Experience Design Team - kurz: XD            § Brand              & Icon Te...
Icons                                      kennen und benutzen heutzutage                                                 ...
Ein Icon...                                     informiert                                     übersetzt                  ...
Wo helfen Icons?                                     ...wo Worte zuviel Platz                     ...zum schnelleren      ...
Ein Icon zeichnen                                  ...ist die Kunst                                              ein Objek...
Die Anfänge...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   7ResEdit auf dem Mac, noch v...
Die Anfänge...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   8Alle icons wurden als nativ...
Die Anfänge...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   9Einführung der 32bit Farbti...
Evolution in kleinen Schritten...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   10CS 5: V...
...manchmal zu großen??© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   11
Icons für Adobe...                                     Wieviele Icons befinden sich auf dieser                            ...
Icons für Adobe...                                                            89© 2013 Adobe Systems Incorporated. All Rig...
Icons für Adobe... Ps CS6 tools Ai CS6 tools  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ...
Icons für Adobe... Ps CS6 tools Ai CS6 tools  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ...
Icons für Adobe...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   16wo es früher ein icon ...
Icons für Adobe...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   17...plus Variationen fü...
Icons für Adobe...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   18Touch Icons:8 Standard...
Icons für verschieden Produktgruppen - “Icon Themes”                                                                  Prof...
Konsistenz in der Bildsprache                                                                              Photoshop   Pho...
Der Stilomat...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   21...Knopf drücken und los...
Der Stilomat...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   22(Animation)
“One shape fits All”                                                                              Professional            ...
“One shape fits All”                                                                                Professional          ...
Invertieren - Ja oder Nein© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   25
Invertieren...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   26
Invertieren...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   27
Erhitzte Gemüter...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   28
Skalieren  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   29(Animation)
Skalieren  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   30Ein Beispiel:Obwohl die Ausgang...
Skalieren  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   31Pfade eines Vektorbildes
Skalieren  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   32grün = 200 % (bzw. 50 %)
Skalieren© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   33
Skalieren© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   34
Skalieren  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   35Vektorgrafiken in Pixelformate e...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   36(Animation)
Bestellung neuer Icons...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   37
Wer von Adobe bestellt                                                      bei uns?                                      ...
Suchen...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   39...im eigenen Bestand - vermeid...
Neue Icons...  © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   40Unterschiedlichen Formen - ...
Was ist zu beachten              Welche Produkt Gruppe              Wo wird das icon im UI eingesetzt              Erlaubt...
Einmal andersrum:© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   42
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   43
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Nächste SlideShare
Wird geladen in …5
×

IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte

848 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
848
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte

  1. 1. ICON Design at Adobe Bettina Reinemann | Senior Experience Design, Lead© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. Icon Design in Hamburg § Adobe § Experience Design Team - kurz: XD § Brand & Icon Team © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2Adobe: Gründung Dezember 1982 von Charles Geschke und John WarnockHauptsitz San Jose, Californien, USA -- 12.000 Mitarbeiter weltweitDas 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, DeutschlandXD besteht nicht nur aus Designern - es gibt ebenso ein Team an Entwicklern, sowie die Bereiche User Research und ProgrammManagementDas 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 siehtein 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. 3. Icons kennen und benutzen heutzutage Alle© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 4. Ein Icon... informiert übersetzt warnt beschreibt© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  5. 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. 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. 7. Die Anfänge... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7ResEdit 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. 8. Die Anfänge... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8Alle icons wurden als native Formate für das jeweilige Betriebssystem erstellt - für den Mac also in ResEdit
  9. 9. Die Anfänge... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9Einfü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 SchlagschattenPhotoshop statt ResEdit, aber immernoch gepixeltAusgeliefert und eingebaut wurden fortan PNG Bildformate (zum größten Teil)
  10. 10. Evolution in kleinen Schritten... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10CS 5: Vektorgrafiken als QuelldateiGelegenheit den Stil zu überarbeitenBis heute wird er weiter optimiert
  11. 11. ...manchmal zu großen??© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  12. 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. 13. Icons für Adobe... 89© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  14. 14. Icons für Adobe... Ps CS6 tools Ai CS6 tools © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14Eine Übersicht der gesamten Photoshop und Illustrator Werkzeuge
  15. 15. Icons für Adobe... Ps CS6 tools Ai CS6 tools © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15Nur 1 Drittel etwa sind Überschneidungeninsgesamt hat jedes dieser beiden Programme 800+ icons!
  16. 16. Icons für Adobe... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16wo es früher ein icon gab -- sind es heute 4
  17. 17. Icons für Adobe... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17...plus Variationen für andere Bereiche
  18. 18. Icons für Adobe... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18Touch Icons:8 Standard Größen für eine Vielzahl an Auflösungen und sämtlicher Betriebsysteme
  19. 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. 19Produktgruppen - Benutzer-Zielgruppen - STIL Gruppen (themes)Wo es paßt werden die selben Grundformen (shapes) als Basis genommenEine Produktgruppe = ein gemeinsamer StilMetaphern unabhängig und weitestgehend identisch
  20. 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. 21. Der Stilomat... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21...Knopf drücken und los...
  22. 22. Der Stilomat... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22(Animation)
  23. 23. “One shape fits All” Professional heller Untergrund© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  24. 24. “One shape fits All” Professional dunkler Untergrund © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24Die Stile (siehe swatches) sind genau die selben wie für hell!
  25. 25. Invertieren - Ja oder Nein© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
  26. 26. Invertieren...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  27. 27. Invertieren...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. Erhitzte Gemüter...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  29. 29. Skalieren © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29(Animation)
  30. 30. Skalieren © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30Ein Beispiel:Obwohl die Ausgangsform ein VEKTOR icon war, sieht die Verdopplung nicht sauber ausAndersrum ist das Ergebnis auch nicht einwandfreiVektoren werden optimiert um als Pixel Bild best möglich auszusehen
  31. 31. Skalieren © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31Pfade eines Vektorbildes
  32. 32. Skalieren © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32grün = 200 % (bzw. 50 %)
  33. 33. Skalieren© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  34. 34. Skalieren© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  35. 35. Skalieren © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35Vektorgrafiken in Pixelformate exportieren - flatten(Animation)
  36. 36. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36(Animation)
  37. 37. Bestellung neuer Icons...© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
  38. 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. 39. Suchen... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39...im eigenen Bestand - vermeiden unnötiger VariantenExterne Online Suchmaschinen - welche Metaphern gibt es, welche sind am häufigsten, welche scheinbar bekannt...
  40. 40. Neue Icons... © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40Unterschiedlichen Formen - hier: Pfeile - können verschiedene Gründe haben:Programme wurden noch nicht von uns bearbeitetViele Designer...Oder neue Produkte, die von Adobe gekauft wurden...
  41. 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. 41Produkt Gruppe: Zugehörigkeit bedingt StilrichtungPlazierung in der Benutzeroberfläche bestimmt die Größe und gegebenfalls die MachartKontext AnalyseInternationale Nutzung
  42. 42. Einmal andersrum:© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
  43. 43. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  44. 44. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×