Say hello to Octicons(github.com)
github.com
Say hello to Octicons
https://github.com/blog/1106-say-hello-to-octicons
139 comments
Completely agreed. The icons are not only excessively detailed for their small size, but also sit rather awkwardly in relation to the rounded-rectangle container. The top right corner of every Github page now looks like the notification area of an old Linux desktop with an amateur-designed theme.
Every minor redesign Github has released over the last couple of years increasingly reek of "designed by programmers". But Github deserves better than that. Please get real designers.
Every minor redesign Github has released over the last couple of years increasingly reek of "designed by programmers". But Github deserves better than that. Please get real designers.
The redundancy is a little irritating.
I could tell what buttons did simply from the text (and they were useful) e.g 'unwatch', 'your fork' etc. Now there's more space taken up with the text and the icon.
The icons don't seem to provide additional info in any way. Perhaps that's because Github would like to switch from text to icons eventually (with text+icons in the interim)? I hope not, as it would mean way too many things for people (esp novices) to get their heads around.
I could tell what buttons did simply from the text (and they were useful) e.g 'unwatch', 'your fork' etc. Now there's more space taken up with the text and the icon.
The icons don't seem to provide additional info in any way. Perhaps that's because Github would like to switch from text to icons eventually (with text+icons in the interim)? I hope not, as it would mean way too many things for people (esp novices) to get their heads around.
> Perhaps that's because Github would like to switch from text to icons eventually?
Like Gmail's new icon-only interface? I hope not! It's difficult enough for people to figure out what Gmail's icons represent.
Like Gmail's new icon-only interface? I hope not! It's difficult enough for people to figure out what Gmail's icons represent.
You can set Gmail's Button labels to "Text" under Settings -> General.
I'm still pissed that Gmail's icon redesign wastes tons of space and is only marginally better when I put it in compact mode. I'm on a 14" laptop here, not all of us are carrying around 22" monitors in our pockets!
Well, the differences between them are quiet significant! Gmail's icon are too horsey.
In addition they changed the private repo indicator so it's no longer a very obvious yellow background, but a single label that says "PRIVATE".
It was actually useful to have a very obvious indicator that your repo was private and nobody else could see it.
It was actually useful to have a very obvious indicator that your repo was private and nobody else could see it.
Can you tell me what other redesigns Github has done feel undesigned? I personally think Github has a pretty great design team.
Just off the top of my head, stacking row upon row of toolbars and metadata on top of every repository, so the first real file is actually 500px down the page. Also, excessive use of icons where text labels would be much clearer, as other commenters have said.
There were several posts on HN over the last couple of years where people complained about these and other issues.
There were several posts on HN over the last couple of years where people complained about these and other issues.
I think people on HN complain way too much about Github's design. Sure you can nitpick this stuff, but Github has always had above-average design. Your comment about design-by-programmer is not really warranted in the context of the monstrosities that the term originally applied to. If you want to hold Github to a higher standard because they have such a great product then fine, but there's no need to be so disparaging.
Github's design is not and has never been terrible. And furthermore, hiring a "real designer" will not solve the problem because the core issue is that Github is a complex product; throwing a designer in there who doesn't understand the nuances of how git is used in the wild is not going to help. There are many different audiences and many different conflicting problems to be solved. The reason there's so much meta information stacked at the top is because the meta information is more commonly used then the file contents in most cases. I agree it's not the most intuitive, but on the other hand there's not an obviously primary role for this page and things are reasonably well organized and delineated based on purpose. I've used almost every single link there and there's not much that doesn't deserve to be front and center.
As for the icon redesign, they are trying to establish a visual language so that the masses of information they are publishing are more readily digestible. This is not something that happens overnight, instead you have to use the icons for a while before they sink and start to pay dividends. I'm not saying Github is successful, but I think people on HN and indeed the Internet in general are way to quick to criticize redesigns based on first impressions.
Github's design is not and has never been terrible. And furthermore, hiring a "real designer" will not solve the problem because the core issue is that Github is a complex product; throwing a designer in there who doesn't understand the nuances of how git is used in the wild is not going to help. There are many different audiences and many different conflicting problems to be solved. The reason there's so much meta information stacked at the top is because the meta information is more commonly used then the file contents in most cases. I agree it's not the most intuitive, but on the other hand there's not an obviously primary role for this page and things are reasonably well organized and delineated based on purpose. I've used almost every single link there and there's not much that doesn't deserve to be front and center.
As for the icon redesign, they are trying to establish a visual language so that the masses of information they are publishing are more readily digestible. This is not something that happens overnight, instead you have to use the icons for a while before they sink and start to pay dividends. I'm not saying Github is successful, but I think people on HN and indeed the Internet in general are way to quick to criticize redesigns based on first impressions.
Also, excessive use of icons where text labels would be much clearer, as other commenters have said.
As a non-designer, I always use text labels in my applications because I can't make good graphics/icons, but it always seems like the applications lack polish because of it. I guess there is a happy medium to be found between no icons and the strict only-ambiguous-icons like Google switched to with Android 4 and their recent web property redesigns.
As a non-designer, I always use text labels in my applications because I can't make good graphics/icons, but it always seems like the applications lack polish because of it. I guess there is a happy medium to be found between no icons and the strict only-ambiguous-icons like Google switched to with Android 4 and their recent web property redesigns.
Interestingly it seems that "real designers" are whomever you like the most. It seems mostly to be a matter of taste.
I have to upvote this unfortunately. I visited the Github site this morning for the first time in a while, and encountered the new icons. The new book, notifications, and door icons were not immediately obvious to me and I had to hover over to see what they were. I guessed what the wrench represented, but due to the uncertainty caused by the other icons, I had to double check what it was for as well. I actually didn't even realize that the icon with a "+" on it was a book.
>So not to sound like a complete ass, here's what I would've used instead - a gear for preferences, a "power off/on" symbol for logout, a simple blank page with a plus sign for "new", some sort of inbox or even an envelope for "notifications". Just keep it simple and don't overthink
Great point, especially about using + for new. They don't need to abstract the concept of a repository, they just need to abstract the concept of the Create/New action.
Their users will of course know it means to create a new repository, rather than a MS Word Document, email, sandwich, or whatever, simply based on context.
They've gotten into their heads that they need to create a new design language for version control concepts. And perhaps that's true for the Fork and Merge buttons, which are actions unique to version control, but not for everything. Create, Logoff, Notifications, etc. are not unique to version control at all. Just reuse what everyone is familiar with for those.
Great point, especially about using + for new. They don't need to abstract the concept of a repository, they just need to abstract the concept of the Create/New action.
Their users will of course know it means to create a new repository, rather than a MS Word Document, email, sandwich, or whatever, simply based on context.
They've gotten into their heads that they need to create a new design language for version control concepts. And perhaps that's true for the Fork and Merge buttons, which are actions unique to version control, but not for everything. Create, Logoff, Notifications, etc. are not unique to version control at all. Just reuse what everyone is familiar with for those.
It's unfortunate, because from a technical and aesthetic standpoint, these icons are mostly rock solid, and they deserve some praise for that.
But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure. Let's hope they're ready to use that technical prowess to iterate.
But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure. Let's hope they're ready to use that technical prowess to iterate.
But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure.
From a human/usability standpoint, most icons used in user interfaces are failures.
Not sure you believe me? Quick! Name five icons you often use in a piece of software you use regularly: your browser, IDE, spreadsheet, graphics package, whatever.
Now name five more.
If you’re like most people, you probably came up with the first five easily enough. Back, refresh, stop, home, forward. Save, print, bold, cut, paste. But by the time you were getting toward ten, were you starting to struggle?
Now consider that many of these applications line up rows of 10, 20, or even more icons, which all look rather non-descript and blurry at typical sizes anyway. Some applications have several such rows, some at different sizes, some horizontal, some vertical. That’s an awful lot of screen space for something that most users won’t use, at least not without doing the mouse-hover-tooltip-no-it’s-not-that-one-maybe-it’s-the-one-over-there thing.
Oh, and here’s the kicker: of the icons that do get widely used, only a tiny number are truly iconic pictures that are recognisable! A lot are just an arbitrary marker in a predictable position, and it’s that context that the user recognises.
From a human/usability standpoint, most icons used in user interfaces are failures.
Not sure you believe me? Quick! Name five icons you often use in a piece of software you use regularly: your browser, IDE, spreadsheet, graphics package, whatever.
Now name five more.
If you’re like most people, you probably came up with the first five easily enough. Back, refresh, stop, home, forward. Save, print, bold, cut, paste. But by the time you were getting toward ten, were you starting to struggle?
Now consider that many of these applications line up rows of 10, 20, or even more icons, which all look rather non-descript and blurry at typical sizes anyway. Some applications have several such rows, some at different sizes, some horizontal, some vertical. That’s an awful lot of screen space for something that most users won’t use, at least not without doing the mouse-hover-tooltip-no-it’s-not-that-one-maybe-it’s-the-one-over-there thing.
Oh, and here’s the kicker: of the icons that do get widely used, only a tiny number are truly iconic pictures that are recognisable! A lot are just an arbitrary marker in a predictable position, and it’s that context that the user recognises.
The strength of icons lies in recognition, not recollection, so your experiment doesn't prove anything. Essentially, I have no idea off the top of my head what the <arcane image processing tool> icon looks like in Photoshop, but put me in front of an open Photoshop and I'll recognize it in a split second.
A lot of this has to do with placement, yes, but I'm sure even without that, you can scan a mass of icons much more easily than a mass of text.
A lot of this has to do with placement, yes, but I'm sure even without that, you can scan a mass of icons much more easily than a mass of text.
My comments aren’t based on a quick thought experiment alone. There’s a substantial body of empirical data showing that icons aren’t always as good a UI choice as their popularity might suggest. For example, see:
http://uxmyths.com/post/715009009/myth-icons-enhance-usabili...
http://uxmyths.com/post/715009009/myth-icons-enhance-usabili...
I dunno. They look fine to me. The book will take a bit of getting used to (what icon would better represent a repository anyway?). The rest just sounds like nit-picking.
The technical implementation is interesting, but from a usability perspective, I found these icons to be pretty terrible
FWIW, the icons you have problems with have always been in use on Github.
No, they haven't. GitHub only recently changed their top toolbar layout to include those icons, and today expanded them with even more indistinguishable-at-a-glance ones.
Agreed. I use 16px icons in my projects. Comparing these icons to the Glyphicons I'm using currently, the glyphicons are vastly more clear, especially at the smaller size.
I don't like em either, but they're giving me free icons I can use for my website, so I'm all good!
Sorry, but I don't think they're giving you free icons to use for your website.
The article says Octicons are "a custom icon font for use on GitHub.com and GitHub products". In their companion Making Of post, they answer a question about licensing [1] by saying "The font is for GitHub use only." [2].
[1]: https://github.com/blog/1135-the-making-of-octicons#comment-...
[2]: https://github.com/blog/1135-the-making-of-octicons#comment-...
The article says Octicons are "a custom icon font for use on GitHub.com and GitHub products". In their companion Making Of post, they answer a question about licensing [1] by saying "The font is for GitHub use only." [2].
[1]: https://github.com/blog/1135-the-making-of-octicons#comment-...
[2]: https://github.com/blog/1135-the-making-of-octicons#comment-...
Does it matter if they're free if you don't like them?
I have Firefox configured to force the same font face across all sites (I love the consistency this gives me, and also some some sites are extremely abusive in their font selection) so this doesn't work for me. The "icons" show up as unknown Unicode characters. Not cool.
This seems like the wrong approach - shouldn't characters have semantic meaning? It also doesn't seem accessible. Screen readers wouldn't know what to do with these invented characters. <img> tags at least have the alt attribute.
This seems like the wrong approach - shouldn't characters have semantic meaning? It also doesn't seem accessible. Screen readers wouldn't know what to do with these invented characters. <img> tags at least have the alt attribute.
I've given it some thought and GitHub should be able to make this more accessible by doing something like this:
<span class="mini-icon notifications"><span>Notifications</span></span>
.mini-icon.create:before {
content: "\f030";
}
.mini-icon span {
display: none;
}
I think screen readers actually respect display:none. I believe the preferred solution is to use a large, negative text-indent.
That's why you use media queries to set display: none only for non-screen readers.
Of course, screen readers might not respect that, in which your solution would work.
Of course, screen readers might not respect that, in which your solution would work.
I like this rather new solution, which actually works in older browsers including IE7 if you happen to need to support that. Still uses text-indent, but pushes it right instead of left and sets overflow hidden to hide it.
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...
So you force a behavior through your browser but when it doesn't work you blame the site? Ok...
Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them.
Hopefully the 'create' one uses f003, which apparently lies in PRIVATE_USE_AREA [0]
Hopefully the 'create' one uses f003, which apparently lies in PRIVATE_USE_AREA [0]
.mini-icon.create::before {
content: "\f003";
}
All the icons lie in private use areas, specifically to avoid abuse.
Abuse?
As stated by the grandparent:
> Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them
> Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them
The alternative is having sites select fonts that hurt my eyes. I want a consistent experience across the web.
That's like wanting all cars on the road to be red :)
No. It's like expecting that when I adjust my seat to fit my leg length, the doors still work. I like the text to be readable without me leaning in and destroying my vision.
The fact that I'm forced to override font sizes for usability because sites don't respect my default settings is bad enough. When they break because of it, it becomes terrible design.
The fact that I'm forced to override font sizes for usability because sites don't respect my default settings is bad enough. When they break because of it, it becomes terrible design.
+1 on the font size - that's a big problem in particular if you happen to have a large screen.
But forcing everything into the same font seems a bit excessive; I've actually seen a couple of sites make really nice use of fonts, and you can still install an extension that turns your page into an "easy reading" mode on a key press.
What do you do about fixed width vs proportional fonts?
But forcing everything into the same font seems a bit excessive; I've actually seen a couple of sites make really nice use of fonts, and you can still install an extension that turns your page into an "easy reading" mode on a key press.
What do you do about fixed width vs proportional fonts?
I'm not the original poster, but I also force my browser to render in a particular font (specifically, same font used in the rest of my desktop applications).
In my experience, I'd say about 0.5% of pages are fancy demos of things you can do with web-font support, 1% of pages use custom web-fonts but look just fine without them, and 0.1% of pages are like GitHub where they actually require a custom font. Everything else uses some "web safe" font, and often very little care is given to selecting which one. Forcing everything into the same font is an excellent solution for the 98.4% of sites that don't use custom fonts, and an decent solution for 99.4% of sites.
It should be noted that most of the "easy reading mode" extensions only work well for article-type pages, not for sites like Hacker News or Reddit.
In my experience, I'd say about 0.5% of pages are fancy demos of things you can do with web-font support, 1% of pages use custom web-fonts but look just fine without them, and 0.1% of pages are like GitHub where they actually require a custom font. Everything else uses some "web safe" font, and often very little care is given to selecting which one. Forcing everything into the same font is an excellent solution for the 98.4% of sites that don't use custom fonts, and an decent solution for 99.4% of sites.
It should be noted that most of the "easy reading mode" extensions only work well for article-type pages, not for sites like Hacker News or Reddit.
> forcing everything into the same font seems a bit excessive;
Worst case seems to be that you go to a site and it's not quite as pretty as it might be, but still perfectly readable. I'd take that in exchange for not having to press a button to make a site more readable.
Can you give examples of the sites you're thinking of?
edit - that should be "worst case provided sites aren't using fonts to display nonstandard icons".
Worst case seems to be that you go to a site and it's not quite as pretty as it might be, but still perfectly readable. I'd take that in exchange for not having to press a button to make a site more readable.
Can you give examples of the sites you're thinking of?
edit - that should be "worst case provided sites aren't using fonts to display nonstandard icons".
All browsers I've seen that allow you to override settings allow you to do it by family (sans, serif, fixed, etc)
Sorry but seeing as Chrome remembers which sites you zoomed in on every time you go back to them, font-size isn't a good argument for completely changing the font on websites.
You have to click Cmd-+ once in a while to zoom in on pages that are made by idiots.
You have to click Cmd-+ once in a while to zoom in on pages that are made by idiots.
I agree wholeheartedly. I have a solution that I've been using for years - a stylesheet that overrides everything. I just got tired of having to adjust to different fonts and color schemes for each website. After years of using computers for 8+ hours a day I have settled on the perfect (for me) combination of color, contrast, font styles and sizes, button styles, link styles, etc., and that's what I want to see. If that's not enough I have a Scriptish script that formats any page to my specification with a keypress.
I actually think this is the future of browsing (at least for people who do a lot of reading in-browser). Books that used non-standard fonts and colors would be laughed at (say, Papyrus on a beige background for body text), but just because it's easy to go wild with websites doesn't mean people should do it.
I actually think this is the future of browsing (at least for people who do a lot of reading in-browser). Books that used non-standard fonts and colors would be laughed at (say, Papyrus on a beige background for body text), but just because it's easy to go wild with websites doesn't mean people should do it.
It's more like expecting all cars to be narrow enough to fit in lanes or expecting all cars to have turn signals and brake lights. Type face has a huge impact on how readable text is, car color has almost zero impact on my ability to drive.
Fonts are not behavior. When the web was made of pages and style was secondary to content, this wasn't a problem.
The site uses a font choice to change how the site works, which is pretty much conflicting with the entire concept of a style sheet.
Err, yes, I do blame the site for abusing HTML. If they misuse text markup to represent what is semantically an image, how is that my fault? HTML has <img> for a reason. There's perfectly suitable markup for text and another for images: using the former for the latter is no less idiotic than doing it the other way around.
This fad is supremely annoying.
This fad is supremely annoying.
So if, say, an older user forces all text to be large and it renders a site unreadable, you would blame the user?
Why would an older user want to enlarge text only, and not the images and other page elements? He wouldn't. He would be using either Ctrl-+ in the browser or an OS-level zoom.
The first thing I enable in Safari is View->Zoom Text Only. Just because you prefer whole-page zoom doesn't mean the rest of us does too. I use zooming only when a page has unreadably small text size, in which case I enlarge it to be readable and do not want to scale up and uglify images that are usually perfectly fine in their original size.
<img> tags at least have the alt attribute.
And <a> tags have the title attribute.
And <a> tags have the title attribute.
<img> has the title attribute too, but title is meant for displaying additional information via a tooltip. alt is for alternative text to be used in place of the image.
Does any screen reader actually read the value of a title attribute on a link containing text? I doubt it. Instead it would descend into the <a> tag and try to read the text therein.
Does any screen reader actually read the value of a title attribute on a link containing text? I doubt it. Instead it would descend into the <a> tag and try to read the text therein.
Actually the title attribute is used to annoy users who have their mouse cursor on the page by displaying exactly the same text again that's already in the link or para.
At least in 90% of the cases I've seen it used, probably by some overzealous OCD person wanting to fill in _all_ the attributes.
At least in 90% of the cases I've seen it used, probably by some overzealous OCD person wanting to fill in _all_ the attributes.
If CSS and browsers weren't so broken and there was a convenient, semantic alternative, I'm sure github would have used that instead. Unfortunately icon fonts are one of the most convenient and compatible 'hacks' to render vector icons in the current climate.
In a perfect world you'd be right, or perhaps even in a world where IE hadn't held the entire Internet back 10 years.
In a perfect world you'd be right, or perhaps even in a world where IE hadn't held the entire Internet back 10 years.
What GitHub needs is a 'like' button, not new icons (so we don't have to `watch` projects we find interesting and want to somehow remember just in case - which results in thousands of commits and pushes (every hour) in our news feed we absolutely don't care about).
Agreed. The signal to noise ratio in my newsfeed is very low because of it. There exists some workarounds (e.g. https://www.codeshelver.com) but I'd like to see GitHub fix the problem.
I didn't know about CodeShelver! Thank you.
I'll give it a try in a few days, but just a question: what happens if www.codeshelver.com dies tomorrow (assuming they save shelved repos on their server) or their Safari extension be buggy and it removes/corrupts all my precious repos (assuming it's the extension that saves the repos)? Will I lose everything?
I'll give it a try in a few days, but just a question: what happens if www.codeshelver.com dies tomorrow (assuming they save shelved repos on their server) or their Safari extension be buggy and it removes/corrupts all my precious repos (assuming it's the extension that saves the repos)? Will I lose everything?
I can't answer your question because I don't know about the inner workings of CodeShelver, but it's safest to assume you would lose everything (going off the assumption that they store the info on their own servers).
You should also check out Gitmarks. Someone posted the link in a reply to my earlier comment.
You should also check out Gitmarks. Someone posted the link in a reply to my earlier comment.
Codeshelver looks nice. I have been using Gitmarks for a while and its amazing.
https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...
https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...
Thanks for the link, Gitmarks looks nice as well.
Agreed. A nice "bookmark" feature. I think a book would be a great affordance for bookmark but that seems to be taken already by "new repository"
[workaround] Use gitmarks: http://farmckon.github.com/gitmarks_2/
Amusingly, it is the same behavior as the Facebook like button, except that Github's feed algorithm doesn't filter out things you likely don't care about.
I'd like to see something similar to Ohloh's "Uses This" feature.
Why isn't this SVG? Font icons are only applicable when there is actually an appropriate corresponding Unicode character for the icon, as text is supposed to be selectable/copyable, and display fine (albeit in a different typeface) if I turn off web fonts and have full Unicode coverage. Some of the icons that Github implements are in Unicode, yet they don't even use the characters for those.
For an example of when it's appropriate to use a custom font for an icon, I use a custom font for U+1F50D Left-Pointing Magnifying Glass in the search button on my website. Github uses U+F22E [INVALID] instead for their search icon.
For an example of when it's appropriate to use a custom font for an icon, I use a custom font for U+1F50D Left-Pointing Magnifying Glass in the search button on my website. Github uses U+F22E [INVALID] instead for their search icon.
> Why isn't this SVG?
SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).
SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).
Every major current generation browser and last generation browser supports SVG images except IE 8. So IE 8 users just wouldn't see the icons - not a big loss since I suspect IE 8 users make up a tiny amount of the user base.
There are pollyfils to degrade SVG into VML or een flash for ie8, ie7 and ie6.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
I don't mean that it's pretty. I'm just saying that it's possible
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
I don't mean that it's pretty. I'm just saying that it's possible
I appreciate that these will scale better than images, but I never grokked the icons in the top right corner. To me, a repository isn't much like a "book", and I still remember hunting for the "log out" link in frustration before realizing it was the door with an arrow. Since you've pretty much pegged the header at ~900px wide, I still think text links would be more usable and you have the horizontal room for it.
That being said, since it seems like you're incorporating these metaphors into other parts of the site--like I notice the book icon by the repo name now--maybe the metaphors will eventually stick. But in the meanwhile it has been a little confusing.
That being said, since it seems like you're incorporating these metaphors into other parts of the site--like I notice the book icon by the repo name now--maybe the metaphors will eventually stick. But in the meanwhile it has been a little confusing.
Some of the icons on our site have been the same since we launched 4 years ago.
Hmm. Icons aren't like underwear in needing to be changed regularly.
Further, I'm not immediately able to interpret many of the visuals. E.g. With some hovering effort, I see that right arrow away from a book supposed to stand for "Log Out" and, oh, it's an open door, not an open book. Not sure if these were meant to be shared (license?) but those so interested should be sure to checkout Font Awesome too.
I do love GitHub. New icons? Meh.
Hmm. Icons aren't like underwear in needing to be changed regularly.
Further, I'm not immediately able to interpret many of the visuals. E.g. With some hovering effort, I see that right arrow away from a book supposed to stand for "Log Out" and, oh, it's an open door, not an open book. Not sure if these were meant to be shared (license?) but those so interested should be sure to checkout Font Awesome too.
I do love GitHub. New icons? Meh.
Haha, that's along the lines of what I was thinking. Meh. I sometimes wonder if Github could post something about feeding their company pet and make it to the top of HN. :)
The file view icons seem way too washed out. I'd like more visual contrast so that I can see what is a folder and what is a file. Not all of us have 20 something eyeballs duders.
Agreed, color is the most immediately recognizable thing about an object and this is just as bad as when Lion washed out the folder colors. It looks more minimalist/modern but is less usable. Even low-saturation colors would be nice. You could do this with font icons just by printing them in slightly different colors (like a terminal, sigh).
Edit: I could be nuts, but they are printing in slightly different colors now, whereas just an hour ago they were all gray. Somebody at github just made my day.
Edit: I could be nuts, but they are printing in slightly different colors now, whereas just an hour ago they were all gray. Somebody at github just made my day.
Interesting...the folders and files are now different colors for me. Different than when I first left this comment. Still not high enough contrast IMO, but a step in the right direction.
Bring back the yellow folder icons!
Also, the entire design has terrible contrast. It's just dark on dark on dark. And every color has been stripped out.
Ugh.
Also, the entire design has terrible contrast. It's just dark on dark on dark. And every color has been stripped out.
Ugh.
I agree also. Just too little contrast and color... I like the icons on buttons etc, but not for the file browser or the activity feed icons.
Font icons. I really don't see the appeal. They seem guaranteed to get this comment, no matter how good at icons you are.
I personally did not like the colors on the repository icons. Grey just doesnt strike me as a color that inspires liveliness and energy. I liked the yellow better. Please keep some color around the repo list, thats what I care about most and I think a lot of people do too.
This speaks to an overall bigger problem with browsers, the need for a universal vector graphics format. The fact that designers are resorting to fonts to try and get resizable art assets is not a good thing IMHO.
Isn't SVG universal?
It should be but
http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
http://caniuse.com/#search=svg is a more visual look at this.
Every major current and previous generation browser supports SVG images except IE 8. IE 8 users just wouldn't see the icons - a reasonably graceful degradation.
Every major current and previous generation browser supports SVG images except IE 8. IE 8 users just wouldn't see the icons - a reasonably graceful degradation.
The problem is that they didn't follow convention: they didn't think through the icons' purpose & over-did the design. Create New should just be + sign, Account Settings should be user head, and so on.
I like thinking up icons just like any advanced UI/UX guy, but rule number #1: if there's a standard you use it. Even if that means using something as archaic as floppy disk for Save.
I like thinking up icons just like any advanced UI/UX guy, but rule number #1: if there's a standard you use it. Even if that means using something as archaic as floppy disk for Save.
Is there a license on these? I poked around for a few minutes but couldn't find anything. Seems like a generally useful icon set for any web-apps related to software or developers.
Agreed. Looking through their styleguide[0] it looks quite conceptually similar to Twitter Bootstrap and would be useful as a starting point for site development.
[0] https://github.com/styleguide/css/1.0
[0] https://github.com/styleguide/css/1.0
They're for GitHub use only.
Guess its a weird question but does anyone know what the make of propelling pencil is in the photo of their drafting process? I'd be keen to lay my hands on one!
It looks like this type: http://www.amazon.com/Alvin-Co-DRAFT-MATIC-PENCIL/dp/B001DKI...
But that's just me doing my best to read the side of the pencil in the photo, but it looks like the one!
But that's just me doing my best to read the side of the pencil in the photo, but it looks like the one!
That is indeed it - thanks a lot!
I had the same reaction upon seeing that photo. My dominant hand has been in a cast for four months, so I've become left handed. The new dominant hand is rather picky about writing utensils, and this one looks like it fits the bill nicely.
Did they make that drawing just for the blog post?
I don't know things work at GitHub, but our ideas are scrawled on random papers, whiteboards, and windows. We also never seem to have a perfectly posed pencil anywhere in sight.
Either way, I still love GitHub!
I don't know things work at GitHub, but our ideas are scrawled on random papers, whiteboards, and windows. We also never seem to have a perfectly posed pencil anywhere in sight.
Either way, I still love GitHub!
Is it me or they "changed" the icons 2-3 times in last 6 months? I don't want to disrespect you guys, you are doing a great job :D, but github currently really needs some form of deck to track down project dependencies activity and people activity too.
I already started something here http://bit.ly/GFB0XD
Going against the grain, I guess. I like them, more or less. I particularly like the color-coding in the newsfeed.
However, I generally favor text options: if there was a no-icon option I'd probably choose that over icons.
My nits:
Advanced search looks like a settings icon, though.
Admin-tools doesn't seem to relate. (A 60s rocket ship? huh?)
Notification looks like an A with some sound at small resolution instead of the radio tower.
However, I generally favor text options: if there was a no-icon option I'd probably choose that over icons.
My nits:
Advanced search looks like a settings icon, though.
Admin-tools doesn't seem to relate. (A 60s rocket ship? huh?)
Notification looks like an A with some sound at small resolution instead of the radio tower.
It looks like a regression (it is the first time that I say it with a redesign). From the technical point the might be great, but they are more bold and result in a pages that look less clean.
However I don't care about the icons so much, what I want is:
- better notifications / activity stream
- like button
- improved diff (highlight only the changes inline if a line changed slightly)
However I don't care about the icons so much, what I want is:
- better notifications / activity stream
- like button
- improved diff (highlight only the changes inline if a line changed slightly)
Judging by the number of folks listed who contributed to this (misguided) effort, I'd call this classic design by committee. Why not stick with the visual tropes we've come to know and instantly recognize? Instead of spending so much time designing these icons they should've read up on semiotics.
I think this quote sums up some of the thinking behind this:
"Some would say that a repository is storage — a place where you store your code — somewhat like a box."
So why isn't the icon a box? Why instead spend the rest of the paragraph justifying the book icon? It might be understood well enough by the Github designers, but the metaphor isn't universal enough to be recognisable at a glance.
This is made worse because the icon for 'readme' and 'wiki' are also books. That could be confusing without the text.
The other example is the icons for watching. 'Add' tends to be represented as a plus icon. In this case 'watching' has a plus icon in it, while 'unwatch' has a cross icon. This doesn't appear to make sense.
One might wonder why, when there are present and available dichotomies (open eye, shut eye), there's such a mix and match of metaphors.
"Some would say that a repository is storage — a place where you store your code — somewhat like a box."
So why isn't the icon a box? Why instead spend the rest of the paragraph justifying the book icon? It might be understood well enough by the Github designers, but the metaphor isn't universal enough to be recognisable at a glance.
This is made worse because the icon for 'readme' and 'wiki' are also books. That could be confusing without the text.
The other example is the icons for watching. 'Add' tends to be represented as a plus icon. In this case 'watching' has a plus icon in it, while 'unwatch' has a cross icon. This doesn't appear to make sense.
One might wonder why, when there are present and available dichotomies (open eye, shut eye), there's such a mix and match of metaphors.
Elements aren't lining up and running into each other. Some icons are oversized and overall the page looks lot more cluttered. Adding even more colors doesn't help the fact.
There's always going to be pushback when doing a UI revamp, and today I'll be that guy. Running Linux/Nightly.
There's always going to be pushback when doing a UI revamp, and today I'll be that guy. Running Linux/Nightly.
We should tell them we don't like it instead of just commenting in a HN thread.
Tweet them, or something.
Bitbucket looks great still.
Tweet them, or something.
Bitbucket looks great still.
I'm not a fan of Bitbucket for various reasons, but your point is well-taken - I tweeted them just now myself:
>generally like the octicons, except (a) some are too detailed, and (b) the colored bkgrds are confusing. (still a fan!)
Then again, I'm pretty sure GitHubbers will be watching this thread. ;)
>generally like the octicons, except (a) some are too detailed, and (b) the colored bkgrds are confusing. (still a fan!)
Then again, I'm pretty sure GitHubbers will be watching this thread. ;)
My comment on their "Making of" blog post expressing my criticisms was deleted without reply, how friendly!
I believe you used to be able to click on the "forks" and "watchers" button to see who is forked or watching. Now the button defaults to "unwatch" when looking at the project page.
I find these new icons confusing as well. It took me a long time to figure out the one icon was an eye with a "X" on it for "unwatch". Not sure why the branches in "your fork" travel upwards as well, as I've never seen a source control diagram do that.
And my default user/organization/project icon is no longer an octocat but a book with a fork on it. I miss the octocat.
I think this is a classic problem when a graphic designer doesn't have enough meaningful real work to do :)
I find these new icons confusing as well. It took me a long time to figure out the one icon was an eye with a "X" on it for "unwatch". Not sure why the branches in "your fork" travel upwards as well, as I've never seen a source control diagram do that.
And my default user/organization/project icon is no longer an octocat but a book with a fork on it. I miss the octocat.
I think this is a classic problem when a graphic designer doesn't have enough meaningful real work to do :)
For the record: it took 8 people to design and implement their new icons. 8 people.
Are you seriously bashing their icons based on the number of people on the team? How can you pass any kind of judgement without knowing what went in to planning, designing, testing, and deploying the change? If you think you could do something similar with fewer resources, either go do it and show us, or stop raining on someone else's parade.
Or, they had 8 people collaborating on the design and implementation of something important. Do you dare to claim that all 8 of these people did nothing else?
Careful. I count 5. Some people did more than one thing.
Aside from all the issues that were pointed out by everyone, since fonts on Windows are rendered much more sharply than they are on OS X for example, these look absolutely _terrible_ on Windows machines.
Edit: I have also noticed that they have removed the button to see the watchers on a project (it's just a toggle button now). To see that list now you either have to enter the URL directly or go on your dashboard and click on the watchers icon there on whatever project you're looking for.
Edit: I have also noticed that they have removed the button to see the watchers on a project (it's just a toggle button now). To see that list now you either have to enter the URL directly or go on your dashboard and click on the watchers icon there on whatever project you're looking for.
Reminds me of the VS11 beta icons, although not quite as bad that. (The promised VS11 RC icons are somewhat of an improvement. There must have been a big outcry. http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visu...)
I agree the idea is very good. Are flat icons a current design fad?
I agree the idea is very good. Are flat icons a current design fad?
Offtopic, but it's amazing to realize that Avalonstar is 11 years old! I guess I was pretty small when it started but I remember following Brian's work I guess as far back as my first computer purchase...
With the new design I have issue reading the light gray text on the white background. It looks like the line weight is set too thin.. at least this is on Chrome & FF11 on Ubuntu 11.10
Did the watchers and forks buttons also change?
They just to just be an icon and a number, now I see an icon/text button. Also, I can't see a list of watchers/forks by clicking on them now.
They just to just be an icon and a number, now I see an icon/text button. Also, I can't see a list of watchers/forks by clicking on them now.
To be perfectly honest the icons confused me. I only found "new repo" because tere aren't many bbuttons so it's quick to go over each. I much prefer text.
Octicons for Twitter Bootstrap: http://madscript.com/Octicons
I prefer no icons... https://gist.github.com/2648857
Is it just me or does the new exit icon with the door not align well with the other icons?
Perhaps because it's clearer than the rest? But yah the weights are off and it seems sharper.
Has anyone seen this in FF 12? This is one branch that shouldn't have been merged.
I was hoping this was going to be about a new elementary particle.
[deleted]
Apple and Windows, doesn't seem to be a Linux :/
? I'm on Linux and github's new font works fine. Looks nice.
They have glyphs for both Apple and Windows but not Linux.
Sorry, I misunderstood before.
That is indeed sad.
That is indeed sad.
[deleted]
You guys are worse than your own customers.
Site looks great.
Site looks great.
And goodbye to IE8 it seems.
seems to be a typo, there's: .tag-create and .tab-delete
I cannot believe my repositories have no smiles anymore, I don't want to live on this planet anymore.
hello, octicons.
The execution is too detailed. Details, regardless of how pixel-perfect they are, do blur upon quick glance, and the more details there are, the more it looks like a gray blob. The execution is also inconsistent - why the book is 3D, but the rest is flat? Except for the coffee mug that is neither.
The conceptualization is off too. The fact that they need to explain an icon is a red flag. Why book? They answer that with 5 lines of text. Why wrench and a screwdriver, when a gear is a visually simpler icon that is widely understood? Why the Logout arrow implies that someone walks in through the door? Why is the letter A transmitting, when it's actually about receiving?
So not to sound like a complete ass, here's what I would've used instead - a gear for preferences, a "power off/on" symbol for logout, a simple blank page with a plus sign for "new", some sort of inbox or even an envelope for "notifications". Just keep it simple and don't overthink.