PDA

View Full Version : Make me flat -- color theming for Windows 8 style UI



barrymavin
2013-06-14, 21:48
Flat UIs are all the rage at the moment so I thought you may be interested in a few useful links that will help you skin your Lianja Apps to have a "Flat" look and feel.

The following link provides a good set of colors for skinning Apps with a Windows 8 UI theme.
http://www.creepyed.com/2012/09/windows-8-colors-hex-code/

You can use these colors to skin the Lianja App Center tiles and your Apps if you want a flat Windows 8 look and feel for them.

Here is another link which provides many free Windows 8 style flat icons.
http://icons8.com/download-huge-windows8-set/

One of the nice things about Lianja is almost everything in an App is skin-able using CSS. Its a good idea after you have built the UI to go back through it and apply CSS and "think" about how it will look on touchscreen devices. Desktop-style Apps with small icons will be problematic for use on a tablet especially for users with big fingers. If you build your Apps using standard sections and gadgets the UI will automatically adjust itself to the device resolution so the way you lay out the App and how you navigate between the various pages and/or sections is important to consider at the start of development. Using inline delegates for navigation wherever possible is recommended. This is the whole concept of NoCode development in Lianja.

There is a lot of talk on the internet about "responsive-UI" design and it's important to understand that the Lianja Desktop, Web and Mobile client all automatically handle laying out of the UI elements in an App as the device (window on the desktop) is resized or switched between portrait and landscape (device orientation on tablets and phones). You don't have to do any special coding to get this functionality as it is all built-in.

The core methodology that Lianja encourages is that you build Apps out of Pages and Pages out of sections and Gadgets and this is of paramount importance so that the Lianja client can layout the UI depending upon the client device.

vchigne
2013-06-15, 00:52
Well, you have all the work done for Metro style skins, just have to include support in lianja for bootmetro:
http://aozora.github.io/bootmetro/
Now, to create and manage Metro icons you can use this excelent free tool:
http://www.syncfusion.com/downloads/metrostudio

Regards