{Carrer web log} ←
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]”
-
// 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.
- // Vladimir // 3/30/2010
<< Home
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 <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- ClipR - bookmarklet for better internet reading
- About the 80 million dollars Blue (#0044cc)
- Opera 10.50 for one week - Summary
- Initiative - Opera 10.50 for one week
- Quark – mini php CMS
- The Golden Grid PSD Template
- WikiReader – bookmarklet for Wikipedia reading
- CSS Shorthand Clockwise Rule
- Calendar 2010
- Bookmarklet for Google Dictionary
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License