Creativity, Web & Studies

Précédemment, je faisais part des étapes à prendre en compte avant de s’attaquer au design d’un site.
Cette article en fait suite et souligne quelques best practices appris durant ma période de pratique en entreprise.
Si vous travaillez en freelance ou dans une agence, discutez avec votre client (ou l’interlocuteur le plus proche de lui) des besoins graphiques.
En apprendre sur le projet peut vous donner une bonne idée d’ensemble.
Veut-il privilégier son contenu textuel ? À l’inverse, a t-il besoin d’être très graphique et de tout miser sur ses visuels ?
Pour la première question, privilégions un design minimaliste. Cela ne signifie pas de “ne pas faire d’effort” mais plutôt de rester graphique, simple et clair.
Dans la deuxième, tentez de comprendre où se situera la valeur de la charge visuelle pour le client.
Si elle est justifiée, présenté lui des croquis de différentes mis en formes de ce que pourrait ressembler le résultat final.
Cette étape permettra au client de mieux visualiser vos intentions, et pour le webdesigner, de gagner un temps fou !

Un autre point, le client adore les propositions. Alors proposez ! Mais sachez vous limiter à deux ou trois modèles totalement différents. D’après moi, en faire plus ne servirait qu’a perdre votre client dans son choix.

Quelques autres conseils :
- Privilégiez votre design en fonction des objectifs du site, de son contexte ainsi que de la cible visée.
- Inspirez-vous de ce que vous voulez mais sachez trouver votre originalité.
- Que ce soit à chaque étape de votre production, ou après un essai graphique, parlez régulièrement avec la ou les personnes qui valideront votre design. Ils vous diront si la voie que vous prenez est la bonne. C’est le meilleur moyen selon moi pour minimiser le temps de correction graphique sur un projet.
- Si votre maquette ne ressemble à rien les premières heures de conception, ne paniquez pas, fermez Photoshop et revenez plus tard !

J’ai travaillé cette été dans une société en cours de formation.
Employé en tant que Webdesigner, j’avais pour tâche de donner une identité au site web.
Difficile de me lancer directement sur les maquettes. Et pour cause, il existe des points à aborder en amont.
Le design du site doit être en accord avec le sujet abordé, les fonctionnalités ainsi que la cible visée. Il faut toujours se poser les questions de : “Qu’es-ce que je fais ?”, “Pour qui” et “Pourquoi ?”. Ces interrogations vous apporterons des éléments de réponse qu’en au contexte à prendre en considération.
Ensuite, aidez-vous de mockup. Bien plus que des visuels représentants le placement des éléments sur une page web, les mockups sont une réflexion la plus aboutie possible du site Internet.
Dans cette étape, il faut se mettre à la place de l’internaute. C’est lui la personne la plus importante lorsque l’on conçoit un site web.
Il faut alors comprendre son cheminement, disposer les éléments qu’il doit retenir et tenir compte de ses habitudes de navigation. Que l’on soit débutant ou confirmé, ce passage nécessitera sûrement l’avis de personne tiers. Pensez donc à solliciter divers opinons, il serait dommage que vous soyez le seul à comprendre pourquoi votre logo est en bas à droite…
Ensuite, après avoir fait le tour de l’ergonomie, la question du graphisme peut être abordé.
En entreprise, on effectue ce qu’on appelle un benchmark, c’est-à-dire une étude concurrentielle. Cette dernière peut se décliner en plusieurs types de benchmark. Intéressons-nous ici à l’étude d’une interface visuelle.
Pour procéder, il suffit de collecter plusieurs sites se rapprochant des nécessités du client.
Une fois la liste établie, on note les points forts à potentiellement s’inspirer et les points faibles à éviter.
Personnellement, je fais en sorte que ce document soit consultable par le client en lui présentant une version PDF avec des liens externes. En général, cette pratique est plutôt apprécié. Elle montre que vous avez bien cerné le besoin client. Vous ne pourrez qu’être fort de proposition après ça.

Je termine en vous proposant une liste d’outils gratuits pour réaliser des mockups proposée par Korben.

A l’occasion de la sortie de son nouveau téléphone Omnia HD, Samsung proposait en 2009 un défi aux internautes via YouTube.
La marque à décider de présenter son produit différemment et s’est adaptée à un style que bien connaisse : le unboxing.
Le nom ne dira peut-être rien à certain, mais si vous êtes un peu curieux de technologie et qu’il vous arrive de naviguer quelques fois sur YouTube alors il y a fort à parier que vous êtes déjà tombé sur ce type de vidéo.
Le unboxing est un prise de vue souvent amateur on l’on voit l’arriver d’un nouveau produit déballer ou fraîchement tester sous nos yeux.
Samsung reprend ce concept assez intelligemment.
Dans la vidéo, un homme face à un miroir fait disparaître son téléphone comme invisible. La camera du téléphone est reste active et continue de filmer la séquence sans que le mobile lui même ne soit visible en reflet.
Mystère bien rodé, c’est aux plus observateurs de trouver réponse à l’énigme.

Voir la vidéo : YouTube HD Camera Trick Challenge

Analysons maintenant quelques phases clé de la réussite marketing de cette vidéo :

- La marque se rapproche du consommateur en montrant ce qui pourrait être un moment de son quotidien.

- Elle applique une forme de mise en avant distractive de son produit visant à nous surprendre ou nous faire rire.

- Le côté surprenant entraîne la multiple lecture de la vidéo.

- Elle illustre par la vidéo, la qualité de sa camera HD en filmant toute la séquence avec le produit en question (les aspects techniques ne sont pas cité, on ne voit ni d’effet embellissant et ni de musique attractive).

- Elle adapte sa publicité en accord avec le média utilisé (cette vidéo n’est pas habituel des pubs TV).

- Elle interagit avec le public par des moyens technologiques dans l’air du temps (dans notre exemple, elle demande participation sur YouTube aux personnes pensant avoir la réponse).

Avec l’effet Internet, elle peut aussi provoquer l’envie de partager facilement à ses amis.
Ce qui est intéressant dans cette idée, c’est qu’elle ne l’est suggérer nulle part dans la vidéo. Et pour cause, la cible est potentiellement celle des hommes de 25 à 40 ans mordue de technologie mobile.
En partant du principe qu’ils ont une utilisation très fréquente de la toile, on peut alors compter sur une grande partie d’entre eux pour faire circuler le message. Inutile donc de leurs présenter un gros “Partager cette vidéo” car le buzz serait alors trop explicite et risquerait d’apporter un effet indésirable sur la cible visée.

Les graphistes le savent : difficile de s’habituer à un autre logiciel de retouche une fois que l’on connait le logiciel phare d’Adobe.
Une vidéo mettant en scène une équipe de designers, a voulu imaginer de façon humoristique ce que serait un monde sans Photoshop.
La vidéo est diffusée sur YouTube et visible depuis leur site internet worldwithoutphotoshop.com.

Google prépare depuis plusieurs mois le lancement une fonction pour améliorer l’affichage des résultats de recherche.
Ces derniers apparaitront directement sous la barre de votre requête sans avoir à la valider.
Ainsi, cette méthode sans rafraîchissement de page dites “streaming”, affichera des résultats associés à chaque ajout d’une lettre.
Pour ne pas nuire aux habitudes des internautes, il est à noter qu’il serait possible de désactiver cette fonction.
Voir la vidéo : Live Updating Google Results
Source

Mise à jour : Il existe un site se basant sur le moteur de recherche Google appelé Keyboardr qui exploitait déjà ce système (2008).
Julius Eckert, son auteur, à utiliser l’Ajax pour arriver à un affichage dynamique et sans rafraichissement.
Son site peut se parcourir en utilisant uniquement les touches du clavier, il s’agit là d’une bonne réflexion sur l’ergonomie.
Qui peut parier que Google ai remarqué l’efficacité d’une telle technique ?

Commençons par expliquer ce qu’un duckface…
Phénomène envahissant le web, il reste très présent sur les Skyblogs, MySpace, Facebook et compagnie.
Ce style de photo adopté par une majorité féminine (des hommes aussi s’y prêtent) est assez étrange et drôle en même temps !
Ces personnes forment leurs bouches entre le bisou et l’onomatopée d’un pet pour une raison qui demeure inconnue. Je vous laisse voir le site AntiDuckface.com qui c’est chargé d’en répertorier pas mal dans le genre !

Merci à l’ami Le Pixel Déchainé.

Google serait en train de tester une nouvelle interface pour leur célèbre moteur de recherche.
Le nouveau design est plus épuré. Fini l’ombre sur le logo et les liens soulignés. Les couleurs ont aussi subit un léger changement.
L’ensemble est tout de même subtil et reste dans l’esprit “Google”.

Voir la suite ici.

Swaggers est un groupe de Hip Hop exclusivement féminin que j’ai découvert en me baladant sur le site de Lourdson.
Je trouve la vidéo de très bonne qualité et j’aime beaucoup le son qui y met une réel ambiance. Je vous laisse regarder.
Paris Metro SWAGGERS by YAKFilms

Adobe a sortie le 12 avril dernier ses nouveaux packs contenant ses applications destinées à augmenter la productivité des professionnels du milieu.
Ces nouvelles versions baptisées CS5, apportent des nouveautés destinées à nous faciliter leurs utilisations mais aussi de découvrir de nouvelles fonctionnalités.
Parmi ces dernières, celles d’Adobe Photoshop a beaucoup fait parler d’elle.
La raison, de nouveaux outils : Content-Aware Fill qui permet de remplir une zone de sélection en prenant en compte des alentours.
Concrètement, vous pourrez détourer grossièrement un personnage ou un objet et le séparer d’un plan. Le logiciel calculera le manque. De nombreuses possibilités sont envisageables avec cette fonction.
La 2e nommée Puppet Warp qui a fait ses débuts sur After Effects se retrouve maintenant intégré à Photoshop.
En plaçant des repères d’articulations, l’animation d’un personnage se fait de manière rigolote.
A noter aussi, de grosses améliorations pour d’autres applications comme After Effects (avec notamment le passage en 64 bits) et InDesign (nouveaux outils, nouvelle orientation web, etc.) !

VIDÉOS :
Photoshop CS5 - Compositing and Selecting Hair
Photoshop CS5 - Content-Aware Fill
Photoshop CS5 - Puppet Warp

SITE DU LANCEMENT :
La stratégie commerciale d’Adobe se tenait officiellement ici

Yep !
Je viens de découvrir jetequitte.com une page simple où vous pourrez cesser toutes types de ruptures avec un(e) de vos proches de façon publique.
Le concept : vous envoyez votre message ainsi qu’une photo de vous et la personne concernée et pendant l’espace de 24 heures cette page vous appartient !

On retrouve souvent des ruptures de couples, amis ou colocataires avec des messages qui ne sont pas super sympa mais qui ne sont pas dénuée d’humour amer !

En même temps, il vaut mieux l’avoir quand on se découvre dessus…

Vous de voulez plus de lui ou d’elle ? jetequitte.com !