SlideShare a Scribd company logo
1 of 25
Download to read offline
HOW TO DESIGN FOR
THE WEB
Principles for awesome web and app design aimed at
pupils aged 16-18 @ London Digital Summer Trip 2014
About Danny Bluestone
A button loving duck obsessed gamer and
DJ with a passion for design and business
About Sofia Breg
A geography graduate that has a passion
for technology and a keen writer
About Dylan Smith
A music loving Canadian who following
his passion for digital technology
What did I do as a kid?
Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252
Starting to design things
like this for my GCSE’s
Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991
Fast forward to 1997
Image copyright: http://flashvideotrainingsource.com/featured_post/hints-and-tips/a-nostalgic-rummage-through-the-history-of-flash
what should you be
doing?
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
opportunities
Image copyright to: http://vimeo.com/52014691
The power of being young
Nick D'Aloisio, sells his app for £19mil
So how do you learn
to design websites
and apps?
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/
Here is a simple process
for web (or app) design
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
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.
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.
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.
Prototyping
The best way to start a
design is pen and paper!
!
Try and design one of
the important screens
for the web app.
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

More Related Content

Viewers also liked (17)

Final Presentation To Titans
Final Presentation To TitansFinal Presentation To Titans
Final Presentation To Titans
 
Raynon’s Intercultural Experiences
Raynon’s Intercultural  ExperiencesRaynon’s Intercultural  Experiences
Raynon’s Intercultural Experiences
 
Isha Hussain
Isha HussainIsha Hussain
Isha Hussain
 
Genitourinary
GenitourinaryGenitourinary
Genitourinary
 
Hippel
HippelHippel
Hippel
 
Cool Technologies
Cool TechnologiesCool Technologies
Cool Technologies
 
L25 human societies
L25 human societiesL25 human societies
L25 human societies
 
Evaluation323424
Evaluation323424Evaluation323424
Evaluation323424
 
1
11
1
 
La ricerca si fa impresa
La ricerca si fa impresaLa ricerca si fa impresa
La ricerca si fa impresa
 
Music Magazine Coursework Planning!
Music Magazine Coursework Planning!Music Magazine Coursework Planning!
Music Magazine Coursework Planning!
 
Upos Jan 10
Upos Jan 10Upos Jan 10
Upos Jan 10
 
Reproduction
ReproductionReproduction
Reproduction
 
Eskolenkonparaketa
EskolenkonparaketaEskolenkonparaketa
Eskolenkonparaketa
 
初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ
 
Production 2
Production 2Production 2
Production 2
 
Csp@scuola2011 seminariointro molino
Csp@scuola2011 seminariointro molinoCsp@scuola2011 seminariointro molino
Csp@scuola2011 seminariointro molino
 

More from Cyber-Duck

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
 

More from 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
 
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
 
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
 

Recently uploaded

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
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
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
 
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
 
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
 
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
 
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
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
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
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 

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

  • 1. HOW TO DESIGN FOR THE WEB Principles for awesome web and app design aimed at pupils aged 16-18 @ London Digital Summer Trip 2014
  • 2. About Danny Bluestone A button loving duck obsessed gamer and DJ with a passion for design and business
  • 3. About Sofia Breg A geography graduate that has a passion for technology and a keen writer
  • 4. About Dylan Smith A music loving Canadian who following his passion for digital technology
  • 5.
  • 6. What did I do as a kid? Image copyright: http://rapgenius.com/Knaan-more-beautiful-than-silence-lyrics#note-1149252
  • 7. Starting to design things like this for my GCSE’s Image copyright: http://cargocollective.com/markogucunski/Deluxe-paint-1991
  • 10. what should you be doing?
  • 11. 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
  • 13. Image copyright to: http://vimeo.com/52014691 The power of being young Nick D'Aloisio, sells his app for £19mil
  • 14. So how do you learn to design websites and apps?
  • 15. 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/
  • 16. Here is a simple process for web (or app) design
  • 17. Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
  • 18. Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
  • 19. Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
  • 20. Image copyright to: http://aboutus.lego.com/en-us/news-room/media-assets-library/images/
  • 21. 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.
  • 22. 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.
  • 23. 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.
  • 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.
  • 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