ev3dev.github.io
ev3dev.github.io copied to clipboard
ev3dev
Choose new image for "jumbotron" section on home page
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.
How about this? I think it really reflects the current state of ev3dev well.
(Joking of course)
OK, I think I have some real concept art now :laughing: How's this?
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.
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.
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.
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?
Random project videos is a good idea or a gif of the boot process and some Brickman navigation might be cool too
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.
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.
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".
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:
It still looks odd though, more so than the original mock-up IMHO. Any suggestions to make it look better?
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
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).
Or you could use python to emulate ev3: http://nbviewer.jupyter.org/gist/anonymous/bb174089699ae66443f5a212c5e37b66
(lutRS14 is available in the fonts submodule).
Coming back to this, I have been able to produce a rough mock-up of the "display-like" style in Photoshop:
Thoughts?
I like it. (I still think the button should say "Click Here to Get Started" though.)
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
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.
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.
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?
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!
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.
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.
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.
I think the first two look the best. What do others think (about these and other options)?
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.
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:).
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.
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.
Other short slogans:
- Hack your EV3
- Unleash your brick
- EV3 programming your way
- :musical_note: ev3dev is awesome!
- Debian Linux on EV3
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.
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?