Grumpy Website

 

Following up on my previous post on Github navigation problems grumpy.website/post/0Q0xKAK_f I redesigned the UI to get rid of most glaring problems (click on a picture to open it in full resolution):

0. Page has clear hierarchy now. There’re tabs, then a row of code actions, then the code itself. Easy to understand & remember on a top level, more details when you dig deeper.

1. There’s only one level of tabs instead of two nested ones. That makes it easier to navigate from anywhere in the repo to exactly the page you need in just one click.

2. Contextuality was fixed. Repo description, link and topics were moved above the tabs because those are repo-related, not code-related.

3. File-related actions (Switch branch & Find file) were moved to file browser panel for the same reason.

4. Languages statistics bar is not a separate bar anymore, it was moved to the code panel as well. Because it’s about the code, you see? It also used to visually split the page in two halves, that was fixed too.

5. Buttons are grouped into two clusters (code one and repo one) instead of four. No need to scan all over the page looking for a button you need.

6. Buttons are used only for actions. E.g. find file is now just a search field, not a button.

7. Clone URL is back! I hated it when they hid it away. Now it’s available immediately, with a combo to switch to different options.

8. New navigation is 1.5 times smaller than the old one (200px vs 300px). It means you can actually see code above the fold.

9. The only thing that didn’t fit here is the number of collaborators. That’s still avaliable in Insights/Collaborators, as before.

10. What about icons? Yeah, Github loves icons, even when they don’t bring much value. I removed icons from tabs because they were mere decoration there. Everybody was looking at the tab text anyways (note how icons were muted in comparison to the text). So basically I just removed noise and made everything cleaner.

A version with full details (owner controls, popups, fork, topics) here s.tonsky.me/grumpy/github_redesigned_full@2x.png