digital summer trip 2014 for kids - how to design for the web

25
HOW TO DESIGN FOR THE WEB Principles for awesome web and app design aimed at pupils aged 16-18 @ London Digital Summer Trip 2014

Upload: danny-bluestone

Post on 27-Jan-2015

102 views

Category:

Technology


0 download

DESCRIPTION

At this event at the Hackney Community College, Danny Bluestone, Sofia Breg and Dylan Smith were helping bright kids learn the principles of user experience (UX) and how to prototype wireframes using pen and paper. The Cyber-Duck team also introduced the kids to the opportunities within digital.

TRANSCRIPT

Page 1: Digital Summer Trip 2014 for kids -  how to design for the web

HOW TO DESIGN FOR THE WEB

Principles for awesome web and app design aimed at pupils aged 16-18 @ London Digital Summer Trip 2014

Page 2: Digital Summer Trip 2014 for kids -  how to design for the web

About Danny Bluestone A button loving duck obsessed gamer and DJ with a passion for design and business

Page 3: Digital Summer Trip 2014 for kids -  how to design for the web

About Sofia Breg A geography graduate that has a passion for technology and a keen writer

Page 4: Digital Summer Trip 2014 for kids -  how to design for the web

About Dylan Smith A music loving Canadian who following his passion for digital technology

Page 5: Digital Summer Trip 2014 for kids -  how to design for the web
Page 6: Digital Summer Trip 2014 for kids -  how to design for the web

What did I do as a kid?

Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252

Page 7: Digital Summer Trip 2014 for kids -  how to design for the web

Starting to design things like this for my GCSE’s

Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991

Page 8: Digital Summer Trip 2014 for kids -  how to design for the web

Fast forward to 1997

Page 9: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright: http://flashvideotrainingsource.com/featured_post/hints-and-tips/a-nostalgic-rummage-through-the-history-of-flash

Page 10: Digital Summer Trip 2014 for kids -  how to design for the web

what should you be doing?

Page 11: Digital Summer Trip 2014 for kids -  how to design for the web

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

Page 12: Digital Summer Trip 2014 for kids -  how to design for the web

opportunities

Page 13: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright to: http://vimeo.com/52014691

The power of being young Nick D'Aloisio, sells his app for £19mil

Page 14: Digital Summer Trip 2014 for kids -  how to design for the web

So how do you learn to design websites

and apps?

Page 15: Digital Summer Trip 2014 for kids -  how to design for the web

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/

Page 16: Digital Summer Trip 2014 for kids -  how to design for the web

Here is a simple process for web (or app) design

Page 17: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/

Page 18: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/

Page 19: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/

Page 20: Digital Summer Trip 2014 for kids -  how to design for the web

Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/

Page 21: Digital Summer Trip 2014 for kids -  how to design for the web

Before we startPlease 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.

Page 22: Digital Summer Trip 2014 for kids -  how to design for the web

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.

Page 23: Digital Summer Trip 2014 for kids -  how to design for the web

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.

Page 24: Digital Summer Trip 2014 for kids -  how to design for the web

Prototyping The best way to start a design is pen and paper! !Try and design one of the important screens for the web app.

Page 25: Digital Summer Trip 2014 for kids -  how to design for the web

Thank you, future designers!

Cyber-Duck welcomes interns of all ages to come and learn with us.

All images were used for educational and trainingpurposes only. If you want an images remove please

contact info@cyber-duck

Please follow us on twitter @cyberduck_uk

and email us [email protected]