Webinar: Building a Live Style Guide

Webinar: Building a Live Style Guide

  
Hi there!

Over the past year, we have been creating, with great results, Live Style Guide with some customers. As such, we would like to share with you, our approach for creating an industry standard called Style Guides, through a free, in-depth technical webinar titled “Building a Live Style Guide”.


In this webinar:

  • What is a Style Guide?

  • How OutSystems Platform helps you create a Live Style Guide?

  • How to architecture a Live Style Guide?

  • How maintenance and UI productivity was highly improved, while ensuring brand guidelines?
    Yes, marketing team, will <3 you!


This 2 hour webinar was hosted on May 19th at 13:45 GMT / 08:45 EST and was delivered by Daniel Reis
EDIT: It's a wrap! Please find below the link for the recording and to the presentation:

EDIT 2: if you're a designer, you can leverage our sketch files available in dribbble as a starting point to your styleguides.

Cheers,

RG
yay, been building a live style guide as well, so looking for improvements :)

Hi J.

The webinar was post-poned.
We'll keep you posted through this thread, regarding next steps.

Cheers,
RG
Hi community!

This webinar is back!
Make sure to register in it!

Cheers,
RG
Excellent.  I registered and soon my team will be registering as well.

Looking forward to the webinar.

All The Best,

Luis Camarena
Asentex, Inc.
Hello, will this be posted somewhere after the webinar has taken place? Thanks!
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
Rúben Gonçalves wrote:
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
 Hi Rúben,

Is the quality of the recording good? I missed it and would like to see the webinar!

Thanks in advance,
Wendy
 
Hope the recording went well cause I missed it.
Great session guys.
 
Would it be a possibility or an option to create a UX/UI corner on the community that we can start contributing to as a recommended practice and solution sharing area? Not everything needs to or can be published to the forge as it is a general skill-set toolbox that is more valuable in this area.
 
As a start the CSS guide and this webinar could move there.
 
Here are some examples of points that I have come across along with my views:
 
There is a strong drive for the softer side of UI delivery and we keep finding ourselves trying to translate the UX and customer journey principles into an OS implementation. With Silk UI and the theme generators we can get 80% there in a structured and short time. The challenging part is closing the 20% without making a mess of the CSS and JavaScript. There is a very strong and robust structure to the theme CSS but trying to manipulate it becomes a dev session in the Chrome console of trying to untangle what can be changed and where it should be changed. A class API guide or the LESS/SASS files could be very useful.
 
To date, if I needed to create a widget it resulted in some reverse engineering and review of other widgets to get a recommended practice of putting it together. There are some definite guidelines that can be followed to do this and the method has improved greatly on Amsterdam and Bali with SilkUI developer widgets. Again this is not clear or very intuitive and requires some mastery of the environment to create widgets that are well structured.
 
There is a very clear architectural guide for building a solution in a maintainable and robust way using the 4 layers. What is not clear is how the UX architecture can exist within this landscape and what the trade-off's maybe in placing menu's in a dedicated module or in a Orchestration or End User layer module. All that is really clear is that the theme module must be in the Library layer. In my experience the UX supporting architecture can span all the layers and if it is not implemented correctly you will have a maintenance and re-use nightmare brewing.
 
With the way that OutSystems empowers the citizen developer and requires the UX designer to become more involved in development, I feel that it would be very beneficial to create a dedicated space to meet and discuss the pretty side of application delivery on OS.
 
Thanks
Ouen
Thanks Ruben, any news on whether the recording would be good enough to be posted? Thanks!


Rúben Gonçalves wrote:
Hi Elize,

We'll record the session, if the quality of the recording is good, then we''l update this thread and add the link to the recording.

Cheers,
RG
 
 
Yes, does anyone know when this will be available?  I missed it as well.
We didn't miss it, it was really interesting, but too quick to follow it completely during the session.

Please put the recording up, hopefully soon.

Chris.
Hey guys,

nice topic! Any news on the recording being posted here?

Thanks.
It's up! Scroll down to "Previous webinars" and it's first on the list at the moment.

Chris.

http://www.outsystems.com/forums/discussion/17800/outsystems-training-webinars-whats-coming-up-and-previous-webinars/
Solution
Hi there,

Sorry for the late reply!
Joana has already posted the link, but I've edited the first post to have the links for the recording and the slides:
  • Recording: https://www.youtube.com/watch?v=JQrtRkquKOI
  • Slides: http://www.slideshare.net/DanielReis64/outsystem-webinar-building-a-live-style-guide

Cheers,
RG
Solution
Great work, Ruben!

How did you go about merging patterns_silkui.css and patterns_lisbon.css?

Pedro
Hi Pedro,

Not sure if I understand your question.
If you merge those two files, you'll the loose the capacity to update Silk UI app.

Let me know if this answers to your question.

Cheers,
RG
Rúben Gonçalves wrote:
Hi Pedro,

Not sure if I understand your question.
If you merge those two files, you'll the loose the capacity to update Silk UI app.

Let me know if this answers to your question.

Cheers,
RG
 In the video, you pasted CSS in the ACME_Theme that resulted in merging Patterns_SilkUI and Patterns_Lisbon. I wanted to know if you merged the two by hand or if you used an application.

Pedro 
 
Hi Pedro, The merging was made by hand, because the 2 css have different type of rules (one for patterns and special classes, and the other one for structure), they complement each other. So the merging should be straight forward. I hope that helps. Regards Daniel