Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Professional UI Design with APEX 5.1

DOAG 2017, Nuremberg (Germany)
This talk gives a short overview of best practices in design in general such as design in Oracle APEX related projects.

  • Login to see the comments

  • Be the first to like this

Professional UI Design with APEX 5.1

  1. 1. Professional UI Design with APEX 5.1 DOAG 2017
  2. 2. First things first English? Deutsch?
  3. 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. 4. Agenda 1. Design in General 2. APEX Best Practices 3. Chrome Dev Tools 4. APEX NITRO
  5. 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. 6. UI Design: What is it? Jesse James Garret: Elements of User Experience
  7. 7. Design Process
  8. 8. Lo-Fi Prototyping Adobe Xd, invisoinapp, Sketch
  9. 9. High-Fi Prototyping
  10. 10. High-Fi Prototyping Quick SQL for DB mockups Blueprint for generating big apps without effort
  11. 11. 🚀
  12. 12. Basic concepts in APEX Theme Template Template Options
  13. 13. Don‘t unchain your theme!
  14. 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
  15. 15. 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%; }
  16. 16. Your new best friend
  17. 17. Your new best friendYour new best friend
  18. 18. Demo time!
  19. 19. 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
  20. 20.  Less/Sass Like CSS but with… •Variables •Nesting •Importing •Mixins •Functions •Operations •Scopes Easier to maintain
  21. 21. 😎
  22. 22. Looking for help? https://apex.world https://thedesignership.com
  23. 23. Contact me!

×