Monthly Archives: November 2013

Church of the Atom — Cool way to look at beer

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.

Screen shot 2013-11-29 at 3.36.06 PM

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.

Screen shot 2013-11-29 at 3.36.31 PM

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.”

Screen shot 2013-11-29 at 4.04.59 PMIn CSS, it looked like this:

.fixed {
position:fixed;
margin: 0 auto;
top: 10px;
}

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.

Screen shot 2013-11-29 at 3.36.51 PM

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

Banana Cafe

Banana Cafe is a fashion website that I stumbled upon on the Internet while searching for sites with impressive use of JQUERY and other design. The page catches attention right away as it pumps upbeat music on a loop right when you enter the page, additionally the use of primary colors as the blocks in a chaotic layout creates a bold feel, which works since it is a fashion website. 

Image

 

A really awesome element of this site that I thought made it unique is the snowboarding video in the background that loops repeatedly. At first I assumed that this would be a JQUERY trick, but after looking at the coding it seems to be an element that is embedded in the html. 

Image

 

This site DOES use JQUERY in it’s design, it uses it to link elements so if users click on a link like “Lookbook” or “Marca” the page automatically scrolls down to that element. This is something that I would like to include on my interactive site, one continuous page of elements instead of everything being linked for separate pages. Another cool aspect that I found is that when you scroll over one of the colored block elements that has clothes on it, it rotates to the back side, revealing that these squares are actually 3D cubes. When the mouse is moved, it rotates back to the front. 

Image

 

This site uses some advanced techniques for making it interactive in a way that is intriguing and unique, but still totally functional for users. My goal is that I will be able to take some of the original ideas from this site and tweak them in a way that works for me as well while designing my site. 

The Guardian’s “NSA Files Decoded.”

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.

Screen Shot 2013-11-13 at 2.13.54 PM

Screen Shot 2013-11-13 at 2.14.18 PM

I found the related javascript in the site’s code:

<script type=”text/javascript” src=”http://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video-js/video.js&#8221; id=”js-gia”></script>

And the matching HTML begins from something like this:

Screen Shot 2013-11-13 at 2.39.51 PM

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.

 

NPR interactive story: Okkervil River

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.

屏幕快照 2013-11-12 下午10.06.53

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.  

屏幕快照 2013-11-12 下午10.07.13

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.

屏幕快照 2013-11-12 下午10.32.47

Users can also manipulate the scenes by changing the audio section at the top of the page.

NPR uses a track web page javascript and several other javascript to create the effect.

屏幕快照 2013-11-12 下午10.10.39

I don’t really get the entire purpose of this javascript, but I guess it allows all the zoom-in-and-out on the map.

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.

Responsive Timeline

http://www.nytimes.com/interactive/2013/07/13/nyregion/nyc-noise-timeline.html?ref=multimedia#/#time228_7605

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.

Screen Shot 2013-11-12 at 10.23.11 PM

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.

Screen Shot 2013-11-12 at 10.26.28 PM

By looking into the source, I found that this effect is achieved by a javascript that creates a path for the dot.

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~

http://www.nytimes.com/interactive/2013/09/05/world/middleeast/Syrian-Refugees-in-Lebanon.html?ref=multimedia&_r=0

Screen Shot 2013-11-12 at 10.11.39 PMAt 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.

Screen Shot 2013-11-12 at 10.15.52 PM Screen Shot 2013-11-12 at 10.15.16 PM

Javascript on USA Today

I greatly enjoy USA Today‘s use of JavaScript on its website.

One JavaScript technique found on this site is the hover effect. Each page on the website contains a grid of photos that, when clicked on, lead us to a story. The pictures include the type of story it is (ex: People, Opinion, National), the headline of the story and an image of the people involved in the story. When we scroll the mouse over the picture, the box becomes shaded, and then we can read the byline and description sentence of the story. The technique allows us to learn even more about the story before deciding whether we want to read it or not. Also, the use of photos as a way of capturing attention for a story is really effective and much more visually appealing than simply listing a bunch of headlines in a text format.

Screen shot 2013-11-12 at 3.32.43 PM

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.

Screen shot 2013-11-12 at 3.33.57 PM

I feel as though the USA Today website caters to the wants and needs of its users. The site makes it easier for us to choose which content we would like to view. JavaScript serves a great purpose for usatoday.com.

WWF Interactivity

The WWF in France put together a multimedia interactive journalism piece covering environment changes and issues surrounding the world’s endangered animals.

Screen Shot 2013-11-17 at 1.08.14 PM

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.

Screen Shot 2013-11-17 at 1.08.01 PM

Clicking on one of the dates or events brings up a video image of the animal involved.

Screen Shot 2013-11-17 at 1.08.32 PM

Once the video has finished information boxes slide up, and navigation returns.

Screen Shot 2013-11-17 at 1.08.57 PM

 

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.