SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Designing for the mobile form factor ,[object Object],[object Object]
Overview ,[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
What is a great UI? ,[object Object],[object Object],[object Object]
Square TweetDeck Seesmic doubleTwist
User friendliness ,[object Object],[object Object],[object Object],[object Object]
Responsiveness ,[object Object],[object Object],[object Object]
Visual polish ,[object Object],[object Object],[object Object]
Is mobile different? ,[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Screen size
Screen size ,[object Object],[object Object],[object Object]
Screen size ,[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Rotation ,[object Object],[object Object],[object Object],[object Object]
Landscape mode
Landscape mode
Landscape mode ,[object Object],[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
User interaction ,[object Object],[object Object],[object Object]
Touch ,[object Object],[object Object],[object Object],[object Object]
Touch
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Resolution / DPI 1280 pixels / 13.3 inch 800 pixels / 8.3 inch 1280 pixels / 13.3 inch = 96 pixels per inch 800 pixels / 8.3 inch = 96 pixels per inch Artwork by studiomx.eu
Resolution matters 300dpi 96dpi
Screen density - LDPI Motorola Charm Motorola Flipout Motorola Citrus Sony Ericsson  Xperia X10 Mini HTC Wildfire HTC Tattoo
Screen density - MDPI Motorola Charm HTC Droid Eris Motorola CLIQ HTC Magic  (myTouch 3G) HTC Aria Motorola Backflip
Screen density - HDPI Motorola Droid Sony Ericsson Xperia X10 Samsung Nexus S HTC Nexus One HTC G2 HTC Evo 4G
100% difference  between LDPI and HDPI
Screen density ,[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object]
Mobile is different ,[object Object],[object Object],[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
What is a great application? ,[object Object],[object Object],[object Object]
But much more important
A clear, simple,  user-oriented  goal
Design process ,[object Object],[object Object],[object Object],[object Object],[object Object]
User scenarios ,[object Object],[object Object],[object Object],[object Object]
As the implementor ,[object Object],[object Object],[object Object],[object Object]
Visual design ,[object Object],[object Object],[object Object]
As the implementor ,[object Object],[object Object],[object Object],[object Object]
Pixel perfection ,[object Object],[object Object]
Pixel perfection ,[object Object],[object Object],[object Object],[object Object]
Working with designers ,[object Object],[object Object],[object Object],[object Object],[object Object]
Below the surface ,[object Object],[object Object],[object Object]
Remember what’s important
What is a great UI? ,[object Object],[object Object],[object Object]
Everything else can be good enough
Q&A ,[object Object],[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Ähnlich wie Designing for the mobile form factor

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Allan Huang
 
Website redesign
Website redesignWebsite redesign
Website redesign
OptfinITy
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptx
Dr.Saranya K.G
 
Min Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile applicationMin Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile application
Jan Paul Roth
 

Ähnlich wie Designing for the mobile form factor (20)

Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
Design Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceDesign Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User Experience
 
The challenge of touchscreen clutter 6.25.2010
The challenge of touchscreen clutter   6.25.2010The challenge of touchscreen clutter   6.25.2010
The challenge of touchscreen clutter 6.25.2010
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - Overview
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Accounting For Every Camper
Accounting For Every CamperAccounting For Every Camper
Accounting For Every Camper
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Website redesign
Website redesignWebsite redesign
Website redesign
 
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly DevicesTap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
Mobile Web Development
Mobile Web Development Mobile Web Development
Mobile Web Development
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptx
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Min Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile applicationMin Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile application
 
Android user experience
Android user experienceAndroid user experience
Android user experience
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
UI guidelines
UI guidelinesUI guidelines
UI guidelines
 

Mehr von Kirill Grouchnikov (8)

Responsive mobile design in practice
Responsive mobile design in practiceResponsive mobile design in practice
Responsive mobile design in practice
 
Responsive mobile design
Responsive mobile designResponsive mobile design
Responsive mobile design
 
Substance Java One 2007 Community Corner
Substance Java One 2007  Community  CornerSubstance Java One 2007  Community  Corner
Substance Java One 2007 Community Corner
 
Flamingo Ribbon component
Flamingo Ribbon componentFlamingo Ribbon component
Flamingo Ribbon component
 
Party of One
Party of OneParty of One
Party of One
 
Advanced Effects Oscon 2007
Advanced Effects   Oscon 2007Advanced Effects   Oscon 2007
Advanced Effects Oscon 2007
 
High DPI for desktop applications
High DPI for desktop applicationsHigh DPI for desktop applications
High DPI for desktop applications
 
On The Shoulders Of Giants
On The Shoulders Of GiantsOn The Shoulders Of Giants
On The Shoulders Of Giants
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Kürzlich hochgeladen (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

Designing for the mobile form factor