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.
Very nice one, love the tabsheets especially !
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!
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.
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.
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! 
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.
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).
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 
/Jeppe
Wow, that was fast work! That’s exactly what I meant 
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? 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
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
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?
[size=5]
After three days of work, I’ll post you a preview of the result of this kind of “simple-yet-functional” theme, that you can customize yourself.
The theme isn’t nearly finished, but I thought I’d ask for feedback at an early point, so I won’t end up doing work that pleases nobody.
So, I built a little theme editor on top of the flexible theme (currently called “Paint” theme), go ahead and try it out:
Paint Theme Tester
[/size]
Note: try with either Safari or Chrome, Firefox has some issues updating the color changes instantly. Internet Explorer does work too, but the ColorPicker component is a bit unusable there.
As you can see, I started by making quite a few different button styles that can be combined together freely. TextFields were next, then a couple of Panels (the default Panel style being totally transparent), finally starting some DateField styles. So loads of components still unstyled, but I hope you can get the feeling of the theme from this small subset.
So what I need to hear, is that this theme is something you guys would want to use in some future applications, or at least would want to base your own theme on (the CSS of this theme is not nearly as complex as Reindeer’s, since there are almost no images involved).
Below is a screenshot of it, using Safari.
This is really cool. Definitely something I could consider using!
Nice set of buttons and well balanced beginnings of a theme, but not exactly what I was looking for as “simple and functional” theme. On the other hand - this could be the beginnings of a great “simple and functional” theme.
IMO “simple and functional” theme should strive to be (look) as functional and simple as possible. This means no gradients. Use images only where absolutely necessary. Round corners should be used with care (to maintain fair consistency over browsers). While functionality is the essence, some (minimalistic) character could be added, but then it is there only to make the user to feel that the application is even more efficient and easy to use.
One of the important things is that the “simple and functional” should be a complete theme. Even when the styling is minimalistic, all widgets should be styled (somehow) and many of them (windows, panels, tabsheets, buttons, …) should probably provide difference variety of styles to choose from.
I think that Google really shines on this kind of styling. While some people think that Google “looks” is just bare-bones and a bit clumsy - many users just appreciate how the style excels in being “out of their way” and gives room for the content and functionality.
Thanks for the critique, duly noted. Critique is almost always more constructive than praises
But I’ll have to correct/tackle some issues you raised…
It’s exactly that, a beginning. Most of the time went to building the editor, not the actual styles. And…
That’s exactly my goal: a complete theme, with multiple different styles for some of the components (not all, for starters at least). Try not to judge the completeness just yet
This is where I disagree completely. As I see it, the “simple” part refers mostly to the actual implementation: the CSS. The “functional” part then refers to the actual look and feel of the theme.
Functional does not mean it has to be ugly (but neither does “imageless” and “gradientless”, I’ll give you that), quite the opposite. With functional, I strive mostly for “usable”, but that’s a though goal to tackle with a simple theme alone, so my weapons are quite limited. Hence, using a few well selected gradients will hugely benefit the overall usability and affordance of the theme. With the words of Stephen P. Anderson:
I encourage you to read his article,
In Defence Of Eye Candy
, and look at the slides
on his website
. There’s even scientific evidence to justify the use of gradients
And aren’t you indirectly saying OS X’s theme isn’t functional? I hope that’s not what you mean to say.
Again, I disagree.
Do websites need to look exactly the same in every browser?
No. Small differences will do no harm, and lowering the bar because of lesser browser makes no sense to me. And to quote another well respected web professional:
Only web desingners and developers look at websites/webapps with two different browsers to see if they differ. We musn’t promise end users pixel perfect results across all browsers, which is impossible for many reasons. And that’s why
we should stop showing static visuals to clients
(I’m still guilty of this, but slowly working towards a different working process). So why lower the visual/usability bar on all browsers just because few of them fail to render one aspect of the design that will not ruin the overall experience (because they’re not knowing something’s missing)?
See for yourself, Google uses gradients and rounded corners, I dare you
Now, I think my theme tester might be a bit misleading in it’s presentations currently, when the “alternate” color is used so prominently. But the idea of course with the “default” buttons is that you use them sparingly, i.e. only one such button per screen. Same goes for all the more prominent styles in the theme. But I’ll be tweaking the colors, borders, spacings etc. next week.
Now things start to fall more into the personal tastes category, but I’ll bite it: I think Google Maps looks really good, largely due to the good looking maps themselves, but in general the controls are polished. Still, I’ll take a dozen
github’s
before
googlecode’s
, but I’m sure it’s just a personal preference not applicaple to everyone
As for me (if talk about preferences I like both minimalistic Google apps UI and as well as current mockup. To my mind, minimalistic theme should not be heaavy-css-ed like reindeer, in order to simplify Vaadin user life when adjusting styles. However, this does not mean it should not use round corners, images, etc at all.
I think, that main purpose of the minilaistic theme is to provide lighweight but nice and professional looking style and have as much substyle variations for every widget as possible - this will allow Vaadin users to just use that theme for daily apps, reducing css adjustments to a minimum. That would be great.
Regarding the Google, I think, this could be a great idea to create a separate theme, which will mimic the google apps look and feel
P.S. Jouni, I was too busy past week, so did not clean up and commit my vaadin theme editor app, but will do this week, so we can continue with it.
After discussing with Julia and thinking on features again on a weekend, I suppose this would be a really interesting app for theme designers
Updated the editor preview:
Paint Theme Tester
.
Refined lots of details. Now includes more widgets, plus a couple of presets for you to switch back and forth to get a feeling how different color schemes might look like.
Maybe I should have selected a better wording for “functional”. What I meant was that many people associate no frills simplicity with functional focus. I think that this is what Google have tried to achieve and succeeded. It doesn’t mean that everyone should agree - I for one prefer sophistication of GitHub over Google Code, but still Google Code somehow
feels
more lightweight (I have no idea which theme actually
is
more lightweight.
You are right (and I wrong) about round corners and gradients. As long as they are technically lightweight, the only question is how subtle they are and how that affects the
perception
of functionality, simplicity and effectiveness.
And to be clear - I like your theme and newer intended to criticize it. My purpose has been to describe an idea for a theme what I call “simple and functional”. You are free to disagree with the usefulness of the idea :)