How to design for the web


Published on

Danny Bluestone from Cyber-Duck held workshops educating pupils and young students in Hackney, London during the summer of 2013 on how to design for websites and apps.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to design for the web

  1. 1. HOW TO DESIGN FOR THE WEB Principles for awesome web and app design aimed at pupils aged 10-18 @ London Digital Summer camp 2013 Friday, 12 July 13
  2. 2. About Danny Bluestone Founder and director at Cyber-Duck Friday, 12 July 13
  3. 3. About Brad Andrews A self taught web designer who is doing a summer internship at Cyber-Duck Friday, 12 July 13
  4. 4. Friday, 12 July 13
  5. 5. What did I do as a kid? Image copyright: Friday, 12 July 13
  6. 6. Starting to design things like this for my GCSE’s Image copyright: Friday, 12 July 13
  7. 7. Fast forward to 1997 Friday, 12 July 13
  8. 8. Image copyright: Friday, 12 July 13
  9. 9. what should you be doing? Friday, 12 July 13
  10. 10. Image copyright to: ...Everyone young person is going to be inspired to be a maker from now on. Its like how everyone used to want to become a musician, actor or athlete but ‘maker’ is what people are going to want to be. “ Will.I.AM Friday, 12 July 13
  11. 11. opportunities Friday, 12 July 13
  12. 12. Image copyright to: The power of being young Nick D'Aloisio, sells his app for £19mil Friday, 12 July 13
  13. 13. So how do you learn to design websites and apps? Friday, 12 July 13
  14. 14. Lets pick a subject to design for! • The best way to learn web design is through experience. • Most successful designers use a design process. • In today’s workshop we will design a homework web app. Image copyright to: Friday, 12 July 13
  15. 15. Here is a simple process for web (or app) design Friday, 12 July 13
  16. 16. Image copyright to: Friday, 12 July 13
  17. 17. Image copyright to: Friday, 12 July 13
  18. 18. Image copyright to: Friday, 12 July 13
  19. 19. Image copyright to: Friday, 12 July 13
  20. 20. Before we start Please get into groups of 4. Our home work tool will be a web app, this means that it should work on a PC and mobile phone. Friday, 12 July 13
  21. 21. Personas A persona is a typical ‘person’ that uses a website or app. Please create one persona each. It can be you, a friend or sibling. Friday, 12 July 13
  22. 22. What’s out there? Research allows you to see what else is out there and learn their strengths and weaknesses. Choose two or three other methods of how you deal with homework. Friday, 12 July 13
  23. 23. Site / app map Think about the screens you will need on your web app and write any ‘functional’ notes on them. Normally there are a maximum of 7 key screens and lots of ‘sub’ screens. Friday, 12 July 13
  24. 24. Prototyping The best way to start a design is pen and paper! Try and design one of the important screens for the web app. Friday, 12 July 13
  25. 25. Thank you, future designers! Cyber-Duck welcomes interns of all ages to come and learn with us. All images were used for educational and training purposes only. If you want an images remove please contact info@cyber-duck Please follow us on twitter @cyberduck_uk and email us Friday, 12 July 13