OutSystems Webinar - Building a Live Style Guide
-
Upload
daniel-reis -
Category
Engineering
-
view
342 -
download
8
Transcript of OutSystems Webinar - Building a Live Style Guide
![Page 1: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/1.jpg)
Building a Live Style Guide
![Page 2: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/2.jpg)
Replace This image in master
Presentation
Daniel ReisFront-End Expert @ OutSystems
Hello World!!Linkedin https://goo.gl/RtT7qU
2
![Page 3: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/3.jpg)
3
Customers say that a Live Style Guideincreased the speed of their projects in
300%
![Page 4: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/4.jpg)
Agenda
● What is a Live Style Guide?
● Recommendations
● Building a Live Style Guide
Agenda 4
![Page 5: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/5.jpg)
What is a Live Style Guide?
![Page 6: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/6.jpg)
Agenda
● What is a Live Style Guide?
○ Style Guide
○ Live Style Guide
○ OutSystems Live Style Guide
What is a Style Guide? 6
![Page 7: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/7.jpg)
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?
![Page 8: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/8.jpg)
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?
![Page 9: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/9.jpg)
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?
![Page 10: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/10.jpg)
A bird told me a story
10
![Page 11: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/11.jpg)
Live Style Guide
● Consistency
11What is a Style Guide?
![Page 12: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/12.jpg)
● Consistency
● Live examples of the components
Live Style Guide
12What is a Style Guide?
![Page 13: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/13.jpg)
● Consistency
● Live examples of the components
● Code snippets
Live Style Guide
13What is a Style Guide?
![Page 18: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/18.jpg)
The OutSystems way
18
![Page 19: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/19.jpg)
How does OutSystems help?
● The power of Web Blocks
○ Reusable UI elements
○ Drag-and-Drop
○ Improve maintenance
19What is a Style Guide?
![Page 20: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/20.jpg)
Silk UI
20Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
![Page 21: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/21.jpg)
Silk UI Patterns
21Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
![Page 22: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/22.jpg)
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?
![Page 23: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/23.jpg)
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
![Page 24: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/24.jpg)
Recommendations
![Page 25: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/25.jpg)
Agenda
● What is a Live Style Guide?
● Recommendations
○ Organization
○ Architecture
○ Theme
○ Layout
○ Patterns
25Recommendations
![Page 26: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/26.jpg)
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?
![Page 27: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/27.jpg)
● 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
![Page 28: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/28.jpg)
● 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
![Page 29: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/29.jpg)
● 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 ApplicationRecommendations
![Page 30: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/30.jpg)
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
![Page 31: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/31.jpg)
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
![Page 32: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/32.jpg)
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
![Page 33: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/33.jpg)
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
![Page 34: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/34.jpg)
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
![Page 35: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/35.jpg)
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
![Page 36: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/36.jpg)
Patterns
36Recommendations
![Page 37: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/37.jpg)
Patterns
37
Dublin Liverpool Lisbon Vanilla Tokyo
Recommendations
![Page 38: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/38.jpg)
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
![Page 39: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/39.jpg)
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
![Page 40: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/40.jpg)
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
![Page 41: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/41.jpg)
Building a Live Style Guide
![Page 42: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/42.jpg)
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/OutSystems42Building a Live Style Guide
![Page 43: OutSystems Webinar - Building a Live Style Guide](https://reader034.fdocuments.net/reader034/viewer/2022042506/58f25c011a28abad458b45a1/html5/thumbnails/43.jpg)
Thank you