• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Design & Prototyping
 

Mobile Design & Prototyping

on

  • 51,940 views

Presented at #Mleardingdevcon October 2011. Learn how to get started in design and planning for mobile devices, what do you need to know and how to plan for producing a project.

Presented at #Mleardingdevcon October 2011. Learn how to get started in design and planning for mobile devices, what do you need to know and how to plan for producing a project.

Statistics

Views

Total Views
51,940
Views on SlideShare
51,830
Embed Views
110

Actions

Likes
12
Downloads
156
Comments
1

10 Embeds 110

http://paper.li 53
http://seallab.com 16
http://sealworks.com 13
http://formacionmestreacasa.gva.es 10
http://www.schoox.com 5
http://www.sealworks.com 5
http://shintersp01.shhq.shs.com.sg:86 3
http://futureofweblearning.com 2
http://a0.twimg.com 2
http://www.onlydoo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Design & Prototyping Mobile Design & Prototyping Presentation Transcript

    • Designing Mobile Learning Apps & Games Nick@sealworks.com Twitter.com/NickFloro
    • The Web Platform is Accelerating
    • Solving Developer ChallengesGraphics Location Storage Speed
    • 480 million Newspapers
    • 1.4 billion Internet users
    • 1.5 billion TV’s
    • 1.7 billion Credit Cards
    • 2.25 billion Tooth Brushes
    • 4 billion Mobile Phones
    • Develop once Push everywhere
    • 7 Questions to Define the Project Who is the audience and What is the budget? how will they use it? What are the learning objectives? Does the content exist?What is the timetable? What is the goal?Current technology orsolution in place?
    • Understanding theTechnology
    • Pixels & Aspect RatioSelecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x 640 Droid 854 x 480 iPhone 480 x 320
    • • form factor• network latency• input mechanism• memory• computational power• battery• context
    • The mobile environment single early failure = non-returning user
    • The mobile environment crucial first 30-60 seconds usage
    • The mobile environment Fewer options
    • Sample Simulation with HTML 5
    • Web App
    • Web App
    • JAVASCRIPT JQuery HTML 5 CSS3 AJAX
    • Development Tools
    • Publish for iPhone
    • Publish for iPhone
    • Publish for iPhone
    • Publish for Android
    • Publish for iPhone Publish for Android
    • labs.adobe.com/technologies/wallaby/
    • Text MessagingSMS Integration Would you like to sell, hold or buy? 1. Sell 2. Buy 3. Hold
    • www.runrev.com
    • www.gamesalad.com
    • anscamobile.com
    • Understand Design
    • It’s aboutcommunication andproblem solving.
    • Design is how it works.
    • People don’t knowwhat they want. Weneed to tell them.
    • Text
    • 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channelText 5. Deselect 6. Load Alpha Channel 7. Load Color 8. Offset 9. Apply Blur 10.Reposition 11.Save 12.If the copy changed, sta over
    • How do we start?
    • Sketches
    • Wireframes
    • www.balsamiq.com
    • Sketchy & iMockUps
    • http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
    • www.uistencils.com
    • Wireframes
    • keynotopia.com
    • keynotekungfu.com
    • Quick Prototyping Techniques Tools: • Fujitsu SCANSNAP – Scan direct to pdf – includes full Acrobat Pro
    • Wireframes Using Acrobat Pro for Prototypes
    • GamersBorn ≥ 1980
    • Gamers Born ≥ 1980‣ 8-10 1+ hour/day‣ teens 13+ hours week
    • Gamers Born ≥ 1980‣ 43% females‣ 5 hours a week
    • Designing experiences
    • us.wii.com
    • How should we Design?
    • Focus on theAudience
    • Content is the key
    • Transparent 3 Interface
    • Keep it Simple
    • Design: Keep it Simple
    • Resources
    • Games 1. Play 2. Watch others play 3. Experiment
    • Resources • Designing Interactions • Bill Moggridge
    • Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.
    • Capture & Analyze
    • Using CoverFlow view and Preview of Graphics
    • Design Scrapbook: iPhoto | LittleSnapper
    • CSS3 for Web DesignersDan Cederholm | A Book Apart
    • www.istockphoto.com
    • www.uxmag.com
    • Introducing HTML5Bruce Lawson(Voices That Matter)
    • html5rocks.com
    • http://www.caniuse.com/
    • www.css3.info
    • www.TED.com
    • Nancy Durate Garr Reynolds
    • www.posterous.com
    • easily drag & drop anything into email
    • Posterous will automatically wrap and prep for web
    • Most urls YouTube, SlideShare will get a player
    • www.launchcycle.com
    • Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer Environment
    • Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro
    • “Glad Michael and I could worktogether to score 70 points.”
    • HTML 4
    • HTML 5
    • Improve Web Apps
    • Re-Address backwardcompatibility
    • Canvas & SVG
    • When Canvas or SVG?SVG -> High level Canvas -> Low level• Import/Export • No mouse interaction• Easy UIs • High Animation• Interactive • JS Centric• Medium Animation • More Bookkeeping• Tree of objects • Pixels
    • Quake II - Browser Only
    • Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage
    • Video
    • Video CompressionHTML 5 Options Flash H264 Ogg Theora MPEG 4 WebM
    • www.longtailvideo.com
    • geolocation
    • app cache& database
    • web workers
    • Test for Usability Test on Windows 7, Vista • Internet Explorer 6, 7, 8, 9 • Firefox 3, 3.5, 3.6 • Opera 10 Test on OS X − Safari 4 − Firefox 3.5, 3.6 − Opera 10 Test Mobile − iPhone − Android − Blackberry, Windows 7 Phon
    • Forms CSS 3Effects/Transitions
    • Design for Flexibility