A mock-up that I'd like to share

[cies]

Hi Chris and others.

I had some thoughts about the site, and figured it was easier to put them into a mock-up (up on Imgur) instead of making an issue for each of the items. Feel free to comment how you see fit, and maybe we have to break it up into separate issues. Mainly I'm interested if it contains some good ideas.

I've marked each change with a red number on the mock up, explanations below:

1. Move the main links in the nav bar to the right. Visually more pleasant, and make the logo on the left stand out better (look less odd, font-wise).
2. Add a wiki link to the nav bar. It has a wealth of info there, it is a central place in Haskell-land, and the link in the bottom was a bit "funny".
3. Move the logo to the middle. Make it stand out. Less visually close to the upper-left mini-logo. Less "choice" the eyes have to make.
4. Offer many code snippets that can be navigated.
5. Put code snippets go to the center. Make 'm stand out. Less choice to make for the eyes.
6. I must admit I'm not fully behind these "explanation arrows". But I wanted to share the idea non-the-less. They could be "on mouse over". They are intended to showcase some of the language features at play in the code snippets.
7. Put "Try Haskell" behind a button. Puts less technical strain on the main page (no sessions, or JS needed). Makes it a clear call-to-action (instead of a big "what is this, and how do I use it" thing above the fold on the main page). On the TryHaskell page it could refer to FPC's HsCenter for more in-browser Haskell goodness.
8. Give videos a pop-up, explaining their content and required level of expertise.
9. Make room for mannny more videos.
10. Add " & Benefits", as it is always better to sell benefits :)
11. Remove the repeated "click to expand" links, in favour of on-mouse-over goodness. These blurps of text could also use some more links to interesting pages on the wiki.
12. Space for another call to action. (Not sure yet what that should be; "Get it or Learn more!" maybe?)
13. Removed the wiki link+text (now in the navbar on the top).

I also have some ideas on the download section, but they will go into a separate issue.

[gbaz]

Wow! Thanks for all the ideas. I'm not sure how I feel about some of the particulars, but then I'm not a designer.

The revolving door of code samples seems nice. Note though that on a sufficiently large browser, the sample and the big logo sit next to one another. Perhaps we want to center-align them when they don't? And also perhaps to allow them to scale down a bit when the browser gets smaller instead of just immediately bumping to a single-col?

I absolutely agree on the wiki link in the top-bar, although It does navigate away from the main site, so that can be confusing.If we redo/reskin the wiki front page that would be a big start -- and also perhaps we could do it as an "open in new window/tab" link, unless those are considered too gauche these days? (speaking of which, any interest in tackling a redesign of the wiki frontpage? 😄 )

The pop-up or mouseover for videos makes a lot of sense -- see the related issue on curating them in general.

I do think "click to expand" is the lesser evil here -- the mouseover behaviour could be irritating if they keep wiggling around as you mouse through, not to mention that it probably doesn't play well on mobile.

[cies]

Glad you like it!

I do think "click to expand" is the lesser evil here

Agreed.

the mouseover behaviour could be irritating if they keep wiggling around as you mouse through, not to mention that it probably doesn't play well on mobile.

Oops. Indeed. Forgot the mobile folks :) I was trying to reduce repetition.

[chrisdone]

There're some good ideas in here, yeah. Too many points to discuss so I'll just put yes/no on what I agree with. As usual with picking at the design:

• Anything visual it's likely I won't agree with because I've tried a dozen variations of positions (like a centered logo in a baselined page), colours etc in Inkscape while mocking up the original design, so things like that are essentially "why don't you do what you thought wasn't good?" so those points I'll leave to others to chime in on.
• If it generally doesn't add anything or is otherwise seemingly equal I'll default to not wanting to change it because it encourages other "vague" nitpicky changes.

That said, I'm just part of the group maintaining this. So more voices adds value to the process.

Move the main links in the nav bar to the right. Visually more pleasant, and make the logo on the left stand out better (look less odd, font-wise).

no

Add a wiki link to the nav bar. It has a wealth of info there, it is a central place in Haskell-land, and the link in the bottom was a bit "funny".

maybe, not yet. wiki needs cleaning up imo

Move the logo to the middle. Make it stand out. Less visually close to the upper-left mini-logo. Less "choice" the eyes have to make.

no

Offer many code snippets that can be navigated.

yes, as written in my original design page http://chrisdone.com/posts/haskell-lang content is needed

Put code snippets go to the center. Make 'm stand out. Less choice to make for the eyes.

no

They could be "on mouse over". T

bad for touch devices

Put "Try Haskell" behind a button.

no. why?

Puts less technical strain on the main page (no sessions, or JS needed)

not necessary

ive videos a pop-up

opening a new tab can do that

explaining their content and required level of expertise.

yes, agreed, #78

Add " & Benefits", as it is always better to sell benefits :)

meh

Remove the repeated "click to expand" links, in favour of on-mouse-over goodness. These blurps of text could also use some more links to interesting pages on the wiki.

bad for touch devices

Space for another call to action. (Not sure yet what that should be; "Get it or Learn more!" maybe?)

yes, #66

You didn't mention the "click to learn more" in your screenshot but that is something I'd like there, but there needs to be content to link to before we add such links.

[chrisdone]

(I think we need more content in the snippet examples and then we can think about presenting them better. At the moment no one is contributing that, so redesigning with expectation of them seems premature.)

[cies]

@chrisdone Thanks for yr feedback!