UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer"

Transkript

1 Roland Weigelt UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer UG-Tour Berlin, Leipzig, Dresden

2 Roland Weigelt.NET Community User Group Bonn-to-Code.Net Konferenz dotnet Cologne Interesse: User Interfaces WPF, Silverlight UI / UX

3 Roland Weigelt (Beruflich) Software-Entwickler Comma Soft AG in Bonn Schwerpunkt Frontends Konzepte Anwendungsentwicklung Silverlight, Windows Forms

4 Entwickler, kein Designer

5 Wie erstelle ich grandios fantastische User Interfaces?

6 Wie erstelle ich grandios fantastische User Interfaces?

7 Wie erstelle ich brauchbare User Interfaces?

8 *) N = X Was kann man in N * Minuten vermitteln?

9

10 Jede Menge Kochrezepte?

11 Grundlagen Denkanstöße Google-Futter...und natürlich auch etwas Praxis

12 Grundlagen Denkanstöße Google-Futter...und natürlich auch etwas Praxis

13 TEIL 1 Was Entwickler über Design wissen sollten

14

15 #1 Gutes Design erfüllt einen Zweck

16 Design ist Kunst, die sich nützlich macht. Carlos Obers, ehem. Präsident Art Directors Club

17 Gutes Design?

18 Was ist der Zweck?

19 Werbung? Marke etablieren? Skillz zeigen?

20 Musik/Video abspielen?

21

22

23

24 #2 Design weckt Emotionen

25 Beispiel: Werbung für ein Produkt

26 Wow, cool! Muss ich mir Emotionen anschauen Ah, die Marke X! Will ich haben

27 Emotionen in einer Business- Anwendung?

28 Vertrauen schaffen Interesse wecken Wertigkeit vermitteln

29 Beispiel

30 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

31 Vertrauen? Wertigkeit?

32 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

33 Vertrauen? Wertigkeit?

34 Gedankenexperiment Nach 2 Monaten tritt ein schwerer Fehler auf...

35 War ja abzusehen - das machte noch nie einen guten Eindruck

36

37 #3 Es gibt kein ohne Design

38 ohne Design == schlechtes Design

39

40 #4 Design ist nicht die eine Idee

41 Schrittweise Verfeinerung vs. Rumdoktorn an Problemen

42 Viele Ideen generieren

43 Wenn s nicht weiter geht: einen Schritt zurück

44 Oder: was wäre der extremste Ansatz?

45 Viel probieren, viel verwerfen

46 Aber: Zwischenergebnisse aufheben!

47 Beispiel: Website nerdplusart.com Robbie Ingebretsen Pixel Lab (thinkpixellab.com) vorher Mitglied im WPF-Team

48

49

50

51 Zusammenfassung 1. Design erfüllt einen Zweck 2. Design weckt Emotionen 3. Es gibt kein ohne Design 4. Es ist nicht nur die eine Idee

52

53 TEIL 2 Gestaltung

54

55 Die schlechte Nachricht: Talent ist ein großer Faktor - wie überall

56 Ich kann keine gute GUI designen weil mir das Gespür fehlt und überhaupt ist ja Design viel schwammiger als z.b. Software-Entwicklung und manche Leute haben das ja voll drauf die Don t Panic! zeichnen einfach etwas und dann sieht das direkt cool aus und ich bekomme nicht mal einen Metallic-Effekt hin das hat also doch alles überhaupt keinen Zweck.

57 Die gute Nachricht: Von schlecht nach brauchbar ist es nur ein kleiner Schritt

58 Design ist nur scheinbar reine Geschmackssache

59 Die Kenntnis grundlegender Prinzipien hilft bereits weiter

60 Also: Etwas Theorie

61

62

63

64

65

66

67

68

69

70

71 Augenbewegung Arbeitsspeicher Erinnerungen Mustererkennung

72 Gestalttheorie

73 Gestalttheorie Frage: Nach welchen Gesetzen verbindet der Mensch einzeln wahrgenommene Elemente zu neuen Gestalten mit eigenen, ganzheitlichen Eigenschaften?

74 Das Ganze ist mehr als die Summe seiner Teile

75

76

77

78

79 Gestaltgesetze?

80 Gestaltgesetze?

81 Eher Regeln

82 Gestaltgesetze konkurrieren miteinander

83 Phänomene treten selten isoliert auf

84 Gestaltgesetze liefern keine Erklärung

85 Eine Auswahl:

86 Prägnanz Jede Figur wird so wahrgenommen, dass sie in einer möglichst einfachen Struktur resultiert ( Gute Gestalt )

87 Prägnanz

88 Prägnanz

89 Prägnanz

90 Prägnanz

91 Prägnanz

92 Ähnlichkeit Gleiche oder ähnliche Elemente werden als zusammengehörig wahrgenommen.

93 Ähnlichkeit

94

95 Nähe Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.

96 Nähe

97

98 1 2 3 A B C D E F I 0 J G H

99 Nähe Max Mustermann Frankfurt John Doe New York

100 Geschlossenheit Fehlende Teile werden in der Wahrnehmung ergänzt......unvollständige Figuren als zusammengehörig erlebt

101 Geschlossenheit

102 Geschlossenheit Foobar Lorem ipsum Hello World The quick... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare lacus et augue ultrices ac convallis massa iaculis. Etiam dignissim condimentum magna, vitae blandit tortor luctus eu.

103 Lorem Ipsum Oft verwendeter Blindtext als Platzhalter im Layout Geschichte + Generator auf Word, PowerPoint: =lorem( < absätze >, < sätze > )

104 Gemeinsame Bewegung Elemente, die sich gleichförmig verändern bzw. bewegen, werden als Einheiten erlebt.

105 Gemeinsame Bewegung

106 Kontinuität Gesetz der guten Fortsetzung Elemente gleicher Form, die fortlaufend miteinander verbunden sind, werden als Einheit erlebt.

107 Kontinuität

108 Kontinuität

109 Kontinuität

110 Figur-Grund-Trennung Geschlossene und kleinere Flächen werden bevorzugt wahrgenommen Vordergrund vs. Hintergrund

111 Figur-Grund-Trennung

112 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 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 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 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 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

113 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Wichtige Fehlermeldung 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

114 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Wichtige Fehlermeldung 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

115 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Wichtige Fehlermeldung 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

116 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Wichtige Fehlermeldung 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

117 Gestaltgesetze: Nur eine Auswahl aus > 100!

118 Sozusagen die Firmware der menschlichen Wahrnehmung

119 Aber: Firmware heißt nicht 100% vorhersehbar!

120

121

122 Anforderungen an brauchbares Visuelles Design

123 Konsistenz Ordnung Ausgewogenheit

124 Oder auch: Aus einem Guss

125 Aus einem Guss 1. Ordnung schaffen, um Komplexes einfach(er) erscheinen zu lassen 2. Für Balance sorgen

126 1. Ordnung Ausrichtung Dominanz Hierarchie

127 1. Ordnung Ausrichtung Dominanz Hierarchie

128 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung...allerdings nicht auf dieser Folie

129 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung

130 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung

131 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.

132 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.

133 Wichtigstes Hilfmittel für eine einheitliche Ausrichtung: Gitter (Grid)

134

135

136

137

138

139 Konstruktion nach dem goldenen Schnitt

140 Kein Gitter, aber einheitliche Abstände

141 Kein Gitter, aber einheitliche Abstände

142 Kein Gitter, aber einheitliche Abstände

143 Kein Gitter, aber einheitliche Abstände

144 1. Ordnung Ausrichtung Dominanz Hierarchie

145 Dominanz ergibt sich, wenn einem oder mehreren Elementen durch Farbe,, Form, oder Größe Ausrichtung besonderes Gewicht gegeben wird

146 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

147 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

148 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

149 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

150 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

151 1. Ordnung Ausrichtung Dominanz Hierarchie

152 Visuelle Hierarchie Anordnung von Elementen in einer einfach zu verstehenden Wichtigkeitsabstufung.

153 Der Titel Eine Überschrift 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. Noch eine Überschrift 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.

154 Lorem Ipsum

155 Lorem Ipsum Maecenas ac ligula lorem, a lacinia purus

156 Lorem Ipsum Vestibulum ante ipsum primis in faucibus

157 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit

158 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

159 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

160 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

161 Lorem Ipsum Vestibulum ante ipsum primis in faucibus Sed Ut Magna Quis Sapien Luctus

162 Lorem Ipsum Vestibulum ante ipsum primis in faucibus Sed Ut Magna Quis Sapien Luctus

163 Lorem Ipsum Vestibulum ante ipsum primis in faucibus Sed Ut Magna Quis Sapien Luctus

164 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

165 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

166 Lorem Ipsum Dolor sit amet, consectetur adipiscing elit Duis Condimen Malesuada Sapien Egestas Volupat

167

168 Ordnung durch Ausrichtung Dominanz Hierarchie...bitte nicht politisch verstehen ;-)

169 Beispiel: Team-Aufstellung

170 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2010/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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

171 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2010/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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

172 Telekom Baskets Bonn Team 2008/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 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 Ausrichtung

173 Telekom Baskets Bonn Team 2008/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 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 Ausrichtung

174 Telekom Baskets Bonn Team 2008/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 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 Dominanz

175 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2010/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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 Hierarchie

176 Telekom Baskets Bonn 2008/ / / Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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 Hierarchie

177 Telekom Baskets Bonn 2008/ / / Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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

178 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2010/ Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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

179 Telekom Baskets Bonn 2008/ / / Earl Jerrod Rowland 5 Winsome Frazier 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Timothy Clifford 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Matthias v. Heydebrand 15 Brandon Kyle Bowman 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 18 Kevin Lubanzadio 19 Ken Johnson 4 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

180 Beispiel: Langweilig aber vertrauenswürdig

181 vs.

182 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

183 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 Ausrichtung OK

184 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 Hierarchie OK

185 Überweisung 1 Hierarchie OK

186 Überweisung 1 2 Hierarchie OK

187 Überweisung 1 Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank 3 2 Betrag: ,00 Hierarchie OK

188 Beispiel: Minimum an Qualität

189

190

191

192

193

194

195

196

197

198

199

200 Dazu gleich noch mehr...

201

202 Aus einem Guss 1. Ordnung schaffen, um Komplexes einfach(er) erscheinen zu lassen 2. Für Balance sorgen

203 2. Balance Inhalt vs. Whitespace Visuelle Gewichte

204 2. Balance Inhalt vs. Whitespace Visuelle Gewichte

205 Inhalt Whitespace auch White space

206 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 Whitespace OK

207 Beispiel: Fehlermeldung

208 Entwickler ACME App 2000 Epic Fail Code 0x Schließen

209 Designer ACME App 2011 Epic Fail Code 0x Schließen

210 Designer ACME App 2011 Epic Fail Vielen Dank für Ihr Verständnis. Schließen

211 Beispiel: Minimum an Qualität

212

213

214

215 Beispiel: Legacy App

216 Vorher

217 Nachher

218 Whitespace Stärkerer Eindruck von Ordnung und Struktur Dominante Elemente fallen noch stärker auf Vermittelt Gefühl von Qualität

219 2. Balance Inhalt vs. Whitespace Visuelle Gewichte

220

221

222

223 Balance

224 Klassische Balance Auch: Formale Balance Auch: Symmetische Balance Ergibt sich durch Symmetrie zu einer zentralen Achse

225

226 Beständigkeit Stärke

227 Klassische Balance Drückt Beständigkeit und Stärke aus

228

229 Langweilig?

230 Informelle Balance Auch: Asymmetrisch Ergibt sich dadurch, dass sich unterschiedliche visuelle Gewichte die Waage halten

231 Informelle Balance

232 Informelle Balance

233 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

234 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

235

236 Zusammenfassung Ausrichtung um Kanten zu schaffen (ohne sie zu malen) Dominanz um wichtige Einstiegspunkte zu markieren Hierarchien deutlich machen

237 Zusammenfassung (Forts.) Whitespace für Übersicht, Lesbarkeit und Wertigkeit Visuelles Gewicht beachten und in Balance halten

238 Also: Alles ganz einfach...

239 Regeln beachten Gefälliges Design Positive Emotionen YOU ROCK!!!

240 ! $ $ $!!

241 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

242 Unser Problem: Anwender sind Menschen...

243 ...keine mobilen Bildverarbeitungs- systeme

244 ängstlich überheblich ungeduldig unlogisch unvernünftig ungerecht

245 Klick, Klick, Klick, Dreckstool!

246 Ganzheitlicher Ansatz: User Experience Design

247 PAUSE

248 TEIL 3 User Experience

249 User Experience Das Gesamterlebnis eines Nutzers bei Verwendung eines Produktes oder Systems

250 UX Design umfasst... Information Architecture Information Design GUI Design Visual/Graphic Design Usability Psychologie

251 UX Design umfasst... Information Architecture Information Design GUI Design Visual/Graphic Design Usability Psychologie

252 Empathie

253 Mitgefühl

254 Wird der Anwender das verstehen?

255 Wer ist eigentlich der / die AnwenderIn?

256 Einsteiger vs. Profis

257 Gelegenheits-User vs. Power-User

258 Profis als Gelegenheits-User vs. Einsteiger als Power-User

259 ?

260 Rollen

261 Rollen helfen festzulegen, wer was in der GUI braucht

262 Leser Autor Administrator

263 Rollen sagen aber nichts über das Verhalten aus

264 Zielgruppen

265 Zielgruppen werden durch Clusterung von Eigenschaften definiert

266 Zielgruppen wecken aber nur schwer Emotionen beim Entwickler

267 85,9% der weiblichen Waisenkinder unter 12 Jahren wünschen sich ein Pony* * Diese Aussage ist wie 38,3% aller Statistiken frei erfunden

268 Lisa (11 Jahre) hat beide Eltern verloren und wünscht sich ein Pony

269 Personas

270 Persona Virtuelle Person als Stellvertreter einer Zielgruppe Sehr genaue Beschreibung vermittelt anschauliches Bild

271 Wird der Anwender das verstehen?

272 Wird die Zielgruppe der Führungskräfte mit begrenzten IT-Kenntnissen das verstehen?

273 Wird Heinrich das verstehen?

274 Heinrich Abteilungsleiter (56) 2 Kinder, Haus am Stadtrand Wenig Erfahrung mit Office Im Zweifelsfall eher vorsichtig Wichtiger Multiplikator

275 Sabine Sachbearbeiterin (26) Single, Wohnung in der Stadt Office + Business Apps im Intranet, privat Social Apps Wurschtelt sich in Neues rein

276 Beispiel

277 Was Entwickler entworfen haben

278 Was Anwender davon sehen

279 Heinrich Hmm... klingt kompliziert... (Telefon klingelt) Klickt Abbrechen

280 Sabine Muss ich das alles lesen... (Telefon klingelt) Sieht nicht soo gefährlich aus, Gespräch könnte dauern Klickt OK

281 Besser:

282 Personas Erleichtern die Kommunikation Prüfstein bei Design- Entscheidungen

283 Personas Nicht immer einfach Spezielle Personas: Echte Zielgruppendaten notwendig Einblick in spezielle Abläufe / Philosophie einer Firma

284 Ein Hilfsmittel, nicht das Hilfsmittel

285 Aktivitäten

286 Fakt: Menschen passen sich an

287 Gute UI auch ohne genaue Kenntnis der Zielgruppe möglich

288 Alles eine Frage der Perspektive

289 Anwender wollen keine Software bedienen

290 Anwender wollen ihre Aufgaben erledigen

291 Problem:

292 Alles was man als Entwickler dem Anwendern zeigt, ist ein potentielles Hindernis!

293 Dialoge Popups Eingaben...einfach alles

294 Hindernisse beseitigen Nicht: UI Wrapper auf die API Use Cases aufschreiben Gute Defaults Abläufe rundlutschen

295 Mentales Modell

296 Mentales Modell Entsteht im Kopf der Anwender Versuch, Verhalten (der GUI) erklärbar nachvollziehbar vorhersagbar zu machen

297

298

299

300

301 Mentale Modelle sind...

302 persönlich

303 wechselnd

304 unvollständig

305 häufig falsch

306 Anwender machen sich ein Modell - ob es uns passt oder nicht

307 Deshalb: Modellbildung in die richtigen Bahnen lenken!

308 Beispiel Windows Phone 7

309 Windows Phone 7 Sample

310 Windows Phone 7

311 Wichtig: Das richtige mentale Modell

312 Infonea Dynamic Report Explorer Business Intelligence Client für den Zugriff auf mehrere 100 Mio. Datensätze Report : Vom Anwender interaktiv erstellte Seite mit Tabellen, Listen, Diagrammen, etc. Dynamic : Filterung von Daten, Aktualisierung ca. 1-2 Sekunden Aufgabe: Export von Reports nach PowerPoint

313 Seitenkopf mit Menü + Logo Beruf Anwendungsentwickler Interface Designer Software-Architekt Tester Firmengröße Lorem Lieblingsfarbe Ipsum

314 Anwendersicht Menüpunkt "Erzeuge PowerPoint" Just Do It

315 Technische Sicht Menüpunkt "Erzeuge PowerPoint" Übertragung an Server Layout skaliert Überschriften als Text Inhalte als Bitmap Erzeugung auf Server Download

316 Problem: Scrollbars Layout umrechnen Als Bitmap

317 Problem: Scrollbars Beruf Anwendungsentwickler Interface Designer Software-Architekt Tester Firmengröße Beruf Anwendungsentwick Interface Designer Software-Architekt Tester Firmengröße

318 Probleme Herausforderungen Benutzer sollen kleine Korrekturen am Layout vornehmen können Benutzer sollen mehrere Seiten einsammeln können

319 Mehrere Seiten: Warenkorb

320 Layout Interaktive Export- Vorschau, Layout- Bearbeitung durch den Anwender In den Warenkorb Ablage von Layout- Infos auf dem Client

321 Übertragung der Layout- Infos an den Server PowerPoint-Erzeugung Download

322 GUI Texte Ansicht bearbeiten und in den Warenkorb Warenkorb als PowerPoint exportieren

323 Will ich eine Ansicht bearbeiten und in den Warenkorb legen?

324 Ist ein Warenkorb das richtige Modell?

325 Ich will Folien erzeugen

326

327

328 Erzeuge Folie

329 Erzeuge Folie

330 Erzeuge Folie

331 Erzeuge Folie Die PowerPoint-Präsentation ist eigentlich schon da...

332 ...ich muss sie nur noch abspeichern

333 GUI Texte Erzeuge Folie" Speichere PowerPoint-Datei

334

335 Zum Schluss: Doch noch Kochrezepte

336 5 Schritte zum Erfolg

337 Schritte zum Erfolg 1. Welche Aufgabe soll der Anwender erledigen können? Was ist der Kern der Sache? APIs & Technik vergessen Ruhig mal extrem denken Don t make me think!

338 Schritte zum Erfolg 2. Wo soll der Anwender zuerst hinschauen? Hierarchie der Wichtigkeit Einstiegspunkte für das Auge Dominanz (fett, Farbe, Größe) Whitespace

339 Schritte zum Erfolg 3. Was soll der Anwender möglichst wahrnehmen? Zusammenhänge: Nähe Texte: Jedes Wort zählt Ansprache: Ermutigen! Und nochmal: Whitespace!

340 Schritte zum Erfolg 4. Wovor könnte der Anwender Angst haben? Misserfolg: Was tun bei Panik? Ratlosigkeit: Kleinigkeiten helfen! Datenverlust: Eingaben sind heilig! Ungerechtigkeit: Ist die GUI fair?

341 Schritte zum Erfolg 5. Was macht Einsteiger schnell zu erfahrenen Anwendern? Mentales Modell steuern Für Konsistenz sorgen Ausprobieren ermutigen Richtiges Wussten Sie schon?

342 ANHANG

343 #1 Handwerkszeug aus der Praxis

344 Viele UI-Ideen schnell generieren

345 Skizzen auf Papier Mockups

346 Skizzen auf Papier PRO Schnell Geringe Hemmung, Entwürfe wegzuwerfen Ideal für das Arbeiten zu Zweit CONTRA Ändern/Überarbeiten nicht einfach Hohe Qualität bedeutet schnell erheblichen Aufwand Weiter- bzw. Wiederverwendung schwierig

347 Mockup (auch Mock-up)

348 Mockup: Attrappe, mehr oder weniger nah am denkbaren Endergebnis vs. Prototyp: (ggf. eingeschränkt) funktionstüchtiges Versuchsmodell

349 Mockup low fidelity Wireframe PowerPoint Mockup high fidelity / pixel perfect Visual Comp PhotoShop Mockup

350 Wireframe Idee: Look and Feel von Skizzen auf Papier, aber in elektronischer Form Produkte: Sketchflow, Balsamiq Mockups

351

352

353 PowerPoint Mockups Typ A: Mit PowerPoint komplette GUIs malen Typ B: Screenshot auf Folie kopieren, dann mit PowerPoint modifizieren

354 Überweisung Begünstigter Max Mustermann Konto-Nr Bankleitzahl Kreditinstitut BeispielBank Betrag: ,00 OK

355 X Lorem Ipsum

356 X Lorem Ipsum

357 Visual Comp Mit Grafikprogramm erstellter, pixelgenauer Entwurf Von Null aus: Schwierig Aber: Ausgehend von einem Screenshot: Sollte jeder GUI- Entwickler schnell können

358

359

360 MUST: Malprogramm beherrschen lernen.

361 W A S D

362 Basics Bitmap-Bearbeitung Schnell Rein/rauszoomen Richtig Kopieren/Verschieben Pixel-Farbe bestimmen, Linie zeichnen Abstände bestimmen

363 #2 Lesematerial

364 UX Interaction Guidelines Online und als PDF-Download -us/library/aa aspx

365 Bücher The Non-Designer's Design Book Design-Grundkonzepte wie Nähe, Ausrichtung, Kontrast, etc.

366 Bücher Design & Typographie für Dich Deutsche Ausgabe von T.N.D.D.B Qualität:?

367 Bücher Don t Make Me Think Oft zitierte, gut lesbare Einführung in grundlegende Usability-Themen

368 Bücher Designing Interfaces 2nd Edition Interaction Patterns, gute Mischung aus Beispielen + Theorie

369 Bücher Designing the Obvious Anwender, Use Cases, mentale Modelle, schrittweise Verfeinerung

370 Bücher Simple and Usable Vereinfachung am Beispiel einer DVD-Fernbedienung: So einfach wie möglich, aber nicht einfacher

371 Lorem Ipsum Oft verwendeter Blindtext als Platzhalter im Layout Geschichte + Generator auf Word, PowerPoint: =lorem( < absätze >, < sätze > )

372 Fragen?

373 Vielen Dank!

374 Kontakt weblogs.asp.net/rweigelt

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 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

Mehr

Magazin der Valeo-Verbundkliniken. Analysiert. Abgefahren. Ausgebildet

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?

Mehr

Das Internet der Dinge

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

Mehr

qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty opasdfghjklzxcvbnmqwertyuiop

qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty opasdfghjklzxcvbnmqwertyuiop qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty Wissenschaftliche Arbeit uiopasdfghjklzxcvbnmqwertyui mit Word 2010 24.02.2014 opasdfghjklzxcvbnmqwertyuiop

Mehr

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 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

Mehr

Inhalte einsetzen und Formatieren

Inhalte einsetzen und Formatieren Inhalte einsetzen und Formatieren Damit wir die Standard Formatierung des Layouts/Templates sehen können, erstellen wir einen Beitrag und einen Menüpunkt Formate. In diesen Beitrag werden wir dann einen

Mehr

Donec eget tellus aliquam augue feugiat mollis

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

Mehr

Einführung CD/CI Unser Engagement sichtbar machen

Einführung CD/CI Unser Engagement sichtbar machen Einführung Einführung CD/CI Unser Engagement sichtbar machen Die ist eine humanitäre Organisation und ein Sportverband zugleich. Sie blickt auf eine lange Tradition zurück, die 1933 aus einem wichtigen

Mehr

kunst universität graz corporate design logo system

kunst universität graz corporate design logo system logo system 1 logo system kunst universität graz corporate design 29.07.2015 2 logo system logo 3 logo / primäre farbe 4 logo / primäre farbe logo auf weißem hintergrund 5 logo / primäre farbe logo auf

Mehr

Corporate Design Manual

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

Mehr

Bewerbung bei den Big 4 und im Consulting

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)

Mehr

UNSERE PRAXEN. unser höchstes Anliegen. Außer einer ersten fachkundigen, einfühlsamen Konsultation erwartet Sie daher eine umfassende Behandlung:

UNSERE PRAXEN. unser höchstes Anliegen. Außer einer ersten fachkundigen, einfühlsamen Konsultation erwartet Sie daher eine umfassende Behandlung: UNSERE PRAXEN Wir heißen Sie herzlich Willkommen in unseren Zahnarztpraxen! In 1997 haben wir unsere erste Zahnpraxis im Herzen von Mosonmagyaróvar, in der Fußgängerzone, eröffnet. Seither ist es unser

Mehr

Briefe und Rechnungen

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

Mehr

LAuF- TerMIne. aktiv Laufen - SPEZIAL Die große Saisonvorschau 2016 inklusive aller Lauftermine. Saisonstart. Ausrüstung Des Läufers neue Kleider

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

Mehr

MUSTER. culture connected 2015/16 Konzepteinreichung. EinreicherIn. Schule. Ansprechperson Schule. Projekt: Beispielhaftes Fotografieprojekt

MUSTER. culture connected 2015/16 Konzepteinreichung. EinreicherIn. Schule. Ansprechperson Schule. Projekt: Beispielhaftes Fotografieprojekt culture connected 2015/16 Konzepteinreichung Projekt: Beispielhaftes projekt Nr vor Jury: 010S EinreicherIn Einreichung, Projektleitung und Abrechnung durch Schule Schule Schulkennzahl 901011 Schulbezeichnung:

Mehr

sommer 2015 Les Chaussures Online - Schnell - Perfekt

sommer 2015 Les Chaussures Online - Schnell - Perfekt sommer 2015 Les Chaussures Online - Schnell - Perfekt DER SOMMER STEHT WIEDER VOR DER TÜR MIT NEUEN SCHUHEN! Liebe Kundin, lieber Kunde, wir freuen uns dieses Jahr besonders Ihnen unsere Herzstücke für

Mehr

Titel der Diplomarbeit

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.

Mehr

Design Manual. Nutzung und Gestaltung

Design Manual. Nutzung und Gestaltung Design Manual Nutzung und Gestaltung Inhalt Grundsätzliches 3 1. Dachmarke 4 1.1 Beschreibung 4 1.2 Anwendungsbereich und Nutzerkreis 5 1.2.1 Stadt Essen/Konzerntöchter 5 1.2.2 Partner des Prozesses 5

Mehr

Trauer- und Gedenkanzeigen

Trauer- und Gedenkanzeigen Stand 1/2017 Trauer- und Gedenkanzeigen Trauer- und Gedenkanzeigen in der taz.die tageszeitung Eine Trauer- bzw. Gedenkanzeige ist eine wichtige Möglichkeit, nicht nur Angehörige, sondern auch einen größeren

Mehr

Titel der Masterarbeit

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.

Mehr

Corporate Design Manual Straßenverkehrsamt Frankfurt am Main

Corporate Design Manual Straßenverkehrsamt Frankfurt am Main Corporate Design Manual Straßenverkehrsamt Frankfurt am Main Inhaltsverzeichnis Logotype Einsatz 3 Schutzraum 5 Logotype SVA und Logotype Stadt Frankfurt am Main Einsatz 7 Schutzraum 8 Typografie Einsatz

Mehr

2. DEUTSCHER COMPANY CUP 2017

2. DEUTSCHER COMPANY CUP 2017 2. DEUTSCHER COMPANY CUP 2017 54 47 N, 9 26 O PROGRAMM VORWORT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus

Mehr

Handreichung. Projektprüfung SJ2011/2012. Informationen für Schüler und Lehrer

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

Mehr

Hinweise für Autor/-innen

Hinweise für Autor/-innen Hinweise für Autor/-innen 1. Allgemeine Hinweise Bitte lesen Sie die Hinweise für Autor/-innen und die Richtlinien der Herausgeber/-innen (Editorial Policy), bevor Sie ein Manuskript für die Publikation

Mehr

Montageanleitung. Schritt 1. Schritt 2. Schritt 3. Demontage der alten Duschwanne. Der Untergund sollte tragfähig sowie staub-, und fettfrei

Montageanleitung. Schritt 1. Schritt 2. Schritt 3. Demontage der alten Duschwanne. Der Untergund sollte tragfähig sowie staub-, und fettfrei So renoviert man heute Badezimmer! Montageanleitung Schritt 1 Demontage der alten Duschwanne. Der Untergund sollte tragfähig sowie staub-, und fettfrei sein. Schritt 2 Fehlenden Fliesenbelag und Rücksprünge

Mehr

Wunder MODERNER BAUKUNST von Dubai

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

Mehr

Tagungs- und Seminarguide

Tagungs- und Seminarguide Tagungs- und Seminarguide Hotels und Veranstaltungsorte Tagungshotels Bildungszentren Kongresszentren Eine Verlagsbeilage von sieben kooperierenden Verlagen: Eine Verlagsbeilage von acht kooperirenden

Mehr

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 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

Mehr

Titel der Präsentation

Titel der Präsentation Platzhalter für Bild, Bild auf Titelfolie hinter das Logo einsetzen Titel der Präsentation Vorname, Nachname des Referenten, Datum Hier steht eine einzeilige Headline Nullam pulvinar lorem sed enim placerat

Mehr

Unternehmenspräsentation. Wien 2012

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

Mehr

VIVA Publishing Lösungen: Produktübersicht 2012/2013

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

Mehr

Vorlagen in MediaWiki

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

Mehr

GUIDE CORPORATE DESIGN

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

Mehr

Vorhang auf... Zehn exklusive Template-Vorlagen für Ihr Xeasy-Projekt. Individuell angepasst für einzigartiges Aussehen.

Vorhang auf... Zehn exklusive Template-Vorlagen für Ihr Xeasy-Projekt. Individuell angepasst für einzigartiges Aussehen. Vorhang auf... Zehn exklusive Template-Vorlagen für Ihr Xeasy-Projekt. Individuell angepasst für einzigartiges Aussehen. Cafe Winter Gerichte Events Geschichte e Gerichte Saisonale Gerichte Winterkarte

Mehr

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 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

Mehr

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 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

Mehr

Klug kombinieren - dual studieren. Informationen für Studieninteressierte.

Klug kombinieren - dual studieren. Informationen für Studieninteressierte. Klug kombinieren - dual studieren Informationen für Studieninteressierte www.th-brandenburg.de Prof. Dr.-Ing. Burghilde Wieneke Toutaoui Präsidentin der Technischen Hochschule Brandenburg Die Technische

Mehr

Tipps und Tricks. für die PDF-Präsentation

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

Mehr

Leitfaden Kommunikation

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

Mehr

Fördern Sie Ihr. nachhaltig

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

Mehr

Herr Bundesrat, sagen Sie einfach, hinter jedem guten Film steht das MEDIA Programm.

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

Mehr

Briefe in L A TEX eine kleine Vorstellung von Briefklassen

Briefe in L A TEX eine kleine Vorstellung von Briefklassen Christian Degenkolb Briefe in L A TEX eine kleine Vorstellung von Briefklassen 20. Juni 2010 L A TEX-User-Treffen Freiberg Inhalt Die letter-klasse Die g-brief-klasse Ein paar Worte zu DIN 5008 und 676

Mehr

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 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

Mehr

PORTFOLIO Kristin Klasinski

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

Mehr

15th AnniversAry A BACkwArd glance edition BCC est. in 2001

15th AnniversAry A BACkwArd glance edition BCC est. in 2001 The Place to Be 15th Anniversary A Backward glance edition BCC est. in 2001 BCC est. in 2001 6 Dinner Impressum Herausgeber: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula

Mehr

PowerPoint-Master. Titel der Säulengrafik (Entwicklung) In Tausend Euro. Der Untertitel ist etwas kleiner

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

Mehr

XPSNET. Xperts. Passion. Success. Unser Leistungsportfolio

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.

Mehr

Ideen Visualisierung Realisation

Ideen Visualisierung Realisation Ideen Visualisierung Realisation Am Anfang steht das Wort Austausch und Dialog Lorem ipsum dolor sit amet, consectetuer Interesse elit, sed diam Planung nibh euismod tincidunt ut laoreet dolore magna aliquam

Mehr

CD-HANDOUT. Das Corporate Design der Technischen Universität Chemnitz Version 5 Mai 2014

CD-HANDOUT. Das Corporate Design der Technischen Universität Chemnitz Version 5 Mai 2014 CD-HANDOUT Das Corporate Design der Technischen Universität Chemnitz Version 5 Mai 2014 1 2 Inhalt Wort-Bild-Marke der TU Chemnitz Seite 5 Festlegung für den Einsatz und die Verwendung Hausfarben und Fakultätsfarben

Mehr

Spectabilität, sehr geehrter Herr Professor Bicker, sehr geehrte Damen und Herren,

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

Mehr

Fallstudie Destinationsmarketing. München, April 2012

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

Mehr

HOME ÜBER ALETSCHBAU KAUFEN VERKAUFEN WIR BAUEN FÜR SIE KONTAKT AKTUELL UNSER CREDO TEAM REFERENZEN

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

Mehr

Design-Handbuch. für das Erscheinungsbild des Bundes der Freien Waldorfschulen

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

Mehr

Darüber hinaus findet der Empfänger des Briefs auch auf den ersten Blick die Angaben, nach denen er sucht sie stehen genau da, wo man sie erwartet.

Darüber hinaus findet der Empfänger des Briefs auch auf den ersten Blick die Angaben, nach denen er sucht sie stehen genau da, wo man sie erwartet. DIN-BRIEF IN VEREINFACHTER AUSFÜHRUNG Seite 1: Seite 2: Seite 3: Erläuterungen Modell Beispiel WARUM DIN-NORM? Im Geschäftsleben gilt für Briefe die DIN-Norm 5008 Form A oder Form B. Hierbei handelt es

Mehr

Kapitel 1 2 14. Februar 2010

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

Mehr

Mediadaten 2017 ÖSTERREICH RANKINGS & ANALYSEN. Kanzleikennzahlen

Mediadaten 2017 ÖSTERREICH RANKINGS & ANALYSEN. Kanzleikennzahlen Mediadaten 2017 www.juve-verlag.at exklusiv: Kanzleikennzahlen H A N D B U C H ÖSTERREICH 2017 2018 RANKINGS & ANALYSEN RANKINGS & ANALYSEN RANKINGS & ANALYSEN RANKINGS & ANALYSEN RANKINGS & ANALYSEN RANKINGS

Mehr

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 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

Mehr

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 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

Mehr

Logos, Wortmarken und Signets

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

Mehr

Lorem ipsum dolor sit amet, consectetuer

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

Mehr

Guidelines für PR-Artikel

Guidelines für PR-Artikel JOURNAL KUNDENMAGAZIN JOURNAL DES CLIENTS Guidelines für PR-Artikel Text-Guidelines für PR-Artikel «Journal» Winterhalter + Fenner I. Vorbemerkung Nachfolgende Hinweise sind im Sinne von Richtlinien für

Mehr

Content Mining. Semantic Text Mining. Semantic Text Mining Content Based Retrieval Visualisierung als Schlüssel. Technologie und Datenquellen MindNet

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

Mehr

S e m i n a r a r b e i t im Wissenschaftspropädeutischen Seminar Pseudo Latin Languages

S e m i n a r a r b e i t im Wissenschaftspropädeutischen Seminar Pseudo Latin Languages Lorem-Ipsum-Test-Gymnasium Abiturjahrgang 2014 Qualifikationsphase S e m i n a r a r b e i t im Wissenschaftspropädeutischen Seminar Pseudo Latin Languages Lorem Ipsum Verfasser: Leitfach: Seminarleiter:

Mehr

Spielplan SaiSon 09/10

Spielplan SaiSon 09/10 Spielplan 1. BundeS liga SaiSon 09/10 Liebe Fußballfreunde und freundinnen! Eine neue Saison der FußballBundesliga steht bevor. Sicher können auch Sie es kaum erwarten, bis in den Stadien wieder der Ball

Mehr

VIVA Publishing Lösungen: Produktübersicht 2009/2010

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

Mehr

Manual der Landesregierung Stand Mai 2010

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

Mehr

Trainingaktuell. Stressbewältigung wird zum Top Thema. Visualisierungstipps für Präsentationen und Trainings

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

Mehr

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 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

Mehr

Barrierefreiheit in Webauftritten - BayBITV

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

Mehr

Festpreisangebot Nr. 29. Festpreisangebot Nr. 40

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

Mehr

F Ü R DA S. Kampagnen Design Z U R E U ROPAWA H L 2 014

F Ü R DA S. Kampagnen Design Z U R E U ROPAWA H L 2 014 K U RZ A N LE IT U NG F Ü R DA S Kampagnen Design Z U R E U ROPAWA H L 2 014 Das visuelle Erscheinungsbild der Kampagne beeinflusst den kommunikativen Erfolg. Je konsequenter die Elemente des Erscheinungsbildes

Mehr

VivaDesigner : Desktop- und Web-Version

VivaDesigner : Desktop- und Web-Version VivaDesigner : Desktop- und Web-Version WE PUBLISH THE WORLD Willkommen in der Zukunft Der VivaDesigner ist das weltweit einzige Satz- und Layoutprogramm für Desktop und Web. Mit seinen wegweisenden Konzepten

Mehr

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 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

Mehr

ERASMUS- Erfahrungsbericht

ERASMUS- Erfahrungsbericht ERASMUS- Erfahrungsbericht Universidad de Castilla La Mancha Cuenca Stella Härpfer 2013 Nina Silberhorn 2013 Stella Härpfer 2013 Auf facebook gibt es eine Seite https://www.facebook.com/groups/ 178252902345989/,

Mehr

1 Wort-Bild-Marke. Standardanwendung In der Standardanwendung steht das Logo in Gold auf einem schwarzem Hintergrund.

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

Mehr

EnergieSchweiz Corporate Design 12. Januar 2017

EnergieSchweiz Corporate Design 12. Januar 2017 EnergieSchweiz Corporate Design 12. Januar 2017 INHALTSVERZEICHNIS BASISINFORMATIONEN....3 8 Logo «Verwendung»...4 Logo «Grösse»...5 Schriftarten...6 Farben...7 ICONS, ENERGICO, COLLAGE.... 8 12 GRAFISCHE

Mehr

P r o f i l + das Tool für kompetenzbasierte Personalentwicklung

P r o f i l + das Tool für kompetenzbasierte Personalentwicklung P r o f i l + das Tool für kompetenzbasierte Personalentwicklung Idee Die Firma hi-cons GmbH in Bern befasst sich mit Fragen der Personal- und Organisationsentwicklung. Neben Schulungs- und Beratungsangeboten

Mehr

Dataforce Analytics Öko-Studie Beispielanalyse

Dataforce Analytics Öko-Studie Beispielanalyse Dataforce Analytics Öko-Studie 2016 Beispielanalyse Übersicht Zustimmung zu vorgelegten Aussagen Die zu bewertenden Aussagen lauten wie folgt: Der geringe CO 2 -Ausstoß des Fahrzeugs spielt bei der Auswahl

Mehr

W&V Extra Automobil: Marken & Marketing

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.

Mehr

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. 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

Mehr

Das Corporate Design in LATEX

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:

Mehr

Das Corporate Design in LATEX

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:

Mehr

A/B-Testing. Kaizen für ihre Website. Stand 04.14

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

Mehr

Zürichsee Caravan. Zürichsee Caravan. Corporate Design Manual 2010. Samir Hasani

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

Mehr

westside, Bern Migros

westside, Bern Migros D/E Portrait Leistungen Referenzen Prime Tower, Zürich Prime Tower Kontakt D/E Portrait Leistungen Referenzen Kontakt Prime Tower, Zürich Prime Tower HC AG verfügt über ein breitgefächertes und internationales

Mehr

Retargeting Technologie. www.adrolays.de

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

Mehr

Sylvia Achenbach SAMedienberatung. Jürgen Walleneit MSH AND MORE Werbeagentur GmbH

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

Mehr

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 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

Mehr

Deutsch. EVP-Fraktion Presse- und Kommunikationsdienst. Gestaltungsrichtlinie

Deutsch. EVP-Fraktion Presse- und Kommunikationsdienst. Gestaltungsrichtlinie Deutsch EVP-Fraktion Presse- und Kommunikationsdienst Gestaltungsrichtlinie Version : 01/10/2012 Wozu eine Gestaltungsrichtlinie? Im Mai 2011 beschloss die EVP-Fraktion, all ihre Veröffentlichungen zentral

Mehr

Castor. Dokumentation

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

Mehr

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. - 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

Mehr

Textvergleich-Gutachten

Textvergleich-Gutachten Textvergleich-Gutachten Der 60tools Textvergleich hat zwei Texte auf ihre Ähnlichkeit miteinander verglichen. Dabei wurde auftragsgemäß ermittelt, wie und worin sich die Texte unterscheiden. Für die ermittelten

Mehr

unsere seminare in Zusammenarbeit mit Jens der Denker Mehrfacher Weltrekordhalter und Buchautor

unsere seminare in Zusammenarbeit mit Jens der Denker Mehrfacher Weltrekordhalter und Buchautor unsere seminare in Zusammenarbeit mit Jens der Denker Mehrfacher Weltrekordhalter und Buchautor www.eranimes.de 1 inhalt Motivationsvortrag 3 sandra la cognata Inhaberin der Agentur»Eranimes - anders denken«sandra

Mehr

Handhaben von Problemen mit Kivitendo

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

Mehr

Manual Logoanwendung Energiewende Hamburg

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

Mehr

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 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

Mehr

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 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,

Mehr

Das Corporate Design der Fachhochschule Brandenburg. Die Grundelemente und ihre Anwendung

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

Mehr

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! 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

Mehr

Corporate Design Manual. Informationen zum visuellen Erscheinungsbild von Sternenspiegel

Corporate Design Manual. Informationen zum visuellen Erscheinungsbild von Sternenspiegel Corporate Design Manual Informationen zum visuellen Erscheinungsbild von Sternenspiegel Stand Januar 2012 Corporate Design Inhalt Sternenspiegel 3 Logo 4 Farben 5 Schriften 6 Visitenkarte 7 Flyer 8 Faltflyer

Mehr