All posts by jinghongchen

Blog 6: The Russia Left Behind

I chose to study the New York Times story, The Russia Left Behind. It is a simple yet well-designed website that contains texts, slideshows, videos and interactive maps. After examining its codes, I found that this website uses a lot of “attr” in its jQuery.

Screen Shot 2015-04-13 at 1.20.56 AM

For instance, the website uses the codes below to make the effects of its slideshows:

container.append(“div”)

     .attr(“class”, “slideshow-button slideshow-button–next”)

     .on(“click”, function() { stopPlay(); showNext(); })

   .append(“svg”)

     .attr(“class”, “slideshow-button-arrow”)

     .attr(“width”, 22)

     .attr(“height”, 22)

   .append(“path”)

     .attr(“d”, “M3,1.008L20.742,9.045L3,17.083L6,8.917Z”);

W3Schools suggests that the attr( ) method sets or returns attributes and values of the selected elements. When the “attr” is used to return the attribute value, it returns to the value of the first matched element; while when used to set values, it can set one or more attribute or value pairs.

When it is used to set the attribute and value, it is always in the following format–$(selector). attr(attribute, value). So in the “.attr(“width”, 22)”, the attribute is width and the value is 22.

By using this method, the website can be more active and engaging.

Advertisements

Blog 5: Olympic Story

I choose to critique the Olympic Story website. The website is easy to navigate and engaging. When clicking on the “list” icon on the left, the list of chapters will show up. Then the audiences can easily go to the part that interests them the most. The website also makes a timeline at the bottom; when hovering on the dots and clicking on them, information of a specific year will appear. The website also makes a grid that lists all the years of the Games. However, the Games after 1998 fail to show up from time to time, causing confusions.

Screen Shot 2015-03-30 at 9.43.06 AM

The website combines texts, visual elements as well as videos to present the history of Winter Olympic Games. The introduction contains several clips of key moments in the history of Olympic Games. The visual designs also introduce the audiences basic information by using icons, numbers and interactive maps, providing more engaging and pleasant user experience. Personally speaking, the only thing this website can improve is that the texts are too short and the information are limited.

The intended audiences are those who are interested in the history of Winter Olympic Games. In order to attract those audiences, the website provides not only clips of videos and plain texts, but also easy-to-understand numbers and interactive maps. As the story contains different parts, the website uses dots to make a timeline that helps readers to navigate.

In terms of the design, the color is clean and neat. As the story is about Winter Olympic Games, the website uses blue and white to emphasize its theme. The website mainly uses visual elements such as data visualization and infographics to present the background of each Game with one or two paragraphs text. The typo is consistent, clear and easy to read. The hierarchy of typos also helps the readers better understand the information even at the first glance.

In terms of the design, the color is clean and neat. As the story is about Winter Olympic, the website uses blue and white to emphasize the theme. The website mainly uses visual elements such as data visualization and infographics to present the basic information about each game with one or two paragraphs text. The typo is consistent, clear and easy to read. The hierarchy of typos also helps the readers to understand the information at the first glance.

Blog 4: Ferguson Portests

Screen Shot 2015-03-08 at 11.58.22 PM

I choose to critique BBC’s coverage on Ferguson protests. BBC is famous for its coverage on breaking news and its comprehensive analysis. In this story package, BBC, as usual, provides amply information and uses different kinds of media. The editors mainly use text, embed informative photos, like the preliminary autopsy report and map of St. Louis, videos and audios to present a whole picture of the protests. The text helps explain the whole story; photos showcases the intensity of the protests, and the video and audios can bring the readers to the spot and sense the tension. But the editors did not use any infographics or interactive designs.

Screen Shot 2015-03-08 at 11.58.33 PM

As an ongoing story, BBC made a video timeline to present the causes and consequences. However, the timeline is embedded in an article named “The first sparks”, thus the readers may skip the timeline if they did not pay much attention. The coverage did not only contain breaking news, but also in-depth analysis and data, so in terms of content, BBC did a good job on emphasizing it as an ongoing story. Yet, in terms of design, the designer failed to clearly present the audience that this is a package of story that being updated each day. The contents seem a little bit disorganized without clear hierarchy, thus the audiences may feel lost when looking through the whole package.

The user experience is a little bit boring. BBC is not as much stylish as other news websites like USA today or the Guardian. The layout is simple, which only contains three columns. The overall design is clean but too simple, as there is no interactive designs in this package. I think in terms of this story, it would be better if the designers make an interactive storyline integrating photos and text in a way that attracts the readers. Or perhaps the designers could try to add more design elements, like making the titles of stories show up on the images when the users hover the images.

The intended audience is people who are either simply looking for news or being extremely interested in Ferguson shooting, and they probably are familiar with BBC. Thus they may get used to the simple and dry style of BBC, even appreciate it. It is understandable that BBC prefers to stick to its style. However, lacking of interactive elements or visual elements would fail to get the interest of potential audiences and help them digest the information.

Blog Post 3: Dadaab Stories

The Dadaab Stories impresses me by its clean and neat layout and interactive elements that engages the readers. While inspecting its code, I found some tags that are essential to web design which can add spices to a plain page.

Screen Shot 2015-02-23 at 11.03.10 AM

The first tag I found is “overflow”.

.tiny_avatar{

position:relative;

display:block;

float:left;

width:25px;

height:25px;

background-color:#fff;

background-size:cover;

-webkit-border-radius:2px;

-moz-border-radius:2px;

border-radius:2px;

overflow:hidden;}

The over-flow tag is to specify what happens if content overflows an element’s box. In this website, if the content overflows, it will be automatically hidden without overlapping with other elements, which is very useful. The W3c School also suggests that it also has several values, such as “scroll”, “visible”, etc. I think in my future design, I probably will use the “overflow: scroll”, to offer more information within limited space.

Another useful tag is “animation”.

.tumblr_controls.transition {

-webkit-transition: top 0.1s ease;

-moz-transition: top 0.1s ease;

-ms-transition: top 0.1s ease;

-o-transition: top 0.1s ease;

transition: top 0.1s ease;}

iframe#tumblr_controls.tumblr_controls.sticky.transition {

-webkit-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-moz-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-ms-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-o-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

top: 0 !important;}

.tumblr_controls.sticky.transition {

-webkit-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-moz-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-ms-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-o-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

top: 0 !important;}

This tag is used to make the web element active and animated, which improves user experience. In this website, when you hover the “tumblr” button, a picture unfolds with text on it. I am not one hundred percent sure about how it works, but I think that the “animation” tag must play a role in this effect. I would like to use this tag to make my page livelier and cooler in my future design.

Blog Post 2: The Los Angeles Times

I chose to critique the website of Los Angeles Times. As a well-known news outlet, it covers local, domestic and international issues, so I want to examine how the website arranges and presents all the information.

The hierarchy of its homepage is clear, as it lines off different sections. Larger photos and headlines also help the audiences to have a general idea about what the important news are at the first glance. The website also uses different colors (black and grey) and different fonts to separate the headlines and excerpts of the stories.

Besides, its navigation bar is very direct and user-friendly. It locates on the very left of the homepage and its black background color can easily grab the audiences’ attention, as Friedman suggested that a website should “manage to focus users’ attention.” By listing all the sections in the navigation bar, readers can easily find the section that interest them the most and switch to that section by clicking on it.

It is worth to mention that the website also designs a visual browse that mainly uses photos to present news. Each page only has three to four photos with one sentence under each of the photo, which fits the demand of the readers who prefer getting news by scanning photos.

The website also takes advantages of conventions by following the formats of newspapers. It mainly uses black and white– the basic colors of print newspapers. I think these simple colors somehow help the readers better focus on the stories.

The headlines, photos and videos are all clickable, and when hovering on them, readers will notice the change of the cursor. Besides, the title of each section is short and concise, which meets the principle of “making use of effective writing.” The phrases like “L.A. Now”, “Popular This Hour”, “In Case You Missed it”, etc., all make the readers understand the contents as quickly as possible.

The only thing I would like to change is to minimizing the noises. Here by “noises”, I mean advertisements. I understand that nowadays, news outlets’ revenues are mainly from commercials, yet putting advertisements right below the newspaper’s title is a little bit annoying. I think it would be better to put them in sidebars.

Overall, the design of LA Times is efficient and user-friendly. It has fruitful contents as well as simple and clear design, which meets the principles of web design suggested by Friedman and Krug.

Blog Post 1: Firestorm

The Guardian piece “Firestorm” is a multimedia project that takes readers on a journey to Tasmania, Australia, in which a bushfire almost devastated the community. The story is well-written; and its mix of pictures of motion, radios, videos and an interactive graphic makes it an enjoyable and engaging reading experience.

Screen Shot 2015-01-26 at 11.15.48 AM

The website overall is user-friendly and well-organized. In the bottom of each page, the phrase “scroll down to continue” gives readers a clear instruction. On the right side of the website, a list of the titles of all chapters of the story can be found, giving readers a clear sense about the structure of the story. And when you hover over the titles, you could see the specific components of each chapter. Moreover, right in front of the components, icons indicating different forms of storytelling can help the readers better find their own interests and have a general idea about this multimedia project. When you click on the titles, they will directly lead you to the content you wish to read. In addition, there are no advertisements distracting reader’s attention.

However, the typography of the project makes me feel a little bit uncomfortable as the strokes are too thin in white. Another problem is that as the phrase “scroll down to continue” always remains on the bottom of the page, it overlaps with the story texts from time to time, making it hard to read. In addition, the website is too sensitive that readers may find it hard to control the scrolling thus unintentionally skip some contents.

The website uses all kinds of storytelling tools, and perfectly combines them to reflect the topic. From the very beginning, readers will know exactly what the website is about. Photos of scared children, moving photos of rising smokes and sounds of hovering helicopter all give the readers a tense atmosphere, which perfectly fits the story which is about life and death. In most of the chapters, videos, photos of motion, radios, and infographics assist the texts. The videos provide the points of view from witnesses and vivid scenes that attract the readers. It is also worth to mention that the videos are no longer than two minutes, which is good, as the readers always better focus on short videos.

In addition, this website successfully builds a contrast between scenes before the fire and during the fire. By using the photos of flowers that swinging in the wind and sounds of twitters, the project indicates the peacefulness of Tasmania, arousing readers’ interests to read more and see more about the fire. The project also uses an infographic to analyze the statistics of bushfire in that area, giving readers more background information. Overall, the use of media is diverse and balanced.

As I mentioned before, the topic of this website is very clear. From the very beginning, readers can easily understand this project’s theme. The videos, radios and photos all work together to make the whole story complete and alive. The design of the website is clean and appropriate. There are no fancy calligraphies or colors, as this project, in general, is a serious story about life and death. Yet the photos and videos are in high quality with beauty, which bring a better reading experience.