Design Web        Les nouveautés de 2011...        Alain-Marie Carron                                                     ...
L’humanité, non le Web, progresse...     À voir ce qui se passe en Syrie,     au Soudan, chez Poutine ou     Kim Jong-Il e...
Le Web abandonne (presque) les menus déroulants     • En 2003 j’avais fait pour                                           ...
Et se libère de la dictature des listes     • Longtemps les sites riches en contenu ont eu beaucoup       de peine à conce...
Pour découvrir le charme de la ligne ronde       Autour de 2009 également, SiteStep,       comparateur de prix pour des vo...
vendredi 23 décembre 2011
vendredi 23 décembre 2011
vendredi 23 décembre 2011
Le dessin fait le décor        • De plus en plus de sites font une          large place au dessin et à des          icônes...
Contraste : en 2011, un design signé 2000     • Constat : il y en       a encore des       milliers comme       celui-là  ...
(Retour à 2011)        Le Web cultive le papier et la typographie     • Dans les milieux les plus créatifs, le       Web 2...
Vers 2012 : Déplacement horizontal/vertical     • La multiplication des touch screens, que       ce soient ceux des tablet...
Vertical	 	 	 	 	 	 	 	 	 Horizontal       http://aboard-entrepreneurship.com/                                            ...
Magique, en 4 écrans                                           1                                               3          ...
Voir aussi sur SlideShare (@ Alain-Marie Carron) : Bâtir un site Web (2011), Petite revue      du Web (2009), De la ligne ...
Prochain SlideShare
Chargement dans…5
×

Design Web Nouveautes 2011

874 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
874
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Design Web Nouveautes 2011

  1. 1. Design Web Les nouveautés de 2011... Alain-Marie Carron 20 décembre 2011 conseilaction@gmail.comvendredi 23 décembre 2011
  2. 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 2000vendredi 23 décembre 2011
  3. 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 Yukos 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 Reportsvendredi 23 décembre 2011
  4. 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. 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. 6. vendredi 23 décembre 2011
  7. 7. vendredi 23 décembre 2011
  8. 8. vendredi 23 décembre 2011
  9. 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. 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. 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. 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. 13. Vertical Horizontal http://aboard-entrepreneurship.com/ http://deanoakley.com/vendredi 23 décembre 2011
  14. 14. Magique, en 4 écrans 1 3 2 4 http://www.pojeta.cz/vendredi 23 décembre 2011
  15. 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

×