Building a live style guide - Training Webinar
-
Upload
outsystems -
Category
Software
-
view
224 -
download
0
Transcript of Building a live style guide - Training Webinar
![Page 1: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/1.jpg)
Building a Live Style Guide
![Page 2: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/3.jpg)
3
Customers say that a Live Style Guideincreased the speed of their projects in
300%
![Page 4: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/4.jpg)
Agenda
● What is a Live Style Guide?
● Recommendations
● Building a Live Style Guide
Agenda 4
![Page 5: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/5.jpg)
What is a Live Style Guide?
![Page 6: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/10.jpg)
A bird told me a story
10
![Page 11: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/11.jpg)
Live Style Guide
● Consistency
11What is a Style Guide?
![Page 12: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/12.jpg)
● Consistency
● Live examples of the components
Live Style Guide
12What is a Style Guide?
![Page 13: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/13.jpg)
● Consistency
● Live examples of the components
● Code snippets
Live Style Guide
13What is a Style Guide?
![Page 18: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/18.jpg)
The OutSystems way
18
![Page 19: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/20.jpg)
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?
![Page 21: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/24.jpg)
Recommendations
![Page 25: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/25.jpg)
Agenda
● What is a Live Style Guide?
● Recommendations
○ Organization
○ Architecture
○ Theme
○ Layout
○ Patterns
25Recommendations
![Page 26: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/36.jpg)
Patterns
36Recommendations
![Page 37: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/37.jpg)
Patterns
37
Dublin Liverpool Lisbon Vanilla Tokyo
Recommendations
![Page 38: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/41.jpg)
Building a Live Style Guide
![Page 42: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/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: Building a live style guide - Training Webinar](https://reader031.fdocuments.in/reader031/viewer/2022021919/5872ebb31a28abfa548b725f/html5/thumbnails/43.jpg)
Thank you