introducing silk ui mobile
TRANSCRIPT
Sleek, Smooth, Beautiful: Introducing Silk UI MobileSamuel JesusR&D Extended Product
@OutSystems #NextStepNA
App Development Effort
Data Business Logic User Interface
~50%
CSS
Great UI without CSS
Ultimate Goal
Front-End Frameworks
Blocks
>90%Enterprise Customers
in Platform 9
Sep2015
131
269
Nov2015
358
Jan2016
Feb2016
389
Apr2016
454
Jul2015
53
Aug2015
88
Jun2016
517
@OutSystems #NextStepNA
SUPPORTED
What’s Next ?
Silk UI Framework
Silk UI Web Silk UI Mobile
Silk UI Web Differences
● Tokyo Template Deprecated
Silk UI Web Differences
● Tokyo Template Deprecated
● Mobile Only Patterns Deprecated
Silk UI Web Differences
● Tokyo Template Deprecated
● Mobile Only Patterns Deprecated
● Primary Color Implemented
Silk UI Mobile
@OutSystems #NextStepNA
Fast Performance
Fast Performance
Think Touch
Fast Performance
Think Touch
Smooth Animations
Fast Performance
Think Touch
Smooth Animations
Fluid Interactions
Fast Performance
Think Touch
Smooth Animations
Fluid Interactions
Pixel Perfect Design
Fast Performance
Think Touch
Smooth Animations
Fluid Interactions
Pixel Perfect Design
Specific Mobile Patterns
silkui.outsystems.com
Silk UI Mobile Basics
Layouts
● Same structure for Phone and Tablet
● Fixed Header and Bottom areas
● Native scroll on content area
● Off-canvas menu with gesture interactions
● Menu icon configurable
○ Gesture adapts to Icon
● Optional placeholders
Templates
Phone
Templates
Tablet
Universal
Templates
Demo
Advanced Tips
● Improve navigation between screens using transitions correctly
○ Between Screens - Fade In
○ Second Level Screens (Details) - Slide From right
○ Actions (Edit) - Slide from bottom
● Animate Block
● Touch Events
Advanced Tips
DEMO
silkui.outsystems.com
Examples - Field Services
Examples - Smart Power
silkui.outsystems.com Thank You!
Thank you!
www.outsystems.com42