Monthly Archives: September 2013

CSS Design – Nedd

For CSS Design, I chose to look at a website that won an award for its design, the digital innovation agency based in Paris, Nedd. This website really caught my eye by its basic grid style on the homepage. I would find this design beneficial for something like an online portfolio or anything worth showing in an easy, organized fashion.

photo1

As you scroll down, you’re given more information about the company which is placed in two columns. It’s visually appealing and easy on the eyes after the main grid. However, I think there may need to be an arrow of some sort to tell the viewer to scroll down. From just the grid on the homepage, it’s a little difficult to see what this company is or does.

photo2

^^^ The icons are animated and move! ^^^

There is basic navigation buttons on the top of the page. These direct you down the page, so you are never loaded into another window. I like the idea of having everything on one, long page. I looked at the .css, and it didn’t seem too complicated. I found the grid to be represented this way:

.grid {
	width: 100%;
	/*max-width: 1140px;
	min-width: 755px;*/
	margin: 0 auto;
	overflow: hidden;

	/*
	border: 1px dashed #f99;	
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;
	*/  
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.grid-pad {
	padding: 20px 20px 20px 20px;
	height: 100%;
}

.grid-pad > [class*='col-']:last-of-type {
	/*padding-right: 20px;*/
}

.push-right {
	float: right;

Then, I noticed there was coding for each column like this:

/* Content Columns */

.col-1-1 {
	width: 100%;

I think this design is simple and visually satisfying for the viewer. It’s easy to navigate and provides more information as you scroll down the page.

photo3

Advertisements

CSS Element: how the Onion uses grids

Not only I enjoy reading few joke stories on the Onion when I feel down, but also I like how the website uses grids to organize its materials very simple and clean.

Screen shot 2013-09-25 at 8.28.22 PM

As soon as a reader enters the main page of the Onion, one can define two bigger columns and a smaller column in the center. But right below the main story of the day (in this screenshot, a story about President Cruz), the left section of the website is divided into two narrow columns, making the whole page to have four columns instead of three columns. I think it’s a good use of grids to grab the viewer’s attention: one would automatically look at the main story with a big photo on the left, then naturally scroll down to read smaller headlines.

Screen shot 2013-09-25 at 8.30.39 PM

When scroll down a little more, a reader should see this horizontal navigation bar. This bar in the middle of the website definitely differentiate from the page’s general columns, which are vertical. Such contrast would work well to grab the readers’ attention once again.

Screen shot 2013-09-25 at 8.30.09 PM

After the horizontal navigation bar, it’s back to good old 3-columns. Unlike the initial look of the page, the bottom of the website sticks with clean and straight three columns.

Overall, I really like how the Onion used the grid system. I like that its columns are simple and straight, but adds a little twist by mixing 3-columns and 4-columns, and adding horizontal bar in the middle of vertical columns. Such simple look helps the readers to navigate the site easily and to find stories they want to read more effectively.

The Chicago Reader

This week I decided to evaluate the Chicago Reader’s website. My first impression of this site is that it is very busy.  On the homepage there seems to be a lot going on and it’s not because of an overload of colors.

reader

The main color scheme is white and black with minor purple highlights throughout. The container is white with simple black text, but the background is a repetitive tile image and text advertising an event.  The background’s black color gives the site a crowded, closed off vibe- and the repetitive text and tile images don’t help. In the container it seems like there is a ton of information, but it’s really just the way the site was designed.

There is a main toolbar with different sections within each category and a smaller toolbar underneath it. Some of the categories on the smaller toolbar are bright blue while the others are black. Underneath the smaller toolbar is an advertisement of an event, which uses a different color blue. Also, a significant chunk of the container is a sectioned off area primarily dedicated to different ads, one of which uses a dark purple. Ultimately there is a clash of colors of what little color does exist between the different shades of blues and purples.

If the user scrolls down he/she will find another section with most of the same categories from the main toolbar. Hovering the mouse over the categories will switch the sections and content beneath. I’m not sure why this section exists so far down on the page or even at all. It’s redundant and perhaps would have been a better decision for the main section of the container.

The title is bold and the site seems to have a decent level of hierarchy. The most eye-catching feature on the page is the rotating slideshow of articles. Overall, the site is easy enough to navigate, but there should be more open space so that the site doesn’t seem so crowded. Because there is so much on the page, it’s difficult for the eye to figure out where to go and what to focus on. Different color choices would have definitely improved the site’s visual appeal.

CSS: Powderlife

Powderlife is a site that helps users plan trips to Niesko, a popular ski area in Japan. This site serves as a travel guide. It has a lot of cool features but what I like the most is the use of their background images. 

Image

 

The home page has 5 different sections on it as users scroll down. The first image scrolls with the page until it is hidden by the next section, which is a fixed image. The third section uses a black transparent layer over a photo. The next section follows the style of the first with the background image scrolling with the page until it falls behind the final section. 

The use of CSS allows the site to accomplish such a unique design by creating different divisions within the homepage aspect…

Image

 

Image

 

There are many more CSS elements defined as the sections continue, but the important aspect is that they are all divided and that allows them to be styled differently. 

This is definitely a feature I would like to use in building my own website. 

CSS of the Roots N Blues Website

I really like the style of the Roots N Blues website from this year. Specifically, I like the way they did the bios of the artists that were playing this weekend.

Screen Shot 2013-09-25 at 8.27.59 AM

If you scroll over the photos, they go dark. You can also click on them for a bio and video of the artist. I also just like the general shape and how they look on the page.

Here are some of the CSS elements for the parts I like below.

Screen Shot 2013-09-25 at 8.31.20 AM

Screen Shot 2013-09-25 at 8.39.47 AM

I really enjoy the way this site looks.

CSS element: background image

thankfulThankful is a wedding registry website that allows couples to personalize their own wedding registries. I’m not currently in a place in my life where I need to make a wedding registry, but I love its simple design. The large image draws users into the website and the thin, sans-serif font keeps it feeling simple.

This effect was achieved simply through adding a background image. Here is how to do it:

HTML:

<header role=”banner”>

<div class=”container” role=”navigation”>

<a href=”#” class=”nav-toggle”>

<i class=”ss-icon ss-standard”> </a>
<a class=”brand selected” href=”/”>
<img alt=”Thankful Logo” src=”//d3krjgdh5n3zsi.cloudfront.net/assets/logo-white-2x-2c7b0e88f4b861599dffed4bf30dc154.png”> Thankful </a>
<ul class=”nav-links”>
<li><a href=”/find-a-registry”>find a registry</a></li>
<li><a href=”/sign-up” class=”sign-up”>sign up</a></li>
<li><a href=”/accounts/sign-in” class=”sign-in”>sign in</a></li> </ul> </div

</header>

CSS:

element.style {

background-image:url(https://d2rdrr51ez8te0.cloudfront.net/hero-posters/fields.jpg);

}

Replace images in a video-like way

I’d like to talk about the CSS technique that replaces images in a way like a video. Photos in Pitchfork’s cover story of Bat for Lashes appear when the user scroll the mouse when reading the article orderly. The photos were taken continuously, therefore when the user scroll really fast, the replacements of the photos create a feeling of video.

The website places multiple images all under one div:

屏幕快照 2013-09-24 下午10.16.47

It adds the class of “active” to control the replacements in the CSS stylesheet, playing with opacity of each image that is about to show up.

.flipbook img.active {

opacity: 1;

filter: alpha(opacity=100);

-ms-filter: “alpha(opacity=100)”;

}

.flipbook img {

display: block;

position: absolute;

top: 0;

left: 0;

opacity: 0;

filter: alpha(opacity=0);

-ms-filter: “alpha(opacity=0)”;

-webkit-backface-visibility: hidden;

}

.autoscale img {

width: 100%;

height: 100%;

}

* {

-webkit-backface-visibility:hidden!important;

}

When enable the “opacity” under “.flipbook img” style section, the photo will disappear; when disable this code, the photo shows up.

屏幕快照 2013-09-24 下午10.08.32

This photo now is “active,” and “opacity=0” is struck out.

屏幕快照 2013-09-24 下午10.22.06

This photo is not “active,” which means it’s not showing up, and the “opacity=0” is there in the CSS stylesheet.

It’s highly recommended to go to the website and scroll on your own to get the general idea of how this technique works. And I would really like to use such technique in my future web design.