Download as PDF, PPTX
More Related Content
Similar to OutSystems Webinar - Building a Live Style Guide
OutSystems Webinar - Building a Live Style Guide
- 1. Building a LiveStyle Guide
- 2. Replace This image inmaster Presentation Daniel Reis Front-End Expert @ OutSystems Hello World!! Linkedin https://goo.gl/RtT7qU 2
- 3. 3 Customers say thata Live Style Guide increased the speed of their projects in 300%
- 4. Agenda ● What isa Live Style Guide? ● Recommendations ● Building a Live Style Guide Agenda 4
- 5. What is aLive Style Guide?
- 6. Agenda ● What isa Live Style Guide? ○ Style Guide ○ Live Style Guide ○ OutSystems Live Style Guide What is a Style Guide? 6
- 7. Style Guide ● Companyrules on how to communicate the brand ● A set of standards for the writing and design of documents ● Either for general use or for a specific publication, organization or field 7What is a Style Guide?
- 8. Style Guide ● Evolvedto a document with the visual language for the company’s application(s) ● Ensure adherence to the brand rules, user interface consistency, and foster usability 8Source: https://corporateidentity.alberta.ca/downloads/Alberta_Corporate_Identity_Manual.pdf What is a Style Guide?
- 9. Style Guide ● Evolvedto a document with the visual language for the company’s application(s) ● Ensure adherence to the brand rules, user interface consistency, and foster usability 9Source: http://www.argentowine.com/wp-content/uploads/2010/11/Argento-Brand-Logo-Guidelines-August-2013.pdf What is a Style Guide?
- 10. A bird toldme a story 10
- 11. Live Style Guide ●Consistency 11What is a Style Guide?
- 12. ● Consistency ● Liveexamples of the components Live Style Guide 12What is a Style Guide?
- 13. ● Consistency ● Liveexamples of the components ● Code snippets Live Style Guide 13What is a Style Guide?
- 14. BBC GEL 14What isa Style Guide?Source: http://www.bbc.co.uk/gel
- 15. BBC GEL 15What isa Style Guide?Source: http://www.bbc.co.uk/gel
- 16. BBC GEL 16What isa Style Guide?Source: http://www.bbc.co.uk/gel
- 17. BBC GEL 17 What isa Style Guide? Source: http://www.bbc.co.uk/gel
- 18.
- 19. How does OutSystemshelp? ● The power of Web Blocks ○ Reusable UI elements ○ Drag-and-Drop ○ Improve maintenance 19What is a Style Guide?
- 20. Silk UI 20Webinar SILKUIfrom basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 21. Silk UI Patterns 21WebinarSILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 22. Silk UI Themes 22 Dublin Liverpool LisbonTokyo Vanilla Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 23. OutSystems Live StyleGuide ● Provided as an OutSystems module, to be used directly by developers ● As easy to use as drag-n-dropping blocks to the screen ● Code is contained in blocks and more easily managed ● Living part of architecture application Benefits ● (Even) lower skillset required for building apps with great UX ● Much easier to maintain, due to more structured approach ● Up to 300% faster development!! What is a Style Guide? 23
- 24.
- 25. Agenda ● What isa Live Style Guide? ● Recommendations ○ Organization ○ Architecture ○ Theme ○ Layout ○ Patterns 25Recommendations
- 26. Organization Rules forsuccess 1. Clear ownership of the style guide(s) by one team 2. Clear mandate within development group to use these style guide(s) 3. Style guide team lives in the intersection of Business / UX / Development 4. There needs to be an open channel between the Development Teams and the Style Guide Team a. Style Guide Team needs to perform handovers of new releases to the Development Teams b. Development Teams should involve the Style Guide Team in their UI development c. Style Guide Team should provide effective support to its internal customers d. Style Guide Team must communicate abundantly with the Development Teams 26What is a Style Guide?
- 27. ● Custom Theme ○With all custom rules and Layout ● Custom Template ○ Clean Starter app based on Custom Theme Architecture 27 Theme Silk UI Template ● Silk UI Framework ○ With all based rules Recommendations
- 28. ● Style GuideApplication ○ Documentation rules for Custom Theme and Application ○ Showcase of Patterns applied to Custom Theme ● Application ○ Application itself ● Silk UI Framework ○ With all based rules ● Custom Theme ○ With all custom rules and Layout ● Custom Template ○ Clean Starter app based on Custom Theme Architecture 28 Theme Style Guide Application Silk UI Template Recommendations
- 29. ● Silk UIFramework ○With all based rules ● Custom Theme ○ With all custom rules and Layout ● Custom Template ○ Clean Starter app based on Custom Theme ● Style Guide Application ○ Documentation rules for Custom Theme and Application ○ Showcase of Patterns applied to Custom Theme ● Application ○ Application itself Architecture 29 Theme Style Guide Application Silk UI Patterns Template ● Patterns ○ Isolated patterns used in this Application Recommendations
- 30. Theme 30 Patterns_Liverpool.css Patterns_SilkUI.css Patterns_Lisbon.css Patterns_Tokyo.cssPatterns_Dublin.css Silk UIFramework ● Base Rules ● Structure Rules ● Patterns Rules ● Useful Classes ● Patterns Theme Rules ● Theme Useful Classes Recommendations
- 31. Theme 31 Patterns_Liverpool.css Patterns_SilkUI.css Patterns_Lisbon.css Patterns_Tokyo.cssPatterns_Dublin.css LiverpoolTheme.cssLisbonTheme.css TokyoTheme.cssDublinTheme.cssVanillaTheme.css Theme Template Silk UI Framework ● Theme Base Rules ● Theme Structure Rules Recommendations
- 32. Theme 32 Patterns_Dublin.css DublinTheme.css + =CustomTheme.css VanillaTheme.css = CustomTheme.css ● Less resources, less imports and less rules ● No need to override Theme rules ● Ease to maintain Recommendations
- 33. CustomTheme.css Theme 33 ● Less resources,less imports and less rules ● No need to override Theme rules ● Ease to maintain Patterns_SilkUI.css Patterns_Dublin.css DublinTheme.css Theme Template Silk UI Framework ● CustomTheme.css should consume directly Patterns_SilkUI.css Recommendations
- 34. Layout 34 ● Define thestructure of your HTML page ● Web Block with Placeholders for your content ● To be used as Layout base from your Theme ● Include required files to Layout (such as JavaScript) Recommendations
- 35. Patterns ● Are reusableelements ● Solve most common scenarios ● Provide good defaults ● Designed to speed up the development ● Define a standard structure ● Without business logic 35Recommendations
- 36.
- 37. Patterns 37 Dublin Liverpool LisbonVanilla Tokyo Recommendations
- 38. Patterns 38 Corporate Styles Apps Mobile Apps MobileApps Silk UI Internal Apps Internal Apps Building a Live Style Guide App 1 App 2 External Apps ● Optimized code with the last best practices ● Large range of tested devices and browsers ● Evolved by OutSystems ● Institution branding and broad style definitions ● Common patterns and widgets ● Core Stylesheet
- 39. Patterns 39Building a LiveStyle Guide ● Style a Silk UI Pattern ● Create a Pattern based on a Silk UI Pattern ● Create a Pattern from scratch
- 40. Recap 40Recommendations 1. Create aStyle Guide Team and give them the control 2. Architecture a. Build a Template module and a Patterns repository b. Create your Live Style Guide 3. Theme a. Merge CSS into CustomTheme.css b. CustomTheme.css should consume directly Patterns_SilkUI.css 4. Layout a. Build as many Layouts as make sense for your application 5. Patterns a. Build your patterns without business logic so it could be applied anywhere
- 41. Building a LiveStyle Guide
- 42. Recap 1. Download &Install Silk UI Framework and Silk UI Template that fits your needs 2. Clone Theme from selected Silk UI Template 3. Create a New Application for the Style Guide 4. Create your Template 5. Build your Live Style Guide application You can download the ACME Style Guide from Forge http://www.outsystems.com/forge/component/1285/ACME+Styleguide/ Assets it will be available at dribble https://dribbble.com/OutSystems 42Building a Live Style Guide
- 43.