Your SlideShare is downloading. ×
  • Like
Design Web Nouveautes 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Design Web Nouveautes 2011

  • 557 views
Published

En quelques slides, l'évolution du design Web au cours de ces dernières années. …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
557
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Design Web Les nouveautés de 2011... Alain-Marie Carron 20 décembre 2011 conseilaction@gmail.comvendredi 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 2000vendredi 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 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. 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