SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationKarl 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 smallguestc8839dc3
 
SVEA Presentazione progetto
SVEA Presentazione progettoSVEA Presentazione progetto
SVEA Presentazione progettoCSP Scarl
 
W SAN FRANCISCO
W SAN FRANCISCOW SAN FRANCISCO
W SAN FRANCISCOlisaleonor
 
Radisson Hotel Whittier Feb2010 Powerpoints
Radisson Hotel Whittier Feb2010 PowerpointsRadisson Hotel Whittier Feb2010 Powerpoints
Radisson Hotel Whittier Feb2010 Powerpoints
tstyoung
 
Cool Technologies
Cool TechnologiesCool Technologies
Cool Technologies
EKMom
 
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 -
CSP Scarl
 
Digital agency founders talk
Digital agency founders talkDigital agency founders talk
Digital agency founders talk
Cyber-Duck
 
Lu isfer
Lu isferLu isfer
Lu isfer
LuisFer2010
 
初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ初心者向けtwittering-modeのススメ
初心者向けtwittering-modeのススメ
Takashi Masuda
 
Kennedy Creek Dispersal 2015
Kennedy Creek Dispersal 2015Kennedy Creek Dispersal 2015
Kennedy Creek Dispersal 2015
Kennedy Creek Poll Dorset stud
 
sistema eragilea
sistema eragileasistema eragilea
sistema eragilealeire
 
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
william HOUGH
 

Viewers also liked (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
 

Similar to How to design for the web

Design Thinking Introduction & Workshop - NoVA UX
Design Thinking Introduction & Workshop - NoVA UXDesign Thinking Introduction & Workshop - NoVA UX
Design Thinking Introduction & Workshop - NoVA UX
John Whalen
 
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
Kirsty Burgoine
 
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
Jennifer Gatz
 
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
Paul Bradshaw
 
Our Love Story Weddings - Julie Carlson
Our Love Story Weddings - Julie CarlsonOur Love Story Weddings - Julie Carlson
Our Love Story Weddings - Julie Carlson
Julie Carlson
 
Interactive storytelling
Interactive storytellingInteractive storytelling
Interactive storytelling
Sarah Nichols
 
Fort Christmas web site redesign
Fort Christmas web site redesignFort Christmas web site redesign
Fort Christmas web site redesignAmanda Kern
 
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...
Jay Jakosky
 
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
Salvatore Chisari
 
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
 
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
Lean Startup Co.
 
30SS Pitch 7/12/13
30SS Pitch 7/12/1330SS Pitch 7/12/13
30SS Pitch 7/12/13
30SS
 
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
Karen Catlin
 
Website Usability | Class 1
Website Usability | Class 1Website Usability | Class 1
Website Usability | Class 1studiokandm
 
Accessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government DaysAccessibility presentation at Drupal Government Days
Accessibility presentation at Drupal Government DaysPhase2
 
DIY, Wearables and Empowerment
DIY, Wearables and EmpowermentDIY, Wearables and Empowerment
DIY, Wearables and Empowerment
Zoe Romano
 
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...
engagedigitalkids
 
How to brainstorm
How to brainstormHow to brainstorm
How to brainstormdrewz lin
 

Similar to 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
 

More from Cyber-Duck

Business X Design - People, Planet & Product
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
Cyber-Duck
 
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
Cyber-Duck
 
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
Cyber-Duck
 
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
Cyber-Duck
 
Empowering brands through better UX
Empowering brands through better UXEmpowering brands through better UX
Empowering brands through better UX
Cyber-Duck
 
Designing products and services with GDPR
Designing products and services with GDPRDesigning products and services with GDPR
Designing products and services with GDPR
Cyber-Duck
 
Hackers guide to UX - 2017
Hackers guide to UX - 2017Hackers guide to UX - 2017
Hackers guide to UX - 2017
Cyber-Duck
 
Demystifying Digital transformation
Demystifying Digital transformation Demystifying Digital transformation
Demystifying Digital transformation
Cyber-Duck
 
Digital marketing trends (workshop)
Digital marketing trends (workshop)Digital marketing trends (workshop)
Digital marketing trends (workshop)
Cyber-Duck
 
StartupBus UK presentation
StartupBus UK presentationStartupBus UK presentation
StartupBus UK presentation
Cyber-Duck
 
Building a compelling Brand System
Building a compelling Brand System Building a compelling Brand System
Building a compelling Brand System
Cyber-Duck
 
Five Digital Marketing ingredients for 2016
Five Digital Marketing ingredients for 2016Five Digital Marketing ingredients for 2016
Five Digital Marketing ingredients for 2016
Cyber-Duck
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UX
Cyber-Duck
 
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
Cyber-Duck
 
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
Cyber-Duck
 
The essentials of a digital project
The essentials of a digital projectThe essentials of a digital project
The essentials of a digital project
Cyber-Duck
 
Danny finder - internal hackathon
Danny finder - internal hackathon Danny finder - internal hackathon
Danny finder - internal hackathon
Cyber-Duck
 
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
Cyber-Duck
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-founders
Cyber-Duck
 
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
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
 
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
 

Recently uploaded

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 

Recently uploaded (20)

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 

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