bitovi / canjs.com

The CanJS homepage and distributable files
http://v2.canjs.com/
17 stars 12 forks source link

Guides page needs to be more intentionally designed #23

Open tomgreever opened 11 years ago

tomgreever commented 11 years ago

The guides page is pretty basic, but it needs to be cleaned up and made to look better.

daffl commented 11 years ago

I associated issue #26 with it which talks about some additional guide pages. Also worth mentioning, that we could use the same groupings in the guides that we are using in the API (like PROTOTYPE, PLUGINS, STATIC etc.). Playing around with it I found that it made a big difference and seems to be how you intended the design to work anyway.

tomgreever commented 11 years ago

Ok, I've been playing around with a redesigned Guides page today. This is a very crude, ugly prototype of the concept using screen grab images and default buttons... but you'll get the idea.

http://tomgreever.com/canjs-guides/Why_CanJS.html

If this concept works, I can mock up some more refined designs.

justinbmeyer commented 11 years ago

I'm not a huge fan of the two dimensional menu. It's that much more confusing because of the other horizontal menu above.

Plus, I'd like whatever we build to work other places. I'd prefer a more useful menu system, possibly incorporating some of the scroll-menu workings from the original canjs.com site.

Justin Meyer 847-924-6039

On Thu, Aug 1, 2013 at 5:34 PM, Tom Greever notifications@github.comwrote:

Ok, I've been playing around with a redesigned Guides page today. This is a very crude, ugly prototype of the concept using screen grab images and default buttons... but you'll get the idea.

http://tomgreever.com/canjs-guides/Why_CanJS.html

If this concept works, I can mock up some more refined designs.

— Reply to this email directly or view it on GitHubhttps://github.com/bitovi/canjs.com/issues/23#issuecomment-21974901 .

justinbmeyer commented 11 years ago

The "Why CanJS" section is nice. It probably doesn't belong in "Guides". Maybe get it's content on the homepage?

tomgreever commented 11 years ago

I've created a standalone About/Why page here: http://canjs.com/about.html

My thinking is to:

  1. Remove "Home" from the nav and replace it with "About" - linking to this page
  2. Link the 3 Benefits tabs on the homepage to the appropriate tab on this page
  3. Remove the Why page from the Guides.

I like the design of this page. My one hesitation is that b/c I use the same Hero background style as the homepage, it looks too similar to the homepage, especially with a green button. But is that confusing? Will people be confused if they click here from the homepage? I tend to think not, in which case it's just a visual preference/distraction.

Someone will need to tabbify the containers. All the HTML is there, just needs tabbed onClick

Thoughts?

tomgreever commented 11 years ago

I've been working on a better landing page for the Guides, assuming we separate the Why page as mentioned earlier. Here is what I have: https://dl.dropboxusercontent.com/u/3843531/GettingStartedLanding.jpg

gettingstartedlanding

And then I'm thinking the other pages could remain mostly the same, except we'd move the Changelog & License links to be smaller text links like this: https://dl.dropboxusercontent.com/u/3843531/GettingStarted.jpg

gettingstarted

Now that I've done it, though, I wonder if changing the interface so drastically from the landing page to the guide pages is messy. But maybe people expect a landing page to be different? Either way, I think this is the right direction. I may experiment with bringing the "icon & subtext" idea to the rest of the guides pages...

tomgreever commented 11 years ago

Ok, I've modified the Guides menu to accommodate an icon and subtext.

Here's what the landing page could look like: https://dl.dropboxusercontent.com/u/3843531/GettingStarted-Landing-v2.jpg

gettingstarted-landing-v2

A parent page could look like this: https://dl.dropboxusercontent.com/u/3843531/GettingStarted-Parent-v2.jpg

gettingstarted-parent-v2

And then the children could look like this: https://dl.dropboxusercontent.com/u/3843531/GettingStarted-Child-v2.jpg

gettingstarted-child-v2

Reactions? Thoughts? Suggestions? Knock-knock jokes?