Weitere ähnliche Inhalte Ähnlich wie 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
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
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 %)
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)
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
43. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
44. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.