En quelques slides, l'évolution du design Web au cours de ces dernières années. Comment les sites sont devenus plus attractifs et efficaces

1. Design Web
Les nouveautés de 2011...
Alain-Marie Carron
20 décembre 2011
conseilaction@gmail.com
vendredi 23 décembre 2011

2. L’humanité, non le Web, progresse...
À voir ce qui se passe en Syrie,
au Soudan, chez Poutine ou
Kim Jong-Il en cette fin d’année
2011, il semble douteux que
l’humanité progresse.
Mais le Web échappe à cette
fatalité; il s’améliore d’année en
année, en particulier pour ce qui
est du design, de l’ergonomie et
de l’architecture des sites
Internet.
• Hier, faute de moyens techniques
et d’expérience, le rendu
graphique était ... bizarre, comme
le montrent ces pages du jeu SIM
City 2000
vendredi 23 décembre 2011

3. Le Web abandonne (presque) les menus déroulants
• En 2003 j’avais fait pour Menus déroulants
RadioCanada une étude de 11 sites
d’information liés à de grandes
MSNBC TV
News
Business Top Stories
chaînes de télévision. Sports
Entertainment Business front page
Tech/Science Lighten up, road warriors
Health
• Le cauchemar de l’époque, c’était les Travel
Opinions
Bill would allow deductions for sales tax
Upbeat retail sales data lift Wall Street
menus déroutants, pardon,
Weather
Local News
Wash Post: Farmers savor the cappucino effect
Newsweek
déroulants. Today Show
Nightly News
Stewart : Prison is "what I expected"
Meet the press Oil prices hit 55$ a barrel
Dateline NBC
• Sur la page d’accueil de MSNBC il Multimedia American los confidence in October
News Video US Airways gets goahead to cut workers' pay
n’y en avait pas loin de 150... un faux
MSNBC
Shopping Sprint to cut 700 jobs, expect charge
Calssifieds
mouvement avec la souris et vous Newsbot
Search MSNBC:
Kraft reportedly to sell Life Savers, Altoids
Top Sections
étiez mort. Also on MSBC
Corrections
Stocks & Economy
Letters Personal Finances
Newsletters
• Sur ce schéma, je n’avais reproduit Campain 2004
Crossword
U.S. Business News
International Business News International Business News front Page
que les menus déroulants liés à la Comics
Horoscope
Sports scores
Oil & Energy News E.U. trade chief lashe out at "euro bashing"
section Business. NBC First Read
Gossip
Automotive News
CNBC TV
Caesars Entertainment betting in Britain
Stock quotes Report: Russia seeks sales of Yuko's assets
The week in Local Business
Norwegian, American win Nobel for economics
• Comparez avec le site de MSN
pictures
Fantasy sports Business Week
MSNBC Alerts Financial Times Highlights
aujourd’hui: http:// Winning getaways
Smarter business
Heart Health
Forbes
www.msnbc.msn.com/ Small Business
Special Reports
vendredi 23 décembre 2011

4. Et se libère de la dictature des listes
• Longtemps les sites riches en contenu ont eu beaucoup
de peine à concevoir une page d’accueil qui ne
ressemblerait pas à un annuaire téléphonique.
• Ci-dessous, l’exemple du site de Desjardins, la banque
la plus populaire au Québec, autour de 2009. La situation
s’est un peu améliorée depuis: http://
www.desjardins.com/fr/#
• Heureusement, à la même époque, des sites comme
celui du Figaro osaient se libérer de la dictature des listes
en découvrant les bienfaits de ce que l’on appelle les
blancs circulants.
vendredi 23 décembre 2011

5. Pour découvrir le charme de la ligne ronde
Autour de 2009 également, SiteStep,
comparateur de prix pour des vols et des
voyages (repris depuis par Kayak) applique
déjà quelques unes des règles qui
caractérisent un bon site aujourd’hui:
• chaque page est essentiellement consacrée
à une action, pas à 10.
• les boutons d’action sont peu nombreux,
dessinés en volume, et occupent les
meilleures places.
• le blanc circulant est partout, la page
respire.
• les couleurs sont gaies; on cesse de penser
que pour être pris au sérieux il faut avoir l’air
emmerdant.
• Les icônes, dessinées avec humour selon un
graphisme rond et très lisible, se multiplient.
• Des fonctions complémentaires sont comparez ce design à ceux qui suivent..
proposées en bas de pages, peu
nombreuses, bien séparées les unes des
autres.
vendredi 23 décembre 2011

6. vendredi 23 décembre 2011

7. vendredi 23 décembre 2011

8. vendredi 23 décembre 2011

9. Le dessin fait le décor
• De plus en plus de sites font une
large place au dessin et à des
icônes imaginatives mais très
parlantes
https://secure.vidyard.com/ http://www.navigant.com/
vendredi 23 décembre 2011

10. Contraste : en 2011, un design signé 2000
• Constat : il y en
a encore des
milliers comme
celui-là
• Excuse : quand
on travaille
dans la
Sécurité on
dédaigne les
guirlandes et
fantaisies des
«artiss»
http://www.globalsecuritymag.fr/
vendredi 23 décembre 2011

11. (Retour à 2011) Le Web cultive le papier et la typographie
• Dans les milieux les plus créatifs, le
Web 2011aime à se prendre pour
une feuille de papier et jouer sur la
typo.
• Un phénomène devient
omniprésent, l’infographie géante
avec une débauche de caractères
d’imprimerie
http://cognition.happycog.com/ http://thebolditalic.com
http://kilianmuster.com/
vendredi 23 décembre 2011

12. Vers 2012 : Déplacement horizontal/vertical
• La multiplication des touch screens, que
ce soient ceux des tablettes ou des
téléphones intelligents est en train de
faire du scrolling (désolé pour ce
jargonglish) une façon naturelle de
visiter un site.
• À l’opposé du site-web-liste-
téléphonique, le parcours de l’usager
est ici intuitif, quasi physique
• Comportant peu d’éléments, occupant
toute la page (une forme de fluid grid
est préférable) ces sites sont souvent http://www.thinkingforaliving.org/
spectaculaires et permettent aux
graphistes de prouver leur talent.
• Pratique pour les sites à faible contenu
textuel, où tout est sur la même page, le
procédé devient techniquement plus
délicat quand on veut marier à ce
premier écran un second niveau, riche
en textes.
• Ces sites sont «furieusement tendance»,
comme disent les journalistes de mode
http://www.ericj.se/
vendredi 23 décembre 2011

13. Vertical Horizontal
http://aboard-entrepreneurship.com/
http://deanoakley.com/
vendredi 23 décembre 2011

14. Magique, en 4 écrans
1
3
2
4
http://www.pojeta.cz/
vendredi 23 décembre 2011

15. Voir aussi sur SlideShare (@ Alain-Marie Carron) : Bâtir un site Web (2011), Petite revue
du Web (2009), De la ligne claire à la forme ronde (Webdesigntendances)
vendredi 23 décembre 2011