Je soutiens la grève générale ✊

Just a couple things

Créer Just a couple things, blog sur nos curiosités, du contenu éditorial au développement du site.

#web #interface #graphisme #développement

  • Client

    Just a couple things

  • Compétences mobilisées

    Identité, UI design, développement

  • Contexte

    Designer indépendant, side project

  • Période

    Depuis 2017

  • Avec

    Léa Lalonde

Juste quelques trucs ?

Just a couple things est un petit blog tenu par ma compagne Léa et moi-même, où nous partageons nos voyages, nos coups de cœur et nos astuces de la vie quotidienne. Tout le contenu est créé de nos petites mains.

On partage tout plein de choses qu’on a faites, on est sincères sur ça et on espère que ça plaît à nos lectrices et lecteurs, surtout.

Il y a cinq grandes catégories : Travel, Lifestyle, Écolo, Culturez-moi et Foodie.

Explorer Just a couple things →

Identité

Premières pistes non retenues du logo

Ce blog n’a pas une ambition folle, on souhaite juste s’y sentir bien, et celleux qui nous lisent aussi. On le voit un peu comme notre chez-nous, pas parfait mais rempli de nos personnalités et de choses que l’on aime. On n’a pas voulu partir sur un template prédéfini qui sentirait un peu l’appartement neuf sans beaucoup d’âme.

Je me suis donc attelé à créer une identité sur mesure.

On avait quelques critères en tête :

  • un aspect Do It Yourself, un peu artisanal qui montre bien que c’est juste un petit couple derrière ;
  • une envie d’espace, un blog qui donne envie de sortir de la ville rien qu’en le visitant ;
  • de l’audace et de la couleur, on en avait un peu marre des blogs minimalistes blancs ;
  • et surtout, quelque chose qui nous ressemble.
Identités non retenues

Nous nous sommes donc accordés sur une couleur de base beige, avec deux accents : du orange et un bleu-vert. Alors que le beige est doux, le orange et le bleu-vert sont dynamiques, et évitent les clichés roses ou doré du blog féminin ou le bleu du blog voyage.

Le logo est dessiné à la main, pour rappeler le DIY. En fond, les vagues nous transportent ailleurs que devant l’écran. L’oblique casse cette douceur et embarque directement dans le contenu. Les superpositions jouent aussi sur ce dynamisme, créant ainsi un contraste avec la fonte assez classique de la titraille (Playfair Display Bold).

Design

Just a couple things adopte le principe du blog, avec comme premier élément le dernier article publié, puis tous les articles listés de manière antéchronologique.

La page d’accueil rassemble ainsi d’abord l’article à la une, puis les quatre suivants. On retrouve aussi les derniers articles des cinq catégories du blog, avec une approche particulière pour la catégorie Travel (cf plus bas).

La lecture du contenu étant primordiale, la page d’article se concentre sur ce dernier. J’ai privilégié une colonne unique pour donner toute sa valeur au contenu de l’article, les articles liés se trouvant en dessous, après l’espace commentaires.

La catégorie Travel est particulière. Elle est la catégorie principale du blog et est la seule à avoir du contenu vidéo. Nous avons donc opté pour une présence très haute de cette catégorie sur la page d’accueil, juste après l’article à la une. Elle se distingue du reste du site par son fond sombre. La carte du monde est aussi un marqueur identitaire. On retrouve le fond sombre dans les articles vidéos, la carte dans la page de catégorie, avec un lien rapide vers les articles de destination.

Le blog est bien sûr totalement responsif, Léa partageant les articles via son compte Instagram (sur mobile donc).

Techniquement, je me suis basé sur une grille de 8px pour garder une rythme vertical cohérent. Par exemple, le texte de base a une taille de 16px et une ligne de 24px, et le titre H2 une taille de 40px et une ligne de 48px. J’ai aussi utilisé l’atomic design (avec Atomes, Molécules et Organismes) pour garder une cohérence certaines entre tous les éléments.

Développement

J'ai choisi le CMS Kirby pour développer le site. Basé sur du PHP, il est flat-file, c’est-à-dire qu’il n’utilise pas de base de donnée et est donc très sécurisé et très léger. L’argument qui m'a finalement convaincu est la flexibilité de son back-office.

Par exemple, on peut rajouter facilement des destinations dans la catégorie Travel grâce à un bloc complètement personnalisé permettant de lier articles et destination facilement.

Pour le front, j’ai utilisé une base de 8px avec 12 colonnes (pour desktop) ou 4 colonnes (pour mobile). Sass m’a beaucoup aidé pour faire le lien entre mes composants de design (bloc d’article, footer) et son intégration en CSS, grâce à la création de partials pour chaque éléments du blog. Jai adopté la méthodologie BEM me permettant de rapidement appeler et styliser des éléments du contenu.

Explorer Just a couple things →