Design : Cocodélices

Par Plop

Aujourd'hui je vous parle des modifications réalisées pour Coralie du blog Cocodélices !

Coralie partage avec nous des recettes sucrés, salés, des entrées, des apéritifs. Elle m'a contacté pour créer un logo rose, girly, en relation avec la cuisine avec pourquoi pas des ustensiles. Elle n'avait pas de police précise en tête, je lui ai donc proposé plusieurs variantes de logos et voici celui qu'elle à choisi :


Coralie voulait migrer son blog de Canalblog vers Blogger. Pour cela elle avait besoin d'un design pour aller avec son nouveau logo !

Voici son blog avant les modifications :


Pour commencer, elle voulait une mise en page des articles en aperçu sur la page d'accueil. La photo à gauche, et à droite : les libellés suivis du titre de l'article, la date, un extrait de l'article, le lien "Lire la suite", et les commentaires.


Les éléments de cuisine du logo ont été repris dans la barre latérale pour remplacer les ronds de couleurs. De plus, des boutons pour les réseaux sociaux ont été créés dans les mêmes couleurs pour s'accorder au design du blog.


Les liens de navigation en bas de page ont étés modifiés pour s'accorder au design. Les liens "Isncription à Atom" ont été supprimés. Le pied de page (comme l'en-tête) à été ajusté à 100% de largeur du blog, une bordure lui à été ajouté pour le séparer du contenu du blog, et un gadget d'articles les plus consultés à été ajouté en bas de page :


Sur les pages d'articles, les en-têtes ont été réarrangés dans l'ordre suivant : libellés, titre, date.


Les pieds d'articles ont été modifiés pour afficher les boutons de partage vers les réseaux sociaux, et l'apparence des commentaires à été modifié comme sur mon blog ;)


Pour finir, l'ensemble du blog est responsive (s'adapte aux différentes tailles d'écran), et la version mobile à été modifiée pour reprendre le design de la version web.

Modifications réalisées :

  • Création d'un logo pour le web
  • Affichage automatique des articles en aperçu sur la page d'accueil : photo à gauche, aperçu à droite
  • Adaptation du blog pour le rendre responsive
  • Version mobile
  • Modification de l'apparence du gadget Articles les plus consultés de manière horizontale dans le pied de page
  • Modification de l'apparence des liens de navigation "Articles plus anciens", "Accueil", "Articles plus récents"
  • Création de boutons de médias sociaux (Facebook, Pinterest, Instagram, etc.) pour la barre latérale
  • Modification de l'apparence de l'en-tête des articles sur la page des articles
  • Modification de l'apparence du pied d'article sur la page des articles
  • Modification de l'apparence des commentaires
  • Ajustement de l'en-tête et du pied de page à 100% de largeur du blog
  • Ajout d'une barre de séparation au-dessus du pied de page
  • Suppression des liens Inscription Atom
  • Résolution du problème d'interlignes dans les articles