Webdesign�Do & Don‘t

rahel@virtuallyhandmade.com

10 min talk

• 60 seconds about me • Vorgehen • Do & Don‘t • (Showcase Doodle)

• namics AG • Startup Cassiber AG • MAS HCI (in progress)

Rahel Vils Web & User Interface Designer

Keep it simple!�But how?

1. Ausgangslage�Was ist das eigentliche Ziel der Seite?

Was ist die „Call to action“ • Was soll erreicht werden?

Zielgruppe • Wer soll sich angesprochen fühlen?

2. Definition des Inhalts Was soll wo platziert werden?

Priorisierung & Strukturierung �• Mit Hilfe von Wireframes

3. Gestaltung Wie soll das Ganze �daher kommen?

Emotionen Transportieren die Botschaft�

• Bilder, Grafiken & Icons • Farben�• Schriften • Tonalität (Sie o. Du)

Wähle immer hochwertige Erzeugnisse, ansonsten besser darauf verzichten.

Do - Choose the right colors

Do – use images

Struktur Bringt Ruhe und schafft Übersicht�

• Klares Grid • Sinnvolle Text Hierarchie�• Leitende Farben • Einheitlichkeit • Raum

Do – always use a grid

Do – work with a clear text hierarchy

Do – use color as a guide

Do – stay consistent

Do - let the white space in

Reduktion Macht Informationen schneller zugänglich

• Inhaltlich & Elemente (Weniger ist mehr) • Navigation (5-7 Punkte) • 1-2 Fontarten (Hauptschrift, Headline) • Werbung (gezielt, abgrenzen)

Call to action

Do – keep it short

Call to action

Don‘t – have more then 7 navigationpoints

Don‘t - overboard with fonts

Do – separate you from the advertising

Thanks