Feedback on yeoman.io landing page about yeoman.io

[addyosmani]

Sounds good to me. We should be re-doing the intro video for Yeoman 1.0 anyway as there will definitely be changes to the user experience that will be noticeable.

[tomlane]

A few concepts, based on the 'yeoman colors':

[sleeper]

👍 on the first one (the clear one).

[viviancromwell]

+1 on the first one.

[tomlane]

First design code is located here: https://github.com/yeoman/yeoman.io/tree/NewSiteSource

[reecekol]

Team

I have added a new proposal for discussion. In the design I have removed some of the content on the current page that I think could be moved to other pages.I have also made the content more focused so that users can get a quick and concise idea of what yeoman has to offer and how to get started.

[sindresorhus]

@paulirish @addyosmani @sleeper

[paulirish]

The current homepage does need content reworking.. I still agree that the thrust of the project needs to come across more clearly. The 1.0 beta news can trail behind it.

The two proposed designs here are good, but I dont think address the core challenges which are:

• communicate what yeoman does. (it does a lot but hopefully not enough to overwhelm :)
• communicate who yeoman is for
• communicate how to get started using it.

I'd like to see a very short video return to the homepage, but i imagine the right time for that is when 1.0 ships.

So, the priorities, IMO, are to 1) make a new, short video when ready 2) reshuffle the existing content and tighten it up.

[passy]

Once a few more generators are ready for 1.0, it would make sense to promote them directly on the homepage or a dedicated sub page.

[addyosmani]

I like the proposed designs - the second reminds me of the revised Grunt site, but agree with Paul. We need to do a better job of communicating what we do and who we're targeting.

In the short term, before the video, I'd like us to make sure the site does a good the best job possible of addressing those three questions with the design we have atm.

[passy]

In addition to the promotional screencast, maybe some shorter ones could also be helpful when embedded into the tutorials. I just saw an example on http://itch.io/ which I found really impressive. It's made with x11-canvas-screencast.

[tomlane]

How about starting with an overview of the workflow? Something like this along with a quick video of what the workflow can do for you should tick all the boxes?

[addyosmani]

I think it would be useful to explore a few more concepts. I actually love the way http://html5boilerplate.com/ is currently laid out. Very clear what they do, screencast is well placed and the bullet points aren't excessive.

In fact, If we used out yo/grunt/bower explanations in the way they currently mention features I think that could work. Much of the 'features' we list lower down in the page now don't relate to 'yo'. They relate to generator-webapp and specific generators. One could almost have dedicated pages for each of them just talking about them briefly if people wanted to know more. Of..just link to their readmes.

What do others think?

[sindresorhus]

Agreed

[tomlane]

since we're going to be having an introduction screencast and the glossy content up the top of the page we could make it so that is the first thing every user sees and has to scroll to view the rest. A certain company used this to hide a legal apology so users could only see it by scrolling down.

var HeroResize=AC.Class({initialize:function(b){this._height=null;this._hero=$(b);
AC.Object.synthesize(this);this.__boundResizeHero=this.resizeHero.bindAsEventListener(this);
if(typeof window.ontouchstart==="undefined"){this.resizeHero();Event.observe(window,"resize",this.__boundResizeHero)
}},setHeight:function(b){this._height=(b<0)?0:b;return this._height},resizeHero:function(){this.setHeight(parseInt(window.innerHeight||(window.document.documentElement.clientHeight||window.document.body.clientHeight),10)-310);
this.hero().style.height=this.height()+"px"}});Event.onDOMReady(function(){var b=new HeroResize("billboard")
});

[addyosmani]

Would anyone be interested in taking another stab at improving the general layout/design of the homepage?

We haven't really changed it much over the past year. Screencasts and of course updated content has been added but we could do more to sexy this up :)

[addyosmani]

We've since assembled a Yeoman.io design team who are currently focusing on redefining the site information architecture and a new look and feel that highlights our story, community generators and getting started/API guides.

We've taken a look through the feedback and suggestions in this thread and will keep them in mind during the redesign :)