Do's and Don'ts in Webdesign - Rails Girls Zurich Nov 2012

515 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
515
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Do's and Don'ts in Webdesign - Rails Girls Zurich Nov 2012

  1. 1. WebdesignDo & Don‘trahel@virtuallyhandmade.com
  2. 2. 10 min talk• 60 seconds about me• Vorgehen• Do & Don‘t• (Showcase Doodle)
  3. 3. Rahel VilsWeb & User Interface Designer• namics AG• Startup Cassiber AG• MAS HCI (in progress)
  4. 4. Keep it simple!But how?
  5. 5. 1. AusgangslageWas ist das eigentliche Ziel der Seite?
  6. 6. Was ist die „Call to action“• Was soll erreicht werden?Zielgruppe• Wer soll sich angesprochen fühlen?
  7. 7. 2. Definition des InhaltsWas soll wo platziert werden?
  8. 8. Priorisierung & Strukturierung• Mit Hilfe von Wireframes
  9. 9. 3. GestaltungWie soll das Ganzedaher kommen?
  10. 10. EmotionenTransportieren die Botschaft• Bilder, Grafiken & Icons• Farben• Schriften• Tonalität (Sie o. Du)Wähle immer hochwertige Erzeugnisse, ansonsten besser daraufverzichten.
  11. 11. Do - Choose the right colors
  12. 12. Do – use images
  13. 13. StrukturBringt Ruhe und schafft Übersicht• Klares Grid• Sinnvolle Text Hierarchie• Leitende Farben• Einheitlichkeit• Raum
  14. 14. Do – always use a grid
  15. 15. Do – work with a clear text hierarchy
  16. 16. Do – use color as a guide
  17. 17. Do – stay consistent
  18. 18. Do - let the white space in
  19. 19. ReduktionMacht Informationen schneller zugänglich• Inhaltlich & Elemente (Weniger ist mehr)• Navigation (5-7 Punkte)• 1-2 Fontarten (Hauptschrift, Headline)• Werbung (gezielt, abgrenzen)
  20. 20. Do – keep it short Call to action
  21. 21. Call to action
  22. 22. Don‘t – have more then 7navigationpoints
  23. 23. Don‘t - overboard with fonts
  24. 24. Do – separate you from the advertising
  25. 25. Thanks  

×