Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Anyone with a bit of web-design experience?

367 views
Skip to first unread message

Tim Fox

unread,
Mar 23, 2015, 1:50:29 PM3/23/15
to ve...@googlegroups.com, vert...@googlegroups.com
Hello folks,

The current Vert.x 3 web-site contains pretty much all the information,
is a single page, and is functional:

http://vert-x3.github.io/

It's very simple and written using Twitter Bootstrap. Although it does
the job, it looks.... well, how do I put it? A bit boring and a bit
amateurish?

I was wondering if there was anyone with a bit of web-design experience,
nothing fancy required, who would like to take a stab at putting a bit
of lipstick on it?

Just thinking along the lines of, maybe a bit more colour, fonts,
alignments etc, not thinking of any grand redesign.

Anyone interested?

Michel Krämer

unread,
Mar 26, 2015, 2:16:45 AM3/26/15
to ve...@googlegroups.com, vert...@googlegroups.com
Dear Tim,

I have some experience. I'm not a pro, but I think I should be able to do the job. You can have a look at my latest work (my personal website) for a reference:
http://www.michel-kraemer.com/

What do you think? Shall I try my luck?

I suppose https://github.com/vert-x3/vert-x3.github.io is the right repo?

Any preferences? Colors that should be included (like the purple color in the logo)? Dark theme (like the old site) or light theme?

Cheers,
Michel 

Michel Krämer

unread,
Mar 26, 2015, 2:29:14 AM3/26/15
to ve...@googlegroups.com, vert...@googlegroups.com
Now here's a *very very rough* sketch of what the website could look like. I made it in Inkscape in a couple of minutes so don't take it too serious. Just wanted to give a quick impression.

Cheers,
Michel 
sketch.png

Julien Viet

unread,
Mar 26, 2015, 3:15:40 AM3/26/15
to ve...@googlegroups.com, Michel Krämer, vert...@googlegroups.com
looks way better than our previous attempts, I like it.

-- 
Julien Viet
www.julienviet.com
--
You received this message because you are subscribed to the Google Groups "vert.x" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vertx+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Tim Fox

unread,
Mar 26, 2015, 3:29:20 AM3/26/15
to ve...@googlegroups.com
HI Michel,


On 26/03/15 06:16, Michel Krämer wrote:
Dear Tim,

I have some experience. I'm not a pro, but I think I should be able to do the job. You can have a look at my latest work (my personal website) for a reference:
http://www.michel-kraemer.com/

What do you think? Shall I try my luck?

Looks good :) Thanks for offering



I suppose https://github.com/vert-x3/vert-x3.github.io is the right repo?

https://github.com/vert-x3/vert-x3.github.io is where we push the website when its built, but it's actually created from this project:

https://github.com/vert-x3/web-site/tree/initial-work (initial-work branch)

You can build the site locally with: mvn site and then just open your browser to the files on disk, i.e. target/site/index.html

The actual content is in files like these:

https://github.com/vert-x3/web-site/blob/initial-work/src/site/resources/templates/page.ftl
https://github.com/vert-x3/web-site/blob/initial-work/src/site/resources/templates/index.html





Any preferences? Colors that should be included (like the purple color in the logo)? Dark theme (like the old site) or light theme?

Personally I would prefer a light theme, and I am not wedded to the purple. Maybe a light(ish) blue? Perhaps others have suggestions?


Cheers,
Michel 


Am Montag, 23. März 2015 18:50:29 UTC+1 schrieb Tim Fox:
Hello folks,

The current Vert.x 3 web-site contains pretty much all the information,
is a single page, and is functional:

http://vert-x3.github.io/

It's very simple and written using Twitter Bootstrap. Although it does
the job, it looks.... well, how do I put it? A bit boring and a bit
amateurish?

I was wondering if there was anyone with a bit of web-design experience,
nothing fancy required, who would like to take a stab at putting a bit
of lipstick on it?

Just thinking along the lines of, maybe a bit more colour, fonts,
alignments etc, not thinking of any grand redesign.

Anyone interested?
--

Tim Fox

unread,
Mar 26, 2015, 3:32:23 AM3/26/15
to ve...@googlegroups.com
+1.

Not sure we should have the 4 highlight points like we did in the old site or the code example though...

Michel Krämer

unread,
Mar 26, 2015, 4:16:00 AM3/26/15
to ve...@googlegroups.com
Thanks for pointing me to the right repo!


Not sure we should have the 4 highlight points like we did in the old site or the code example though...
I'm also not sure about the highlight points. In fact, your current draft contains a lot more points. I'll try to come up with an idea for that...

The purple color looks pretty nice IMHO. I was surprised myself how good it fits to the white background and the black font color. I think we should stick to it. Gives it some kind of a unique style.

Regarding the code example: personally, as a programmer I'm always really grateful for short examples on the front page. Either I'm new to the tool and I can immediately see that it's rather easy to use, or I want to create a new project and am looking for a short snippet to copy and paste.

How do we proceed? Should I send you pull requests or should I mirror the site somewhere so that you can preview my changes? Do I need to sign the Eclipse CLA?

Cheers,
Michel

Tim Fox

unread,
Mar 26, 2015, 4:22:12 AM3/26/15
to ve...@googlegroups.com
Hi Michel,


On 26/03/15 08:15, Michel Krämer wrote:
Thanks for pointing me to the right repo!

No problem :)



Not sure we should have the 4 highlight points like we did in the old site or the code example though...
I'm also not sure about the highlight points. In fact, your current draft contains a lot more points. I'll try to come up with an idea for that...

The purple color looks pretty nice IMHO. I was surprised myself how good it fits to the white background and the black font color. I think we should stick to it. Gives it some kind of a unique style.

Sounds good. We can always change it at a later date, if need be.



Regarding the code example: personally, as a programmer I'm always really grateful for short examples on the front page. Either I'm new to the tool and I can immediately see that it's rather easy to use, or I want to create a new project and am looking for a short snippet to copy and paste.

How do we proceed? Should I send you pull requests or should I mirror the site somewhere so that you can preview my changes?

I suggest forking the website repo, then you can edit the pom.xml https://github.com/vert-x3/web-site/blob/initial-work/pom.xml#L472 so that it pushes the web site to your own github pages so it can be previewed (you can run mvn site-deploy to push).

Then when it's ready to merge, you could send a PR.

Thanks again for offering to do this, it's much appreciated :)

Michel Krämer

unread,
Mar 26, 2015, 4:27:23 AM3/26/15
to ve...@googlegroups.com
OK great. Let's see what I can do. I'll get back to you when I have something to show...

Cheers,
Michel

Arnaud Estève

unread,
Mar 26, 2015, 5:37:57 AM3/26/15
to ve...@googlegroups.com
Regarding colors : when I tried my luck (only with the Chrome web inspector) the blue #243446 was fitting pretty nicely h1 headers and other "important" stuff.

To delimit box contents I used  #FAFAFA as background color and #F2F2F2 for borders. http://i.imgur.com/dzKgISm.png to see the colors in action. 

Hope this helps you in some way Michel. 

I read by curiosity a book about color schemes once, and from what I remember, blue and grey kinda mean "confidence, reliability, effectiveness" to the reader (that's why a lot of banks choose blue for their logo, they said in the book). 
Still not sure if this book was bullshit or not but that's what Vert.x inspires me : a well-tested framework I can trust, effective, powerful with no fancyness or bells&whistles. So if I had to choose I'd choose blue :) 

And if I think about the (web) frameworks I know, I can quicly associate them with a color in my mind : Rails is red, Spring, Grails, Django are green, node is black, Ratpack is purple, can't think about a blue one (maybe there is a reason why no one chose blue... :\ )

Your first draft looks pretty neat even though I'm not a big fan of purple (it looks abit like Ratpack). I love the code sample on top of the screen though ! And the whole layout too, good job :)

I'd put the list of supported languages more appealing too. That's the first thing people will look for I guess "Is my favorite language supported ?? Yes ! I can continue reading".

Thanks a lot Michel.

Michel Krämer

unread,
Mar 26, 2015, 12:14:46 PM3/26/15
to ve...@googlegroups.com
Thanks for the comments and the insights! I like your design as well.

Akka is blue by the way: http://akka.io/ I guess we really have to differentiate from this one?
Ratpack also uses purple, but in the logo it seems they use yellow. I don't know what their primary color is (if they have one even).

I don't have a strong preference for either color. Blue also has its advantages. I specifically like the idea that it means confidence. But if it means vertx is going to be confused with Akka then we should avoid it.

I think I will go for purple for the time being (just because it's in the Vert.x logo). We can easily replace colors later. What do you think? Any other opinions from the community?

Cheers,
Michel

Michel Krämer

unread,
Mar 28, 2015, 10:26:57 AM3/28/15
to ve...@googlegroups.com
Here you are. Let me know what you think.

http://michel-kraemer.github.io/web-site/

There's still some work to do. The website is not very responsive yet. The code examples are not up to date. And according to your TODO list I guess you want to add some users to the 'who is using vert.x' section too?

Cheers,
Michel

Julien Viet

unread,
Mar 28, 2015, 10:34:57 AM3/28/15
to ve...@googlegroups.com, Michel Krämer
wow! /impressed

-- 
Julien Viet
www.julienviet.com

Tim Fox

unread,
Mar 29, 2015, 5:50:13 AM3/29/15
to ve...@googlegroups.com
This is really good Michel, I'm super impressed :)

Will comment more tomorrow.

Tim Yates

unread,
Mar 29, 2015, 5:54:38 AM3/29/15
to ve...@googlegroups.com

Slight menu issues on android chrome, but I'm being overly picky of an excellent first draft 😉🙌

Michel Krämer

unread,
Mar 29, 2015, 8:38:16 AM3/29/15
to ve...@googlegroups.com
Thanks guys! I'm glad you like it.

@Tim Yates: as I said, there are still some glitches that I need to sort out. What menu issue are you talking about exactly? Can you make a screenshot?

Cheers,
Michel

Michel Krämer

unread,
Mar 29, 2015, 8:39:46 AM3/29/15
to ve...@googlegroups.com
@Tim Yates: Oh I see, you're talking about Android, so I guess you have a small screen. The website is not responsive yet, so the menu won't work on small screens yet. Of course, I can fix this.

Cheers,
Michel

Tim Yates

unread,
Mar 29, 2015, 8:46:24 AM3/29/15
to ve...@googlegroups.com

Sure, here's a screenshot of when the page first loads, followed by a small scroll down. The background of the menu disappears, but not the menu text, and maybe it should start hidden until I click the burger icon top right?

Screenshot_2015-03-29-13-44-27.png
Screenshot_2015-03-29-13-44-21.png

Michel Krämer

unread,
Mar 29, 2015, 9:42:55 AM3/29/15
to ve...@googlegroups.com
Dear Tim,

I have some experience. I'm not a pro, but I think I should be able to
do the job. You can have a look at my latest work (my personal website)
for a reference:
http://www.michel-kraemer.com/

What do you think? Shall I try my luck?

I suppose https://github.com/vert-x3/vert-x3.github.io is the right repo?

Any preferences? Colors that should be included (like the purple color
in the logo)? Dark theme (like the old site) or light theme?

Cheers,
Michel


Michel Krämer

unread,
Mar 29, 2015, 9:42:56 AM3/29/15
to ve...@googlegroups.com
Now here's a *very very rough* sketch of what the website could look
like. I made it in Inkscape in a couple of minutes so don't take it too
serious. Just wanted to give a quick impression.

Cheers,
Michel

Am 23.03.2015 um 18:50 schrieb Tim Fox:
sketch.png

Michel Krämer

unread,
Mar 29, 2015, 12:48:57 PM3/29/15
to ve...@googlegroups.com

Thanks. Should be fixed now.

Michel

Tim Yates

unread,
Mar 29, 2015, 12:52:51 PM3/29/15
to ve...@googlegroups.com

Cool! Works here! Good job 😁

Tim Fox

unread,
Mar 30, 2015, 4:12:07 AM3/30/15
to ve...@googlegroups.com
So.. the web-site looks really great.

It's just the kind of site (simple, clear, nice design) I have wanted for a long time, but I didn't have the skills to do it myself.

So thank you, I really wasn't expecting so much, so quickly :)

A couple of comments:

* Who's using - this is kind of tricky. Unlike Akka, and other projects which have a commercial offering, we don't offer commercial support for Vert.x (yet), so it's not so easy for us to see who is using us, i.e. we don't have a list of contracts we can just look at. However, I do know various companies and users we could ping.

* The actual manual pages linked from the documentation page, e.g. http://michel-kraemer.github.io/web-site/docs/vertx-core/java/index.html - it would be nice to get those using the same stylesheets as the main site so we could have a consistent look and feel throughout.

Stephane Bastian

unread,
Mar 30, 2015, 6:51:39 AM3/30/15
to ve...@googlegroups.com
Hey Michael,

The website looks great !.

Just one minor comment though. Some time ago I came accross the spec from google on their new material design. There is a section for colors:
http://www.google.fr/design/spec/style/color.html#color-color-palette

The purple we've got is nice but kind of darkish. Would you mind trying the purple from MD, it' s a much brighter purple #9C27B0 and sse if it looks better?

All the best,

Stephane

Michel Krämer

unread,
Mar 31, 2015, 1:31:07 AM3/31/15
to ve...@googlegroups.com
So.. the web-site looks really great.
It's just the kind of site (simple, clear, nice design) I have wanted for a long time, but I didn't have the skills to do it myself.
Thanks. You're very much welcome. It was the least I could do for such a great tool and community.
 
* Who's using - this is kind of tricky. Unlike Akka, and other projects which have a commercial offering, we don't offer commercial support for Vert.x (yet), so it's not so easy for us to see who is using us, i.e. we don't have a list of contracts we can just look at. However, I do know various companies and users we could ping.
Sure. I just saw the item in the website's TODO list and thought it would be a great idea. Maybe we can do something like this: we can put some companies that we already know (you could add Fraunhofer for example, the research institute where I'm working J) and maybe a short call like "You want to be listed here? Just contact us!" or something like that. Of course we should accept large and known companies only (Fraunhofer has about 22.000 employees by the way ^^ and is well known in Europe).
 
* The actual manual pages linked from the documentation page, e.g. http://michel-kraemer.github.io/web-site/docs/vertx-core/java/index.html - it would be nice to get those using the same stylesheets as the main site so we could have a consistent look and feel throughout.
Sure thing. What do you suggest for the toc on the left hand side? I think we should keep it. It helps jump between sections. Maybe we could do something like the menu here: http://getbootstrap.com/css/ (I mean the one on the right hand side)

What do you think of a 'Our team' section with small avatars and maybe the Twitter handle? Do you even have a core team? For newbies it's really hard to see who's behind the project. Maybe in a separate 'About' page?

Cheers,
Michel

...

Michel Krämer

unread,
Mar 31, 2015, 1:42:17 AM3/31/15
to ve...@googlegroups.com
Just one minor comment though. Some time ago I came accross the spec from google on their new material design. There is a section for colors:
http://www.google.fr/design/spec/style/color.html#color-color-palette
Cool site. I will add it to my bookmarks. Thanks!
 
The purple we've got is nice but kind of darkish. Would you mind trying the purple from MD, it' s a much brighter purple #9C27B0 and sse if it looks better?
I made two screenshots. One with the darker purple and one with the lighter one (see attached). The thing with colors is that the larger the surface the more saturated and intense the colors look. You might know this if you have ever painted your living room with a vivid color. You went to the store and chose a red color that looked great on the bucket but when you put it on the wall it was just terribly intense. Of course it also depends on the computer screen and other things (lighting conditions etc.) but I think the brighter purple is just a bit too much. I like the darker one better. On the other hand you're right that it doesn't look as friendly as the bright one. So it's very hard to decide. I would be OK with either of them, but slightly prefer the darker one. What do the others think?

P.S.: Have you tested the site on your mobile device. Mobile device screens tend to saturate the colors even more.

Cheers,
Michel
 

All the best,

Stephane
bright.png
dark.png

Michel Krämer

unread,
Mar 31, 2015, 1:49:01 AM3/31/15
to ve...@googlegroups.com
Of course you should view the screenshots fullscreen to see the effect. Maybe we could also choose a color somewhere in the middle of these two?

Michel

Tim Fox

unread,
Mar 31, 2015, 2:24:24 AM3/31/15
to ve...@googlegroups.com
On 31/03/15 06:31, Michel Krämer wrote:
So.. the web-site looks really great.
It's just the kind of site (simple, clear, nice design) I have wanted for a long time, but I didn't have the skills to do it myself.
Thanks. You're very much welcome. It was the least I could do for such a great tool and community.
 
* Who's using - this is kind of tricky. Unlike Akka, and other projects which have a commercial offering, we don't offer commercial support for Vert.x (yet), so it's not so easy for us to see who is using us, i.e. we don't have a list of contracts we can just look at. However, I do know various companies and users we could ping.
Sure. I just saw the item in the website's TODO list and thought it would be a great idea. Maybe we can do something like this: we can put some companies that we already know (you could add Fraunhofer for example, the research institute where I'm working J) and maybe a short call like "You want to be listed here? Just contact us!" or something like that.


That sounds like a good idea :)


Of course we should accept large and known companies only (Fraunhofer has about 22.000 employees by the way ^^ and is well known in Europe).

+1 It's a very well respected organisation. Even I have heard of it ;)


 
* The actual manual pages linked from the documentation page, e.g. http://michel-kraemer.github.io/web-site/docs/vertx-core/java/index.html - it would be nice to get those using the same stylesheets as the main site so we could have a consistent look and feel throughout.
Sure thing. What do you suggest for the toc on the left hand side? I think we should keep it. It helps jump between sections. Maybe we could do something like the menu here: http://getbootstrap.com/css/ (I mean the one on the right hand side)

That's nice, although the font size is a bit small.



What do you think of a 'Our team' section with small avatars and maybe the Twitter handle? Do you even have a core team? For newbies it's really hard to see who's behind the project. Maybe in a separate 'About' page?

Also a good idea. The full-time team is currently small (only 2 people, but we are in the process of hiring 2 more), but we have a lot of contributors.

It would be nice to have everyone who has contributed to be listed (if they want).

Julien Viet

unread,
Mar 31, 2015, 2:30:03 AM3/31/15
to ve...@googlegroups.com, Tim Fox
if you want to change the documentation style : please use the asciidoctor stylesheet factory : https://github.com/vert-x3/web-site/tree/initial-work/asciidoctor-stylesheet-factory

-- 
Julien Viet
www.julienviet.com

Michel Krämer

unread,
Apr 1, 2015, 1:08:24 AM4/1/15
to ve...@googlegroups.com
Also a good idea. The full-time team is currently small (only 2 people, but we are in the process of hiring 2 more), but we have a lot of contributors.

It would be nice to have everyone who has contributed to be listed (if they want).
We could use the GitHub API to get all contributors to the Vert.x repositories:

On the other hand the Vert.x organisation has many repositories so we would produce a lot of requests. Alternatively we could use this:

Another alternative would be to use 'git log' for example to get all contributors from the local repositories.

Of course we could also go the static route and just insert the avatars and other info in plain HTML.

Cheers,
Michel
 
...

Michel Krämer

unread,
Apr 1, 2015, 1:12:47 AM4/1/15
to ve...@googlegroups.com, timv...@gmail.com
if you want to change the documentation style : please use the asciidoctor stylesheet factory : https://github.com/vert-x3/web-site/tree/initial-work/asciidoctor-stylesheet-factory
It seems the stylesheet factory uses foundation instead of bootstrap and compass instead of plain sass. It would be very hard for me to achieve the same styling. I guess it makes more sense to reuse the website stylesheet. I will have to dig a bit deeper into how the documentation is generated to find a good way. I'll get back when I have got something to show.

Cheers,
Michel

Julien Viet

unread,
Apr 1, 2015, 1:38:29 AM4/1/15
to ve...@googlegroups.com, Michel Krämer, timv...@gmail.com

Tim Fox

unread,
Apr 1, 2015, 2:45:57 AM4/1/15
to ve...@googlegroups.com
On 01/04/15 06:08, Michel Krämer wrote:
Also a good idea. The full-time team is currently small (only 2 people, but we are in the process of hiring 2 more), but we have a lot of contributors.

It would be nice to have everyone who has contributed to be listed (if they want).
We could use the GitHub API to get all contributors to the Vert.x repositories:

I was thinking about that too, but yes it would mean about 80 requests (!) which kinds of rules out it being done each time. But I guess we could write a script or something that rebuilds a static page with this info periodically. I guess this is something to think about going ahead.



On the other hand the Vert.x organisation has many repositories so we would produce a lot of requests. Alternatively we could use this:

I think most Vert.x contributors aren't members of Vert.x teams so I don't think this would work currently.



Another alternative would be to use 'git log' for example to get all contributors from the local repositories.

Of course we could also go the static route and just insert the avatars and other info in plain HTML.

+1

--

Tim Fox

unread,
Apr 1, 2015, 3:40:19 AM4/1/15
to ve...@googlegroups.com
Michel,

Any chance you could submit a PR for what you've done so far here http://michel-kraemer.github.io/web-site/ ?

It's already a _lot_ nicer than what we have here http://vert-x3.github.io/ so would be great, imho, to have it up asap in time for the next milestone, this week :)


On 01/04/15 06:08, Michel Krämer wrote:
--

newoga

unread,
Apr 1, 2015, 1:37:31 PM4/1/15
to vert...@googlegroups.com, ve...@googlegroups.com, michel....@googlemail.com
@Michel Kramer, are you working on a rewrite of the website or are we still moving forward with https://github.com/vert-x3/web-site and the jbake implementation of the website.

I just signed the Eclipse CLA yesterday and can make a pull request today with some minor visual improvements but don't want to overstep anything you are working on...

On Thursday, March 26, 2015 at 3:15:39 AM UTC-4, Julien Viet wrote:
looks way better than our previous attempts, I like it.

-- 
Julien Viet
www.julienviet.com

On 26 Mar 2015 at 07:29:16, Michel Krämer (michel....@googlemail.com) wrote:

Now here's a *very very rough* sketch of what the website could look like. I made it in Inkscape in a couple of minutes so don't take it too serious. Just wanted to give a quick impression.

Cheers,
Michel 

Am Donnerstag, 26. März 2015 07:16:45 UTC+1 schrieb Michel Krämer:
Dear Tim,

I have some experience. I'm not a pro, but I think I should be able to do the job. You can have a look at my latest work (my personal website) for a reference:
http://www.michel-kraemer.com/

What do you think? Shall I try my luck?

I suppose https://github.com/vert-x3/vert-x3.github.io is the right repo?

Any preferences? Colors that should be included (like the purple color in the logo)? Dark theme (like the old site) or light theme?

Cheers,
Michel 


Am Montag, 23. März 2015 18:50:29 UTC+1 schrieb Tim Fox:
Hello folks,

The current Vert.x 3 web-site contains pretty much all the information,
is a single page, and is functional:

http://vert-x3.github.io/

It's very simple and written using Twitter Bootstrap. Although it does
the job, it looks.... well, how do I put it? A bit boring and a bit
amateurish?

I was wondering if there was anyone with a bit of web-design experience,
nothing fancy required, who would like to take a stab at putting a bit
of lipstick on it?

Just thinking along the lines of, maybe a bit more colour, fonts,
alignments etc, not thinking of any grand redesign.

Anyone interested?
<