Javascript

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.

Advertisements

Blog 5: These Are Things

Screen Shot 2014-10-23 at 10.37.03 PM

I had no idea what site to talk about for this blog so I just googled “best designed websites” and came across this post on howdesign.com. I went through all of them and this one was definitely my favorite! It’s so adorable!

The site is so user-friendly and definitely entertaining! Instead of just having a boring, basic website to give all of their info., these designers made little characters and scenes that change as you scroll. It starts out with a little welcome where the designers/illustrators introduce yourself (in the screenshot above).

When you scroll down, the characters follow and drop down into the the next scene, where it looks like they’re standing behind the desk at their shop. They also added arrows underneath each title, so if you don’t want to scroll, you click the up or down arrows and the characters will move and perfectly position themselves in the next scene. A navigation bar also stays on the right side of the page that does the same thing.

In the next scene, the characters drop down to their “work” space and even drop into suits like you would dress a paper doll. They then have a blog space, their story, and a contact us page. Each title is a clickable link that goes to whatever it talks about- their online shop, their blog, their online portfolio. A main navigation bar is up top that also connects to all of these things. The contact “scene” was also really cool- when you click on the title “Get in touch,” a little letter pops up where you can send an email. The words “email,” “Facebook,” and “Twitter” all connect to each thing as well.

How cute is this?

How cute is this?

There were also a lot of other little clickable things in the site, like the mailbox in the above scene. Overall, I just thought this was a very cute and creative way to give people your basic information and connect all of your sites.

Blog 4: “The Jockey” Critique

Screen Shot 2014-10-10 at 11.51.08 AM

For this assignment, I chose to critique the New York Time’s multimedia package “The Jockey.” The package is the recent winner of the Best Use of Multimedia in the National Press Photographers Association’s Best Of Photojournalism 2014 Multimedia contest. The package honestly is so cool. It combines so many different forms of multimedia: text, photography, audio, video. It begins with text and a photograph, and as you scroll, a video pops up and auto plays. If you want to skip the video, you simply keep scrolling. It’s then more texts and photos and then another video and so on.

The site is so simple to navigate. You seriously just have to scroll and then click to go to the next chapter. Dividing it into chapters like this let’s you know it’s an ongoing package, not just a single story. It also helps with the package’s clean design: it breaks it up so it doesn’t overwhelm the user. The site is really clean, with a white background and black text, and then pops of color accents and the images also add some color.

The intended audience is the New York Times readers, particularly those who want to know about the life of a jockey. This encourages them to not lack in the details, and provide plenty of context and information throughout the story.

Like I said, I really like this package, but if I had to critique anything, it would be the navigation bar. It’s set in the header, very tiny, and I honestly didn’t even notice it at first. At the end of every chapter is a next button, but not a back button. They should’ve just added a back button. Other than that, I really didn’t have any problems with the site. It’s not the least bit confusing, is super clean and simple, and everything seemed to work the way it should.

CSS Techniques- Paul Currah Portfolio

Screen Shot 2014-09-25 at 7.10.52 PM

 

To find a useful website for this assignment, I just googled “best online portfolio” and came across this list of online portfolios with awesome designs. After going through them, Paul Currah’s proved to be one of my favorites. His design is simplistic- but it’s so cool. I love the bright colors and the way he styled it to look like papers. It’s also extremely interactive, which is another reason why I love it. As a multimedia and photo journalist, I believe figuring out how to make a website similar this could really be a cool way to display my work in the future.

CSS-wise, he used a lot of the techniques we learned in class. He obviously used the shadow boxes for almost everything on the page. He also has everything divided into sections- with comments in  the coding- to make it very clear how each part of the website was styled.

What I really wanted to learn- and what you can’t see by the still screenshot- is how the images on the home screen are actually individual slideshows. The coding was actually pretty simple for that- it’s just wrappers with divs as slideshows. He also used hover styling make descriptions of the projects pop up in text when you hover on a slideshow.

There’s so much coding that I’m just going to stop here or this blog is going to be way too long. But if you’re looking for an online portfolio, I would definitely check this one out.

 

Blog 2: St. Louis Post-Dispatch

Screen Shot 2014-09-11 at 2.53.07 PM

 

The St. Louis Post-Dispatch website isn’t exactly easy on the eyes. The amount of advertisements and just the organization of the stories actually makes it pretty hard to look at the home page. It’s just so noisy! You really don’t know where to look. Honestly, my eyes went to the Disney On Ice ads before I looked at the top story. So I guess good job on the advertisers part? I get that the newspaper needs to have these advertisements to survive, but I think they could find a much cleaner way to put them on their site. The “visual hierarchy” as Krugs puts it is severely lacking in this case.

As far as usability goes, once you get past the overwhelming nature of the home page, it’s not that hard to use. You can find what you need fairly easily. They have everything broken down into categories, and once you hover on the tabs there are then the featured stories and topics. So it’s pretty easy to navigate. They also, of course, have search and even advanced search capabilities, so if you really know what you’re looking for, it’s right at your fingertips. It’s also pretty obvious what’s clickable (until you click on a story, pretty much everything is clickable).

Once you do click on a story, it’s a lot easier on the eyes:

Screen Shot 2014-09-11 at 3.06.52 PM Screen Shot 2014-09-11 at 3.07.01 PM

 

While the ads are still pretty distracting, the story pages are a lot cleaner than the home page. There at least seems to be some sort of visual hierarchy to it, and the sections are more clearly defined. You have the sidebar that’s broken into its own sections: an ad at the top, the search bar, another ad, then the social media sharing links. Past that, you have “most popular stories” and “recent posts” sections. Then you get into more ads and then ads specific only to local businesses. Honestly, if they would just keep all the ads in the sidebar like this, I don’t think it would be too bad. But the one they place in the story just seems so out of place. I feel like instead of that ad and the “related links” post, the sidebar story should be extended down the page (with just a slightly bigger photo and just a full paragraph and then the link to the full article all inside a separate sidebar box). This format seems pretty standard for each story they post. However, they did actually do more of what I was thinking here:

Screen Shot 2014-09-11 at 3.16.20 PM

So, overall, while navigation is pretty easy, the site could use some cleaning up. A visual hierarchy needs to become more present, and the noise, particularly in the site’s home page, needs to be addressed.

 

China’s Supercaves by National Geographic

 

 

By Ashley ReeseScreen Shot 2014-08-28 at 10.15.15 PMThis interactive site allows the user to explore the topic of China’s Supercaves by navigating through a 3-D model created by a laser scan. When the user first clicks onto the site, they see the gorgeous photo above, complete with the headline, caption and a map that highlights where exactly the user is beginning their virtual tour. 

As you scroll through the tour, you move throughout the 3-D model of the cave. Instead of just giving you a series of static images, they used some form of video/graphics so that it feels like you’re actually moving through the cave yourself. As you come to a new section of the cave, a new blurb comes up explaining what you’re seeing, and you can watch your route being traced on the map in the upper righthand corner. 

From what I gathered, the virtual tour includes both actual photographs and images from the model; at least, that’s how it appeared through reading the captions. The story goes alongside an entirely different part of the site entitled Empire of Rock, where more of the details of the story are given in a long-form feature article, as well as some other multimedia.

Personally, I loved being able to go through such a virtual tour. In terms of story telling, I feel this really puts the user in the place of the story perhaps even better than just a video. The user can scroll through at his/her own pace and view the details as well as read what the story is about. I felt that it was very user-friendly and not at all difficult to navigate. You seriously just had to keep scrolling, and unlike some multimedia stories I’ve come across before, I didn’t feel like this one overwhelmed the viewer. 

Overall, I’d have to say I really enjoyed this site. If I had to say one negative thing, I would just say that maybe next time, see if there’s a way to incorporate audio into the piece. It would just add a little bit extra. But otherwise, I feel like this was a great use of storytelling through multimedia.