Training Webinar: Building a live style guide
•
0 gostou•1,905 visualizações
How can you speed up development and ensure brand consistency? Over the past year, we’ve created live style guides with a number of customers and seen amazing results. In “Building a Live Style Guide,” a free, two-hour technical training webinar, I’ll be sharing our approach to building these industry standards that accelerate app development and comply with brand guidelines. Webinar video: https://www.youtube.com/watch?v=JQrtRkquKOI&index=6&list=PLxALhSwsaivxIAcXbwDRDH4r0L6KqFiN8 Free Online training: https://www.outsystems.com/learn/courses/ Follow us on Twitter http://www.twitter.com/OutSystemsDev Like us on Facebook http://www.Facebook.com/OutSystemsDev
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de OutSystems
Mais de OutSystems (20)
Último
Último (20)
Training Webinar: Building a live style guide
- 1. Building a Live Style Guide
- 2. Replace This image in master Presentation Daniel Reis Front-End Expert @ OutSystems Hello World!! Linkedin https://goo.gl/RtT7qU 2
- 3. 3 Customers say that a Live Style Guide increased the speed of their projects in 300%
- 4. Agenda ● What is a Live Style Guide? ● Recommendations ● Building a Live Style Guide Agenda 4
- 5. What is a Live Style Guide?
- 6. Agenda ● What is a Live Style Guide? ○ Style Guide ○ Live Style Guide ○ OutSystems Live Style Guide What is a Style Guide? 6
- 7. Style Guide ● Company rules 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 ● Evolved to 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 ● Evolved to 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 told me a story 10
- 11. Live Style Guide ● Consistency 11What is a Style Guide?
- 12. ● Consistency ● Live examples of the components Live Style Guide 12What is a Style Guide?
- 13. ● Consistency ● Live examples of the components ● Code snippets Live Style Guide 13What is a Style Guide?
- 14. BBC GEL 14What is a Style Guide?Source: http://www.bbc.co.uk/gel
- 15. BBC GEL 15What is a Style Guide?Source: http://www.bbc.co.uk/gel
- 16. BBC GEL 16What is a Style Guide?Source: http://www.bbc.co.uk/gel
- 17. BBC GEL 17 What is a Style Guide? Source: http://www.bbc.co.uk/gel
- 19. How does OutSystems help? ● The power of Web Blocks ○ Reusable UI elements ○ Drag-and-Drop ○ Improve maintenance 19What is a Style Guide?
- 20. Silk UI 20 labs.outsystems.net/SilkUI Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 21. Silk UI Patterns 21Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 22. Silk UI Themes 22 Dublin Liverpool Lisbon Tokyo Vanilla Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
- 23. OutSystems Live Style Guide ● 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. Recommendations
- 25. Agenda ● What is a Live Style Guide? ● Recommendations ○ Organization ○ Architecture ○ Theme ○ Layout ○ Patterns 25Recommendations
- 26. Organization Rules for success 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 Guide Application ○ 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 UI Framework ● 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.css VanillaTheme.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 the structure 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 reusable elements ● Solve most common scenarios ● Provide good defaults ● Designed to speed up the development ● Define a standard structure ● Without business logic 35Recommendations
- 37. Patterns 37 Dublin Liverpool Lisbon Vanilla Tokyo Recommendations
- 38. Patterns 38 Corporate Styles Apps Mobile Apps Mobile Apps 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 Live Style 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 a Style 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 Live Style 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. Thank you