Choose new image for "jumbotron" section on home page

WasabiFan commented 7 years ago

Now that the splash screen has been removed / shrunk, there isn't any relevance to the boot splash image that we are showing on the home page anymore. It would be nice to have some more relevant image, or maybe even something that covered the whole width as a background. The existing image was more grandfathered in from the previous site design than chosen explicitly.

dlech commented 7 years ago

How about this? I think it really reflects the current state of ev3dev well.

img_20160912_220140

(Joking of course)

WasabiFan commented 7 years ago

Perfect. I have a mock-up ready.

WasabiFan commented 7 years ago

OK, I think I have some real concept art now :laughing: How's this?

home concept

I used a low-res picture of an EV3 that I found online for this test, so we'll want to find a better-quality one (which isn't badly Photoshopped to cover up weird lighting) if we go with a design like this. I considered using this vector image, but I was unhappy with the vector-style artificiality of it.

While I'm working on this, I also want to see what I can do about the unbalanced columns below the jumbotron; the fact that they get shorter as you look farther right makes me unhappy.

dlech commented 7 years ago

The EV3 looks good, but I'm not liking the orange button on the screen.

Crazy idea (because I stayed up too late): Let's take the snake game and put it on the EV3 on the website and make the game actually playable.

Or we could have the latest new on the EV3 screen. Or we could have some other sort of animation to make it interesting.

WasabiFan commented 7 years ago

The EV3 looks good, but I'm not liking the orange button on the screen.

What is it that's off-putting? The color specifically, or just the fact of a button there? For example, would this color be better (ignoring the hacky editing)?

I could potentially make the button pixelated and/or styled such that it looks like it's actually something displayed on the screen.

Crazy idea (because I stayed up too late): Let's take the snake game and put it on the EV3 on the website and make the game actually playable.

That could be cool. However, if we do something like that, I think we would need to have multiple live demos: just showing one wouldn't give much benefit past cool-looking animations, and could give the wrong impression. I could see this working if we compiled Brickman with Emscripten or similar to make it run in the browser, but I don't think that just a demo or two by themselves would give a very good impression. A simple version of this would be a carousel of screenshots from various apps.

Or we could have the latest new on the EV3 screen.

I'm assuming you mean news. I think that could work, but honestly it's a pretty small space. I could see having the latest version number, but a whole news item would probably feel out-of-place.

Or we could have some other sort of animation to make it interesting.

Any ideas for this? I've been thinking about app demos, but past that I'm not sure what else might make sense here.

ddemidov commented 7 years ago

Any ideas for this? I've been thinking about app demos, but past that I'm not sure what else might make sense here.

Wikipedia-page-sized video (embedded into the EV3 screen) from a random project?

rhempel commented 7 years ago

Random project videos is a good idea or a gif of the boot process and some Brickman navigation might be cool too

bmegli commented 7 years ago

The ideas are cool but:

moving elements on web are distracting, especially when you want to read some text
videos with autoplay when entering web page are annoying, I for example tend to close them right away

So whatever it is consider making it active only when pointed/started by user. Like video only when clicked, gallery switching photos only when clicked on arrows etc.

WasabiFan commented 7 years ago

Yes, I am still in favor of something static and preferably functional. I want to keep it simple and make sure that there's nothing that might annoy users, especially because this is the homepage.

dlech commented 7 years ago

What is it that's off-putting? The color specifically, or just the fact of a button there? For example, would this color be better (ignoring the hacky editing)?

The fact that there is a pretty, color button on a low dpi, monochome screen. And just the fact that there is a button on top of a non-background image is unusual. It makes me wonder if that is really supposed to be a button.

I would like it better if you generated an image that looked like it was something that would really be seen on the EV3 screen. For example, pixelated text that says "Click here to get started with ev3dev".

WasabiFan commented 7 years ago

I would like it better if you generated an image that looked like it was something that would really be seen on the EV3 screen. For example, pixelated text that says "Click here to get started with ev3dev".

I've been trying to come up with something like this, but I can't find a good-looking font and am having trouble stylizing the button so that it looks reasonable. I know that Brickman uses a font that GRX calls B&H-Lucida-Medium-R-Normal-Sans, but I can't find a font by that name or something similar for use in Photoshop. I'm also having issues with the button style itself. This may just be the lack of a good font, but both a dark button body with "transparent" text (as it is in Brickman) and an outline button look weird. The latter would be preferable so it can be changed on hover to show that it is responsive. Not having any button body at all is not an option.

The closest I could get was this:

Mock-up

It still looks odd though, more so than the original mock-up IMHO. Any suggestions to make it look better?

dlech commented 7 years ago

Don't know if this is the exact font, but it should be close enough. Also not sure if PhotoShop will recognized the font format. But I suppose it is worth a try. lutRS14.pcf.zip

dlech commented 7 years ago

You could always take a screenshot of the EV3 too. Should be easy to mock up something with the fonts in ev3dev-lang-python (it should have the exact same font I linked above).

ddemidov commented 7 years ago

Or you could use python to emulate ev3: http://nbviewer.jupyter.org/gist/anonymous/bb174089699ae66443f5a212c5e37b66 (lutRS14 is available in the fonts submodule).

WasabiFan commented 7 years ago

Coming back to this, I have been able to produce a rough mock-up of the "display-like" style in Photoshop:

Thoughts?

dlech commented 7 years ago

I like it. (I still think the button should say "Click Here to Get Started" though.)

rhempel commented 7 years ago

I agree with David - the button needs Click here text to indicate that it's actually clickable😀I otherwise it looks to me like a command - get started using the resources elsewhere on the page

WasabiFan commented 7 years ago

That's the thinking behind my initial preference of the site-style button overlay in the first(ish) picture: It makes it clear that it's a button. I think that may still be the one I'm leaning toward, but I want to get a better sense of this option first. I started working on a Python script to generate a better-quality screenshot of this earlier today but haven't finished it. It's worth noting that the entirety of that text does not fit horizontally on the screen at standard font sizes.

cavenel commented 7 years ago

Just to give my opinion on this, I would say keep illustrations as illustrations and buttons within the text. If you absolutely want a button in the illustration, then I am on WasabiFan's side, it should be obvious that it is a button and be a site-style button. It makes the illustration a bit less pretty but a bit more useful. The more the button seems included in the illustration the less the people will see it and click on it. If you keep as it is in the last image (button "Get started" in black and white) then you need another "Get started" button in the text that people will actually use.

WasabiFan commented 7 years ago

Okay, I like that line of thinking. While I'm working on a better mock-up of the display-style button idea, let's consider what other content could go with the logo on the EV3. My ideas are these:

A slogan or tagline, maybe just a few words describing the product. I could imagine something llike "Linux for the MINDSTORMS EV3 and other EV3 platforms," or maybe something more general, like "A versatile software environment for the easy-to-use LEGO MINDSTORMS platform."
The date/version of the most recent release
Something representative of the goals of ev3dev; maybe a shell prompt or some code in an editor.

What other things might make sense? What do you think of these?

dlech commented 7 years ago

I think it would be nice to move forward with this to get an actually picture of an EV3 as one of the first things you see on the website.

How about going back to one of our original slogans.

          EV3 is awesome!
             _____     _
   _____   _|___ /  __| | _____   __
  / _ \ \ / / |_ \ / _` |/ _ \ \ / /
 |  __/\ V / ___) | (_| |  __/\ V /
  \___| \_/ |____/ \__,_|\___| \_/

         is SUPER awesome!

WasabiFan commented 7 years ago

Personally, I find that stylized slogan to be hard to comprehend without significant thought. The large block text naturally draws the eye, however it only makes sense if you look at the text above first and then read the block text with the bottom line. The size of the non-block text is also an issue.

Looking at the concept art I've posted so far and the various other thoughts and opinions that have been voiced here, I think we should look into a simple, monochrome design. The color of the button I posted originally was a nice complement to the surrounding dark colors, but unless the colored region is also a button or other CTA I don't think that we should be drawing focus to it.

Taking the block text and centering it (in both directions) without any other content on-screen looks OK, but I don't think it is great.

Centered text

I've tried adding some test slogans to see how it looks, but it feels too distracting; we want users to look at the left-aligned text, not the image to the right. After all, reading is hard.

Slogan

I also tried dumping some boot spew below the block lettering (as it would look on real boot), which is again OK but mildly distracting.

Boot spew

I think the first two look the best. What do others think (about these and other options)?

dlech commented 7 years ago

I like the second image.

WasabiFan commented 7 years ago

OK, now the question becomes one of the slogan. What phrase do we have that fits in that space? I could imagine something like "LEGOs for programmers", but I'm not awake enough right now to consider other options or judge them.

WasabiFan commented 7 years ago

Also, we need a real image to use for the EV3. The one I am using in these mock-ups had to be messed with a fair amount to look decent and I don't think I would be able to edit it better. I also doubt that there's a compatible license on that image or many others online. What do you think? The mechanics of taking a picture of one of our own EV3s wouldn't be too difficult, but both of mine are pretty scratched up (it turns out that an EV3 can slide a good 20ft on hardwood, display-down :laughing:).

dlech commented 7 years ago

What about a computer generated image, e.g. use Blender? @rhempel had a nice setup for taking pictures/videos, but I kind of doubt he took it with him to DK.

dlech commented 7 years ago

I also thought of another option, we could use the ev3dev.org graphical logo like the picture on our downloads page. It fills up the screen a bit more.

dlech commented 7 years ago

Other short slogans:

Hack your EV3
Unleash your brick
EV3 programming your way
:musical_note: ev3dev is awesome!
Debian Linux on EV3

WasabiFan commented 7 years ago

Personally, I like the realistic look of the picture, with mild reflections and such. I was considering taking a screenshot from LDD, but it didn't have the same feel as a real one.

I also thought of another option, we could use the ev3dev.org graphical logo like the picture on our downloads page. It fills up the screen a bit more.

It does, and its shape is appealing. I like the ASCII-art version in this case because it matches the style of the EV3 display, and that design doesn't show up elsewhere on the page.

I like a couple of those slogans, but I'll reserve judgement until I am more awake.

WasabiFan commented 7 years ago

I'm running around with my hair on fire slightly less than I was last month, so I should have some time to finish this up.

I think we should be able to chose one of the options we've listed. The ones I like the most are:

Hack your EV3
Unleash your brick
EV3 programming your way
LEGOs for programmers

The first one is good, but I think it might give the impression that you are actually modifying your EV3, which is not what we want. The second one is catchy, but sounds mildly euphemistic. So, I'd vote for one of the latter two. Thoughts?

WasabiFan commented 7 years ago

My plan is to go with "EV3 programming your way" unless otherwise noted. So, the primary issue going forward is that we don't have a high-quality EV3 image. I've been seeing some nice ones online, but they are generally 300px or less... pretty terrible for our purposes. I tried a vector-style image, but I don't think it looks very good:

hero-ev3-mockup

@dlech What do you think? Do you see any good ones online, or should we try to take our own?

dlech commented 7 years ago

Honestly, I think the one you have been using in your mock ups is plenty good.

WasabiFan commented 7 years ago

I can't find that one anymore 😛 I might just be looking over it though. I'll find it again and see what I can do.

WasabiFan commented 7 years ago

I found a reasonable image and cleaned it up in Photoshop; I still need to fix it up a bit, but it looks pretty good over all. I'd like to hear opinions from @jabrena after he mentioned that he liked one of the mock-ups. Meanwhile, I've gotten this mostly rigged up in legitimate CSS and HTML. It looks like this:

I still need to do some work to use multi-resolution images and srcset, and once we choose the content I can integrate that. Otherwise, how is it?

I've pushed it to this branch: https://github.com/ev3dev/ev3dev.github.io/tree/new-hero-image

dlech commented 7 years ago

Where did this image come from? Do we have permission to use/modify it?

WasabiFan commented 7 years ago

It's an image accompanying many EV3 product listings on Amazon, eBay and similar sites; it seems to be official LEGO material, but I can't say for sure. Given that, it seems reasonable for us to use it (after all, this image is extremely generic). I've yet to find an image of the EV3 in any form with stated usage rights, though.

dlech commented 7 years ago

We can't assume it is OK to use any image because we don't know where it came from. And I especially don't want to have an illegal image at the top our home page where everyone will see it. Some people take photo copyrights very seriously, particularly for professional photos.

You could write to LEGO and ask for permission to modify and reuse the image, or else we need to come up with a different one.

WasabiFan commented 7 years ago

I'm not assuming anything; once I have a design I like, I can figure out the particular photo we want to use. I needed a picture that I could clean up so that I can play with colors and sizing. I plan to take a picture of one of my own EV3s for a final, because as I said I can't find any stated policies on useful images.

dlech commented 7 years ago

My bad. I thought this design was bit more final.

WasabiFan commented 7 years ago

No problem; scrolling through my past comments, I never actually said that I couldn't find a viable picture! I've been able to find the EV3 that I have which isn't scratched and clean it up so that it looks new. I'm going to try to take a picture with a white BG and good lighting sometime this week or next.

WasabiFan commented 7 years ago

Also, I'm keeping my original Photoshop files and properly named (I'll probably push them to a GitHub repo) so that we don't run the risk of losing the original designs if I'm not around. My original mock-ups were hacked together and not in a state that I could easily continue working with them.

jabrena commented 7 years ago

I will review the whole issue today and I will participate with some coments. :)

jabrena commented 7 years ago

Hi @WasabiFan, checking the prototypes, I like the evolution from current web design to replace the current image to a ev3 brick: https://cloud.githubusercontent.com/assets/3310349/21585636/55456b4a-d092-11e6-9746-557d54c6600c.png

In terms of implementation, for tablet/smartphone, the image could drop to the next row in a responsive way but never be hidden.

Another idea, could be evolve current color palette. I think that a color palette based on RCX colors could be more friendly. Now the combination of colors is nice, very balanced, but a bit dark, hacker style :)

My advice is to be more colorful.

Ideas: http://www.iitg.ernet.in/cse/robotics/wp-content/uploads/2011/05/rcx_png.png http://danmarkshistorien.dk/fileadmin/_migrated/pics/LEGO_Mindstorms.JPG http://www.pictaculous.com/

Cheers

Juan Antonio

ev3dev / ev3dev.github.io

Choose new image for "jumbotron" section on home page #238