Improve on the UI

[dignifiedquire]

Start resolving the issues from #24

•  Bit fat download button with os detection
•  Increase hight
•  Add underlines to links
•  Fix mobile version issues

Current preview

@jbenet please take a look

@whyrusleeping 0.3.11 is not setup for being built yet could you add that please?

[jbenet]

Button + height LGTM!

[jbenet]

(button looks great actually)

[jbenet]

just thought: should we add OS icons from font-awesome wherever relevant? (say, to left of the text in the grid, and to the auto-detect button?)

[jbenet]

could we use a down-arrow on the button? common symbols help catch attention.

[dignifiedquire]

could we use a down-arrow on the button? common symbols help catch attention.

I'd rather not add an icon to the download button, as I already needed to make the font quite small as some of those names are very long (I'm looking at you fs-repo-migrations) and there is simply not enough space on some screen sizes to add it

[dignifiedquire]

just thought: should we add OS icons from font-awesome wherever relevant? (say, to left of the text in the grid, and to the auto-detect button?)

I think it's not needed on the download button, will think about adding it to the grid, but I haven't yet found a high quality free bsd icon that works in small sizes to use, so I'd rather not add them if we don't have good ones for all platforms.

(button looks great actually)

Thanks :)

[RichardLitt]

Code LGTM

[jbenet]

@dignifiedquire

• what about just the icon instead of repeating the name? or just the icon when the screen width is below some threshold (@media queries, woo)?
• arrows matter, so does green. Green + down arrow are both action buttons across tons of sites and people's minds are well conditioned. (i once ran an a/b test with green button vs gray button and green was ~5x more likely to be clicked.) i know it fits less with the blue, any shred of confusion finding the button is worse than a feeling the colors don't entirely fit.

[jbenet]

• we should add the icons at some point, but i'm ok delaying it for a future PR.
• "speed of finding download link and clicking it" is way more important than "the icons look a bit bad" here.
• freebsd: https://openclipart.org/image/2400px/svg_to_png/226471/1441081059.png
• maybe the puffer to the right for openbsd?

[dignifiedquire]

arrows matter, so does green. Green + down arrow are both action buttons across tons of sites and people's minds are well conditioned. (i once ran an a/b test with green button vs gray button and green was ~5x more likely to be clicked.) i know it fits less with the blue, any shred of confusion finding the button is worse than a feeling the colors don't entirely fit.

Okay two things

• Down arrow. I'm not sure why you think this is so important, I know it was used for some time but these days I have a hard time to find any large download page that still uses an arrow for the download button. (See below for some examples of popular download pages that just manage fine without icons)
• Green vs Grey. The reason for your a/b test to go to green is clear, but not because of green, but rather because it was colored (green) vs uncolored (gray) so I see no conclusion from that to use a green button here in a design that was not at all intended to use green. If you want a different highlight color we could use orange, as it actually fits and contrasts nicely to blue, but I'm not sure that kind of highlight is needed

Examples

Adobe

Chrome

Go-lang

[dignifiedquire]

"speed of finding download link and clicking it" is way more important than "the icons look a bit bad" here.

Speed of finding the link is important I totally agree, but if the icons are not actually distinguishable and look bad they actually have the opposite effect as people are then spending their time trying to figure out what the icon is supposed to mean.

[dignifiedquire]

New version http://v04x.ipfs.io/ipfs/QmeMofwoHniP576g1VhLZmGBK6MtN83XYuqGkBQU3VZVb1