A word from the designer

Gitorious went through some “rather big changes”=http://blog.gitorious.org/2009/05/09/weve-made-a-few-changes/ one month ago (11th. of May). Among them was the new relationship with “Shortcut”=http://www.shortcut.no/. And as a part of these new changes we are now going to do something with the graphical interface as well. We want Gitorious to look more like a complete product, with better focus on each page’s functionality. And, of course, we want it to look good.
This week Gitorious.org took it’s first step towards this new facelift. We started with the launching a new front page. Here it is!
<bilde: gitorious_screen.png>
At the first glance it may look completely different from the old one. But it’s not really, the content is the same. Our mission was to keep the content, just rearranging and redesigning it. Let’s go through the things we did.
Here’s how the front page has been for the last month. To the right you see how the content was laid out, in content sections from A to E.
<bilde: gitorious-design-1.png>
*A: Header* Menu bar, login, and our new logo.
*B: Main heading-area* Pay-off and New Account-link.
*C: Main content* List over the 25 recent activities.
*D: Secondary content* 6 lists, covering active projects, repositories, teams, and users.
*E: Footer* Menu bar, Terms, and policy.
And here’s how the new section lay-out turned out.
<bilde: gitorious-design-2.png>
Since it’s the _front_ page we wanted the main top area to include both the Gitorious-logo and the pay-off. And we wanted it big. So section A and B got combined, and we put a register button and a log in-box right in your face. This kind of front page (with the big, black header) is very suitable for more pages in gitorious, like your logged in-front page, a project’s front page etc. But most of gitorious.org will have a smaller header, like before.
The old page was full of lists (section C and D) with different purposes. Section A’s list was the 25 latest changes done in any project in Gitorious. There is allways a user doing something, and watching that list can be quite interesting. And even more important, it’s a great way of shoving the level of activity we have.
We wanted to keep the list, but make it stick out from the rest. We also found out that only the last few activities was a interesting read, and mainly the time-stamp. So we made a ticker-bar, shoving only the 8 latest. And to make it even more hasty it’s now dynamic, updating every time somethng happens.
In section D we had 6 lists:
* Active projects (last two weeks)
* Active projects (overall)
* Most active repository clones
* Active teams
* Active users
* Latest projects
It is cool to see who’s _king of the hill_, who is most active, and witch project, but these lists were killing each other. We wanted only three. The way we saw it, it’s all about users working on projects, so I was sure to have those two lists. (Cutting the three original project lists down to the last two weeks-one.)
To compliment them we went for teams instead of repositories. We hope that people would like to see themselves climbing on the lists on the front page. We want to appeal to their competitive instincts. And I think the teams-list is cut out for that (for those who appear on it). Teams like that, is also something we are very pleased having in Gitorious.
In the last section E, the footer, we haven’t done much at all. But there is a trend shift going on, in the world of footers (as you can see in this “Smashing Magazine-article”:http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/), so who knows what we’ll try there.
I hope you enjoy what we’re trying to do. If you have any comments or good ideas, please post them below.
Cheers
John Eivind, interaction designer

Gitorious went through some rather big changes one month ago (11th. of May). Among them was the new relationship with Shortcut. And as a part of these new changes we are now going to do something with the graphical interface as well. We want Gitorious to look more like a complete product, with better focus on each page’s functionality. And, of course, we want it to look good.

This week Gitorious.org took it’s first step towards this new facelift. We started with the launching of a new front page. Here it is!

gitorious_screen

At the first glance it may look completely different from the old one. But it’s not really, the content is the same. Our mission was to keep the content, just rearranging and redesigning it. Let’s go through the things we did.

Here’s how the front page has been for the last month. To the right you see how the content was laid out, in content sections from A to E.

  • A: Header. Menu bar, login, and our new logo.
  • B: Main heading-area. Pay-off and New Account-link.
  • C: Main content. List over the 25 recent activities.
  • D: Secondary content. 6 lists, covering active projects, repositories, teams, and users.
  • E: Footer. Menu bar, Terms, and policy.
  • gitorious-design-1

    And here’s how the new section lay-out turned out.

    gitorious-design-2

    Since it’s the front page we wanted the main top area to include both the Gitorious-logo and the pay-off. And we wanted it big. So section A and B got combined, and we put a register button and a log in-box right in your face. This kind of front page (with the big, black header) is very suitable for more pages in gitorious, like your logged in-front page, a project’s front page etc. But most of gitorious.org will have a smaller header, like before.

    The old page was full of lists (section C and D) with different purposes. Section A’s list was the 25 latest changes done in any project in Gitorious. There is allways a user doing something, and watching that list can be quite interesting. And even more important, it’s a great way of shoving the level of activity we have.

    We wanted to keep the list, but make it stick out from the rest. We also found out that only the last few activities was a interesting read, and mainly the time-stamp. So we made a ticker-bar, shoving only the 8 latest. And to make it even more alive it’s now dynamic, updating every time something happens.

    In section D we had 6 lists:

    • Active projects (last two weeks)
    • Active projects (overall)
    • Most active repository clones
    • Active teams
    • Active users
    • Latest projects

    It is cool to see who’s king of the hill, who is most active, and witch project, but these lists were killing each other. We wanted only three. The way we saw it, it’s all about users working on projects, so I was sure to have those two lists. (Cutting the three original project lists down to the last two weeks-one.)

    To compliment them we went for teams instead of repositories. We hope that people would like to see themselves climbing on the lists on the front page. We want to appeal to their competitive instincts. And I think the teams-list is cut out for that (for those who appear on it). Teams like that, is also something we are very pleased having in Gitorious.

    In the last section E, the footer, we haven’t done much at all. But there is a trend shift going on, in the world of footers (as you can see in this Smashing Magazine-article), so who knows what we’ll try there.

    I hope you enjoy what we’re trying to do. If you have any comments or good ideas, please post them below.

    Cheers

    John Eivind, interaction designer

    9 Comments

    1. Posted June 18, 2009 at 12:48 pm | Permalink

      Looking good. Though, I notice that once I’m logged in the look reverts to the old one.

      • Posted June 18, 2009 at 1:11 pm | Permalink

        @Matt: Glad you like it! We are going to work through the various pages one by one. The public home page was a natural first, the authenticated home page and beyond is in the works.

    2. Posted June 19, 2009 at 3:25 pm | Permalink

      It looks good to me but I have to say I do not like the idea of the scroll on the content: it makes the browser unbelievelable slow.

      • Posted June 22, 2009 at 7:43 am | Permalink

        Can you tell me more about your system, so that I can look into why it’s being slow? I have only tested the scrolling on my co-workers’ new and shiny machines, where the scrolling doesn’t cause any slow-downs, so I can’t immediately think of anything that causes the lag.

        Feel free to e-mail me on august.lilleaas@shortcut.no.

        • Nathan
          Posted July 14, 2009 at 3:40 am | Permalink

          I have the same problem the scroll bar maxes out 2 cores on a Q6600 using FF 3.5 and makes the whole browser slow to a crawl

    3. Daniel
      Posted July 2, 2009 at 7:09 am | Permalink

      I can confirm the slow speed of the redesigned homepage.My system is an Intel Dual Core 2,4Ghz with 6GB RAM.

      The scroller is flickering pretty heavy, and its rather moving like an old granny.

    4. Posted July 14, 2009 at 6:36 am | Permalink

      To all of you with speed problems caused by the scrolling bar. We are taking it away. It seemed like a good idea at the time, but a responsive browser and speed in general must be our priority.

      Thank you for the feedback. Please feel free to comment on all future visual updates as well.

    5. Posted February 27, 2011 at 5:41 pm | Permalink

      I hope this blog is still active. I see it resides in a folder for 2009. However, a great blog for web layout design. If you need help in web design layouts or questions of any kind for web design, Colorado Web Design can help.

      - KP Colorado Web Guy

    6. Posted April 7, 2011 at 6:54 pm | Permalink

      Love the new look of the site, great work keep it up!


    One Trackback

    1. By web developer on June 27, 2009 at 3:10 pm

      web developer…

      The drive stopped responding on my network this morning. This sent me into a panic. I reset the device and it started responding again for about 10 minutes then fell off the network again. This repeated about 4 times before I finally called it a failur…

    Post a Comment

    Required fields are marked *

    *
    *

    Follow

    Get every new post delivered to your Inbox.

    Join 711 other followers

    %d bloggers like this: