SlideShare a Scribd company logo
1 of 33
By:-
AASHISH UPPAL
User interface (UI) for mobile applications
WHAT IS UI?
• In information technology, the user
interface (UI) is everything
designed into an information device
with which a human being may
interact -- including display screen,
keyboard, mouse, light pen, the
appearance of a desktop,
illuminated characters, help
messages, and how an application
program or a Web site invites
interaction and responds to it.
GOALS?
• Create a visual language that synthesizes classic
principles of good design with the innovation and
possibility of technology and science.
• Develop a single underlying system that allows for
a unified experience across platforms and device
sizes. Mobile precepts are fundamental, but touch,
voice, mouse, and keyboard are all first-class input
methods.
PRINCIPLES
Material is the metaphor
• A material metaphor is the unifying theory of a rationalized space and a
system of motion. The material is grounded in tactile reality, inspired by the
study of paper and ink, yet technologically advanced and open to imagination
and magic.
Bold, graphic, intentional
• The foundational elements of print-based design – typography, grids, space,
scale, color, and use of imagery – guide visual treatments. These elements
do far more than please the eye. They create hierarchy, meaning, and focus.
Deliberate color choices, edge-to-edge imagery, large-scale typography, and
intentional white space create a bold and graphic interface that immerse the
user in the experience.
• An emphasis on user actions makes core functionality immediately apparent
and provides waypoints for the user.
DIMENSIONS FOR UI
DIMENSIONS OF ANDROID DEVICES
UI FOR DIFFERENT SCREEN SIZES
COLOR PALETTE
This color palette comprises primary and accent colors that can
be used for illustration or to develop your brand colors. They’ve
been designed to work harmoniously with each other.
The color palette starts with primary colors and fills in the
spectrum to create a complete and usable palette for Android,
Web, and iOS. Google suggests using the 500 colors as the
primary colors in your app and the other colors as accents colors.
User interface (UI) for mobile applications
EXAMPLE OF USING COLOR SCHEME
Example of a color
palette using two
purple hues from the
primary palette and
one accent green
hue.
DARK TEXT ON LIGHT BACKGROUND
COLOR THEME SELECTION FOR APPLICATION
Themes let you apply a consistent tone to an
app. The theme specifies the darkness of the
surfaces, level of shadow, and appropriate
opacity of ink elements. To promote greater
consistency between apps, light and dark
themes are available to choose from.
1. Status bar
2. App bar
3. Background
4. Cards/Dialogs
Dark Theme
ICONS
• Material icons use geometric shapes to visually
represent core ideas, capabilities, or topics.
Product icons are the visual expression of a brand’s
products, services, and tools.
System icons represent a command, file, device,
directory, or common actions.
Sizing
Product icons are 48dp, System icons are 24dp
ANDROID ICON SIZES – APP LAUNCHER
What sizes do I need for Android App launcher icons?
Quick answer : 48 px, 72 px, 96 px, 144 px, 192 px & 512 px (for
Google Play Store)
All Android icons follow the
same scaling rules, so when
creating your icon files you
must make 5 versions to
cover all the platforms
available.
The table below shows the
pixel densities and icon sizes
for the different types of user
interface icons used by
Android:
MDPI (Ba
seline)
HDPI XHDPI XXHDPI XXXHDPI
Scale 1 x 1.5 x 2 x 3 x 4 x
DPI ~ 160 dpi ~ 240 dpi ~ 320 dpi ~ 480 dpi ~ 640 dpi
App
Launcher
Icons
48 px 72 px 96 px 144 px 192 px
Action bar
Icons
32 px
(24px
inset)
48 px 64 px 96 px 128 px
Small /
Contextua
l Icons
16 px
(12px
inset)
24 px 32 px 48 px 64 px
Notificatio
n Icons
24 px
(22px
inset)
36 px 48 px 72 px 96 px
User interface (UI) for mobile applications
STYLES
• When using illustration and photography to enhance the user
experience, choose images that express personal relevance,
information, and delight.
UNITS AND MEASUREMENTS
• The number of pixels that fit into an inch is referred to as “pixel density.” High-
density screens have more pixels per inch than low-density ones. As a result,
UI elements (such as a button) appear physically larger on low-density
screens and smaller on high-density screens.
• Screen resolution refers to the total number pixels in a display.
• screen density = screen width (or height) in pixels / screen width (or
height) in inches
High
Density
Screen
CARDS ARE FLEXIBLE
Cards are easily arranged into flexible layouts and
scalable UI forms itself nearly automatically.
Content like news articles with rich visuals and mixed
sources create a great opportunity to use staggered
list-style approach to create visually pleasing, content
rich screens.
User interface (UI) for mobile applications
USER DELIGHT
Going for good app to a great app requires more than
just nice scalable UI. You need to delight your users.
In case of Onefootball a lot of details were added to
the app to push it from being good to great.
In a football app the right place to start making users
delighted is the team page. Onefootball app affords
each team a fully themed page. A fan of any team will
immediately recognize the color theme and prominent
team logo.
User interface (UI) for mobile applications
WHAT ARE WE BUILDING?
Before we get started, we need to know what we’re
designing. We don’t need to bust out the pencil and
paper or fire up Sketch just yet. We just need to
brainstorm the overall functions of the app.
HOW DO WE BUILD IT?
To get started, we’ll use pencil and paper and start
sketching out these various app functions. Once these
drawings are finalized, we’ll move over
to Photoshop and start breathing life into them.
SKETCHING OUR APP
The first thing we need is a simple flowchart so we
can understand how the user makes their way
through the software.
This helps us understand
how the different screens of
our app interact with each
other. Next we’ll work on
sketching out each
individual screen.
From here, we’re ready to
fire up Sketch and start
bringing our designs to life!
WIREFRAME & PROTOTYPING
After sketching usually UI designers proceed with Wire-framing.
This is the backbone of the application and its functionalities.
Initially good b/w wireframes will map out exactly where the
buttons, forms positions will be shown.
COLORFUL VISUALS
In this phase the UI designer will be filling the colors in
wireframes using Photoshop or illustrator, etc. This phase
involves giving a life to those boxes with a detailed good-looking
color version, which includes the perfect color palates and brand
language. Again designer has to share each and every screen to
CEO, Development and Marketing team for feedbacks.
SAMPLES OF UI ON 640 X 900 PX SCREEN SIZE
REFERENCES
• https://think360studio.com/why-designers-should-follow-user-experience-
process-for-a-product-startup/
• http://blog.careerfoundry.com/ui-design/how-to-design-a-mobile-app-using-
user-interface-design-principles
• https://material.google.com/

More Related Content

What's hot

User interfaces for mobile applications
User interfaces for mobile applicationsUser interfaces for mobile applications
User interfaces for mobile applicationsK Senthil Kumar
 
Mobile Application Development With Android
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Androidguest213e237
 
Basic android-ppt
Basic android-pptBasic android-ppt
Basic android-pptSrijib Roy
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application DevelopmentTharindu Dassanayake
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android StudioSuyash Srijan
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniquesAlan Dix
 
Mobile application development
Mobile application developmentMobile application development
Mobile application developmentEric Cattoir
 
Top 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksTop 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksAlbiorix Technology
 
Android app development ppt
Android app development pptAndroid app development ppt
Android app development pptsaitej15
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15koolkampus
 
Achieving quality contraints
Achieving quality contraintsAchieving quality contraints
Achieving quality contraintsK Senthil Kumar
 
Android application development ppt
Android application development pptAndroid application development ppt
Android application development pptGautam Kumar
 
Human Factors and User Interface Design
Human Factors and User Interface DesignHuman Factors and User Interface Design
Human Factors and User Interface DesignSaggitariusArrow
 

What's hot (20)

User interfaces for mobile applications
User interfaces for mobile applicationsUser interfaces for mobile applications
User interfaces for mobile applications
 
User interface-design
User interface-designUser interface-design
User interface-design
 
AndroidManifest
AndroidManifestAndroidManifest
AndroidManifest
 
Mobile Application Development With Android
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Android
 
Basic android-ppt
Basic android-pptBasic android-ppt
Basic android-ppt
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Android UI
Android UIAndroid UI
Android UI
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android Studio
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniques
 
Mobile application development
Mobile application developmentMobile application development
Mobile application development
 
Top 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksTop 11 Mobile App Development Frameworks
Top 11 Mobile App Development Frameworks
 
Android app development ppt
Android app development pptAndroid app development ppt
Android app development ppt
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Achieving quality contraints
Achieving quality contraintsAchieving quality contraints
Achieving quality contraints
 
Android application development ppt
Android application development pptAndroid application development ppt
Android application development ppt
 
Hypertext, multimedia and www
Hypertext, multimedia and wwwHypertext, multimedia and www
Hypertext, multimedia and www
 
Human Factors and User Interface Design
Human Factors and User Interface DesignHuman Factors and User Interface Design
Human Factors and User Interface Design
 
Android Location and Maps
Android Location and MapsAndroid Location and Maps
Android Location and Maps
 

Similar to User interface (UI) for mobile applications

Day 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptxDay 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptxShayantaniKar
 
Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for AndroidLorica Claesson
 
Material design for android
Material design for androidMaterial design for android
Material design for androidVmoksha Admin
 
Icon assignment
Icon assignmentIcon assignment
Icon assignmentrobinb83
 
iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1Sansern Wuthirat
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdfSandeshGyawali2
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
How to: A starters guide for app development on Apple Watch
How to: A starters guide for app development on Apple WatchHow to: A starters guide for app development on Apple Watch
How to: A starters guide for app development on Apple WatchSoftTeco
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics katy walker
 
Good Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeGood Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeOmar Mohammad
 
Components of Digital Product Design by Tumblr Principal PM
Components of Digital Product Design by Tumblr Principal PMComponents of Digital Product Design by Tumblr Principal PM
Components of Digital Product Design by Tumblr Principal PMProduct School
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan RosuRazvan Rosu
 

Similar to User interface (UI) for mobile applications (20)

Day 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptxDay 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptx
 
Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
 
Material design for android
Material design for androidMaterial design for android
Material design for android
 
Icon assignment
Icon assignmentIcon assignment
Icon assignment
 
iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
Icon design
Icon designIcon design
Icon design
 
Icon design
Icon designIcon design
Icon design
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Graphics course fundamental
Graphics course fundamental Graphics course fundamental
Graphics course fundamental
 
Android Material Design
Android Material DesignAndroid Material Design
Android Material Design
 
ARTS.pptx
ARTS.pptxARTS.pptx
ARTS.pptx
 
How to: A starters guide for app development on Apple Watch
How to: A starters guide for app development on Apple WatchHow to: A starters guide for app development on Apple Watch
How to: A starters guide for app development on Apple Watch
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
 
Building Beautiful Flutter Apps
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
 
Good Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeGood Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to Inkscape
 
Adobe XD
Adobe XD Adobe XD
Adobe XD
 
Components of Digital Product Design by Tumblr Principal PM
Components of Digital Product Design by Tumblr Principal PMComponents of Digital Product Design by Tumblr Principal PM
Components of Digital Product Design by Tumblr Principal PM
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 

Recently uploaded

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (19)

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

User interface (UI) for mobile applications

  • 3. WHAT IS UI? • In information technology, the user interface (UI) is everything designed into an information device with which a human being may interact -- including display screen, keyboard, mouse, light pen, the appearance of a desktop, illuminated characters, help messages, and how an application program or a Web site invites interaction and responds to it.
  • 4. GOALS? • Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. • Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
  • 5. PRINCIPLES Material is the metaphor • A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
  • 6. Bold, graphic, intentional • The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. • An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
  • 9. UI FOR DIFFERENT SCREEN SIZES
  • 10. COLOR PALETTE This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.
  • 12. EXAMPLE OF USING COLOR SCHEME Example of a color palette using two purple hues from the primary palette and one accent green hue.
  • 13. DARK TEXT ON LIGHT BACKGROUND
  • 14. COLOR THEME SELECTION FOR APPLICATION Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.
  • 15. 1. Status bar 2. App bar 3. Background 4. Cards/Dialogs Dark Theme
  • 16. ICONS • Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. Product icons are the visual expression of a brand’s products, services, and tools. System icons represent a command, file, device, directory, or common actions. Sizing Product icons are 48dp, System icons are 24dp
  • 17. ANDROID ICON SIZES – APP LAUNCHER What sizes do I need for Android App launcher icons? Quick answer : 48 px, 72 px, 96 px, 144 px, 192 px & 512 px (for Google Play Store)
  • 18. All Android icons follow the same scaling rules, so when creating your icon files you must make 5 versions to cover all the platforms available. The table below shows the pixel densities and icon sizes for the different types of user interface icons used by Android: MDPI (Ba seline) HDPI XHDPI XXHDPI XXXHDPI Scale 1 x 1.5 x 2 x 3 x 4 x DPI ~ 160 dpi ~ 240 dpi ~ 320 dpi ~ 480 dpi ~ 640 dpi App Launcher Icons 48 px 72 px 96 px 144 px 192 px Action bar Icons 32 px (24px inset) 48 px 64 px 96 px 128 px Small / Contextua l Icons 16 px (12px inset) 24 px 32 px 48 px 64 px Notificatio n Icons 24 px (22px inset) 36 px 48 px 72 px 96 px
  • 20. STYLES • When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight.
  • 21. UNITS AND MEASUREMENTS • The number of pixels that fit into an inch is referred to as “pixel density.” High- density screens have more pixels per inch than low-density ones. As a result, UI elements (such as a button) appear physically larger on low-density screens and smaller on high-density screens. • Screen resolution refers to the total number pixels in a display. • screen density = screen width (or height) in pixels / screen width (or height) in inches
  • 23. CARDS ARE FLEXIBLE Cards are easily arranged into flexible layouts and scalable UI forms itself nearly automatically. Content like news articles with rich visuals and mixed sources create a great opportunity to use staggered list-style approach to create visually pleasing, content rich screens.
  • 25. USER DELIGHT Going for good app to a great app requires more than just nice scalable UI. You need to delight your users. In case of Onefootball a lot of details were added to the app to push it from being good to great. In a football app the right place to start making users delighted is the team page. Onefootball app affords each team a fully themed page. A fan of any team will immediately recognize the color theme and prominent team logo.
  • 27. WHAT ARE WE BUILDING? Before we get started, we need to know what we’re designing. We don’t need to bust out the pencil and paper or fire up Sketch just yet. We just need to brainstorm the overall functions of the app.
  • 28. HOW DO WE BUILD IT? To get started, we’ll use pencil and paper and start sketching out these various app functions. Once these drawings are finalized, we’ll move over to Photoshop and start breathing life into them.
  • 29. SKETCHING OUR APP The first thing we need is a simple flowchart so we can understand how the user makes their way through the software. This helps us understand how the different screens of our app interact with each other. Next we’ll work on sketching out each individual screen. From here, we’re ready to fire up Sketch and start bringing our designs to life!
  • 30. WIREFRAME & PROTOTYPING After sketching usually UI designers proceed with Wire-framing. This is the backbone of the application and its functionalities. Initially good b/w wireframes will map out exactly where the buttons, forms positions will be shown.
  • 31. COLORFUL VISUALS In this phase the UI designer will be filling the colors in wireframes using Photoshop or illustrator, etc. This phase involves giving a life to those boxes with a detailed good-looking color version, which includes the perfect color palates and brand language. Again designer has to share each and every screen to CEO, Development and Marketing team for feedbacks.
  • 32. SAMPLES OF UI ON 640 X 900 PX SCREEN SIZE