I use an RSS reader regularly since it is a good way to get news and articles from various sources in one place. This is a simple RSS reader concept I came up with.
I use an RSS reader regularly since it is a good way to get news and articles from various sources in one place. However, I also noticed that the majority of the RSS readers out there are a little too heavy on the features so I decided to design one with fewer features, something elegant yet easy to use. I wanted to focus on typography and creating a pleasant experience for users so that they don’t feel overwhelmed by the information overload.
I built a simple prototype to demonstrate how the reader would look and function.
I began with creating sketches of the main components. At this stage I didn’t focus on the details, instead I paid attention to figuring out what components are responsive, adaptive or fixed and how the elements are going to behave on different sized displays.
BUILDING THE GRID
After the sketches I built a grid to create a visual rhythm. This is the grid I used to build the site. For the horizontal unit it uses 40px wide columns with 20px wide gutters and for the vertical unit 24px baseline. I calculated the height of the baseline based on the 16px font size I mainly used on the page. I used pearsonified.com‘s Golden Ration Typography Calculator to calculate the line height. After I defined the grid I chose a typographic scale. Using Tim Brown’s Modular Scale calculator I selected the 1:3 – major twelfth which provided a nice vertical rhythm in my grid. For the headers I used the numbers on this modular scale:
line-height: 51px; }
line-height: 38px; }
line-height: 27px; }
Below are the screenshots from the prototype. You can click on any of these screenshots to go to their respective prototype pages.
On the main page there is a fixed menu on the left side that includes the menu button and the sync button (at the bottom) but the main purpose of this left menu is to enable the users to quickly access their most favorite sources. Whether we’re browsing an RSS reader or a social media site, we always have that few sources that we follow the most. These six favorite sources are curated based on how much the user reads these sources compared to the other sources on the user’s feed.
On the main page (home) there are three different kind of sections with different layouts: the main featured story, three other featured stories and regular stories. Featured stories are displayed first; they are determined based on their popularity. The most popular story at the time is displayed in full width with a bigger picture and more text. Under the main story, other featured stories are laid out in a three column format. After the featured stories regular story feed begins. I wanted to give all stories an ample space instead of squeezing them to fit more stories, the reason for this is that the more cluttered a layout looks the less enjoyable it becomes to sift though the articles because we’re suddenly concerned with how many articles we haven’t read.
On the article page two things happen: the left menu disappears since navigation and the favorites section are unnecessary when reading an article and the menu at the top also disappears as the user scrolls down the page. These factors ensure that all the distractions are removed so that the user can focus solely on reading the article.
When we’re browsing through RSS readers often times we see the same stories over and over again. When a story gets popular more and more sources share it and this causes more information clutter on the page. Sometimes we may not want to see a particular story at all, that’s why at the bottom of the page I added an customization option that lets the users choose which stories they would like to see more and which stories they would like to see less.
And here is the tablet layout: