Réalisé avec l’aide de Pixelsquid, un merveilleux plugin Photoshop

Conception d’un template d’actualité pour Rewyer

Rewyer propose des gabarits prêt à l’emploi orienté “site d’actualité” pour permettre à une rédaction d’être rapidement opérationnel sur le web. J’ai eu pour mission de concevoir un template occupant tout l’espace disponible et s’inspirant des styles des sites de media grand public.

Les pages à produire

  • Accueil
  • Catégorie
  • Article
  • Tableau de prix pour les abonnements (confidentiel)
  • Mon compte et les pages reliés (confidentiel)

Les Widgets à produire :

  • Top article(plus commentés / plus lus)
  • nuage de mots clés
  • galerie vidéo / galerie photo
  • Inscription à la newsletter
  • Se connecter / s’inscrire
  • Barre de recherche

Ce gabarit est destiné à subir des retouches selon les demandes clients. Je vous montre ici ce que j’ai livré. Le contenu a été basé sur air&cosmos, un de leur client.

Page d’accueil

Zoom sur le design

La navigation principale

Le premier niveau sert de header. Il présente le site avec le logo et la baseline. Pour permettre plus de possibilité de personnalisation, j’ai ajouté une zone de où l’on peut insérer une bannière. Chaque gabarit aura ainsi un élément supplémentaire pour se démarquer d’un autre.

Exemple de la navigation sur un autre site avec un autre gabarit que j’ai produit

Le second niveau est la navigation principale. Je l’ai décalé pour casser la mise en page et ne pas manger le contraste du logo.

Le dernier niveau de cette zone est pour les fonctionnalités proposées telles que la recherche, l’accès à son espace, …

Pour la navigation responsive, j’ai adopté le système “priority nav” qui affiche autant d’item que la place le permet et cache le reste dans un menu dropdown “plus”.

Navigation responsive “priority plus”

Renforcer la sensation de fraîcheur par du design

Pour renforcer la sensation de fraîcheur du contenu, j’ai mis en place une frise verticale qui joint la date aux sections présente dans la page d’accueil. Ainsi, le site suggère un message de bienvenu :

Nous sommes le vendredi 2 septembre. Voici notre actualité du jour

Bloc “catégorie” sur la page d’accueil

La ligne verticale rejoint le titre de section. Par défaut, un bloc catégorie affiche 6 articles répartie en deux lignes (deux conteneurs dans le HTML). Cela permet à un client qui vient de se lancer et qui dispose de peu de contenu d’enlever la seconde ligne pour n’afficher que 3 articles sans casser la mise en page.


Responsive design

Inférieur à 600 pixels

Design en une colonne.

Entre 768 et 979 pixels

Passage à deux colonnes sauf pour l’article à la une.

Entre 980 et 1365 pixels

À partir de 1366 pixels

Apparition de la sidebar contenant les widgets. La première ligne des articles en une passe à deux colonnes égales pour éviter au premier article d’occuper une place trop importante à l’écran.


Revue des autres pages

Catégorie

Pour les pages de catégories, le contenu se charge continuellement au fur-et-à-mesure que l’utilisateur scrolle. J’ai conçu deux ensembles de 5 articles avec une petite variation dans l’ordre des colonnes sur la première ligne. Cela permet de garder du rythme dans la mise en page au fil des chargements de blocs.


Article

Pour les photos d’illustration des articles, j’ai eu une problématique à résoudre. Les clients de Rewyer n’ont pas toujours des photos de même dimensions ou d’un ratio identique. De plus, quand la photo s’étire sur tout le bloc, l’utilisateur se retrouve face à un bloc qui occupe une hauteur trop importante par rapport à la valeur de l’information qu’il transmet.

J’ai d’abord fixé une hauteur maximum de 80vh pour éviter d’imposer une couverture d’article trop haute. Mais il y a désormais un problème d’espace vide sur les cotés.

Pour régler ce problème, j’ai placé la photo de l’article en arrière plan d’une pseudo classe couplée à un filtre de couleur noir et un background-size: cover. L’espace est comblé de façon élégante et je ne charge aucune ressource supplémentaire. Ensuite, j’ai apporté une touche d’amélioration progressive.

Avec la feature queries, si le navigateur supporte la propriété filter, j’enlève le filtre en dégradé et je floute le pseudo élément.

Relation entre les éléments complémentaire d’un articles :

J’ai repris mon design de ligne verticale pour renforcer la connexion entre l’article principale, les articles en relation et les commentaires.

Si un utilisateur non identifié clique sur le bouton “réagir”, le formulaire de connexion (ou d’inscription) s’affiche. Si l’utilisateur est connu, un défilement doux l’emmène vers le champ pour qu’il compose son commentaire.