Masterclass: Designing for the Mobile World
-
Upload
reactive-part-of-accenture-interactive -
Category
Documents
-
view
641 -
download
1
Transcript of Masterclass: Designing for the Mobile World
![Page 1: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/1.jpg)
!
MASTERCLASS: DESIGNING FOR THE MOBILE WORLD !
!
![Page 2: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/2.jpg)
!
MEET DAVE AND GABE
![Page 3: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/3.jpg)
1. THE CURRENT STATE OF MOBILE
2. DESIGNING FOR A MOBILE WORLD
3. DIGITISING VIVID SYDNEY !
![Page 4: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/4.jpg)
!
THE CURRENT STATE OF MOBILE
![Page 5: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/5.jpg)
!
WHY ARE MOBILE EXPERIENCES SO IMPORTANT?
![Page 6: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/6.jpg)
OF AUSTRALIANS OWN A SMARTPHONE 65%
MILLION AUSSIES ARE EMBRACING MOBILE 15.2
REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANETTHE CURRENT STATE OF MOBILE
![Page 7: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/7.jpg)
OF USERS BROWSE DAILY ON THEIR MOBILE DEVICE
REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET
90%
OF THEIR DAILY MEDIA INTERACTION 38%
THE CURRENT STATE OF MOBILE
![Page 8: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/8.jpg)
WE SEARCH ON OUR MOBILE 1ST OVER OTHER DEVICES
REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET
1
OF SEARCH IS LOCATION BASED 77%
THE CURRENT STATE OF MOBILE
ST
![Page 9: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/9.jpg)
WOULD RATHER GIVE UP TV THAN THEIR MOBILE DEVICE
REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET
30%
SAY THEIR MOBILE IS THE BEST WAY TO KILL BOREDOM
67%
THE CURRENT STATE OF MOBILE
![Page 10: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/10.jpg)
THE CURRENT STATE OF MOBILE
TODAY, NOT DESIGNING FOR MOBILE IS STUPID.
![Page 11: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/11.jpg)
!
5 DELIGHTFUL MOBILE EXPERIENCES
![Page 12: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/12.jpg)
MOST POWERFUL ARM // CAMPAIGN
![Page 13: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/13.jpg)
MOST POWERFUL ARM // CAMPAIGN
![Page 14: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/14.jpg)
MOST POWERFUL ARM // CAMPAIGN
![Page 15: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/15.jpg)
ANZ BUZZ
![Page 16: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/16.jpg)
ANZ BUZZ // TABLET EXPERIENCE
![Page 17: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/17.jpg)
ANZ BUZZ // TABLET EXPERIENCE
![Page 18: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/18.jpg)
TENNIS AUSTRALIA // SOCIAL SHACK
![Page 19: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/19.jpg)
![Page 20: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/20.jpg)
![Page 21: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/21.jpg)
![Page 22: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/22.jpg)
![Page 23: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/23.jpg)
MICOACH ELITE // ADIDAS
![Page 24: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/24.jpg)
MICOACH ELITE // ADIDAS
![Page 25: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/25.jpg)
MICOACH ELITE // ADIDAS
![Page 26: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/26.jpg)
SWAJP // DAREVILLE
![Page 27: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/27.jpg)
SWAJP // DAREVILLE
![Page 28: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/28.jpg)
SWAJP // DAREVILLE
![Page 29: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/29.jpg)
SWAJP // DAREVILLE
![Page 30: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/30.jpg)
!
DESIGNING FOR MOBILE
![Page 31: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/31.jpg)
!
WHAT TO CONSIDER
![Page 32: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/32.jpg)
KNOW YOUR USERS
![Page 33: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/33.jpg)
WHAT’S YOUR BIG IDEA?
![Page 34: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/34.jpg)
SKETCH AND ITERATE
![Page 35: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/35.jpg)
PROTOTYPE YOUR EXPERIENCE // REFLECTOR
![Page 36: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/36.jpg)
TESTING WITH USERS // INVISION
![Page 37: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/37.jpg)
DESIGN ON A MOBILE SCREEN // SKALA APP
![Page 38: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/38.jpg)
!
CHOOSING THE RIGHTAPPROACH
![Page 39: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/39.jpg)
NATIVE MOBILE APP
AN APPLICATION DEVELOPED FOR USE ON A PARTICULAR DEVICE.
POSITIVES NEGATIVES
• Works with the device’s built-in features (e.g. accelerometer, GPS, light sensors, bluetooth, WiFi)
• Because they are native, they can use the devices native interactions, making the design experience more seamless for user.
• They perform faster on the device
• Content can be accessed offline once the app is installed as it can be downloaded with the app
!
!
!
• Native apps tend to be a more expensive proposition, especially when they need to be re-created for multiple platforms
• The cost of maintenance in much higher, as multiple versions needs to be managed
• The process of getting the app approved at the app store can prove to be long and tedious
• Users on mobile platforms may be on different versions, which means you need to make sure your app is backwards compatible as well
!
!
![Page 40: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/40.jpg)
MOBILE SPECIFIC WEBSITE
A SITE OPTIMISED SPECIFICALLY FOR THE MOBILE EXPERIENCE.
POSITIVES NEGATIVES
• Typically a simplified experience of the website that focuses on giving users quick access to the most important information relevant to them as they explore via a mobile device (e.g. click to call, location information, enquiry forms)
• No download or installation required, unlike a mobile application
!
!
!
!
!
!
• Is a variation of your desktop website, and therefore requires its own content, separate from the desktop website
• Mobile websites do not use native operating system interactions; they’re defined by HTML and CSS which means they may run slower or be more restrictive
• Cannot be accessed offline, like a mobile app
!
!
!
!
!
![Page 41: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/41.jpg)
RESPONSIVE WEBSITE
POSITIVES NEGATIVES
A SITE CREATED TO DELIVER AN OPTIMAL VIEWING EXPERIENCE ACROSS A WIDE RANGE OF DEVICES.
• You only need to manage content in one place, rather than having to re-create content to suit different experiences
• Any updates to a responsive website are applied across the viewing experience as well (desktop, mobile, tablet)
• Your website will optimise to suit any device it’s being viewed on, meaning your site is accessible by anyone, no matter how they’re exploring it
!
!
!
!
• Designing and developing a responsive website means you need to consider how your site will work across all devices at one time
• Creating content for responsive websites means you need to consider how your content will react to the layout changes as it gets resized (e.g. images in portrait/landscape)
• Less real-estate on mobile devices and users who are on the move means you need to consider how your experience supports a users behaviour more thoroughly
!!!
!
![Page 42: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/42.jpg)
!
DIGITISING VIVID SYDNEY
![Page 43: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/43.jpg)
THE BRIEF
WHAT IF YOU COULD CREATE A DELIGHTFUL MOBILE EXPERIENCE THAT HELPED CONNECT VIVID SYDNEY WITH ITS VISITORS?
![Page 44: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/44.jpg)
THE BRIEF
THINK ABOUT…• What mobile experiences could you create that makes the festival a more
delightful, interactive and engaging experience?
• What could you do to keep people in the loop and up-to-date with what’s going on at the festival while out and about?
• How could you use social media to connect visitors with the festival or its contributors??
• How could you encourage creatives to get involved and share their ideas as part of the festival?
• What if you could use your mobile device to connect and interact with a light installation? what could you do?
![Page 45: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/45.jpg)
1. GET INTO GROUPS OF 4-5
2. SKETCH AN IDEA & GIVE IT AN ELEVATOR PITCH
3. PRESENT THE IDEA BACK TO EVERYONE !
THE PLAN
![Page 46: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/46.jpg)
WHAT A SKETCH CAN LOOK LIKE
![Page 47: Masterclass: Designing for the Mobile World](https://reader030.fdocuments.in/reader030/viewer/2022020718/55d567adbb61ebf7568b4608/html5/thumbnails/47.jpg)