• Recent UI updates to GitHub

    kneath 8 Nov 2009

    On my first day at GitHub, I asked the crew what they wanted to me to do around here. Their response was something along the lines of "make GitHub sexy" Now that we've been rolling out steady UI updates for about a month, I thought I'd take some time and go over what all I've been working on.

    I previously covered the updated dashboard repository lists and gist improvements, but I haven't had a chance to go over the new userbox, profile pages, account pages, and dashboard headers.

    New userbox

    The new userbox was rolled out to solve a problem we had -- people with long usernames were breaking the UI, forcing links into the next line. I also took the time to reorganize the navigation and spruce up the look & feel.

    New profile pages

    The new profile pages were one of the first purely cosmetic updates to the site. You'll notice a new style of page header being rolled out. This header does have some functional benefits -- but they're subtle. On pages that are yours, you'll notice a slight yellow highlight. This isn't terribly useful right now, but as we roll out new features you'll see why I'm going this route.

    I was also testing out the waters with this page. GitHub has an extremely particular and vocal audience that doesn't represent the typical web user. I wanted to make sure that the general reaction was positive. Judging from the twitter updates and in-person feedback I've gotten, people seem to like the changes -- so you'll see more of this style around the site in the future.

    New Account Settings Pages

    Along with the new profile pages, we also rolled out updated account settings pages. Previously, you had to edit your profile information in-place on the profile page, but now it's grouped with the rest of your settings.

    New billing page

    Previously all of the billing information was crammed into a little grey box in the upper right of the account settings page. With the updated account settings page I decided to create a dedicated billing page. This page shows your plan usage in an easier to access manner and (hopefully) makes it easier to upgrade to paid accounts! :)

    New dashboard headers

    The last update we've rolled out are new-style dashboard headers. The reason for these aren't entirely obvious right now -- but in time they will become a lot more useful. I realize these new headers do push down the repository lists by about 60px, but it was a compromise that I decided to make to give us room for the future.

    Hopefully you guys are enjoying the evolution of the GitHub interface, I've been having a blast watch the feedback pour in after each push.

  • Comments

    dvyjones Mon Nov 09 12:32:50 -0800 2009

    Cool, I really like the new interface. I think you're moving the right direction towards making GitHub sexy :) Keep on going like this!

    hammerdr Mon Nov 09 12:51:39 -0800 2009

    Agreed. It's all been positive thusfar!

    futuremint Mon Nov 09 12:58:38 -0800 2009

    Thanks! Github is getting more and more pleasant to use every day. I'm glad to see stuff improving with the cash from my tiny little paid account :)

    darwin Mon Nov 09 13:27:23 -0800 2009

    Good stuff!

    matthooks Mon Nov 09 13:28:08 -0800 2009

    Dig it.

    kiwinewt Mon Nov 09 13:45:25 -0800 2009

    I think one of the positive is that it was such a natural UI progression that I didnt actualyl notice it at all. I mean yeah, I thought "ooh, that looks good" then kept on working - this is a success in my books and can't wait to see more! :D

    dvyjones Mon Nov 09 13:55:56 -0800 2009

    I agree with @kiwinewt, everything feels natural, and more pleasing, but nothing completely new or something that doesn't fit at all. Can't wait to see what new features you're referring to :D

    jaywilliams Mon Nov 09 15:16:20 -0800 2009

    The improvements are wonderful! Keep up the great work!

    jonmagic Mon Nov 09 16:46:11 -0800 2009

    Love the changes so far. Are you guys thinking about replacing the famfamfam-ish icons?

    kneath Mon Nov 09 17:27:23 -0800 2009

    @kiwinewt, @dvyjones Thanks! Thats's been one of my biggest goals. GitHub doesn't need to change, just evolve.

    @jonmagic I'd love to, but in perfect honesty I'm just not that great of an illustrator, so it may take some time before I settle on a new icon set that's better than what we have now.

    ap Mon Nov 09 23:17:53 -0800 2009

    I saw the changes when they were rolled out, and though “finally!” Previously github’s look was fine but a little slapdash… now the pages really come together. Thumbs up!

    mtodd Mon Nov 09 23:37:05 -0800 2009

    @kneath You've done a stellar job evolving the design elements; everything feels far more cohesive and better organized, and I can see the extra room you're putting in to allow for additional features while minimizing clutter and junking up the UI.

    Great job.

    Also, Stafftools sounds fun :)

    dbloete Mon Nov 09 23:52:44 -0800 2009

    Keep up the good work!

    JimNeath Tue Nov 10 00:16:19 -0800 2009

    Looking more awesome by the day. Keep up the good work, Kyle.

    rtomayko Tue Nov 10 00:20:09 -0800 2009

    You're a machine.

    geoffgarside Tue Nov 10 14:04:16 -0800 2009

    You've done a fantastic job, I love the changes.

    toolmantim Tue Nov 10 22:35:46 -0800 2009

    You are a machine. Keep on cranking, awesome work mate.

    mwlang Thu Nov 12 10:04:35 -0800 2009

    Looking great. How about fixing that pull request dialog to put all those names into two or three columns instead of one long column. Popular projects have a LOOOONG list of contributors that the dialog offers up for sending pull requests to.

    erikreagan Sun Nov 15 09:20:01 -0800 2009

    I love all of the UI updates that have been made. Keep up the great work!

    Please log in to comment.