All posts by innisfreee

Blog 6: A election story in graphic novel form

61d80a7937f28a2c1d30a096e50fdd4c

The Guardian used comic and JavaScript to tell the presidential election story in a graphic novel form.

By scrolling down, readers can read the story frame by frame. In each frame, the JavaScript adds action to the story, something would move in the frame or something would pop up.

e54eaab444e76efd8ab573e63d9d6d84

The story is simple, but the JavaScript helps to create a vivid reading experience by simply scrolling down the page.

I think this kind of JavaScript effect works well for a story with a sense of humor.

Blog 5: The Hart Island Project

The Hart Island Project works on engaging the public to provide information for unclaimed and unidentified burials on Hart Island, New York City.

The website is easy to navigate with a sticky navigation bar at the top and a clear footer.

I really like the Traveling Cloud Museum page. By scrolling down, you’ll see all the names of people buried on the Hart Island, each with a timer showing how long they’ve been buried there without being identified. If a story is submitted for the person, the clock will stop and the person’s name will be lighten up. I think this interactive design shows the value of the project, the respect for every individual and helping the lost stories to be found.

Screen Shot 2015-04-05 at 11.21.37 PMTheir intended audience are New Yorkers and nationwide audience. Everyone can register and submit a story that may be published on the website.

I really like the website’s color palette, simply black and light yellow, solemn and not gloomed. I’m not so sure about the rounded sans serif choice. It seems a bit playful.

Blog 4: Mashable’s coverage of Apple Watch Event

The Apple Watch Event on Monday morning is a big deal for people who are interested in technology and Apple products.

Mashable packages a series of stories for the Apple Watch Event and they also have a live blog for the event.

The package appears on Mashable’s homepage as a dominant package across the top of the page. You can click on individual articles to read the stories.

Screen Shot 2015-03-09 at 12.31.31 PM

I think the individual story pages are too noisy. There’re other unrelated stories displaying on the side, and if you scroll down, there will be an infinite stream of other stories. The related stories in the package are listed on top of the article, which I just ignored at first because they appear the same as other unrelated stories and websites usually don’t have related articles on top of a main article. I think the story package doesn’t have a strong structure for readers to navigate and is with too many distractions on the webpages.

Mashable does a great job at combining different kinds of media to tell the story. They have a story on “18 songs that should be used during the Apple Watch unveiling,” which is a fun idea to combine music with a technology event.

I like the live blog idea. I think it’s thoughtful for many readers who are working on Monday morning but still want some fresh and juicy information on the event. Mashable has six reporters twitting the event, three from the event and three from the newsroom. Browsing the tweets, I feel like listening to several friends talking about an interesting event. What’s not so good about the user experience is that the page is loading slow because of the live stream.

They’re adding stories to the package as the event releasing new information on Apple’s new products.

Blog 3: CSS Transition

I found a CSS transition effect from this website. http://www.phillipspart.com/. When you hover your mouse over the magnifying glass on the picture, a block with words on it would come out.

7b99262e69142209b1f334d810a65e3c

When I tried to find the CSS coding of the element with Chrome, I got something like this:

-webkit-transition: all 300ms;

-webkit-transition-property: all;

-webkit-transition-duration: 300ms;

-webkit-transition-timing-function: initial;

-webkit-transition-delay: initial;

-moz-transition: all 300ms;

-o-transition: all 300ms;

transition: all 300ms;

transition-property: all;

transition-duration: 300ms;

transition-timing-function: initial;

transition-delay: initial;

I think there should be a part that’s about “hover,” but I couldn’t find the complete coding for the transition.

After combining the transition coding from several websites, I made a transition effect like this:

95f868fa286e96956f26260c53cef0b2

(If you copy paste the coding directly from the blog to TextWrangler, the coding won’t work because the quotation marks display wrongly on the blog)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title> Transition </title>
<link rel=”stylesheet” href=”test.css” type=”text/css”/>

</head>
<body>

<div id=”container”>
<p>Surprise!</p>
</div>

</body>
</html>

CSS

#container {
width: 10px;
height: 100px;
background: lightgreen;
-webkit-transition-property: width ;
-webkit-transition-duration: 300 ms;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
transition-property: width;
transition-duration: 300 ms;
transition-timing-function: linear;
transition-delay: initial;

font-size: 50px;
font-family: “Comic Sans MS”, cursive, sans-serif;
list-style: none;
margin-left:100px;
}

#container:hover {
width:500px;
color:lightyellow;
height: 100px;
}

What I really want to figure out is how to make the words appear and disappear together with the transition.

Blog post 2: Bloomberg Business

One of the big news for web design recently is the redesign of Bloomberg Business website.

Screen Shot 2015-02-09 at 1.50.36 AM

“I think some of the best news and web design is a little bit uncomfortable when you first see it,” says Joshua Topolsky, editor of Bloomberg Digital and one of the people in charge of the redesign.

You can easily see the connection between the wild redesign and Bloomberg Businessweek’s bold magazine covers.

6806776681_3a8e816247_b 7262151796_569ea636f9_b bx54utrcaaejru_

Anyway, let’s take a deep breath and talk about Steve Krug’s five guidelines of good web design.

Hierarchy

There’s a clear visual hierarchy on the website which is shown by the size of the blocks. What’s better is that it’s digitally flexible for showing the important stories. Editors can “very quickly reshuffle what we’re doing on the page, because every module is moveable,” Topolsky says. They can “snap them together like Lego.”

Josh Tyrangiel, Bloomberg’s senior executive editor for consumer products, tweeted for one of Bloomberg Businessweek’s cover story, “our new cover story, inflated to 12.5 psi http://buswk.co/1CisdFO.”

Convention

The dizzy blue? The Web 1.0 gradient? The screaming fonts?

Well, it’s not bad to have someone who can challenge conventions, especially in those big institutions.

Screen Shot 2015-02-09 at 1.57.50 AM

Page breakup

The page is clearly broken up by bars, strokes, blocks and really really nice white space. I like the horizontal sections between the big groups of blocks on the front page.

Screen Shot 2015-02-09 at 2.02.33 AM

Clickability

The blocks are like huge buttons that you can easily tell they’re clickable. When you hover your mouse over the texts, they will change their colors to show you their clickability. There’re a lot of mouseovers on the home page to provoke your interest to read the stories.

Noise

It can be a noisy website in terms of its loud colors and the quirky fonts on some of the feature story pages; however, it’s also a clean website, thanks to its clear alignment and beautifully designed white space.

Just as Steven Perlberg, a Wall Street Journal reporter said, “I feel like the new bloomberg.com is screaming at me but I don’t mind.”

What I don’t like is the infinite scroll on article pages. It gives me anxiety to have so much information on one webpage.

Blog Post 1 by Lihua: Serendipity

Serendipity is a project created by artist Kyle McDonald and a Spotify team. The project records two people who start to play the same song within a tenth of a second of each other and shows the location of the two people and the name of the song on a map.

A cached version of the tracks recorded over one hour of one day is available on Spotify. You can see the song name and the two locations pop up while the map zooms in or out. The song will play for a few seconds until the next serendipitous moment occurs. You can click on the play button at the top-left corner on the webpage to stop jumping to another moment and keep listening to the song.

Screen Shot 2015-01-26 at 11.02.14 AM

This is an experimental multimedia project that explores how we can use technology to show content in the way we never had before, not just a simple combination of audio and visual elements. The project was built with the Spotify Web API, d3.js, and Storm. It relies heavily on coding to gather and display data.

The design looks clean and modern. It’s easy to understand and easy to use with a play button and a mute button. The webpage also offers share buttons for Facebook and Twitter. The Serendipity display webpage looks simple, but with all the elements of a multimedia project: text, visual elements, motion, sound, interactivity and social sharing function.

The project doesn’t look quite practical at the moment, but at least it’s an interesting new experience for Internet users. It shows the trend of combining technology and art together, and it visualize how we’re more connected in today’s world.