Best way to deal with graphic designers

As a lot of projects/clients like to have their own look-and-feel ...
How do you deal with an external graphic designer ?
Do you tell them how outsystems generates the code (ListRecords/TableRecords with spans. Menu's, DIV's, ThemeGrid etc) and they have to stick with that structure ?
Or do they get all freedom in designing the UI ?
You need a developer that knows how to bind html / css to outsystems widgets. 
Hi, Joop.

You're right. A custom web design can bring that extra edge to your application, but it usually comes with a cost, which varies based on the developer's CSS proficiency. If possible, use the London customizer for a bit of the best of both worlds.

You can achieve any web design with OutSystems, you just need to bear in mind some of the specifics - check these guildelines:
It contains the most important rules to pass on to whomever is creating the CSS. One of the most important ones is that no ID selectors can be used (as you know, element ids are generated).

Some of the CSS classes generated by the platform can be configured (ex. TableRecord_...), however others are platform-specific, like the ones for the grid. One can easily introspect the classes from outsystems pages.
Take into account that some extra spans are generated for web blocks and in other circunstances, so if you rely on descendent selectors, these might interfere.

Hi Joop,

Adding to the wise advice from Robert and Gonçalo, let me just add that if you can to get designers that are proeficient in CSS, a great way to work would be to ask them to try to use CSS to customize the patterns in here:
and here

These way you could have a theme that could be used in several scenarios. 

Tiago Simões

Our designer has no experience in OutSystems, he provides the design and we implement it. Sometimes, we need to work with him to modify the design to fit technical limitations, but what I have found is that most of the time, I will think "I can't make this work" but with a little bit of thinking and creativity, it *can* work. In fact, most of the time, doing it the hard way actually provides a BETTER experience for our users. We used to have a lot of ListRecords or TableRecords with Web Blocks with save happening OnNotify and then doing NotifyWidget to refresh the outer list... the users *hated* it (especially on mobile devices) because it was slow and they would always see "Loading" or a "spinner" or whatever. Our graphic designer made us improve the way we do things. The code is not nearly as clean or as easy to follow as it used to be, but customers don't pay us for good looking code, they pay us for a great user experience.

Hi Justin,

What was the alternative that your graphic designer provided?. We have a project at the moment where the On Notify/NotifyWidget process is not providing a very quick and fluid experience. Sames goes for pop-up screens, with their excessive preparations and OnNotify communication. Like you said, the easiest way to develop something isn't always the best in terms of end-user experience.


Robbie -

He didn't tell us how to make it work, he has never used OutSystems. We just knew we had to make it work.

For the most part, these screens now work directly with the lists in the TableRecord or ListRecord, and the ListRecord will have Widgets bound to the List for input (even though it is NOT in an EditRecord). There will be an EditRecord as well for validation, but it will be somewhere else on the screen with nothing directly in it (again, used ONLY as a system to provide validation). Then the "Save" Action assigned to the Save button will go through all of the ListRecord and TableRecord items, look at the data in them, and save things. Often, they will have a few nested loops, and need to save things in a particular order. We also do external validation there.

Put simply... the result is UGLY on the Action itself. But the user experience? Our users have been telling us that they love how much faster the screens are, how they do not have all of the waiting/loading when they do things, etc. So we do what we need to do to make it work.