HTML5 et minimalisme pour Nike Skateboard

Comment faire quand vous êtes une très grande marque internationale pour exister dans un secteur où personne ne vous attend ? C’est tout le défi que devait relever Nike avec sa ligne Skateboarding. Ils ont donc opté pour la sobriété (tout comme les autres grandes marques : Minimalisme de rigueur pour Converse Skateboarding) avec un site qui laisse la part belle aux produits et contenus.

Ça commence donc dès la page d’accueil avec un visuel en pleine page et un bandeau de navigation minimaliste :

Cette page propose un défilement vertical assez classique avec une structuration en grille qui permet de faire défiler les contenus de façon horizontale. Toute l’ingéniosité de cette page est de gérer de façon efficace la surface d’affichage et surtout le positionnement dans la hauteur de page pour ne pas couper les blocs.

Au niveau des pages produit, le minimalisme est poussé à son paroxysme puisque les fiches produit ne sont composées que d’une seule photo :

La navigation dans le catalogue n’est pas très simple (aucune option de tri) car le site privilégie l’approche du style guide mensuel. La logique de grille est respectée sur l’ensemble du site et tout particulièrement dans la section News :

Petit détail qui peut vous intéresser : ce site est réalisé en HTML5 à partir du template Boilerplate. Pour faire simple, l’intérêt d’utiliser un framework de développement comme Boilerplate est d’optimiser la compatibilité du site avec les vieux navigateurs, mais également de faciliter la maintenance avec une organisation très rigoureuse du code source et des fichiers (plus d’explications ici : HTML5 Boilerplate, A Default HTML/CSS/JS Template For Any Project). Mais ce n’est pas pour autant que le site n’exploite pas Flash, car on en retrouve pour les vidéos ou pour les zooms XL sur les produits.

Au final nous avons donc un site graphiquement très abouti avec une manipulation agréable et de beaux effets de transition.