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
About Danny Bluestone
Founder and director at Cyber-Duck
Friday, 12 July 13
About Brad Andrews
A self taught web designer who is doing a
summer internship at Cyber-Duck
Friday, 12 July 13
Friday, 12 July 13
What did I do as a kid?
Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252
Friday, 12 July 13
Starting to design things
like this for my GCSE’s
Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991
Friday, 12 July 13
Fast forward to 1997
Friday, 12 July 13
Image copyright: http://flashvideotrainingsource.com/featured_post/hints-and-tips/a-nostalgic-rummage-through-the-history-of-flash
Friday, 12 July 13
what should you be
doing?
Friday, 12 July 13
Image copyright to: https://si0.twimg.com/profile_images/3547533128/61eb0e1b506fc4ae4afa36ba79d62814.jpeg
...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
opportunities
Friday, 12 July 13
Image copyright to: http://vimeo.com/52014691
The power of being young
Nick D'Aloisio, sells his app for £19mil
Friday, 12 July 13
So how do you learn
to design websites
and apps?
Friday, 12 July 13
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: http://old-gils-gifs.tumblr.com/
Friday, 12 July 13
Here is a simple process
for web (or app) design
Friday, 12 July 13
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Friday, 12 July 13
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Friday, 12 July 13
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Friday, 12 July 13
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Friday, 12 July 13
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
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
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
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
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
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 info@cyber-duck.co.uk
Friday, 12 July 13

How to design for the web

  • 1.
    HOW TO DESIGNFOR 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.
    About Danny Bluestone Founderand director at Cyber-Duck Friday, 12 July 13
  • 3.
    About Brad Andrews Aself taught web designer who is doing a summer internship at Cyber-Duck Friday, 12 July 13
  • 4.
  • 5.
    What did Ido as a kid? Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252 Friday, 12 July 13
  • 6.
    Starting to designthings like this for my GCSE’s Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991 Friday, 12 July 13
  • 7.
    Fast forward to1997 Friday, 12 July 13
  • 8.
  • 9.
    what should yoube doing? Friday, 12 July 13
  • 10.
    Image copyright to:https://si0.twimg.com/profile_images/3547533128/61eb0e1b506fc4ae4afa36ba79d62814.jpeg ...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.
  • 12.
    Image copyright to:http://vimeo.com/52014691 The power of being young Nick D'Aloisio, sells his app for £19mil Friday, 12 July 13
  • 13.
    So how doyou learn to design websites and apps? Friday, 12 July 13
  • 14.
    Lets pick asubject 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: http://old-gils-gifs.tumblr.com/ Friday, 12 July 13
  • 15.
    Here is asimple process for web (or app) design Friday, 12 July 13
  • 16.
    Image copyright to:http://aboutus.lego.com/en-us/news-room/media-assets-library/images/ Friday, 12 July 13
  • 17.
    Image copyright to:http://aboutus.lego.com/en-us/news-room/media-assets-library/images/ Friday, 12 July 13
  • 18.
    Image copyright to:http://aboutus.lego.com/en-us/news-room/media-assets-library/images/ Friday, 12 July 13
  • 19.
    Image copyright to:http://aboutus.lego.com/en-us/news-room/media-assets-library/images/ Friday, 12 July 13
  • 20.
    Before we start Pleaseget 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.
    Personas A persona isa 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.
    What’s out there? Researchallows 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.
    Site / appmap 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.
    Prototyping The best wayto start a design is pen and paper! Try and design one of the important screens for the web app. Friday, 12 July 13
  • 25.
    Thank you, futuredesigners! 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 info@cyber-duck.co.uk Friday, 12 July 13