Tag Archives: design

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. 

CSS of the Roots N Blues Website

I really like the style of the Roots N Blues website from this year. Specifically, I like the way they did the bios of the artists that were playing this weekend.

Screen Shot 2013-09-25 at 8.27.59 AM

If you scroll over the photos, they go dark. You can also click on them for a bio and video of the artist. I also just like the general shape and how they look on the page.

Here are some of the CSS elements for the parts I like below.

Screen Shot 2013-09-25 at 8.31.20 AM

Screen Shot 2013-09-25 at 8.39.47 AM

I really enjoy the way this site looks.

Usability and User Experience: NPR News

For this post I will be reviewing the news section of NPR.org

Image

Overall, I think this website does follow Krug’s five guidelines for capturing audience’s attention. I think it has a good flow and it is obvious what is of descending importance on the page. I also think the separate topics featured on the website are clearly defined an accessible in multiple ways, which makes the user experience even easier. The only problem I think this website has with the five guidelines might be that noise could potentially be minimized more, but I don’t think this is the worst case of clutter I have ever experienced on a news site. It is certainly more simple than many of the other sites I frequently read.

Image

 

I also like that on the home page, each story has a corresponding photo with it. I think this visual element adds to the organization, and the photo also makes me want to read the story more. 

Image

 

I also think the sidebar adds a lot of useful information and options for the website. I like that there is a rolling bar of AP updates but there are also links to blogs and the more specific topics that NPR covers. 

Image

If I had to change usability I would make the menu within the news section different. I think these tiny links are kind of weird and don’t really fit the design of the rest of the website. I think this could be better integrated into the website, like maybe a dropdown from the black news tab at the top.

 

Cycling’s road forward – Washington Post

http://www.washingtonpost.com/sf/sports/wp/2013/02/27/cyclings-road-forward/

This piece from the Washington Post is an engaging and fresh piece of sports journalism. The entire story is contained on the same page, and the reader simply scrolls down, but the story is broken up into 5 sections which you can also navigate through separately by choosing the numbers at the top.

I enjoyed this piece because I am not particularly interested in cycling, but I was drawn in and read everything in the piece.

Screen shot 2013-08-28 at 11.21.01 AM

 

The story includes photos, videos, audio and interactive graphics. I personally do not think the way the videos are incorporated is the most sleek way it could have been done, but the videos themselves add a lot to the story. You have to click on them separately to have them play and they have an advertisement first.

Screen shot 2013-08-28 at 11.21.33 AM

My favorite part of this piece is the interactive graphic showing a map of the ride, and below that, the tracking of the cyclist’s power, heart rate, speed and cadence. The reader can scroll through the ride and see what is challenging about each part. After seeing this I am even more impressed by professional cyclists. I also love how the graphic is another header, which were just photos before. It is a very seamless incorporation of an interactive element. And there is audio that you can play while looking at it.

Overall this piece was a fantastic example of a long, informative piece that still keeps the reader interested and engaged.

 

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.