The Gitorious Facelift

For the past year, Gitorious has grown tremendously and we have seen an increase of over 1000 percent in both visitors and pageviews. We have added some new features and functionality and now, we have given Gitorious a solid facelift.

For the past three months we’ve been working on a redesign of Gitorious and we are really excited about launching it today.

First, let’s look at how a typical Gitorious page looks today.

The old Gitorious

And here’s the same page with the new design:

The new Gitorious

The design we’re launching today is not a complete overhaul of all the functionality and layout. We have given it a solid facelift, in addition to a new frontpage and a new signup/login page. It’s somewhere between what designers call a re-align, and a redesign. Let’s talk briefly about some of the key changes that we’ve done.

Key interaction changes

While there has been made many changes to the design, some of them will probably be more obvious at first sight than others. For example, we’re no longer working with a fluid, 100% layout. The layout is fixed, and we’ve pushed it to a 1100px-grid. This gives Gitorious a much more structured layout, improved usability and a platform that is much easier to design for.

Key changes

  • We have improved navigation between projects, repositories and your information by grouping navigational items consistently across pages. We’re confident these changes will make Gitorious easier to navigate and use
  • All the forms on the site have been restructured and redesigned.
  • Project and repository activities has gotten a new layout, making it easier to scan large amounts of information, much faster.
  • Defined the use of the sidebar, mainly for sub navigation and static information.

In general, chances are quite high that you’ll find the old information at the same spot, just better structured and looking a lot better.

A more distinct identity

One of the main objectives of this redesign is to strengthen the Gitorious brand and it’s identity. We’ve added more personality to the site and redefined the use of color and graphic elements. The Gitorious brand itself has also gotten a facelift. We’ve kept the cube, but strengthened the brand with more consistent use of typography and added a new main color to the brand. We hope that the new use of orange will make Gitorious more recognizeable and make us stand out more from our competitors.

The exterior

In addition to the facelift of the interior pages on Gitorious we have also redesigned the exterior. While the old front page was big and bold, we’ve gone even bigger. With our main goal being to give a better presentation and first impression of Gitorious, we also wanted to tell new potential users about things we’re proud of. A new feature list with new copy and descriptive icons, testimonials from our users as well as a fancy list of some projects we’re lucky enough to host. To keep you updated we also added a blog feed to the frontpage.

The new Gitorious exterior

The sign up and login forms have also gotten a complete overhaul to match the Gitorious exterior. We’re pretty sure you’ll be able to see the difference, even without your glasses on :-)

The new Gitorious exterior

An iterative design process

The reason we haven’t gone along and designed every part of Gitorious from scratch is simply because we strongly believe in an iterative design process and user feedback is of great importance to us. We will be listening to your feedback and monitoring site usage extensively in order to keep fine-tuning Gitorious to best serve you. Let us know what you think of the redesign, and also what you’d want us to do differently by commenting here or shooting us an email on the mailing list.

We’re proud to present the new Gitorious.

We hope this is the first of many steps to improving the way you use Gitorious.

32 Comments

  1. Zeke
    Posted May 19, 2010 at 1:56 pm | Permalink

    OOOOO looks very sexy

  2. Posted May 19, 2010 at 4:25 pm | Permalink

    The new design looks nice, but is a big step backwards in usability for me – the site totally fails to fit in a 960px window (half of a 1920×1080 screen), with the sidebar spilling way off and needing horizontal scrolling just to find things.

    Any possibility of a flexible web-friendly layout that works for developers with large screens and multiple windows?

    Thanks!

  3. Osmo Salomaa
    Posted May 19, 2010 at 6:35 pm | Permalink

    Overall, I’d say it looks rather nice. More modern than before.

    A couple details stand out though.

    (1) You seem to be using “Raleway” font for some headings (at least h2.content-header). I don’t have that installed, but webkit seems to replace it with a similar very thin font. It looks out of place and way too thin.

    (2) The cube logo, which has always been ugly and erroneous perspective-wise, now with the new colors and more modern look, stands out even more that before.

    (3) The header is way too tall considering vertical space used by the logo and Activities, Projects, Teams -navigation bar.

  4. Posted May 19, 2010 at 6:57 pm | Permalink

    Iv sent you and email before i found this post, but ill post here also. The site is to wide, about 76px too wide. I use a 15″ monitor and have the resolution 1024×768. But other then that, it looks awesome. Nice work!

  5. Ketmar
    Posted May 19, 2010 at 8:15 pm | Permalink

    tnx alot. please, somebody, tell me where can i found the site with gitorious functionality, but without such “fancy ubercool FIXED layout”?

    to gitorious team: good bye, and thanks for all the fish.
    your site was simply the best… until this change happens. thanks for the awesome service over all this years, but i have to leave now. i just can’t stand this new design, it is completely unusable for me due to it’s fixed width.

  6. Phil Lawrence
    Posted May 19, 2010 at 10:16 pm | Permalink

    The changes look nice, but the fixed layout is a skosh wide.

  7. Jacob Alexander
    Posted May 20, 2010 at 2:52 am | Permalink

    Markdown is broken in the Project description. For example, the use of bullet points. If the description is too long, and you click “Read More” the additional text will not include any bullet points.

  8. Yin Kangkai
    Posted May 20, 2010 at 6:35 am | Permalink

    For example, we’re no longer working with a fluid, 100% layout. The layout is fixed, and we’ve pushed it to a 1100px-grid.

    Please, don’t fix the width. I’m a developer, and normally I have several windows in my screen, and I don’t want the browser to take most of the part.

    Any possibility that I can have my own config setting and go back to the old look and feel? Thanks.

  9. Posted May 20, 2010 at 10:05 am | Permalink

    I also like the overall new look, but I agree the fixed width is definitely not nice. From a design perspective I can somewhat understand the decision, but please make it a maximum width then and don’t enforce a minimum width. CSS has appropriate properties for doing this.

  10. Mathias
    Posted May 20, 2010 at 10:33 am | Permalink

    Uch! The new layout looks like a mix of launchpad and OSX! I hate both! Sorry.

  11. Posted May 20, 2010 at 10:41 am | Permalink

    I wonder whether gitorious aims at winning design awards, or whether the goal is still to build a good collaboration platform.

    The fixed width is step back, as already mentioned.

    Then, the font spacing between code lines even got bigger – how is that supposed to be more readable?

    Commenting code/replying to comments is still not working right (e.g., you cannot close a comment box pressing “close”)

    The messaging system still doesn’t inform about all updates wrt. merge requests, nor do those messages contain a link to the merge request (only some do, I havent deciphered the pattern yet).

    Honestly, I really don’t care about how gitorious looks, I might even say that the old design was more functional, IMHO.

    So could the next “design iteration” please focus on features again? Thanks!

    A (still mostly content) gitorious user

  12. Ole Martin Kristiansen
    Posted May 20, 2010 at 10:56 am | Permalink

    First of all — thank you so much for taking time to give feedback. We can’t express how valuable it is to us, and we’re very serious about doing something with it.

    As I’ve written in the blog post above, this is not the final version of Gitorious. This is just one step out of many, and we’re very keen on making Gitorious even better.

    Most of the feedback we’ve gotten so far seems to be about the new fixed, wide width. We’ve discussed it quite a lot before the launch and again this morning. The reason we’ve decided to go from a fluid 100% layout to a fixed layout is ultimately we want to improve the way you use Gitorious and the way the content is presented. We understand that people use Gitorious in many different ways, in different resolutions and in different browsers with different window sizes and we definitely respect that, but designing (and I’m not talking about just making things look good) for a fluid layout immediately presents problems with readability, creating decent navigation patterns and defining consistent layout. We understand that this might seem weird, unusual and different, but we’re confident that the change from a fluid layout to a fixed layout will prove itself to be a great update, both in terms of design and usability. I would like to emphasize that nothing we do here is final and that we take all your feedback into consideration and that we have no trouble going back if we’re proven wrong.

    As for the actual width of the site we must admin we have been a little too ambitious. The reason we went ahead and did it in a 1100 pixel wide grid is simply because we felt the content of Gitorious got the best presentation with this width. It was enough space for tables, the different types of list, code and room enough for an informative sidebar. We originally decided on the wide layout based on the contents of Gitorious and backed the decision with analytics data. Unfortunately we failed to properly address the needs of those few percent of users with smaller displays or different browsing habits.

    As a result we’ve concluded this morning that we’re pushing out a an updated version of Gitorious with a new 960 pixel wide grid, suited for 1024 resolutions.

    We hope this change will be a step in the right direction of making Gitorious even better.

    • Posted May 20, 2010 at 10:41 pm | Permalink

      “As a result we’ve concluded this morning that we’re pushing out a an updated version of Gitorious with a new 960 pixel wide grid, suited for 1024 resolutions.”

      Thanks for the quick response, Ole! That’ll go a long ways towards keeping things usable for most folks.

    • Phil Lawrence
      Posted May 21, 2010 at 1:33 pm | Permalink

      > As a result we’ve concluded this morning that we’re
      > pushing out a an updated version of Gitorious with a
      > new 960 pixel wide grid, suited for 1024 resolutions.

      Thanks for the quick response! That change completely fixed my scrolling problem.

  13. matthias s
    Posted May 20, 2010 at 2:00 pm | Permalink

    while I understand the usefulness of fixed width on a ‘artistic’/informational site, I too have reservations on using it on a ‘developer’ site.

    Developers tend to have very specific requirements which always deviate from mainstream computer users. They want to be able to view a site on whatever browser/platform (including mobile), at any time, in whatever way.
    That’s why I think, in general, devs prefer a fluid layout: because it gives more control to the end-user (and they believe they need that).

    I like the new design, but it would have been nice if you wouldn’t be forced to fixed width..

    btw: note to people having trouble on small resolutions: if you use Opera, just click on the “fit to width” button and you’re all set :)

  14. Cedric
    Posted May 20, 2010 at 8:34 pm | Permalink

    Same remarks as everyone : as I appreciate the new look and colors, I also find the previous “100% width” design was easier to use. Having to use the horiz scroll bar is really painful.

    Having a site that’s as nice as G*th*b is nice, but having more functionalities would be even nicer.

    For instance, I’d like to be able to edit wiki pages from my host using git (both for versionning and as a replacement for the web GUI).

    Also, I’d like the merge requests to reopen when the review branch is still committed to (ie instead of using a boolean in your DB so tell if a merge request is closed or not, a merge request must be considered closed only if the last commit of the request branch was merged in, until the request branch is deleted.

    Also, I’d really like some code analyzing tools à la ohloh (tracking code size and complexity and numbers of contributors for instance).

    Anyway, thank you for this website and the free license you have chosen.

  15. Jaak Ristioja
    Posted May 21, 2010 at 3:37 pm | Permalink

    The new fixed-width layout wastes precious screen space (which developers usually value) and the colors are a bit too mild so I have to strain my eyes a bit more.

    The previous layout was one of the most best for this kind of website I’ve ever seen. Simple, solid, straightforward; moderately joyful with its color scheme and the straight corners and edges of most of its layout. I really liked it a lot!

    I don’t want to sound cruel, but in my opinion the new layout is quite dull in with its somewhat Web 2.0-ish look. Its seems to be too usual. Even a bit depressing. And this orange/reddish color on white/gray backgrounds – ugh! Green was way better. Brighter colors were way better. Those made me happy. :D

  16. Sean
    Posted May 22, 2010 at 7:56 am | Permalink

    Today, I was just explaining to a friend how i prefer gitorious website to github as it seems to have lots of interface bloat. I went to log in which so does look nice, but once logged in was met but but what looks like a blog, sure there commit logs etc are kinda a bit like a blog in nature but as stated above, full width was far better then trying to jam everything into a small space. If i wanted the site to take up less screen real estate, I would of resized my web browser window, and site basically defeats the purpose of having a widescreen monitor.

    That said I do like the design style.
    But the two problems to me is one it doesn’t take up the full screen any more, and two the header at the top is JUST to big, having the Dashboard, Logout links inside the header above the Activities, Project and team would be better.

    From some quick playing around it seems that there are bugs with the system its self.

  17. Posted May 23, 2010 at 6:16 pm | Permalink

    I’m not entirely sure I like this new design. On the one hand it seems that it gives me a much better overview of stuff. On the other hand, you’re wasting precious screen real-estate.

    My main concerns:

    # The header area seems too big.

    # The source tree view, especially the code view is abhorrent… waaaay too much space between lines of code.

    # When clicking on a line number, it just highlights it and nothing else. (Firefox 3.6.3 on Ubuntu 10.04)

    # I prefer a fluid layout since that lets me resize the screen without too much problems. Fine by me if you use a minimum width though.

    Apart from that, I sometimes get the feeling that Gitorious feature development has stalled? There are various bugs which need fixing and I’d love to see some new features.

  18. Posted June 1, 2010 at 7:28 pm | Permalink

    Usability fail for me. I am unable to copy-paste the git clone url from firefox into the terminal with middle mouse button. It seems to do some silly javascript trickery that prevents this.

    Appart from that, I think the contrast of the colors is a bit bad/confusing, at least on my monitor.

  19. jens
    Posted June 19, 2010 at 6:11 am | Permalink

    This is most properly not the perfect place for a feature request, but could you please consider adding “view history” on folder level? Currently you can only view the history of either a whole project or a single file which is somewhat inconvenient for bigger projects.

    Regards,
    jens

  20. Posted June 19, 2010 at 8:22 am | Permalink

    Little bug report, sorry:
    Empty commits (like linebreak changes) are always displayed as “initial commit” of a repository. This is obviously not true.

  21. Posted July 15, 2010 at 1:22 pm | Permalink

    The site looks great! Great job guys!

  22. Posted July 17, 2010 at 6:30 am | Permalink

    good done

  23. Posted July 25, 2010 at 8:15 pm | Permalink

    Very clean design, professional, and provides for a very easy navigation. There is no reason why you shouldn’t increase traffic and lower bounce rates when people hit your awesome new design. Keep up the great work

  24. michael
    Posted August 3, 2010 at 12:37 pm | Permalink

    Really, fixing the borken in-code comment system should have been your first priority. I always have to restart the browser (tried several) once it stops working. Cant you just have a javascript-free fallback comment system? Say, each line no. is a simple “post comment for this code line” comment? It does not look as if you were able to fix your borken Javascript stuff, so it might be best to go with a boring but robust solution.

  25. Esben
    Posted August 6, 2010 at 10:08 am | Permalink

    The good: it looks nice.

    The bad: the old design was way superior usability wise. The flexibility of the fluid design was valuable (and now missing), and the contrast for fx. comments are simply to soft and hurts my eyes. And the amount of vertical space “wasted” at the top reduces the amount of information available without having to grab the vertical scrollbar.

    As a developer site, I have a hard time understanding this tradeof. For gitorious users, it is a tool, and as such should have main focus on delivering an efficient tool interface, and only at secondary priority focus on eye candy.

    Please consider going back to fluid design and reduce the amount of pixel waste at the top of the site. More and more people will be wanting to use gitorious from mobile phones with limited screen size in both directions.

    As several other comments have mentioned, a developer site

  26. Posted January 5, 2011 at 9:52 am | Permalink

    lol some of the feedback many people distribute are so silly, in many instances i think about if they seriously read the information and reports before leaving a comment or if perhaps they just simply read over the titles and write the first thought that drifts into their minds. nevertheless, it is actually pleasing to browse through keen commentary occasionally rather than the identical, outdated blog vomit which i generally , discover on the internet goodbye

  27. Posted March 28, 2011 at 8:39 pm | Permalink

    It’s pretty nice, but the logo is awesome :)

  28. Rolf Purtill
    Posted March 12, 2012 at 4:00 pm | Permalink

    Rapidand competentservice, with tailor-made reveshare structure to suit my affiliate partnership with Affiliateyard.com – I validate100% that Affiliateyard.com is your future.

  29. Tara turner
    Posted August 5, 2012 at 1:37 am | Permalink

    Could someone please contact me from this company,there is a very serious problem that needs to be addressed now. Tt

  30. Posted March 31, 2014 at 8:46 am | Permalink

    Financial retribution in the form of fines can be effective, but the peculiarities of the justice system are such that the fines levied are often disproportionate (in either direction) to the gravity o


Post a Comment

Required fields are marked *

*
*

Follow

Get every new post delivered to your Inbox.

Join 711 other followers

%d bloggers like this: