Teddy Payet

LET.archi.fr, millésime 2023

Teddy Payet — 2023-07-06T10:36:21Z

L'un de mes premiers clients en développement Web est le LET de l'ENSAPLV. Nous travaillons en collaboration depuis plusieurs années ensemble. Cette année 2023 a été le souhait et l'engagement pour le laboratoire de mettre à jour le design du site et le faire rentrer dans un monde plus actuel dans son utilisation. La refonte a été mise en ligne ce lundi 3 juillet 2023.
Cette refonte graphique garde l'essence initiale du site mais rafraichit sa lecture sur l'ensemble des supports avec du (…)

- Développement / SPIP, Traitement automatique des images, HTML, CSS, Graphic Design, Web Design, MySQL, École Nationale Supérieure d'Architecture de Paris Lavillette (ENSAPLV), PHP, Développeur Web, Freelance, jQuery, Bootstrap (CSS et JS), PHPStorm, Git

Une charte graphique pour votre identité papier et web.

Teddy Payet — 2012-10-25T10:02:07Z

Il est toujours intéressant de voir l'évolution d'un logo, d'une identité d'une marque (que ce soit une grande entreprise comme le boulanger du coin). Mais il ne faut pas oublier qu'un logo seul ne fait pas tout, il vit dans un environnement, avec d'autres éléments. C'est ce qui fait sa force… ou sa faiblesse. Un moyen d'aider les personnes qui reprendraient votre création est de réaliser une charte graphique.

Voici quelques points qui sont essentiels dans une charte graphique. En premier lieu, vous êtes en droit de me demander pourquoi créer cette charte ?

Et bien, je pense qu'on aura ainsi un point de référence lors de la remise des fichiers. Le client visualisera plus facilement comment vivra son image, son logo.
Mine de rien, avoir une charte graphique, un guide de référence, vous donne l'air professionnel. Les personnes qui auront accès à ce guide sauront que vous avez réfléchi jusqu'au bout.
Vous gardez un certain contrôle sur votre création. Et oui, cela arrive qu'une relation avec un client ne soit pas éternelle pour X raisons. Mais aussi, que vous ne puissiez pas réaliser tous les projets de votre client en même temps. Alors les autres prestataires se référeront à votre charte.
Vous évitez qu'on maltraite votre création et que le logo garde tout l'impact nécessaire que vous aviez défini lors de sa réalisation.
Là aussi, ça vous permet aussi à vous, en tant que graphiste, de réaliser un concept cohérent, à perfectionner votre langage graphique.

Rentrons maintenant dans le vif du sujet.

Introduction à l'image corporate

Ce point devra être concis et valoriser l'identité. Vous n'allez pas non plus ré-inventer la roue, l'idée générale vient du brief que vous avez reçu (à l'écrit ou à l'orale) de votre client. Vous devez ré-écrire cela dans un contexte plus claire, plus structuré pour amener les gens vers votre vision de l'image corporate.
Essayez dans la mesure du possible de faire passer votre concept dans la première phrase.
Pour étayer votre message, vous pourriez vous permettre l'utilisation d'une image, une photographie auprès de votre texte.
Un exemple : vous avez créé le logo pour un boulanger artisan qui n'utilise que des produits “bio”. Utilisez des photos des matières premières ou du produit fini : le blé, la farine, le pain, etc. ou le boulanger en train de façonner son pain. Tout cela en gros plan. Cela renforcera l'esprit de savoir faire, d'importance du produit, du respect du produit. Si vous prenez des photos du boulanger lorsqu'il travaille la pâte, jetant de la farine, l'image prise du mouvement donnera un dynamisme à la photographie comme à la page où se trouvera cette dernière.

Le logo

Eh bien, il faut bien le présenter à un moment ou un autre, de préférence en premier. Il est le bloc moteur de votre identité, de votre concept. Vous devez identifier ici la structure de votre logo et le montrer sous toutes ses formes. Généralement, le logo est composé d'un symbole et d'un nom. À partir de là, vous devez répondre à ces questions :

Comment vit les éléments l'un au dessus de l'autre ?
À l'horizontal, le symbole à droite ou à gauche du nom ?
Quelle est la proportion du nom par rapport au symbole ?
Comment vit chaque élément séparément ? (Le nom seul, le symbole seul)

Mais à cela aussi, dans chaque cas, vous devez donner la dimension minimale pour l'utilisation du logo (en mm comme en pixel pour le web). En effet, si un logo avec une accroche est trop petit, on n'arrive plus à lire l'accroche, ce qui fait perdre l'impact de l'accroche.

La gestion du blanc

Ou la gestion de l'espace autour de votre logo.
Pour vous, il est naturel de laisser un espace « blanc », ou vide si ce terme vous parle plus, autour de votre logo. Alors montrez-le, quelle est l'unité de mesure vous permettant de créer ce blanc ? Une lettre du nom ? Une forme de votre symbole ?

La couleur

Votre logo est forcément composé de couleur(s). Vous devez ainsi inclure la palette de couleurs qui ira avec la communication de votre logo.
On pourrait par exemple imaginer que pour le logo d'une grande entreprise du CAC 40, vous avez définie soit une couleur pour chaque service de l'entreprise, soit une pour chaque secteur régional qui compose l'entreprise (une en Poitou Charentes, une à Paris, à Marseilles, dans le Morbihan, à la Réunion, etc.)
Pour chaque couleur, vous devrez spécifier les valeurs CMJN, Pantones, RVB et Hexadécimal.
Si votre logo est composé de plusieurs nuances de couleurs, vous pouvez définir la version Noir&Blanc, monochrome, version au trait, etc.
Un très bon exemple de concept est la Fédération Française d'HandiSport :
http://www.handisport.org/content/c...
http://www.handisport.org/ftp/Chart...

L'utilisation correcte du logo.

Si vous avez répondu aux différentes questions précédemment posées pour le logo, vous avez fait déjà une bonne partie du travail. Il vous sera très facile maintenant de montrer la bonne utilisation de votre logo dans différentes situations :

sur un fond de couleur claire ;
sur un fond de couleur foncé ;
sur une photographie ;
sur une photographie trop détaillée ;
sur un dégradé de couleur ou un halo ;
etc.

Des exemples de chose à faire et ne pas faire

Bien, vous avez montré plusieurs situations d'utilisations de votre logo. Maintenant, il faut aussi illustrer ce que vous ne désirez pas voir sur votre création :

déformer le logo ;
changer son orientation ;
mettre un logo en relief/3D ;
mettre une lueur externe ;
changer le symbole ;
etc.

À vous de jouer et d'être le pire graphiste, pour une fois, que vous ayez connu.

La police officielle

Votre logo est composé d'un nom, de ce fait, vous utilisez une police précise. Doit-on utiliser cette police partout ? Quelle est la taille, l'interlignage, l'espace avant ou après, etc. Ces derniers points sont à définir pour votre brochure papier et pour votre site internet.
Et à ce titre, si votre police n'est pas une police classique internet, il vous faut spécifier la police alternative. Il existe toutefois de nos jours, les Webfonts (cf. http://www.google.com/webfonts) qui permettent de piocher dans une gamme plus large de polices.

Mises en page et compositions

En créant des templates et des gabarits pour la mise en page, vous pousserez à une bonne pratique et une constante dans l'univers de l'identité que vous avez créé. Vous pouvez définir des modèles pour les brochures papiers tout comme des pages web.
Pour se faire, vous pourriez définir une grille de mise en page. Référez-vous à ces articles sur l'harmonie de la page :

À vous d'étoffer vos connaissances au fil de vos lectures et de vos inspirations.

Pour aller plus loin encore…

Les premiers points abordés sont déjà suffisants pour constituer une bonne charte graphique.

Et le texte ?

On parle beaucoup de charte graphique, mais il reste aussi un élément important : le texte. Si vous êtes bon rédacteur, vous pourriez aussi déterminer certaines règles éditoriales simples :

Comment écrire des abréviations ;
Comment écrire les chiffres et les nombres dans un texte ;
Comment écrire une date ;
etc.

La signalétique

SI vous avez créé l'identité visuelle d'une entreprise, il peut être bien de créer toute la signalétique de l'entreprise :

les panneaux d'indication de direction ;
les noms de zone ou de salles ;
les portes des pièces fonctionnelles (ascenseurs, toilettes, local technique, etc.) ;
l'enseigne à l'entrée de l'entreprise ;

L'iconographie

Préférez vous utiliser des illustrations ? Des photographies ?
Quel est le cadrage pour chaque élément ? Dans le cadre des illustrations, doivent-elles être réalistes ? Schématisées ? En “2D” ? En 3D ? Très colorées ? Etc.
Les photographies : Des photo d'objets ? En gros plan ? Quel thématique pour les photos ? La palette de couleur, etc.
Vous pouvez aussi créer une bibliothèque d'icônes à utiliser selon les besoins dans une brochure papier, ou le site internet.

Conclusion

On peut aller très loin dans une charte graphique. Il vous faudrait quantifier et identifier les besoins de votre client. Il est sûr que vous n'allez pas passer autant d'heures sur le projet d'une entreprise de 300 salariés et le projet d'une entreprise connu de 300 personnes.
Bien entendu, que ce soit pour l'un ou pour l'autre, vous vous devez d'être professionnel et fournir un travail de qualité.

Visualiser le wireframe de vos sites préférés !

Teddy Payet — 2012-04-11T06:00:00Z

Je vous ai parlé récemment d'un wireframe. Et pour se perfectionner, il est parfois sympa de pouvoir visualiser nos sites préférés en wireframe pour comprendre la structure, l'agencement de la page. Wirify est fait pour vous.

C'est vraiment un outil webdesigners et/ou développeurs. C'est un outil très simple : placer le lien fourni sur le site pour l'utiliser par la suite.
Il y a une version gratuite, suffisante pour vous faire un idée des blocs de vos sites.
La version payante vous permet d'exporter et d'éditer les wireframes de ces sites.

Voici quelques wireframes de sites que j'apprécie :

SPIP-Contrib.net

Smashing Magazine

Columbia College - Alumni

Blog du Webdesign

Un kit pratique pour réaliser vos Wireframe

Teddy Payet — 2012-04-09T07:00:00Z

On voit beaucoup circuler sur le net des kits pour faire du Wireframe. Il en existe des brassées de ces kits. En voici un que j'ai trouvé très bien.

Définition

Avant de commencer, il est bon de rappeler la définition d'un wireframe. Voici ce que dit Wikipedia :

Le Wireframe (ou maquette fil de fer) en web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique (client, graphiste, etc.).

The ultimate wireframe UI kit

Un nom prétentieux, mais une palette non négligeable…
Le reproche que je pourrai faire aux kits usuels c'est l'aspect un peu froid des objets. Ce n'est pas le cas de celui-ci. Il est plutôt pas mal graphiquement et reste suffisamment neutre pour ne pas induire en erreur vos recherches graphiques par la suite. À ne pas négliger.

Voici le lien : http://medialoot.com/item/the-ultimate-wireframe-ui-kit/

Il vous permet de disposer d'un peu plus de 60 éléments graphiques pour agrémenter vos maquettes rapidement. Le fichier fournit est un fichier PSD contenant des répertoires correspondant à chaque élément graphique. C'est suffisamment compréhensible pour l'exploiter rapidement. De plus, les formes sont vectorisées, le texte modifiable, donc vous pouvez l'agrandir à souhait.

Amusez-vous bien !

The NounProject, des icônes par centaines…

Teddy Payet — 2012-04-07T12:16:53Z

Lors d'une discussion sur la liste de la zone (si mes souvenirs sont bons) au sujet des l'interface privé de SPIP 3, The Noun Project a été mentionné (je vous en avais parlé ici). Je ne le connaissais pas. L'erreur a été corrigée.

Préambule

The Noun Project (TNP) est une banque d'icônes offerte gratuitement à l'internaute lambda.
Et sincèrement, ces jeux d'icônes sont très belles, modernes.

Tout y est traité graphiquement en "aplat". Pas de reflets, pas d'ombres, pas de volumes. L'univers graphique est simple, sobre. Et moi, personnellement, j'aime ça !

Présentation de The Noun Project par The Noun Project

Voici la présentation, traduite de l'anglais au français, sur leur site :

« Partage, célébrations et l'amélioration du langage visuel du monde"

"The Noun Project" collecte, organise et ajoute des symboles hautement reconnaissables qui forment le langage visuel du monde, afin que nous puissions les partager d'une manière amusante et significative.

Le projet SPIP

On va tout de même revenir à nos moutons…
Comme je vous l'ai dit en introduction, j'ai connu ce site sur la liste de la zone de SPIP. Nous parlions de la réalisation d'un nouveau jeu d'icônes pour l'interface de SPIP.

Le soucis est que ce jeu d'icônes TNP est plus illustrative du quotidien : des icônes de transports (en commun ou "privé", utilitaires, des avions, etc.), la médecine, les loisirs (le foot, le jogging, le vélo, etc.)
Donc, la grosse difficulté est de pouvoir adapter ce jeu d'icônes à l'univers informatique. Ce n'est pas une tâche très complexe mais plus une tâche de longue haleine car il faut trouver une icône de base pour traduire une icône nécessaire à SPIP.

Un exemple sera plus parlant peut-être.
Dans SPIP, on utilise "les cookies de correspondance". L'icône associé : ben, un cookie !
TNP n'a pas d'icônes de cookies… Que cela ne tienne. J'ai trouvé l'icône de la pizza comme motif. Voici le résultat :

Le début des travaux

J'ai publié sur la zone le résultat des premières icônes. Vous pouvez voir ça ici :
http://zone.spip.org/trac/spip-zone...
Je dois continuer ce travail et le terminer.

Je vous tiens au courant. ;-)

Spip LaTex, le logo…

Teddy Payet — 2012-01-17T08:00:00Z

Suite à un appel de Maieul sur twitter, j'ai fait une petite illustration pour en tirer un logo peut-être par la suite.

Contexte

Maieul a réalisé un gros travail sur un plugin basé sur LaTeX pour exporter un livre en pdf à partir des articles (et la structure) sous SPIP :
~~http://www.spip-contrib.net/Un-livr...~~
http://www.spip-contrib.net/Livre-a...

Pour exemple, il a généré un pdf à partir du site programmer.spip.org. Il faut savoir que Marcimat a réalisé le livre du même nom à partir de SPIP grâce à PrinceXML. Ce dernier n'est pas libre. C'est une solution payante. D'où la problématique que Maieul essaie de résoudre (avec brio).

Revenons à nos moutons.

Ce que j'ai proposé en illustration

Le logo de SPIP est un écureuil, mais plus exactement, un polatouche. En faisant une petite recherche sur Google, j'ai pris une image de ce polatouche en plein vol. (Ce projet nous prendre de la hauteur et voir de nouveaux horizons avec SPIP et LaTex).

En la retravaillant sous Illustrator, voici ce qui en ressort :

SPIP-LaTex, l'illustration

Ceci est plus illustration car il y a beaucoup de détails pour un logo. C'est donc avant tout une piste graphique pour le "futur" logo.

Version logo - 64px

Version logo - 32px

Version logo - 24px

Version logo - 16px

La couleur de l'illustration n'était qu'arbitraire. En logo, dans la vignette, j'ai choisi le bleu car il me semble avoir vu plus de bleu dans le monde du LaTex qu'une autre couleur. Je n'ai pas choisi de mettre le "violet" usuel de SPIP pour essayer de passer un peu à autre chose.

Il y a eu d'autres propositions de logo fait à Maïeul dans la communauté spipienne. Bien sûr, le choix du logo final tient à Maieul car c'est son projet.

Flyer Séminaire de la Pentecôte 2011

Teddy Payet — 2011-06-09T19:39:26Z

Pour un séminaire organisé par le Temple de Paris, un flyer a été envoyé par email. Les visuels ont été sélectionnés sur le site Stock.xchng

- Design / Photoshop, Graphic Design, Indesign, Print, Temple de Paris, Amis, Développeur Web, Intégrateur, Graphiste, Bénévole

Flyer Gospel Art - juin 2011

Teddy Payet — 2011-05-30T21:43:14Z

Le Gospel art est un concert événement où des chanteurs, des musiciens et des danseurs (petits et grands) partagent leur passion autour d'un même Esprit.

- Design / Photoshop, Graphic Design, Indesign, Print, Temple de Paris, Amis, Graphiste, Bénévole

Sources d'inspiration quotidiennes

Teddy Payet — 2010-03-30T08:06:47Z

Je voulais vous faire découvrir une première sélection des sites que je consulte quotidiennement pour rester en éveil, trouver l'inspiration, mais aussi me tenir informé des dernières avancées technologiques (que ce soit dans le développement web ou la vie de tous les jours : maisons, déco, informatique, high tech...)
Faute avouée, faute à moitié pardonnée : je consulte ces sites grâce au flux rss de ces derniers... Tout est concentré en un même endroit par l'intermédiaire de Google Reader. Fort utile car accessible partout, du moment qu'on a internet...

Commençons la liste :

10Steps.SG

10Steps.SG

1stwebdesigner

1stwebdesigner

A List Apart

A List Apart

http://www.alistapart.com/

Advanced Photoshop Mag

Advanced Photoshop Mag

http://advancedcreation.fr/

Advanced Web Design

Advanced Web Design

http://www.advancedweb.fr/

Beautiful Email Newsletter

Beautiful Email Newsletter

http://www.beautiful-email-newsletters.com/

Behance Network

Behance Network

http://www.behance.net/

Design You Trust

Design You Trust

http://designyoutrust.com/

Logo From Dreams Awards

Logo From Dreams Awards

http://www.logofromdreams.com/

Logo Gala

Logo Gala

http://www.logogala.com/

Smashing Magazine

Smashing Magazine

http://www.smashingmagazine.com/

tripwire magazine

tripwire magazine

http://www.tripwiremagazine.com/

Temps-Libre Magazine / phase 1

Teddy Payet — 2010-03-23T08:43:07Z

Temps-Libre est un magazine pour les senior présentant des activités, des bons plans, des voyages, etc.
Le travail, en phase 1, a été de réaliser la mise à jour de SPIP 1.9.2c vers SPIP 2 et ajout de nouvelles fonctionnalités :
– commentaires ;
– flux RSS ;
– Vidéos ;
– envoi d'articles à des amis ;
– enregistrement d'articles en PDF ;
– mise en page simple alternative pour impression ;
– gestion de bannières publicitaires ;
– etc.
Une refonte esthétique a été réalisé en axant (…)

- Développement / SPIP, Traitement automatique des images, XHTML, CSS, Dreamweaver, Graphic Design, Web Design, MySQL, Seniorcom, Développeur Web, Intégrateur, Freelance