Tag Archives: style

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

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.