‘One for my Baby’ est un spectacle original de grande qualité qui représente un programme TV imaginaire tel que Frank Sinatra aurait pu le présenter, avec pour invités d’honneur Judy Garland, Gene Kelly et Doris Day.

Sur ce site entièrement administrable, un soin tout particulier a été apporté à la présentation des photos et extraits vidéo du spectacle.

www.obeproductions.co.uk

Site réalisé à l’aide de WordPress
Conception graphique par Old Blue Eyes
Déclinaison de la maquette sous forme de thème WordPress HTML / CSS / PHP
Installation, paramétrage et personnalisation des plugins :

• All-In-One Cufón (polices de caractères personnalisées)
• Contact Form 7 (formulaire de contact)
• Cool Video Gallery (galerie vidéos)
• Newsletter (gestion des abonnements, rédaction et envoi de newsletters)
• NextGen Gallery et NextGen Monoslideshow (galeries photos)

Développement de deux plugins personnalisés :

• Sliding News (affichage défilant des actualités)
• Sliding Pics (affichage défilant d’une galerie photos)

Installation de Google Analytics et Google Webmaster Tools

Rédaction du manuel utilisateur en anglais

Ces éléments devront être définis à un moment ou un autre : autant les prendre en compte dès le début de l’opération.

Pensés dans une optique non-seulement esthétique, mais aussi pratique et ergonomique, ces quelques détails rendront votre site plus facile à utiliser. Il est évidement préférable de confier cette réflexion au concepteur et au graphiste plutôt qu’à l’intégrateur ou au développeur, afin de conserver une cohérence avec le design global.

1.    Les liens

Définir l’apparence d’un lien dans ses différents états est une tâche basique, pourtant il est très fréquent que les détails soient négligés.

Les états suivants devraient tous être configurés :

• Normal
  C’est l’apparence du lien par défaut, c’est-à-dire lorsqu’il n’a pas déjà été visité, qu’il n’est pas survolé par la souris ou qu’on n’est pas en train de le cliquer.

• Visité
  C’est un lien qui n’est pas cliqué ni survolé mais qui a préalablement été visité par l’utilisateur

• Actif
  C’est un lien sur lequel on est en train de cliquer. Quand rien n’est précisé, la plupart des développeurs utiliseront la même apparence que pour un lien survolé

• Survolé
  C’est l’apparence du lien lorsqu’on le survole avec la souris. Celui-ci et l’état normal sont les deux seuls états auxquels la plupart des graphistes portent de l’attention

Ces quatre états doivent être prévus pour tous les liens, dans toutes les zones de votre site : les liens auront une apparence différente selon qu’ils se trouvent dans le menu de navigation, au sein du contenu ou dans le pied-de-page.

2.    Les formulaires

Les formulaires représentent souvent la seule véritable manière de convertir un visiteur en client. Sans une bonne conception, un formulaire peut facilement devenir trop complexe à utiliser, paralysant ainsi le point de conversion du site.

La préparation de ces éléments est essentielle, même si elle semble beaucoup moins pressante pour le client que les couleurs, les illustrations et l’aspect général du site.

Les deux éléments à prendre en compte principalement sont :

• L’intitulé du formulaire
  Les formulaires recueillent généralement des données personnelles que les internautes sont réticents à divulguer. Il est sage d’informer précisément de l’utilisation qui en sera faite

• Les champs et leurs intitulés
  Dans quel ordre les champs apparaîtront-ils ? Le formulaire devra-t-il être scindé en plusieurs parties ? Où se situent les intitulés par rapport aux champs ?

L’apparence par défaut des formulaires est généralement repoussante. Un minimum de préparation permettra une intégration impeccable au reste du site.

La conception des formulaires nous mène a des considérations plus larges.

3.    Le comportement des boutons

Les boutons peuvent être utilisés sur un site de bien des façons, mais eux aussi semblent souvent négligés dans leurs différents états.
Les quatre états d’un bouton sont :

• Normal
  C’est l’apparence par défaut du bouton. La plupart des designers ne s’occupent que de celle-ci.

• Survolé
  C’est l’apparence du bouton lorsqu’il est survolé par la souris. Il aide l’utilisateur à s’assurer qu’il s’agit bien d’un élément clicable.

• Actif
  Au moment où l’utilisateur clique sur le bouton, cet état lui indique visuellement qu’il l’a bien cliqué.

• Désactivé
  L’état désactivé d’un bouton est sans doute le moins utilisé, mais il peut être très utile aux développeurs. Il est rare que cet état soit prévu, à moins que le concepteur ait préparé un processus de validation du formulaire (voir la section suivante).

De la même manière que les liens, assurez-vous que ces quatre états soient configurés dans toutes les zones de votre site. Qu’il s’agisse d’un formulaire d’identification, de recherche, de contact ou d’inscription à une newsletter, chacun des boutons devra être pris en compte.

4.    La validation des formulaires

Rien n’est plus frustrant pour un internaute que de ne pas parvenir à valider un formulaire sans comprendre son erreur. Trois points essentiels sont donc à prendre en considération :

• Les champs obligatoires
  Ils doivent être repérables au premier coup d’œil. Ils sont généralement signalés par une astérique, une aide visuelle supplémentaire est toujours la bienvenue (par exemple, un intitulé en gras, ou un encadré de couleur)

• La validation en temps réel
  Certains champs peuvent être validés au fil de la saisie par l’utilisateur, de cette manière il sait immédiatement s’il a commis une erreur en insérant les données

• La validation après soumission
  Les styles utilisés pour la validation en temps-réel sont généralement repris après soumission, il est judicieux de récapituler toutes les erreurs en un message au début du formulaire également.

5.    Les messages d’état : erreurs, avertissements, confirmations, etc.

Les utilisateurs attendent généralement un feed-back après avoir effectué une action sur un site. Le cas le plus fréquent est la soumission d’un formulaire mais il existe bien d’autres situations.

Réfléchissez bien à toutes les actions qu’un internaute peut effectuer sur votre site, et prévoyez les messages que vous devrez afficher en retour.

6.    Penser à toutes les tailles d’écrans

Le design d’un site est généralement inscrit dans une largeur de 960 pixels. Cela permet un affichage correct sur les écrans les plus petits. Cela facilite également la lecture des textes, dans l’idéal votre zone principale de contenus ne devrait pas excéder 600 pixels de large.

Les possesseurs de grands écrans s’en trouvent parfois pénalisés : si l’arrière-plan de votre site comporte des éléments complexes (dégradés, motifs, illustrations…), il faudra prévoir son affichage sur les écrans les plus larges.

Les smartphones, notebooks et autres tablettes tactiles sont à prendre en compte également.

7.    Les éléments HTML de base

Pour les sites riches en contenus, l’apparence des éléments HTML de base est fondamentale et ne devrait jamais être négligée. Sur les sites se distinguant plus par leur look que par leur contenu en revanche, ces éléments de base sont souvent oubliés, à tort.

Il est indispensable de prévoir l’apparence de tous les éléments suivants : les paragraphes, les titres de niveaux 1 à 6, les listes à puces et listes numérotées, les tableaux de données, les champs de formulaire, les images, le texte en gras et le texte en italique.

8.    Les e–mails envoyés par le site

Un élément aussi basique est facilement oublié car il ne fait pas partie du cœur du site. L’e-mail est pourtant un outil extrêmement puissant lorsqu’il s’agit de promouvoir ou d’étendre un service.

Commencez par identifier tous les e-mails qui seront générés par votre site. Les plus courants sont :

• La confirmation d’inscription à une mailing-list ou une newsletter
• La confirmation d’inscription en tant que membre
• La confirmation de soumission de formulaire (de contact, par exemple)
• La confirmation de commande après un achat

Si vous voulez époustoufler votre client et vos développeurs, préparez aussi un template d’e-mail marketing. Vous donnerez aux utilisateurs une transition parfaite entre votre site et leur boite de réception, et vous garderez le contrôle de l’image de marque dans ses déclinaisons.

9.    L’étirement des pages

Prévoir le comportement du design des pages en fonction de la nature du contenu est une étape souvent oubliée. Que se passera-t-il si le contenu est très long ? Si on y ajoute des images ?

Préparez des déclinaisons de vos pages dans différents scénarios, afin de ne rien laisser au hasard.

10.    Les animations : pop-ups, infobulles, transitions, etc.

Sur un site HTML et CSS standard (par exemple sans Flash), les transitions et animations sont facilement mises de côté. Et lorsqu’elles le sont, elles ne sont généralement pas appropriées.

Ainsi, si les animations sont essentielles, il vaut mieux fournir à votre développeur un échantillon de leur fonctionnement.

Les éléments à ne pas négliger sont :

• Les infobulles
  Ces petits encadrés apparaissent au survol de certains éléments par la souris

• Les diaporamas
  Il en existe une infinité avec un très large choix d’apparences et de transitions

• Les lightbox
  C’est lorsque l’image est affichée en grand format par-dessus la page sur un fond généralement noir translucide. Il est possible de styler non seulement le fond et l’encadré mais aussi l’animation qui fait apparaître et disparaître cet affichage.

Chacun de ces éléments a une apparence distincte qu’il convient de personnaliser entièrement.

Pourquoi porter de l’attention à ces détails ?

Beaucoup des éléments ici présentés semblent plus utiles aux développeurs qu’aux internautes.

C’est partiellement vrai : si vous préparez tous ces éléments à l’avance, vos développeurs seront ravis. Ils sont généralement fatigués de devoir demander en cours d’intégration ou bien de devoir improviser.

En anticipant sur ces points de détails, vous ne laissez pas vos développeurs dans le brouillard et vous contrôlez le design du site dans son intégralité. Vous avez ainsi de plus grandes chances de pouvoir ajouter la petite touche qui transforme un site ordinaire en un site remarquable.

Et si ces raisons ne sont pas suffisamment motivantes, considérez aussi l’aspect financier. Un designer qui prévoit tous ces éléments à l’avance est fondamentalement plus rentable. Non seulement il livre un travail de qualité supérieure, mais en plus il diminue le coût du développement. Cela laisse plus de place aux profits, ce qui bien sûr satisfera tout le monde.

Traduction et adaptation de l’article « 10 web design elements that you shouldn’t overlook » par Patrick McNeil sur www.webdesignerdepot.com

Les 23h de la BD, c’est un challenge artistique du neuvième art, inspiré du « 24 Hour Comics Day » qui consiste à créer une bande dessinée de 24 pages au minimum (22 planches, une couverture et un dos de couverture) en 24 heures, sur un thème imposé, dévoilé au démarrage du compte à rebours.

La particularité des 23 Heures de la BD est – comme son nom l’indique – d’être raccourci à 23 heures, car il est organisé durant le week-end du passage à l’heure d’été.

En plus de la contrainte temporelle et du thème imposé, une contrainte anecdotique peut être imposée, comme l’apparition d’un mot ou d’un personnage par exemple.

Le site internet des 23 Heures de la BD permet de recueillir et de consulter les planches de tous les participants.

Le code initialement produit par PixOwl pour les éditions précédentes a été réutilisé et adapté : optimisation des scripts PHP et de la base de données, actualisation des contenus et du compte à rebours, amélioration du formulaire d’inscription, ajout d’une section « Archives », intégration de la nouvelle charte graphique.

Direction de projet : Eric « Turalo » Dérian

Rédaction des textes : Julien « Piak » Filipiak

Illustrations : Maxime « Paka » Marin

Conception graphique du site : Kévin « Kéké » Jayat

Communication et relations presse : Patricia « Zia » Tastet-Culos

Un design modernisé et une administration simplifiée pour ce nouveau site-catalogue aux couleurs de l’entreprise.

Ce site sera mis en ligne très prochainement

Site réalisé à l’aide de WordPress
Conception graphique avec Photoshop
Déclinaison de la maquette sous forme de template WordPress HTML/CSS/PHP
Installation et paramétrage de divers plugins

Grâce à sa présence sur des événements tels que le Festival International du Film documentaire Océanien (FIFO) et à sa participation à différents concours, le studio Animo’oZ a fait parler de lui à plusieurs reprises dans la presse.

L’actualité du studio, les membres de l’équipe et les projets réalisés seront proposés sur le site web d’Animo’oZ.

www.animooz.net

Site réalisé à l’aide de WordPress
Conception graphique par Animo’oZ
Déclinaison de la maquette sous forme de template WordPress HTML/CSS/PHP
Installation et paramétrage de divers plugins

Trois pages de contenu permettent de présenter l’entreprise et son activité tandis qu’une page dotée d’un formulaire de contact permet aux internautes de communiquer avec l’équipe.

www.slbpharma.com

Création graphique par Sylvain Deffaix, basée sur l’identité visuelle conçue par Sandrine Tusseau.

Déclinaison de la maquette au format HTML / CSS, utilisation de javascript / jQuery, développement PHP pour le formulaire de contact.

Alchi-me se charge de la création d’identité visuelle, la conception de sites web et la réalisation de tout supports de communication imprimés et multimédia.

Pour les projets de grande ampleur, nous avons formé un réseau complet de compétences et de partenaires qui nous permet d’assurer l’intégralité de vos projets graphiques.

Simple vitrine, boutique en ligne, blog ou site éditorial : Alchi-me développe votre site internet sur-mesure, à la hauteur de vos exigences.

Selon vos besoins, votre site pourra être réalisé « à la main » ou bien à l’aide d’un gestionnaire de contenu tel que WordPress, Joomla, Spip…

Afin de garantir que votre site sera accessible quel que soit l’équipement de l’internaute, nous travaillons dans le respect des normes et standards du web.

Vous avez besoin de créer ou de faire évoluer votre site internet, mais vous ne savez pas comment vous y prendre ?

Alchi-me vous accompagne tout au long de la mise en œuvre de votre projet

Ensemble, nous réaliserons :

• le diagnostic de l’existant : audit, analyse des besoins, analyse de l’environnement, diagnostic éditorial, benchmark
• la définition et l’organisation du contenu et des fonctionnalités
• la rédaction du cahier des charges
• la définition de l’organisation pour la mise à jour et l’alimentation du projet
• l’évaluation budgétaire du projet
• l’assistance au choix du prestataire : lancement d’appel d’offre, analyse des offres

Le bon référencement de votre site tient essentiellement à la qualité et à la pertinence des contenus que vous y publierez.

Néanmoins, l’optimisation technique de votre site permettra d’obtenir des résultats encore meilleurs. Elle consiste par exemple à :

• produire un code source respectueux des standards du web et des normes d’accessibilité
• limiter autant que possible l’utilisation des technologies Flash, JavaScript et AJAX
• mettre en place des URL optimisées et uniques pour chaque page du site
• créer un fichier sitemap XML (plan du site dans un format spécifique destiné exclusivement aux moteurs de recherche

De plus, nous pourrons vous fournir de nombreux conseils concernant le choix de vos mots-clés, les règles d’écriture pour le web ou encore l’utilisation des outils de suivi de votre référencement, et nous charger de l’inscription de votre site auprès des moteurs de recherche les plus populaires.