All posts by maymoqiuma

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>

Advertisements

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.

Blog 3: Mijlo Essentials

Screen Shot 2015-02-23 at 11.59.03 AM

Mijlo Essentials is a website created to complement a designer’s Kickstarter campaign for a better pack pack. The backpack developed by Mijlo is designed to be sustainable, timeless and simple. The Essentials website focuses on these traits as well.  The wite has come up with a creative way to showcase the creative items.

What I like about this website is mostly it’s background color and its positioning.

Screen Shot 2015-02-23 at 11.59.33 AM

Something I learned from its CSS language that might be helpful to me in the future:

Screen Shot 2015-02-23 at 11.56.34 AM

1. Positioning

According to the W3school, the CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big.

There are four different positioning method, which are:

1) Static Positioning: static positioned elements are not affected by the top, bottom, left, and right properties.

2) Fixed Positioning: an element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled.

3) Relative Positioning: a relative positioned element is positioned relative to its normal position.

4) Absolute Positioning: an absolute position element is positioned relative to the first parent element that has a position other than static.

The Mijlo Essentials website has used all four positioning methods

2. overflow

W3school explains that the overflow property specifies what happens if content overflows an element’s box. If it’s hidden, it means the overflow is clipped, and the rest of the content will be invisible. If it’s scroll, then the overflow is clipped, but a scroll-bar is added to see the rest of the content. And if it’s auto, a scroll-bar should be added to see the rest of the content.

 

Blog 2: Mic

Screen Shot 2015-02-09 at 2.40.45 AM

Mic is a website focused on news for a generation known as the “millennials.” Not only its content is catered to the taste of young people, the website itself is also designed in an avant-garde style.

My first impression on the site was its simplicity. It doesn’t have many features, but each one is very convenient to use. You would be able to know what the most important story is based on the picture in the up front. Beneath that, are hot stories from different sections. That’s all for the head.

In the body part, the site is divided into two main parts: “Today’s Stories” and “Recommended Stories.” The way the site aligns a story is usually a headline, under that is a general and  short comment on the story, and every story has a feature image. There are not many bars or windows that you can click on or open, but you can get most of the important information just by scrolling down.

Besides its simplicity, there are also some details I like about this website’s design. First, it’s very easy to know what’s clickable. If you move to a section, no matter text or image, if the color changes, that means the section is clickable.

Screen Shot 2015-02-09 at 2.41.11 AM

Second, the site creates a visual hierarchy on each page. Most of it’s spaces are left to stories, and the more important that story is, the higher its position would be. Besides that, all the logos for other functions, such as company’s info, and social media logos are designed very low-key, and they are all hidden in the corner of the page. For example, if you click the bar on the left top corner, it would lead to the seven platforms that are not listed on the homepage.

In addition, I think the website did a very good job in creating visual impacts. It’s story telling relies heavily on pictures, so does the web design. The pictures are in an unified size and quality, and they usually take more space than the headlines, which made it more direct to audience in terms of what these stories are about. And the font of  its text is in a comparatively larger size, which is friendly to reader’s eyes.

I think as a user, my experience when browsing Mic’s website is very pleasant. Here is the link to the website: http://mic.com/

Blog Post 1: the Ballad of Geeshie and Elvie

Screen Shot 2015-01-26 at 11.37.43 AM

It’s a story about two female African-American musicians from the early 20th century. They have angelic voice but are rarely known by the public. Their records are few and their stories are no where to find—It’s a story about music and myth, and it’s ingeniously presented by the New York Times Magazine.

Since it’s a story about music, the article embedded music from the two musicians’ recordings. There are seven songs free for listening at the end of the article, which echoes the beginning. The article contains a few names of their songs and some line of the lyrics when introducing the music style of the two women, and I find it helpful to understand the context when having the corresponding music during reading. I like the producer’s effort in typing the lyrics out and showing them in the videos when the songs are played—It feels like watching a music video.

The layout is clear and well arranged. It’s essential to keep the style simple when you have so many things to present—videos, photos, captions, interviews and music. I noticed that the color of videos and photos are almost in the same tone—a faded brown or grey, which brings out a sense of past, and also matches with the style of the music. The photos are very carefully sized—not too large, not too small, nothing abrupt. The coherence is also in the opening image of the videos—they usually start with leaves and branches, and then move forward into the topic related to the context.

The story uses their songs to introduce the story behind the two mysterious musician, and there is no better way of doing it than showing the readers their music. The New York Times Magazine managed to do it, and they did it in an artistic and elegant way.

http://www.nytimes.com/interactive/2014/04/13/magazine/blues.html?_r=1