The starting point for everyone working with UI5 is the Demo Kit Application. Here you can find all the needed information such as API Reference, Developer Guide, Samples and Demo apps. Now, it is completely redesigned to showcase the innovative, responsive and multi theme capable UI5 framework! Come and see the new Demo Kit app accessible on any device, with modern look and feel and easy to use. Provide your valuable feedback so we can make it even better!

1. NEW DEMO KIT - YOUR WAY TO UI5
Petya Begovska, SAP
30th of June, 2017

2. 2 | © 2017 SAP SE. All rights reserved.
Demo Kit Concepts
• New Landing and Entry Page concept
• Documentation iFrame integrated
• API Ref linking directly to Samples
• Sample controls included
• New Demo apps andTools

3. 3 | © 2017 SAP SE. All rights reserved.
• Tools header navigation additions
• Block layout enhancements
• Color, imagery and responsiveness
• Samples integrated into the Demo Kit layout
• From wireframe to visual specifications
• Peer Design & Dev collaboration!
Demo Kit Concepts

4. 4 | © 2017 SAP SE. All rights reserved.
Fiori Visual Design
Utilizing the Fiori for tools visual language and design concepts!

5. 5 | © 2017 SAP SE. All rights reserved.
The New Demo Kit
• Landing Page
• Documentation
• API Reference
• Samples
• Demo Apps
Fully responsive and All in one place!

6. 6 | © 2017 SAP SE. All rights reserved.
Demo Kit and Demo Apps
UI5 DemoApps Redesign
As part of the UI5 Demo Kit redesign, demo applications also receive a design overhaul. These working examples can also be reused or
deconstructed by designers and developers.

7. 7 | © 2017 SAP SE. All rights reserved.
Demo Apps
Download and deconstruct
Built with UI5 standard controls
Latest Fiori target design
UI5 best practices
Tools Header
Side Navigation
Block Layout
The Demo Apps are built with standard UI5 components

8. 8 | © 2017 SAP SE. All rights reserved.
Why redesign?
The new branding aims to establish a personal relationship with both
external and internal developer community.
Ideation & Iteration
Based on a thorough research, the phoenix is sketched in different visual
styles - geometric, fluid, abstract, obvious, etc.
After an evaluation round, the best perceived shape is picked.
Rebuilt with simple geometry, the silhouette is adjusted until it works on
contrast backgrounds and in various sizes.
Colors & Typography
A color palette is assorted to complete the phoenix feeling. Details, such
as gradients are added to the shape. A suitable typeface is chosen
together with the best layout.
UI5 Logo Redesign

9. 9 | © 2017 SAP SE. All rights reserved.
Demo
http://openui5nightly.hana.ondemand.com/
Provide feedback
Contacts
Petya Begovska
@petya_begovska