{Carrer web log}


Blog about web design & development

Hacker News mini Redesign [Unofficial]

Tuesday, March 30, 2010 { 2 Comments }

First why I decided to mini redesign Hacker News.

Mainly because often happens to me to "got lost" between the links on the front page. I’m not sure if this is just my problem to not be able to spot a link even do I know that it is there. It is like whole link disappears for my visual field for few seconds. Maybe because my brain needs to filter 30 different links with different content.

So I tried to fix that problem. I started with the font . The font used on HN is Verdana.

Verdana is known to be readable font probably because of the extra space between the letters(and words). When I started like a programmer (not designer) there was one simple rule Verdana is readable and use it for everything. But now I spend couple of years studying typography and I realizing that is not that simple(And the ignorance is a bless, ha,ha).

So I played around with Hacker News page applying different safe web fonts. And I must say I’m particularly happy with big Georgia.

When Georgia is 12px is so small that losses all of its powers. And you can’t spot all the details of the glyph so usually all small serif fonts don’t work so well on monitor(screen). You can read more on my previous post.

But when Georgia is little bigger like 16px it becomes very readable. So I tried to use 16px for Hacker News and my first reaction was negative. I closed the page and reopen The second reaction – is not so bad and the third I’m starting to like it.

I decided to build a bookmarklet that transforms the Verdana to 16px Georgia, I’m using it since December and I’m quite happy with the results and the readability.

I changed the colors #1a1a1a for the title, #808080 for the clicked links and #f9f9f9 for the background.




Link to the page I inserted NoIndex Nofollow

And the second attempt was to use Hacking News Orange to do something #ff6600 so I did overlay(Photoshop) the previous color model and the results:




Link to the page I inserted NoIndex Nofollow

I implement the #341500 for the titles.

And that is it. This is just small redesign(font and color) and the structure of HTML is not changed.

The real redesign should take in concern many more factors.

I will make small list the things that can be changed on the front page:

No need for classical tables simple list(ul,ol) and little CSS can do the trick for the HN structure.

Give more importance to the comments ( I think that comments of HN are priceless I often receive more quality comments on HN than to my blog)

The size of the numbers 1-30 should be small as possible because they have no importance.

Also(I’m not sure) Different color for Ask HN questions.

Naturally when the front page is redesigned the design decision should be implemented to the rest of the site. I pretty happy with the current commenting system and I wouldn't change that.
That is it.

Help me test this theory.

Like I said before my first impact to Verdana to Georgia change was negative(I was like "what is this!"), than after a while I get used to Georgia and now I believe that Georgia version is much more readable . So my question is: Is it just me?

How can you test this theory?

You can use this bookmarklet who will change the current HN CSS and give you an idea of the real time redesign. So try to use it for one day and then comment if this change is influenced(improved or not) your readability on HN.

And the second thing that has nothing to do with this post or redesign. What you want to be changed in HN? Suggest some ides how HN can be improved.

And the last thing, pretty please be positive and approach this idea with creativity.

P.S This blog is using the typographical solution for my CSS Framework(Emastic) or 12px Arial and I’m little lazy to redesign it, eventually in my next redesign I’m planning to use bigger more readable font.

You can also comment at http://news.ycombinator.com/item?id=1229006



2 Responses to “Hacker News mini Redesign [Unofficial]”

  1. // Blogger Giles Bowkett // 3/30/2010

    Don't just draw it and ask for feedback - put it on the web! I did a Hacker News redesign of my own, a miniapp which parses the HN RSS feed and republishes it with my preferred look and feel. I use it every day and Google Analytics tells me it gets about 150 visits per day on average. Since then I've been keeping track and there are a ton of Hacker News mashups out there. I don't think HN itself will ever respond to any design feedback, but a lot of people are using the mashups or building their own.  

  2. // Blogger Vladimir // 3/30/2010

    @Giles Bowkett:Cool mashup  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License