Transat Creative Design

Par Pierre Pernix, le 28 janvier 2011  Laissez un commentaire

La page d'accueil du thème Signature

Signature est un thème WordPress conçu pour répondre aux besoins des artistes visuels à la recherche d’un portfolio minimaliste et discret qui mettra en valeur leur travail.
Ce thème a été conçu pour être installé avec WordPress version 3.0 et au delà. Il est gratuit et peut-être réutilisé et modifié y compris à des fins commerciales (Voir license).

Sommaire

• Points forts
• Pré-requis
  1. Créer la catégorie Blog
  2. Créer la page Contact
  3. Renseigner ses informations utilisateur
• Comment ajouter du contenu à votre portfolio ?
• Comment ajouter du contenu à votre blog ?
• Comment personnaliser l’en-tête ?
• Langue
• Exemples
• Téléchargement

Si vous avez des interrogations concernant ce thème, partagez-les dans les commentaires…

Points forts

Vous êtes peintre, photographe, illustrateur, graphiste… ? Vous êtes à la recherche d’un thème simple et efficace pour présenter vos visuels ? Associé à la puissance de la plateforme de publication WordPress, le thème Signature répondra à vos besoins de manière originale :

• Bénéficiez d’un graphisme et d’une navigation minimalistes qui feront la part belle à vos visuels.
• Présentez l’index de votre portfolio sous forme de galerie, rapidement accessible au bas de chaque page.
• Ajoutez simplement des images à l’intérieur de votre portfolio, elles défileront dans un carrousel en jQuery.
• Faites figurer votre bio, vos comptes de réseaux sociaux et votre CV au bas de chaque page.
• Profitez du blog pour tenir informé vos visiteurs de votre activité artistique.

Afin de vous faire une idée de la pertinence d’un tel thème pour présenter vos œuvres, allez voir les exemples de portfolio utilisant déjà Signature.

Pré-requis

Vous venez d’installer Signature en lieu et place de votre ancien thème, félicitations ! Mais avant de pouvoir pleinement l’utiliser, il y a quelques conditions à remplir. Voici lesquelles :

1. Créer la catégorie Blog

Rendez-vous dans le gestionnaire de catégories (Articles > Catégories) et ajoutez une nouvelle catégorie dont le nom sera «Blog» et l’identifiant «blog».

2. Créer la page Contact

Si vous voulez disposer d’un formulaire de contact dans vos pages qui permettra à vos visiteurs de vous écrire directement, suivez ces quelques étapes :

Installez l’extension (aussi appelée plugin) Contact Form 7, que vous trouverez soit en effectuant une recherche «contact form 7» dans le gestionnaire d’extensions (Extensions > Ajouter), soit à l’adresse de l’extension dans le répertoire des extensions WordPress.

Une fois votre extension installée (et activée), vous verrez apparaître une entrée appelée «Contact» tout en bas de votre menu principal WordPress. Là, vous pourrez modifier un formulaire de contact et en configurer les options. Sauvegardez vos modifications et copiez le bout de code qui s’affiche en haut de la page.

Créez une page (Pages > Ajouter) que vous nommerez «Contact». Collez le bout de code à l’intérieur, that’s it !

Le code du formulaire doit être reporté sur votre page Contact nouvellement créée

3. Renseigner ses informations utilisateur

Créez un Gravatar sur gravatar.com. Ce service vous permettra d’associer une adresse email (la vôtre) avec une image personnalisée, laquelle apparaîtra non seulement dans la rubrique «A propos de…» du thème, mais vous servira également d’avatar devant vos commentaires en réponse aux visiteurs de votre site et dans les commentaires que vous laisserez sur d’autres blogs.

De retour dans WordPress, rendez-vous à la rubrique «Profil» : vérifiez que le «Nom à afficher publiquement» est bien celui que vous voulez voir apparaître, renseignez informations de contact et biographie.

Le curriculum vitae, lui, pourra-être uploadé en passant par Médias > Ajouter. Il vous suffira de reporter le contenu du champ «Adresse web du fichier» du média ajouté au champ «Curriculum vitae» de votre profil.

Sur gravatar.com vous pourrez associer facilement un avatar avec votre adresse email

Bien évidemment, ces informations sont facultatives. Mais sans Gravatar personnalisé, ni informations de contact, la rubrique «A propos de…» risque de paraître bien vide.

Comment ajouter du contenu à votre portfolio ?

Créez un nouvel article. Ouvrez l’outil d’ajout d’images en cliquant sur «mettre une image à la une». Chargez vos images.

Si vous avez préparé une image à la une (la vignette qui pointera vers le contenu de votre article, laquelle devra correspondre à une taille de 162×162 pixels) c’est le moment de l’ajouter en cliquant sur le lien «Utiliser comme image à la une» en dessous des détails de l’image. Si vous n’avez pas préparé de vignette, WordPress en génèrera automatiquement une.
Pour les autres images, celles que vous voulez voir figurer dans le carrousel, il n’y a rien à faire de plus : cliquez sur «Enregistrer toutes les modifications» et publiez votre article.
Les articles du portfolio peuvent éventuellement être rattachés à une catégorie que vous aurez créé (ex : peintures, sketchbook…), mais ne doivent pas appartenir à la catégorie Blog.

Uploadez les images de votre portfolio

Comment ajouter du contenu à votre blog ?

Créez un nouvel article. Naturellement, celui-ci doit-être rattaché à la catégorie Blog. L’ajout des images se fera selon la même méthode que celle décrite pour le portfolio, à la différence que pour faire figurer vos images dans votre article, il faudra utiliser le bouton «Insérer dans l’article».

Comment personnaliser l’en-tête ?

Depuis peu, WordPress s’est enrichi d’une fonctionnalité fort utile : rendez-vous dans Apparence > En-tête et appréciez la possibilité de modifier le contenu de l’en-tête. Vous pourrez remplacer l’image de fond (jusqu’à 1200×150 pixels), ou choisir de ne pas afficher le titre de votre site (si, par exemple, vous décidez plutôt de le faire figurer dans l’image de fond).

Modifiez les éléments de l'en-tête de votre site

Langue

Signature embarque par défaut une traduction française du thème. Si vous souhaitiez revenir à une version anglaise de votre site, supprimez le fichier fr_FR.mo présent dans le répertoire /wp-content/themes/signature/languages. Et si vous décidez de vous atteler à la traduction de Signature dans une autre langue, un fichier signature.pot présent dans le même répertoire vous facilitera la tache.

Exemples

Ici s’ajouteront des exemples d’utilisation du thème Signature. N’hésitez pas à soumettre la vôtre dans les commentaires…

• Essi, dessinatrice de presse : http://www.essi-dessins.com
• Panix, illustrations et cartoons pour le web : http://panixdrawings.com

Téléchargement

Téléchargez gratuitement la version 1.1 du thème Signature

Par Pierre Pernix, le 21 janvier 2011  Laissez un commentaire

Ville et Cinéma, deuxième

Pour sa deuxième édition, le festival Ville et Cinéma (dont le nom illustre l’objet sans équivoque) perpétue sa résidence nantaise et investit complètement le cinéma Katorza avec un thème mythique : la ville de New York. Au programme : Cassavetes, Scorsese, Jonas Mekas, et des intervenants variés et passionnés pour parler de cinéma, d’architecture et d’urbanisme dans la grande pomme. Jonathan Nossiter et Raphaël Nadjari, cinéastes invités, rencontreront le public à l’issue des projections de leurs films respectifs.

Au programme, aussi, la refonte d’un site web déjà réalisé par Transat pour annoncer la première édition. A l’époque, l’objectif était double : annoncer les détails de programmation d’un événement multiforme (un cycle régulier de projections dans un petit cinéma de Nantes et un festival de trois jours à cheval sur plusieurs lieux, dont le Lieu Unique et le Katorza) et proposer un ensemble de ressources dont des fiches films et livres, des résumés d’articles, un blog.
Moins d’un an plus tard, les changements annoncés dans la programmation Ville et Cinéma pour 2011 (suppression du cycle, mise en avant d’une thématique) ont révélé la complexité de la précédente formule, et au passage le côté « usine à gaz » d’un site web dont les entrées étaient un peu trop nombreuses et dont la régularité de publication, en particulier celle du blog, peinaient à trouver leur rythme.

Formule plus simple, site web plus simple

Au programme, donc, la constitution d’un nouveau site en deux parties : l’une consacrée à l’édition annuelle du festival de trois jours à un seul endroit, avec un design adapté à la thématique de l’année (New York, en l’occurence) et composé d’une page d’accueil et d’une grille de programmation ; l’autre partie, bien dissociée de l’événementiel, reprenant le contenu du blog et s’enrichissant d’une véritable filmographie/bibliographie grâce à la puissance des custom taxonomies de WordPress : là où, l’année précédente, chaque fiche film n’était rien moins qu’un article de blog déguisé, les utilisateurs pourront désormais ajouter des films à leur filmographie en remplissant des champs (réalisateur, date de sortie, genre, etc) dans leur interface administrateur.
Cet article de l’incontournable Justin Tadlock a été un bon aiguillon. C’est que les efforts des concepteurs de WordPress pour en faire un outil qui n’a plus grand chose à envier aux CMS commencent à porter leurs fruits.

Une page d’accueil événement

L’accueil, à l’identité forte (reprise de la créa print de l’événement) n’est qu’une mise en avant du festival lui-même, alors que l’accès au blog et à la filmographie/bibliographie sont désormais limités à la navigation. L’an passé, l’accueil était graphiquement partagé à parts égales entre l’événement (à la fois festival et cycle, pfou !), sans thématique particulière, et les entrées du blog et des ressources, dans une ambiance de portail bouffi (!).

Une grande importance a été accordée au carrousel de teasing autour des quelques films phare de la programmation, lequel carrousel mène à un unique lien vers la grille détaillée des réjouissances. Volontairement, cet accès à la grille est limité à la page d’accueil, ce qui obligera les visiteurs venant du blog à passer par l’accueil, ses teasings, son édito et sa liste d’intervenants avant d’entrer dans le détail.

Twenty Ten pour du contenu en noir et blanc

Les ressources adoptent un look très sobre et (presque) monochrome, sans lien apparent avec l’édition du festival en cours. Il s’agit, très modestement, d’une adaptation du thème par défaut de Worpdress 3.0, Twenty Ten, dont la clarté convient aux préoccupations plutôt pointues de Ville et Cinéma et offrira un bon contraste avec les pages événement, plus colorées.
C’est le blog, qui, entre deux éditions, se substituera à l’accueil événementiel jusqu’à l’annonce de la prochaine programmation. Ainsi, les festivités finies, villeetcinema.com redevient un site calme et informatif, qui va direct à l’essentiel pour ses visiteurs opérant derrière un moteur de recherche (lesquels, naturellement, représentent la moitié du trafic du site) : actualités et ressources sur le thème Ville et Cinéma.

Bon pied (de page), bon œil

Et puis, partout sur le site un bon gros footer, tel qu’ils sont recommandés de nos jours, concentre l’ensemble des informations pratiques relatives à l’édition en cours (ce qui explique qu’il en a hérité du design). C’est une heureuse évolution de la précédente formule, où les grandes infos (Qui sommes-nous ?, Infos pratiques, etc) étaient dispersées sur plusieurs pages. Ainsi, ces infos restent accessible en permanence partout, depuis la navigation (ancre) et surtout en fin de lecture des articles du blog, manière de ramener les visiteurs atterris dans les ressources vers la présentation d’un festival qu’ils ne connaissaient pas…
En point d’orgue : les dates, les coordonnées du lieu, et surtout un plan dont l’absence d’interactivité, comparée à celle d’un plan Google Maps, est infiniment compensée à la fois par son intégration au design, par son faible poids de chargement, et par sa simplicité.

Et déjà, alors que la livraison du site est toute fraîche (bouclage tardif de la programmation définitive oblige), on attend des statistiques qu’elles révèlent le succès de cette nouvelle conception. A vous, également, de vous forger un avis sur villeetcinema.com et de réserver votre week-end du 10 au 12 février, à Nantes, pour une virée new-yorkaise de films et de débats.

Par Pierre Pernix, le 6 janvier 2011  Laissez un commentaire

Bonne habitude

Un autre « bonne année » dans la multitude des « bonne année » du web : « bonne année » familiale, « bonne année » militante, « bonne année » quotidienne régionale, « bonne année » marketing, « bonne année » de circonstance.

Pourtant, à force, cette petite phrase qui vient se nicher dans notre inconscient finit par y faire son chemin. Et puis voilà : régime, famille, études, économies, repeindre le plafond, monter son entreprise : on se fait à l’idée, comme chaque année, qu’il y a matière à un nouveau départ. Comme d’habitude. Tant mieux.

Résolutions

Alimentons, de façon subjective, la liste des résolutions, lesquelles pourraient bien devenir les vôtres :
Encore améliorer le référencement de son site web, sa visibilité sur Google. Enrichir son blog pour qu’il devienne enfin ce qu’il est parfois chez les autres : un lieu de ressources et d’échange, et songer (froidement) qu’alimenter un blog en articles sérieux, pertinents sur une thématique c’est apporter du référencement ciblé, autour de cette thématique, donc des lecteurs, à son blog. Lequel renvoie vers son site, son porfolio, sa vitrine, etc.

Envisager de rejoindre une communauté, telle celle du Webdesign Friday (rendez-vous francophone des webdesigners), tenter d’y apporter sa pierre à l’édifice, y rester pour le plaisir et s’y faire connaître.

Écrire quelques tutoriels autour des logiciels libres (Inkscape, Gimp, Bluefish…) qu’on utilise au quotidien car il est logique de faire bénéficier librement de son savoir-faire sur des outils dont la libre circulation nous a profité.

Créer sur mesure sites web, identités, packagings. Essayer de ne pas tomber dans le piège des showcases et des sites « pour inspiration » qui permettent de trouver ailleurs des idées qu’on a pas eu le temps de faire mûrir au risque de produire un objet qui a toutes les chances de ressembler à un autre. Mieux, avoir l’audace de tout faire soi-même : illustrations, plans (les affreux plans Google Maps qui plombent votre site, ouste !), photos, motifs d’arrière plan, polices de caractère.

Penser proximité. Il n’y a pas de petit projet, et les clients peu sensibles aux ambitions artistiques méritent la même attention. Chaque commerce, chaque PME, chaque entreprise, chaque association en besoin de communication est une formidable opportunité de conception, de planification, de création graphique. Et d’échange.

Ces résolutions sont les nôtres, et nous espérons qu’elles deviendront aussi les vôtres.
Nous vous souhaitons beaucoup de réussite pour cette année 2011.
Et si le design graphique et le web ne sont pas votre métier, nous vous souhaitons en prime de trouver un professionnel qui saura vous écouter et vous accompagner dans votre communication.

Par Pierre Pernix, le 12 octobre 2010  1 commentaire

Pour ceux qui ne le connaîtraient pas encore, Inkscape est un logiciel de dessin vectoriel d’envergure professionnelle, comparable à Illustrator, CorelDraw ou Xara. Inkscape est distribué sous licence libre GPL. Il s’agit d’un logiciel open-source, ce qui signifie que son code peut être librement partagé et modifié par des tiers, et disponible gratuitement au téléchargement.

Ouvert et standard

Ce qui fait la spécificité d’Inkscape, c’est le principal format qu’il utilise, le SVG.

Ce format, lui aussi en open-source, est basé sur XML et obéit aux recommandations du W3C, dans l’espoir de s’imposer en tant que format standard et donc universel, tel un HTML de l’image vectorielle. De fait, la plupart des navigateurs web sont capables d’afficher le format SVG : Firefox, Opera, Safari et bientôt Internet Explorer 9.

Une dernière mouture qui fera des adeptes

Depuis août 2010, Inkscape s’est hissé à la version 0.48.

Au nombre des nouveautés, on compte un outil texte franchement amélioré (gestion plus fine de l’approche, de l’interlignage, rotation des lettres, etc, qui manquaient cruellement), un outil de pulvérisation de formes (qui n’est pas sans rappeler celui d’Illustrator), la sélection de points appartenant à des formes différentes…

L’interface s’est sensiblement modernisée, quelques bugs ont reculé.

Oui, des bugs. Car si la philosophie désintéressée qui anime les acteurs de projets libres est aussi valable, sinon davantage, que la logique marchande pour produire des logiciels de qualité (connaissez-vous Gimp, ou Blender ?), la relative jeunesse du projet Inkscape n’offre sans doute pas encore la stabilité héritée de deux décennies de développement des produits Adobe.

Et pourtant, on gagne à quitter l’usine à gaz Illustrator. Plus sobre mais pas moins complexe, on trouvera avec Inkscape un bon moyen de tester sa créativité en bousculant ses habitudes… jusqu’à l’adoption totale. Et un soutien inconditionnel aux développements futurs d’un tel projet. C’est le cas chez Transat : notre blog et son portfolio ont été maquettés avec ce logiciel.

En savoir plus sur Inkscape

Pour faire davantage connaissance avec Inkscape, feuilleter sa doc et le télécharger, rendez-vous sur le site officiel.

Et puis on ne manquera pas de se ressourcer sur le portail Planet Inskscape, qui offre de bons articles et tutos en langue française. Quant aux leçons vidéo pour débutants des Screencasters, elles valent le détour.

(*) Draw freely est le slogan d’Inkscape.

Par Pierre Pernix, le 1 octobre 2010  Laissez un commentaire

Les apparences sont parfois trompeuses : ce blog est bel et bien consacré au design graphique, et ces cerises sont bel et bien des raisins.

Pour la recette du crumble au raisins, pensez à faire chauffer les grains avec miel et beurre, ils tiendront mieux la cuisson au four.

A venir, d’autres recettes très visuelles (et quelques photos de hamburgers) et en attendant, Transat affûte ses couteaux de cuisine sur les sites web de deux restaurants. Grosse faim en perspective.

A suivre…