Vans

May 27th, 2011 by edward-lloyd.guedet-midianga@iscom.org

Bonsoir, les amies je conclus donc ce petit exercice d’étude de site avec le site d’une marque que nous connaissons tous : VANS

vans_logo1

Un petit d’histoire tout d’abord cette marque est californienne elle a été créé par Paul Van Doren en 1966, à l’origine elle vendait des chaussures de skateboard aujourd’hui sa gamme de produit est extrêmement étendue (sac, vêtement etc.) tout en gardant un design très proche de son produit le plus célèbre et apprécié le modèle dit #44.

Le graphisme :
Le design de ce site est lui aussi fortement inspiré de celui des produits qui ont fait le succès de la marque.

Site 3

L’ergonomie de ce site se construit sur 2 « étages » :
- Le premier regroupe les différents catégories de produits que la marque

Site 8

Chacun des onglets étant en fait un lien qui même vers un site spécifique par exemple skate avec skate.vans.com
- Le second lui est en fait le menu de navigation principale du site, on retrouve les onglets les plus importants et les plus utiles au fan de la marque.

Site 9

Entre les deux on retrouve l’élément qui reprend le design du site que l’on a déjà pu voir sur de nombreux produits de la marque avec notamment un tapissage du logo.

Site 3
Ensuite on peut observer un récapitulatif des dernières news de de la marque par une petite animation flash.
Ces derniers sont illustrés toujours dans le sens de la marque c’est-à-dire dynamique tendance et coloré.
On retrouve les différentes compétitions et autres évènements qu’elle a organisés ou auxquelles elle a participé.Site 010

Ensuite pour garder un lien avec sa cible qui est friande des réseaux sociaux, on retrouve les liens qui
mènent aux différents sites communautaires les plus prisés.

Site 011Site 012Site 013

On retrouve enfin une liste des dernières actualités de la marque que l’on peut filtrer pour qu’il concerne uniquement la France ou toute l’Europe avec pour chacune de ces « news » un petit « J’aime » qui font encore une fois le lien avec facebook. Site 013

Nous permettons de suivre les actus de notre marque de les partager avec nos amis.
Les couleurs du site:

Noir

R: 0  V: 0 B : 0 # 000000

Rouge

R: 131  V: 27 B : 26 # 831b1a

Avec un des dégradés de rouge au noir et des dégradés allant de ce rouges à un rouge encore plus foncé.

Avec une grande surface blanche pour laisser respirer un peu ce site.

La programmation du site :

Une grande partie du site est programmé en HTML, mais  il y a aussi quelques éléments qui sont en Flash comme les images des news, et la vidéo qui se trouve sur la page d’accueil du site.
Cela permet d’avoir un meilleur référencement  avec des éléments les plus important en gras tel que le nom de la marque ou les sportifs qui participent aux évènements mais aussi avec les outils en Flash d’avoir un meilleur design.

On retrouve aussi quelques éléments Javascript qui permet de créer une interaction avec le serveur sur lequel se trouve le site

Stratégie :

Ce site confirme et suit le positionnement de la marque c’est-à-dire le « dynamisme » et l’aspect tendance avec une pointe de « old school » les éléments qui font références au logo assez ancien et modèles célèbres soulignes cet aspect.
Les cibles sont les jeunes de 14-25 ans urbains revenus A et B qui sont à la recherche de produits tendance et classique, on peut aussi préciser qu’ils sont pour la plupart « fan » de la marque, ils viennent sur ce site pour rester à la page, se tenir au courant des nouveautés et des évènements à venir.

Objectifs du site :
- Garder le contact avec les « fan » de cette marque
- Informer sur les nouveaux évènements
- Faire découvrir les nouveaux produits de la marque
- Faire découvrir l’univers particuliers de cette marque

Promesse :

Vans, le « old school »  tendance.

Ton :

Dynamique, tendance et décalé

analyse “Gas bijoux”

May 26th, 2011 by thibault.geigle@iscom.org

Bonjours jeune étudiantes, étudiants je reviens vers vous afin de vous proposer une analyse du site internet de la marque « Gas bijoux » Une marque qui prend racine dans le sud de la France.

André Gas n’a que 25 ans quand il se retrouve dans la très célèbre station balnéaire de Saint-Tropez où se retrouve toute la Jet Set. Le jeune homme vient d’obtenir son diplôme des Beaux-Arts et il en est sorti major de sa promotion ! Au lieu, comme d’autres, de s’enfermer dans un atelier pour peindre et se faire un nom, André Gas, il y a 35 ans, préfère se balader sur les plages méditerranéennes et notamment à Saint- Tropez. Il se lance alors dans l’artisanat et commence à proposer ses créations sur les plages.

Le graphisme:

L’ergonomie de ce site est excellente

C’est un site simple en navigation :

  • Il y a un menu principal avec les rubriques essentielles :l’atelier,boutique,Eshop, actualités, presse, newsletter, recherche.

Grâce a ce menu, en un seul regard, l’internaute c’est où il doit cliquer selon ce qu’il désire savoir comme informations

. On peu également parlé de dynamisme et d’interactivité grâce au photo qui défile sur la page d’accueil, réaliser grâce a jQuery.

gas1

Les couleurs dominantes :

couleur dominante

La programmation du site internet:

Tecnhique :

Le site est fait en HTML, ce qui permet un meilleur référencement car contrairement au flash, le texte n’est pas représenté comme une image. Les moteurs de recherche peuvent donc parcourir le contenu du site.

Le site est bien référencer car quand on tape les mots « bijoux » « gas » on tombe en premier lieu sur le site internet de la marque de bijoux.


Lorsque l’on arrive sur le site internet de la marque sur la page d’accueil on peu voir que des photo défilé dans un cadre le site internet utilise le jQuery.

jQuery est une bibliothèque JavaScript libre qui porte sur l’interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.

jQuery1 se présente comme un unique fichier de 227 ko (31 ko dans sa version compressée).

Le framework contient notamment les fonctionnalités suivantes :

  • Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;

  • Événements ;

  • Effets et animations ;

  • Manipulations des feuilles de style en cascade (ajout/suppression des classes, d’attributs…) ;

  • AJAX ;

  • Plugins ;

  • Utilitaires (version du navigateur…).

Dimension structuré et rectiligne :

En effet le site internet est très bien structuré pour une lecture rapide et clair des informations délivrés par le site.

Lorsque l’on navigue sur le site les page garde la même structure avec le menu qui reste a la même place ainsi que le logo, en revanche la partie ou les photos défile sur la page d’accueil devient le contenu des autres pages.

menu gas
contenu

La stratégie:

Les couleurs : les couleurs du site évoque la féminité avec la couleur rose saumon, le bleu évoque la liberté, la légèreté mais aussi la mer méditerrané car il ne faut pas oublier que « Gas bijoux » et une marque du sud de la France.

La couleur blanche quand a elle impose un ton serieu au site internet vue qu’il ce veut commerciale.

Le site est bien évidement a tendance commerciale sont but est de promouvoir les produits de la marque et ainsi de les vendre.

Conclusion :

Pour se donner cette image luxueuse ils ont des produits design en France et un site internet sobre et précis, qui a vraiment un but commerciale. Le site internet de cette marque sudiste ce voulais très simple et clair pour son utilisation afin que les internautes puisse naviguer en toute simplicité.

Conserver des éléments colorés dans une photo en noir et blanc

May 26th, 2011 by deborah.paris@iscom.org

Voici un petit tutoriel Photoshop, pour apprendre à garder des éléments en couleur dans une photo en noir et blanc.

Pour commencer, ouvrez votre image dans Photoshop.

Etape 1
Convertissez votre image (qui est pour le moment en arrière-plan) en calque.

Etape 2

Puis dupliquez ce calque (clic droit sur le calque, puis “Dupliquer”)

Etape 3
Placez vous sur la copie de votre calque, et réglez les paramètres de façon à ce que celui-ci soit en noir et blanc (Menu “Images”, “Réglages”, “Noir et Blanc”)

Etape 4

Le calque en couleurs doit bien rester en dessous du calque en noir et blanc.
Restez sur le calque en noir et blanc, et passez en mode masque (Menu “Sélection” puis “Mode Masque” ou simplement via la petite icône suivante Icone 2 dans la barre d’outils à gauche, en dessous du changement de couleur)

Etape 5
Sélectionnez l’outil “Pinceau”, ainsi que ses paramètres, notamment l’épaisseur.
Avec cet outil, vous allez repasser par dessus les zones que vous souhaiterez supprimer du calque en noir et blanc, afin qu’apparaissent les zones en couleurs du calque dessous.

Etape 6
Soyez précis pour que l’effet soit le plus net possible sur l’image finale.
N’hésitez pas à modifier l’épaisseur du pinceau pour aller au plus près des détails de votre image.
Ici, intéressons nous aux yeux du personnage.

Les zones sélectionnées apparaissent en rouge par défaut.

Etape 7
Désactivez le mode masque, toujours via la même icône, afin que celle-ci repasse à sa couleur normale icone.

Les zones initialement rouges vont apparaitre en zones sélectionnées.
Etape 8
Intervertissez les zones de sélection pour que seuls les yeux soient sélectionnés (Menu “Sélection” puis “Intervertir”)
Puis supprimez la sélection.

Voici le résultat :

Etape 9
L’outil masque permet également de changer la couleur des éléments sélectionnés dans les images en couleurs: au lieu de les supprimer, modifiez leur couleur via le menu “Images”, puis “Réglages” et enfin “Teinte/Saturation”.
On peut bien évidemment mêler les deux techniques, afin de changer les couleurs de certains éléments d’une image, et de conserver ces éléments colorés dans la même photo en noir et blanc.

Analyse de site : l’Abattoir

May 25th, 2011 by chloe.di-ilio@iscom.org

Contrairement à la plupart des personnes, j’ai décidé d’opter pour un site national mais peu connu, celui de l’Abattoir de Chalon sur Saône. L’Abattoir est un centre national des Arts de la Rue de Chalon sur Saône. Il s’agit donc d’un site dédié à la culture de cette ville et de sa région.

Pourquoi ce choix ?

Tout d’abord car il s’agit d’une institution me tenant à cœur car elle évoque à la fois l’Art, plus précisément les Arts de Rue et également car celle-ci est située à Chalon sur Saône

LE GRAPHISME

L’ergonomie de ce site est excellente

C’est un site simple en navigation :

  • Il y a un menu principal avec les rubriques essentielles : actualité, compagnies, médiation diffusion, l‘abattoir

Imageun

  • Il y a un menu secondaire : à télécharger, calendrier, résidence

Imagedeux

=> En un seul regard, l’internaute c’est où il doit cliquer selon ce qu’il désire savoir comme informations

Nous pouvons également parler de dynamisme et d’interactivité :

  • Sur la page d’accueil, des photographies défilent (photo représentant le lieu et les spectacles) : Ces photographies, en plus de conférer un côté dynamique au site, informent également l’internaute sur les prochaines grandes dates à retenir. C’est à la fois esthétique et utile !

Imagetrois

  • Lien avec l’internaute grâce à l’inscription à la newsletter : C’est un élément essentiel pour garder le contact avec l’internaute, en lui envoyant régulièrement des newsletters afin de le tenir informer des manifestations à venir ainsi que de le stimuler pour qu’il prenne part aux événements proposés.

Imagequatre

  • Lien Facebook : ce lien permet de suivre de plus près, à chaque seconde, les actualités de l’Abattoir

Imagecinq

LES COULEURS

Les couleurs dominantes utilisées sont le orange, bleu, noir, gris, blanc

couleursite

Ces couleurs ne sont pas choisies par hasard car elles permettent de jongler à la fois entre un univers artistique et un univers institutionnel.

  • Le orange symbolise le dynamisme, l’énergie et l’imagination (dimension artistique)
  • Le bleu, la rêverie, la confiance et la sécurité (dimension à la fois institutionnelle et artistique)
  • Le noir,  la distinction et le mystère (dimension artistique)
  • Le gris, le modernisme et la sobriété (dimension institutionnelle)
  • Le blanc, la pureté et l’innocence (dimension artistique)

La visite virtuelle (même s’il ne s’agit que de deux plans) reste tout de même appréciable car cela donne une dimension humaine et familiale à l’institution : elle devient accessible dans l’espace et l’internaute peut savoir comment elle est organisée.

Imagesix

Imagesept

LA PROGRAMMATION DU SITE

Le site est fait en HTML, ce qui permet un meilleur référencement car contrairement au flash, le texte n’est pas représenté comme une image. Les moteurs de recherche peuvent donc parcourir le contenu du site.

Cependant, si nous ne tapons pas « L’abattoir » avec  « Chalon sur Saône » à la suite, celui-ci n’est pas du tout référencé. Certes, il s’agit d’une institution locale, mais une optimisation du site, en plus approfondie, pourrait permettre à l’organisme de gagner en place dans le classement du moteur de recherche.

La présence au sein de quelques annuaires pourrait également contribuer à un meilleur référencement. Effectivement, les échanges de liens ciblés (vers les compagnies par exemple) s’avéreraient efficaces.

Nous pouvons noter qu’une infime partie du site est fait en flash. Il s’agit du bandeau de photographies qui défilent sur la page d’accueil.

Imagehuit

LA STRATEGIE

En ce qui concerne la stratégie adoptée par cette institution pour ce site, nous avons deux points essentiels à mettre en avant :

  1. Une dimension artistique qui est mise en avant grâce à différents procédés, tels que :
  • Les dessins : ils représentent la vie de Chalon sur Saône ainsi que les lieux où se déroulent les évènements organisés par l’Abattoir : la péniche, les quais de Saône, l’ancienne sucrerie, Nicéphore Cité ; tout en leur apportant une dimension artistique et décalée. Imageneuf
  • Les couleurs : comme dit précédemment, les couleurs évoquent la rêverie (blanc) et le dynamisme (orange)
  • Les formes arrondies : elles apportent de la douceur et de la légèreté au site, ce qui confère une impression de monde à part où tout est possible : L’internaute se sent rassuré et en confiance, il peut alors laisser part à son imagination.

=> Cette dimension artistique confère un univers onirique au site

  1. Mais aussi une dimension institutionnelle :
  • Formes rectilignes : elles apportent du sérieux au contenu et à la forme. En effet, même s’il s’agit d’un centre des Arts de Rue, l’institution veut prouver que son travail est fait de manière réfléchie et organisée. Ces formes rectilignes viennent donc recadrer le côté artistique du site.
  • Site structuré : Les éléments sont bien organisés, par exemple sous forme de colonnes pour le menu secondaire. Tout les éléments sont alignés : les textes sont alignés par rapport aux images, les images par rapport aux images. Le site respire dans le sens où il y a suffisamment d’espace entre chaque informations.

Imagedix

=> Cette dimension institutionnelle confère un univers sérieux au site

CONCLUSION

Il s’agit d’un site révélant à la fois d’une dimension artistique grâce à ses couleurs, ses formes qui confèrent un univers onirique et imaginaire mais aussi une dimension institutionnelle avec ses formes et sa structure qui apportent quant à elles du sérieux au site.

Nous pouvons également parler d’un site design, moderne et épuré qui bénéficie d’une ergonomie excellente permettant à l’internaute de trouver rapidement les informations souhaitées mais aussi de prendre du plaisir à parcourir et découvrir le site.

C’est fort en chocolat…

May 25th, 2011 by clement.carlier@iscom.org

image 1

Bonjour à tous, lecteurs passionnés de ce blog, iscomiens invétérés et autres chevronnés de TIC !

Comme convenu avec Mr Gisclon, que je salue au passage et que je remercie pour son travail formidable (ça me ferra des point en plus ?), je publie aujourd’hui un second billet : l’analyse du site.

Pour ceux qui avaient déjà lu ma première publication et tenté de participer au jeu-concours, il semblerait que les commentaires ne fonctionnent pas sur l’article. Vous m’en voyez désolé (et soulagé).

Mais pas de panique, vous pourrez vous rattraper avec cette analyse passionnante puisqu’il y aura aussi une surprise à gagner… Mais pour cela, il faut commencer par lire l’article.

C’est parti mon kiki !

Le site que j’ai choisi d’analyse est une référence tant en matière de design que de technologie. Et en plus d’être mon site favori, il est le témoin de l’activité on-line de la nouvelle génération du tout internet.

Le site : chocapic  (http://www.chocapic.com/fr/).

Cet article est tout naturellement à déguster accompagner d’un bol de ces délicieuses céréales, baignant dans un soupçon de lait bien frais (entre 4 et 6 c°).

Petit rappel pour les plus incultes d’entre vous.

Pour ceux qui ne le savent pas (honte à vous), Chocapic est une marque créée et gérée par le groupe Nestlé. Ces céréales existent depuis 1984. Même si ça célèbre mascotte : Pico le chien, n’était pas sur les paquets au lancement, Pico s’est rapidement imposé comme une référence et il est même une véritable part d’enfance pour les jeunes générations.

Avec pour fameux slogans : « Chocapic, c’est fort en chocolat » ou encore « Et paf ! ça fait des chocapics ! ». Cette marque universelle est rentrée dans l’esprit collectif.

Les céréales sont clairement destinées à un jeune public (enfant voir pré-adolescents).

Image 2

Le site

Ce qui rend ce site et son analyse intéressants pour notre blog, est entre autre la technologie qu’il utilise : le flash.

Mais nous y reviendrons dans une partie dédiée.

Quand vous arriverez sur le site, vous serez sûrement confronté à un temps de chargement pendant lequel vous pourrez admirer l’ami Pico se colorer petit à petit (plus ou moins rapidement selon la qualité de votre connexion).

Image 3Image 3 BIS

Image 4

Une fois le chargement terminé, vous arrivez sur le site à proprement parlé.

Image 5

Ce dernier à été créé et adapté à son publique.

Navigation très instinctive, animations, interactivité élevée, couleurs vives, place presque total accordée aux images, musique de dessin animé héroïque en fond…

Pas de doute, le cible est jeune.

Le site fait écho aux jeux proposés sur les packagings des céréales. Il offre tout une série d’activités ludiques (mini jeux), des fonds d’écran, des posters et il assure par la même occasion la promotion  de ses produits. Ce sont principalement des nouvelles variétés de céréales comme chocapic duo ou encore chocapic pépite.

Le site propose aussi aux jeunes utilisateurs de s’inscrire en créant un compte, ce qui leurs permettra d’obtenir des bonus échangeables contre des goodies.

La notion de communauté est intéressante puisque la plupart des visiteurs ne sont probablement pas encore en contact avec des réseaux sociaux type facebook.

Échanger avec les mascottes de dessins animés et les personnages que l’on voit apparaître dans les bandeaux de publicité et sur les paquets de céréales ?

Voici à quoi pourrait ressembler l’activité des jeunes générations sur le net. Un facebook junior pour les tous petits et leurs amis imaginaires… Une aubaine pour la publicité infantile.

Mais revenons à notre Pico !

L’arborescence du site est relativement simple :

Le logo chocapic est en haut, au centre du site. C’est l’élément le plus visible, bien qu’il ne soit pas cliquable.

Image 7

De part et d’autre du log, nous trouvons deux boutons envoyant vers les jeux en lien avec les nouvelles gammes de produits. Ils sont placés de manière visible pour recueillir le maximum de clics.

Image 8Image 9

Viennent ensuite les liens vers les différents jeux, vers une partie du site pour rencontrer les héros, vers la zone pour s’inscrire, les récompenses…

Image 10

Pour finir, la partie  basse du site accueille un menu discret et plus classique comprenant un lien vers le site Nestlé, un lien vers la partie politique de confidentialité, un lien vers les conditions d’utilisation ainsi qu’un bouton pour désactiver ou activer la musique.

Image 9 bis

Les couleurs dominantes sont le marron en dégradé, présent sur le log et le packaging ainsi que le gris lui aussi en dégradé. Le vert est quant à lui très présent, mais il est surtout liés au partenariat avec le film.

Image 11

Autre action du site

Passé une demi-heure à s’éclater sur les différents jeux (ou à attendre qu’il daignent charger), un message s’affiche nous informant que nous avons déjà joué longtemps et nous incitant à faire une pause.

Image 12

Image 13

Un gage de responsabilité de la marque auprès des parents.

La technologie utilisée.

Comme je vous l’ai dit précédemment, le site utilise Flash.

Cette technologie souvent décriée présente des applications assez spécifiques.

Elle a pour avantage de permettre la mise en ligne de contenus animés, d’animation et de jeux. Cela correspond parfaitement à l’usage, aux buts et aux cibles de notre site web.

Cependant, cette technologie est aujourd’hui sur le déclin. Elle est souvent dénigrée, ne s’adapte pas aux smartphones et est très mauvais pour le référencement. Mais aucun de ces élément n’est réellement un frein dans notre cas, au vue de l’utilisation et de la cible du site.

Le principal inconvénient nous concernant est la lenteur. Un site full flash demande une excellente connexion pour tourner de manière optimal. Et nous savons que tout le monde n’est pas doté d’un bonne connexion. C’est l’un des défaut majeur de ce site web.

Les quelques contenus textuels (mentions légales, conditions d’utilisation…) sont quant à eux en Java script.

Image 14

Le site en tant qu’outil de communication :

Depuis l’instauration du cadeau dans ses paquets de lessives, Bonux a créé une véritable révolution en matière de consommation, particulièrement pour les produits à destinations des enfants.

Le cadeau bonux s’est transformé en cadeau du paquet de céréales pour les deux dernières génération. Aujourd’hui, ces cadeaux restent dans l’air du temps et s’adaptent au tout numérique. Passer de la figurine, du jouet au CD de jeux, aux lunettes 3D, à la réalité augmentée et au site internet… Pas de doute, une révolution est bien en marche…

Ce site est donc l’aboutissement de plusieurs décennies de cadeaux à la bonux.

Un outils de communication ludique pour des enfants qui n’ont pas encore de notion d’argent ou d’achat, mais qui savent à merveille influencer leurs parents et mettre leurs céréales préférées en douce dans le caddie.

Si ce site est entièrement dédier aux bambins, un lien renvoie tout de même vers le site Nestlé. Les parents pourront y trouver toutes les informations liées à la santé, à la composition des produits…

Ce site est donc essentiellement ludique, et il vise à prolonger l’expérience et l’échange avec la marque et ses mascottes pour fidéliser au maximum les chérubins. Un outil de communication renforcé par des partenariats avec des films, des dessins animés…

Actuellement, Arthur 3 est à l’affiche au grand écran, mais aussi sur les boîtes de chocapic et donc logiquement sur leur site.

De quoi doubler l’efficacité de ce site au premier abord uniquement ludique mais au final redoutablement efficace pour ceux qui auront la connexion nécessaire à son bon fonctionnement.

Merci Chocapic…

Et maintenant pour finir en beauté : le petit jeu-concours. Envoyé la réponse dans les commentaires. Un boite de céréales à gagner pour la première réponse juste à être publiée

Quel est le nom du chien chocapic ?

(offre valable jusqu’au 26 mai à 23h59, l’annonceur se laisse le droit de choisir la marque des céréales et de modifier le lots pour un autre d’une valeur égale ou supérieure).

À bientôt.

Enregistrer une image pour le Web !

May 24th, 2011 by agathe.panzeri@iscom.org

Salut les terriens !

Aujourd’hui on va faire en sorte d’enregistrer une image pour le web sans que sa qualité soit altérer tout en réduisant sa taille.

Rien de sorcier !

Prenons une image toute simple et importons là dans Photoshop

1

Dans Photoshop il faut utiliser le menu Fichier / Enregistrer pour le web

2

Lorsqu’on enregistre pour le web, le but est que l’image soit la plus petite possible en terme de Ko sans altérer sa qualité visuel

1 – 4 vignettes  :
En haut à gauche de la boite de dialogue “Enregistrer pour le web”, vous avez la possibilité d’afficher 4 vignettes, une de l’originale et l’autre de l’image que vous êtes en train d’enregistrer.
3

Cette fonction est très pratique, car en fonction des paramètres choisis dans la partie droite de la fenêtre, l’affichage de la vignette changera en temps réel ce qui nous permet de juger de la qualité de l’image.

Il faut choisir les paramètres l’un après l’autre et regarder le résultat en comparant avec la vue de l’original, afin d’obtenir une image la plus fidèle possible.

2 – Sélectionner un paramètre prédéfini :

Globalement il faut d’abord choisir un “paramètre prédéfini” dans le menu déroulanten haut, à droite. Dans le menu déroulant apparaissent des exemples prédéfinis,
il y a GIF 128, 64 ou 32 en tramé ou non tramé (et couleur web).
4

- le nombre correspond au nombre de couleurs de l’image (limité à 256)
par exemple en choisissant “GIF tramé 64″ on décide de limiter le nombre de couleurs de l’image finale à 64 couleurs.

Vous avez un aperçu des couleurs dans la partie droite, en bas (table des couleurs)
Exemple :

5

On voit ici qu’il y a des couleurs en double cela veut dire qu’on a choisi un paramètre prédéfini avec un nombre de couleurs supérieur au nombre de couleurs contenu dans l’image, donc dans ce cas on est certain de ne pas détériorer les couleurs de l’image,
mais ce n’est pas toujours possible avec toutes les images.

Avec tramage : cela correspond à une méthode de mélange entre les couleurs qui sont côte à côte. Il va donc y avoir une cohésion entre les pixels, ce qui fusionne un peu les couleurs.
Sans tramage : la liaison entre les pixels sera “brute” donc pas de mélange entre les couleurs.

Donc comme on enregistre pour le web il faut penser à obtenir une image finale la plus légère possible, et malheureusement le fait de choisir beaucoup de couleurs augmente la taille de celle-ci.
Il faut donc faire un “sacrifice” entre taille finale et qualité visuelle.
Comme l’ajout de tramage n’augmente que très peu le poids finale il est préférable de toujours choisir une image tramée (elle sera de meilleure qualité)

3 – Règler les paramètres en fonction de l’image :

En fonction de chaque image il faut modifier les paramètres prédéfinis.
C’est à dire que dans un premier temps on choisi par exemple “GIF 64 tramé”,puis on voit si on a assez de couleurs (panneau à droite Table de couleurs) s’il y a des couleurs en double c’est qu’on a choisi suffisamment de couleurs (exemple 64) si on n’a pas assez de couleurs il faut augmenter le nombre de couleurs dans Couleurs, à droite .
6

Mais alors pourquoi ne pas mettre tout simplement le maximum (256) ?
Parce que nous sommes dans une optique “Enregistrer pour le web” et comme le web est limité en bande passante il faut “optimiser” l’image c’est à dire que plus il y a de couleurs dans le GIF plus l’image finale aura une taille importante (en ko).

En fait le choix dépend du visuel, si on fais une petite image gif à mettre dans un coin d’un site web sa qualité visuelle n’a pas une très grande importance, donc on peux diminuer son nombre de couleur quitte à en sacrifier
Par contre avec une belle image GIF, il faut rechercher à ce qu’elle soit le plus fidèle possible à l’original.

4 -  Les autres paramètres :

- l’algorithme de tramage convient dans la plupart des cas.

-On peut toujours tester les paramètres “Perte”, “Tramage” et “algorithme de réduction de couleur” mais cela n’influence pas énormément la qualité de l’image.

- la case Entrelacé : l’entrelacement ne sert que pour l’affichage de l’image. Entrelacée elle s’affichera une ligne sur 2 (donc progressivement) et non entrelacée elle s’affichera en une seule fois.
C’est pour les images de taille importante uniquement. Avec une image entrelacée on verra une partie de l’image apparaitre rapidement et le reste au fur et à mesure que l’image est chargée dans le navigateur (par défaut la case n’est pas cochée).

- Aligné sur le web : ici on choisi de limiter les couleurs aux Couleurs web uniquement, il n’y en a que 216. Comme ça, vous êtes certain que l’image sera vu de la même façon par tous le monde car les couleurs web sont normalisées et reconnues par tous les navigateurs.

- Transparence : si vous avez une image avec de la Transparence, il y a un paramètre qui peut être important : le Détourage.

On peut choisir une couleur de détourage, c’est à dire que suivant la qualité de l’image on va voir apparaitre des pixels disgracieux autour de l’image, près des zones transparentes.
En choisissant une couleur de détourage (donc de préférence celle du fond de la page web ou sera affichée l’image, ou une couleur très proche), les pixels disgracieux prendront alors la couleur choisie dans “détourage”, et ils ne se verront pas !

5 – Exemples :

originale (JPEG moyen) 29ko
1

Ici il s’agit d’une « photo » et il est donc normal que l’image GIF soit plus lourde au final qu’une image JPEG.

En GIF 32 tramé (94ko)

32

En GIF 32 non tramé (66ko)

33

De façons générales ce qui réduit le poids final d’une image, ce sont ses dimensions et son format (sa compression).

Donc il faut d’abords diminuer les dimensions de l’image et ensuite l’enregistrer pour le web, elle sera compressée (soit en GIF, soit en JPG), suivant les paramètres choisis.

Un design original avec Illustrator CS5

May 24th, 2011 by marion.mugot@iscom.org

Voici un petit tutoriel très simple qui va vous permettre un graphisme original pour un header, ou un logo.

Etape 0

Etape 1: faites toute une série de cercles pour avoir une forme générale sympa, dynamique. Si vous voulez des cercles parfaits, appuyez sur Shift en même temps que vous tracez votre cercle.

Etape 1

Etape 2: ensuite, avec l’outil Rectangle arrondi, faites des coulures là où vous le souhaitez. Cela donnera un effet “taggé” à votre dessin.

Etape 2

Etape 3: sélectionnez toutes vos formes avec la flèche noire, puis allez dans Fenêtre > Pathfinder > Réunion.

Etape 3

Etape 4: choisissez la couleur de fond que vous souhaitez, et le contour. Ajoutez des effets comme le dégradé pour un effet plus travaillé.

Etape 4

Etape 5: avec l’outil Texte, créer une zone de texte, puis inscrivez ce que vous voulez (ici, une ode à notre école). Ensuite vous pouvez rajouter les couleurs ou effets que vous souhaitez.

J’ai choisi un fond orange et le même contour que le support, pour donner un côté pop, très flashy, frais, été. J’ai ajouté des étoiles en Dégradé radial sur les lettre pour donner un petit air disco-girly.

Etape 5 bis

essai

Etape 6: libre à vous d’ajouter des extras, comme des brushs, des éléments de décoration comme les fleurs ou les spirales pour décorer le tout. Pour les fleurs, allez dans Fenêtre > Symboles > Fleurs. Puis des spirales pleines ou vides.

final

Et voilà! TADAMMMM! Oh mais quelle splendeur! Quelle fraicheur! Quelle virtuose d’Illustrator!

final 2

Nespresso, what else ?

May 23rd, 2011 by benjamin.vincent@iscom.org

Logo_Nespresso

Bonjour à tous, je reviens vers vous pour vous faire découvrir le site dédié aux petites capsules proposées par Nespresso.

Dans un premier temps je vous invite à vous connecter sur le site de Nespresso. Une fois connecté, la première chose que nous remarquons est  que le site Internet de Nespresso se veut à la fois institutionnel et commercial. Une partie du site est consacrée à l’histoire et au secret des petites capsules de la marque ainsi qu’aux grands crus proposés. A cela, s’ajoute la possibilité de commander ses capsules, accessoires et machines Nespresso.

On peut donc dire que la finalité de ce site est commerciale.

Plan d’ensemble :

Home page

Arrêtons-nous sur la page d’accueil afin de l’analyser de plus près. Dans un premier temps, on remarque que celle-ci est épurée et claire.  En effet, grâce à cette page, le visiteur sait exactement où cliquer en fonction de ce qu’il recherche. Il n’a pas besoin d’utiliser la scroll bar pour rechercher des informations car les designers du site Nespresso ont fait en sorte que toute la page soit visible lors de son ouverture.

code source home page

En ce qui concerne la réalisation de cette page, elle a été faite grâce au langage HTML (Hyper Texte Mark Langage). Ce langage permet de créer des pages Web en utilisant des balises permettant la mise en forme du texte. De plus, le site internet utilise également du langage Javascript qui est exécuté sur l’ordinateur de l’utilisateur. Cela permet une interaction entre le site Internet et l’utilisateur lorsque celui-ci passe sa souris sur une image par exemple.

Impression

On remarque, dans un premier temps, le logo en haut de la page, à gauche afin d’être le premier élément que le visiteur voit lorsqu’il est sur le site. Avec la règle de la lecture en Z, le client lit donc le logo ensuite se dirige vers le choix des langues et la fonction recherche. Après avoir choisi la langue un menu déroulant visible avec plusieurs visuels.

Image 2

Ce menu déroulant propose les nouveaux produits ainsi que les actualités. Les images sont là pour donner envie au visiteur de cliquer dessus afin d’en savoir plus et par la suite, acheter le produit. Le visiteur peut faire dérouler ce menu grâce aux flèches situées sur chaque côté de ce menu.  Techniquement parlant, ce menu est réalisé grâce à Flash, un logiciel multimédia permettant de créer des animations sur Internet.

code sorce

Après avoir visualisé ce menu, nous découvrons un espace permettant à l’internaute de se connecter sur son espace privé. Cela lui permettra de commander des capsules et accessoires de la marque ainsi que de découvrir les avantages Club. Nous remarquons également un logo représentant une capsule avec écrit à ses côtés « Commandez vos capsules ». Ce logo et cette mention est là pour pousser à l’achat ainsi qu’à adhérer au club prestigieux et exclusif Nespresso.

Un deuxième menu est présent ou l’on retrouve l’histoire des capsules et des cafés disponibles, les machines proposées, …

Enfin un dernier menu est visible avec les mentions légales, contact, plan du site, …

Stratégie Nespresso :

Revenons maintenant sur la marque Nespresso et ses valeurs. La marque  est créée en 1986 par le groupe Nestlé. La première machine est lancée en 1986 pour le milieu professionnel. Deux ans plus tard, la première machine est lancée à destination des particuliers. Au fur et à mesure des années, les ventes augmentent ainsi que la présence de Nespresso dans le monde.

Aujourd’hui, Nespresso est présent dans plus de cinquante pays comme nous pouvons le voir lors du choix des langues sur leur site Internet.

Choix pays

Nespresso se considère aujourd’hui comme une marque luxueuse avec des produits exceptionnels. On remarque ceci du premier coup d’œil avec la couleur qu’utilise la marque pour son site Internet.

Couleurs

Le fond est de couleur noire qui est synonyme de luxe, prestige. De plus, cette couleur est sobre comme le site internet de la marque. Le texte, lui, est de couleur blanche afin de permettre une visibilité maximale.

En ce qui concerne les photographies, celles-ci sont réalisées par de célèbres photographes pour véhiculer une image de qualité. On remarque également plusieurs photos de packshots afin de donner envie aux visiteurs d’acheter ce produit de luxe.

On peut conclure que Nespresso propose un produit de luxe destiné au grand public. Pour se donner cette image luxueuse ils ont des produits design, des flagships dans le monde entier et un site internet sobre et précis. Nespresso se lance donc sur le marché des machines à café pour particulier en proposant des capsules et non des dosettes comme on peut le voir chez les concurrents. (ex: Senseo)

Sans oublier l’utilisation de George Clooney dans ses publicités pour alimenter l’image de marque. En effet la marque utilise l’image et la popularité  de George Clooney pour être sur de toucher un maximum de personnes.

Alors comme dirait George : “Nespresso, What else ?”

capsules

YSL – “La mode est une maladie incurable”

May 23rd, 2011 by jenny.tempion@iscom.org

Bonjour la compagnie !

Aujourd’hui nous allons nous intéresser à l’analyse du site Yves Saint-Laurent. Un site on ne peut plus élégant digne de son nom !

Yves Saint-Laurent n’est pas un couturier, c’est un artisan, un fabricant de bonheur !

YVES SAINT LAURENT 1

Histoire de la marque :

En 1961, Yves Saint Laurent et Pierre Bergé, deux inséparables de longues dates décident de lancer ensemble leur propre maison de couture. YSL crée sa première collection en 1962. Tuniques, caban, sportswear couture, pureté, décontraction, associations de couleurs : les codes de la marques sont nés : de suite, le succès est au rendez-vous.

Ainsi les années 1960 sont celles de la reconnaissance du style Saint Laurent qui ne cesse d’innover. Mais la véritable consécration a lieu en 1966, lorsqu’il lance le smoking pour femme, qui rapidement, deviendra LA pièce incontournable de son dress code. Il libère les femmes. La même année, il invente Yves Saint Laurent Rive Gauche, le prêt à porter féminin de luxe.

Les passionnés de mode se mirent alors à porter les créations anticonformistes de M. Saint Laurent dans leur vie de tous les jours, marquant ainsi la première étape d’une démocratisation de la mode.

Parfums, Maquillage, Prêt-à-porter féminin et masculin, chaussures, sacs, maroquinerie, bijoux, foulards, cravates et lunettes… Les collections de la maison Yves Saint Laurent se sont aujourd’hui bien développées.

C’est en janvier 2002, qu’il décide de faire ses adieux à la haute-couture. Depuis 2004, Sephano Pilati est le directeur artistique de la marque.

Aujourd’hui, Yves Saint Laurent comprend environ 70 magasins dans le monde, c’est peu. Mais les collections sont aussi distribuées dans des grands magasins multi-marques comme le Printemps, Le Bon Marché…

“J’ai participé à la transformation de mon époque. Je l’ai fait avec des vêtements, ce qui est sûrement moins important que la musique, l’architecture, la peinture… mais quoi qu’il en soit, je l’ai fait.”

Analyse graphique :

Maintenant, on va s’intéresser à la partie purement graphique.

Lorsque l’on tape dans la barre d’adresse www.ysl.com, on arrive sur une page où les couleurs noires et blanches sont prédominantes. Le fond noir, symbolise l’élégance, le raffinement, la sobriété, mais fait surtout appel au milieu du luxe. Il est marié avec des écritures blanches, qui l’a nous donne un aspect de pureté, de simplicité. L’alliance de ces deux couleurs nous transporte à travers le monde du luxe, de la mode, et de ces choses onirique. Quatre photos aux couleurs vives, principalement le orange, donne de la luminosité et de l’attractivité à la page d’accueil. On est ainsi transporté dans un univers magique. Un univers attirant, nous faisant voyagé à travers une marque symbolique. Le positionnement luxueux de la marque, se retrouve ainsi dans les pages du site web.

1

La palette RVB :

Sans titre - 8

Au niveau de la typographie, elle reste simple et dynamique à la fois. Le logo, qui date de 1961, a été réalisé par Adolphe Jean-Marie Mouron, autrement appelé Cassandre, qui était un des plus grand graphiste de son temps, est placé au centre de la place, ce qui lui procure ici un effet d’importance. Pour la petite anecdote, un seul logo fut proposé à Yves Saint Laurent et à Pierre Bergé, celle des lettres YSL entrelacé, ce fut le bon !

logo_ysl

Et oui, le monde de la mode adore les changements, et pourtant les logos des maisons de luxe sont immuables.  Pour cause, le logo Yves Saint Laurent n’a pas pris une ride en 50 ans, et n’a jamais été retouché depuis sa création.
C’est aussi ce fameux Cassandre, qui a réalisé la typographie, toujours la même année, pour la Maison. Une typographie simple, assez carrée. Elle représente l’univers de la marque,  avant-gardiste sur son temps.

Aussi, sur la page d’accueil, nous remarquons que plusieurs redirections sont possible.

Tout d’abord, nous allons nous intéresser à la partie « Fashion and accesories ». Ici, il faut déjà choisir sa langue, (anglais ou français). Le choix reste maigre. On se demande si pour une marque à la notoriété internationale, ce n’est pas un peu faible. Ne manque t-il pas une déclinaison en chinois ? Surtout lorsque l’on sait que le marché du luxe en chine est en perpétuelle croissance.

Les pages qui renvoient à cette partie, sont travaillés. Le design est très épuré. Les couleurs principales ne changent pas au fils des pages. Le noir et le blanc, sont donc bien synonyme de raffinement et de Luxe.

On trouve un menu est riche ( Collections, Maison Yves Saint Laurent, Evenements, Boutiques…). Il est relativement simple d’utilisation, et l’on trouve rapidement ce que l’on y cherche. Il y a de nombreuses vidéos, qui rendent le site très attractif et attrayant.

La partie « Beauty and Fragances » est plus sobre. Ici, lorsque l’on clique sur cet onglet, nous sommes redirigé sur une page où nous devons choisir notre continent et par conséquent notre pays. Les langues sont ainsi plus nombreuses. Cela est sûrement dû au fait, que les produits beauté et parfums touche une cible différentes,beaucoup plus jeune et beaucoup plus large que les produits Haute-Couture.

4

Après avoir cliqué sur le pays de notre choix, nous tombons sur une page aux couleurs différentes. Cette fois-ci le blanc domine, et les écritures sont un camaïeu de couleur or, doré. On est transporté dans un univers plus glamour, plus “colorée”.

6

Là encore, le menu est riche, et l’on retrouve de nombreuses vidéos, et des informations précieuses sur toute la gamme des produits beauté.

Ici, la relation avec l’internaute, n’est plus la même. On ressent plus de complicité. Cela peut se prouver par la page : “l’invitée de la chronique” qui offre des conseils beauté.

67

Les pages ont l’air aussi mieux structurés, mieux organisés.

Prenons l’exemple avec la page maquillage :

9

Analyse technique  :

Le site Yves Saint Laurent est attractif, de par ses nombreuses pages et redirections. Il capte l’attention de l’internaute, par un design simple et impactant. Un design sobre et élégant, qui nous fait voyager à travers le monde du luxe.

Grâce au code source de la page, nous pouvons voir que le langage de base utilisé est le HTML. Il s’agit d’un langage simple, facile d’utilisation et accessible à tous. Il permet de donner les informations essentielles pour la structure du document.

3

Il existe cependant une différenciation entre les deux parties. Effectivement, « Fashion and accessories » est réalisé sous Flash, ce qui permet une certaine interactivité entre l’internaute et la marque. Cela permet d’avoir en plus, une musique d’ambiance, des animations, des vidéos… Pour la marque, c’est un plus, car avec ce procédé, elle peut faire partager ses campagnes publicitaires, des vidéos des défilés…
En revanche, la partie « Beauty and Fragances » est réalisée en Javascript. Cela apporte un côté plus leger et l’affichage de la page est ainsi beaucoup plus rapide.

12

On observe également la présence de flux RSS, dans le but de se tenir informé des nouveautés de la marque sur les réseaux sociaux.

Stratégie de communication :

Les objectifs de la marque sont principalement affectifs. L’image de celle-ci est particulièrement mise en avant sur la majorité des pages du site. Les objectifs cognitifs, sont aussi très présents dans ce site. De nombreux produits mais aussi les différentes campagnes font qu’il est essentiel pour la marque de rappeler aux consommateurs ses plus. La partie conative est surtout présente dans la partie “Beauty and Fragances”.

La marque n’a pas qu’une seule et unique cible. La partie concernant « Fashion and accessories » s’adresse une cible autant bien féminine que masculine vouant une passion certaine pour le milieu de la Haute Couture luxe, âgés de plus de 35 ans, et ayant des revenus bien évidemment assez élevés, de la classe A et B.

En ce qui concerne la partie « Fragances and beauty », la marque s’adresse ici à une cible plus large, 25-49 ans, aux hommes et femmes aimant les produits de qualité et accordant un certains soins à leur esthétisme et apparence.

En revanche, le site s’adresse aussi au grand public, la cible secondaire de la marque, aimant la mode, le luxe, et vouant une curiosité à la marque.

Yves Saint Laurent se positionne en tant que marque de luxe, assez avant-gardiste sur son temps. C’est une marque qui n’a cesser d’innover depuis ces débuts, et qui à révolutionner le milieu de la Haute Couture.

Le ton et l’ambiance employée restent très élégants et sobres. Le texte est peu présent sur ce site. Les produits sont mis en avant d’une manière gracieuse et attirante.

Conclusion :

Le site Yves Saint Laurent est tout simplement une petite merveille au niveau graphique, technique mais aussi au niveau informatif. Il s’agit, en effet, d’un site riche aussi bien sur la forme que sur le fond.

C’est un site en parfaite cohérence avec la stratégie de communication menée par la marque luxueuse. Il nous plonge dans un univers typiquement onirique. Les différentes vidéos, animations nous poussent à voyager un bon moment à travers ce site.

Donner un effet “papier journal” à votre photo

May 23rd, 2011 by maghnia.moussa-belhadj@iscom.org

Bonjour à toutes et à tous !

Voici un tutoriel pour les  journalistes en herbe. Vous allez apprendre comment rendre une photo basique en photo de journal, avec ses défauts d’impression, ses effets de papiers abimés et son effet noir et blanc.

Ce tutoriel est spécifique au logiciel Photoshop (peu importe la version). Pour vous le procurer, vous pouvez télécharger la version d’essai disponible sur le site Adobe : http://www.adobe.com/fr/downloads/ .

Ce tutoriel s’effectuera en 7 étapes.

C’est parti !

Etape N°1

Ouvrez votre image.

ouvrir image

La qualité de l’image doit très être de haute qualité pour un meilleur résultat.

Etape N°2

  • Double-cliquez sur l’arrière plan pour convertir votre image en calque. Nommez ensuite le calque.

calque

  • Passez votre image en noir et blanc.

noir et blanc

Voici le résultat : image noir et blanc

  • Ensuite allez dans la rubrique Luminosité / Contraste (Image > Réglages > Luminosité/Contraste…) et accentuez la luminosité à 100 et le contraste à 30.

contraste

Etape N°3

  • Dupliquez votre image. Plusieurs possibilités s’offrent à vous :

- La version normale qui consiste à faire un clic droit sur le calque de notre photo et de cliquer sur “Dupliquer le calque…”.

duplication

- La version raccourcie qui consiste à appuyer sur le bouton Alt de votre clavier tout en cliquant avec votre souris (clic gauche) pour faire glisser la photo dupliquée. Vous verrez ainsi apparaître un second calque dans la rubrique “Calques” qui correspondra au nom de votre photo suivi du mot “copie”.

  • Sur votre photo dupliquée, allez dans la rubrique “Seuil” pour intensifier l’aspect noir et blanc. Essayez d’obtenir un juste milieu entre le noir et le blanc, il ne faut pas que la photo soit trop blanche. Il faut garder les contours du visages et les traits visibles pour optimiser le résultat final.

seuil

Voici le résultat :

seuil photo

Etape N°4

  • Sur ce même calque, appliquez le filtre “Esquisse” en choisissant “Trames de Demi-Teintes” (Filtre > Esquisse > Trames de Demi-Teintes). Dans les réglages, appliquez une Taille 1 et un Contraste de 50. Le Type est de type Point.

demi teinte

Voici le résultat :

demi-teinte photo

Etape N°5

Sur ce même calque, changez le mode “Normal”  en mode “Produit” et baissez l’Opacité à 25%.

mode produit

Voici le résultat :

photo mode produit

Etape N° 6

Aplatissez votre image, en évitant d’écraser votre ordinateur (jeu de mots Ramoutcho :) ), mais plutôt en suivant la flèche rouge comme indiqué sur l’image.

applatir

En cliquant sur la liste déroulante, cliquez sur “Aplatir l’image”.  Cela permet de réunir les deux calques en un seul.

un seul calque

Etape N° 7

Appliquez le filtre “Textures” dans la rubrique “Filtre”. Le Plaquage de Texture sera de type Toile, la Mise à l’échelle à 50%, le Relief à 6 et la Lumière en Haut droite. Vous pouvez néanmoins modifier ces données pour correspondre au mieux à vos attentes.

textures

Et voici le résultat final :

final

Vous pouvez ensuite mettre en situation votre image comme ci-dessous.

journal fin

NB : le résultat peut toujours être amélioré. Vous n’avez qu’à reprendre chacune des étapes en jouant sur les valeurs.

A vous de jouer maintenant !