BUILD 2014 – Session "Crashkurs Modern UI Design für Nichtdesigner"

5. April 2014
Peggy

Schlechte Nachricht vorweg: Die Nutzer beurteilen die Qualität einer App über das Design.
Hilfereicher Vergleich: Mehrere Apps gleichen Inhalts und unterschiedlichen Design vergleichen.

Branding zeigt dem Nutzer an, was er inhaltlich erwarten darf.

Eine Marke ist das, was in den Kopf Herzen und Köpfen passiert. Es ist nicht nur  das Logo, sondern das Look & Feel. Das Logo kann enfernt sein und man sieht dennoch, dass es die jeweilige Marke ist.

Was macht eine Marke aus?

1. Logos in ihrer verschiedenen Ausprägung und Icons, die zum Logo passen

2. Farbset mit Haupt- und Nebenfarben mit klarem Einsatz

3. Hintergründe, Eyecatcher und Dekoelemente als kleine Hinweise

4. Typografie – Schriftarten, Schriftdicken, Schriftgrößen und entsprechender Einsatz

5. Wenn man einen Sound hat, ist das super …

Gute Usability gepaart mit gutem Design

Eine App erfolgt eine Kernaufgabe und deren Unteraufgaben besonders gut. Dann hat man einen guten Anfang in der Usability, aber noch kein Design. Nun also in wenigen Schritten besser:
1. Finde ein paar Farben (kuler.adobe.com liefert Farbvorschläge für verschiedenste Suchbegriffe). Ein Spektrum aus einer dunklen, einer hellen, einer Akzentfarbe und zwei Zusatzfarben. Diese Palette kann man dann super in Blend übertragen.

2. Eine gute Schrift finden. Sicher ist Segeo UI gut, aber nicht bei jeder Zielgruppe und jeder Marke. www.fontsquirrel.com für gute Schriften auch zum kommerziellen Einsatz. Schriftintegration sollte man am besten über Visualstudio machen. Nach der Integration muss man die Schriftfamilien durchdeklinieren in der App-XAML.

3. Ein Logo-Entwurf wird nötig und unumgänglich.
Bitte keine Paint-Kunst oder Clipart oder Bild aus Google oder peinliche Typo oder I-Phone-Icons
Hoffnung liefert www.thenounproject.com Das Logo tauscht nicht nur in den Logo-Dateien auf, sondern auch auf der Startseite.

4. Hintergrundbilder
Die einfachen Dinge sind manchmal die besten. So kann nur ein leicht abgeschrängtes Rechteck im Panorma View Charmanter sein als ein Foto. www.dinpattern.com

5. Liebe, Arbeit und Qualität in die Data-Templates stecken durch:
Anordnung, Ausrichtungen, Aufteilungen, kleine Grafiken, Führungsf+barben, Hinterlegungen, Entsprechende Umarbeitungen von Controls wie z. B. Progressbar oder Checkboxen. Der Fokus liegt dabei auf Blickführung und Hervorhebung für den Nutzer.

Grossartige Beispiele über alle 2-4 Plattformen Phone, Tablet, Desktop, XBox

Netflix (alle 4)
HuluPlus
Great British Chefs
FourSquare

Nette reine Windows App:
AlarmClock
Disney Dress Up
design.windows.com
dev.windowsphone.com/design