Design Dissection

[renat-blog]

Dissection of Yquem.fr

Today we have a site that won a Site of the day on Awwwards.

http://yquem.fr/

This beautiful site tells the story of a French wine producer and showcases the product.

See the overview:

Site's content structure can be divided to:

Home page gallery containing links to the selected articles

Anecdotes page containing short stories and animated images

Individual articles every one of which is designed as a scrollable gallery-like page

Vintages gallery. A navigable collection of wines divided by years

The first time the site asks you if you are the legal age and lets you chose your language.

Home page

When you enter the site you see the gallery which is as tall as your browser window. On the right side of the screen links to anecdotes are shown in a slider. And on the left side gallery navigation with the link to the site menu are displayed.

The gallery has a vertical navigation and an interesting vertical display time indication effect.

Home page layout is the layout that is used on the most of the pages of the site.

Anecdotes

One of the site's jewels adding personality is its Anecdotes section. Those are 20 stories with animated illustrations from the history of this wine producer. Some of them are just nice illustrations and some display useful information.

Articles

When we click the site navigation link (hamburger icon) we see a new section sliding into view. It contains links to main articles.

Here designers divided content into 3 categories: Le Château (contains articles about the company), Yquem and Y (articles about products, divided by brand names). Also on the page we see shortcut links (under the Find a vintage header).

When we open any of the articles, it feels like viewing a mini-site. Every page is individually designed and contains gorgeously integrated images and text.

At the bottom of every article we can find links to other articles so that the reader can continue his experience without opening the navigation section.

Vintages gallery

The site works as a catalog for wines of different years. 

The wines here can be arranged by the year or by the color. They can be viewed in a grid or one by one.

As there are two brands of wine on the site (Yquem and Y) designer designed the pages with catalogs differently, so one has a dark background and another a light background.

When we click on one of the bottles in the list, we can read more about the weather conditions on the selected year and about the qualities of the wine of the selected vintage.

I like how designers displayed the years where there were no wine produced illustrating it with an empty bottle.

Arrows next to the year also let us click through different vintages without leaving the page.

Code dissection

Just a little detail I noticed while scrolling the pages. Images in articles react to scrolling in subtle ways, like changing opacity or displaying parallax-like behavior.

Images were animated through transform: matrix by changing it's last value depending on the object's position. Different classes (move, fade) applied to the images and depending on the class scripts display the effects. The only trick with the parallax animation is to place images in the containers that are smaller than the images. But no absolute positioning was used here.

Also used

Modernizr, Greensock, Hyphenator (client side hyphenation for webbrowsers), jQuery throttle / debounce (rate-limits functions in multiple useful ways).

Outro

The site leaves a good impression of a sophisticated product. Minimalistic design, amazing photos and great typography succeed in convincing the audience in the quality and high level of the wine producer and his wines. The anecdotes and the catalog make the site not only useful but also entertaining.

[renat-blog]

Dissection of grouek.com

This time I'm dissecting a site of a studio that produced lots of award winning sites. Their own site took Site of the day on FWA.

http://grouek.com

Site is a portfolio of the studio so it's rich with images and has minimalistic design with some interesting details and effects.

See a video overview:

First of all, I found a humans.txt file on the server so there we can see full list of developers and designers with their contacts:

http://grouek.com/humans.txt

The site has a home page which is a scrollable gallery of projects. Title of the project and its short description with a huge screenshot on the background. Scrolling between the projects goes with changes of the background with a dramatic animation.

About Us page is a long page with some facts about the company.

Search brings us to a well designed project filter.

When we switch screens we notice that moving between them happens with a very interesting slider effect.

Small details and subtle effects really make this site work. But how they made is the question for the next section.

Code Dissection

The whole site is just one page. Even when we click a link in the menu only a URL in browser changes and new content loads instead of the previous. That's how sliding effect between the screens is possible.

And how was created the sliding effect? By using canvas HTML element. The same canvas displays the projects gallery on the home page.

But some of the DOM elements were animated through CSS and we are going look at them closer.

Like in the example above, some elements are animated through "transform: matrix". This property gives more options than animating the width or height of an element.

See the Pen EaXdze by Renat (@rafikov) on CodePen.

Links in the Clients block also use matrix transforms. And you can see an interesting effect with animated lines above and under the link's text. This effect is used in other places on the site so I reproduced it in my code example.

See the Pen MYozNR by Renat (@rafikov) on CodePen.

Menu animation also uses matrix transforms but for more interesting effects it's a "3D matrix" transform.

With CSS I only managed to reproduce blocks' transitions but all the delays and animation sequences on the site were created with Javascript.

See the Pen qEjQZG by Renat (@rafikov) on CodePen.

Hover effect on the links in projects gallery. Here through absolute positioning and CSS transforms background slides in with an eye catching effect.

See the Pen ByZGaL by Renat (@rafikov) on CodePen.

Navigation arrows animation looks really good. But svg images and Javascript were used on the site.

I made my own version in CSS only.

See the Pen bNROmJ by Renat (@rafikov) on CodePen.

Finally, animation in the logo.

It's just a sequence of images in a sprite with the background position changed dynamically. 24 different states of the logo change through applying different classes to the element.

This is what the sprite looks like. And to generate 30 classes with proper background-position properties developers had to use some software.

What is also used

Modernizr to detect HTML5 and CSS3 features.

Greensock ultra high-performance, professional-grade animation for the modern web. To create HTML5 animations.

Masonry a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space

Outro

So it's a well designed site showcasing even better designed projects of the studio. Nice subtle animations and amazing transition effects make the whole work of leaving a good impression on the visitors.

[renat-blog]

Dissection of Booking.com (11:59 moment)

Today I’m going to make a design dissection of a site that took “Site of the day January 19 2015" on FWA.

http://www.booking.com/nye/

Site is quite simple it’s just a promo page launched before the New Year’s holidays. 24 time zones with 24 locations and an interactive world map.

See the video for a short overview:

The site is a big gallery of location photos.

The gallery has a nice jalousie effect which also helps to fit the gallery on different browser widths. Cursor changes to navigation arrows when hovering over active areas.

On clicking the location name a full description is loaded.

Alternative gallery navigation appears in this mode.

A block with the competition rules.

The block takes just a part of the screen and interacts with the gallery which goes into background.

And a big map with all 24 locations and 24 time zones.

Map occupies the whole screen and visualizes locations better than a gallery though looks not as dramatic.

I made my own reproduction of some of the design elements and they can be downloaded as a PSD.

Fonts used

Simple typography with lots of uppercase letters puts the whole focus on imagery.

Effra

Alternate Gothic No. 2 D

Code Dissection

The whole site is just one HTML file into which other content loads dynamically.

The main peace on the site is the gallery. Turns out it’s a canvas element all of the effects with the photos are happening on the level of canvas, so I won’t go so deep to dissect the jalousie effect this time. They just basically cut a photo into peaces and manipulate them to create the parallax effect on mouse move.

Canvas becomes a background of the page and reacts to different outside events, like clicking the buttons.

Custom cursors

The arrow cursors seem to be drawn on canvas though they could be created with CSS cursor but browser support and some browser bugs might be a problem.

See the Pen pvPMwo by Renat (@rafikov) on CodePen.

Buttons hover effect

I like hover effects on some of the buttons where border around the element scales in and out.

it can be achieved with CSS3 transforms and transitions.

See the Pen vEmobV by Renat (@rafikov) on CodePen.

Location animation

One cool effect I noticed is a location indicator. I saw it used in different ways:

Javascript was obviously used to make animations. So by using only CSS I managed to make spots blink but there is a chain of animations on the original site.

See the Pen KwmOrd by Renat (@rafikov) on CodePen.

Clock animation

As user changes time zones, CSS clocks show an animation. I made my reproduction of the effect but Javascript is necessary to run this effect on specific events.

See the Pen JoJPNa by Renat (@rafikov) on CodePen.

Map mechanics

And one more thing that interested me. For some time I couldn't understand how the map and the lines on it do work. But after some reverse engineering I found it out.

Every line is a div, every area between lines is a div (to react to mouse hover) and there is a special div for the hovered area.

What is also used

Normalize.css A smart alternative for CSS resets. Makes browsers render all elements more consistently and in line with modern standards and precisely targets only the styles that need or benefit from normalizing.

Modernizr JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Require.js A JavaScript file and module loader. Improves the speed and quality of code.

So this is a site with a simple structure but professionally designed and coded to leave a really good impression on the users.