Yannis Lehuédé

ALCA (collectif audiovisuel)

yannis — 2017-07-19T13:31:00Z

Ce site est une refonte d'une version très ancienne (statique, pas ajournée et pas responsive) pour un regroupement d'artistes dans l'audiovisuel, une association de production de documentaires.

Le site actuel a été réalisé avec le CMS Spip, permettant aux membres du collectif de moderniser les informations, présenter les dernières créations avec vidéo et textes de présentation.

Le design est sobre et moderne et induit le mouvement avec le fond animé.
Les textes et images d'illustration sont sur des fonds sombres semi-transparents, avec parfois des ombrages pour améliorer la lisibilité.
Les films sont accessibles par catégories (onglets), ce qui permet de ne pas noyer chacun dans la multitude.

Enfin, des alternances de ronds et de carrés (pour cercler les images) répondent aux formes du fond animé.

Voilà le one-page du site :

Le site web d'ALCA est accessible en ligne.

JRI Laurent Brémond (réalisateur)

yannis — 2017-06-04T12:33:00Z

Un petit site web "portfolio" pour le réalisateur journaliste d'investigation Laurent Brémond.

Réalisé avec des éléments graphiques déstructurés, il regroupe la plupart de ses films et projets diffusés. Le site web a été conçu pour permettre au réalisateur d'ajouter de nouvelles références au fur et à mesure, grâce au CMS Spip et une maquette visuelle maison.

Voici un aperçu de la page d'accueil.

Le site web est consultable à cette adresse.

Anyway Management

yannis — 2017-03-04T13:56:00Z

Cette association de management et de chorégraphie pour artistes/performers/danseurs nécessitait de mettre en avant ses artistes célèbres ou en devenir, autrement que via leurs vidéos respectives.

J'ai donc restructuré le contenu, partagé ce site web en anglais et français et nous avons chois des photographies et vidéos qui correspondent à l'actualité de chacun.

Pour le site web, il était demandé de s'inspirer de l'esprit "french touch" (ou de Paris). Montmartre avant été mis en avant pour une précédente version du site (pas responsive) dont voici une illustration d'époque :

Désormais, les présentations des différents performers sont détaillés sur la page d'accueil, façon "one-page-site" sous forme d'un journal, où la mise en page est différenciée pour chaque artiste, mêlé de rectangles sombre semi-transmarents.

Des pages plus détaillées sont disponible, décrivant le parcours des artistes, leur actualité... en plus de l'actualité collective de l'association.

Le site a été réalisé avec le CMS Spip, un design maison, et permet à l'équipe d'Anyway Management de mettre à jour simplement les références, distinctions, etc en fonction de l'actualité.

Le site web Anyway Management est consultable en ligne.

Référencement web (SEO)

yannis — 2015-07-03T16:00:00Z

À l'acronyme S.E.O. (Search Engine Optimisation), le référencement d'un site web permet de le faire apparaître dans les moteurs de recherche, et de préférence, parmi les premiers résultats.

Ce travail répond aussi au besoin que chaque page du site web soit conçue pour qu'elle fasse partie d'un ensemble cohérent — le site — avec son contenu essentiel mis en avant, qu'il soit ainsi accessible par les visiteurs via des mot-clés particuliers dans les moteurs de recherche.
Mon travail de référencement consiste à vous proposer une relation à long-terme, avec des solutions innovantes et adaptées à votre modèle économique. Pour faire parvenir votre site web à une position avantageuse et compétitive, il est nécessaire d'améliorer continuellement son référencement grâce à plusieurs approches et techniques.

Voici une liste de services que je propose :

Première analyse du site internet actuel,
Recherche dans le contenu pour dégager des mot-clés représentatifs,
Développement et optimisation de sites web existants,
Optimisation des meta-tags (titres, descriptions, mot-clés) et données schématiques,
Renommage d'images pour le référencement,
Optimisation du contenu,
Conseils pour la structure des liens internes,
Développement du fichier robots.txt
Configuration du fichier sitemap.xml
Introduction aux sitemaps spécifiques à Google, Bing...,
Présentation du site web aux principaux moteurs de recherche,
Installation de codes de traçage dans les pages (pour analyser le comportement des visiteurs),
Introduction et formations à Google Analytics, AWStats, O.W.A. ou Piwik,
Rapports réguliers de consultation détaillée des pages,
Optimisation et positionnement dans les moteurs de recherche,
Mise en avant de contenus dans différents réseaux sociaux,
Installation de suivi de votre trafic sur mobile...

L'approche proposée à votre problématique, forcément spécifique, est toujours basée sur le besoin de retour sur investissement maximal dans le plus court délai possible.
Évidemment, ces conceptions et techniques sont aussi valables pour vos boutiques d'e-commerce ou des sites web qui n'ont pas été développés par mes soins...

Design Web

yannis — 2015-07-03T15:54:32Z

Un site internet est une plaquette commerciale, une vitrine interactive qui représente une identité. Bien référencé, il peut apporter de nouveaux visiteurs. Encore plus avec une campagne de promotion ciblée.

Pour réaliser la plateforme web qui convient à votre activité, plusieurs approches sont possibles, selon vos besoins. Il est possible de créer un site statique (qui ne nécessite pas d'être modifié régulièrement) ou dynamique : ce deuxième type vous laisse l'entière liberté de modifier ou d'ajouter du contenu au site (textes, photos, annonces d'évènements, d'autres documents, messages aux abonnés...) grâce à un CMS [1] (un gestionnaire de contenu caché du public).

Pour faire le design de votre site web, plusieurs formules sont possibles : je peux vous fournir différentes propositions de chartes graphiques à partir de références ou d'idées de l'identité visuelle de votre entreprise : nous pouvons aussi l'élaborer ensemble ou à partir de vos documents visuels existants.
Le développement du site se déroule en plusieurs phases :

l'élaboration de l'aspect visuel,
la définition des besoins techniques (interactivité, gestionnaire dynamique de contenu -CMS- ou non, outils supplémentaires à mettre en place...),
développement de la maquette du site et de ses fonctionnalités (sur une plateforme de test, accessible sur internet),
mise en production sur votre espace web (mutualisé ou sur un serveur dédié),
optimisation et référencement du contenu pour un placement optimum dans les moteurs de recherche.

Éventuellement par la suite :

Formation à l'utilisation d'outils de suivi du trafic des visiteurs (Google Analytics ou ses équivalents Piwik... mais aussi Alexa et d'autres outils) pour l'analyse des visites du site, maintenance...
Déclinaisons géographiques des sites web et contenu multilingue.
Ajout de fonctionnalités spécifiques, gestion d'évènements, newsletters (lettres d'informations), boutique en ligne...
Mise en place de web-radio ou de web-TV (selon la configuration de votre solution d'hébergement) et mise en place de liens avec l'architecture de votre site web et de vos réseaux sociaux.

Exemple de structure "réseau social"

[1] Content Management System

Cette vitrine présente aujourd'hui des textes de présentation surtout, des photographies le plus souvent et parfois d'autres contenus multimédia comme des vidéos (qui peuvent faire partie de la prestation), ainsi que d'éventuelles fonctionnalités additionnelles.

Visions Urbaines

yannis — 2015-05-24T20:39:28Z

Voilà un petit magazine de design, architecture et d'urbanisme (design de mobilier urbain, tracé d'ensembles de bâtiments...) qui désirait basculer ses articles sur le web. Sa base d'archives numériques m'a permise de dégager rapidement une identité visuelle...

Outre cet aspect, qui a été adapté pour les standards du web (en responsive évidemment), il fallait mettre ne valeur la mise en page des images au cœur des articles. Des petits outils permettant d'afficher des images de taille personnalisées ont été utilisés. Ainsi, chaque illustration peut être insérée (à la taille désirée) dans le texte, ou entre les paragraphes. C'est un aspect souvent trop négligé dans les sites web, avec l'avènement des templates tout-faits.

Bien-sur, un site dédié à l'avant-garde créative dans ce domaine se devait de posséder les dernières nouveautés comme l'affichage du menu en milieu de page (changeant au "scroll") comme ci-dessous :

Autrement, une communauté de lecteurs suggère régulièrement des images à la rédaction. Pour permettre l'insertion de toute la collection, sans trop de modération, des outils, basés sur la technologie simple du RSS, permettent de récupérer ces images à partir de différents réseaux sociaux ouverts sur l'extérieur. Ils sont ainsi affiché par date de publication.

Et il dispose d'un design responsive, comme illustré plus bas pour tablette et smartphone...

Affichage responsive (2 pages différentes)

Affichage pour écran smartphone

Voilà le détail de quelques pages :

Page d'accueil

Sommaire d'articles

La maison du possible

yannis — 2014-07-28T22:02:00Z

Une auberge de jeunesse en gestation, à Miélan dans le Gers.
La maison propose déjà de nombreuses activités comme un centre de documentation sur la région, l'Afrique... un espace librairie, de débats, le siège de la maison d'édition Izuba etc...

Un site d'écologie

yannis — 2014-05-10T21:54:00Z

Un petit site hébergeant de nombreuses informations d'actualité et d'articles de blog. Pour les besoins d'une campagne électorale, il lui fallait une mise à jour avec de nouveaux outils : géolocalisation de points (pour permettre de consulter les lieux des panneaux, bureaux de vote...), une lettre d'information, mais aussi un affichage d'informations récupérées automatiquement sur d'autres sites.
Mais surtout, il lui fallait un design plus moderne et simple.

Page d'accueil

Pour les gens qui consultent les informations du réseau, un bandeau rétractable a été conçu pour afficher des liens d'informations de plusieurs sources (collectées par RSS), comme illustré ci-dessous et à voir en activité (en cliquant sur le '+' en haut à droite) :

Et pour aider aux campagnes électorales, les lieux des bureaux de votes ont été récupérés (merci l'OpenData citoyen) et intégrés sur une carte. Ils sont ainsi géolocalisés, ce qui permet à un colleur d'affiche de l'équipe de repérer les "points" les plus proches de sa position, sur la carte, et éventuellement de signaler qu'il a collé des affiches ou déposé des bulletins de vote.
Par extension, on pourra également afficher les résultats électoraux de la liste par bureau de vote (pour les petits partis comme celui-là, ça permet de voir si l'affichage ou les actions menées dans tel ou tel secteur sont bénéfiques).

Comme pour tous les sites militants, toutes le fonctions de lettre d'information, forum, liens vers des réseaux sociaux (aller et retour) sont assurés. Et pour permettre aux rédacteurs en chef de choisir le contenu à afficher dans les différents blocs de la page d'accueil et du pied de page, un système de mots-clés permet de définir quel contenu est mis en avant et à quel endroit !

Huelvas valle

yannis — 2014-04-14T23:52:00Z

Un syndicat d'initiative voulait faire redécouvrir sa région, et permettre aux locations saisonnières de logements de s'inscrire dans leur annuaire.
Le site ainsi conçu regroupe en outre des descriptifs de logements (avec photos "témoin" ici) également des photographies des environs.
Des formulaires d'inscription pour les propriétaires locatifs et pour réserver les différentes solutions sont disponibles, avec pour chaque un calendrier de réservation.
Le tout est réalisé avec le CMS Spip et quelques plugins.

Lavoir Moderne Parisien

yannis — 2013-11-07T10:12:00Z

Après près de dix ans sur un des premiers CMS, le célèbre théâtre de la Goutte d'Or à Paris avait décidé de refaire son site internet.
Nous avons repris l'idée des logos sur les étiquettes de vêtements (lavable en machine... repassage, températures...) pour cet ancien lavoir, immortalisé par Émile Zola dans l'Assommoir, qui est resté à la pointe de l'expérimentation vidéo et théâtrale.

Jessica Winter s'est occupée de redéfinir l'interface visuelle, et moi de la partie technique qui comprenait en premier l'intégration des archives des anciens évènements, leurs visuels, les dates...
Il y avait près de dix ans de spectacles, sur les presque 30 ans d'activité du théâtre.

Pour cette refonte, le gestionnaire de contenus SPIP a été utilisé avec un module de gestion d'évènements et d'agenda. En ajoutant quelques champs et des APIs, j'ai pu proposer un système qui permet d'annoncer les spectacles sur le site grâce aux visuels (affiches, photos de représentations précédentes) mais aussi des vidéos de Youtube, Vimeo... avec des contrôles de lecture (en Javascript) stylisés pour le site.
Les éléments visuels et vidéos sont directement affichés dans la fiche annonçant le spectacle et — à l'approche d'une représentation — sur la page d'accueil du site du Lavoir, comme une vidéo intégrée et "salie" pour le site :

Prochain évènement présenté avec une vidéo

La vidéo Youtube a été intégrée grâge à son API, les boutons play-pause-mute-son.. sont donc faits "maison" !

Évidemment, dans les fiches de spectacles, il est possible de réserver en ligne, et permet d'intégrer ainsi ces e-mails dans la newsletter (si la personne l'accepte bien-sûr).
Une grosse partie du travail a été de migrer les fiches des anciens évènements (près de 10 ans d'archives) pour les convertir dans le nouveau système, avec images et commentaires. Par la même occasion, le planning, les notes et remarques techniques préparatoires aux spectacles ont été migrées elles aussi. Elles étaient précédemment stockées sur une interface web. Désormais, tout est regroupé sur la même interface privée, avec des couleurs en fonction du type d'élément (article, note interne, évènements selon leur type et lieu dans l'enceinte du lieu...).

Lorsque l'administrateur et les régisseurs ont suffisamment d'informations, ils-elles peuvent publier l'évènement qui devient alors ouvert à la réservation.
Voici un exemple de fiche d'évènement (pour un spectacle ou une exposition temporaire) dans la partie privée du site (sur l'image suivant à gauche) et sur le site public (à droite) :

Sur la page d'agenda où tous les spectacles sont affichés avec des codes couleurs selon la nature de chaque spectacle, il est possible aux visiteurs de récupérer un fichier iCal pour l'installer à son agenda électronique personnel et rester informés des prochains spectacles au Lavoir Moderne Parisien sur les appareils connectés (ordinateur, smartphone, tablettes... si synchronisées entre elles) !

PS : Étant donné que le théâtre a désormais changé d'équipe et de direction artistique, le site web aussi. La programmation du lieu peut être consultée à cette nouvelle adresse.