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.
Building a Live Style Guide
Replace This image
in master
Presentation
Daniel Reis
Front-End Expert @ OutSystems
Hello World!!
Linkedin https://goo.gl/...
3
Customers say that a Live Style Guide
increased the speed of their projects in
300%
Agenda
● What is a Live Style Guide?
● Recommendations
● Building a Live Style Guide
Agenda 4
What is a Live Style Guide?
Agenda
● What is a Live Style Guide?
○ Style Guide
○ Live Style Guide
○ OutSystems Live Style Guide
What is a Style Guide?...
Style Guide
● Company rules on how to communicate the brand
● A set of standards for the writing and design of documents
●...
Style Guide
● Evolved to a document with the visual language for the company’s application(s)
● Ensure adherence to the br...
Style Guide
● Evolved to a document with the visual language for the company’s application(s)
● Ensure adherence to the br...
A bird told me a story
10
Live Style Guide
● Consistency
11What is a Style Guide?
● Consistency
● Live examples of the components
Live Style Guide
12What is a Style Guide?
● Consistency
● Live examples of the components
● Code snippets
Live Style Guide
13What is a Style Guide?
BBC GEL
14What is a Style Guide?Source: http://www.bbc.co.uk/gel
BBC GEL
15What is a Style Guide?Source: http://www.bbc.co.uk/gel
BBC GEL
16What is a Style Guide?Source: http://www.bbc.co.uk/gel
BBC GEL
17
What is a Style Guide?
Source: http://www.bbc.co.uk/gel
The OutSystems way
18
How does OutSystems help?
● The power of Web Blocks
○ Reusable UI elements
○ Drag-and-Drop
○ Improve maintenance
19What is...
Silk UI
20
labs.outsystems.net/SilkUI
Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM W...
Silk UI Patterns
21Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guid...
Silk UI Themes
22
Dublin
Liverpool
Lisbon Tokyo
Vanilla
Webinar SILKUI from basics to advanced https://www.youtube.com/wat...
OutSystems Live Style Guide
● Provided as an OutSystems module, to be used directly by developers
● As easy to use as drag...
Recommendations
Agenda
● What is a Live Style Guide?
● Recommendations
○ Organization
○ Architecture
○ Theme
○ Layout
○ Patterns
25Recomme...
Organization Rules for success
1. Clear ownership of the style guide(s) by one team
2. Clear mandate within development gr...
● Custom Theme
○ With all custom rules and Layout
● Custom Template
○ Clean Starter app based on Custom Theme
Architecture...
● Style Guide Application
○ Documentation rules for Custom Theme and Application
○ Showcase of Patterns applied to Custom ...
● Silk UIFramework
○ With all based rules
● Custom Theme
○ With all custom rules and Layout
● Custom Template
○ Clean Star...
Theme
30
Patterns_Liverpool.css
Patterns_SilkUI.css
Patterns_Lisbon.css Patterns_Tokyo.cssPatterns_Dublin.css
Silk UI Fram...
Theme
31
Patterns_Liverpool.css
Patterns_SilkUI.css
Patterns_Lisbon.css Patterns_Tokyo.cssPatterns_Dublin.css
LiverpoolThe...
Theme
32
Patterns_Dublin.css DublinTheme.css
+ = CustomTheme.css
VanillaTheme.css
= CustomTheme.css
● Less resources, less...
CustomTheme.css
Theme
33
● Less resources, less imports and less rules
● No need to override Theme rules
● Ease to maintai...
Layout
34
● Define the structure of your HTML page
● Web Block with Placeholders for your content
● To be used as Layout b...
Patterns
● Are reusable elements
● Solve most common scenarios
● Provide good defaults
● Designed to speed up the developm...
Patterns
36Recommendations
Patterns
37
Dublin Liverpool Lisbon Vanilla Tokyo
Recommendations
Patterns
38
Corporate
Styles
Apps Mobile Apps
Mobile Apps
Silk UI
Internal Apps
Internal Apps
Building a Live Style Guide
...
Patterns
39Building a Live Style Guide
● Style a Silk UI Pattern
● Create a Pattern based on a Silk UI Pattern
● Create a ...
Recap
40Recommendations
1. Create a Style Guide Team and give them the control
2. Architecture
a. Build a Template module ...
Building a Live Style Guide
Recap
1. Download & Install Silk UI Framework and Silk UI Template that fits your needs
2. Clone Theme from selected Silk ...
Thank you
Upcoming SlideShare
Loading in …5
×

Training Webinar: Building a live style guide

1,438 views

Published on

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

Published in: Software
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/epx7q ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download The Complete Lean Belly Breakthrough Program with Special Discount.  http://ishbv.com/bkfitness3/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Do This Simple 2-Minute Ritual To Loss 1 Pound Of Belly Fat Every 72 Hours ♣♣♣ http://ishbv.com/bkfitness3/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Training Webinar: Building a live style guide

  1. 1. Building a Live Style Guide
  2. 2. Replace This image in master Presentation Daniel Reis Front-End Expert @ OutSystems Hello World!! Linkedin https://goo.gl/RtT7qU 2
  3. 3. 3 Customers say that a Live Style Guide increased the speed of their projects in 300%
  4. 4. Agenda ● What is a Live Style Guide? ● Recommendations ● Building a Live Style Guide Agenda 4
  5. 5. What is a Live Style Guide?
  6. 6. Agenda ● What is a Live Style Guide? ○ Style Guide ○ Live Style Guide ○ OutSystems Live Style Guide What is a Style Guide? 6
  7. 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. 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. 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. 10. A bird told me a story 10
  11. 11. Live Style Guide ● Consistency 11What is a Style Guide?
  12. 12. ● Consistency ● Live examples of the components Live Style Guide 12What is a Style Guide?
  13. 13. ● Consistency ● Live examples of the components ● Code snippets Live Style Guide 13What is a Style Guide?
  14. 14. BBC GEL 14What is a Style Guide?Source: http://www.bbc.co.uk/gel
  15. 15. BBC GEL 15What is a Style Guide?Source: http://www.bbc.co.uk/gel
  16. 16. BBC GEL 16What is a Style Guide?Source: http://www.bbc.co.uk/gel
  17. 17. BBC GEL 17 What is a Style Guide? Source: http://www.bbc.co.uk/gel
  18. 18. The OutSystems way 18
  19. 19. How does OutSystems help? ● The power of Web Blocks ○ Reusable UI elements ○ Drag-and-Drop ○ Improve maintenance 19What is a Style Guide?
  20. 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. 21. Silk UI Patterns 21Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
  22. 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. 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. 24. Recommendations
  25. 25. Agenda ● What is a Live Style Guide? ● Recommendations ○ Organization ○ Architecture ○ Theme ○ Layout ○ Patterns 25Recommendations
  26. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  36. 36. Patterns 36Recommendations
  37. 37. Patterns 37 Dublin Liverpool Lisbon Vanilla Tokyo Recommendations
  38. 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. 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. 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. 41. Building a Live Style Guide
  42. 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. 43. Thank you

×