I usually don't like these "look at my awesome new design for your already successful website" posts, but this one is an exception.
This design makes what I would say are clear improvements, and doesn't try to throw out the design wholesale. This design makes just a few improvements - better use of white space, easier to read text, and I happen to think the header is better too. This pleases the part of my brain that knows how to lay out broadsheet newspapers.
Bravo, looks good! I also think the arrows should be bigger.
Thanks, I really appreciate it. Others have said nice and useful things as well, including the thing about the voting arrows being hard to hit http://news.ycombinator.com/item?id=2098502
I just watched Helvetica last night. Apparently you are either a brilliant designer who has mastered modernism or terrible shill for the Vietnam War and all that's wrong with corporatism for using Helvetica. Just thought you should know. Heavy stuff.
If you like Helvetica, you should watch Objectified. It's by the same director, and is similar to Helvetica, only about Industrial Design (Dieter Rams, Jon. Ive, etc.).
Thanks for the constructive feedback, that's why I love this place. :)
- I haven't decided whether I want to keep the logo at all, and where it should go. I may play with it more later.
- Thinned out the numbers to reduce their weight, and it seems to be enough IMO.
- Here our taste will differ. But that's a good thing, right?
- Currently this works on one machine with one browser. If people like it, I'll polish the hell out of it, sure. Cross-browser and cross-platform will be the first thing on my list.
- They were awkwardly lumped to the header in the current layout, I think. Just wanted them to have a little space to breathe.
- That would be the second thing on my list if the style finds users.
Overall, I really dig it - good work! But why did you use 'Menlo' for the headline? It seems a bit out of place. I'm assuming you were going for a "monospace hacker" look, but it just ends up clashing with the Helvetica in an uncanny-valley sort of way. (http://www.noupe.com/design/mixing-multiple-fonts.html see rule 4)
Try it with a bold/heavy/black version of Helvetica, like the "Comfy Helvetica" header you have on your page! I just tried it and I like it much better now.
I tried both versions earlier, and the monospaced one sat better with me. Originally I decided on it because I didn't want to bring another typeface into the mix where I already had Menlo and Helvetica, so I tried both and settled on the one that fit my taste better.
I mean, I like my size how I like it - and adjust it all the time ( cntl/cmd -/+ keys) as I move from site to site or use windows of different sizes. [And have even set a hot-key combo to toggle on/off Safari's "Zoom text only" feature.]
I've been told that only the geekiest 1% of population are even aware of the possibility of text zoom, but for us... doesn't anybody else tweak on the fly all the time?
I didn't call godDLL a superficial hipster -- I said (with, I hope, abundant sarcasm) that Hacker News was missing the superficial hipster touch. I said so because the re-skinned version feels A) superficial (the primary difference is simply the change in typeface), and B) hipster (using Helvetica for the sake of Helvetica). Is it ok if I don't like it? I hope I'm not breaching protocol here -- that would be awful.
If godDLL is offended, I'll promise to next time better structure my criticism with kind words and phrases of subtle encouragement rather than snark and sarcasm.
12px Verdana measures 'squinty' on a high-rez display, like that of a new MacBook Air. I always had trouble reading those tiny drug inlays, because they are printed with what looks like ants. And if you blow the page up, it don't look so great -- it was optimized for screen and small sizes.
The low-contrast karma-number is a nice touch. I agree that my karma rating shouldn't be as prominent as it is. I hate logging scanning the site, having my eye hit the karma number and mentally doing calculations of how it changed.
Did you want the GIF I created for the voting arrow? It appears that the voting arrows are not styled in so the GIF is written in every cell in that column. Here's what else I would change if I could:
- Instead of arrow disappearing after you upvote, turn it orange so you know what you've already read and voted up.
- Offer a checkbox option on top to "hide articles already read" which will then leave only unread items in the list!
I think I dislike about the HN design is the visited link color. If I find that it blends in with the background to the point that I scan right over it when looking for visited links. It needs just a bit more contrast.
That is a good point but the problem I have is that I click a link, read the article, go back to HN, and look for the link to view the comments. At that point, I sometimes can't find it because the link blends in and I scan right over it.
I wouldn't have this problem if I just started opening all the links in new tabs, but that isn't my normal browsing habit. I guess I am a depth-first instead of a breadth-first user.
I took the liberty of turning this into a userjs, for those of us who don't want to install an extension to run an extension in Chrome : http://userscripts.org/scripts/show/94618
I see http://searchyc.com/ mentioned every other day, might be that HNers are overwhelmingly not aware of it, and many don't know how to search just any site with Google. If that's the case then it begs to be linked to from the front page, or a simple search field needs to be put up that will take your query and put it into Google like so:
In the footer the google (site:...) one is there, but no one ever checks the footer and it is just a link.
I think that it was put there after the previous big complaint thread about search but it hasn't helped any and the best way to search is still searchyc.
SearchYC's benefit is not that it gives more current results: it allows you to search comments by, e.g., their author in ways that Google, being a general search engine, cannot.
These days, if all the pages on a site are publicly spidered, then it's likely that Google will do a great job of searching your site for you.
I've seen many sites with terrible search boxes that look like they use the built-in MySQL full-text search. I find I often get better results by just searching through Google with a site: tag.
It makes me think of cases where OpenID is used over in-house authentication. Why maintain something when there are already free systems that will do that for you and have worked out all the kinks?
That's fantastic, thank you. I'm updating it to eventually be reasonably cross-platform and cross-browser as well as mixing in things suggested in this thread, so keep an eye on that page – a GitHub link may pop up there if I get around to it, and the updates are generally posted right up on that page.
You can, of course, use whatever you like, but I think that putting a serif font as an alternative for Helvetica Neue/Helvetica for Linux users is a bit silly.
There's plenty of Helvetica alternatives on Linux.
Believe it or not, but I actually like Libertine and have no particular fixed interest in Helvetica. I could have suggested Liberation Sans, or DejaVu Sans just the same.
I just saw a similar re-layout with Georgia that I liked and was a bit primed for serifs. :)
I'm not someone who desires fancy design, I like reddit, but something about Hackernews isn't quite right. I can't put my finger on it and I don't like this "redesign" either. I wish I could work out what it is, something just doesn't feel right. It's functional though, so that's good.
What you're observing is probably the lack of a strong line on the left side. The right edge of the Y Combinator logo ought to form a guide line down the page, with the voting arrows' right edge X pixels to the left and the text X pixels to the right of that, and this line should also propagate through the text entry box and the reply button and so on. Instead, there's the logo, the link, the textbox and reply button (which do at least line up with each other), and the first layer of comments, each of which has its own individual vertical line. (I think. Comments and the title text are close but I'm not sure it's quite right, and there's so much interference in between it doesn't matter.) I Am Not A Designer but I know enough to know that's wrong.
Also, the bottom of the Y in the logo should form a horizontal line that the rest of the text in the title bar lines up with, whether or not that happens for you appears to depend on the zoom level of your browser. (For me right now the "Add Comment" is visibly above the Y, but when I zoomed in to look closer it actually dropped below that line. By the way, designing on the web is hard. Also my website sucks and I know it. It's on the list.) Something should probably also be done with the horizontal line the voting arrows line up on.
Cleaning that stuff up would be a start. It probably wouldn't be enough, and then I'd be stuck, because I only get the really basic mechanical stuff. Everything I've phrased as fact in this comment should be taken to be opinion, it would just be very tiresome for me to type and you to read the same caveat over and over.
your proposed layout isn't bad, but I'm an engineer so change is tough. hackernews as it is feels like home, a new layout will take some to settle. btu thanks for the topcolor=ffffff suggestion. I like that topcolor change a lot, and the homepage still feels like home.
Yeah... I'm an engineer (a bit OCD too but who isn't these days?) and perfectly okay with change. I enjoy it rather... but I definitely prefer HN's current look over the OP's. The current font size is perfect as it is. I feel like larger fonts make sites look less professional... can't quite put my finger on why though. Maybe it's because larger fonts require more scrolling and is less efficient when I can read 12px (or even 11px) font without squinting just fine. There may also be a correlation (at least for me) with large fonts and say... children's books/sites and those with poor vision (typically the older generations who are mostly computer illiterate)... i.e., less professional and more casual.
I think that without the orange bar the page is too airy—should I say appleish—elements are just floating in out there somewhere. The bar gives the page clear frames.
As for the font, why define one at all? Browsers already provide a default font which hopefully is configured by the user.
Current design is very transparent, it's like there is no design. Logo is very small (truly, why do you need a bigger logo?!), navigation is placed on where we expect with the size we even don't notice it's 14px. Font type is as simple as possible. I wish I did not see this topic because from now I'll think about design of the site while I read it.
This design makes what I would say are clear improvements, and doesn't try to throw out the design wholesale. This design makes just a few improvements - better use of white space, easier to read text, and I happen to think the header is better too. This pleases the part of my brain that knows how to lay out broadsheet newspapers.
Bravo, looks good! I also think the arrows should be bigger.