Vice News

Screen shot 2014-11-07 at 11.31.53 AM

I like the use of JavaScript used in Vice News. In my opinion, it is just barely enough to give you the sense of interactivity, without detracting from the content. Granted, a bit more interactivity wouldn’t take anything away from the content, but I’m in a minimalistic mood today, so I can appreciate it.

For starters, there is a nice big/bold sticky nav bar that follows you all the way down the page. When you scroll over each picture and corresponding headline, the picture fades a bit and the headline becomes orange.

In the features section there are much larger photos and, when you scroll over them, it shows the photo credit in the bottom right corner.

There is also a tab that reads “Read” or “Watch” in the top right of these photos that turns orange when you scroll over them.

Nothing too complicated or gripping, but I think it gets the job done.

Consequence of Sound

Screen shot 2014-10-24 at 10.41.49 AM

I feel like I have used Pitchfork.com way too much for these posts, so I’m going to use the Consequence of Sound site instead. Ha ha!

I really like the bold, sticky header that shows everything in regards to news, new music, films, music reviews, features, and staff lists. There is also the CoS logo in the top left corner, attached to the navigation bar, which is the “golden” spot and the first place a viewers eye goes to. This logo also takes you to the home page.

I want to utilize the drop down menus on my own site, too. I would have done it for our True/False site, but I didn’t think I used enough content to justify employing these drop down menus. I also like how there is a cluster of images on the left of the page linking to stories and how there is one photo more dominant than the others. I think this is a common practice in website design, but I think it is helpful to determine what is either the most popular, or recent, story. Hopefully I can get a grasp on CSS grids so that I can better use this method of grouping.

Overall, the site is super clean with a white background. Since designing the True/False page I’ve really come to appreciate using a white background and I think it does help draw attention to the actual content of the site.

Ashland: a special report

Screen shot 2014-10-09 at 10.15.12 PM

Towards the tail end of the fall 2013 semester I had the opportunity to work on a package for the Missourian focused on the small town of Ashland, Mo.

The specific piece I worked on was a text story and video about an old gymnasium at the Southern Boone High School that was the original gym for the school district and had been left to pretty much rot and fall apart. But, as a whole, the project highlighted how this “sleepy” town had grown rapidly in the last 10 years and how it has become the largest suburb of both Columbia and Jefferson City.

When the package was first published to the Missourian site it was one single page with this large grid featuring a cover photos for each story that, when you scrolled/clicked on it, would take you to each story of the package. Unfortunately, I can’t seem to find that same landing page now and the project just exists as a list of six clickable headlines for each story. Needless to say, it was a much cooler project when it was displayed as a grid of featured images instead of this bland list, but it is still relatively easy to navigate (once you get passed the random survey questions to get to it).

But, I did have to do some digging (it ran in Jan. 2014) to get to it.

The entire project is a collection of text, videos and photos that work cohesively to tell the story of how this town has really grown in the last decade or so and I think this combination is effective in immersing the reader so that they get a feel for what Ashland is like without ever having been there. There are some great interviews with longtime and new residents of Ashland that give the audience some historical background and a new take on the town itself.

I believe the intended audience was residents of mid-Missouri and those who travel frequently between Jefferson City and Columbia and might not have ever noticed the small town of Ashland. The story really focused on the community as a whole and I think the intent was to inform residents of neighboring cities that Ashland is more than just a very tiny town in the middle of nowhere.

This project took nearly an entire semester to produce so, at the time, it was doing a great job of showing how businesses, schools and other area programs were helping to develop and unify the town as old and new residents alike reacted to the recent changes and growth. Since January there really hasn’t been much follow up.

Google News CSS

At first, I was going to try and figure out what in the hell was going on in terms of CSS styling on the Pitchfork homepage. But I came to the harsh realization that it would take the better part of the week for me to get any sort of grasp on what was going on.

Instead, I’ve decided to tackle the CSS styling on the Google News homepage. This is something I visit frequently, especially if time is not on my side and I need to quickly digest the day’s happenings.

Screen Shot 2014-09-26 at 1.58.33 PM

The first line of code that caught my eye was for the scrollbar at the left of the page. When looking at the CSS for this scrollbar, I noticed there is a “pseudo-element” in followed by :: that was in front of things such as -webkit-file-upload-button element and -webkit-input-placeholder element. In looking at John’s blog post, he found the same element when looking at the MoreSleep site. From what he found, this element is used to style the first letter, or line, of an element and to insert content before, or after, the content of an element. But, I really have no idea the exact function of this element…

Screen Shot 2014-09-26 at 2.00.13 PM

I do feel that I understand the “transition” element, though. The duration for the transitions on the scrollbar is .218s. I’m curious as to how one goes about assigning the appropriate duration. Hopefully that is something I pick up on.

I did find out that using these transitions is a way to add an effect when changing between styles without having to use Flash animation or JavaScripts. Sounds pretty helpful considering I have no experience using either of those tools yet.

One other thing I caught while looking at the scrollbar was the “overflow” element that allows one to denote what happens when content overflows an element’s box. The description used on Google News is for the overflow to be visible, meaning the content is rendered outside of the elements box. According to w3schools, this is the default.

Another element I picked up on that I was not previously familiar with was the “min-height” element. This allows one to set a minimum height for an element so that the value of the height property does not become smaller than the min-height set. There is also a transparent background for this element.

Stylistically, this site is extremely simple and is really nothing more than a running list of the day’s top stories with a scrollbar on the left with more top stories and shortcuts to see top stories by location and category.

Hopefully all this mumbo jumbo makes sense…

–Adam

FiveThirtyEight: Clean Cut Data

Screen Shot 2014-09-12 at 11.15.39 AM

FiveThirtyEight features three a clean and concise homepage with an obvious visual hierarchy highlighting featured stories of the day in the left column, with the newest story having largest picture and text. In the center column, titled “DATALAB,” there are about 10 stories from the week and it shows the date they were published and the headline. In the right column are two long-term interactive stories with an advertisement in-between. These columns are clearly defined and it is fairly obvious by looking at both the headlines and photos/visuals accompanying them what kinds of stories they are.

It is very obvious what is clickable on the page, as most everything is, and what is great is that there is a running menu atop the page showing stories in politics, economics, science, life and sports. Each category is assigned a color (purple, green, blue, yellow and red) and the main featured stories have a little colored square next to the headline showing what kind of story it is and also includes a subcategory like “NFL Week 1” or “Terrorism.”

When looking at it more closely, the page is actually separated into two sections, with the three columns in the top half of the page and the sections “more stories” and “contributors” in the bottom half of the page, which is broken up into two columns.

The “Contributors” section features six writers for the site and lists three popular stories for each writer with color coding based on what the stories focus on.

I think this page, and the site as a whole, is very clean and easy to both read and navigate. It makes it very easy to pinpoint certain stories that you are interested in and, by color coding each topic, helps the reader find exactly what they’re looking for without really having to read the headline or get into the thick of the story.

Mac Demarco: Mannish Boy

Screen Shot 2014-09-04 at 4.50.28 PM

I am a huge Mac Demarco fan. In my opinion, he is the best musician of our generation. So, I may be a little biased in my critique of this project but I think that it is very cool to look at and is easy enough to navigate.

The entirety of the piece is basically a feature/profile of Mac Demarco, which a lot of other music sites have done on this guy. But, Pitchfork upped the ante, so to say, and added some very cool animated graphics and photos that have certain elements that are animated while the whole of the picture is a frozen shot.

As you scroll down the page, new pictures and text emerge as the previous text and images fade away. Each “page” is filled with bold, easy to read text on one side and one of these animated still photos on the other side.

Both the pictures and text take up a large amount of space on the page leaving little empty space, but they aren’t so overwhelming that you become distracted between looking at the graphics and reading the text.

One of the pages is especially cool and features a pull quote from the story with an interesting border and, on the right side of the page, a sort of “GIF” showing Demarco eating out of a bag of chips or something.

I’m not entirely sure what these animated still photos are called (or whether or not there is a technical term for them) but they are really fun to watch and try to wrap your head around without taking away from the intimacy of the story.

I think alternating pages filled large text and photos with pages only featuring photos and a smaller pull quote helps break up the story and emphasize certain quotes or angles of the story the author wants you to ponder, or get out of the story.

Overall, I think this is an awesome way to utilize multimedia to tell a story and I once I find out what the hell these animated still photos are I am going to do everything in my power to learn how to create them.

Here is a link to the story…http://pitchfork.com/features/cover-story/reader/mac-demarco/

Screen Shot 2014-09-04 at 4.58.07 PM