Mobile Design & Prototyping
Post on 09-May-2015
51771 Views
Preview:
DESCRIPTION
Transcript
Mobile LearningApps & Games
Nick@sealworks.comTwitter.com/NickFloro
Designing
The Web Platform is Accelerating
Graphics Location Storage Speed
Solving Developer Challenges
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 oncePush everywhere
7 Questions to Define the Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
Understanding the
Technology
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
The mobile environmentsingle early failure = non-returning user
The mobile environmentcrucial first 30-60 seconds usage
The mobile environmentFewer options
Sample Simulation with HTML 5
Web App
AppWeb
HTML 5CSS3 AJAX
JAVASCRIPT JQuery
ToolsDevelopment
Publish for iPhone
Publish for iPhone
Publish for iPhone
Publish for Android
Publish for Android
Publish for iPhone
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 about communication and problem solving.
Design is how it works.
People don’t know what they want. We need to tell them.
Text
Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10.Reposition11.Save12.If the copy changed, start
over
How do we start?
Sketches
Wireframes
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
www.uistencils.com
Wireframes
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Quick Prototyping Techniques
Wireframes
Using Acrobat Pro for Prototypes
GamersBorn ≥ 1980
GamersBorn ≥ 1980
‣ 8-10 1+ hour/day
‣ teens 13+ hours week
GamersBorn ≥ 1980
‣ 43% females
‣ 5 hours a week
experiencesDesigning
How should we
Design?
Focus on the
Audience1
is the keyContent
2
Transparent
Interface3
Keep it Simple
Design: Keep it Simple
Resources
Games1.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.uxmag.com
Introducing HTML5
Bruce Lawson(Voices That Matter)
html5rocks.com
http://www.caniuse.com/
www.css3.info
www.TED.com
Nancy Durate Garr Reynolds
Posterous will automatically wrap and prep for web
Most urls YouTube, SlideShare will get a player
www.launchcycle.com
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Explore
Thank You
Nick Florosealworks interactive studios
nick@sealworks.comwww.sealworks.com
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
“Glad Michael and I could work together to score 70 points.”
HTML 4
HTML 5
Improve Web Apps
Re-Address backwardcompatibility
Canvas & SVG
SVG -> High level• Import/Export•Easy UIs• Interactive•Medium Animation•Tree of objects
Canvas -> Low level•No mouse interaction•High Animation• JS Centric•More Bookkeeping•Pixels
When Canvas or SVG?
Quake II - Browser Only
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Video
HTML 5 OptionsVideo Compression
Flash H264MPEG 4
Ogg Theora WebM
geolocation
app cache& database
web workers
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
Test for Usability
Forms
CSS 3
Effects/Transitions
Design for Flexibility
top related