IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte
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
IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte
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
More Related Content
Viewers also liked
Viewers also liked(20)
Similar to IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte
Similar to IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte (20)
IxDA HH Event: Einblick in die Icon-Entwicklung für alle (!) Adobe Produkte
- 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.