More resources for inspiration: http://www.awwwards.com http://www.cssdesignawards.com http://makebetterwebsites.com http://bestwebgallery.com http://www.blogduwebdesign.com http://creattica.com http://pinterest.com/search/?q=webdesign by Rahel Vils

1. Webdesign
Do & Don‘t
rahel@virtuallyhandmade.com

2. 10 min talk
•
60 seconds about me
•
Vorgehen
•
Do & Don‘t
•
(Showcase Doodle)

3. Rahel Vils
Web & User Interface Designer
•
namics AG
•
Startup Cassiber AG
•
MAS HCI (in progress)

4. Keep it simple!
But how?

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

6. Was ist die „Call to action“
• Was soll erreicht werden?
Zielgruppe
• Wer soll sich angesprochen fühlen?

7. 2. Definition des Inhalts
Was soll wo platziert werden?

8. Priorisierung & Strukturierung
• Mit Hilfe von Wireframes

9. 3. Gestaltung
Wie soll das Ganze
daher kommen?

10. Emotionen
Transportieren die Botschaft
• Bilder, Grafiken & Icons
• Farben
• Schriften
• Tonalität (Sie o. Du)
Wähle immer hochwertige Erzeugnisse, ansonsten besser darauf
verzichten.

11. Do - Choose the right colors

12. Do – use images

13. Struktur
Bringt Ruhe und schafft Übersicht
• Klares Grid
• Sinnvolle Text Hierarchie
• Leitende Farben
• Einheitlichkeit
• Raum

14. Do – always use a grid

15. Do – work with a clear text hierarchy

16. Do – use color as a guide

17. Do – stay consistent

18. Do - let the white space in

19. Reduktion
Macht Informationen schneller zugänglich
• Inhaltlich & Elemente (Weniger ist mehr)
• Navigation (5-7 Punkte)
• 1-2 Fontarten (Hauptschrift, Headline)
• Werbung (gezielt, abgrenzen)

20. Do – keep it short
Call to action

21. Call to action

22. Don‘t – have more then 7
navigationpoints

23. Don‘t - overboard with fonts

24. Do – separate you from the advertising

25. Thanks