Design refresh

[eddiemonge]

We need a designer interested in giving the site a fresh look

[SBoudrias]

Hey, I got a designer friend who's ready to help with the refresh of the website. If we could round-up what we hope and need for the refresh that'd be great.

Also, we'd probably need the yeoman characters logos / visuals.

[eddiemonge]

Off the top of my head, easier/clearer navigation, more focus on the blog/articles/tutorials, bolder (not font-weight) mission statement. @addyosmani other things?

[sindresorhus]

Also see the other tickets on this repo where we discuss this.

[SBoudrias]

For reference here: https://github.com/yeoman/yeoman/issues/1245

[SBoudrias]

So, to recap, here's what I think we agree on:

• General
  • Inspiration from http://gruntjs.com http://emberjs.com
  • Focus on readability (better fonts, bigger titles)
• Home Page
  • Big and bold logo and name
  • (do we want a big tagline along in the home page header?)
  • Main topic in a top menu bar
  • Two top colum (like grunt site)
  • "Why Yeoman" or "What is Yeoman" (project presentation)
  • "Getting Started"; easy installation instruction with code preview (install Node, npm -g install yo, npm install -g generator-webapp and yo webapp)
  • Then single column with basic content (Official generators, company using Yeoman, getting started help with link to resources, etc, etc)
• Main Menu
  • Getting started
  • Generators (the generators list)
  • Write your own
  • Blog (do we?)
• Other Pages
  • Smaller logo
  • Sidebar menu for section topics
• Footer
  • Social media links (Github, Twitter, G+)
  • Contributing (?)
• Misc
  • Yeoman logos and medias (I have access to the google drive)
  • The code styling is done with PrettyPrint. There's themes here: http://jmblog.github.io/color-themes-for-google-code-prettify/

IMO, we should remove focus on Grunt and Bower from our home page. I believe it is confusing because it makes a lot of information to digest for beginner (yo api + bower + grunt - it is way to much).

Feel free to add and remove stuff.

[eddiemonge]

+1 on less focus for G and B

[addyosmani]

Completely agree. Thanks for the summary @SBoudrias!

[Ninir]

Do you need help for logos? what are the medias you are talking about? icons/visuals?

I may know a graphist for this part!

[sindresorhus]

@Ninir we're good when it comes to logos https://github.com/yeoman/yeoman.io/tree/gh-pages/media, but any other design/visual help is more than welcome :)

[addyosmani]

In my recent revisions to the homepage, we focus less on Grunt and Bower in the masthead and more as parts of the overall toolchain. I think this is the right place to position them.

Some of the things I would love to see in a refreshed design:

• Navigation at the top of the page, with far fewer items. Maybe just Getting started, Generators, Documentation and API. These are the items users are most interested in imo.
• Keep the installation instructions above-the-fold. My latest revisions bring this but I'd love to see the new design keep this somehow.
• Highlight news/blogs. I like how GruntJS currently does this on the site. It's always easy to find out about the latest version without having to dig around for more info.

[robwierzbowski]

I can contribute to this (UX/IA, general direction, some design, some development). Worked on #110 for a while tonight so I have a pretty good idea of the upcoming development/build system and how the current site works. @SBoudrias, if you want to bring your designer friend into this discussion we can start seeing who is interested in doing what, and maybe schedule a Google hangout to kick things off.

Should Yo have its own official logo so we can show Yo, Bower, and Grunt on the same level, with the Yeoman representing the whole system? E.g., just the Yeoman's head and hat, or a circle around one of their cool staff/spear things? When I'm talking about Yeoman I often run into confusion on Yo vs Yeoman vs an application already scaffolded (by yo) and Grunt.

[sindresorhus]

I can contribute to this (UX/IA, general direction, some design, some development).

That's awesome! Let's get a discussion going :)

Should Yo have its own official logo so we can show Yo, Bower, and Grunt on the same level, with the Yeoman representing the whole system? E.g., just the Yeoman's head and hat, or a circle around one of their cool staff/spear things? When I'm talking about Yeoman I often run into confusion on Yo vs Yeoman vs an application already scaffolded (by yo) and Grunt.

Yes! I've thought the same too.

[addyosmani]

I think a hat would be awesome for the 'yo' logo :) and..we already have the asset for it available.

[robwierzbowski]

@addyosmani Nice. In what repo?

[sindresorhus]

@robwierzbowski this one: https://github.com/yeoman/yeoman.io/tree/gh-pages/media

[robwierzbowski]

So they are.

[robwierzbowski]

The hat:

...with the mustache:

Whoever did the original illustrations is extremely talented. It would be great to get their input.

[sindresorhus]

Whoever did the original illustrations is extremely talented. It would be great to get their input.

Indeed. I asked him https://twitter.com/sindresorhus/status/425074175162601472

[leomaia]

Hello guys!

I've found the hat and the hat+mustache alternatives very elegant. I would try out different proportions between the symbol and wordmark just to see which one fits best but I already like the way @robwierzbowski put together and I am pretty sure he already did it. Maybe for smaller versions I would simplify or even remove that circle thingy on the hat.

About the site, I totally agree with @addyosmani on how much text is there.

My frontend knowledge basically stop on html/css coding so the whole Yeoman concept is sort of foreign language for me. I miss that the site doesn't explain it in a graphical way, making it very clear what it is all about. Could it be a cool infographic or a full page slider telling the Yeoman story ina very simple and illustrative way.

I can put some wireframes together based on what was discussed so far, some layouts or whatever Just let me know how I can be helpful.

[ruyadorno]

+1 for infographics, this would add a lot for newcomers

[robwierzbowski]

An graphic display of the Yeoman ecosystem would be great — we just have to make sure it's responsive and accessible.

@leomaia Excited you're able to give some help! Let's get some new IA/site organization sorted, and then pull you in for wireframe/layout consultation.

[leomaia]

Awesome! Just let me know when you want me to jump in.

[addyosmani]

Excited to have any of your time helping with ideas or layout @leomaia :)

[addyosmani]

Rob: really like the hat + mustache variation. Any other preferences?

[robwierzbowski]

Nope , I'll tighten that up and pr it.

On Tuesday, January 21, 2014, Addy Osmani notifications@github.com wrote:

Rob: really like the hat + mustache variation. Any other preferences?

— Reply to this email directly or view it on GitHubhttps://github.com/yeoman/yeoman.io/issues/113#issuecomment-32919589 .

Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com

[leomaia]

That's great to hear @addyosmani :) I am really glad to participate.

You guys may think it is dumb but could any of you explain me Yeoman (what is it for and how does it work) like you would do for a 7-year-old?

[eddiemonge]

Imagine you have some Legos. Yeoman builds you a plane to show whats possible and gets you started instead of you starting from nothing

[ruyadorno]

@leomaia I could take some time to explain it in deeper details to you in pt-br

I would be really interested in the infographic outputs that you could eventually provide us

[leomaia]

Thanks @eddiemonge that's really helpful.

@ruyadorno that would be awesome. Wanna e-mail me or schedule a hangout talk?

[robwierzbowski]

One step up from @eddiemonge's explanation:

1. There are a bunch of popular frameworks we can use to build web applications.
2. Every time you start a project with one of these frameworks you have to write a bunch of boilerplate (generic starting point) code.
3. When you run a Yeoman generator, you answer a couple questions and that boilerplate code is created for you automatically.
4. Some of that generated code sets up how other projects (Bower and Grunt) work.
5. Bower lets you easily add other people's code to your project. Grunt automates common tasks you do when working on a web app. You could use Bower and Grunt in many different ways, but the Yeoman generators set them up in a consistent way so that all of us developers are using the same workflow.

[leomaia]

Thanks a lot @robwierzbowski

So my comprehension wasn't all that flawed but it is nice to understand how this Bower and Grunt integration work. I will think over this and on what else was mentioned about the site's desired structure. Maybe putting some wireframes here will improve our discussions towards the right direction.

[ruyadorno]

@leomaia sure, I'll pm you on twitter, it will be probably faster ;)

[leomaia]

@ruyadorno great. I've got something on in a few minutes but I can catch up with you tomorrow. Thanks. I really appreciate it.

[robwierzbowski]

If anyone wants to schedule a hangout to talk about site direction and IA let me know. I'm US east coast time, free after 5 this week.

[zenorocha]

I'm a little busy with WC.org website right now, but I can probably help in some weeks :)

[robwierzbowski]

Breaking some foundational tasks into their own issues:

[SBoudrias]

Follow up on #191