Roland Weigelt UI / UX Einführung für Entwickler. Teil NET User Group Rhein/Neckar
|
|
|
- Elisabeth Lorenz
- vor 6 Jahren
- Abrufe
Transkript
1 Roland Weigelt UI / UX Einführung für Entwickler Teil NET User Group Rhein/Neckar
2 Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler seit Januar User Experience Specialist Privat u.a..net Community (.NET User Group Bonn-to-Code.Net, dotnet Cologne) *.cs, *.psd, *.wmv, *.pptx
3 Entwickler, kein Designer
4 Wie erstelle ich grandios fantastische User Interfaces?
5 Wie erstelle ich grandios fantastische User Interfaces?
6 Wie erstelle ich brauchbare User Interfaces?
7
8 Design
9 Gutes Design?
10 Gutes Design?
11
12
13
14 Crash-Kurs: Visuelles Design
15
16 Visuelle Wahrnehmung
17
18
19 Foveal Peripher
20 Foveale Wahrnehmung Hohe räumliche Auflösung Sehr geringer Winkelbereich Periphere Wahrnehmung Hohe zeitliche Auflösung Unscharf, räumlich verzerrt
21
22
23
24
25
26 Augenbewegung Arbeitsspeicher Erinnerungen Mustererkennung
27 Gestalttheorie
28 Gestalttheorie Frage: Nach welchen Gesetzen verbindet der Mensch einzeln wahrgenommene Elemente zu neuen Gestalten mit eigenen, ganzheitlichen Eigenschaften?
29
30
31
32
33 Gestaltgesetze?
34 Gestaltgesetze Formulierte Beobachtungen Liefern keine Erklärung Phänomene selten isoliert, Konkurrenz untereinander
35 Gestaltgesetze Gesetz der Prägnanz Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Kontinuität Gesetz der Geschlossenheit Gesetz der gemeinsamen Bewegung Gesetz der fortgesetzt durchgehenden Linie Gesetz der gemeinsamen Region Gesetz der Gleichzeitigkeit Gesetz der verbundenen Elemente Quelle: Wikipedia
36 Gestaltgesetze Gesetz der Prägnanz Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Kontinuität Gesetz der Geschlossenheit Gesetz der gemeinsamen Bewegung Gesetz der fortgesetzt durchgehenden Linie Gesetz der gemeinsamen Region Gesetz der Gleichzeitigkeit Gesetz der verbundenen Elemente Quelle: Wikipedia
37 Gesetz der Ähnlichkeit Gleiche oder ähnliche Elemente werden als zusammengehörig wahrgenommen.
38 Ähnlichkeit
39 Gesetz der Nähe Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.
40 Nähe
41
42 1 2 3 A B C D E F I 0 J G H
43 Nähe Max Mustermann Frankfurt John Doe New York
44 Sozusagen die Firmware der menschlichen Wahrnehmung
45 In komplexen Situationen nicht immer 100% vorhersehbar...
46 ...aber gute Vorhersage, was nicht funktioniert!
47
48 Gestaltungsprinzipien
49 Anforderungen an brauchbares Visuelles Design
50 Konsistenz Ordnung Ausgewogenheit
51 Oder auch: Aus einem Guss
52 Ausrichtung
53 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung...allerdings nicht auf dieser Folie!
54 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung
55 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung
56 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet varius sapien. Quisque ut convallis orci. Pellentesque id urna id nisi ultrices volutpat. Aenean in sapien odio, a tristique velit. Quisque semper mollis ante at porta. Curabitur in ligula eget est gravida ultrices. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a eros ac ligula pretium venenatis ut sit amet turpis. Fusce mollis augue sit amet lacus pulvinar sit amet tincidunt nunc pellentesque. Fusce vitae tellus libero. Nullam tempor condimentum urna vel imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lectus dolor, dapibus mattis erat. Suspendisse rhoncus vehicula enim ut malesuada. Ut venenatis cursus est vitae interdum. Sed sollicitudin lobortis nisi sollicitudin pellentesque. Donec ac massa nunc, sed auctor orci. Donec facilisis ullamcorper leo, eget cursus lectus pretium eu. Suspendisse venenatis orci vel mauris mattis ultrices. Pellentesque suscipit, urna quis bibendum mattis, tellus neque porttitor dolor, bibendum gravida nisl justo eleifend nibh. Integer nec augue in nunc pretium facilisis. Donec tincidunt rutrum tellus, vitae convallis nulla tincidunt in. Aenean luctus porta enim, vitae feugiat nisl rutrum ut.
57 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet varius sapien. Quisque ut convallis orci. Pellentesque id urna id nisi ultrices volutpat. Aenean in sapien odio, a tristique velit. Quisque semper mollis ante at porta. Curabitur in ligula eget est gravida ultrices. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a eros ac ligula pretium venenatis ut sit amet turpis. Fusce mollis augue sit amet lacus pulvinar sit amet tincidunt nunc pellentesque. Fusce vitae tellus libero. Nullam tempor condimentum urna vel imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lectus dolor, dapibus mattis erat. Suspendisse rhoncus vehicula enim ut malesuada. Ut venenatis cursus est vitae interdum. Sed sollicitudin lobortis nisi sollicitudin pellentesque. Donec ac massa nunc, sed auctor orci. Donec facilisis ullamcorper leo, eget cursus lectus pretium eu. Suspendisse venenatis orci vel mauris mattis ultrices. Pellentesque suscipit, urna quis bibendum mattis, tellus neque porttitor dolor, bibendum gravida nisl justo eleifend nibh. Integer nec augue in nunc pretium facilisis. Donec tincidunt rutrum tellus, vitae convallis nulla tincidunt in. Aenean luctus porta enim, vitae feugiat nisl rutrum ut.
58 Wichtigstes Hilfmittel für eine einheitliche Ausrichtung: Gitter (Grid)
59
60
61
62
63
64 Konstruktion nach dem goldenen Schnitt
65 Kein Gitter, aber einheitliche Abstände
66 Kein Gitter, aber einheitliche Abstände
67 Dominanz
68 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig
69 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig
70 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig
71 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig
72 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig
73 Dominanz ergibt sich, wenn einem oder mehreren Elementen durch Farbe,, Form, oder Größe Ausrichtung besonderes Gewicht gegeben wird
74 ... besonderes Gewicht...
75 ... besonderes Gewicht...
76 Wettrüsten vermeiden! Whitespace
77
78 ... besonderes Gewicht...
79 Visuelles Gewicht
80
81
82
83 Intensität Farbe Größe Detailgrad
84 Visuelle Hierarchie
85 Fakt: Die reale Welt ist komplex
86 Ideal Lies mich
87 Real Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
88 Es kann nicht alles gleich wichtig sein
89 Also: Priorisieren
90 Alles gleich wichtig Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
91 Priorisiert Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
92 Konkretes Beispiel Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden
93 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Auffälligkeit/Dominanz durch Intensität...
94 Visuelle Hierarchie DIESER TEXT IST ECHT SUPERWICHTIG Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Form...
95 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Größe...
96 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...oder durch Kombination.
97 Whitespace Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Whitespace verstärkt die Wirkung
98 Nähe Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Nähe drückt Zugehörigkeit aus
99 Beispiel: Team-Aufstellung
100 Telekom Baskets Bonn Team 2009/2010 Team 2010/2011 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann
101 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann
102 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Ausrichtung
103 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Ausrichtung
104 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Dominanz
105 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Hierarchie
106 Telekom Baskets Bonn 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Hierarchie
107 Telekom Baskets Bonn 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann
108 Telekom Baskets Bonn Team 2009/2010 Team 2010/2011 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann
109 Telekom Baskets Bonn 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann
110
111 Zusammenfassung Ausrichtung um Kanten zu schaffen (ohne sie zu zeichnen) Dominanz um wichtige Einstiegspunkte zu markieren Hierarchien für verständliche Wichtigkeitsabstufung
112 Zusammenfassung (Forts.) Whitespace für Übersicht, Lesbarkeit (und Wertigkeit) Visuelles Gewicht beachten und in Balance halten
113 Fragen?
114 Also: Alles ganz einfach...
115 Regeln beachten Gefälliges Design Positive Emotionen YOU ROCK!!!
116 ! $ $ $!!
117 DANGER! USER DETECTED Critical Situation, Threat Level ALPHA 46 4a d6 dd b5 c a 05 c a1 fc 92 a6 4b b3 0a e d7 4a af 7e 10 4b b c1 53 5e 80 f6 a7 7d 22 4a b1 83 c1 4f b c3 ef aa e7 eb fb 4d b2 13 8e f3 87 f6 93 f4 b7 4b 8e a d7 76 d6 4a 5c bb 51 7b b3 11 ec d2 6c b4 2b a4 e7 a a 7a 83 c9 c c9 f7 f1 92 6d 8e 1d bf 9f ac ce
118 Unser Problem: Anwender sind Menschen...
119 ...keine mobilen Bildverarbeitungs- systeme
120 ängstlich überheblich ungeduldig unlogisch unvernünftig ungerecht
121 Klick, Klick, Klick, Dreckstool!
122 Ganzheitlicher Ansatz
123 User Experience
124 User Experience Nicht einfach die coole neue Art User Interface zu sagen Das Gesamterlebnis eines Nutzers bei Verwendung eines Produktes oder Systems
125 UX Design: Berührungspunkte GUI Design Visual/Graphic Design Usability Information Architecture Information Design Psychologie
126 UX Design: Berührungspunkte GUI Design Visual/Graphic Design Usability Information Architecture Information Design Psychologie
127 Empathie
128 Mitgefühl
129 Wird der Anwender das verstehen?
130 Wer ist eigentlich der / die AnwenderIn?
131 Einsteiger vs. Profis
132 Gelegenheits-User vs. Power-User
133 Profis als Gelegenheits-User vs. Einsteiger als Power-User
134 ?
135 Rollen
136 Rollen helfen festzulegen, wer was in der GUI braucht
137 Leser Autor Administrator
138 Rollen sagen aber nichts über das Verhalten aus
139 Zielgruppen
140 Zielgruppen werden durch Clusterung von Eigenschaften definiert
141 Zielgruppen wecken aber nur schwer Emotionen beim Entwickler
142 85,9% der weiblichen Waisenkinder unter 12 Jahren wünschen sich ein Pony* * Diese Aussage ist wie 38,3% aller Statistiken frei erfunden
143 Lisa (11 Jahre) hat ihre Eltern verloren und wünscht sich ein Pony
144 Personas
145 Persona Virtuelle Person als Stellvertreter einer Zielgruppe Sehr genaue Beschreibung vermittelt anschauliches Bild
146 Wird der Anwender das verstehen?
147 Wird die Zielgruppe der Führungskräfte mit begrenzten IT-Kenntnissen das verstehen?
148 Wird Heinrich das verstehen?
149 Heinrich Abteilungsleiter (56) 2 Kinder, Haus am Stadtrand Wenig Erfahrung mit Office Im Zweifelsfall eher vorsichtig Wichtiger Multiplikator
150 Sabine Sachbearbeiterin (26) Single, Wohnung in der Stadt Office + Business Apps im Intranet, privat Social Apps Wurschtelt sich in Neues rein
151 Beispiel
152 Was Entwickler entworfen haben
153 Was Anwender davon sehen
154 Heinrich Hmm... klingt kompliziert... (Telefon klingelt) Klickt Abbrechen
155 Sabine Muss ich das alles lesen... (Telefon klingelt) Sieht nicht soo gefährlich aus, Gespräch könnte dauern Klickt OK
156 Besser:
157 Personas Erleichtern die Kommunikation Prüfstein bei Design- Entscheidungen
158 Personas Nicht immer einfach Spezielle Personas: Echte Zielgruppendaten notwendig Einblick in spezielle Abläufe / Philosophie einer Firma
159 Empathy Map Brainstorming-Technik zum schnellen Beschreiben einer Persona Ziel: Schnell und plausibel Check durch Diskussion
160 Was denkt und fühlt sie? Was ist ihr wichtig? Wovor hat sie Angst? Was würde sie freuen? Was hört sie? Was sagen Freunde? Was sagt der Chef? Was sagen andere wichtige Leute? Persona Was sieht sie? Umfeld Freunde Wohnsituation Marktangebot Was sagt sie, wie handelt sie? Verhalten in der Öffentlichkeit? Einstellung gegenüber anderen? Gesprächsthemen? Pain Konkrete Ängste, Probleme, Hindernisse Gain Was will sie, wo will sie hin? Was würde sie als Erfolg werten?
161 Szenario Eine plausible Geschichte über eine Persona, die ein (zukünftiges) Produkt oder Feature in einer bestimmten Situation verwendet.
162 Typische Story-Elemente Hauptdarsteller Konflikt Handlung Auflösung
163 Beispiel: Franks erste Woche Frank, Berufseinsteiger in der Software-Entwicklung Mögliche Geschichten Kollegen kennenlernen Ansprechpartner finden Infrastruktur nutzen
164 Franks erste Woche Franks Ziel: Dokument drucken Konflikt: Drucker noch nicht eingerichtet Handlung: Wie Frank herausfindet, welcher Drucker im Netzwerk der richtige ist
165 Franks erste Woche Handlung Frank erinnert sich an URL Intranet-Website erkennt Frank als neuen Mitarbeiter und bietet typische Hilfestellungen an Frank erfährt automatisch den für seine Abteilung richtigen Drucker
166 Franks erste Woche Auflösung Frank kann den Drucker einrichten und das Dokument drucken
167 Szenarien vs. Umsetzung Nicht zu früh an konkrete Lösungen denken Mit Happy Day beginnen, dann Probleme betrachten Ruhig erst einmal ein bisschen rumspinnen
168 Szenarien führen zu Konkreten Anforderungen Frank muss irgendwann drucken Eigenschaften einer erstrebenswerten Lösung Frank kann den Drucker selbst, ohne viel Aufwand einrichten
169 Nächste Schritte Betrachtung anderer Personas Wenn es Konflikte gibt: Kann man sie lösen? Wer hat höhere Priorität? Skizzieren des Ablaufs, nach und nach detaillierter
170 Und wenn man die Zielgruppe gar nicht kennt?
171 Aktivitäten
172 Fakt: Menschen passen sich an
173 Alles eine Frage der Perspektive
174 Anwender wollen keine Software bedienen
175 Anwender wollen ihre Aufgaben erledigen
176 Problem:
177 Alles was man als Entwickler dem Anwendern zeigt, ist ein potentielles Hindernis!
178 Dialoge Popups Eingaben...einfach alles
179 Hindernisse beseitigen Reale Szenarien betrachten Nicht: UI Wrapper auf die API Abläufe rundlutschen Weniger Entscheidungen Eingaben erleichtern Gute Vorgaben Vorschlagslisten...
180 Mentales Modell
181
182
183 Mentales Modell Entsteht im Kopf der Anwender Versuch, Verhalten (der GUI) erklärbar nachvollziehbar vorhersagbar zu machen
184
185
186 Mentale Modelle sind...
187 persönlich
188 wechselnd
189 unvollständig
190 häufig falsch
191 Anwender machen sich ein Modell - ob es uns passt oder nicht
192 Deshalb: Modellbildung in die richtigen Bahnen lenken!
193 Beispiel Windows Phone
194 Windows Phone Sample
195 Windows Phone
196
197 FRAGEN?
198 Roland Weigelt UI / UX Einführung für Entwickler Teil NET User Group Rhein/Neckar
199
200 Entwurfsmuster (engl. Design Patterns) Bewährte generische Lösungsansätze für immer wiederkehrende Entwurfsprobleme
201 Raumschiff Enterprise
202 Raumschiff Enterprise steckt voller Design Patterns!
203 Beispiel Problemstellung: Den Zuschauern soll durch den Tod eines Team-Mitglieds deutlich gemacht werden, dass der Alien-Planet gefährlich ist Rahmenbedingung: Wöchentliche laufende Serie
204 Pattern Red Shirt Disease Lösung: Das Opfer ist beliebig austauschbar ( Rothemd ) Statistik * 430 Besatzungsmitglieder davon 59 getötet davon 43 Rothemden 72,9% * Quelle:
205 UI Patterns
206 MVC MVP MVVM
207 Architektonischer Umgang mit UI-Elementen
208 Beispiele für UI Patterns
209 Master - Detail
210 Master - Detail
211 Master - Detail
212 Master - Detail Master Detail
213 Master - Detail
214 Master - Detail
215 Master - Detail
216 Master - Detail Master Detail
217 Ribbon
218 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Erste Ebene - Gruppierung nach Benutzungskontexten
219 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Zweite Ebene - Gruppierung von Funktionen
220 Ribbon was ist das eigentlich? Geschachtelte Gruppierung...aber keine tiefe Hierarchie!
221 Ribbon und was bietet es? Viele Funktionen gleichzeitig hohe Entdeckbarkeit Die richtigen Funktionen für den aktuellen Kontext Empfehlung: Windows UX Guidelines lesen!
222 Große Patterns
223 Kleine Patterns
224 CheckBox
225 CheckBox ein Pattern? Ausführlich protokollieren Ausführlich protokollieren Ausführlich protokollieren
226 CheckBox Auswahl zwischen zwei klar gegensätzlichen Alternativen So klar, dass die zweite nicht erwähnt werden braucht Richtig: Das will ich haben! Falsch: Querformat
227 Wer GUIs mit offenen Augen betrachtet, sieht überall Patterns! (Keine große Überraschung)
228 Schlecht: Andere GUIs einfach blind kopieren
229 Verwendung von Abbildungen aus den Windows User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation
230 Wichtig: Tieferes Verständnis Falsch: Verwendung weil cool Was ist der Kern des Patterns? Wofür ist es geeignet? Wofür nicht?
231 Quellen für Patterns
232 Pattern Libraries (Links siehe Anhang)
233 Ziele dieses Vortragteils Grundlagen schaffen Analytische Denke auch für GUIs Blick schärfen Details entscheiden über den Erfolg
234 Abstrakte Betrachtung Erkenntnisse für die Praxis
235
236 UI Design Patterns
237 UI Design Patterns Darstellung Interaktion
238 Darstellung
239 Darstellung: Was?
240 Informationen (Nutz-)Daten Aus der Welt der Anwender z.b. Daten aus der Datenbank Sonstige Inhalte, u.a. Beschriftungen Hinweis-/Fehler-/Hilfstexte
241 Daten
242 1. Einzelnes Objekt 2. Mehrere Objekte
243
244
245 {D5520D83-FFD0-46D1-85E DCEADBE}
246 Foo.Bar.Thingy.Item
247 Anzeigename
248 Anzeigename Für Menschen verständlich Hinreichend unterscheidbar
249 (Bild)
250 Bilder in GUIs: Varianten a) Bilder sind die Daten b) Bilder repräsentieren Objekte Statisch: z.b. Autos in Online Shop Dynamisch: z.b. Thumbnails c) Bilder stehen für Kategorien z.b. Dateityp, Projektstatus
251 Nicht in diesem Vortrag: Visualisierung, Diagramme
252 Zusätzlicher Text
253 Anzeigename
254 Anzeigename und/oder Bild
255
256 Anzeigename und/oder Bild plus weitere Eigenschaften
257 Beispiel: Buch
258
259 Entwicklersicht Alle Informationen vorhanden Hey, sogar mit Bild! Anwendersicht Schwer zu lesen Und bei einfarbigem Cover?
260
261
262 Demo Einzelnes Objekt
263 Dominanz Hierarchie Whitespace Semantische Gruppierung Domänenspezifische Darstellung
264 Es lohnt sich, den Charakter von Objekteigenschaften zu kennen
265 Technische Sicht Titel Text Autor Text Verlag Text Art Text Seiten Zahl Auflage Zahl Veröff.datum Datum Sprache String ISBN-13 String
266 Charakterisierung Identifizierend? Falls ja: Lokal / Global? Selbstbeschreibend? Falls ja: Wirklich? Für wen? Zusammenhang mit anderen? Gruppierung Layout
267 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb)
268 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Titel Format Dateigröße
269 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Produkt XY Anwenderhandbuch (DOCX, 240Kb) Anwenderhandbuch (PDF, 210Kb) Werbebroschüre (DOCX, 145Kb) Werbebroschüre (PDF, 126Kb)
270 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Urlaub vom bis Max Mustermann
271 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht
272 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht
273 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht?!
274 Charakterisierung Texte: Länge bekannt? Minimal/Typisch/Maximal Auswirkungen auf Layout Entwurf vs. Realität Entwurf: Realdaten: Beispieltext Donaudampfschifffahrts
275 Charakterisierung Texte: Was ist wichtig? Anfang/Ende/Mitte/Alles? Evtl. gekürzte Anzeige sinnvoll? Das Geheimnis erfolgreicher GUI-Designer [...] mehr D:\Talks\... \ User Interface Patterns.pptx Bestellnummer: A
276 Charakterisierung Zahlen Groß/Klein Nur groß/klein oder gemischt? Negative Werte? u.v.m.
277 Fragen?
278 1. Einzelnes Objekt 2. Mehrere Objekte
279
280
281 Listen von Objekten a) Auflistung von Einzelobjekten b) Spezialfall: DataGrid Mehr als die Summe seiner Teile Gut bei wechselnden Prioritäten
282 Demo: Vertikales Layout
283 Vertikales Layout Geeignet für breite, aber nicht allzu hohe Objekte Klassisch Langweilig? Aber: Effektiv
284 Vertikales Layout A B C C Danach habe ich nicht gesucht Danach habe ich auch nicht gesucht Danach habe ich gesucht, endlich gefunden!
285 Demo: Horizontales Layout
286 Horizontales Layout Für wenige, schmale Objekte Mal was anderes Problem: Mausrad Interessant: Zeitachse
287 Horizontales Layout
288 Horizontales Layout Interessanter Spezialfall: Listen in Satzform Wenige, nicht zu lange Texte Eis: Vanille, Erdbeer, Schoko
289 Demo: Wrap/Matrix-Layout
290 Wrap/Matrix-Layout Attraktive Darstellung Will gut überlegt sein! Eher Ich suche X oder IKIWISI? I Know It When I See It
291 Wrap/Matrix-Layout: Suche
292 Wrap/Matrix-Layout: Suche
293 Wrap/Matrix-Layout: Suche
294 Wrap/Matrix-Layout: Stöbern
295 Demo: Verschiedene Layouts
296 Fragen zur Auswahl von Listen-Layouts
297 Was ist der Anwendungsfall? Überblick gewinnen? Daten analysieren? Nach etwas Konkretem suchen? Einfach mal stöbern?
298 Wahrscheinliche Betrachtung? Schnelles Scannen nach etwas Bestimmtem? Ausschau nach (irgend)etwas Interessantem?
299 Kochrezept Charakteristik der Daten herausarbeiten Konkrete Anwendungsfälle identifizieren Augenbewegungen minimieren Geeignetes Layout
300 Zusammenfassung: Varianten Als Liste von Einzelobjekten Als Aufzählung in Satzform Tabellarisch Matrix (Wrap)
301
302 Verschiedenes
303 1. Anwender direkt in der GUI unterstützen
304 Was ist zu tun, damit Anwender fundierte Entscheidungen treffen können?
305 Was können wir tun, dass dafür kein Kontextwechsel nötig ist?
306 Demo: Einstellungen
307
308 2. Wie geht man mit Komplexität um?
309 Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
310 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
311 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
312 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
313 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
314 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
315 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Mehr...
316 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
317 Verschieben Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!
318 Verschieben A Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! B C Die Funktionen sind nur in einem bestimmten Kontext zugänglich
319 Elemente... Entfernen Organisieren Verbergen Verschieben
320 Patterns
321 Progressive Disclosure Schrittweise Offenlegung
322 Progressive Disclosure Verbergen von UI-Elementen, die nicht für alle Use Cases notwendig sind UI-Elemente erscheinen bei Bedarf (interaktiv/automatisch) (siehe auch Microsoft UX Guidelines)
323 Demo: Progressive Disclosure
324 Responsive Disclosure Reagierende Offenlegung
325 Responsive Disclosure Einblenden von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers Spezialfall von Progressive D. Eher fachlich als technisch
326 Demo: Responsive Disclosure
327 Responsive Enabling Reagierende Freigabe
328 Responsive Enabling Freigeben von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers
329 Demo Responsive Enabling
330 Responsive Disclosure Anwender wird beim ersten Blick nicht erschlagen Aufklappen u.u. überraschend Dynamik möglich Layout ändert sich Responsive Enabling Anwender sieht sofort, welche Möglichkeiten es gibt Evtl. nicht klar, was die Elemente aktiviert Viele deaktivierte Bereiche schnell verwirrend Layout bleibt gleich
331
332 3. Die richtige Lösung
333 Kaum eine Lösung ist für alle Fälle gleich gut...
334 Chance: Spezialfälle erkennen
335 Demo: Spezialfall
336
337 Sammlung wichtiger Fragen
338 Auswahl von Patterns Welche Informationen sollen Anwender warum sehen? Was sollen Anwender warum machen können? Wie hilft dies den Anwendern, ihre Aufgabe zu erfüllen?
339 Darstellung von Daten Was ist der Charakter einer darzustellenden Information?...welche Darstellungen sind dadurch denkbar? Gibt es Wege, die Komplexität der GUI (lokal) zu verringern?
340 Material
341 Pattern Libraries
342 Websites (Pattern Libraries) Quince UI Patterns Welie.com
343 Bücher Designing Interfaces 2nd Edition User Interface Patterns, gute Mischung aus Beispielen + Theorie
344 Bücher Don t Make Me Think Oft zitierte, gut lesbare Einführung in grundlegende Usability-Themen
345 Bücher Designing the Obvious Anwender, Use Cases, mentale Modelle, schrittweise Verfeinerung
346 Bücher Simple and Usable Vereinfachung am Beispiel einer DVD-Fernbedienung: So einfach wie möglich, aber nicht einfacher
347 UX Interaction Guidelines Online und als PDF-Download -us/library/aa aspx
348 Fragen?
349 Vielen Dank!
350 ux4devs.de
351 Verwendung der Abbildungen aus den User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation.
Roland Weigelt UI / UX-Grundlagen für Entwickler....und andere Nicht-Designer..NET Developer Group Braunschweig
Roland Weigelt UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer.NET Developer Group Braunschweig Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler Bereich Enterprise-Anwendungen
Roland Weigelt UI / UX-Grundlagen für Entwickler....und andere Nicht-Designer. Juli 2012 Wuppertal/Berlin
Roland Weigelt UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer Juli 2012 Wuppertal/Berlin Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler Bereich Enterprise-Anwendungen
UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer
Roland Weigelt UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer UG-Tour Berlin, Leipzig, Dresden Roland Weigelt.NET Community User Group Bonn-to-Code.Net Konferenz dotnet Cologne Interesse:
Roland Weigelt User Interface Patterns. Kochrezepte für die Gestaltung von GUIs
Roland Weigelt User Interface Patterns Kochrezepte für die Gestaltung von GUIs UG Tour Juli 2012 Entwurfsmuster (engl. Design Patterns) Bewährte generische Lösungsansätze für immer wiederkehrende Entwurfsprobleme
Roland Weigelt User Interface Patterns. Kochrezepte für die Gestaltung von GUIs. 25.4.2012 -.NET User Group Bielefeld
Roland Weigelt User Interface Patterns Kochrezepte für die Gestaltung von GUIs 25.4.2012 -.NET User Group Bielefeld Raumschiff Enterprise Raumschiff Enterprise steckt voller Design Patterns! Entwurfsmuster
Magazin der Valeo-Verbundkliniken. Analysiert. Abgefahren. Ausgebildet
N o 04 März 2013 Magazin der Valeo-Verbundkliniken Analysiert Die Betten sind meist alle belegt, die Schlangen in der Notaufnahme eher lang. Wie kommt es, dass die Kassen nicht auch prall gefüllt sind?
Roland Weigelt User Interface Patterns. Kochrezepte für die Gestaltung von GUIs
Roland Weigelt User Interface Patterns Kochrezepte für die Gestaltung von GUIs Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler seit Januar User Experience Specialist Bereich Enterprise-Anwendungen
Das Internet der Dinge
Das Internet der Dinge Horst Hellbrück Kompetenzzentrum CoSA Fachbereich Elektrotechnik & Informatik Fachhochschule Lübeck http://www.cosa.fh-luebeck.de 19.05.2014 Horst Hellbrück - Internet der Dinge
Donec eget tellus aliquam augue feugiat mollis
Donec eget tellus aliquam augue feugiat mollis Ch. des Lilas 8 1700 Fribourg Referenz: AA.12 DONEC EGET TELLUS ALIQUAM AUGUE FEUGIAT MOLLIS CH-1700 Fribourg, Ch. des Lilas 8 CHF 1'200'000.- Beschreibung
Bewerbung bei den Big 4 und im Consulting
Bewerbung bei den Big 4 und im Consulting Tipps & Tricks 3. Juli 2015 Felix Heckert felix-heckert.de Bewerbung bei den Big 4 und im Consulting Wie bewirbt man sich bei Den BIG 4 (KPMG, PWC, Deloitte, E&Y)
Corporate Design Manual
Corporate Design Manual (C)V.Schuster 2013 Auf offiziellen Dokumenten wird der Claim immer mit gesetzt. Wie in dem unterem Beispiel gezeigt. Logo Die Puzzleteile wurden gewählt um die Verbundenheit der
Titel der Diplomarbeit
Diplomarbeit im Fachgebiet Wirtschaftsinformatik vorgelegt von: Studienbereich: Hans Meier Wirtschaftsinformatik Matrikelnummer: 12 34 56 Erstgutachter: Zweitgutachter: Prof. Dr. Werner Berentzen Dipl.-Inf.
Briefe und Rechnungen
Briefe und Rechnungen LATEX-Kurs der Unix-AG Andreas Teuchert 24. Juni 2013 Briefe und L A TEX Vorteile Elemente werden automatisch richtig positioniert einfache Möglichkeit, Serienbriefe zu erstellen
LAuF- TerMIne. aktiv Laufen - SPEZIAL Die große Saisonvorschau 2016 inklusive aller Lauftermine. Saisonstart. Ausrüstung Des Läufers neue Kleider
Media-Information 2016 aktiv Laufen - SPEZIAL Die große Saisonvorschau 2016 inklusive aller Lauftermine Marken Verlag GmbH Pollenalarm: Laufspaß trotz Allergie Trailschuhtest 2015 Schlingentraining für
Titel der Masterarbeit
Masterarbeit im Fachgebiet Software-Engineering vorgelegt von: Studienbereich: Hans Meier Software-Engineering Matrikelnummer: 12 34 56 Erstgutachter: Zweitgutachter: Prof. Dr. Werner Berentzen Dipl.-Inf.
Handreichung. Projektprüfung SJ2011/2012. Informationen für Schüler und Lehrer
Handreichung Projektprüfung SJ2011/2012 Informationen für Schüler und Lehrer A. Ablauf des Projekts B. Merkblatt für Schüler C. Stundeninhalte D. Projektmappe (Vorlagen & Tipps) Marie-Pettenbeck-Schule
Mindestumfang VWA. Verdeutlichung des Mindestumfanges von 40.000 Zeichen. Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY
Mindestumfang VWA Verdeutlichung des Mindestumfanges von 40.000 Zeichen Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY Betreuer: Valentin Prüfer November 2011 BG/BRG Musterschule 1100
Tagungs- und Seminarguide
Tagungs- und Seminarguide Hotels und Veranstaltungsorte Tagungshotels Bildungszentren Kongresszentren Eine Verlagsbeilage von sieben kooperierenden Verlagen: Eine Verlagsbeilage von acht kooperirenden
Mindestumfang VWA. Verdeutlichung des Mindestumfanges von 40.000 Zeichen. Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY
Mindestumfang VWA Verdeutlichung des Mindestumfanges von 40.000 Zeichen Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY Betreuer: Valentin Prüfer November 20.. BG/BRG Musterschule 1100
Unternehmenspräsentation. Wien 2012
factsandfigures Unternehmenspräsentation Wien 2012 Unternehmensprofil factsandfigures Präsentations- Design Consulting Power- Point Training Trainings Videos Unser Portfolio (1/2) Präsentationsdesign PowerPoint
Mindestumfang VWA. Verdeutlichung des Mindestumfanges von 40.000 Zeichen. Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY
Mindestumfang VWA Verdeutlichung des Mindestumfanges von 40.000 Zeichen Vorwissenschaftliche Arbeit verfasst von Hans Probemuster Klasse XY Betreuer: Valentin Prüfer November 2011 BG/BRG Musterschule 1100
VIVA Publishing Lösungen: Produktübersicht 2012/2013
VIVA Publishing Lösungen: Produktübersicht 2012/2013 WE PUBLISH THE WORLD Machen Sie Ihren Kopf frei mit VIVA... Desktop Publishing Ihr kostenloser Einstieg in die Welt erstklassiger Layoutprogramme sowie
Wunder MODERNER BAUKUNST von Dubai
ISSUE 00/2015 JULI AUGUST BEST BRD 8,90 AUT 8,90 BENELUX 8,90 CH 8.90 CHF VEREINIGTE ARABISCHE EMIRATE R E I S E N K U N S T K U L T U R B U S I N E S S Wunder MODERNER BAUKUNST von Dubai Klimatische Bedingungen
Vorlagen in MediaWiki
Vorlagen in MediaWiki Dieses Handout beschreibt, wie Sie Vorlagen in Ihr MediaWiki-System einbinden können. 1. Was sind Vorlagen? Eine Vorlage ist ein vorgefertigter Textbaustein, der in einen Artikel
GUIDE CORPORATE DESIGN
GUIDE LepuschitzMedia.com RaphaelLepuschitz.net CORPORATE DESIGN Potfather.net DerWeise.com Das menschliche Auge sucht immer nach erkennbaren Strukturen und Formen. Ein gutes Design liefert diese und lässt
Fördern Sie Ihr. nachhaltig
Fördern Sie Ihr Geschäftswachstum nachhaltig ADVANCED Rayovac, Hersteller der weltweit meistverkauften Hörgerätebatterien, ist seit mehr als 100 Jahren in der Batteriebranche tätig. In dieser Zeit hat
Herr Bundesrat, sagen Sie einfach, hinter jedem guten Film steht das MEDIA Programm.
MEDIA geförderte Schweizer Projekte 2010 Herr Bundesrat, sagen Sie einfach, hinter jedem guten Film steht das MEDIA Programm. Der grosse Kater, Regie: Wolfgang Panzer, 2010 2010: Eine überzeugende Bilanz
Spectabilität, sehr geehrter Herr Professor Bicker, sehr geehrte Damen und Herren,
Universitätsmedizin, 68135 Mannheim An den Dekan der Medizinischen Fakultät Mannheim der Universität Heidelberg Habilitationsausschuss XXX UNIVERSITÄTSKLINIK DR. MED. XXX TEL.: +49-0621-383-XXX FAX: +49-0621-383-XXX
PORTFOLIO Kristin Klasinski
PORTFOLIO Kristin Klasinski 1988 in Franken geboren wurde schon zu Schulzeiten jede langweilige Matheaufgabe mit kleinen Skizzen von mir verschönert. Nach der Schule beschloss ich, in Bamberg meiner Leidenschaft
Fallstudie Destinationsmarketing. München, April 2012
Fallstudie Destinationsmarketing München, April 2012 PLANSTAND hat sich in den letzten Jahren im Bereich des Destinationsmarketing sehr stark positioniert und auf die Beratung, Konzeption und Kreation
PowerPoint-Master. Titel der Säulengrafik (Entwicklung) In Tausend Euro. Der Untertitel ist etwas kleiner
Titelvariante 2 Das Titelmotiv (Platzhalter) darf gegen ein qualitativ gleichwertiges Bild ausgetauscht werden. Bitte denken Sie an den Rechtehinweis ( Bildautor). Thema der Präsentation maximal zweizeilig
Leitfaden Kommunikation
Leitfaden Kommunikation zur Durchführung von Projekten im Rahmen des INTERREG IV A-Programms Deutschland-Nederland 2007-2013 Sehr geehrter Lead Partner, Sie und Ihre Partner planen ein Projekt im Rahmen
HOME ÜBER ALETSCHBAU KAUFEN VERKAUFEN WIR BAUEN FÜR SIE KONTAKT AKTUELL UNSER CREDO TEAM REFERENZEN
ÜBER ALETSCH VER UNSER CREDO TEAM REFERENZEN AKTUELL ean commodo ligula eget dolor. Aenean massa ean commodo ligula eget dolor. Aenean massa ÜBER ALETSCH VER LOREMIP SUM LORE IPSUM LORE ÜBER ALETSCH VER
XPSNET. Xperts. Passion. Success. Unser Leistungsportfolio
XPSNET. Xperts. Passion. Success. Unser Leistungsportfolio DAFÜR STEHEN WIR Als zuverlässiger und vertrauensvoller Partner setzen wir auf Qualität und Flexibilität gegenüber unseren Kunden und Mitarbeitern.
Retargeting Technologie. www.adrolays.de
Retargeting Technologie EINLEITUNG Mehr als 89% aller Besucher verlassen eine Webseite ohne etwas zu kaufen. Das adrolays Retargeting ist eine qualitativ hochwertige Lösung potentiellen Kunden Kaufanreize
Barrierefreiheit in Webauftritten - BayBITV
Barrierefreiheit in Webauftritten - BayBITV Rechenzentrum Dr. J. Dirndorfer 22.02.2011 Rechtliche Grundlagen BayBITV (1. Januar 2007): Bayerische Barrierefreie Informationstechnik-Verordnung (Bayerische
Manual der Landesregierung Stand Mai 2010
Manual der Landesregierung Stand Mai 2010 Gebrauchsanweisungen, Beipackzettel, Handbücher. Sie erweisen sich entweder als sehr praktisch oder sehr lästig. Gerade Handbücher, die zu viele Informationen
Logos, Wortmarken und Signets
Logos, Wortmarken und Signets das Kremer fragbenny BroCoaching BBQ-Linux Mitessa fahrlässig Dzoni s Logo-Redesign für ein Gästehaus am Dobben. Die verwendtete Schrift heißt NouvelleVague und ist für persönliche
Tipps und Tricks. für die PDF-Präsentation
Tipps und Tricks für die PDF-Präsentation Um die Wirkung der einzelnen Punkte sehen zu können, muss die Präsentation zuerst heruntergeladen und dann mit folgenden Einstellungen im Adobe Acrobat Reader
Design-Handbuch. für das Erscheinungsbild des Bundes der Freien Waldorfschulen
Design-Handbuch für das Erscheinungsbild des Bundes der Freien Waldorfschulen Version 1.0 März 2015 Inhalt 1.0 Logo Bund... 4 1.1 Logo-Varianten... 6 1.2 Logo der Landesarbeitsgemeinschaften... 8 1.3 Logos
Mediadaten 2015 «take it» Preise und Leistungen gültig ab 01.01.2015
Mediadaten 2015 «take it» Preise und Leistungen gültig ab 01.01.2015 Verbandszeitschrift des Schweizerischen Bankpersonalverbands Der Schweizerische Bankpersonalverband SBPV vertritt und fördert die sozialen,
W&V Extra Automobil: Marken & Marketing
W&V Extra Automobil: Marken & Marketing Zum Automotive Brand Contest 2014 Juni 2014 DAS KONZEPT Pünktlich zum Automotive Brand Contest 2014 am 02. Oktober 2014 erscheint erstmalig das W&V Extra zum Wettbewerb.
VIVA Publishing Lösungen: Produktübersicht 2009/2010
VIVA Publishing Lösungen: Produktübersicht 2009/2010 WE PUBLISH THE WORLD Machen Sie Ihren Kopf frei mit VIVA... Desktop Publishing Ihr kostenloser Einstieg in die Welt erstklassiger Layoutprogramme sowie
Festpreisangebot Nr. 29. Festpreisangebot Nr. 40
Festpreisangebot Nr. 29 Festpreisangebot Nr. 40 Gültig vom 1. November Mai 20092014 bis 31. bis 30. Oktober April 2009 2015 Festpreisangebot Nr. 40 Gültig vom 1. November 2014 bis 30. April 2015 ALMRAUSCHSTRASSE
Content Mining. Semantic Text Mining. Semantic Text Mining Content Based Retrieval Visualisierung als Schlüssel. Technologie und Datenquellen MindNet
1 Content Mining 1. 2. 3. Semantic Text Mining Content Based Retrieval Visualisierung als Schlüssel Semantic Text Mining Technologie und Datenquellen MindNet Semantic text mining Umfeld http://gate.ac.uk
Kapitel 1 2 14. Februar 2010
1 14. Februar 2010 Kapitel 1 2 14. Februar 2010 E-BusinessMarketing KPI MarketingOnline KPI Marketing Web Web Assessment Usability Benchmarking Controlling Controlling Benchmarking Usability E-Business
Trainingaktuell. Stressbewältigung wird zum Top Thema. Visualisierungstipps für Präsentationen und Trainings
G 25220 Trainingaktuell Die Zeitschrift für Trainer, Berater und Coachs 22. jahrgang Nr. 2/2011, 31. januar 2011 www.trainingaktuell.de TrAININGSINHALTe 2011 Stressbewältigung wird zum Top Thema FLIPCHArTS
Lorem ipsum dolor sit amet, consectetuer
Ausgabe usgabe 12 28. NoVEMbEr November 2012 Basteln, Jetzt spielen, bei TeeGschwendner entdecken Kinder Herbstzeit willkommen ist Teezeit Seite Seite 3 2 Geschenkideen Trends für die für moderne Sie und
FutureNet Angebot: FutureNet Die Kombination von 4 Online Bereichen. - Social Media - Multimedia - Onlinetools - Online Geld verdienen
FutureNet Angebot: FutureNet Die Kombination von 4 Online Bereichen FutureNet kombiniert die 4 Online Bereiche mit den besten Zukunftsaussichten: - Social Media - Multimedia - Onlinetools - Online Geld
Selbständige Projektarbeit 2008. Drogensucht. Kurzes Glück, langes Leiden. Anja Neuhaus Oberstufenzentrum Stockhorn Konolfingen. März 2008, Klasse s9b
Selbständige Projektarbeit 2008 Drogensucht Kurzes Glück, langes Leiden Anja Neuhaus Oberstufenzentrum Stockhorn Konolfingen März 2008, Klasse s9b Drogensucht Selbständige Projektarbeit im Rahmen des Abschlussprojektes
Castor. Dokumentation
Castor Dokumentation 1 Inhalt Castor Wollen Sie ein Produkt-Highlight anzeigen, Direktverkäufe generieren? Oder planen Sie die Verteilung von Mustern. In all diesen Fällen sollten Sie sich für das Thema
A/B-Testing. Kaizen für ihre Website. Stand 04.14
A/B-Testing Kaizen für ihre Website A/B-Testing Kaizen für Ihre Website Kontinuierliche Verbesserungsprozesse haben sich seit den 90er Jahren in der Produktion etabliert und für enorme Produktivitätssteigerungen
Handhaben von Problemen mit Kivitendo
Handhaben von Problemen mit Kivitendo Fehler Eingrenzen, Bugreports erstellen, Ruhe bewahren Wulf Coulmann selbstständiger Kaufmann Berlin 11.10.2012 Wulf () Handhaben von Problemen mit Kivitendo 11.10.2012
Manual Logoanwendung Energiewende Hamburg
Manual Logoanwendung Energiewende Hamburg INHALT 1.1 LOGOIDEE 3 1.2 LOGOVARIANTEN 4 1.3 LOGOANWENDUNG & SCHUTZZONE 5 1.4 LOGOFARBEN 6 1.5 LOGOABBILDUNGSGRÖSSE 7 1.6 NEGATIVE LOGOANWENDUNGEN 8 1.7 LOGOPLATZIERUNG
Zürichsee Caravan. Zürichsee Caravan. Corporate Design Manual 2010. Samir Hasani
Zürichsee Caravan Zürichsee Caravan Corporate Design Manual 2010 Samir Hasani Grundelemente 1.1 Naming 3 1.2 4 1.3 Farbe 6 1.4 Schriften 8 Anwendungsbereiche 2.1 Brief 9 2.2 Kuvert 10 2.3 Visitenkarten
Leitfaden Kommunikation. zur Durchführung von Projekten im Rahmen des INTERREG IV A-Programms Deutschland-Nederland 2007-2013
Leitfaden Kommunikation zur Durchführung von Projekten im Rahmen des INTERREG IV A-Programms Deutschland-Nederland 2007-2013 Version 2 - Gültig ab 01. Januar 2011 Sehr geehrter Lead Partner, Sie und Ihre
Financial Controlling
Financial Controlling Im Januar 2012 Financial Controlling Financial Controlling JDC Drewes Consulting unterstützt Ihr Unternehmen durch Bereitstellung von Managementkapazität in den Bereichen Finanzen
Das Corporate Design in LATEX
Presse und Kommunikation tubslatex Das Corporate Design in LATEX Anleitung und Dokumentation Enrico Jörns 21. Juli 2014 tubslatex-autoren: Enrico Jörns, Tobias Rad, Martin Bäker et al. Version: Projektseite:
Das Corporate Design in LATEX
Presse und Kommunikation tubslatex Das Corporate Design in LATEX Anleitung und Dokumentation Enrico Jörns 20. Februar 2014 tubslatex-autoren: Enrico Jörns, Tobias Rad, Martin Bäker et al. Version: Projektseite:
KOSTENLOS. IHR PERSÖNLICHER Am schönsten Tag Ihres Lebens. sind wir für Sie da.
KOSTENLOS IHR PERSÖNLICHER Am schönsten Tag Ihres Lebens sind wir für Sie da. Inhalt INHALT PLATZ Z.B. FÜR EINSEITIGE ANZEIGE EINES SPONSOREN 10 Der Zeitplan 10 Der Budgetplan 10 Anmeldung beim Standesamt
1 Wort-Bild-Marke. Standardanwendung In der Standardanwendung steht das Logo in Gold auf einem schwarzem Hintergrund.
1 Wort-Bild-Marke Logo Um eine maximale Wiedererkennbarkeit und Wertigkeit zu garantieren, ist es wichtig, dem Deutschen Filmpreis ein signifikantes Logo zuzuordnen. Der Deutsche Filmpreis kommuniziert
Sylvia Achenbach SAMedienberatung. Jürgen Walleneit MSH AND MORE Werbeagentur GmbH
Auswahl und Realisierung sinnvoller online Werbemittel und Social Media am Beispiel Referenten: SAMedienberatung Eupener Str. 135-137, 50933 Köln 0221/4924-884, E-Mail, samedienberatung.de Jürgen Walleneit
Medical Monitor. Philips Healthcare. Ein Herz für die Stadt. Mieten, kaufen, warten. In eigener Sache 01/14. Echo
Medical Monitor Medical Monitor Medical Monitor Medical Monitor Heide Fest Medical Monitor Healthcare Report Der Wettlauf mit dem Tod Die wenigsten Herzen geraten im Beisein eines Arztes aus dem Takt.
Corporate Design FH Aachen University of Applied Sciences
Corporate Design FH Aachen University of Applied Sciences Corporate Design FH Aachen University of Applied Sciences Aus dem Zusammenschluss mehrerer Aachener Ingenieurfachschulen und berufsbezogener Ausbildungsstätten
Thema aktuell 01 15 1 ONLINE AUSGABE. aktuell DAS KUNDENMAGAZIN JUNI 2015 13. JAHRGANG
Thema aktuell 01 15 1 ONLINE AUSGABE aktuell DAS KUNDENMAGAZIN JUNI 2015 13. JAHRGANG 2 aktuell 01 15 Thema Impressum Gemeinnütziger Spar- und Bauverein Friemersheim eg Kaiserstraße 53 47229 Duisburg Telefon
www.cd4.at Plattform für Informationsaustausch über HIV/AIDS visitenkarte auf den nächsten seiten der flyer (Wickelfalz, A4 6-seitig)
www.cd4.at Plattform für Informationsaustausch über HIV/AIDS visitenkarte auf den nächsten seiten der flyer (Wickelfalz, A4 6-seitig) Ärzte Betroffene Information Vorbeugen Informieren Verbinden Auffangen
Unsere Heimat stellt sich vor: Bollendorf. Willkommen im Luftkurort Bollendorf im romantischen Sauertal!
Unsere Heimat stellt sich vor: Bollendorf Willkommen im Luftkurort Bollendorf im romantischen Sauertal! Lorem ipsum dolor sique Aenean commodo Grußwort ligula eget Cum sociis natoque penatibus et magnis
Festpreisangebot Nr. 29. Festpreisangebot Nr. 37 Gültig vom 1. Mai 2009 2013 bis 31. Oktober 2009 2013
Festpreisangebot Nr. 29 Festpreisangebot Nr. 37 Gültig vom 1. Mai 2009 2013 bis 31. Oktober 2009 2013 Festpreisangebot Nr. 37 Gültig vom 1. Mai 2013 bis 31. Oktober 2013 ALMRAUSCHSTRASSE 5 D-82031 GRÜNWALD
Welche Bedeutung hat Corporate Design für mittelständische Unternehmen?
Agentur für Design und Kommunikation Vortrag Welche Bedeutung hat Corporate Design für mittelständische Unternehmen? Definition»Corporate Identity ist die strategisch geplante und operativ eingesetzte
Elecat Elektronischer Produkt-Katalog für intelligentes E-paper und Internet. Elestore Product Content Management System
Eine einzigartige Software-Familie Elestore Product Content Management System Elecat Elektronischer Produkt-Katalog für intelligentes E-paper und Internet Konzipiert und entwickelt als ein homogenes System
Corporate Design * Titel. Corporate Design Manual. Informationen zum visuellen Erschienungsbild von i ceramisti nach dem Redesign.
Corporate Design * Titel Corporate Design Manual Informationen zum visuellen Erschienungsbild von i ceramisti nach dem Redesign Stand Januar 2012 CD i ceramisti 1 Corporate Design * Inhaltsverzeichnis
Das Corporate Design der Fachhochschule Brandenburg. Die Grundelemente und ihre Anwendung
Das Corporate Design der Fachhochschule Brandenburg Die Grundelemente und ihre Anwendung Stand: 02.04.2015 Inhaltsverzeichnis Corporate Design 5 Über dieses Dokument 7 Organisationsbezeichnung 9 Grundelemente
Warum hat Yogalehrer-Online keinen zeitgemäßen, grafischen Editor?
Befehlsübersicht Das sind die Befehle, die man im Editor verwenden kann Stand: 19. Mai 2010 Allgemeines Die hier aufgeführten Befehle ersetzen meistens ähnlich lautende HTML-Befehle. Es gibt aber auch
F Ü R DA S. Kampagnen Design Z U R B U N D ESTAGSWA H L 2 013
K U RZ A N LE IT U N G F Ü R DA S Kampagnen Design Z U R B U N D ESTAGSWA H L 2 013 Das visuelle Erscheinungsbild der Kampagne beeinflusst den kommunikativen Erfolg. Je konsequenter die Elemente des Erscheinungsbildes
AGENTUR PORTFOLIO. In diesem Booklet erhalten Sie umfangreiche Einblicke in unsere Arbeiten und Referenzbeispiele.
AGENTUR PORTFOLIO In diesem Booklet erhalten Sie umfangreiche Einblicke in unsere Arbeiten und Referenzbeispiele. PLANSTAND GmbH & Co. KG Nymphenburgerstraße 58-60 80335 München www.planstand.com München,
Abenteuer im L A T E X-Land
Abenteuer im L A T E X-Land Neue und nicht ganz so neue Pakete auf CTAN Uwe Ziegenhagen 8. März 2013 Worum geht s? Schwer, den inhaltlichen Überblick bei CTAN Paketen zu behalten. Information dank Mail/RSS
ADAPTIVE VS. RESPONSIVE WEBDESIGN
ADAPTIVE VS. RESPONSIVE WEBDESIGN WER BIN ICH? 10 SEKUNDEN Senior Projektmanager bei sitegeist Betriebswirt (VWA) Onliner seit 2001 TECHNOLOGIE & MOBILITÄT [...] UND DIE REALITÄT? [...] KUNDE X MAI 2012
SUCHMASCHINEN - OPTIMIERUNG WORAUF KOMMT ES AN?
SUCHMASCHINEN - OPTIMIERUNG WORAUF KOMMT ES AN? 1 Was wollen wir? Wir wollen, dass unsere Zielgruppe unsere Website besucht und effizient für sich nutzen kann. 2 Wie kommt unsere Zielgruppe auf unsere
Technik des Internet
Seminar Web 2 am Seminar für Medienwissenschaften Institut für Kulturwissenschaft Humboldt-Universität zu Berlin Technik des Internet Prinzipien, Formate und Technologien Thomas Kollbach kollbach@informatik.hu-berlin.de
DAS KLJB-LOGO GESTALTUNGSGRUNDSÄTZE
DAS KLJB-LOGO GESTALTUNGSGRUNDSÄTZE KLJB-LOGO Die Gestaltungsgrundsätze im Überblick DAS LOGO Der erste Eindruck zählt Seite 4 Anforderungen Seite 5 Identität Seite 6 Vermaßt Seite 7 FARBE Farbdefinitionen
Änderungen Versionsnummer Stand Ursprungsversion 1.00 19. Mai 2010 audio, divid, dia, ecall, skype, icq, google-translator
Befehlsübersicht Das sind die Befehle, die man im Editor verwenden kann Versionen: Änderungen Versionsnummer Stand Ursprungsversion 1.00 19. Mai 2010 audio, divid, dia, ecall, skype, icq, google-translator
Das Corporate Design der Fachhochschule Brandenburg
Das Corporate Design der Fachhochschule Brandenburg Die Grundelemente und ihre Anwendung Inhaltsverzeichnis Corporate Design 3 Über dieses Dokument 4 Organisationsbezeichnung 5 Grundelemente 6 Logo 7
Alles rund ums. Das richtige Papier für jeden Anlass. www.pagro.at
Alles rund ums Papier Das richtige Papier für jeden Anlass Papier ist nicht gleich Papier. Mit der Auswahl des richtigen Papiers für jeden Anlass können Sie einen besonders guten Eindruck hinterlassen
(Wie) kann man mit der IEC 82079-1 Anwenderfreundlichkeit erreichen?
(Wie) kann man mit der IEC 82079-1 Anwenderfreundlichkeit erreichen? Roland Schmeling SCHMELING + CONSULTANTS Heidelberg FV 3 Fachvortrag für Experten tekom Frühjahrstagung Münster, 11. April 2013 Schmeling
Nutzungsoptionen für Mitglieder der BSIK
Kampagne 150 Jahre Zivilingenieure Nutzungsoptionen für Mitglieder der BSIK Die Zivilingenieurin. Die Kampagne Aufgabe Entwicklung einer Kommunikationskampagne anlässlich des 150-Jahre-Jubiläums der Österreichischen
Mobile UX Konzepte: Wie man vermeidet, vom User gehasst zu werden. Johannes Fahrenkrug @jfahrenkrug springenwerk.com
Mobile UX Konzepte: Wie man vermeidet, vom User gehasst zu werden Johannes Fahrenkrug @jfahrenkrug springenwerk.com : t, u Johannes Fahrenkrug @jfahrenkrug springenwerk.com Was User hassen 10 Wege, nicht
WGD Tourismus GmbH Corporate Design. Gültig ab 2013
WGD Tourismus GmbH Corporate Design Gültig ab 2013 Das Inhaltsverzeichnis 01 I Vorwort 01 Allgemeine Hinweise 02 Die Begriffserklärungen 02 I Grundlagen 03 Das Logo 04 Das Logo für die Gemeinden 05 Die
Der Weg zum eigenen Buch
Der Weg zum eigenen Buch [Dies ist die Rückseite der ersten Seite, wenn der Druck beidseitig erfolgt.] Der Weg zum eigenen Buch Rechtliche Informationen Der Weg zum eigenen Buch Autor: Kurt Lundskov, www.lundskov.dk
Hypertext Markup Language (HTML) Stefan Rothe, Thomas Jampen
Hypertext Markup Language (HTML) Stefan Rothe, Thomas Jampen 2013 09 13 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet
Tragbares Designsprech
Tragbares Designsprech ios & Android @elektrojunge tausendsassaesk.de by Michael Rose @mmistakes benny.reimold@me.com Codenauts codenauts.de ios & Android Rails PS: HockeyApp Mobile Maultaschen Ping me!
Schweizerisches Rotes Kreuz Corporate Design Manual
Corporate Design Manual Inhalt Einleitung / Vorwort 1.00 2.00 3.00 4.00 5.00 6.00 7.00 8.00 9.00 10.00 SRK-Logo Farben Schrift / Typografie Gestaltungsraster Briefschaften Werbemittel Elektronische- und
SAP-INSIDE für kaufmännische Prozesse Effizienzsteigerung durch Digitalisierung Kleine Maßnahmen, große Wirkung. Andreas Hess 28.10.
SAP-INSIDE für kaufmännische Prozesse Effizienzsteigerung durch Digitalisierung Kleine Maßnahmen, große Wirkung Andreas Hess 28.10.2015 Agenda EINFÜHRUNG IN DIE DIGITALE TRANSFORMA- TION EFFIZIENZSTEIGE-
Tiny MCE 3.0. JavaScript-Tools. Inhaltsverzeichnis. WYSIWYG-Editor für Textfelder in HTML-Formularen http://tinymce.moxiecode.com/
JavaScript-Tools Tiny MCE 3.0 WYSIWYG-Editor für Textfelder in HTML-Formularen http://tinymce.moxiecode.com/ Inhaltsverzeichnis Beschreibung des Tiny-MCE-Editors...5 Download...5 Wiki mit der Dokumentation
Corporate Design STYLE GUIDE
Corporate Design STYLE GUIDE Stand 01/2014 Die Wort- / Bildmarke 1 Das Markenzeichen In der Wort- / Bildmarke sind reale Unternehmensmerkmale und -werte in der Visualisierung ausgedrückt. Die Stern-Animation
Hochschule Bochum. Bochum University of Applied Sciences Fachbereich Elektrotechnik und Informatik. Titel der Arbeit. Diplomarbeit / Bachelorarbeit
Hochschule Bochum Bochum University of Applied Sciences Fachbereich Elektrotechnik und Informatik Titel der Arbeit Diplomarbeit / Bachelorarbeit von Vorname Nachname Labor für Medien, Internet und Robotik
Visuelles Erscheinungsbild Herzgruppen Anwendermanual
Visuelles Erscheinungsbild n Anwendermanual Das Anwendermanual zum visuellen Erscheinungsbild für die n enthält Informationen und Anleitungen zum praktischen Gebrauch. Es legt die Proportionen Bildmarke/Schrift
Corporate Design/Styleguide Stand 01 / 2003 www.altenburgerland.de Einleitung und Symbolik Einleitung. Um eine durchgängige Corporate- Identity in allen Bereichen der Kommunikation aufzubauen, haben wir
Das IT-Wirtschaftsmagazin. Mediadaten 2014. In Kooperation mit dem deutschen CIO-Verband
60 000 Angriffe erfolgen täglich auf IT-Infrastrukturen Text z.b. für das Titelthema mit zwei Zeilen je nachdem. Text z.b. für das Titelthema mit zwei Zeilen je nachdem. Schnelle Prozesse allein führen
telekom rebell Director s Dealings Immofinanz So residieren Zehetner und sein Team 42 Schweizer Franken So lösen die Banken das Problem 11
Wiener Börse Kuras neu im Vorstand Deloitte Verleiht CFO-Award 2012 wolf theiss Baut M&A DIVISION AUS Das Fachmagazin für den österreichischen Kapitalmarkt www.derboersianer.com 2. Quartal 2012 Director