Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Design refresh #113

Closed
eddiemonge opened this Issue · 37 comments

9 participants

@eddiemonge
Owner

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

@SBoudrias
Owner

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
Owner

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
Owner

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

@SBoudrias
Owner

For reference here: yeoman/yeoman#1245

@SBoudrias
Owner

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

  • General
  • 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

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
Owner

+1 on less focus for G and B

@addyosmani
Owner

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
Owner

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
Collaborator

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
Owner

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

@robwierzbowski
Collaborator
@robwierzbowski
Collaborator

So they are.

@robwierzbowski
Collaborator

The hat:

image

...with the mustache:

image

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
Collaborator

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
Owner

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

@addyosmani
Owner

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

@robwierzbowski
Collaborator
@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
Owner

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
Collaborator

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
Collaborator

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
Collaborator

Breaking some foundational tasks into their own issues:

@robwierzbowski robwierzbowski referenced this issue from a commit
@robwierzbowski robwierzbowski Re-organize media files and add simplified Yo wordmark
- Better organization of media -- source/ for vector source files, and
  optimized/ for files created from source files.
- Split character file into individual files with proper names
- Removed old unreverenced source files that aren't our responsibility to
  maintain
- Added simplified Yo wordmark from #113
76c9b26
@SBoudrias
Owner

Follow up on #191

@SBoudrias SBoudrias closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.