SlideShare a Scribd company logo
Pavel Ivanov	

UX/UI Engineer at Mozilla	

Bulgaria Web Summit, 31.05.2014 at Inter Expo Center (Sofia, Bulgaria)
What is Firefox OS?
How we started the project?
“The Web is the Platform”
The first Gaia Interface ...
Work Weeks
UX/UI (Day 1)
UX/UI (Day 2)
Start Coding (day 3)
First Devices (Day 4)
More Devices :) (Day 5)
The Results
WORK TOGETHER ALL THE TIME (24/7)
Firefox OS | V1 Design
V1 Design Principles
consumption focus / magazine feel
content is king
ease of use
emphasis on color and circle forms
Font Face
Fira Sans commissioned for readability
on mobile
Dark
media / entertainment
Content Focus
Light
productivity
differentiate productivity vs media
theatre experience
(content vs experience)
Icon Shape
Unique circle shape for app icons
and action icons
Value Selector
Ease of use
Value Selector
full screen dialogs & value selectors
Home screen LockscreenLockscreenHomescreen
Contacts CalendarMessagesContacts
Music VideoMusicMusic
Keypad On CallIncoming CallCall Log
The Problems with FFOS v1
Problem 1
Performance
Problem 2
Performance
Problem N
Performance
The Solution
Improve the Web Standards
Improve the Platform
Improve the Work Process
Where we are Today?
Where we are Today?
Firefox OS | V2 Refresh
Design by Code
Spacious
Content Focus
Emotion Through Motion
Design Principles for v2
Design by Code
Design by Code
flat, elegant design style
less dependency on bitmaps
easily scales across a larger portfolio of
devices
SVG iconography
V2 RefreshV1
Home Screen MusicContactsHome Screen
Keypad On CallIncoming CallCall Log
V2 RefreshV1
Spacious
larger controls
The Work Process v2
The Tools
design, wire frames, code,
build, automations, tests etc.
Questions?
Thank You :)
I Support the Open Web <3

More Related Content

Similar to FirefoxOS - Bulgaria Web Summit

Week 12 4 presen
Week 12 4 presenWeek 12 4 presen
Week 12 4 presen
s1170031
 
Welcome to Participants
Welcome to ParticipantsWelcome to Participants
Welcome to Participants
UCUOM
 
Week 12 4 presen
Week 12 4 presenWeek 12 4 presen
Week 12 4 presen
s1170031
 
Mobile Office For Maemo
Mobile Office For MaemoMobile Office For Maemo
Mobile Office For Maemo
ajay_ei
 
The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios Accessibility
Aimee Maree Forsstrom
 
Cross platform technologies explained better!
Cross platform technologies explained better!Cross platform technologies explained better!
Cross platform technologies explained better!
Master Software Solutions
 
Enterprise UI: Transforming enterprise application into engaging experience
Enterprise UI: Transforming enterprise application into engaging experienceEnterprise UI: Transforming enterprise application into engaging experience
Enterprise UI: Transforming enterprise application into engaging experience
Side Projects
 
Introduction to ui ux
Introduction to ui uxIntroduction to ui ux
Introduction to ui ux
Wycliff1
 
Brief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design SystemBrief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design System
Domenico Monaco
 
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
www.webhub.mobi by Yuvee, Inc.
 
Arnold Serrano (Chapter 5)
Arnold Serrano (Chapter 5)Arnold Serrano (Chapter 5)
Arnold Serrano (Chapter 5)
Jaypee Tan
 
Computer project work
Computer project workComputer project work
Computer project work
S.L.B.S Engineering College
 
Mobile Game Development using Adobe Flash
Mobile Game Development using Adobe FlashMobile Game Development using Adobe Flash
Mobile Game Development using Adobe Flash
chall3ng3r
 
Q4 How did you used media technologies in the construction and research, plan...
Q4 How did you used media technologies in the construction and research, plan...Q4 How did you used media technologies in the construction and research, plan...
Q4 How did you used media technologies in the construction and research, plan...
hollygruncell
 
2016 NEMO-UX Introduction
2016 NEMO-UX Introduction2016 NEMO-UX Introduction
2016 NEMO-UX Introduction
nemoux
 
10 th celebration
10 th celebration10 th celebration
10 th celebration
Dipan Samanta
 
Lessons Learned from building mbeddr
Lessons Learned from building mbeddrLessons Learned from building mbeddr
Lessons Learned from building mbeddr
Markus Voelter
 
Building Beautiful Flutter Apps
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
SheilaJimenezMorejon
 
Introduction.pptx
Introduction.pptxIntroduction.pptx
Introduction.pptx
ASIFIMRAN38
 
Exploring Usability and User Experience of WebVR Platforms
Exploring Usability and User Experience of WebVR PlatformsExploring Usability and User Experience of WebVR Platforms
Exploring Usability and User Experience of WebVR Platforms
Janine Videva
 

Similar to FirefoxOS - Bulgaria Web Summit (20)

Week 12 4 presen
Week 12 4 presenWeek 12 4 presen
Week 12 4 presen
 
Welcome to Participants
Welcome to ParticipantsWelcome to Participants
Welcome to Participants
 
Week 12 4 presen
Week 12 4 presenWeek 12 4 presen
Week 12 4 presen
 
Mobile Office For Maemo
Mobile Office For MaemoMobile Office For Maemo
Mobile Office For Maemo
 
The Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios AccessibilityThe Good, The Bad, The Voiceover - ios Accessibility
The Good, The Bad, The Voiceover - ios Accessibility
 
Cross platform technologies explained better!
Cross platform technologies explained better!Cross platform technologies explained better!
Cross platform technologies explained better!
 
Enterprise UI: Transforming enterprise application into engaging experience
Enterprise UI: Transforming enterprise application into engaging experienceEnterprise UI: Transforming enterprise application into engaging experience
Enterprise UI: Transforming enterprise application into engaging experience
 
Introduction to ui ux
Introduction to ui uxIntroduction to ui ux
Introduction to ui ux
 
Brief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design SystemBrief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design System
 
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
 
Arnold Serrano (Chapter 5)
Arnold Serrano (Chapter 5)Arnold Serrano (Chapter 5)
Arnold Serrano (Chapter 5)
 
Computer project work
Computer project workComputer project work
Computer project work
 
Mobile Game Development using Adobe Flash
Mobile Game Development using Adobe FlashMobile Game Development using Adobe Flash
Mobile Game Development using Adobe Flash
 
Q4 How did you used media technologies in the construction and research, plan...
Q4 How did you used media technologies in the construction and research, plan...Q4 How did you used media technologies in the construction and research, plan...
Q4 How did you used media technologies in the construction and research, plan...
 
2016 NEMO-UX Introduction
2016 NEMO-UX Introduction2016 NEMO-UX Introduction
2016 NEMO-UX Introduction
 
10 th celebration
10 th celebration10 th celebration
10 th celebration
 
Lessons Learned from building mbeddr
Lessons Learned from building mbeddrLessons Learned from building mbeddr
Lessons Learned from building mbeddr
 
Building Beautiful Flutter Apps
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
 
Introduction.pptx
Introduction.pptxIntroduction.pptx
Introduction.pptx
 
Exploring Usability and User Experience of WebVR Platforms
Exploring Usability and User Experience of WebVR PlatformsExploring Usability and User Experience of WebVR Platforms
Exploring Usability and User Experience of WebVR Platforms
 

Recently uploaded

一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 

Recently uploaded (20)

一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 

FirefoxOS - Bulgaria Web Summit