New modern default skin

[nwilton]

Hi there,

There has been a big shift in UI design in recent years. It would be nice to see SmartClient/SmartGWT introduce a new cleaner modern theme:

* Flat look. No drop shadows, gradients, or anything like that.
* Squared corners.
* Thick borders, title bars, etc.
* Cleaner, easy to read fonts - e.g. helvetica.
* More generous padding & margins.
* Brighter (more configurable) colors.

Hopefully this can be an inclusion for SmartGWT 5.0.

-Nick

[sondresb]

Hi,

Did you get any feedback outside this thread to this?

Are any official theme resembling some of these comments live? Has anyone else experimented creating such a theme?

Thanks,

-S-

[jaredm]

We've created a theme like this and it took 2 weeks of solid development. We had a very competent designer and a very determined coder - it is far from a small undertaking but very possible.

[sondresb]

Jaredm, could you contact me at sondre at innovationconsulting.no?

If your skin is configurable it might be time to recover some of the investment!:)

[escrea]

New modern skin

Thank you for bringing this up!
In our opinion a new design is overdue - especially since modern design is a requirement in almost every project.

@ Jaredm: we would be happy to help you with that recovery as well. You'll be able to contact us at info at escrea.de

[jaredm]

The problem is creating a generic skin that works across all browsers and applications is extremely difficult. In this regard, Isomorphic should be highly respected in their achievement of making so many skins available that look decent enough for a developer to be able to drop and use anywhere.

In our experience so far, the best approach has been to design an application and then create a skin to make that application look and feel good.

The skin we've created looks great in our app - and we have different styling for different uses of the same component (e.g. we have 2 different TabSet styles that look drastically different). There's a huge number of Isomorphic components that we've not even used in our app and chances are if we used those components we would need to spend time crafting their look and feel to be right.

[sondresb]

Any comments from Isomorphic on this one? Something for 6.0?

[SimonF]

Hi there,
Isomorphic Is there anything new planned for a new default flat skin? By now various sites and also operation systems like Windows, Apple, iOs and Android have switched to flat-style.
I think It would be a good addition to the existing skins which might look a little bit oldfashioned over the past years.

Best regards

[Isomorphic]

Check your inbox for the newsletter that went out today, or look at the blog.

[SimonF]

Thanks for the reference to the mail or blog.

Nonetheless neither in the mailing nor in the blog-post a new skin is mentioned.
There is a mention of new input controls, but does this also correlate with a new default flat skin you may be shipping?

Regards

[Isomorphic]

The changes to input controls, which along with other subtle changes are being applied to *existing* skins, align us with current design trends. We are internally debating a few more changes like a flatter scrollbar.

Outside of that, we do not currently plan, as a default offering, a completely flat skin that has, for example, no gradient background for buttons and other basic controls. We feel that for web applications, this is a major backward step in basic HCI because it creates a lot of ambiguity between interactive and non-interactive parts of the UI. We think this is an example of taking a trend too far, and that the mainstream will ultimately abandon this look.

That said, in the coming releases we are planning to make skins configurable in a variety of ways, and at some point there will be the option to completely flatten gradients for those that want it.

[SimonF]

Thanks for the fast response.

We confirm that with a flatter look, the difference between interactive and non-interactive parts of the UI are shrinking. Despite this fact our software is named old fashioned with increasing frequency from our customers because of the 3d-look. At this point I don't think we are the only ones, that are using smartclient with normal end-users. So this does not only affects us with our users, but most of the smartclient-users.

So we will be looking forward to the coming release(s) do see more configurable skins, where we might be able to flat out some main-parts of the gui.
Thanks

[claudiobosticco]

Despite this fact our software is named old fashioned with increasing frequency from our customers because of the 3d-look. At this point I don't think we are the only ones, that are using smartclient with normal end-users. So this does not only affects us with our users, but most of the smartclient-users.

same here :confused:
But actually I agree on every point from Isomorphic.
Nevertheless a configurable skin would be a great tool in the hands of developers.

[Isomorphic]

There continue to be "3D" effects absolutely everywhere in UI, from Bootstrap's drop shadow effects to convey depth for input fields, to Google's "Material Design" having specific rules about shadowing and cues as to levels of depth, to the tabs on the browsers you both are using.

What has happened is that:

1. the look of the standard browser/OS dropdown lists has become just a minimal downarrow instead of the traditional raised button - we've matched this trend in 6.0

2. certain recurring types of controls like navigation bars on mobile, which are omnipresent and very familiar to users as interactive elements, have dropped the 3d look for their buttons to reduce visual clutter. We had already adopted this look in 5.0 for our NavigationBar.

These are sensible changes that improve HCI. Flattening scrollbars is a similarly sensible step, since end users already recognize those as interactive controls, and there may be a very, very minor to making these less prominent, in terms of reducing visual clutter to allow users to focus on data and content.

Beyond this, there is the very recent trend of completely dropping gradients for standalone buttons and other controls that are not part of a toolbar or part of some other obviously interactive area. We think this is bad HCI and don't plan to offer this by default. We'd be quite stunned to find end users actually asking for this.

Once you've tried out the new release on end users, we'd be very interested in any feedback on *specific screen elements* that are still not to your end user's liking or which users described as "old fashioned" or similar.

[woodfox]

Actually we have the same requirement here. for now, we are using SmartGwt 4.X with a customized theme modified from Simplicity. But the modified skin is far from the our expectation and the adjustment work of upgrade is a bothered thing anyway, that's why we still using 4.X instead of smartgwt 6.

Our customers hope some kind of theme looks like these :


http://gwtmaterialdesign.github.io/g...gettingstarted
https://vaadin.com/gwt
http://examples.sencha.com/gxt/4.0.1...Place:cellgrid with Triton theme


However, the smartgwt is more fit to be used in business application than these libs, and it's a powerful framework for business application development. so we expect some kind of official MD theme is coming with the new release.

thanks.