outsystems webinar - building a live style guide
TRANSCRIPT
Building a Live Style Guide
Replace This image in master
Presentation
Daniel ReisFront-End Expert @ OutSystems
Hello World!!Linkedin https://goo.gl/RtT7qU
2
3
Customers say that a Live Style Guideincreased 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? 6
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?
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?
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?
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?
The OutSystems way
18
How does OutSystems help?
● The power of Web Blocks
○ Reusable UI elements
○ Drag-and-Drop
○ Improve maintenance
19What is a Style Guide?
Silk UI
20Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
Silk UI Patterns
21Webinar SILKUI from basics to advanced https://www.youtube.com/watch?v=KwVLAp5Q3wM What is a Style Guide?
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?
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
Recommendations
Agenda
● What is a Live Style Guide?
● Recommendations
○ Organization
○ Architecture
○ Theme
○ Layout
○ Patterns
25Recommendations
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?
● 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
● 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
● 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
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
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
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
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
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
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
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
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
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
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
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 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
Thank you