All posts by ailinli

About ailinli

@ailinliailin

In Pieces – 30 Endangered species, 30 pieces

In pieces is an interactive exhibition turned study into 30 of the world’s most interesting and unfortunately endangered species.

The site is very interactive. All the animals are shown with lines and angles. The founder of the website is Bryan James, a 28 years old British website designer. He wanted to create something which not only worked as a project in itself, but also pushed this underused CSS polygons as far as possible.

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. He wanted to focus purely on the CSS route.

The code is: -webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

Even it looks pretty simple, it is scary to see the whole page of codes with enumerous -webkit-clip-path: polygon(%%%%%%). So it is not hard to imagine how many work James has put into this website. It is not something I can take from the website immediately but maybe I will be able to work on a project where I can put this into use.

Each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.
Each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.
Advertisements

Blog 5: Pi’s Epic Journey

The Life of Pi jorney site is about the movie Life of Pi. It shows behind the scene materials in frame-by-frame animation as readers scroll. The way this website uses to achieve the breath-taking visual effects is just over 100 images with heavy Javascript and CSS3 work.

On top of the website is a big intro picture with arrows pointing down to navigate readers to scroll down. Even though scroll-down interactive website is pretty common now, I still find this one outstanding because it makes it extremely easy for the readers to enjoy the contents — all they have to do is scrolling down and down. The frame-by-frame animation is engaging and each part of the website works seamlessly. It also combines videos and infographics so that readers won’t get bored.

The intended audience of this website seems to be people who like the movie and those who are interested in the production of the movie’s spectacular scenes. But I believe even those who haven’t watched the movie will be amazed after taking a look just because the way it uses to present the before and after effects of the movie scenes. This website really has taken parallax scrolling and frame-by-frame animation to another level.

The website uses less than 10 frames of pictures to show the process of virtually cloning a tiger from a bull dog.
The website uses less than 10 frames of pictures to show the process of virtually cloning a tiger from a bull dog.

I think I can borrow the way this website presents its content because it’s not very complicated but something I understand and can imagine doing later this semester as we learn more languages. Such as Frame-by-frame animation and the scroll-down technique. The color of this site is amazing as it basically uses images from the movie. I probably will try to use pictures as background next time. This site is not heavy on texts. But the typo choice is good. The characters are big enough to be seen and set the atmosphere of each section well.

Blog Post 4: Coverage of Israeli-Palestinian Conflict by Al Jazeera

Al Jazeera does a lot of in-depth special coverage on series stories, including Ebola outbreak, Marijuana in America, Ukraine crisis and so on. Among them, I especially like the one about Israeli-Palestinian Conflict. It is a good presentation of ongoing coverage that combines news, analysis, opinion and video on the latest in war and peace between Israel and Hamas.

Like all the other special coverage done by Al Jazeera, this piece can be found under news-special coverage on the navigation bar on top of the website. Once clicked in, there is the headline under the navigation bar. Right under that is three featured stories, which are often some most intriguing informative around the issue. Then there are other reportage listed in the following spaces, each has a tag to show its categories: either it is international news or U.S news or culture story. On the very right part of the page, there are other additional resources, such as video, infographics, and photo gallery. All in all, the page is clean and pretty self-explanatory.

Reporters of Al Jazeera also did a good job of combining different techniques of multimedia on reporting the issue. On top of text stories, they effectively used a infographic to show a chronology of disproportionate attacks on Gaza, which includes a timeline of the ongoing Israeli military operation in Gaza, quotes from politicians, compensation and cumulative death of both Israelis and Palestinians. In one of the features story Who owns Jerusalem?, maps are used to tell the history.

The intended audience for this story is people who care about or are interested in the conflict between Israel and Pakistan, but from the choices of features stories, we can see that the coverage intends more to educate people who are not familiar with the issue.

The fact that this coverage in under special coverage tells readers that it is an ongoing story. Every big story has its own page, and for those kind of stories, Al Jazeera uses the same template and arrangement of sections for every special pieces, where latest or features stories about the issue can be found most easily, and then the readers can go on and read the rest of the story. The site can always post new stories to add to the existed page. Any visitor can leave the page with a thorough knowledge and understanding of the issue.

2015-03-09_11-33-34

Web Design Southampton: BrightByte Studio

2015-02-23_09-52-54

I found this site on a website that collects all the cool websites for designers. This site attracts me because it is displayed in the way that I want to design my own personal website. It is clean, stylish, user-friendly, and all the images on it are large and visual.

One thing I’d always want to learn is how to stabilize my navigation bar to make it always on the top of the page however the page is scrolled down. I’ve seen a lot of websites with its navigation bars always on top or left, making it very easy for users to navigate whenever they want. I also would like to say that the web developer tool bar is very useful; it allows you to check the specific CSS or other web language of the certain element on a page. I didn’t expect it to be that easy to style the navigation bar this way until I saw it in the CSS style information. It is just like this:

#nav.fixed
{
  position: fixed;
  top: 0px;
  z-index: 100;
  bottom: auto;
}

I also like the way the site display the pictures and how the pictures appear when hover. But I still need to figure out how did the designer do it.

a, a:visited
{
  color: #c76c5d;
}

:focus
{
  outline-width: medium;
  outline-style: none;
}

.full_link
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

a:focus
{
  outline-width: medium;
  outline-style: none;
}

a:active, a:hover
{
  outline-width: 0px;
  outline-style: none;
}

a:link, a:visited:link
{
}

Blog post 2: The Chicago Tribune

One thing I like about chicagotribune.com is that it leaves enough white space between sections and news, which makes it easier for readers to read through. In the article’s words it helps readers “divide the content into digestible pieces of information”.

In terms of following conventions, the website has something unusual. Its navigation bar is on the left instead of the top of the site, and it stays still when users scroll down the page, that means users can navigate to another section whenever they felt like easily instead of scrolling all the way up to the top. That could facilitate its users and save their time especially if they scroll down a lot.

The site makes it very clear what are clickable. headlines and excerpt changes colors when hovered over, and pictures become bright and move slightly. But one thing I noticed is that the site has some ads on it that may do a disservice to the website. For instance, it has an ad that shows what looks like a piece of news as it has the logo of Times or Huffington Post and also how long ago it was published and number of comments, but it is actually a news website about foods. Users are very likely to be deviated to that website when they didn’t realize it’s actually ad. I think the website should avoid advertising for its potential competitors, like other news website.

Another thing I like about the site is its Visual Browse, which serves users that enjoy picture better than text well. When click this button, the background turns black and the main page is taken over by pictures and a few text below them, and users can keep browsing pictures until they find one that interests them and click it to read the full text.

Overall the site provides good user experience. If I were to change anything, I would display news on the main page according to its click rate, newsworthiness or time relevancy instead of the never-ending pages divided into sections that can be easily navigated to from the left navigation bar.

Blog Post 1: A Year In Waste

This site presents a project done by Al Jazeera America about food waste. The author himself recorded every food item his family threw away during 2013, and found out that they wasted far more foods than expected. The author used simple infographic and food icons through the article and it is not as complicated as some other multimedia works. But the design matches the casual diary-like style of the article and makes the reading experience easy and informative.

The site is pretty easy to navigate. To me, one of the scary things about reading long-form stories online is the never-ending page and the tiny and almost unmovable scroll bar. That’s why I seldom finished reading long-form pieces and always got distracted. But this article is short and sweet; you can scroll down and read through the whole page in less than ten minutes without having to click to go to another section, and yet it contains everything I want to know about food waste in America.

2015-01-25_21-54-58
Credit: Al Jazeera America

The cover picture is intriguing and stylish. It made me wonder whether the designer did waste those foods to get the messy background of eggshells, tomato sauce, mushrooms, grains and leftovers. This picture with the title A YEAR IN WASTE clearly tells the topic of this site is food waste, and when scrolled down, a subtitle and introduction in bigger letters gives a better sense about the content of the project.

2015-01-25_21-55-56
Credit: Al Jazeera America

2015-01-25_23-34-26

After several paragraph about food waste condition in his family, the author goes on to further explore the larger picture of food waste in the country. An inforgraphic interpreting data from United States Department of Agriculture that tracks food loss shows the breakdown of 31% waste of food supply in America. The inforgraphic uses different colored and sized circles to show the scale of waste in every category. If time and resources allows, I think a more interactive and visual one could be made.

Following up, the author analyzes why so many foods were wasted by the family and gives a list of detailed foods they had wasted — the design that divides the account of the author and the list he made makes it visually more like a real note. The clearly divided categories and detailed units reminded me that food waste of mine kitchen could be as terrible as this.

Overall, this site doesn’t have audio or video to make it an intricate multimedia piece like many we have seen ever since the success of “Snow Fall” by NYT. But it combines great color and clean icons and uses infographic that helps better present the data and content visually.