Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

New theme mockups

Jouni Koivuviita
1 decade ago Jan 27, 2010 8:11am

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)

Teemu Pöntelin
1 decade ago Jan 27, 2010 8:31am
Kim Leppänen
1 decade ago Jan 27, 2010 8:38am
Jouni Koivuviita
1 decade ago Jan 27, 2010 8:43am
Kim Leppänen
1 decade ago Jan 27, 2010 8:45am
Jouni Koivuviita
1 decade ago Jan 27, 2010 8:46am
Henri Sara
1 decade ago Jan 27, 2010 8:49am
Kim Leppänen
1 decade ago Jan 27, 2010 8:49am
Jouni Koivuviita
1 decade ago Jan 27, 2010 9:18am
Dmitri Livotov
1 decade ago Jan 27, 2010 12:06pm
Jouni Koivuviita
1 decade ago Feb 09, 2010 10:21am
Dmitri Livotov
1 decade ago Feb 09, 2010 10:54am
Joonas Lehtinen
1 decade ago Feb 09, 2010 2:56pm

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.

Fredrik Rönnlund
1 decade ago Feb 09, 2010 5:20pm
Jonas Granvik
1 decade ago Feb 10, 2010 6:43am
Joonas Lehtinen
1 decade ago Feb 10, 2010 6:48am
Joonas Lehtinen
1 decade ago Feb 10, 2010 7:32am
Jeppe Cramon
1 decade ago Feb 10, 2010 7:45am
Jonas Granvik
1 decade ago Feb 10, 2010 8:12am
Jouni Koivuviita
1 decade ago Feb 10, 2010 11:03am
Jouni Koivuviita
1 decade ago Feb 12, 2010 2:09pm

Joonas Lehtinen: 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.

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

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.

Last updated on Feb, 18th 2010
Kim Leppänen
1 decade ago Feb 12, 2010 2:13pm
Joonas Lehtinen
1 decade ago Feb 12, 2010 8:07pm
Jouni Koivuviita
1 decade ago Feb 14, 2010 5:02pm
Dmitri Livotov
1 decade ago Feb 15, 2010 9:15am
Dmitri Livotov
1 decade ago Feb 15, 2010 9:17am
Jouni Koivuviita
1 decade ago Feb 18, 2010 3:08pm
Joonas Lehtinen
1 decade ago Feb 18, 2010 4:33pm
Joonas Lehtinen
1 decade ago Feb 18, 2010 4:36pm
Joonas Lehtinen
1 decade ago Feb 19, 2010 5:01pm
Jouni Koivuviita
1 decade ago Feb 19, 2010 7:03pm
Christopher Brind
1 decade ago May 16, 2010 8:16pm
Jouni Koivuviita
1 decade ago May 16, 2010 8:29pm
zoe petar
4 years ago Dec 13, 2017 6:13pm