Category Archives: Uncategorized

Blog 6: Urban Influence

Screen Shot 2015-04-27 at 2.06.59 AMUrban Influence is a design and creative strategy company. Their website contains a lot of cool CSS and jQuery features. The “work” page allows you to hover over multiple components in the grid, and it gradually changes color in an overlay and has animation with the line under the title. I decided to see what the code was for the hover effect, and it is applied in the CSS with the following code.The #c5a47e gives the yellow-ish color.

Screen Shot 2015-04-27 at 1.58.59 AM
.overlay,[class*="overlay"]{position:absolute;height:100%;width:100%;z-index:5;display:block;top:0;
left:0;z-index:2;background-color:rgba(0,0,0,0.6);-webkit-transition:background-color 1s ease;
-moz-transition:background-color 1s ease;transition:background-color 1s ease}
.overlay.overlay-alpha,.overlay-alpha{background-color:#c5a47e !important;opacity:.7 !important}

Blog 6: NY Times Interactive Quiz

I decided to do the new york times multimedia quiz on how people talk. It was hard for me to figure out what actually created certain actions looking at the jQuery. However, I believe I definitely know what this does:

function surveyEnd() {

// fade out survey holder

$c.find(‘.quiz-container’)

.fadeTo(500, 0, function() {

$(this).hide();

// fade in the map holder

$(‘.map-container’).fadeTo(650,1);

})

// bring back map preloader

$c.find(‘#map-preloader’).show();

// get answer indices

$.each(responses, function(k,v) {

if ( v == ‘1’ )

answers.push(k);

})

This should be what happens when the survey ends and it fades out. The box goes away and a big map fades in. The .fadeTo is very simple but it makes for a clean switch. It is not distracting at all.

survey end and restuls
survey end and restuls

I wish I knew what the jquery was for the actual quiz. When the cursor goes over a possible answer, it is underlined and when it’s clicked it turns green and an X appears in the box. Once you hit next, a map will pop out on the side showing you a specific result for that answer. I wasn’t able to find it but I thought that was a simple, non distracting way to have answers be selected. Hopefully someone can help me figure this out.

Quiz
Quiz

Blog 6: White Frontier Brewery

The website I choose for this week’s blog is a brand website for a swiss beer company, White Frontier BreweryScreen Shot 2015-04-13 at 6.44.50 PM

The website is very beautifully designed by a company called McArnolds in Belgium. What’s interesting about this website is that the landing page asks if the visitor is above the legal drinking age in their country, if you click yes, the button would take you to the homepage, and if you click no, you will  go the the web-design company, McArnolds’s homepage.

The website uses a lot of javascript to reach its artistic look and interactive functions. The homepage, for example, is very visually focused. Each navigation section is actually a photo gallery, or even a videos. If you hover on one section, the images would change, and the videos would move as well. Such as the beer section, if you hover on it, the image of beer will change, but the background picture remains the same, and it looks great.

Because the website uses a lot of javascript functions, and many of them I’m not familiar with, and not sure how they correspond to the effects, so I’d like to talk about one basic language I picked up from the source code–VAR.

Screen Shot 2015-04-13 at 6.45.33 PM

var is a very keyword that declares a variable, optionally initializing it to a value. var affects the variable scope: Inside a function, all undeclared variables are global. Only those declared with var are local. This becomes very important when you have a lot of scripts running on the same page.

<script type=”text/javascript“>

//<![CDATA[
var controllerName=”home”;
var actionName=”index”;
var base=””;
var baseLang=”/en”;
var lang=”en”;
data={“showLegal”:true};//]]>

</script>

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.

Blog 5: NPR’s ‘Planet Money makes a t-shirt’

Screen Shot 2015-04-01 at 6.34.12 PM

NPR decided to follow a shirt around the world through production, exploring the cotton, machines, people, boxes, and wearers that are involved in the making of a shirt. The piece incorporates text, photos, video, and music within the videos. Each element of the story has text and video. It’s very interactive, but it’s easy to navigate, and the site organizes all of the information well. The audience is anyone who is a consumer, which is pretty much everyone. The point of this story is that one normal shirt has an entire world behind it, and this multimedia piece deconstructs that. The design and colors are simple because there are so many elements. I think it’s a good design because it makes it easy to navigate and doesn’t distract the audience from all the different parts of the story.

I just really love this package because it shows that the digital and multimedia aspect of the story was there since the very beginning. It wasn’t thrown together online at the very end. The plan and organization was planned out so that the reporters could get video and text and photos for every single section. I think that I can borrow the navigation bar for each chapter that the website has at the bottom of the page that you can hide and show easily.Screen Shot 2015-04-01 at 6.34.29 PM I think I can also the heading, subhead, and button they use for the top of each story section. When you click the button, it shows the video, which is really clever because it acts as a heading for the text as well as hides the video underneath, making sure to think about space and layers in a really smart way.Screen Shot 2015-04-01 at 6.40.57 PM

Blog Post 5: St. Louis Browns Historical Site

Screen Shot 2015-03-30 at 11.21.02 AM

I would like to improve on two things in my designs for the second interactive website, which are simplicity and visuality. And these two qualities are exactly what I think the St. Louis Browns Historical Society has presented.

This site creates a full-screen experience leading the user through the timeline of the baseball team’s tenure in St. Louis. The historical nature of the story lent itself to a textured, vintage-feeling design. The tone of its background color, and the font of texts have also brought out the feeling of history.

The whole idea behind the design of this website is very simple. On the landing page, the designer used a video of the baseball team as background. The color was toned to very light. There are two clickable buttons on the landing page, one is to enter the website called “play ball,” and another is the menu.

Screen Shot 2015-03-30 at 11.21.23 AM

I like the design of the menu a lot. It’s convenient and also artistic. Social media links like Facebook, Twitter and Youtube Channel are included in the menu to avoid clutter on each page.

Screen Shot 2015-03-30 at 11.21.54 AM

If you click on the “play ball” button, chapters of the team’s history will show up. You can scroll to choose different chapters. Each chapter is represented by a picture that corresponds to the history of its era. The page looks clean but conveys strong message through the visuals. I really want to make my own site as simple and powerful like this.

Blog 4: Vogue’s coverage of the Oscars

Screen Shot 2015-03-09 at 11.21.00 AMIt is not very surprising that a fashion website like Vogue would do a special report on the Oscars, and it is even more understandable that the website would lead the report off with fashion—Oscars 2015: The Best Dressed Celebrities on the Red Carpet.

However, the fashion website does not cover the event solely from the perspective of it’s forte, it has also included articles from the angles of culture, music, movie, food, and so on. Screen Shot 2015-03-09 at 11.21.18 AM

The whole page is very visual-oriented. For readers who are mostly female, those well-taken and carefully edited pictures of celebrities are very helpful when looking for articles to read, and the texts are minimized to the largest extent. There is an obvious hierarchy  in the listing of articles: the closer to the top, the more interesting/relevant  the article is.

The page’s design looks simple and clear, which is good for a website that heavily relies on visuals. And it’s also easy to navigate. However, I feel the website does not have enough video contents in the coverage of the Oscars. Only pictures and texts can be dry to read. Readers might want something more dynamic, such as videos. The only video content on the page is from the runway of Versace Fall 2015 fashion show, which is quite confusing to me — why would they put some irrelevant on the page, between articles about the Oscars?Screen Shot 2015-03-09 at 11.20.40 AM

Then I realized it might be an ad, just like the Cadillac add, which is floating on the right side. I don’t really like the idea of making adds look like news content. I understand it looks better in the way of consistency and aesthetics, but It’s not only confusing, but also sometimes deceiving to the readers.