Tag Archives: mayor

Helpful Design: The New York Times

Site link: http://www.nytimes.com/interactive/2013/04/14/nyregion/mayoral-candidates.html

For my first webpage, I utilized the style of a New York Times article that was doing something similar. Instead of profiling a Task Force, this article was profiling the mayoral candidates of the election in the city. Here’s the main page:

Screen Shot 2013-12-09 at 4.23.38 PM

Now my original plan was to emulate the entire style of the site, character profiles and all. Instead I ended up emulating the design, making my site include mugshots with white backgrounds (we worked with the resources we had) and keeping things minimalistic. 

Another design choice I picked up was this:

Screen Shot 2013-12-09 at 4.23.53 PM

 

It may be hard to tell from the screenshot, but the site is essentially as long as there are candidates. So you don’t actually navigate to different pages when looking through the page. I did the same with mine, though I believe that the way the NYT did theirs was a little more effective having code that made the page-loading much more efficient than mine. 

I didn’t include maps on my site either, which is a shame but I don’t think we had access to regional information for each candidate. It would have been interesting to show where each Task Force member lived or knew within Columbia.

Still, emulating the NYT’s style left me with a site I was happy with. 

Advertisements

Reshaping New York

I looked at the interactive multimedia NYT article, The Bloomberg Years: Reshaping New York, which visually and graphically documents the various changes the city went under Mayor Bloomberg’s tenure.

http://www.nytimes.com/newsgraphics/2013/08/18/reshaping-new-york/  

The main page is a white and grayscale map of the buildings and bike paths in New York’s various boroughs. The color red is used to highlight new buildings developed during Bloomberg’s term and green to symbolize the bike paths, which is indicated in a key. There is a brief nut graph on this page, followed by a button that says “Begin the Tour.”

homepage

After that first initial click, the site almost navigates itself. The page zooms across the map to one area, then displays a picture of a particular area years ago. A downward scroll from the mouse at that point prompts the upward transition to a current picture of the area from the same angle.  The website repeats this pattern for the remainder of the tour. A small paragraph of text goes along with each of the stops on the map.  There is also an arrow function alternative to the scroll at the top right of the page.

before after

newbuildings

bikepaths

There are a number of things that I like and dislike about this page. Overall, I like how the information was presented. The automatic zoom function gives the effect that the user is being guided through a story or a timeline. I liked the idea of past and present photos and how they were set up to fill almost the entire webpage.

Although the site is user-friendly, it didn’t allow for much exploration and I didn’t feel like I could play around with it as much as I would have liked to. It would have been nice to be able to navigate and pick and choose which areas I wanted to tour on the homepage without being guided through the webpage in its entirety.