This 2012 post by the Guardian is a pretty cool way to show data. The story is gay rights in the US, and they have different interactive charts that show where each state stands in gay rights. They have the categories broken down by color, so you can get an easy visual just by glancing at the chart and key. But if you want more specific information, you just hover over the slice that represents the state and information shows up along the side. If you scroll down, the areas of gay rights are broken down by region and further discussed.
I noticed they had a few small problems- like in some of the regional charts, only one of the highlighted categories descriptions pops up. For example, you can clearly see that Minnesota allows both single and joint adoptions, but when you hover, it only says single. Otherwise, however, the story seems pretty successful.
I found an older article from the New York Times published in 2002. It’s an interactive story about the fathers of lost fire fighters and officers in NYC one year after September 11th. The story is extremely intricate, thorough and gut-wrenching. Even more than that, the online piece is extremely interactive. We see the fathers and can learn more about them and their sons. It also takes us to a whole article about each father and his coping since the incident. There are also audio elements.
This story used a lot of interactive elements. The designers used CSS to design the page and add the color scheme. On the individual bio pages, we can clearly see that they had to use div’s and boxes to separate the information. There are also some jQuery effects present. They use some shadowing, fade-in, fade-out, audio plug-ins and even the next and previous buttons.
This all adds to the content of the story. It’s very enjoyable and engaging. The effects aren’t overbearing and they flow well with the site.
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.
For this blog, I came across a website for a female DJ named Dominique Jardin. She’s from Austria and is mostly focuses on Electronic Dance Music. Anyway, her website is one of the best I’ve seen. When you first access her site, there is a loading symbol.
and then the a picture of Dominique appears:
that quickly fades into another picture:
before you’re finally brought to the home page of the site:
This opening sequence happens every time you load the website. It’s automatic but again it’s really fast so I wasn’t annoyed by it. The website also makes use of the sticky navigation but with a twist.
The black bar stays at the top of page, the entire time but as you scroll the navigation buttons disappear and her name changes to just DJ. But if you hover over the navigation bar, all the information reappears like it is above.
I only talked about the homepage for this post but each section of her website has incorporated Jquery and the site although it’s almost all responsive, doesn’t take a long time to load or move slowly. Her media page, reminds me a lot of a tumblr website/with infinite scroll.
Check out this website it’s awesome! http://dominiquejardin.com/