ijeprod-logo
Mandat: Nonente
Catégories: Html/CSS, Fun
Date de création: 2024
Lien: www.nonente.ch
visual
Mandat: Nonente
Catégories: Html/CSS, Fun
Date de création: 2024
Utilisée comme numérotation du présent site (en animation au scroll), cette police est dessinée avec un élément commun à tous les caractères: le chiffre 1. Ce symbole représente aussi à l’origine le «j» minuscule de l’identité IJE Design.
Petite sœur de la fonte HUITANTE, son nom y réfère également (= terme employé pour la dizaine au-dessus en Suisse et en Belgique). Par contre 90 doit s’écrire NONANTE mais il y a une astuce avec l’orthographe NONENTE qui contient le mot «one».
number-symbol
ijeprod-symbol
ijeprod-symbol
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2023
Lien: www.ije-design.com
visual
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2023
Dans l’esprit des 4 précédentes (thème et imageries), la nouvelle animation de la série est une ode à la nature qui «colore» la morosité des villes et de ceux qui y vivent.
Les visuels ont été trouvés dans différentes sources: un manuel de conduite automobile, des images d’Epinal, des anciennes gravures et publications pour enfants,…) avec parfois des éléments recréés (caméra vidéo, personnages,…) et le rythme est donné par une musique rapide et énergique: la Tritsch-Tratsh-Polka de Johann Strauss II (1825-1899).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Art Créations et Bibliophilie
Catégories: Wordpress, Commercial
Date de création: 2023
Lien: www.acbsa.ch
visual
Mandat: Art Créations et Bibliophilie
Catégories: Wordpress, Commercial
Date de création: 2023
Ce catalogue en ligne propose à la vente des livres rares, à tirages limités, anciens ou récents ainsi que d’autres œuvres d’art destinés à une clientèle de bibliophiles et d’amateurs.
En plus de l’aspect esthétique important, il contient des éléments techniques comme le magasin entièrement automatisé, le répertoire des artistes et auteurs, les fiches thématiques et les billets d’actualité du blog, une newsletter et les fonctionnalités habituelles.
Les mains, extraites des articles de la boutique, sont le fil rouge dans toute l’iconographie.
number-symbol
number-symbol
number-symbol
Mandat: Domus Immo
Catégories: Wordpress, Commercial
Date de création: 2023
Lien: www.domusimmo.ch
visual
Mandat: Domus Immo
Catégories: Wordpress, Commercial
Date de création: 2023
Selon les besoins de mises à jour régulières des annonces concernant des biens, cette plateforme a été conçue en «contenu géré par le client»; une régie active dans la région de Lausanne en l’occurence.
Le concept reprend l’univers de l’immobilier en utilisant la mise en abîme (une image dans l’image) pour les visuels, statiques ou animés, et le logo est détourné afin de servir de pictogrammes.
number-symbol
number-symbol
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2022
Lien: www.ije-design.com
visual
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2022
Inspiré de la plus vieille histoire du monde et parodiant un tutoriel vidéo sur un style rétro-futuriste, cette quatrième animation pose une question – grave, fondamentale mais qui reste en suspens – «est-ce que l’humanité mérite d’être sauvée?».
L’iconographie provient en grande partie d’une ancienne méthode d’apprentissage de dessin et l’habillage musical est un air baroque du compositeur Rameau (1702-1766).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2021
Lien: www.ije-design.com
visual
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2021
Rythmée par toujours plus d’effets visuels, l’histoire de ce troisième épisode de la série raconte les étapes de la vie d’une éponge. Le message, délivré à la fin, souligne l’importance de toutes choses – même les plus petites – qui contribuent à prendre soin de la planète.
Principalement reprise d’un ancien manuel de médecine douce, l’imagerie est accompagnée par une musique «recyclée» elle aussi: le chœur à bouche fermée de Madame Butterfly.
number-symbol
number-symbol
number-symbol
Mandat: Résultats côtes
Catégories: Wordpress, Commercial
Date de création: 2021
Lien: www.resultatscotes.ch
visual
Mandat: Résultats côtes
Catégories: Wordpress, Commercial
Date de création: 2021
Répertoire extrêmement fourni et détaillé (environ 1800 pages) de compétitions automobiles spécialisées, ce site est une refonte complète en WordPress à partir d’une source Joomla et d’un thème acheté puis retravaillé (techniquement et graphiquement).
Les contenus principaux sont: les classements des épreuves, les palmarès des pilotes, des fiches techniques, des diaporamas, etc. et le tri dans la base de données peut se faire par lieux ou par années.
number-symbol
number-symbol
number-symbol
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2020
Lien: www.ije-design.com
visual
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2020
Nouvelle réalisation autour du thème de la protection de l’environnement.Cette fois-ci les visuels, tirés d’une encyclopédie de 1900, illustrent un parcours dans un décors de paradis (perdu). La technique varie entre images noires-blanches et couleurs ainsi que de la vidéo.
L’habillage sonore est du compositeur Gabriel Fauré (1845-1924).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Clown to care
Catégories: Wordpress, Institutionnel
Date de création: 2020
Lien: www.clowntocare.ch
visual
MMandat: Clown to care
Catégories: Wordpress, Institutionnel
Date de création: 2020
En respectant la ligne graphique et la mise en forme de la version de 2015, le site Clown to care «nouvel habillage» est dynamisé par l’ajout d’une présentation animée en exergue de la page d’accueil et par divers visuels qui agrémentent les contenus.
L’arborescence est également repensée et optimisée ainsi que la navigation par ancres et menus déroulants.
number-symbol
number-symbol
number-symbol
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2019
Lien: www.ije-design.com
visual
Mandat: Projet personnel
Catégories: Animation, Didactique
Date de création: 2020
Film d’animation en motion design, cette vidéo présente, en 7 minutes et au travers de 10 thèmes (= 10 segments structurés de manière identique), des conseils de «bonne conduite» afin de protéger la planète dans un soucis de développement durable.
La musique est l’œuvre de l’artiste «Lagartijeando» et les images proviennent pour la plupart d’une ancienne encyclopédie.
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Vœux 2020
Catégories: Animation, Commercial
Date de création: 2019
Lien: www.fundo.ch
visual
Mandat: Vœux 2020
Catégories: Animation, Commercial
Date de création: 2019
Ce catalogue en ligne propose à la vente des livres rares, à tirages limités, anciens ou récents ainsi que d’autres œuvres d’art destinés à une clientèle de bibliophiles et d’amateurs.
En plus de l’aspect esthétique important, il contient des éléments techniques comme le magasin entièrement automatisé, le répertoire des artistes et auteurs, les fiches thématiques et les billets d’actualité du blog, une newsletter et les fonctionnalités habituelles.
Les mains, extraites des articles de la boutique, sont le fil rouge dans toute l’iconographie.
number-symbol
Mandat: Fundo
Catégories: Html/CSS, Commercial
Date de création: 2018
Lien: www.fundo.ch
visual
Mandat: Fundo
Catégories: Html/CSS, Commercial
Date de création: 2018
Dans le cadre de la refonte de l’ancien site de la société, l’identité et l’ergonomie ont été repensées – en collaboration avec un conseiller en image – afin d’incarner au mieux l’aspect professionnel de la finance et la valeur ajoutée de la technologie propres à Fundo.
Des éléments de graphiques et autres schémas (produits et exploités par l’entreprise) sont utilisés comme habillage et s’adaptent à tous types d’écrans.
Le montage des pages et la programmation sont réalisés par un informaticien en interne d’après les modèles fournis.
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: IJE Design (refonte)
Catégories: Html/CSS, Commercial
Date de création: 2018
Lien: www.ije-design.com
visual
Mandat: IJE Design (refonte)
Catégories: Html/CSS, Commercial
Date de création: 2018
Troisième portfolio de mes réalisations, cette seconde version du site de mon agence présente un plus vaste contenu que précédemment. Le design, structuré par des hexagones fixes et des trapèzes pivotants, est adaptatif et joue sur les motifs décoratifs du fond en mouvement.
Les travaux, d’abord suggérés par des vignettes, sont détaillées dans un pop-up. L’ergonomie est en lien avec le site complémentaire www.ije-prod.com.
number-symbol
number-symbol
number-symbol
Mandat: Zebankov
Catégories: Wordpress, Commercial
Date de création: 2017
Lien: www.zebankov.com
visual
Mandat: Zebankov
Catégories: Wordpress, Commercial
Date de création: 2017
Destiné à une clientèle de professionnels (entreprises, sociétés, associations, etc.), cette banque d’image en ligne propose un choix varié et original de cartes de vœux, cartes d’anniversaires et autres créations graphiques «clé en main» (en version animées ou statiques pour e-mailing; en tirages papier).
La recherche dans la base de données est automatisée et les commandes sont gérées par un système Wordpress d’e-boutique.
Afin d’étoffer l’offre, les contenus sont complétés régulièrement et un catalogue spécifique «communication visuelle» (banque de logos & identités) est en cours d’élaboration.
number-symbol
number-symbol
Mandat: Huitante
Catégories: Html/CSS, Fun
Date de création: 2017
Lien: www.huitante.ch
visual
Mandat: Huitante
Catégories: Html/CSS, Fun
Date de création: 2017
Conçue à l’origine comme identité graphique du site ije-prod.com, la fonte Huitante est inspirée du dessin des chiffres «8» et «0» dont les courbes sont stylisées par des angles «en chevrons» ou en «guillemets français» légèrement arrondis aux pointes.
Le reste de l’alphabet (numéros et caractères en minuscules) est décliné sur ce modèle.
Le nom lui-même fait également référence au nombre «80» qui se prononce huitante dans plusieurs cantons suisses francophones (Fribourg, Valais et Vaud).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Vitalis Events
Catégories: Html/CSS, Commercial
Date de création: 2017
Lien: www.vitalis-events.com
visual
Mandat: Vitalis Events
Catégories: Html/CSS, Commercial
Date de création: 2017
L’agence Vitalis Events de Genève a souhaité rafraîchir, avec un design original, son site afin de présenter ses activités dans l’organisation d’événements. La contrainte technique majeure réside dans la disposition des éléments en diagonal et devant s’adapter à tous types d’écran.
Certains effets visuels ont été écarté au profit de la simplicité de l’ensemble et le film d’introduction a été réalisé par une société tierce.
number-symbol
number-symbol
number-symbol
Mandat: Vœux 2017
Catégories: Animation, Fun
Date de création: 2016
Lien: www.ije-design.com
visual
Mandat: Vœux 2017
Catégories: Animation, Fun
Date de création: 2016
Faite avec Animate CC, cette carte de vœux pour l’année 2017 utilise une grande partie des possibilités d’animations du programme (bouton qui enclenche l’action, décomposition images par images, interpolation de formes et mouvements, dézoomage, etc.).
Le personnage est repris du site www.stop-10.com.
number-symbol
number-symbol
number-symbol
Mandat: SIAN ayurveda
Catégories: Wordpress, Commercial
Date de création: 2015
Lien: www.ayursian.com
visual
Mandat: SIAN ayurveda
Catégories: Wordpress, Commercial
Date de création: 2015
Version en «work in progress», cette plateforme de commerce proposant des soins (conseils médicaux, séjours en clinique) et vendant des produits ayurvédiques nécessite la mise en place:
• d’une boutique en ligne,
• d’un accès sécurisé pour certains utilisateurs,
• d’une base de données personnalisée (avec des dossiers par clients),
• de divers contenus et archivages spécifiques.
L’esprit général, déjà présent dans le logo, est celui du domaine d’activité (la médecine naturelle) et du pays d’origine (l’Inde).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Colorproof
Catégories: Html/CSS, Didactique
Date de création: 2015
Lien: www.prodige.ch
visual
Mandat: Colorproof
Catégories: Html/CSS, Didactique
Date de création: 2015
CBien que la conceptualisation date de 1999, la réalisation du prototype et du site internet du jeu de société Colorproof est assez récente. L’idée est d’apprendre tout en s’amusant qu’il est possible, en mélangeant 4 couleurs de base à des pourcentages différents, d’obtenir toutes les autres teintes.
La règle, les cartes, la boîte et le plateau de jeu sont présentés au fil des pages. Le projet, et donc le graphisme, s’adresse aux petits et grands enfants. Il reprend les coloris cyan, magenta, jaune et noire (les couleurs primaires) de même que le symbole «%».
number-symbol
number-symbol
number-symbol
Mandat: AJUSTE
Catégories: Wordpress, Institutionnel
Date de création: 2014
Lien: www.ajuste.ch
visual
Mandat: AJUSTE
Catégories: Wordpress, Institutionnel
Date de création: 2014
Basé dans le canton du Jura, AJUSTE est un organisme composé de professionnels des sciences humaines et sociales, travaillant bénévolement dans ce cadre et dont la mission est de venir en aide aux adolescents en proie à des difficultés d’ordres divers.
Ces intervenants apportent du soutien (d’où la symbolique du logo; réalisé en parallèle du site) et «démêlent» des situations compliquées (autre métaphore des lignes enchevêtrées dans l’animation en ouverture). Il existe un accès sécurisé par mot de passe pour une section non publique.
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Association R&D
Catégories: Wordpress, Institutionnel
Date de création: 2014
Lien: www.rd-association.ch
visual
Mandat: Association R&D
Catégories: Wordpress, Institutionnel
Date de création: 2014
Afin de présenter les activités sur le terrain et les diverses actions menées en Suisse de l’organisme d’entraide au «développement rural du sud de l’Inde» (à présent rebaptisé «Karangal»), le site se veut informatif dans son contenu et fait la part belle aux photographies.
Les fonds récoltés servent principalement à financer une école de couture d’où certaines références dans la mise en page.
number-symbol
Mandat: Belzébuth
Catégories: Html/CSS, Fun
Date de création: 2014
Lien: www.boucface.com
visual
Mandat: Belzébuth
Catégories: Html/CSS, Fun
Date de création: 2014
Parodie des «Doodles*» de Google et prenant le contre-pied du site Facebook, cette galerie de portraits montre des personnages issus de l’imagerie populaire ésotérique qui sont mis en ligne au gré des événements du calendrier et en fonction de l’inspiration du moment.
Le blanc et les couleurs vives font partie des contraintes du concept.
L’interactivité de la carte «joker» utilise la technologie Animate CC.
*animation du logo du moteur de recherche selon les commémorations du jour
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Printable
Catégories: Html/CSS, Commercial
Date de création: 2013
Lien: www.printable.ch
visual
Mandat: Printable
Catégories: Html/CSS, Commercial
Date de création: 2013
Né de ma propre initiative et dans le but de démarcher des investisseurs potentiels, cette plateforme sert à expliquer de manière globale le concept des sets de table publicitaires prédécoupés et précise en particulier les divers avantages pour les futurs partenaires et utilisateurs.
Les filets en points ainsi que le logo sont des allusions aux perforations du papier de même que les couleurs des rubriques sont celles, à choix, des sets.
number-symbol
number-symbol
number-symbol
Mandat: Vœux 2013
Catégories: Animation, Fun
Date de création: 2012
Lien: www.ije-design.com
visual
Mandat: Vœux 2013
Catégories: animation, Fun
Date de création: 2012
Réalisé grâce à un code très simple (et notamment en utilisant une action en survol d’un élément), le lien vers cette courte animation est envoyé par e-mail – au moment des vœux – durant le passage de 2012 à 2013.
Le programme utilisé est Adobe Edge (l’ancêtre de Animate CC).
number-symbol
number-symbol
Mandat: Sixtine
Catégories: Html/CSS, Fun
Date de création: 2012
Lien: www.sixtine.ch
visual
Mandat: Sixtine
Catégories: Html/CSS, Fun
Date de création: 2012
Directement lié au site www.ije-design.com, cette police de caractères est conçue grâce aux faisceaux lumineux des 16 sources (=16 spots =16 points) dirigées dans le cercle central. L’animation est construite avec des images gif.
Le nom «sixtine», qui est un jeu de mot avec le terme anglais «sixteen», fait également référence au nombre de ronds autour du disque.
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: IJE Design
Catégories: Html/CSS, Commercial
Date de création: 2012
Lien: www.ije-design.com
visual
Mandat: IJE Design
Catégories: Html/CSS, Commercial
Date de création: 2012
Deuxième portfolio online de mes travaux graphiques dont le contenu est régulièrement mis à jour.
Le concept est inspiré des effets lumineux colorés – animés avec Adobe Edge – et est associé avec la fonte Sixtine.
Le postulat général est de surtout montrer des visuels (toujours placés dans la partie ronde au milieu) avec un minimum de textes (boutons-liens répartis autour du disque central et dirigés vers l’extérieur à la manière d’un rayonnement).
number-symbol
number-symbol
number-symbol
Mandat: Bus Stop 10
Catégories: Html/CSS, Fun
Date de création: 2011
Lien: www.stop-10.com
visual
Mandat: Bus Stop 10
Catégories: Html/CSS, Fun
Date de création: 2011
Répertoire plus de 170 histoires drôles ayant pour cadre un arrêt de bus (arrière-plan unique) avec des personnages récurrents (10 caractères également décrits dans le site) ayant chacun une personnalité et une couleur propre (le reste du décor et des autres protagonistes étant gris) voilà comment est présenté mon projet personnel de bandes dessinées.
Autre caractéristique, le site est construit dans le sens horizontal; ce qui demande une optimisation du système de navigation.
number-symbol
number-symbol
number-symbol
Mandat: Vouivre
Catégories: Html/CSS, Didactique
Date de création: 2011
Lien: www.vouivre.net
visual
Mandat: Vouivre
Catégories: Html/CSS, Didactique
Date de création: 2011
En lien avec une légende de la campagne jurassienne, ce site pédagogique présente dans le détail cet animal imaginaire: la vouivre (sorte de cousin du dragon possédant une pierre précieuse en guise d’œil unique).
Outre certaines astuces graphiques (navigation via les lettres du titre, aussi reprises dans les enluminures; répétions de motifs, gifs animés), la disposition des éléments – pas encore responsive à l’époque – joue sur des coordonnées (placement dans l’espace) et sur des couches (placement en-dessus/en-dessous).
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
number-symbol
Mandat: Quatre Quatre Zéro
Catégories: Html/CSS, Fun
Date de création: 2008
Lien: www.quatrequatrezero.com
visual
Mandat: Quatre Quatre Zéro
Catégories: Html/CSS, Fun
Date de création: 2008
Partant de mon projet, d’abord édité en livre avec la collaboration d’une association de cyclistes, la majeure partie de ce site compile plus de 200 blagues sous forme de questions/réponses interactives.
Comme pour le jeu Colorproof et vouivre.net, la navigation est incluse dans le titre (sur fond de fumée d’échappement).
number-symbol
number-symbol
number-symbol
Manuel Jubin
visual
Manuel Jubin
Dans un monde uniformisé, l'agence de création multimédia IJE Design, basée dans l'arc lémanique, apporte des solutions innovantes à vos besoins de visibilité sur internet tout en vous démarquant de vos concurrents.
 
Originalité, esthétisme et ergonomie associés aux techniques de pointe feront le succès de votre communication; tel est mon engagement depuis plus de 24 ans.
 
La première étape est simple et commence ici: ENVOYER UN MESSAGE.
number-symbol
number-symbol
number-symbol
number-symbol
ijeprod-menu