This was a cool site I found the on Fueled Blog where I visit every now and then for design inspiration. This week they had Church of the Atom site as one of their top favorites. I found this site to be a really cool way of organizing information, much like the secrets we have to organize. The colors are awesome and the navigation bar is aesthetically pleasing and very functional.
This is the home page ^^^. It’s very simple and contains a great photograph. You click on the text to enter the site. The text was a separate image that contained a link to the site containing the content. Once you enter you see this.
When you scroll, the nav bar stays at the top of the screen. This was done my putting the nav bar under the class “fixed.”
In CSS, it looked like this:
margin: 0 auto;
This was pretty cool to me, because jquery wasn’t used to keep the nav bar sticky, like I have learned in the past. Fixed was all it took.
When you click on the triangle, the page moves up and down to the picture it is linked to. From looking at the code, I found they site designers used a vertical carousel using Jquery. This allowed the user to click arrows on the sides to view the label of the beer and then a sort description of the beer. This would be a great feature for the secrets project.
After looking at the code and other aspects of carousels, I found a web site that somewhat explains and shows the code for the different styles of carousels including vertical. Here is the link: http://bxslider.com/examples/carousel-demystified
Link to the site: http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded#section/1
The Guardian took an in-depth look at what Edward Snowden’s leaks means to the viewers. The site is composed with plenty of quality videos of experts explaining the issue within a long, vertical reading page.
There are multiple features I like about this site, including the clean design and layout, as well as multiple multimedia elements used to present the story and data. But the most interesting one is the videos that automatically plays when you scrolled to it.
And the matching HTML begins from something like this:
I think this java technique is really useful to learn. Although not everybody likes auto-play videos, but such feature sometimes makes the site more alive.
The site I chose to talk about is NPR’s Okkervil River: Coming of Age in Small Town America, a feature story about Will Sheff.
This story consists two pages: one is a regular page that include text, audio, and a overall look at the map. Once users click the map, it guides the users to another page, which is an interactive map.
This interactive map use the audio as the cue to guide users to different parts of the map, illustrating Sheff’s memory throughout his life in Meriden. When different scenes/locations come up, a series of pictures will appear at the bottom, which is clickable. And there’s a spotlight effect throughout the story: when the audio cues a location, the browser guides users to that location with a spotlight highlighting the area.
Users can also manipulate the scenes by changing the audio section at the top of the page.
I think the site is quite high-tech. But it’s gonna be better if the audio also follows users’ clicks on maps. This is going to make the map more interactive and effective. So far it’s good but not perfect.
This is a quite straightforward story – a timeline for the war of noise in the Big Apple. The thing I particularly love about this story is its responsive design.
The timeline starts from 1905, with the little gray dot on the left.
As you scroll down, you can view the content from different periods. But the gray dot also follows your movement. When I was browsing the content of the 1950s, the gray dot has moved to the middle.
I really like how considerate the design is. It is really convenient for the readers to follow where they are. Especially if it’s a timeline, it helps you keep better track of the order of incidents and have a better idea of how things progress.
Actually the responsive design is the only obvious interactive design. And I definitely think it’s necessary and not distracting at all.
Also I found an absolutely amazing one also in NY times, it uses panorama view of the house of Syrian Refugees, just like the Google Street View. It actually uses flash plugin. Just want to share with you guys~
At first glance, this picture is just an ordinary one, but wait until you click the “Click and Drag” icon on the bottom right. It is actually a panorama of the house, just like Google Street View. You can see the other walls, the ceiling and the floor. It’s just like you are standing in the room with them.
In addition, the site uses a sticky navigation bar on both the left and right sides of the container. The navigation bar is a simple arrow pointing left or right. When we hover over the arrow, we can see which section of USA Today we’ll land on once we click. In this sense, the navigation bar reminds me of reading a magazine or newspaper, turning one page after another. The user could scroll to the top of the container and use the navigation bar there instead, but the sticky navigation bar allows us to turn to the next section of the site without having to first scroll all the way back up to the top of the page.
Just about every page includes a slide show, as well. Users can flip through pictures and decide which ones they want to look at and which ones they don’t. And not only can the users click on the small side arrows to get to the next photos, but they can also look at the bar across the bottom and simply click on a photo there to see a larger version of the picture. They don’t have to click on a slideshow and then wait for the slideshow to end before moving on to something else.
The WWF in France put together a multimedia interactive journalism piece covering environment changes and issues surrounding the world’s endangered animals.
The site contains an interactive draggable timeline, with the option of either looking at photos with dates and animal images, or at an actual time line organized by animals, environments, and other important issues.
Clicking on one of the dates or events brings up a video image of the animal involved.
Once the video has finished information boxes slide up, and navigation returns.
While the site is very interactive and nicely designed — navigation doesn’t work out as well as I had hoped it would. I think making the timeline a little more stabilized would have helped to make navigation more clear and less shaky. At times you try to slide through the navigation and end up sliding past what you are trying to see, or the photo slideshow won’t show up unless you repeatedly click the top of the page.
I think having a solid frame of html/css and then containing some of those interactive elements would have resulted in a more stable and easier to navigate site.