08.09.12 |
Web/UI Design |
∞
Social news site Hacker News has come a long way from its modest roots in 2007. It has diversified its subject matter (though tech and startups still dominate) and in the process has become essential reading for developers, designers and entrepreneurs. I scan HN headlines regularly, at least once every day. Unfortunately, the site’s design is a total eyesore. There’s inadequate line spacing, poor use of typographic hierarchy, little contrast, and comments that stretch out too much – it’s better on the eyes to read on narrower columns.
A simple Chrome or Safari extension that restyles HN’s look is an obvious choice and there are many popular options out there. Yet few address how I tackle HN so I decided to create my own: You can download the Chrome variant at the Chrome Web Store and the Safari extension is available as a direct download on Cloud. You can find downloads and source code for both at my GitHub.
I like to make Hacker News as scannable as possible; I usually ignore comments, point totals and other article stats. To emphasize this I adjusted typography; headlines are bumped up to 24px Helvetica. All other text is secondary and set to 14px or smaller.
Many other extensions are minimal to a fault; there’s little contrast or division between headlines. That cuts down on scan speed as you scroll down a web page. So instead I went in the opposite direction: I added extra white space between articles along with soft gradients to emphasize splits between headlines. I also shifted HN’s color palette away from sepia and oranges to neutral, soft whites. Branding aside, neutrals are just more comfortable to browse through for longer periods.
Note that while I’m not so much into HN article stats, they do help measure “hotness” and article popularity. It’s a lot easier to scan these stats visually instead of deciphering HN’s default view with several tiny numbers crammed next to a headline. To achieve this I swapped out the numbers and replaced them with multi-colored, CSS3 based bar graphs. They automatically appear when mousing over an article and display points (red), comments (yellow) and article age (green). To get a quick snapshot of what’s hot you can tap ‘s’ to turn all article graphs on at once.
Overall, my extension is a slightly different slant on Hacker News than what’s already out there. It’s not for everyone, but if you read HN I encourage you to check it out.
08.08.12 |
∞
Jordan Koschei, writing for The Industry on Dropbox’s “get free space” push to have the user complete extra steps after first signing up:
This solution is much more elegant than simply forcing users to sit through instructions. For one thing, it offers them a choice; nobody is forced to go through the steps, but most people will anyway in order to gain the reward. Furthermore, the reward is intrinsically linked to the product — it isn’t a tangential incentive like a badge, but rather more of the product itself. Rewarding appropriate use of a product with more of the same product is simple and elegant.
Dropbox’s approach is novel. I know many non technical people who still rely on Dropbox everyday for syncing critical files between multiple computers. I never would have guessed that such a hard to explain, engineering focused product would have such an elegant setup process, but they do.
08.01.12 |
∞
Thoroughly enjoyable, useful interview over at The Verge with the head of design studio Information Architects, probably best known currently in the tech world for their work on iA Writer. I especially liked Reichenstein’s take on good typography:
The only thing that makes me think that Microsoft might have a chance on mobile devices is that they seem to invest a lot in typography, while Apple doesn’t seem to. For example, Microsoft’s latest future video uses Gotham as a system font. And while I don’t think that Gotham would be a good system font, it has the warmth and friendliness that Neue Helvetica on iOS lacks. I read that as “we care about typography”. With good typography you can score on a level that is subconscious to most users. Hardly anyone can discern good from bad typography, but everybody can feel it.
07.10.12 |
∞
UX designer Juraj Ivan takes a look at what’s new for visuals with iOS 6. Not too happy with some of what’s coming, especially the “new” linen and more forecefully colored navigation bar.
06.19.12 |
∞
Exhibit A that “all content on a single scrollable page” is a huge web trend: Apple’s iOS6 preview page. Great layout and typographic hierarchy here.
06.05.12 |
∞
Oliver Reichenstein:
The size of your body text doesn’t depend on your personal preference. It depends on reading distance. Since in general computers are further away than books, the metric size of a desktop typeface needs to be bigger than the sizes used for printed matter…
Graphic designers without Web design experience are surprised how huge good body text on the web is in comparison to printed matter. Mind you, it’s only big if you compare it side to side, not if you compare it in perspective.
I’m far from being a typographic genius but I’ve argued for years that most websites have their body text far too small. Mr. Reichenstein just provided the ammo I needed, along with a great article on web font styling.
06.04.12 |
∞
Designer Dan Cederholm interviewed by The Great Discontent:
Maybe it goes back to not being formally trained, but I always had this inferiority complex. I thought I was going to be outed as a non-designer and that someone would say, “Wait, he’s not really a designer. He’s not part of this club.” That isn’t true. The difference between someone who is a designer and someone who isn’t is simply that a person who is a designer has done it. My advice is don’t get hung up on labels or position or titles. It doesn’t just happen; it’s a gradual process. You can’t be afraid to jump in there and start doing it.
Dan’s a cool designer, one who’s been a huge source of CSS inspiration for me with his Bulletproof Web Design and CSS3 for Web Designers books. Naturally it’s a great interview, but it was this paragraph that really struck a chord with me. I’ve always pushed my career forward by looking for the next big thing and not being so hung up on my specific role. I’m not alone either; designers and developers are moving to smaller, multidisciplinary teams where being game for wearing multiple hats becomes critical.
06.02.12 |
∞
Unique little design stories like these totally make my day.
05.30.12 |
∞
There’s a lot of wireframing tips floating around online but they rarely focus on just web applications. It’s cool to see that kind of web focus over on Intercom’s design blog. Pay special attention to point three which focuses on speed and exploration:
If you can’t produce concepts quickly, then you’re working at the wrong fidelity. If your wire-framing serves only to deliver a grayscale version of what you’ve already decided you’re building then you’re wasting everyones time.
05.29.12 |
∞
I can’t put my finger on why, but lately I’ve been skipping a lot of Smashing Magazine articles. That changed with Dan Reynold’s breakdown of body fonts. Very true to Smashing form, Reynolds’ coverage is exhaustive. A few times it becomes too exhaustive (I have doubts on the effectiveness of font ‘apertures’), but this is awesome stuff. I knew a lot of the basics (e.g. go for moderate stroke contrast, higher x-heights), but there’s a lot of info here I haven’t seen anywhere else.