Responsive Design

desktop tablet

In my wireframes for desktop and iPad, the header is positioned at the top, since that is what the user will look at first; the links are in the header for the same reason. Since the top left portion of the page is also what the users automatically look at first, the flexbox in the top left consists of a single top story of the day; other top stories are on the right half of the top of the page, which is what users tend to look at next.

The most recent articles from several news categories are then featured. Each category has its own flexbox that includes 3 articles and a link to see more from the category; these come underneath the flexboxes at the top of the screen, and take 2/3 of the width of the page so that they take up less space vertically; this way, users can scroll less to see the rest of the page. The remaining 1/3 of the page consists of a flexbox with Top Stories of the Week; these previews have no images, since they simply offer an overview of what has been trending in the past week. The iPad wireframe only differs from the desktop wireframe in that the font sizes and image sizes are smaller, and text wrapping will occur if necessary.

mobile mobile mobile mobile mobile mobile mobile

In my wireframe for mobile, the header remains fixed at the top so the user can then access the hamburger menu icon that contains the navigation links at any time. The vertical layout, in which each flexbox takes up 100% of the width, is optimal since the size of the screen is small, and having each flexbox be 50% of the screen width would make for a cluttered interface that is difficult to read and interact with.

The order from top to bottom of the flexboxes are: Story of the Day, Today's Top Story, Top Stories of the Week, and then the flexboxes for various news categories. Today's Top Story is first, since it takes priority on the mobile layout similarly to the layout for desktop and iPad. Top Stories of the Week comes before the flexboxes for news categories, since it takes less time to scroll through Top Stories of the Week to reach the flexboxes for categories, in contrast to scrolling through all the categories to reach Top Stories of the Week.

Click here to download annotated wireframes.