SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentation
Karl Daniel, M.D.
 
How Lean, UCD and Agile can propel designers into the future
How Lean, UCD and Agile can propel designers into the futureHow Lean, UCD and Agile can propel designers into the future
How Lean, UCD and Agile can propel designers into the future
Cyber-Duck
 
Midterm presentation 2.27.2010 small
Midterm presentation 2.27.2010 smallMidterm presentation 2.27.2010 small
Midterm presentation 2.27.2010 small
guestc8839dc3
 
SVEA Presentazione progetto
SVEA Presentazione progettoSVEA Presentazione progetto
SVEA Presentazione progetto
CSP Scarl
 
W SAN FRANCISCO
W SAN FRANCISCOW SAN FRANCISCO
W SAN FRANCISCO
lisaleonor
 
sistema eragilea
sistema eragileasistema eragilea
sistema eragilea
leire
 

Andere mochten auch (20)

New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentation
 
How Lean, UCD and Agile can propel designers into the future
How Lean, UCD and Agile can propel designers into the futureHow Lean, UCD and Agile can propel designers into the future
How Lean, UCD and Agile can propel designers into the future
 
Midterm presentation 2.27.2010 small
Midterm presentation 2.27.2010 smallMidterm presentation 2.27.2010 small
Midterm presentation 2.27.2010 small
 
Arifirwansyah merakit
Arifirwansyah merakitArifirwansyah merakit
Arifirwansyah merakit
 
SVEA Presentazione progetto
SVEA Presentazione progettoSVEA Presentazione progetto
SVEA Presentazione progetto
 
Creativity
CreativityCreativity
Creativity
 
W SAN FRANCISCO
W SAN FRANCISCOW SAN FRANCISCO
W SAN FRANCISCO
 
Radisson Hotel Whittier Feb2010 Powerpoints
Radisson Hotel Whittier Feb2010 PowerpointsRadisson Hotel Whittier Feb2010 Powerpoints
Radisson Hotel Whittier Feb2010 Powerpoints
 
I talk3
I talk3I talk3
I talk3
 
Cool Technologies
Cool TechnologiesCool Technologies
Cool Technologies
 
19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione - 19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione -
 
Digital agency founders talk
Digital agency founders talkDigital agency founders talk
Digital agency founders talk
 
Lu isfer
Lu isferLu isfer
Lu isfer
 
初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ
 
Kennedy Creek Dispersal 2015
Kennedy Creek Dispersal 2015Kennedy Creek Dispersal 2015
Kennedy Creek Dispersal 2015
 
Arte óptico
Arte ópticoArte óptico
Arte óptico
 
sistema eragilea
sistema eragileasistema eragilea
sistema eragilea
 
N E W Y O R K C I T Y
N E W Y O R K C I T YN E W Y O R K C I T Y
N E W Y O R K C I T Y
 
Henry matisse
Henry matisseHenry matisse
Henry matisse
 
Menieres slides-050518
Menieres slides-050518Menieres slides-050518
Menieres slides-050518
 

Ähnlich wie How to design for the web

Fort Christmas web site redesign
Fort Christmas web site redesignFort Christmas web site redesign
Fort Christmas web site redesign
Amanda Kern
 
Rapid Iteration On Mobile (Lean Startup Conf 2013)
Rapid Iteration On Mobile (Lean Startup Conf 2013)Rapid Iteration On Mobile (Lean Startup Conf 2013)
Rapid Iteration On Mobile (Lean Startup Conf 2013)
xanadumobile
 
Website Usability | Class 1
Website Usability | Class 1Website Usability | Class 1
Website Usability | Class 1
studiokandm
 
Accessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government DaysAccessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government Days
Phase2
 
How to brainstorm
How to brainstormHow to brainstorm
How to brainstorm
drewz lin
 

Ähnlich wie How to design for the web (20)

Design Thinking Introduction & Workshop - NoVA UX
Design Thinking Introduction & Workshop - NoVA UXDesign Thinking Introduction & Workshop - NoVA UX
Design Thinking Introduction & Workshop - NoVA UX
 
Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13
 
Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A
 
6 tips on faster data journalism workflows
6 tips on faster data journalism workflows6 tips on faster data journalism workflows
6 tips on faster data journalism workflows
 
Our Love Story Weddings - Julie Carlson
Our Love Story Weddings - Julie CarlsonOur Love Story Weddings - Julie Carlson
Our Love Story Weddings - Julie Carlson
 
Interactive storytelling
Interactive storytellingInteractive storytelling
Interactive storytelling
 
Fort Christmas web site redesign
Fort Christmas web site redesignFort Christmas web site redesign
Fort Christmas web site redesign
 
SMAC (Social, Mobile, Analytic and Cloud) Inflection: Technology's Long Promi...
SMAC (Social, Mobile, Analytic and Cloud) Inflection: Technology's Long Promi...SMAC (Social, Mobile, Analytic and Cloud) Inflection: Technology's Long Promi...
SMAC (Social, Mobile, Analytic and Cloud) Inflection: Technology's Long Promi...
 
Using an MPC or Hardware Synth verses using Software Programs to Produce Music
Using an MPC or Hardware Synth verses using Software Programs to Produce MusicUsing an MPC or Hardware Synth verses using Software Programs to Produce Music
Using an MPC or Hardware Synth verses using Software Programs to Produce Music
 
Rapid Iteration On Mobile (Lean Startup Conf 2013)
Rapid Iteration On Mobile (Lean Startup Conf 2013)Rapid Iteration On Mobile (Lean Startup Conf 2013)
Rapid Iteration On Mobile (Lean Startup Conf 2013)
 
Rapid Iteration for Mobile App Design by Mariya Yao
Rapid Iteration for Mobile App Design by Mariya YaoRapid Iteration for Mobile App Design by Mariya Yao
Rapid Iteration for Mobile App Design by Mariya Yao
 
30SS Pitch 7/12/13
30SS Pitch 7/12/1330SS Pitch 7/12/13
30SS Pitch 7/12/13
 
Seminar at UC3M Madrid
Seminar at UC3M MadridSeminar at UC3M Madrid
Seminar at UC3M Madrid
 
Femgineer Friends Session #4 July 12, 2013
Femgineer Friends Session #4 July 12, 2013Femgineer Friends Session #4 July 12, 2013
Femgineer Friends Session #4 July 12, 2013
 
Website Usability | Class 1
Website Usability | Class 1Website Usability | Class 1
Website Usability | Class 1
 
Accessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government DaysAccessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government Days
 
DIY, Wearables and Empowerment
DIY, Wearables and EmpowermentDIY, Wearables and Empowerment
DIY, Wearables and Empowerment
 
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
 
PIPA
PIPAPIPA
PIPA
 
How to brainstorm
How to brainstormHow to brainstorm
How to brainstorm
 

Mehr von Cyber-Duck

Mehr von Cyber-Duck (20)

Business X Design - People, Planet & Product
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
 
Scaling our digital agency during the 2020 pandemic - Imperial College lecture
Scaling our digital agency during the 2020 pandemic - Imperial College lectureScaling our digital agency during the 2020 pandemic - Imperial College lecture
Scaling our digital agency during the 2020 pandemic - Imperial College lecture
 
Fixing user experience (UX) through trust - SXSW keynote
Fixing user experience (UX) through trust - SXSW keynoteFixing user experience (UX) through trust - SXSW keynote
Fixing user experience (UX) through trust - SXSW keynote
 
How to use ux thinking to generate meaningful marketing insights v0101d
How to use ux thinking to generate meaningful marketing insights v0101dHow to use ux thinking to generate meaningful marketing insights v0101d
How to use ux thinking to generate meaningful marketing insights v0101d
 
Empowering brands through better UX
Empowering brands through better UXEmpowering brands through better UX
Empowering brands through better UX
 
Designing products and services with GDPR
Designing products and services with GDPRDesigning products and services with GDPR
Designing products and services with GDPR
 
Hackers guide to UX - 2017
Hackers guide to UX - 2017Hackers guide to UX - 2017
Hackers guide to UX - 2017
 
Demystifying Digital transformation
Demystifying Digital transformation Demystifying Digital transformation
Demystifying Digital transformation
 
Digital marketing trends (workshop)
Digital marketing trends (workshop)Digital marketing trends (workshop)
Digital marketing trends (workshop)
 
StartupBus UK presentation
StartupBus UK presentationStartupBus UK presentation
StartupBus UK presentation
 
Building a compelling Brand System
Building a compelling Brand System Building a compelling Brand System
Building a compelling Brand System
 
Five Digital Marketing ingredients for 2016
Five Digital Marketing ingredients for 2016Five Digital Marketing ingredients for 2016
Five Digital Marketing ingredients for 2016
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UX
 
User centred design (UCD) and the connected home
User centred design (UCD) and the connected homeUser centred design (UCD) and the connected home
User centred design (UCD) and the connected home
 
What it means to be a lean agency
What it means to be a lean agency What it means to be a lean agency
What it means to be a lean agency
 
The essentials of a digital project
The essentials of a digital projectThe essentials of a digital project
The essentials of a digital project
 
Danny finder - internal hackathon
Danny finder - internal hackathon Danny finder - internal hackathon
Danny finder - internal hackathon
 
UX principles at Marketing Week Live London 2014
UX principles at Marketing Week Live London 2014UX principles at Marketing Week Live London 2014
UX principles at Marketing Week Live London 2014
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-founders
 
Project management at a UX focused digital agency
Project management at a UX focused digital agencyProject management at a UX focused digital agency
Project management at a UX focused digital agency
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Kürzlich hochgeladen (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

How to design for the web

  • 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. About Danny Bluestone Founder and director at Cyber-Duck Friday, 12 July 13
  • 3. About Brad Andrews A self taught web designer who is doing a summer internship at Cyber-Duck Friday, 12 July 13
  • 5. What did I do as a kid? Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252 Friday, 12 July 13
  • 6. Starting to design things like this for my GCSE’s Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991 Friday, 12 July 13
  • 7. Fast forward to 1997 Friday, 12 July 13
  • 9. what should you be 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
  • 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 do you learn to design websites and apps? Friday, 12 July 13
  • 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: http://old-gils-gifs.tumblr.com/ Friday, 12 July 13
  • 15. Here is a simple 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 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. 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. 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. 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. 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. 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