Google Design Exercise
Final
Front page news widget for The New York Times. Below you can find the wireframes and inspiration that led me to this concept along with a breakdown of the layout, interactions, and functionality.
Low-fidelity overview
I took everything learned from a series of explorative sketches to decide on this layout. The masthead is large and centered with the date underneath. This helped with making the widget look like the front-page of a newspaper. A good portion of the top is actionable such as search, info (to change widget options), category selection, and language selection; all of which is important to accommodate different users.
With the ticker below the masthead, it broke up the layout visually and added a layer of importance to the tool. The layout of the stories feels better with the separation of the main stories from the sub-stories and dedicating more space for the text as some headlines can be long.
Widget layout, interactions, and functionality
Materials used
I researched dozens of different news widgets before sketching out the wireframes to understand the competition and opportunities along with limitations and format. I also referred to nytimes.com and a hard copy of The New York Times issued on February, 20th for inspiration on the layout and design.
Wireframe 1
The first wire that I sketched relied heavily on images to tell the stories. The headline body text was to be overlaid on top of the image. The sub-stories was on a side-scroll and the ticker at the bottom.
The only element that is consistent in the final design from this wire is the centered logo at the top. I felt the the text on top of the image added a degree of difficulty to read and this layout deviated from the look of a traditional front-page of any newspaper. The interaction of the side-scroll for the sub-stories felt a bit jarring.
Wireframe 2
This next version addressed the readability of the text by pulling the heading and body text out of the image. I explored a new grid layout with sub-stories on the same row of main stories.
The new layout made the widget appear more as a condensed version of a front page, however, the hierarchy didn't feel right with the sub-stories in the same row. The layout felt cluttered and busy.
Wireframe 3
In the third wireframe, I switched the orientation of the widget to a landscape view to have a feel of an open newspaper. I addressed the hierarchy concern from the previous wire.
This version started to feel more complete with a solid hierarchy. Although the same size, I felt that there was an opportunity to show more sub-stories. The logo off to the side wasn't good for branding because it had to be scaled down.