![Page 1: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/1.jpg)
UI / UX-Grundlagen
für Entwickler ...und andere Nicht-Designer
Roland Weigelt
.NET Developer Group Braunschweig
![Page 2: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/2.jpg)
Roland Weigelt
Beruflich: Comma Soft AG
15 Jahre Software-Entwickler ▪ Bereich Enterprise-Anwendungen
seit Januar User Experience Specialist
Privat u.a.
.NET Community (BN2C, DNC12)
*.psd, *.wmv, *.pptx
![Page 3: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/3.jpg)
Entwickler,
kein Designer
![Page 4: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/4.jpg)
Wie erstelle ich
grandios fantastische
User Interfaces?
![Page 5: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/5.jpg)
Wie erstelle ich
grandios fantastische
User Interfaces?
![Page 6: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/6.jpg)
Wie erstelle ich
brauchbare
User Interfaces?
![Page 7: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/7.jpg)
Ausblick
UI/UX für Entwickler
Crash-Kurs „Visuelles Design“
...und was ist User Experience?
User Interface Patterns
Muster, überall Muster!
Daten: Eine Frage des Charakters
Umgang mit Komplexität
![Page 8: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/8.jpg)
![Page 9: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/9.jpg)
Design
![Page 10: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/10.jpg)
Gutes Design?
![Page 11: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/11.jpg)
Gutes Design?
![Page 12: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/12.jpg)
![Page 13: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/13.jpg)
![Page 14: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/14.jpg)
Crash-Kurs:
Visuelles Design
![Page 15: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/15.jpg)
![Page 16: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/16.jpg)
Visuelle
Wahrnehmung
![Page 17: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/17.jpg)
![Page 18: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/18.jpg)
![Page 19: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/19.jpg)
Peripher
Foveal
![Page 20: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/20.jpg)
Foveale Wahrnehmung
Hohe räumliche Auflösung
Sehr geringer Winkelbereich
Periphere Wahrnehmung
Hohe zeitliche Auflösung
Unscharf, räumlich verzerrt
![Page 21: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/21.jpg)
![Page 22: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/22.jpg)
![Page 23: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/23.jpg)
![Page 24: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/24.jpg)
![Page 25: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/25.jpg)
![Page 26: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/26.jpg)
Augenbewegung
„Arbeitsspeicher“
Erinnerungen
Mustererkennung
![Page 27: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/27.jpg)
Gestalttheorie
![Page 28: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/28.jpg)
Gestalttheorie
Frage: Nach welchen Gesetzen
verbindet der Mensch einzeln
wahrgenommene Elemente
zu neuen Gestalten mit eigenen,
ganzheitlichen Eigenschaften?
![Page 29: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/29.jpg)
![Page 30: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/30.jpg)
![Page 31: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/31.jpg)
![Page 32: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/32.jpg)
![Page 33: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/33.jpg)
Gestaltgesetze?
![Page 34: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/34.jpg)
Gestaltgesetze?
Beobachtungen formuliert
Keine Erklärung
Phänomene selten isoliert,
Konkurrenz untereinander
Eher Regeln als Gesetze
![Page 35: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/35.jpg)
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
![Page 36: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/36.jpg)
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
![Page 37: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/37.jpg)
Gesetz der Ähnlichkeit
Gleiche oder ähnliche Elemente
werden als zusammengehörig
wahrgenommen.
![Page 38: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/38.jpg)
Ähnlichkeit
![Page 39: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/39.jpg)
![Page 40: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/40.jpg)
Gesetz der Nähe
Elemente mit geringen
Abständen zueinander werden
als zusammengehörig
wahrgenommen.
![Page 41: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/41.jpg)
Nähe
![Page 42: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/42.jpg)
1 2 3
4 5 6
7 8 9
![Page 43: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/43.jpg)
1 2 3
4 5 6
7 8 9
I 0 J
A
C
E
G
B
D
F
H
![Page 45: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/45.jpg)
Sozusagen die
„Firmware“ der
menschlichen
Wahrnehmung
![Page 46: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/46.jpg)
In komplexen
Situationen nicht
immer 100%
vorhersehbar...
![Page 47: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/47.jpg)
...aber gute
Vorhersage, was
nicht funktioniert!
![Page 48: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/48.jpg)
![Page 49: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/49.jpg)
Gestaltungsprinzipien
![Page 50: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/50.jpg)
Anforderungen
an brauchbares
Visuelles Design
![Page 51: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/51.jpg)
Konsistenz
Ordnung
Ausgewogenheit
![Page 52: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/52.jpg)
Oder auch:
„Aus einem Guss“
![Page 53: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/53.jpg)
Ausrichtung
![Page 54: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/54.jpg)
Ausrichtung schafft
starke Kanten
Diese wirken auch über
größere Entfernung
...allerdings nicht auf dieser Folie!
![Page 55: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/55.jpg)
Ausrichtung schafft
starke Kanten
Diese wirken auch über
größere Entfernung
![Page 56: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/56.jpg)
Ausrichtung schafft
starke Kanten
Diese wirken auch über
größere Entfernung
![Page 57: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/57.jpg)
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.
![Page 58: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/58.jpg)
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.
![Page 59: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/59.jpg)
Wichtigstes Hilfmittel für eine
einheitliche Ausrichtung:
Gitter (Grid)
![Page 60: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/60.jpg)
![Page 61: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/61.jpg)
![Page 62: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/62.jpg)
![Page 63: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/63.jpg)
![Page 64: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/64.jpg)
![Page 65: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/65.jpg)
Konstruktion nach dem goldenen Schnitt
![Page 66: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/66.jpg)
Kein Gitter, aber einheitliche Abstände
![Page 67: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/67.jpg)
Kein Gitter, aber einheitliche Abstände
![Page 68: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/68.jpg)
Dominanz
![Page 69: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/69.jpg)
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
![Page 70: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/70.jpg)
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
![Page 71: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/71.jpg)
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
![Page 72: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/72.jpg)
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
![Page 73: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/73.jpg)
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
Wichtig Wichtig Wichtig Wichtig
![Page 74: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/74.jpg)
Dominanz ergibt sich, wenn einem
oder mehreren Elementen durch Farbe, , Form ,
Ausrichtung
oder Größe besonderes Gewicht gegeben wird
![Page 75: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/75.jpg)
...
besonderes Gewicht
...
![Page 76: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/76.jpg)
...
besonderes Gewicht
...
![Page 77: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/77.jpg)
„Wettrüsten“
vermeiden!
Whitespace
![Page 78: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/78.jpg)
![Page 79: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/79.jpg)
...
besonderes Gewicht
...
![Page 80: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/80.jpg)
Visuelles Gewicht
![Page 81: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/81.jpg)
![Page 82: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/82.jpg)
![Page 83: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/83.jpg)
![Page 84: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/84.jpg)
Intensität
Farbe
Größe
Detailgrad
![Page 85: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/85.jpg)
Visuelle Hierarchie
![Page 86: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/86.jpg)
Fakt:
Die reale Welt
ist komplex
![Page 87: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/87.jpg)
Lies mich
Ideal
![Page 88: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/88.jpg)
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
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 mich
Real
![Page 89: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/89.jpg)
Es kann nicht alles
gleich wichtig sein
![Page 90: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/90.jpg)
Also: Priorisieren
![Page 91: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/91.jpg)
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
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 mich
Alles gleich wichtig
![Page 92: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/92.jpg)
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
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 mich
Priorisiert
![Page 93: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/93.jpg)
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
![Page 94: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/94.jpg)
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...
![Page 95: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/95.jpg)
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...
![Page 96: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/96.jpg)
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...
![Page 97: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/97.jpg)
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.
![Page 98: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/98.jpg)
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
![Page 99: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/99.jpg)
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
![Page 100: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/100.jpg)
Beispiel:
Team-Aufstellung
![Page 101: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/101.jpg)
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
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
Team 2009/2010 Team 2010/2011 Team 2011/2012
Telekom Baskets Bonn
![Page 102: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/102.jpg)
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
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
Team 2008/2009 Team 2009/2010 Team 2011/2012
Telekom Baskets Bonn
![Page 103: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/103.jpg)
Team 2009/2010
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
Team 2010/2011
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
Team 2011/2012
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
Telekom Baskets Bonn
Ausrichtung
![Page 104: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/104.jpg)
Telekom Baskets Bonn
Ausrichtung
Team 2009/2010
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
Team 2010/2011
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
Team 2011/2012
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
![Page 105: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/105.jpg)
Telekom Baskets Bonn
Dominanz
Team 2009/2010
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
Team 2010/2011
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
Team 2011/2012
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
![Page 106: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/106.jpg)
Telekom Baskets Bonn
Hierarchie
Team 2009/2010
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
Team 2010/2011
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
Team 2011/2012
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
![Page 107: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/107.jpg)
Telekom Baskets Bonn
Hierarchie
2009/2010
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
2010/2011
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
2011/2012
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
![Page 108: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/108.jpg)
Telekom Baskets Bonn 2009/2010
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
2010/2011
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
2011/2012
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
![Page 109: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/109.jpg)
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
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
Team 2009/2010 Team 2010/2011 Team 2011/2012
Telekom Baskets Bonn
![Page 110: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/110.jpg)
Telekom Baskets Bonn 2009/2010
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
2010/2011
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
2011/2012
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
![Page 111: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/111.jpg)
![Page 112: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/112.jpg)
Zusammenfassung
Ausrichtung um Kanten zu
schaffen (ohne sie zu zeichnen)
Dominanz um wichtige
Einstiegspunkte zu markieren
Hierarchien für verständliche
Wichtigkeitsabstufung
![Page 113: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/113.jpg)
Zusammenfassung (Forts.)
Whitespace für Übersicht,
Lesbarkeit (und Wertigkeit)
Visuelles Gewicht beachten
und in Balance halten
![Page 114: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/114.jpg)
Also: Alles
ganz einfach...
![Page 115: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/115.jpg)
Regeln beachten
Gefälliges Design
Positive Emotionen
YOU ROCK!!!
![Page 116: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/116.jpg)
€ € € !
$ $ $ !
£ £ £ !
![Page 117: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/117.jpg)
DANGER!
USER DETECTED
Critical Situation, Threat Level ALPHA
46 4a d6 dd b5 c3 09 81 9a 05 c8 18 57 98 a1 fc 92 a6 4b b3 0a 02 17 e8 43 70 24 d7 4a 94 99 85 22 25 af 7e 10 4b 28 80 2b c1 53 5e 80 f6 a7 7d 22 4a b1 83 c1 4f b6 27 19 c3 ef aa e7 eb fb 4d b2 13 8e f3 87 f6 93 f4 b7 4b 8e 27 56 11 4a d7 76 d6 4a 5c bb 51 7b b3 11 ec d2 6c b4 2b 44 26 60 a4 e7 a7 16 06 9a 7a 83 c9 c7 61 80 c9 f7 f1 92 6d 8e 1d bf 9f ac ce
![Page 118: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/118.jpg)
Unser Problem:
Anwender sind
Menschen...
![Page 119: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/119.jpg)
...keine mobilen
Bildverarbeitungs-
systeme
![Page 120: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/120.jpg)
ängstlich
überheblich
ungeduldig
unlogisch
unvernünftig
ungerecht
![Page 121: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/121.jpg)
Klick,
Klick,
Klick,
Dreckstool!
![Page 122: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/122.jpg)
Ganzheitlicher
Ansatz
![Page 123: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/123.jpg)
User Experience
![Page 124: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/124.jpg)
User Experience
Nicht einfach die coole neue
Art „User Interface“ zu sagen
Das Gesamterlebnis eines
Nutzers bei Verwendung
eines Produktes oder Systems
![Page 125: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/125.jpg)
UX Design: Berührungspunkte
GUI Design
Visual/Graphic Design
Usability
Information Architecture
Information Design
Psychologie
![Page 126: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/126.jpg)
UX Design: Berührungspunkte
GUI Design
Visual/Graphic Design
Usability
Information Architecture
Information Design
Psychologie
![Page 127: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/127.jpg)
Empathie
![Page 128: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/128.jpg)
Mitgefühl
![Page 129: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/129.jpg)
„Wird der Anwender
das verstehen?“
![Page 130: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/130.jpg)
Wer ist eigentlich
der / die AnwenderIn?
![Page 131: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/131.jpg)
Einsteiger
vs.
Profis
![Page 132: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/132.jpg)
Gelegenheits-User
vs.
Power-User
![Page 133: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/133.jpg)
Profis als
Gelegenheits-User
vs.
Einsteiger als
Power-User
![Page 134: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/134.jpg)
?
![Page 135: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/135.jpg)
Rollen
![Page 136: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/136.jpg)
Rollen helfen
festzulegen, wer
was in der GUI
braucht
![Page 137: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/137.jpg)
Leser
Autor
Administrator
![Page 138: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/138.jpg)
Rollen sagen aber
nichts über das
Verhalten aus
![Page 139: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/139.jpg)
Zielgruppen
![Page 140: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/140.jpg)
Zielgruppen
werden durch
Clusterung von
Eigenschaften
definiert
![Page 141: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/141.jpg)
Zielgruppen
wecken aber
nur schwer
Emotionen beim
Entwickler
![Page 142: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/142.jpg)
85,9% der weiblichen
Waisenkinder unter
12 Jahren wünschen
sich ein Pony*
* Diese Aussage ist wie 38,3% aller Statistiken frei erfunden
![Page 143: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/143.jpg)
Lisa (11 Jahre) hat
ihre Eltern verloren
und wünscht sich
ein Pony
![Page 144: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/144.jpg)
Personas
![Page 145: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/145.jpg)
Persona
Virtuelle Person als
Stellvertreter einer Zielgruppe
Sehr genaue Beschreibung
vermittelt anschauliches Bild
![Page 146: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/146.jpg)
„Wird der Anwender
das verstehen?“
![Page 147: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/147.jpg)
„Wird die Zielgruppe
der Führungskräfte
mit begrenzten
IT-Kenntnissen
das verstehen?“
![Page 148: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/148.jpg)
„Wird Heinrich
das verstehen?“
![Page 149: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/149.jpg)
Heinrich
Abteilungsleiter (56)
2 Kinder, Haus am Stadtrand
Wenig Erfahrung mit Office
Im Zweifelsfall eher vorsichtig
Wichtiger Multiplikator
![Page 150: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/150.jpg)
Sabine
Sachbearbeiterin (26)
Single, Wohnung in der Stadt
Office + Business Apps im
Intranet, privat Social Apps
„Wurschtelt“ sich in Neues rein
![Page 151: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/151.jpg)
Beispiel
![Page 152: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/152.jpg)
Was Entwickler entworfen haben
![Page 153: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/153.jpg)
Was Anwender davon sehen
![Page 154: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/154.jpg)
Heinrich
„Hmm... klingt kompliziert...“
(Telefon klingelt)
Klickt Abbrechen
![Page 155: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/155.jpg)
Sabine
„Muss ich das alles lesen...“
(Telefon klingelt)
Sieht nicht soo gefährlich aus,
Gespräch könnte dauern
Klickt OK
![Page 156: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/156.jpg)
Besser:
![Page 157: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/157.jpg)
Personas
Erleichtern die
Kommunikation
Prüfstein bei Design-
Entscheidungen
![Page 158: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/158.jpg)
Personas
Nicht immer einfach
Spezielle Personas: Echte
Zielgruppendaten notwendig
Einblick in spezielle Abläufe /
Philosophie einer Firma
![Page 159: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/159.jpg)
Empathy Map
Brainstorming-Technik zum
schnellen Beschreiben einer
Persona
Ziel: Schnell und plausibel
Check durch Diskussion
![Page 160: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/160.jpg)
Was hört sie? Was sagen Freunde?
Was sagt der Chef?
Was sagen andere wichtige Leute?
Was sagt sie, wie handelt sie? Verhalten in der Öffentlichkeit?
Einstellung gegenüber anderen?
Gesprächsthemen?
Was denkt und fühlt sie? Was ist ihr wichtig?
Wovor hat sie Angst?
Was würde sie freuen?
Was sieht sie? Umfeld
Freunde
Wohnsituation
Marktangebot
Persona
„Pain“ Ängste, Probleme
Hindernisse
„Gain“ Was will sie, wo will sie hin?
Was würde sie als Erfolg werten?
![Page 161: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/161.jpg)
Szenario
Eine plausible Geschichte
über eine Persona, die ein
(zukünftiges) Produkt oder
Feature in einer bestimmten
Situation verwendet.
![Page 162: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/162.jpg)
Typische Story-Elemente
Hauptdarsteller
Konflikt
Handlung
Auflösung
![Page 163: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/163.jpg)
Beispiel: Franks erste Woche
Frank, Berufseinsteiger in der
Software-Entwicklung
Mögliche Geschichten
Kollegen kennenlernen
Ansprechpartner finden
Infrastruktur nutzen
![Page 164: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/164.jpg)
Franks erste Woche
Franks Ziel: Dokument drucken
Konflikt: Drucker noch nicht
eingerichtet
Handlung: Wie Frank heraus-
findet, welcher Drucker im
Netzwerk der richtige ist
![Page 165: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/165.jpg)
Franks erste Woche
Handlung
Frank erinnert sich an URL
http://intranet
Intranet-Website erkennt Frank als
neuen Mitarbeiter und bietet
typische Hilfestellungen an
Frank erfährt automatisch den für
seine Abteilung richtigen Drucker
![Page 166: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/166.jpg)
Franks erste Woche
Auflösung
Frank kann den Drucker einrichten
und das Dokument drucken
Aus Szenario ergeben sich
Anforderungen
Eigenschaften einer
erstrebenswerten Lösung
![Page 167: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/167.jpg)
Szenarien vs. Umsetzung
Nicht zu früh an konkrete
Lösungen denken
Ruhig erst einmal ein
bisschen „rumspinnen“
Mit „Happy Day“ beginnen,
dann Probleme betrachten
![Page 168: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/168.jpg)
Szenarien führen zu
Konkreten Anforderungen
Frank muss irgendwann drucken
Eigenschaften einer
erstrebenswerten Lösung
Frank kann den Drucker selbst
ohne viel Aufwand einrichten
![Page 169: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/169.jpg)
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
![Page 170: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/170.jpg)
Und wenn man
die Zielgruppe
gar nicht kennt?
![Page 171: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/171.jpg)
Aktivitäten
![Page 172: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/172.jpg)
Fakt: Menschen
passen sich an
![Page 173: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/173.jpg)
Alles eine Frage
der Perspektive
![Page 174: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/174.jpg)
Anwender wollen
keine Software
bedienen
![Page 175: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/175.jpg)
Anwender wollen
ihre Aufgaben
erledigen
![Page 176: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/176.jpg)
Problem:
![Page 177: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/177.jpg)
Alles was man als
Entwickler dem
Anwendern zeigt,
ist ein potentielles
Hindernis!
![Page 178: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/178.jpg)
Dialoge
Popups
Eingaben
...einfach alles
![Page 179: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/179.jpg)
Hindernisse beseitigen
Nicht: UI Wrapper auf die API
Reale Szenarien betrachten
Abläufe „rundlutschen“
Weniger Entscheidungen
Gute Defaults für Eingaben
![Page 180: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/180.jpg)
Mentales Modell
![Page 181: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/181.jpg)
Mentales Modell
Entsteht im Kopf der Anwender
Versuch, Verhalten (der GUI)
erklärbar
nachvollziehbar
vorhersagbar
zu machen
![Page 182: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/182.jpg)
![Page 183: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/183.jpg)
![Page 184: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/184.jpg)
![Page 185: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/185.jpg)
![Page 186: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/186.jpg)
Mentale
Modelle sind...
![Page 187: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/187.jpg)
persönlich
![Page 188: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/188.jpg)
wechselnd
![Page 189: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/189.jpg)
unvollständig
![Page 190: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/190.jpg)
häufig falsch
![Page 191: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/191.jpg)
Anwender machen sich
ein Modell - ob es uns
passt oder nicht
![Page 192: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/192.jpg)
Deshalb:
Modellbildung in die
richtigen Bahnen lenken!
![Page 193: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/193.jpg)
Beispiel
Windows Phone 7
![Page 194: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/194.jpg)
Windows Phone 7
Sample
![Page 195: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/195.jpg)
Windows Phone 7
![Page 196: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/196.jpg)
![Page 197: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/197.jpg)
FRAGEN?
![Page 198: Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig](https://reader030.vdocuments.site/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604d/html5/thumbnails/198.jpg)
15min Pause