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

2 responses to “CSS Design – Nedd

  1. I love everything in this design, the color, grids and navigation. It is a good example.

  2. I like the CSS technique you picked and I think it helps make the website neat and organized while representing the innovative spirit that the company is supposed to have. This technique not only allows all the content to be on the same, long page, but also makes the transition between pages interesting. I like how you can click on a section on the first page and see the page “flipped” to the other one.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s