Thanks for blogging this. I like the overall changes of your refactor, but there are a few minor nitpicks:
- Why did you change "Star" and "Fork" to "Stars" and "Forks"? The before and after have different meanings.
- The colour bar is missing from your final design. You mentioned in a comment that you forgot to add it and then added it, but I still don't see it :).
- The right side navigation section is prematurely cut off at "Settings".
- Your "Clone" and "Download" buttons could use some more whitespace between the text and icon.
1. Ah yup that's true. The part of the "star" button that I was focused on was removing the "unstar" word since I find it really confusing. I'd rather use a depressed button to signify that I've starred something. But yup, removing the s's would be good.
2. Nope didn't forget it. My final design isn't "final", it's just at a point in the refactoring. The next step would be to figure out how to add in more of an identity to each repo. I tried to mention this towards the end of the article when talking about the background image idea.
3. It's hard to show in a flat mockup, but the idea for that would be that hovering it would have an animation that slightly dropped the divider down, and clicking would open it all the way. But it could totally be an over-optimization, in which case the 3-4 extra list items could just always be visible.
4. Ah, I just took the same style as GitHub. (Actually one of the cool parts of the refactor process was that GitHub's markup is so self-evident that lots of the pieces were made by just changing class names and then re-screenshotting the GitHub interface itself.)
- Why did you change "Star" and "Fork" to "Stars" and "Forks"? The before and after have different meanings.
- The colour bar is missing from your final design. You mentioned in a comment that you forgot to add it and then added it, but I still don't see it :).
- The right side navigation section is prematurely cut off at "Settings".
- Your "Clone" and "Download" buttons could use some more whitespace between the text and icon.