Photoshop : la création d’avatar

Une video de fubiz :

Birth of an AVATAR from Peter Ammentorp Lund on Vimeo.

La création du monde virtuel

Un bon article de Alain Bielik (fondateur et rédacteur de S.F.X) tiré de pixelcreation.fr (ICI) qui revient sur les effets spéciaux du film avec le concept cameronien d’ »Emotion Capture ».

Bonne lecture !

Un processus de collaboration facilité sur redmarkit.com

Votre agence s’inscrit gratuitement et met en ligne les propositions de design, un e-mail vous est envoyé avec un lien pour accéder à cette page : là vous pouvez commenter grâce aux outils proposés par la plateforme la proposition, vous êtes notifié par e-mail de l’intervention de votre client, faites les changements demandés et faites valider à nouveau, sans prise de tête.

Nous l’adoptons !

Les sites horizontaux sont parmi ces sites qui défient les lois de la gravité web. Ouvrant de nouvelles perspectives, ils sont une merveilleuse vitrine pour les photographes et autres créateurs comme Evanescence, mais savent aussi intéresser des entreprises comme Adidas pour des campagnes e-marketing.

Le top 8 des sites horizontaux

Lovebento.au

http://www.lovebento.com.au/

Le city-guide se couche pour vous conter les délices de Melbourne, à grands renforts de fiches pratiques que l’on se délecte à feuilleter virtuellement : un bar hype pour ce soir, un plan shopping pour cet aprem, hop je partage sur mes réseaux sociaux, et je rajoute cette fiche à mes favoris. On aime.

cnc-costumenational, 

http://blog.cnc-costumenational.com/

La mode milanaise se retrouve sur ce blog très interactif et résolument moderne. Si on aime l’aspect communication et la priorité à l’échange avec l’internaute, on apprécie moins le manque de fluidité du site, qui est un peu trop brut.

Vanity Claire, le CV Online

http://www.vanityclaire.com/

Un CV Online, Claire Baxter annonce la couleur sur ce site punchy et très promotionnel. Avec une navigation fluide, elle nous transporte dans son univers de Creative Director, tout en exposant ses réalisations pour American Airlines, Nokia et bien d’autres. En deux mots: punchy et pro.

Jansochor, Portfolio photographique

http://www.jansochor.com/photo-essay/contraband.html

Le minimalisme au service de l’expression artistique, les oeuvres exposées prennent tout l’espace et l’ensemble est allégé par une mise en page simple et efficace, la navigation est bonne et l’exploration fluide.

Swearwords, site d’agence

http://swearwords.com.au 

Ce site de branding, design et web development pousse à ses limites (et même un peu trop) l’utilisation du site horizontal avec une navigation sur deux étages: Work & Play. Le design laisse bonne place au contenu, tout en restant d’une originalité notable: la barre SwearWords, sans voler la vedette, facilite extraordinairement bien la navigation. 

180 Degrees, web-communication de l’extrême

http://www.180degrees.co.uk/180degrees.html

Sponsorisés par Adidas, ces aventuriers de l’extrême décrivent leur voyage autour du monde pour la cause environnementale. A noter l’utilisation de plusieurs niveaux en plus de la dimension horizontale, pour un vrai parcours (presque) périlleux.

Sockho, portfolio photo et graphisme

http://www.sockho.com/

Tout simple, on laisse parler les images et le trackpad fait agir la magie. Excellent exemple d’un portfolio sur un thème le plus discret possible: fond noir et police de type pixel.

Good Morning Designers, agence de web-design

http://www.hasrimy.com/

Génial. On vous raconte une histoire, vous baladez sur un bureau virtuel avec curiosité, allant de découverte en découverte. Sans se laisser piéger par le design relativement désordonné à dessein, le contenu est lui remarquablement bien présenté et mis en valeur avec clarté. J’exulte.

Quelles conclusions ? 

Si le site horizontal est souvent utilisé par les designers et autres artistes, il peut très bien convenir pour une entreprise qui souhaite un site vitrine, clair et concis.

Le meilleur emploi pour un site horizontal est donc celui de la carte de visite virtuelle au design élégant et moderne. Les différentes pages se découvrent à l’horizontal comme on tourne les pages d’une brochure, donnant un caractère ordonné à l’ensemble.

L’univers est une notion importante en design et communication marketing, le site horizontal vous permet de raconter une histoire, une idée pour votre prochaine campagne e-marketing?

Bon, pour éviter les considérations techniques qui ne nous intéressent pas (tapez CSS sur wikipedia si ça vous semble vital!) faisons simple: le CSS ( »Cascading Style Sheet » entraînez vous à le prononcer, ça fait tout de suite plus pro) est ce qui vous permet de contrôler l’apparence de votre page d’une manière rapide et efficace.

Vous avez peut-être connu la mise en page avec utilisation de tableaux, le CSS vous permet de faire sans et de gagner un temps précieux, vous voulez attribuer des styles (des apparences) identiques pour certains éléments… le CSS sera votre meilleur allié. Une seule feuille de style CSS (nommée justement style.css) sur du (x)HTML, voilà ce qui va transformer n’importe que page en un ensemble beaucoup plus esthétique. Pour cela, vous n’avez besoin que d’un éditeur de texte brut (sans aucune mise en page, pas Word ni Pages!) .

Assez trainé, alors commençons!

Le principe

Chaque élément de votre page est déclarée sous une identité HTML, le CSS permet de donner un style (une apparence) à chaque identité:

- vous ciblez l’élément que vous voulez styliser (un titre par exemple)

- vous lui attribuez un style grâce à un langage (il faut juste aimer l’anglais, et ne pas être allergique aux cours de langue).

Syntaxe, un peu de grammaire

La syntaxe CSS est toujours la même:

sélecteur { propriété : valeur ; }

- un sélecteur : la cible de votre règle (pour un titre ce sera h1)

- une propriété : ce que vous voulez modifier (la couleur tu texte sera color)

- une valeur: comment vous voulez le modifier ( pour la couleur du texte tapez le code couleur #ffffff par exemple)

Avec une règle CSS, que vous placez donc dans le fichier style.css, que vous déclarez par la partie <head> de votre fichier html grâce à la formule d’appel (<link rel= »stylesheet » href= »le lien relatif » type= »text/css » media= »screen » />) vous allez pouvoir styliser tous les éléments signalés d’une balise h1 (les titres les plus importants.

Par exemple la règle CSS     h1 { color : #ff0000 ; }      fera apparaître tous vos titres signalés par une balise double h1 en rouge (le rouge correspondant au code couleur #ff0000).

La boite à outils des sélecteur indispensables

Les basiques

- body : votre page en entier

- p : les paragraphes

- ul, li et ol : les listes 

- h1, h2, … , h6 : les titres

- a : les liens, ne pas oublier les pseudos classes associées (à déclarer dans cet ordre):

- a:link : pour styliser le lien tel qu’il apparaît non cliqué

- a:visited : pour styliser le lien tel qu’il apparaît une fois la page en question visitée

- a:hover : pour styliser le lien tel qu’il apparaît au survol de la souris 

- a:active : pour styliser le lien tel qu’il apparaît lorsque le bouton de la souris est enfoncé

id et class à la rescousse

Un petit rappel: la double balise div (donc un tag pour le début <div> et un pour la fin </div> pour délimiter) permet de structurer le document en plusieurs sections (conteneurs), et remplace les tableaux pour la disposition des éléments (styliser la div c’est aussi la placer).

Une div peut contenir tous les autres marqueurs html (des h1, d’autres div, mais aussi des tableaux).

id et class permettent de styliser les div (qui se présentent sous la forme <div id= »blabla »> bloublou </div> ou <div class= »blabla »> bloublou </div>)

- Les id servent à individualiser un élément qui ne revient qu’une fois dans la page. Il n’y a qu’une seule div nommée « blabla » dans la page et le sélecteur utilisé pour la styliser est #blabla

- Les class servent à individualiser un élément qui peut revenir plusieurs fois dans la page. Toutes les <div class= »blabla »> sont ciblées par le sélecteur .blabla

La boite à outils des propriétés indispensables

Une fois que l’on sait ce qu’on a envie de styliser, une fois qu’on l’a sélectionné à l’aide du selecteur, reste à dire ce qu’on veut changer pour cet élément de la page sélectionné:

- la couleur de la police : utilisez la propriété color

- la couleur du fond : utilisez la propriété background-color

- la police utilisée : utilisez la propriété font-family

- la taille de la police : utilisez font-size

- la marge (marge extérieure) : utilisez margin

- le padding (marge intérieure) : utiliser padding

- l’alignement du texte : utilisez text-align 

La boite à outils des valeurs à connaître

Dans le trio de choc sélecteur/propriété/valeur reste donc à préciser la valeur de la propriété, pour un sélecteur donné !

- pour les couleurs (propriétés color et background-color) utilisez les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc). on peut aussi nommer les couleurs (

- pour les polices : le web aime helvetica et georgia, les ordinateurs aussi, alors ne vous en privez pas!

-  pour les tailles : vous pouvez utiliser les longueurs relatives (exemple: 5em), les pourcentages (exemple 90%), les pixels (exemple: 12px) ou enfin les points (exemple: 15pt).

- les positions : on en restera pour aligne le texte à left, right, center

Un exemple de feuille de style css style.css

Note 1 : dans un fichier css, vous pouvez écrire des notes en les encadrant de /* et */ 

Note 2 : commencez votre feuille de style par un « reset » pour mettre toutes les marges à 0 et éviter tout problème de navigateur (internet explorer est le cauchemar des web designer… mais est utilisé par une part non négligeable des internautes)

html, body {
 background-color: white;
 font-family: Verdana, sans-serif;
 font-size: 80%;
 }
h1 {
 font-size: 200%;
 color: navy;
 text-align: center;
 }
h2 {
 font-size: 120%;
 color: blue;
 padding-left: 15px;
 }
p,ul,li {
 color: black;
 }
a:link {
 color: green;
 text-decoration: underline;
 }
a:visited {
 color: gray;
 }
a:active {
 color:red;
}
a:hover {
 color: red;
 text-decoration: none;
}

Pour en savoir un peu plus, et surtout vous familiariser avec toutes ces appellations barbares, un autre cours de css pour débutants ici.

C’est une bonne question…  mais elle est peut-être mal posée: il y aurait un « bon » design et un « mauvais »?!

Alors qu’est-ce que LE bon design, celui qui est cohérent avec un objectif précis et un contexte particulier?

Lorsque vous entrez dans un magasin de disques, un de ces magasins aux ambiances tellement particulières et envoûtantes vous avez la première illustration d’un élément clé: le Concept (le premier des « 3C » du design).

De la même façon le bon design est celui qui colle à votre univers et qui le rend attrayant.

Mais ce que vous voulez aussi dans un magasin de disque, si enivrant soit-il, c’est pouvoir trouver ce que vous cherchez. Un caverne d’ali-baba aux milles merveilles oui,  mais pas un capharnaüm indescriptible où trouver le dernier album de Regina Spektor est synonyme de migraine.

Vous me suivez, le bon design c’est aussi celui qui oriente: le bon design est par essence fonctionnel. Après le Concept, voilà les 2 derniers « C » du design web: le fonctionnel s’exprime dans les Composants, qui organisés ensemble forment la Composition.

Faisons le point, ce qui importe:

- le fond: ce sont les disques, ou vos informations, votre texte/contenu dans le cas d’un site internet

- la forme: l’apparence générale du tout

- la fonction: tout design est au service d’un objectif fonctionnel qui doit être atteint.

Alors quels sont ces 3 objectifs du design, ce qu’il ne faut PAS rater?

Les 3 objectifs clés du design?

Faites une liste et assurez vous que ces 3 critères sont bien respectés dans votre design:

1. Faites bonne première impression :

La première impression comme lors de toute rencontre, c’est ce qui saute aux yeux. Lorsque vous dévisagez un inconnu, qu’est-ce qui vous frappe: des yeux vifs, un sourire à tomber par terrer? Pour un site web, ça sera forcément moins glamour, et tout de suite plus « geek »: « le header est trop gros ».  

Souvenez-vous: vous avez 4 secondes pour convaincre, l’inconnue tournera les talons, le potentiel client fermera la page.

-> Montrez votre design à vos amis, soumettez le à la critique sur les sites internet dédiés, cherchez des avis neutres. De toutes ces impressions, un tendance apparaîtra certainement. Sachez écouter et apprenez à rectifier: le bon design ne se fait pas en une fois… oui c’est « le » bon, pas « un » bon.

2. Amenez le visiteur à ce qu’il cherche :

Faciliter le transfert d’information. L’internaute ne lit pas, il parcourt. Faites tout ce qui est entre votre pouvoir pour faire que ce qu’il vient chercher soit sous ses yeux. 

-> Organisez les composants, faites jouer les contrastes, utilisez des signes reconnaissables pour orienter le visiteur. C’est l’objectif le plus simple à atteindre car il obéit à des règles ( »un » bon design). 

3. Laissez un souvenir :

Vous sortez du magasin de disque, vous avez adoré l’ambiance en entrant, vous avez trouvé très facilement ce que vous cherchiez… mais cela suffira-t’il à vous faire revenir?

-> Faites que l’internaute se sente chez lui. Votre site doit être accueillant et familier, on doit s’y sentir bien. Un contenu passionnant ne fera pas revenir le visiteur si il ne trouve pas dans votre site un univers qu’il aime. Votre expérience et votre connaissance de vos clients vous orientera dans le choix du design qui convient.

En Conclusion: le design web, une séduction au service d’un objectif

Le design web est résolument fonctionnel.
Les considérations artistiques sont toujours au service d’un objectif « marketing »: sortir du rang dès l’arrivée sur la page, orienter le visiteur, créer un univers qui le fera revenir.
Le design web est inséparable de la qualité du contenu, des méthodes d’e-marketing que nous aurons le temps d’évoquer, de l’ergonomie du site… Difficile de le séparer et d’en fait une science, « un bon design » NON, « le bon design », celui qui prend en compte votre identité, vos objectifs… OUI.