Pocket

Side project: News Funnel

A simple responsive web app to access two popular design and technology sources.

I love practical side projects that I’ll actively use, so I created a web site that shows trending stories from Designer News and Hacker News, two resources I check daily. I was never fully satisfied by the layout of the original web sites, or with other extensions or apps that aggregate content from either source. So in late 2014 I created my own.

On the technical end, News Funnel has a rudimentary PHP-based web scraper that feeds the 50 top ranked posts in from both Designer and Hacker News. It’s responsive and equally readable on phone, tablet, or desktop. But the site is less about development techniques and more about design exploration. I don’t linger in either news source; it’s more jumping off point into an article or two to read or save for later via Pocket. I want content that I can browse as efficiently as possible.

The actual design is very simple; after a few simple paper sketches I settled on a card paradigm to represent individual stories. With few graphics to generate, I jumped directly into development – HTML, Sass, and tiny bits of JavaScript to handle click events.

News Funnel is it its core a list of articles, so nailing the right font is critical. After researching and testing many options via Typekit I settled on Dalton Maag’s Aktiv Grotesk as the app’s font. While I considered other, more distinctive or whimsical choices with higher contrast, Aktiv Grotesk is a grotesque that’s suited to the straightforward nature of the app. I also bumped up article title size and contrast more than other DN or HN aggregators; I prefer more discernible text over raw information density.

One of my most distinctive features is a special combined mode that pulls articles from both sources into a single column, alternating articles in ranked order. I find it’s generally faster to scan content this way; your eyes are trained on single column instead of switching between multiple pages or columns. There’s other small touches throughout the app, including light and dark themes and the ability to highlight stories that have a large number of comments, point score, or were posted in the last few hours.

[imgembed imageid=’4121′ alt=’News Funnel default view’ caption=”News Funnel’s default view on a large browser, with content split between Designer and Hacker news.”]

[imgembed imageid=’4122′ alt=’News Funnel with menu nav open’ caption=”News Funnel’s main navigation open. Simple and consistent across devices.”]

[imgembed imageid=’4123′ alt=’News Funnel alt view’ caption=’The app in combined mode, with highlights for recently posted articles.’]

[imgembed imageid=’4124′ alt=’News Funnel on mobile’ caption=”News Funnel’s responsive web design easily sizes down for mobile devices.”]