Les tendances du webdesign - Industrie.com

TENDANCES
WEB &DESIGN
2011/2012
by

SOMMAIRE
02
03
05
06
09
13
14
20
27
28
33
39
40
43
45
46
Sommaire
Introduction
Internet comme média traditionnel
1/ Les règles de base du marketing comme socle du
webdesign
2/ Les règles de base du webdesign
Internet un canal prioritaire de communication
1/ Des aspects graphiques
2/ Mettre l’utilisateur au centre
Internet le régime de l’ubimédia
1/ La technique : les contraintes et permissions
2/ De nouveaux usages et terminaux
Internet en constante évolution
1/ Entre immersion et interaction
2/ 2012 : une année charnière ?
Conclusion
Les auteurs

INTRODUCTION
« En Italie, pendant 30 ans, sous le règne des Borgia, il y a eu la guerre, la terreur, des meurtres et des bains
de sang. Cela a donné Michel-Ange, Léonard de Vinci et la Renaissance. En Suisse, ils ont eu la fraternité, cinq
siècles de paix et de démocratie, et qu’est-ce que ça a donné ? La pendule à coucou ! »
Cette réplique, tirée du film « Le troisième homme » de Carol Reed en 1949, illustre parfaitement la thèse de
Parag Khanna développée dans son livre « How to run the world ». Ce dernier a fait l’objet d’une chronique publiée
dans le New York Times en janvier 2011 intitulée « For a New Renaissance ». Nous pouvons la résumer en ces
mots : « c’est dans les périodes de chaos et d’incertitude que des bouleversements forts et vitaux interviennent.
Ce fut le cas en Europe il y a 6 siècles » : la Renaissance.
Pour l’auteur, nous pouvons comparer notre époque en Occident à celle du Moyen-Age qui a connu la peste noire,
les invasions mongoles, un schisme papal, les famines, les guerres de religion et de découpage des frontières
en Europe. Pendant ce temps, la Chine et l’Inde connaissaient leur âge d’or respectivement sous la dynastie
des Song et des Chola. Depuis, l’ordre des choses s’est inversé et ce grâce à une période d’intense créativité en
Occident.
C’est en effet pendant la Renaissance que les plus grandes œuvres artistiques, philosophiques et politiques ont
été réalisées et ce hors du « chaos ». Les créations, les inventions et les découvertes ont été déclenchées par
besoin et non par goût. C’est face à l’adversité que nous réagissons le plus justement.
Quels sont les facteurs qui ont permis de faire émerger cette période faste ? Selon Parag deux ingrédients sont
nécessaires : une révolution technologique et une psychologique. Aux XVème et XVIème siècles, ce fut l’invention
de l’imprimerie et la Réforme protestante. Aujourd’hui, nous vivons ou du moins commençons à vivre deux
bouleversements pouvant jouer ce rôle de déclencheurs : Internet et le néocapitalisme « responsable ».
Il est indéniable qu’aujourd’hui Internet est une révolution technologique et sociétale. Il a changé la façon dont
les hommes communiquent et créent. Tous les secteurs sont peu à peu touchés par ce media. Il est de droit de
se demander dans quelle mesure la création pour ce média est influencée par son environnement.
Dès la naissance du web et surtout depuis sa « démocratisation », il existe des tendances de fond dans le
webdesign qu’il ne faut pas ignorer. Pourtant, dans notre société consumériste, l’utilisation de leviers impliquant
le consommateur est nécessaire pour optimiser l’impact des créations.
De fait, l’enjeu majeur de la création graphique est de mettre en adéquation les contraintes et évolutions
techniques avec les habitudes et les attentes des internautes. Attentes qui ne risquent pas de baisser à la vue de
des échéances technologiques et « politiques » à venir.

INTERNET
COMME MEDIA
TRADITIONNEL
EntrE stratégiE MarkEting
Et aDoption DEs règLEs DE basE
DE La coMMunication

1/ Les règles de base du marketing
comme socle du webdesign
Comme l’affirme l’adage populaire, ce sont dans
les vieux pots que l’on fait les meilleures soupes. Se
référer à un grand auteur de stratégie pour réussir
n’est donc pas achronique. Selon Sun Tzu : « Je dis
que si tu connais ton ennemi et si tu te connais, tu
n’auras pas à craindre le résultat de cent batailles.
Si tu te connais toi-même sans connaître ton ennemi
tes chances de victoires et de défaites seront égales.
Si tu ne connais ni ton ennemi ni toi-même tu perdras
toutes les batailles. »
Nous pouvons adapter ce conseil à l’univers du
marketing : si tu connais ta cible et si tu te connais,
tu n’aurais pas à craindre le résultat de ta stratégie.
Si tu te connais toi-même sans connaître ta cible, tes
chances de victoires et de défaites seront égales. Si
tu ne te connais pas toi-même et si tu ignores à qui tu
t’adresses, tu perdras toutes les batailles.
‘‘
Avant de considérer un webdesign, il convient alors
d’entreprendre une introspection et une étude de
marché.
Qui sommes-nous ? Quelle est notre place sur le
marché ? Quelle est notre histoire en tant que société,
association ? Pourquoi disposer d’un site internet ou
pourquoi le refaire ? Découle-t-il d’une stratégie de
communication ? Est-il un canal de vente ? Quelles
sont les pratiques des autres entreprises dans le
même secteur ? Voici des questions essentielles qu’il
faut se poser dans une phase d’introspection.
Avant de s’attaquer à la cible en elle-même, il convient
de connaître à qui on est confronté sur le canal choisi,
ici internet.
Si tu ignores à qui tu t’adresses,
tu perdras toutes les batailles. ’’

Qui utilise internet ?
Selon l’étude Médiamétrie de décembre 2010, plus
de 38 millions de personnes âgées de 11 ans et plus
se sont connectées à Internet au cours du mois de
décembre soit 71,4% de la population. Le nombre
d’internautes progresse de 10% par rapport à
décembre 2009.
Toujours en décembre 2010, 34 393 000 internautes,
soit 96,5% des internautes à domicile, sont connectés
en haut débit. Cette population internaute progresse
de 15% par rapport à décembre 2009. Selon
l’Observatoire d’Ipsos, le profil des internautes perd
progressivement ses aspérités : la part des 50 ans et
plus est passée de 19% en 2005 à 26% cette année,
celle des CSP de 25% à 30%.
A la lecture de ces chiffres, on peut conclure qu’un
large spectre d’individus se connecte et utilise
internet : il n’est plus réservé à une élite financière
et technologique.
Pourquoi l’utilise-t-on ?
Selon Ipsos, les usages du Web se diversifient : 56%
des internautes se connectent désormais plusieurs
fois par jour (contre 48% en 2005) que ce soit pour
s’informer (services pratiques et actualités générales
augmentent de 12 points en 5 ans), échanger sur les
réseaux sociaux (54%),acheter (52%) ou simplement
se divertir : essor des vidéos en ligne (15% en 2005,
38% aujourd’hui) et de la consommation convergente
(TV, radio,podcast,…)
En 2011, on peut affirmer que toutes les couches de la
population utilisent internet et sont donc atteignables
via ce canal. La question essentielle est donc de
savoir où se trouve sa cible sur internet et quel est
son comportement sur ce media.
De plus, il faut aussi prendre en compte le fait que la
cible traditionnelle de la société n’est pas forcément
celle du site internet. En effet, dans une stratégie
de conquête de nouveaux marchés, se servir du
media internet (traditionnellement plus adopté par
les jeunes générations) pour recruter une cible plus
jeune implique d’adapter par exemple les messages
et les promesses.
C’est seulement à partir des réponses à ces questions
que les fondations du site internet peuvent être posées
et que l’on peut commencer à se poser la question du
webdesign.

données ipsos

2/ Les règles de base du webdesign
Toute personne qui s’inscrit dans une démarche de construction de site internet et donc de design web doit
prendre en compte certains facteurs pour réussir. En termes de graphisme web, il existe un ensemble de règles
qu’il faut respecter pour optimiser ses chances de succès et l’expérience utilisateur des internautes.
La première et mère des contraintes pour un design web est la taille de l’écran ou plus exactement la résolution.
Traditionnellement et statistiquement, la taille retenue est 1024X768. Le bon sens ainsi que les études sur le
comportement des internautes face à une page d’un site internet relèvent que les éléments importants de la
page du site doivent être visibles au premier coup d’œil. C’est la règle des points chauds et le respect de la
ligne de flottaison. Les parties de la page devant être mises en avant doivent être présentes à quatre endroits
stratégiques placés tout au long du parcours de l’œil quand il la parcourt.
Seulement 28% des internautes lisent les contenus. Il faut donc mettre en avant les éléments importants sur une
page internet. (étude Nielsen)
© monabanq
© monabanq

Même si les équipements ont évolué et la résolution des écrans a augmenté, cette règle permet de construire
une page web équilibrée et efficace (dans des logiques de recrutement ou de présentation des éléments de
navigation)
Afficher une page internet sur plusieurs écrans n’est plus un problème : les internautes n’ont plus peur de
faire défiler l’écran et la généralisation des roulettes sur les souris ou trackpad est pour beaucoup dans cette
avancée. Il s’avère même que certains internautes préfèrent visualiser ce qui se trouve au « 2ème écran », sous
la ligne de flottaison justement….
Privilégier la page d’accueil du site par rapport aux autres est aujourd’hui une erreur. L’internaute peut entrer
sur un site par n’importe quelle page et ce grâce aux moteurs de recherche ou des renvois sur d’autres sites
(trackback entre blog par exemple). Il faut donc porter autant d’attention au design des autres pages et notamment
à l’accessibilité de l’information sur ces pages « secondaires ».
Un autre paramètre à prendre en compte est celui de la rapidité d’affichage des pages. Il faut veiller à ne pas les
surcharger avec des éléments graphiques nuisant à la fluidité du parcours « client » (et accessoirement disposer
d’un bon hébergement). De cette règle en découle une autre : le nombre de clics pour accéder à une information
importe peu. En réalité c’est le temps d’accès pour arriver à cette information qui compte : à partir du moment
où le parcours est clair et que l’information est obtenue, le nombre de clics importe peu.
Toujours dans un souci de clarté et de rapidité de lecture, il faut faire aussi attention à l’interlignage des textes.
La difficulté réside en trouver le bon dosage entre un texte avec beaucoup d’espace (qui facilité la compréhension)
et un interlignage serré (qui facilite la rapidité de lecture).
‘‘ Le nombre de clics pour accéder
à une information importe peu. ’’

Cet outil (browsersize dans Google Labs) permet de connaître le pourcentage des visiteurs pouvant visualiser les différentes
zones d’un site web sans avoir à faire défiler la barre d’ascenseur. N’importe quel site peut être analysé..
© browsersize de googlelabs

INTERNET,
UN CANAL
PRIORITAIRE DE
COMMUNICATION
EntrE stiMuLation
DE L’inconsciEnt coLLEctif
Et iMpLication Du consoMMatEur

1/ Des aspects graphiques
Vous n’avez pas besoin de ce livre blanc pour apprendre que les bouleversements financiers depuis 2009 ont
changé aussi bien la structure de notre système que notre rapport à ce dernier. Le climat social n’est ni celui
des trente glorieuses ou celui de la Belle Epoque. Nous avons besoin d’être rassurés par des valeurs sûres car
porteuses d’espoir. La nouveauté n’est malheureusement pas considérée comme fiable.
Là où en 2010, le Pantone Color Institute consacrait la couleur turquoise comme couleur de l’année, en 2011,
c’est le rose foncé chèvrefeuille qui monte sur le podium. Le turquoise symbolise le voyage, le rêve, première
réaction normale suite à la crise connue les mois précédant ce choix. Le rose foncé symbolise quant à lui un
retour à la réalité : il instille la confiance et le courage nécessaires pour affronter une crise qui dure et qui nous
touche de plus en plus. « Le rose foncé chèvrefeuille est une couleur captivante, stimulante qui fait monter
l’adrénaline. Rien de tel pour éviter le vague à l’âme. »
PANTONE 18-21200 TCX
Honeysuckle
#cc6687
r=204 V=102 b=135
c=19 M=71 J=24 n=0
Palette de couleur web pour l’année 2011

Toujours dans un souci d’assurance, le défi pour 2011 est de mettre en scène des lignes pures et sobres dans
un décor coloré. L’utilisation de couleurs pastel n’est pas agressive pour l’œil de l’internaute : on le guide dans
sa recherche d’information sans lui en coller plein les yeux.
© quatzuki © alterway
© groupon © foursquare

Le retour en force du retro est aussi un symptôme de cette volonté d’être rassurés par des valeurs sûres. L’espoir
de revoir les Inconnus ou les Nuls réunis ainsi que le succès de la tournée des Yéyé participent de cet effet de
mode. En termes de graphisme, on peut dire que la patte graphique des années 50/60 fait son retour. Les années
d’après-guerre sont le début des trente glorieuses et amènent l’avènement de la prépondérance américaine
dans le monde occidental via les arts et la consommation. De fait, le monde occidental est abreuvé par des
campagnes de publicité / communication qui sont restées dans l’inconscient collectif.
C’est aussi le début de la consommation de masse. Les principes marketing des produits de première
consommation, notamment celui de l’emballage, étaient encore simples, rappelant l’univers des rations distribuées
lors du conflit. L’emballage est monochrome voire bi-chromatique avec le nom du produit écrit en gros, allégé
de toute autre indication. Pour éviter la monotonie de lecture, plusieurs points graphiques accrocheurs doivent
être définis à l’aide de la typographie de type « bâtons ». En résumé, la simplicité, l’authenticité et le vrai sont
les mots d’ordre de la charte graphique de ce monde. Plusieurs enseignes ont déjà utilisé ces codes dans leur
campagne de publicité : McDonalds et Monoprix par exemple.
© monoprix

© mc donald’s france
‘‘ La simplicité, l’authenticité et
le vrai sont les mots d’ordre. ’’

Pour pouvoir décliner ce genre de typographie sur le web, il existe plusieurs solutions pour utiliser des polices
non navigateur : des scripts Javascript ou Typekit, Fontdeck et le CSS3. Sinon le recours à des images reste
toujours une solution, avec ses inconvénients. En effet, en cas de site multilingue, il faudra créer autant d’images
de textes que de langues et les pages seront alourdies.
© fortyseven media © lather bee rich
© torpedo juice
Les polices navigateurs
Quand vous utilisez une police dans
une page web, elle ne s’affichera que si
l’internaute a la même police installée
sur son ordinateur.
Il faut donc faire « au mieux »,
c’est-à-dire spécifier des polices (en
espérant qu’elles seront présentes),
et spécifier d’autres noms de polices
alternative (si possible proches de celle
que vous souhaiteriez).

D’autres références peuvent aussi être utilisées. N’oublions pas que les années 50/60 sont la consécration des
figures célèbres telles que les pinup, les comédiens (John Ford), etc… La personnification d’un mouvement
artistique par une figure emblématique fait partie de la patte graphique et peut être reprise aujourd’hui dans
les headers des sites. L’utilisation des gros headers n’est plus contre-indiquée : l’espace permet d’afficher des
visuels clairs et simples expliquant l’objet du site.
Images versus référencement
Afin d’optimiser le référencement
naturel, il est fortement conseillé
de laisser un maximum de textes
en version texte plutôt que de les
transformer en image.
C’est le cas pour les titres de pages, de
section et autres éléments structurant
votre site internet.
© marie catrib’s
© all star lanes © team fanny pack

2/ Mettre l’utilisateur au centre
Une fois l’internaute rassuré et son inconscient attendri, les leviers l’impliquant doivent être correctement amenés
sur la page : le contenu à haute valeur ajoutée doit être visible. Pour y parvenir, rien de magique, simplement de
la technique.
Tout bon webdesigner doit garder à l’esprit que le style minimaliste n’est pas un gros mot. Même s’il n’est pas
nouveau (Google a choisi cet axe depuis sa création), sa consécration est réelle. Ce style permet de mettre en
avant le contenu de la page plutôt que le design en lui-même. Seuls les éléments vitaux sont conservés ; le reste
étant renvoyé aux autres pages voire supprimé. La règle du 60% d’espace blanc est encore plus d’actualité pour
ne pas gêner la lisibilité : c’est la façon dont on organise les espaces vides dans la page qui va faire ressortir les
éléments de contenus importants aux yeux de l’internaute.
© google © h4-valorisation
‘‘ Le contenu à haute valeur
ajoutée doit être visible. ’’

Toutefois, la création de cet univers minimaliste n’est pas si simple. Un des moyens pour y arriver est de s’inspirer
du domaine de l’enfance. Pourquoi ? Les produits conçus pour des enfants sont censés être attrayants et simples
d’utilisation (non pas simplistes). Ils sont pensés pour que les enfants les utilisent intuitivement comme prévus.
Concevoir un design d’un site internet minimaliste efficace passe alors par une réduction du nombre de points
d’ancrage de l’information : très peu de colonnes, des gros titres, des gros boutons d’action et des couleurs très
vives et contrastées. On peut aussi avoir recours à des cartoons et à des pictogrammes de grandes tailles et
personnalisés plutôt qu’à des photos pour retenir l’attention des visiteurs.
© 3620 © cornac
© veboo labs © shout

Outre la mise en avant du contenu, il faut aussi optimiser le parcours utilisateur d’un internaute. Il ne faut pas
oublier que la montée des réseaux sociaux et plus particulièrement celle de Facebook et Twitter a modifié la
façon d’utiliser le net. L’internaute lambda de 2011 n’utilise plus le net de la même façon qu’en 2000 et ce
majoritairement grâce à son appropriation de l’outil.
Le contenu sur les sites internet actuellement n’est plus seulement celui proposé par l’éditeur. C’est aussi l’UGC,
le User Generated Content. Ces contenus prennent diverses formes : des commentaires, des notes, des profils,
des posts, des tweets, etc… et peuvent provenir de plusieurs sources (le site en lui-même, les réseaux sociaux).
De fait, l’interaction avec les consommateurs / internautes prend autant de place que le contenu « officiel » sur
une page internet. Il faut donc prévoir un design à la fois original mais aussi flexible et adaptatif pour pouvoir
intégrer ces flux. Les grands réseaux sociaux participent à cette dynamique et s’intègrent désormais facilement à
tout processus d’inscription, de fidélisation et de participation sur un site existant via des API : Facebook Connect
et oAuth pour ne citer qu’elles.
© harlequin
‘‘
Le contenu des internautes prend
autant de place que le contenu « officiel »
sur une page internet. ’’

L’intégration de ces dynamiques s’est d’abord faite en reprenant les codes graphiques des éditeurs des API. Ainsi
la box d’une page Facebook était très peu personnalisable et pouvait dénoter avec la charte graphique du site en
place. Désormais cette box est personnalisable et se fond dans la page internet pour en faire totalement partie.
Twitter permet de personnaliser à l’extrême son contenu récupéré en format brut via son API et via des flux RSS.
Ainsi, les tweets peuvent être utilisés pour servir tout type de but graphique et fonctionnel. Quelques exemples :
Twittervision.com ou Twitspy.com affichent les tweets en temps réel sur une carte du monde, Twitterfox permet
d’afficher dans un plugin pour Firefox les tweets de vos followers.
© harlequin © old loft
© owni © twittervision

Toujours dans un souci d’amélioration du parcours de navigation, les gros footers sont revenus en grâce et
ce pour plusieurs raisons. Ils sont apparentés à des mini plans de site et de fait guident l’internaute dans sa
découverte du site en lui présentant une arborescence claire de ce dernier. Ces mega footers servent également
de navigation secondaire lorsque la page est étendue verticalement : l’internaute n’a pas besoin de revenir en
haut de page pour poursuivre sa navigation. Au-delà de toute aspiration à l’amélioration de l’expérience utilisateur,
les footers sont aussi un moyen d’optimiser le référencement et faciliter le travail des robots d’exploration.
© yodiv © bedeo
© vsplash © apple

‘‘ Un bon référencement sur
Internet est essentiel puisque
« 34% des internautes
cliquent sur le premier
lien naturel d’une page
de résultats » préférés,
commerciaux ou non. ’’
© wikipédia

INTERNET
LE REGNE DE
L’UBIMEDIA
EntrE réVoLutions tEcHnoLogiquEs
Et MuLtipLication DEs usagEs

1/ La technique : les contraintes et
permissions
La création graphique web a toujours été limitée par des contraintes techniques découlant du terminal de lecture
final. La contrainte absolue est celle du débit de connexion : avant que l’ADSL ne soit démocratisé, les connexions
RTC étaient la norme. Avec une vitesse ne dépassant pas les 56ko/s, les webmasters ne pouvaient se permettre
de surcharger leur site avec du design gourmand en bande passante. Paradoxalement, ce fut l’époque des GIF
animés et autres boutons générés automatiquement par Frontpage…
© the-chocolate-cat.

Une autre contrainte, plus pernicieuse, est celle liée aux navigateurs internet et plus exactement celle de
l’interprétation des standards web (HTML, CSS et autres JavaScript). Cette différence dans l’interprétation des
langages pose vraiment problème pour le webdesign. La façon dont il est affiché sur l’écran de l’internaute
peut différer selon le navigateur, voire l’OS (Operating System). Cette difficulté peut bloquer le webdesigner,
l’intégrateur et le développeur dans l’optimisation de leur site. L’utilisation du Javascript pour améliorer
l’expérience utilisateur est aussi soumise à ce même genre de contraintes.
© newquest

On a cru pendant un temps que l’avènement de Flash viendrait alléger la croix des webdesigners. En effet, cette
technologie permet une création graphique quasi sans limite. Ce ne fut malheureusement pas le cas. Le Flash
n’est pas aussi souple et accessible que PHP. Il n’est pas du tout optimisé pour un référencement naturel, la
pierre angulaire du net des années 2000, est gourmand en ressources et n’est ni multi-plateforme (notamment
sur les mobiles), ni libre…
© louis vuitton
‘‘ Flash ne permet pas le
référencement naturel et
n’est pas multi-plateforme ’’

La finalisation de HTML 5 et surtout de CSS 3 permet de faciliter le travail des designers en intégrant des effets
sans surcouche de langages externes :
• L’utilisation de police non navigateurs
• L’arrondissement des blocs en full CSS
• Les bordures et ombrés sur les blocs ...
© babylon design

Côté JavaScript, il existe depuis quelque temps des librairies d’effets optimisées pour tous les navigateurs :
jQuery et Scriptaculous pour ne citer qu’elles. Par exemple, elles permettent d’inclure facilement dans le parcours
de navigation de l’internaute des Lightbox jouant le jeu des anciennes Pop-up ou alertes JavaScript avec plus de
style et sans faire quitter le site internet (aucune nouvelle fenêtre n’est ouverte).
©istock © digg
La maturation du HTML5 participe et permet de participer de la nouvelle tendance : la transversalité. Aujourd’hui
le web est multi-terminal.
Un internaute n’est plus seulement à son bureau, devant son écran d’ordinateur en train de cliquer sur sa souris
pour consulter des pages internet. Il peut être dans la rue en train de pianoter sur son Smartphone, dans le métro
avec sa tablette sur ses genoux, voire dans son canapé avec un clavier sans fil pour surfer sur son téléviseur.
Un même site devra alors disposer de plusieurs designs et plusieurs expériences utilisateurs adaptés au terminal
final de lecture : version wap / web / mobile / Smartphone / tablette. A chaque support, son consommateur et sa
consommation.
La multiplication de ces terminaux et par extension de ces usages est la grande tendance à prendre en compte
pour 2011 et 2012 : on passe du web de la page internet à celui des applications.
‘‘ A chaque support,
son consommateur et
sa consommation. ’’

2/ De nouveaux usages et terminaux
Cette vision applicative du web peut être résumée en ces termes : je veux avoir ce que je cherche au moment où
j’en ai besoin. Aujourd’hui, internet est avant tout un outil facilitant la vie quotidienne dans tous les domaines.
L’époque des sites vitrines servant uniquement de faire-valoir aux entreprises est révolue. Un site internet
doit être accessible, compréhensible et utile. On peut dire que le web entre dans un nouveau paradigme, celui
de l’application. Le succès des sites suivant le credo 1 site = 1 service ainsi que l’émergence des App Stores
témoignent de ce phénomène.
Les années 2000 ont été celles des sites portails sur lesquels l’internaute pouvait retrouver tout ce que l’éditeur
estimait nécessaire: des news, un webmail, la météo, le programme télé etc. C’était l’axe choisi par les grands du
web comme Yahoo, Altavista, Lycos ou encore les portails de nos FAI (Wanadoo, Free, Neuf,…).
© yahoo - 2000 - via web.archive.org © wanadoo - 2000 - via web.archive.org
‘‘
On passe du web de la
page internet à celui des
applications. ’’

La donne a quelque peu changé aujourd’hui. L’internaute a été éduqué et sait vers quel site s’orienter pour
satisfaire son besoin, notamment grâce au « réflexe google ». C’est dans ce contexte que l’on connaît le succès
à la fois des plates-formes aggrégatrices de contenus personnalisables par l’internaute (Igoogle, Netvibes) et
des sites à « usage unique » dont le contenu est exportable sur ces plates-formes (via des widgets et /ou des flux
RSS).
© igoogle © netvibes
Un site internet est désormais conçu comme un produit dont l’objectif est la satisfaction d’un besoin et non plus
de multiples besoins. Si j’ai besoin d’une adresse ou d’un numéro de téléphone, je vais sur le site des pagesjaunes
/ pages blanches. Si je veux networker, je vais sur Facebook ou Viadeo. Si je veux faire du shopping, je vais sur
Cdiscount, laredoute ou rueducommerce.
Le site est alors une application au service du consommateur : j’ai un besoin, un site comble ce besoin, je le
consomme et je reviens si j’ai été satisfait..
Plus concrètement, l’arrivée des App Stores aussi bien pour les navigateurs internet que pour les OS (mobiles et
fixes) consacre cette lancée. Le premier navigateur à proposer un App Store ou du moins un espace regroupant
des extensions a été Firefox. Le second a emboîter le pas a été Google Chrome en proposant son Chrome store
dans lequel on peut aussi trouver de véritables applications tournant dans le navigateur. Par exemple, l’application
Tweetdeck peut être installée et ressemble aussi bien au niveau graphique que fonctionnel à l’application de
bureau.
Le même phénomène se produit aussi avec Facebook qui propose un environnement de production d’applications
pour venir enrichir ses fonctionnalités (jeux, extensions « sociales » de sites existants).

Dans le monde des mobiles ou plus exactement celui des app phones, les App Stores sont la pierre angulaire
du système. D’un point de vue technique, les éditeurs ont choisi de créer des programmes pour chaque plateforme
plutôt que de développer une version mobile. La raison ? Tirer parti au mieux de chaque plate-forme.
L’expérience utilisateur ne doit pas être différente mais adaptée selon le support.
Quelles sont les différences majeures entre un PC et un terminal mobile ? L’écran aussi bien au niveau de la taille
et de la résolution, la prise en main et la mise en situation.
Un téléphone ne se pose pas sur un bureau : il se tient à une main pendant que l’autre interagit avec ou alors les
deux mains le tiennent et on l’utilise avec les pouces. Une tablette peut se poser sur une table mais aussi sur
les genoux. Dans les deux cas, il n’existe pas d’environnement aussi stable que celui du bureau avec une chaise.
Ces contraintes doivent être prises en compte dans les réalisations graphiques et ergonomiques d’application
mobile. Tout tourne autour de la taille de l’écran ainsi que de sa résolution. Chaque OS offre une résolution voire
deux. Chaque machine dispose de sa propre taille d’écran. Pour être effectif, chaque design doit être donc pensé
pour chaque OS et machine.
Un app phone
C’est un smartphone à base
d’iOs, d’Android ou d’un
autre système d’exploitation
mobile intégrant un App Store
permettant d’installer des
applications venant ajouter des
fonctionnalités au téléphone.
© androïd market

C’est ainsi qu’aujourd’hui de nombreuses applications Iphone disposent d’une version iPhone 3 et 4 et d’une
version iPad. L’iPhone 4 offre une résolution plus importante que l’iphone 3 ou Ipad mais la taille de l’écran de
ce dernier permet d’interagir différemment et plus facilement avec le contenu affiché.
On ne peut parler de tablette ou d’app hone sans parler d’écran tactile et de multi-touch. Rendons à César ce
qui est à César : si Apple n’avait pas réussi à maîtriser aussi bien cette technologie, nous n’aurions pas cette
avalanche aujourd’hui. Pour rappel, un écran tactile est un écran qui permet une interaction entre ce qu’il affiche
et les doigts de l’utilisateur. Le multi-touch permet d’aller plus loin : l’utilisateur peut interagir avec plusieurs
doigts et plusieurs mouvements avec ce qui est affiché à l’écran. Par exemple, pincer l’écran pour zoomer,
balayer de droite à gauche pour revenir en arrière,… Cette reconnaissance tactile offre beaucoup de possibilités
en termes d’expérience utilisateur face à un service.
De fait, le design web peut en tirer profit pour l’ergonomie. Le graphisme web « mobile » doit être constitué de
gros boutons, le défilement ne se fait pas obligatoirement par une barre mais aussi par des gestes de balayage,
la sélection d’un objet d’une liste se fait par appui dessus plutôt qu’en cochant une ligne, recharger une page en
secouant l’appareil, etc.
© dismoioù
© facebook

Autre évolution majeure, la vitesse de connexion à internet ne joue qu’un rôle secondaire dans l’univers des
applications mobiles. En effet, elle ne sert qu’à récupérer les données et non plus à charger l’interface d’utilisation
du service. On peut alors se permettre de « charger » l’environnement avec des images et autres boutons.
Cette pratique change la façon dont un site internet ou plus exactement un service sur le net est conçu. Le
contenu du service est stocké dans une base de données existante qui devient le socle commun à toutes ses
différentes versions. C’est ainsi que l’on peut récupérer ses fichiers de Dropbox depuis n’importe quel terminal
disposant de l’application ou que l’on peut consulter son Facebook ou son Twitter de n’importe où.
Dans une moindre mesure pour le moment, ce phénomène App Store est présent sur nos machines fixes. Apple,
encore une fois, prend les devants en proposant un App Store pour son OS fixe. Microsoft devrait emboîter le pas
rapidement. Google quant à lui est déjà dans les starting-blocks via son chrome store qui est l’embryon du store
pour son OS nouvelle génération, Chrome.
‘‘
Le site est une application
au service du consommateur :
j’ai un besoin, un site comble ce
besoin, je le consomme et je reviens
si j’ai été satisfait.. ’’

INTERNET
EN CONSTANTE
EVOLUTION
EntrE DétournEMEnt DEs usagEs
Et récupération par LEs spHèrEs
traDitionnELLEs

1/ Entre immersion et interaction
Le web de papa et maman va passer l’arme à gauche sous peu… Comme nous l’avons vu précédemment,
l’utilisation d’internet a fortement évolué depuis les 15 dernières années. L’internet des sites est peu à peu
supplanté par celui des applications et ce du fait des avancées techniques et des besoins des consommateurs.
Le cloud est la consécration de ce web des applications.
Concrètement, ce cloud ou information dans les nuages, permet de disposer d’une plate-forme évolutive et
très performante pour héberger des données. Prévue comme base des futurs systèmes d’exploitation (Google et
Microsoft aux dernières nouvelles), mise à l’honneur par les plus grands analystes et commercialisée sous forme
d’offre par les plus grands acteurs du web (comme Amazon), cette voie semble celle choisie à moyen terme.
D’un point de vue graphique, celui-ci confirme les points abordés précédemment. Les designers ne vont plus
avoir les mêmes contraintes : ils vont devoir quasi exclusivement se soumettre à des best practices selon le
support et les usages.
De nouvelles formes d’interaction avec les terminaux de lecture permettront d’imaginer des créations graphiques
innovantes non autorisées auparavant. La popularisation de la 3D et de la réalité augmentée laissent notamment
présager aussi un bel avenir à la créativité.
© métro paris

© atol

Il est clair que la part de création de sites internet purs par rapport à celle d’application web se réduira.
Paradoxalement, nous assistons à un retour aux débuts de l’informatique où les applications étaient développées
pour des plateformes spécifiques. Internet avait installé une universalité d’accès aux contenus : avec n’importe
quel terminal, toute personne pouvait accéder à un site internet avec une adresse unique. Aujourd’hui, c’est le
phénomène inverse qui se produit : à chaque terminal son application.
Quelles normes seront adoptées ? Quel géant sortira vainqueur de cette standardisation du web applicatif ?
Quels nouveaux usages apparaîtront ?
‘‘
Quelles normes seront
adoptées ? Quel géant sortira
vainqueur de cette standardisation
du web applicatif ? Quels nouveaux
usages apparaîtront ? ’’

2/ 2012 : une année charnière ?
Sans être Nostradamus, nous pouvons prévoir des grandes tendances pour la fin d’année 2011 et 2012.
2012 sera peut-être l’année de la fin du monde mais elle sera avant tout une année d’élection à forts enjeux : les
Etats-Unis, la France et la Russie vont élire leur président.
Qui dit élections dit campagnes électorales (du moins aux Etats-Unis et en France) et donc campagne de
communication sur le net. On peut alors s’attendre, à l’image de ce qui s’est passé en 2007 et 2008, à une
explosion de la créativité des usages et des créations graphiques à proprement parler.
En effet, ce fut pendant ces campagnes que le potentiel d’Internet et plus exactement celui des réseaux sociaux
a été démontré dans la mobilisation des électeurs et le financement des candidats.
D’autres facteurs vont amplifier cette tendance de fond :
• Tous les regards seront tournés vers les élections américaines
• La génération la plus active sur le net entre dans une période de maturité politique
• Le journalisme traditionnel sait utiliser le web comme amplificateur
• Le net est devenu un canal de communication incontournable pour les politiques et ils se doivent de le maîtriser
• L’appropriation des usages venant de Twitter, de Facebook ou encore Foursquare (mise à jour de statut,
géolocalisation, expression libre,…) est une réalité
• Des initiatives citoyennes comme la géolocalisation des bureaux de vote (grâce à OWNI) ont été réalisées.
© obama2012

La toile se politise dans le sens démocratique du terme : elle devient un espace à part entière de communication
et d’expression libres.
Pourtant des tensions s’éveillent. Par nature, Internet est difficilement contrôlable et l’appropriation par la
population de cet outil n’est donc pas nécessairement perçu comme bénéfique par les autorités traditionnelles
de nos sociétés. Les deux affaires WikiLeaks puis les révolutions en Tunisie, Egypte et Lybie ont démontré
qu’Internet peut jouer un rôle décisif dans la révélation d’informations et l’accompagnement des masses. Internet
est incontestablement un moyen de l’activisme politique et un de ses symboles les plus forts.
C’est dans cette ambivalence que l’année 2011 va se finir et que 2012 va débuter. Entre élections politiques à
enjeux importants, instabilités politiques en Afrique du Nord potentiellement contagieuses aux pays voisins et
spectre de la crise, l’état d’esprit mondial ne va pas être au beau fixe. Puisque c’est ce dernier qui est analysé
par Pantone pour établir sa couleur de l’année, nous pouvons penser que la palette couleur de 2012 sera celle du
réconfort. Parmi laquelle nous pouvons trouver des tons de vert et de bleu foncé (denim).
© wikileaks

Conclusion
‘‘
Que ce soit en termes de
créativité ou d’inventivité, le web
offre un espace d’expression quasi
infini. Les contraintes et les limites
sont définies par des éléments
techniques, politiques et sociétaux
à un instant T, le plus souvent
arbitraires. Le web pourra-t-il
devenir un « cloud », libre au-dessus
et indépendant des Etats ? ’’

LES AUTEURS
Quentin Nichini
>> Chef de projet web senior
Après des études à Sciences Po Aix en mention Entreprise et une spécialisation en
Intelligence Economique, Quentin Nichini a collaboré aussi bien avec des acteurs
publics que privés sur des réalisations de sites (réseaux sociaux locaux, intranet,
extranet, blogs, sites institutionnels et mobiles) et des campagnes de communication
online (événementiel, lancement de produits, etc.) en tant que responsable
webmarketing, chef de projet et community manager.
Il gère une équipe de 3 chefs de projet et a rejoint l’équipe Alter Way Creative en
janvier 2011.
Christophe Sadowski
>> Directeur artistique
Christophe Sadowski est arrivé chez Alter Way Creative en 2007. Il a designé tous les
sites produits par la société depuis cette date, parmi lesquels :
• C dans l’Air (France Télévisions)
• JEC Composites
• Lecture-Academy (Hachette)
Il est également à l’origine de la charte graphique de nombreux clients
(logos / charte / plaquettes...) comme :
• Data Base Factory
• H4, groupe EDF
Il gère une équipe de 3 infographistes.
ALTER WAy
Alter Way est né en 2006 d’un pari ambitieux : celui de créer un acteur industriel
de l’Open Source, capable d’accompagner et de contribuer à la stimulation de cet
écosystème innovant et en évolution constante.
Forte de 5 métiers complémentaires, la société créée par Véronique Torner et Philippe
Montargès a su fédérer des experts du développement applicatif, de la formation,
de l’hébergement, de la communication et du webdesign pour proposer une offre
complète, modulaire et adaptée à des besoins mouvants et devenir ainsi l’opérateur
de services open source que la maturité du marché exigeait.
• Consulting : Conseil, audit et industrialisation
• Creative : Agence de communication orientée web et studio graphique
• Formation : Accompagnement au changement et formation aux outils de
l’Open Source
• Hosting : Offre d’hébergement à haute valeur ajoutée et disponibilité
• Solutions : Développement, intégration, infogérance et TMA
Licence Creative Commons Paternité - Pas d’Utilisation Commerciale - Partage des Conditions Initiales à l’Identique 3.0 Unported.
by