SlideShare a Scribd company logo
Mobile App Design & Tools
-- Deepak Modak
Apr 22, 2014
@deepakmodak
Recognizing the need is the primary condition for design.
-- Charles Eames
Why Mobile App ?
• Mobile devices are always on
• Encourages immediate response from the user
• Mobile devices are popular
• It is more personal
• Easy access
What Challenges ?
• Small screen size
• Difficult to type
• Battery life
• On the go
• Hard to multi-task
• Data transfer for slow connections
• Partial attention while babysitting/walking
Design Thinking
Viability (Business)
Feasibility (Technical )Desirability (Human)
Innovation
Design Paradigm
● Less is more : Include the important features One action or max two at a time
● Design of thumb : 75% of people use thumb to navigate
● Clear & Focus Presentation : Use of icons, color, info-graph, ‘How to get
started’ screens
● Gestures are quicker : Pinch swipe Max use of hand Hand zoom in/out
App Design Tools
Affinity diagram
A creative process used for gathering and organizing large amounts of data, ideas
and insights by evidencing their natural correlations.
It starts with a statement of the problem or the goal, each participant think of ideas
and write them on small pieces of paper (cards or stickers). Then those cards
would become the physical instrument to work on their contents, find the
correlations and identify the significant groups of sense.
The result is a sort of verbal and visual representation describing the first
exploration of design solutions.
Affinity diagram
Source : uxdict.io
Mind Map
A mind map is a diagram used to visually outline information.
It is often created around a single entity placed in the center, to which associated
ideas, words and concepts are added.
Mind Map Tools
MoodBoard
A mood board is typically a combination of images, fonts, colors, and textures that
define the style of the project
MoodBoard Tools
Personas
● The personas are archetypes built after an exhaustive observation of the
potential users.
● Personas are fictitious , but they are based on knowledge of real users.
● Understanding your audience is essential to building great products.
Personas Tools
Interaction Design
• How users behave in the application like navigation
• If your user does something, your app needs to acknowledge the interaction
instantly i.e. responsiveness
Interaction Design Tools
Visual Design
• Focuses on the aesthetics of an app and its related materials by strategically
implementing images, colors, fonts, and other elements.
• Placed on the top of Interaction design
Visual Design Tools
Design Prototyping Tools
Common Bad Habits
• Not thumb friendly
• Not using full screen concentrating only on particular section top/bottom
• Cluttered information on single screen
• Not applying The Golden Ratio in Designs
• Lack of proper information hierarchy
• Unclear entry and exit point
Useful Links
Android Design In Action
Awesome Android Design
Androiduiux
Androidniceties
Create Personas
Simplicity is the ultimate sophistication.
-- Steve Jobs
Thank You

More Related Content

PDF
Mobile App Design course (iOS & Android)
PDF
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
PDF
Mobile UX Design
PDF
Designing an App: From Idea to Market
PDF
UX Design for Mobile Apps
PDF
Mobile Monday
PDF
Mobile User Experience
PDF
UX Design for Mobile Interfaces
Mobile App Design course (iOS & Android)
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile UX Design
Designing an App: From Idea to Market
UX Design for Mobile Apps
Mobile Monday
Mobile User Experience
UX Design for Mobile Interfaces

What's hot (19)

PPTX
Android Material Design Quick Presentation
PDF
Mobile Best Practices
PDF
Mobile App Design @ ITU 2012
PPTX
Steps of App Design
PDF
UI DESIGN - Art of creating perfect products ( Part 1 )
PDF
Intuition Factors in the User Experience Design Process
PDF
Mobile first: A future friendly approach to UX design
PDF
Wireframing for Mobile App Developers
PPTX
Alice Phieu - UI/UX For Developers
PPSX
Designing for mobile. A UX perspective for developers
PPTX
User interface (UI) for mobile applications
PDF
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
PDF
dmedia DP2 Interaction Design - Deliverable 2
PPTX
Designing for Mobile
PPTX
Devmento발표100525
PDF
Prototyping invision vs axure
PDF
Intuition Factors
PPTX
Google Glass - Explorer's Eye View
PPT
Mobile-First Strategy
Android Material Design Quick Presentation
Mobile Best Practices
Mobile App Design @ ITU 2012
Steps of App Design
UI DESIGN - Art of creating perfect products ( Part 1 )
Intuition Factors in the User Experience Design Process
Mobile first: A future friendly approach to UX design
Wireframing for Mobile App Developers
Alice Phieu - UI/UX For Developers
Designing for mobile. A UX perspective for developers
User interface (UI) for mobile applications
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
dmedia DP2 Interaction Design - Deliverable 2
Designing for Mobile
Devmento발표100525
Prototyping invision vs axure
Intuition Factors
Google Glass - Explorer's Eye View
Mobile-First Strategy
Ad

Similar to Mobile App Design & Tools (20)

PDF
Dev fest ile ife 2014-ux, material design and trends
PDF
dmedia Design Project 2 Interaction Design Brief
PDF
Design Learnings
PPTX
The UX Toolbelt for Developers
PDF
Between Paper & Code
PDF
"Creating user-centered websites that drive results" by Savage at the HiMA IS...
PDF
Bank Chris - Web UI Design Patterns - 2014
PPT
Planning Multimedia
PPTX
Designers whodoeswhatsps2019
PPTX
Ux design process
PPTX
Design process interaction design basics
PDF
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
PDF
Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
PPTX
User Interface Design For MAD Subject for PTU
PPTX
Innovative Design Solutions for a Digital World by Descreate.pptx
PDF
Design Workshop I @ Cornell Tech
PDF
Chalupnicek sandra portfolio_2018-10-21 - sm
PDF
UI design for mobile apps
PPTX
World Usability Day 2014 - UX Toolbelt for Developers
PDF
UI Design
Dev fest ile ife 2014-ux, material design and trends
dmedia Design Project 2 Interaction Design Brief
Design Learnings
The UX Toolbelt for Developers
Between Paper & Code
"Creating user-centered websites that drive results" by Savage at the HiMA IS...
Bank Chris - Web UI Design Patterns - 2014
Planning Multimedia
Designers whodoeswhatsps2019
Ux design process
Design process interaction design basics
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
User Interface Design For MAD Subject for PTU
Innovative Design Solutions for a Digital World by Descreate.pptx
Design Workshop I @ Cornell Tech
Chalupnicek sandra portfolio_2018-10-21 - sm
UI design for mobile apps
World Usability Day 2014 - UX Toolbelt for Developers
UI Design
Ad

Recently uploaded (20)

PPT
UNIT I- Yarn, types, explanation, process
PPTX
An introduction to AI in research and reference management
PPTX
Implications Existing phase plan and its feasibility.pptx
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PDF
Urban Design Final Project-Site Analysis
PPTX
HPE Aruba-master-icon-library_052722.pptx
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
building Planning Overview for step wise design.pptx
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
DOCX
actividad 20% informatica microsoft project
PDF
The Advantages of Working With a Design-Build Studio
PDF
Urban Design Final Project-Context
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PDF
Phone away, tabs closed: No multitasking
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
UNIT I- Yarn, types, explanation, process
An introduction to AI in research and reference management
Implications Existing phase plan and its feasibility.pptx
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
Urban Design Final Project-Site Analysis
HPE Aruba-master-icon-library_052722.pptx
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
DOC-20250430-WA0014._20250714_235747_0000.pptx
building Planning Overview for step wise design.pptx
Africa 2025 - Prospects and Challenges first edition.pdf
actividad 20% informatica microsoft project
The Advantages of Working With a Design-Build Studio
Urban Design Final Project-Context
Interior Structure and Construction A1 NGYANQI
YV PROFILE PROJECTS PROFILE PRES. DESIGN
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
Phone away, tabs closed: No multitasking
Fundamental Principles of Visual Graphic Design.pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...

Mobile App Design & Tools

  • 1. Mobile App Design & Tools -- Deepak Modak Apr 22, 2014 @deepakmodak
  • 2. Recognizing the need is the primary condition for design. -- Charles Eames
  • 3. Why Mobile App ? • Mobile devices are always on • Encourages immediate response from the user • Mobile devices are popular • It is more personal • Easy access
  • 4. What Challenges ? • Small screen size • Difficult to type • Battery life • On the go • Hard to multi-task • Data transfer for slow connections • Partial attention while babysitting/walking
  • 5. Design Thinking Viability (Business) Feasibility (Technical )Desirability (Human) Innovation
  • 6. Design Paradigm ● Less is more : Include the important features One action or max two at a time ● Design of thumb : 75% of people use thumb to navigate ● Clear & Focus Presentation : Use of icons, color, info-graph, ‘How to get started’ screens ● Gestures are quicker : Pinch swipe Max use of hand Hand zoom in/out
  • 8. Affinity diagram A creative process used for gathering and organizing large amounts of data, ideas and insights by evidencing their natural correlations. It starts with a statement of the problem or the goal, each participant think of ideas and write them on small pieces of paper (cards or stickers). Then those cards would become the physical instrument to work on their contents, find the correlations and identify the significant groups of sense. The result is a sort of verbal and visual representation describing the first exploration of design solutions.
  • 10. Mind Map A mind map is a diagram used to visually outline information. It is often created around a single entity placed in the center, to which associated ideas, words and concepts are added.
  • 12. MoodBoard A mood board is typically a combination of images, fonts, colors, and textures that define the style of the project
  • 14. Personas ● The personas are archetypes built after an exhaustive observation of the potential users. ● Personas are fictitious , but they are based on knowledge of real users. ● Understanding your audience is essential to building great products.
  • 16. Interaction Design • How users behave in the application like navigation • If your user does something, your app needs to acknowledge the interaction instantly i.e. responsiveness
  • 18. Visual Design • Focuses on the aesthetics of an app and its related materials by strategically implementing images, colors, fonts, and other elements. • Placed on the top of Interaction design
  • 21. Common Bad Habits • Not thumb friendly • Not using full screen concentrating only on particular section top/bottom • Cluttered information on single screen • Not applying The Golden Ratio in Designs • Lack of proper information hierarchy • Unclear entry and exit point
  • 22. Useful Links Android Design In Action Awesome Android Design Androiduiux Androidniceties Create Personas
  • 23. Simplicity is the ultimate sophistication. -- Steve Jobs Thank You