Web Design : l'année 2013 est consacrée au CSS3

Web Design : l'année 2013 est consacrée au CSS3
et à une utilisation intensive du responsive web design

Que doit faire ou connaître un web designer pour être à la mode cette année 2013 ? Dans un billet de blog, Thom Philips exprime ce qui, pour lui, sera en vogue côté web design cette année.

Sans surprise, le responsive design est à l'honneur. De plus en plus de périphériques mobiles font irruption dans notre quotidien et, sans cette solution ingénieuse, les développeurs devraient être amenés à produire un code différent pour chaque périphérique cible de leur application. Dans le domaine, Zurb s'impose d'après le blogueur comme leader incontesté.

http://www.developpez.com/public/images/news/rswd.jpg

Le développeurs auront recours à l'effet de transparence offerte par CSS3 pour gérer des éléments de leurs pages web. L'utilisation de cette dernière permet de réduire le nombre d'images que les développeurs intègrent dans leurs pages web pour obtenir le même effet, ce qui a comme conséquence d'améliorer les temps de chargements.

http://www.developpez.com/public/ima.../css3trans.jpg

De plus avec les facilités qu'offre le CSS3, en 2013, les développeurs opterons pour des pages avec des éléments aux coins arrondis pour des sites web encore plus beaux

http://www.developpez.com/public/ima...urvedesign.jpg

La barre de défilement infini devrait envahir de nombreuses pages et sites web. D'après Thom, elle sera très à la mode.

http://www.developpez.com/public/ima...infinitevs.jpg

L'autre tendance en vogue pour l'année 2013 c'est la présentation de tous les produits d'entreprises, directement sur leurs pages d'acceuil. Cette pratique permettra à ces dernières de captiver l'attention de plusieurs clients potentiels, et de maximiser ainsi leurs profits.

http://www.developpez.com/public/images/news/spot.jpg

Le blogueur prévoit que davantage de sites web opteront pour un design mettant l'intégralité de leurs contenu dans une page unique. De plus, on devrait aussi avoir une augmentation significative du nombre d'API open source.

http://www.developpez.com/public/ima...opensrcapi.jpg

Les codes QR que l'on rencontre souvent sur des produits d'imprimeries comme les livres, devront envahir la toile en 2013. Pour Thom Philips, ils peuvent simplifier le processus de géolocalisation. Pour lui, les développeurs peuvent y stocker des informations utiles (numéros de téléphone, adresse mail, emplacement d'une boutique etc) qu'un utilisateur mobile peut exploiter à l'aide d'un scanner QR pour trouver rapidement ce qu'il désire.

http://www.developpez.com/public/images/news/qrcode.jpg

Fortement présents sur la toile, l'utilisation des badges devrait s'accroître cette année. Le blogueur estime que d'avantage de sites web à la manière de Google+, Facebook, Twitter devront offrir eux aussi leurs badges personnalisés.



Source : blog Thom Philips

Et vous ?

:fleche: Êtes-vous d'accord avec le blogueur ?

:fleche: Sinon, selon vous, quelles sont les tendances en web design pour 2013 ?

Citation:

---

Envoyé par Cedric Chevalier

la transparence CSS3 a un effet bénéfique sur le temps de chargement des pages web, puisqu'elle limite le recours aux outils de retouche photos

---

Euh… Vous voulez sans doute dire qu'un effet de transparence sur une image évitera d'avoir à charger une autre image simulant l'effet de transparence ?

Citation:

---

La barre de défilement infini

---

En JQuery, non ? Car je n'ai trouvé aucun exemple en full CSS.

Citation:

---

Êtes vous d'accord avec le blogueur ?

---

Oui, sur les images de produits dès la première page, sur le recours aux effets CSS3, et surtout sur le responsive/adaptive design.
Pour ce qui est est des sites "one page" (en JQuery ou full CSS), ça se fait de plus en plus et c'est très bien, notamment pour des portfolios. Pour des sites plus complexes, le "une info / une page" demeure un système efficace (pour l'architecture de l'information et le référencement, notamment).

Citation:

---

Si non selon vous quelles sont les tendances en web design pour 2013 ?

---

Le flat design ne s'est pas encore imposé. Je pense aussi que les menus vont passer dans les footer, et que les webdesigners vont désormais penser aux terminaux mobiles puis au desktop.

Les modes vont et vienne, il faut éviter de trop les suivre: les prendre en compte, mais ne pas les calquer à moins d'avoir du temps à y passer pour faire évoluer votre design en permanence:

Sinon votre site ne cesserai d'evoluer entre skeuomorphisme, embossed et flat design ;)
Sans parles des aides comme bootstrap ;)

Beaucoup de sites suivant les tendances on arrive à une overdose des flat designs et responsive sur les mobiles.

ils en parlent dans cet episode de the walking web: http://www.thewalkingweb.fr/2013/07/...b-7-live-ios7/

La page infinie, une très bonne idée pour rechercher quelque chose, une très mauvaise idée pour la retrouver une seconde fois. Oui, parce que quand c'est à des kilomètres, c'est presque impossible de retomber dessus sans numéro de page ou adresse (vu qu'il n'y en a pas). Bref, c'est très bien pour des données qui de toute façon auront changé dans les heures qui suivent, mais pas pour des choses statiques.

Citation:

---

Envoyé par imikado

on arrive à une overdose des flat designs

---

Ça je ne te le fais pas dire, je trouvais ça moche dès que Ms à proposer sont trucs... et je trouve ça encore pire maintenant. Les sites ont tendances à tous se ressembler. De plus, trop de sites utilisent des templètes toutes faites avec les mêmes outils, on dirait que le travail de personnalisation n'existe plus. J'ai l'impression d'une régression par rapport aux sites des années 90-début 2000... Finalement, les sites tout moches des années 1990 sont parfois plus sympa que certains sites actuels, qui à vouloir trop simplifier, finissent par perdre totalement en identité visuelle.

Bon, après ce n'est que mon avis. Je vais continue en me foutant un peu de ce qui fait ailleurs pour mes site persos. Que ça plaise ou non, je m'en fous.

Citation:

---

Envoyé par imikado

on arrive à une overdose des flat designs et responsive sur les mobiles

---

C'est quoi, une overdose de responsive ? :|

Citation:

---

Envoyé par Zefling

Les sites ont tendances à tous se ressembler.

---

Je ne pense pas que ce soit un problème, et ce pour deux raisons :

1. Beaucoup de sites se ressemblent, parce que beaucoup de gens utilisent tel quel des frameworks comme Bootstrap (et peuvent enfin avoir un site pour diffuser facilement et rapidement leurs idées…).
2. En suivant des conventions, les sites web facilitent leur utilisation et la diffusion de leur message.

Quant au flat design, c'est souvent souple, performant et élégant. Parfois, les designs sont effectivement neutres, ce qui n'est pas forcément un mal.

Citation:

---

Envoyé par Muchos

C'est quoi, une overdose de responsive ? :|



Je ne pense pas que ce soit un problème, et ce pour deux raisons :

1. Beaucoup de sites se ressemblent, parce que beaucoup de gens utilisent tel quel des frameworks comme Bootstrap (et peuvent enfin avoir un site pour diffuser facilement et rapidement leurs idées…).
2. En suivant des conventions, les sites web facilitent leur utilisation et la diffusion de leur message.

Quant au flat design, c'est souvent souple, performant et élégant. Parfois, les designs sont effectivement neutres, ce qui n'est pas forcément un mal.

---

je vous invite à écouter l'épisode de the Walking Web précédemment cité et vous aurez les réponses à vos questions ;)

Citation:

---

Envoyé par imikado

je vous invite à écouter l'épisode de the Walking Web précédemment cité

---

Non (1h10 de vidéo, pas de sommaire…)

Sommaire en milieu/bas de page. ;)

Pour cette épisode:
En minute 20, parlant de squarespace et de ses templates uniformes, sans réelles originalités, ils parlent de cette tendance à tous faire pareil :(
A partir de la minute 48m, le débat sur IOS7 et sa nouvelle interface "flat" dévie sur le flat design sur écran "non tactile"

Mais l'épisode que j'avais en tête n'était pas celui-la, mais le 5 en fait: (désolé :oops: )
http://www.thewalkingweb.fr/2013/04/...t-webdesigner/
A partir de la minute 30 en parlant d'un article sur le "web malhonnête", et minute 35 on reparle de flat

On y parle que de techno qui ont au minimum 5 ans (les trucs CSS). Les QR code qui sont un gros foirage en occident, la moitié des possesseurs de smartphone ne savent même pas les scanner...

Citation:

---

Envoyé par blog

This is going to be the year of open source and API dévelopment.

---

Non sérieux?

@imikado:
Leurs avis sur le flat sont divers, et les avis "contre" ne me convainquent pas (ils sont basés sur des questions de goût).
Et je ne sais toujours pas ce que signifie «overdose de responsive». L'un des intervenants dit que c'est une mode; j'appelle ça une bonne pratique…

@swissmarmot:
Malgré votre ton méprisant, je partage assez votre avis (les QR code, les coins arrondis, la "vogue" qui l'est déjà…)

Citation:

---

Envoyé par Muchos

@imikado:
Leurs avis sur le flat sont divers, et les avis "contre" ne me convainquent pas (ils sont basés sur des questions de goût).
Et je ne sais toujours pas ce que signifie «overdose de responsive». L'un des intervenants dit que c'est une mode; j'appelle ça une bonne pratique…

---

Pour le flat ce qu'ils disent c'est
1. en enlevant tout (ombre portée, dégradé...) on frustre les graphistes dans leurs créa ;)
2. sur une interface non tactile, on a du mal à distinguer une zone cliquable d'une zone texte normale

Pour l' "overdose de responsive" je précise ce dont je parle: pour faire du responsive, deux choses:
1. utilisez un framework js comme bootstrap
2. codez vous même du responsive

Dans le cas de bootstrap on reconnait le design, et comme beaucoup de sites l'utilisent on se retrouve avec beaucoup de sites utilisant le même design notamment sur mobile
Pour le second cas, pour faire du responsive, il faut respecter quelques contraintes de conception graphique à respecter qui "cadre" la conception, et on revient au point 1: beaucoup de sites sur le même modèle :(

@imikado: Merci pour les précisions. Perso, je pense que les défauts/manques graphiques sont plus dus à la conception qu'au flat lui-même.

Quant aux similarités de design, je disais que ça n'était pas un problème selon moi (au contraire).

Le flat est un peu une réaction épidermique au skeuomorphisme et il est apparu (à tort) comme une solution simpliste.
Le flat intervient logiquement à l'ère du responsive pour allèger les poids des pages et faciliter le chargement de celles-ci sur mobile.

Citation:

---

Envoyé par imikado

en enlevant tout (ombre portée, dégradé...) on frustre les graphistes dans leurs créa

---

Pas tellement d'accord car justement le flat apparaissant comme simpliste oblige le graphiste à chercher un moyen de créer avec concision. C'était d'ailleurs la devise de Steve Jobs qui expliquait qu'il était plus compliqué de rationaliser un design.
Personnellement je trouve qu'on a été trop gavé d'effets (ombre portée, dégradé...) et qu'il est intéressant de voir jusqu'où ira le flat.

Citation:

---

Envoyé par imikado

sur une interface non tactile, on a du mal à distinguer une zone cliquable d'une zone texte normale

---

Quand il s'agit d'un menu il n'y a pas d'équivoque pour le reste il faut effectivement appréhender le design avec plus de finesse.

Muchos : tout à fait d'accord avec ta dernière assertion.
Il vaut mieux voir des design similaires mais correctement conçus que de naviguer sur des sites personnalisés mais hideux, tellement nombreux encore.

La nature n'aimant pas les extrêmes on arrivera forcément à un équilibre dans les techniques de design adoptées.

Citation:

---

Envoyé par rodolphebrd

La nature n'aimant pas les extrêmes on arrivera forcément à un équilibre dans les techniques de design adoptées.

---

Ce qui est marrant c'est que ce sont les extrêmes qui font naître de nouvelles tendances. Donc, tuer les extrêmes c'est supprimer toute possibilité d'innovation. Certains sites qui ne sont pas « flat design » restent parfois plus lisibles que certains qui le sont, tellement épurés qu'au final, le site devient incompréhensible. On peut faire du mauvais avec tout.

Personnellement, je pense qu'il ne faut pas confondre avec la sobriété. On peut utiliser des effets, tant que le design n'est pas trop chargé et garde toute sa lisibilité. Puis une sur uniformisation est une perte d’identité, ce qui peut devenir problématique pour un site. Si un visiteur va chez ses voisins et qu'il a l'impression de ne pas avoir de différence, est-ce qu'il va revenir sur le premier ? L'originalité permet de se distinguer, il ne faut pas l'oublier.

Perso j'adore le logo du site source ! Comic sans, petit dégradé… la classe.
le QR code c'est tendance les gars !!
Donc inevitablement pertinent pour parler de "tendance" sur le web; on sent qu'on nous a fait remonter un article incontournable

Citation:

---

Envoyé par rodolphebrd

La nature n'aimant pas les extrêmes on arrivera forcément à un équilibre dans les techniques de design adoptées.

---

le flat n'est en soit qu'un concept "bootstrap", un template de style sur lequel se calquent tout ces pseudos creatifs des internets. Faut être sur dribble, avoir fait son app météo et sa todo, montrer le tout en vue 3/4… c'est tellement limité ! et "jusqu'où ira le flat" ? les moutons l'ont deja entérré pour faire du *wahou* long-shadow. Le tout sans pratiquement sortir de photoshop mais en s'annonçant webdesigner.
L'"équilibre dans les techniques" que tu évoques équivaut au niveau de créativité zéro

Citation:

---

Envoyé par artemia

L'"équilibre dans les techniques" que tu évoques équivaut au niveau de créativité zéro

---

C'est un peu vague comme réponse et très personnelle j'imagine.

Le flat permet de réaliser des design très aboutis mais n'est pas adaptable à tous les projets.

Bien d'accord avec Zefling.

Personnellement, je n'accroche plus au développement web. Aujourd'hui, si tu ne fais pas du responsive/html5/css3/javascript, c'est mort.

Et en effet, tout les sites se ressemblent avec une palme pour les sites de vente en ligne... Finalement, a part la couleur et le logo du vendeur, tout le reste est identique.

Internet est en train de devenir d'un triste...

"leurs pages d'acceuil"

En fait "leurs pages d'accueil"