Screen Shot 2014-11-09 at 7.21.41 PMThis 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.

You can see they used javascript to make it interactive- it’s how they have the hovering and have the information pop up at the side. CSS was mainly used for basic styling. I just really think it’s a cool way to make data interactive, so that the viewer doesn’t get lost in all the information and can focus on however much of the data they wish at one time.


BLOG SIX- Si Digital’s JavaScript Magic

屏幕快照 2014-11-09 下午2.44.26

This JavaScript site is Si Digital‘s new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. We can see such technique easily guides the user through our services, with liquid moving through tubes activating an animation at each stage.

To achieve this effect they used jQuery .animate(), using its step() option to work out where the liquid was in the tube – and if it needed to activate any other animations on its journey. We know that viewers tend to find their own interest whenever they head on a site and engage. Everybody reads at different paces. Here, Si Digital tried to find the right balance for the liquid speed, which is not too slow but trackable. Not too much embed of JavaScript makes such great impact on the overall effect to a site. Finding the creative way to present is sometimes more important than the actual technical showcase.

Blog Six: New York Times: A Nation Challenged


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.

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.

BBC News uses JavaScript

Almost every news site I looked at uses JavaScript and jQuery. I never knew how important this aspect was. In fact, I generally took these tools for granted. When I first started designing I was frustrated because I didn’t know how to do them when they are so commonly used. Now that I know how it has become exciting and has improved my designs drastically.

Screen Shot 2014-11-07 at 9.54.59 AM

BBC News is my example of a news site using JavaScript and jQuery. Just one example is a slideshow of videos towards the middle of the page. I noticed this aspect because I wanted to do something very similar for my True/False website. Unfortunately, we had not learned JavaScript and jQuery yet, so I was unable to do this. I am looking forward to adding this aspect and others like it into my next website. I think this is important to the readers because they have been trained to use aspects like this and like more options. This slideshow is a simple, clean and easy way to give them these options.

Blog 6:DJane Dominique Jardin uses of Jquery

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.

Screen Shot 2014-11-07 at 9.42.42 AM


and then the a picture of Dominique appears:

Screen Shot 2014-11-07 at 9.45.59 AM


that quickly fades into another picture:

Screen Shot 2014-11-07 at 9.42.45 AM

before you’re finally brought to the home page of the site:

Screen Shot 2014-11-07 at 9.43.01 AM


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.

Screen Shot 2014-11-07 at 9.50.44 AM


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.

Screen Shot 2014-11-07 at 9.53.32 AM


The site uses a lot of javascript and jquery in the coding. She has her music videos embedded on the page so just press play and keep scrolling.  Also she has some examples that we’ve learned in class, like the hide/reveal (the boxes on this page flip completely to show new information). This is a technique I really want to use on my next site.

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!



Some Random French Student’s portfolio


Here’s the link:

I found some random French designer’s portfolio site. I don’t know anything about the guy, but I like his website. It has a nice moving parallax effect when you first scroll down the page. I think it might move through frames of a video or something. I’m not sure how he got it to move to the side like it does.

I also like how he displayed his work. Three big bars come across the screen and each one leads to another section of his work. I’m pretty sure this is jQuery. I like it because it’s a very innovative design. It’s different from any other websites, but it still works well and looks nice.