The document outlines a presentation on professional UI design using Oracle Apex 5.1, covering topics like design principles, best practices, and tools such as Chrome Dev Tools and Adobe XD. It highlights the prerequisites for attendees, emphasizing knowledge in Oracle Apex, HTML, and CSS. The presentation also delves into customizing themes and the use of advanced CSS techniques to ensure responsive design.

1. Professional UI Design with APEX 5.1
DOAG 2017

2. First things first
English?
Deutsch?

3. About me
• Freelancer, Steven Grzbielok IT-Solutions
• Software Developer and Architect, Oliver Funk Myjur
Software Entwicklung
• Chairman, Entrepreneursclub Darmstadt e.V.
• Oracle since 4 years
• Microsoft since 3 months 🙃

4. Agenda
1. Design in General
2. APEX Best Practices
3. Chrome Dev Tools
4. APEX NITRO

5. Requirements
1. Should have worked with Oracle APEX (obviously)
2. Basic HTML knowledge
3. Basic CSS knowledge
4. Not very afraid of the command line
If not, look here: https://www.slideshare.net/StevenGrzbielok/apex-51-ui-design-crashkurs

6. UI Design: What is it?
Jesse James Garret: Elements of User Experience

7. Design Process

8. Lo-Fi Prototyping
Adobe Xd, invisoinapp, Sketch

9. High-Fi
Prototyping

10. High-Fi
Prototyping
Quick SQL for DB mockups
Blueprint for generating big apps
without effort

11. 🚀

12. Basic concepts in APEX
Theme Template Template
Options

13. Don‘t unchain your theme!

14. Best practice: Customizing
1. Theme Roller
2. Templates & Template Options
3. Custom CSS-Classes
1. CSS-Code in Theme Roller
2. CSS-/JavaScript files
4. Custom templates
1. Define and adjust template options  flexible to use or use not
the change
2. Adjust template structure

17. Custom code: Always stay responsive!
1. Media Queries
@media screen and (max-device-width: 480px) { .column
{ float: none; } }
2. Flexible Images
img
{ height: auto; max-width: 100%; }
3. Fluid Grid
#region
{ max-width: 61.75em;
margin-top: 0.5%; }

18. Your new best friend

19. Your new best friendYour new best friend

20. Demo time!

22. LESS
.class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
border-color: #fff;
color: #2d5e8b;
}
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
border-color: #fff;
color: @color-base;
}
}
Less CSS

23.  Less/Sass
Like CSS but
with…
•Variables
•Nesting
•Importing
•Mixins
•Functions
•Operations
•Scopes
Easier to maintain

24. 😎

25. Looking for help?
https://apex.world https://thedesignership.com

26. Contact me!