Ready, Set… Go!

Ready


Soms kan het goed zijn om even stil te staan voordat je accelereert. Zo ook deze blog, tijdens het schrijven werd ik stil gezet nadat de OutSystems Experts een nieuw component publiceerde. Je vindt deze in de Forge; de Automated Web Theme Customizer. Voor wie de Forge niet kent; de OutSystems app store voor al je kick-ass componenten, connectoren, IoT’s etc.

 

Om nog even stil te staan bij de reden waarom ik blog. Ik werd destijds geprikkeld in mijn creativiteit om voor Inforza en over OutSystems te schrijven en te illustreren. Zo is de 1e blog Taking The Next Step ontstaan.


Set


Voor iemand die ook graag creatief bezig is, is het essentieel om eerst een goed fundament (theme) neer te leggen in de vorm van een style guide. Daarin leg je vast hoe je typography, kleurstellingen, structuren en patterns zijn vormgegeven. Voor sommige kan dit proces als stilstand worden ervaren, maar het draagt bij aan consistentie (UX best-practise). Het is het corporate geheugen in de look & feel van je applicaties, maak daar gebruik van voordat ieder voor zich iets bedenkt…

 

Als het gaat om je Style Guide, kon je voorheen binnen Silk UI je web applicatie previewen. Je bepaalde de kleurstellingen (bijv. op basis van je logo), maar de downside was dat je nog steeds eigen CSS classes moest schrijven/aanpassen voor de patterns die je naar eigen hand wilde zetten. Gelukkig is daar de Style Editor bijgekomen, zie mijn vorige blog Low Code CSS. Maar dat moet sneller en slimmer kunnen...


Go


Oké, genoeg stil gestaan, tijd om je theming process (style guide) te accelereren met de Automated Web Theme Customizer. Start met je reeds bestaande theme als JSON manifest, of gewoon van scratch.

 

Volg de volgende 4 eenvoudige stappen.

 

Where to go? Dublin, Lissabon, Liverpool of ergens anders? Op basis van je keuze worden je menu, content, footer etc. gepositioneerd. Voor degene die regelmatig met deze themes werkt, dan weet je vast welke stad waarbij hoort ;-)

 

 

Next up; Alle generieke properties van lay-out (menu, content, title etc) tot en met base colors, typografie etc. alles is aanpasbaar. Tevreden over het raamwerk, dan wacht de volgende stap.

 

 

Let’s check the patterns. Alle aspecten daarin loop je door, van useful classes (welke kleur rood bedoel je als je er naar deze als text-color of background gebruikt), tot system styles. En dus ook de UI Content, Control, Data en Navigation. Vind je bijvoorbeeld de kleur van het Section Expandable Titel en icon niet mooi, no worries. Alles is aan te passen, so feel free. Het prettige bij dit component is dat het ook direct een aantal best-practices toepast zoals agnostic patterns ("Carousel" ipv "Homepage Carousel").

 

 

Save en go! Congrats, je hebt zojuist in een fractie van de tijd een prachtige theme & style guide gebouwd. Champagne & high 5’s. That’s how it’s done ;-) Copy-Paste naar je Theme in Service Studio. Of exporteer je hem als JSON manifest. Veel succes & plezier in het gebruik ervan!

 

Ik ben erg benieuwd of dit component je helpt in de acceleratie, of wellicht heb je nog nooit een style-guide gemaakt. Wat het ook is, met OutSystems sta je in ieder geval niet stil om te bouwen aan je awesome apps gebaseerd op een solide Style Guide :-)

 

 

 

 

Je kunt deze blog hier downloaden

Please reload

Recente Posts
Please reload

Bedrijf

Sectoren

Diensten

Producten

Meer

Volg ons

  • Wix Facebook page
  • Twitter Classic
  • LinkedIn Social Icon
Inforza Projecten BV
Kelvinring 44
2952 BG Alblasserdam
t: 078-6933302

Thema's