New theme mockups

Flow
1

Hi everyone!

I’ve been asked to create two new themes for Vaadin to be released the same time with the Vaadin add-on Directory (due end of March).

I started to mockup the first one, and though I’d ask you for feedback. All comments from the general direction to specific component styles are welcome. Now is the time to voice all wishes you’ve had for a theme.

The first mockup shows most of the basic components within a fictitious application layout. It has some additional styles as well, such as the “header” layout, with a label, menubar, breadcrumbs and a logout button.

(sorry that the attachment is so large, just download it to view it full size)
11188.png

2

Wow, looks really nice! Great work!

Only place for improvement suggestions I can come up in this mockup is the breadcrumbs in the header. I think the items aren’t clearly enough separated and the breadcrumbs look like just a line of text.

  • Teemu
3

Looks nice. What theme are you going for your… err, theme. I mean, are you going for some specific style such as “light”, “futuristic” etc? Personally, I’d like to see a dark theme that is designed to be dark from the beginning. Sure, there is a dark version available of reindeer, but it it is still a bit lacking (eg the tabsheet as seen on http://demo.vaadin.com/ReindeerTheme)

4

That’s true, there are many components in Reindeer without a black style. But I think I will fix that by making a new addon-theme for Reindeer in the Directory, that will extend the set of black style components. Would that suffice, or would you wish for another darker theme?

5

I’d be happy if I just had one to start with, doesn’t matter if it’s a complement to reindeer or a new one. The problem is that there currently isn’t really any dark theme available that can be used for any component.

6

Thanks, will work on the breadcrumbs (just quickly tossed that line of text together).

7

One minor concern, not only with this theme:

There is no visual indication of how far down the tab sheet extends - what is inside tabs and what is not. In many applications, it would be nice to be able to see the extent of the tab sheet, even if this need is often the result of otherwise bad UI design.

Maybe two different styles for the tab sheet would be in order - one as shown in the mock-up (as the default) and another which adds some kind of border/background/other indication of the extent.

8

Ok, now I’m just throwing ideas here, but probably a windows-like theme could be popular. Especially for those who say “RIA is just too different from desktop applications, would our users know how to use it?”. Maybe a windows-like theme could make that barrier a bit lower.

9

Great point, it’s actually very hard to distinguish it from this mockup, didn’t even think about it myself. But as you said, two or more styles for tabsheet are likely needed.

10

Very nice one, love the tabsheets especially !

11


Requesting more feedback from you regarding themes


What are the things you would’ve needed to use but weren’t available in a theme, and you didn’t have the resources/knowhow to implement yourself?

I mean situations like “I need to have a toolbar here, but adding basic buttons in a row just looks unfinished and lame” or “I need a panel with an iTunes-like menu here, but the default panel is too plain and how should the menu look like?”.

Please share, any input will help me decide what kind of styles are most commonly needed. Currently I guess most of the styles in Reindeer aren’t even used that much, first because they are quite well hidden and undocumented, and secondly because they haven’t got enough real use cases.


Do you need more panels, more buttons, more tables, more textfields?
 What situations were they used in, what problem were you solving with the style?

And the styles don’t have to restrict only to one component, they can be “composite” styles, like the “blue” and “black” layout styles in Reindeer, that modify the contained child component styles as well. E.g. if we had a “toolbar” style for a HorizontalLayout, it could style all buttons inside the layout in some way, and possibly add a “selected” style for the buttons as well, making one button look pressed down. Just thinking out loud, and I encourage you to do so too.

One more question.
What kind of theme would you be most comfortable using
: a theme that’s designed to accommodate the whole browser window, from edge to edge, not showing any real background of the window, just the components’ background would be showing (be it a split panel or a tab sheet etc. that occupies the whole window), or do you like to design applications in a more “web” style, having margins around different sections of the app, giving it more white-space to breathe?

If I look at the first mockup in this thread, I’d say that it resembles a hybrid between these two styles, allowing you to compose either style view. But if I think of the Runo theme, it resembles more of the “web” style, with large headings and white-space in some parts of the components. The Reindeer theme is also a bit of hybrid, but leans more towards the “fill the entire window” style. Do you agree?


Thanks in advance for all answers!

12

I think, “either” mode is more frequent in use, at least for my usecases - some apps we build like a web page, but we do have there plain html surrounding from the donor web page or design and separate Vaadin controls inside. And some times we do build pure desktop-like apps.

In the theme, I think, developer may need more extra substyles for the components, such as more Label styles to cover big, regular and fancy small and micro text strings (like h1,h2.h3.h4,.mini,micro etc) and the same for the buttons, e.g. to have pre-build styles for regular, toolbar, mini/micro etc buttons. The same for other basic components - this will decrease the requirement to tweak theme here and there during a webapp development, thus speeding up the development process as well.

So, in common, there would be great to have more style variations for most controls, to cover from big to micro/fancy widget use-cases.

13

The screenshot looks good. I am not sure if I like the particular colors, but one can “easily” tune them later by extending the theme.

Couple of ideas for new themes:



“simple and functional”

A theme that would try to looks like a web “1.0”. The components should look simple and instead of “rich”, they should look “functional” and “light”. Maybe something that Google uses in Google Apps and Google Code.

This could be fairly thin layer on top of base theme.

The theme should avoid most (if not all) images and CSS should be fairly sparse, readable and thus easy to extend. Base color should be easily changeable and panel styles modifiable.



“professional black”

Just look at Apple Aperture.

Theme should use black background, have professional feeling. More like a pro recording studio than tuned up toyota. Fonts and spacing should be small and allow putting a lot of widgets on the screen and let the application to reserve as much as possible for the content area.

14

Hmmmmm… all good ideas so far, but I think we’re missing one cricical point. I have had this wish for a very long time to have a theme that would sort of speak out about the importance of the application, you know, because most Vaadin applications are business critical applications that are used all the time. Why not something with e.g. ‘red’ in it, you know in the same way that a firetruck is all red because you’re supposed to see it when it arrives. Or, I know, why not go completely crazy and make it ALL red, just red all over - go crazy and let yourself go think of the firetruck you always wanted to drive as a kid! :wink:

15

How about a plain stylesheet. Is it possible to get a totally blank theme which would be nice for someone making their totally own theme. By blank I don’t mean that nothing shows, but just that all colors are gone. All paddings and margins are zero. Components and features should be visible though, so that people can easily implement new visuals and immediately see what’s happening. The most common browserspecific pitfalls related to theming Vaadin could and should be commented/aided somehow, so that these are avoidable with ease. Wouldn’t it be great if this theme would be accompanied with an application where all components are included on one view so that the theme visuals could be viewed quickly? Just throwing ideas, have no need of this myself, but this could be nice if going for something totally different than any of the preset themes.

16

Wouldn’t that be our current
base theme
?

17

Haven’t Jouni suffered enough from the FireDept Theme 0.1.1 already? Besides - if we push the issue, we might end up with FireDept Theme 0.2 or even 1.0… :-)

(sorry folks, this is an inside joke about a theme in still unpublished Vaadin Directory… You’ll see it in 6 weeks or so).

18

It looks very clean.
What I’m missing from Vaadin themes is something out of the box that looks more desktop-like - something along the lines of OS X (like SproutCore out of the box) and Aperture.

It’s all about making UI’s look good - and having a really nice base layout that we know is appealing to many - will just enhance Vaadin’s success :slight_smile:

/Jeppe

19

Wow, that was fast work! That’s exactly what I meant :grin:

20

I’ll try to process most ideas in one post, bare with me…

Agreed, I’ll see how much time I have. I’ve already had plans to add more such styles to Reindeer (such as big textfields and buttons).

Would it make more sense to try and create more styles to Reindeer instead of creating a totally new look with multiple styles?

That’s a good idea, shouldn’t even take that much time to implement when no images are involved. A simple theme which would be easily modified to fit in different color schemes is always needed when fitting an application inside a predefined look.

You’re referring to the black views of Aperture, not the overall look’n’feel, that’s mainly gray, right?

If that’s the case, what’s missing from or what is preventing the Reindeer black styles from fulfilling this need? Too little gloss, maybe? :slight_smile: In my opinion (it’s a biased opinion, sure, since I’m the designer) it’s at least a solid foundation to build upon to match such needs for a black theme. I’m not very enthusiastic about creating another black style from scratch, but I’m more than willing to make Reindeer’s black style the “black-theme-to-rule-theme-all”. Just give me the time :wink:

So I’m asking again: what are the actual components (don’t clinch too much on the looks, think of functionality) that are missing from the themes in general. And if words fail you, just attach screenshots of actual application views that you wish you could build using Vaadin.

Again my own biased opinion, but I think Reindeer is quite desktop-like, and allows you to build very desktop-looking apps (if you just use the provided styles in good fashion). Can you give some good examples where Sproutcore’s Ace theme beats the cr*p out of Reindeer? I do genuinely want to know, since we’re competing with them at least on some level. Comparisons to Apple’s desktop software is a bit unfair IMO, but I’m man enough to take the punches from that side too :slight_smile:

What do you mean with “a really nice base layout”? A prebuilt application template where you could just plug in your own logic and views? Could you clarify, since tackling this sort of request only with a theme sounds impossible?