{"id":37100,"date":"2017-06-07T07:12:09","date_gmt":"2017-06-07T14:12:09","guid":{"rendered":"\/blog\/?p=13364"},"modified":"2023-06-05T16:09:41","modified_gmt":"2023-06-05T14:09:41","slug":"un-apercu-du-nouveau-design-dexo-platform-5","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/fr\/un-apercu-du-nouveau-design-dexo-platform-5\/","title":{"rendered":"Un aper\u00e7u du Nouveau Design d\u2019eXo Platform 5"},"content":{"rendered":"

eXo Platform a conserv\u00e9 la m\u00eame interface utilisateur depuis le lancement de sa version 4.0 en avril 2013. Ce design est bas\u00e9 sur une interface dite \u201cskeuomorphe\u201d, avec texture de fond et boutons 3D. Pour eXo Platform 5<\/strong>, nous avons proc\u00e9d\u00e9 \u00e0 une refonte graphique compl\u00e8te, avec un nouveau paradigme d\u2019interface: le Flat Design<\/strong>.<\/p>\n

<\/p>\n

Abandon du skeuomorphisme<\/h2>\n

Le design d\u2019eXo Platform 4 est bas\u00e9 sur un design skeuomorphe. Un skeuomorphe d\u00e9finit un \u00e9l\u00e9ment de design dont l’apparence n’est pas directement li\u00e9e \u00e0 la fonction, mais qui reproduit de mani\u00e8re ornementale un \u00e9l\u00e9ment qui \u00e9tait n\u00e9cessaire dans l’objet r\u00e9el.<\/p>\n

Plus pr\u00e9cis\u00e9ment, il peut \u00eatre d\u00e9fini comme \u00ab un \u00e9l\u00e9ment de design ou une structure qui ne sert aucun but dans l’objet form\u00e9 \u00e0 partir du nouveau mat\u00e9riau, mais qui \u00e9tait essentiel dans l’objet fait \u00e0 partir du mat\u00e9riau original \u00bb. La \u201ccorbeille\u201d, par exemple, est l\u2019objet skeuomorphe le plus reconnaissable. Le skeuomorphisme commen\u00e7a \u00e0 d\u00e9coller dans les ann\u00e9es 80 gr\u00e2ce notamment \u00e0 l\u2019un de ses premiers partisans: Steve Jobs.<\/p>\n

L\u2019id\u00e9e \u00e9tait simple: les interfaces seraient beaucoup plus intuitives pour les utilisateurs avec un design skeuomorphe.<\/p>\n

En effet, en imitant des objets familiers, les \u00e9l\u00e9ments skeuomorphiques \u00e9voquent quelque chose de familier pour l\u2019utilisateur.<\/p>\n

N\u00e9anmoins, le skeuomorphisme est controvers\u00e9 parmi les designers. Ses d\u00e9tracteurs pointent souvent du doigt son c\u00f4t\u00e9 \u201cfaux\u201d et \u201cinauthentique\u201d. Et m\u00eame si l\u2019on peut affirmer que ce type de design a contribu\u00e9 \u00e0 faciliter de nombreuses transitions technologiques, il y a toujours deux aspects \u00e0 chaque histoire. La transition de l\u2019analogique vers le num\u00e9rique est peut \u00eatre le plus grand d\u00e9veloppement technologique auquel nous avons assist\u00e9. Compar\u00e9 \u00e0 des technologies plus anciennes, les ordinateurs, t\u00e9l\u00e9phones ou encore tablettes sont devenus des machines extr\u00eamement complexes. Nous avons condens\u00e9 une myriade de machines ainsi que leurs fonctionnalit\u00e9s dans de petits \u00e9crans r\u00e9tro\u00e9clair\u00e9s remplis de pixels.<\/p>\n

Durant cette p\u00e9riode, la conception d’interfaces intuitives pour une technologie aussi expansive et abstraite f\u00fbt ardue. La question \u00e9tait de savoir comment une technologie aussi riche et performante pouvait \u00eatre rendue \u00e0 la fois attractive et intuitive pour l’utilisateur final moyen? Pour ce faire, de nombreux concepteurs d’interface utilisateur se sont appuy\u00e9s sur des choses famili\u00e8res, des skeuomorphes.<\/p>\n

Cependant, ce type de design n\u2019est pas sans contraintes. Par exemple, en appliquant certains standards non pertinents dans le num\u00e9rique, le skeuomorphisme peut limiter la cr\u00e9ativit\u00e9 ainsi que les fonctionnalit\u00e9s. Appliqu\u00e9 correctement, il peut susciter de fortes associations avec ses \u00e9quivalents du monde r\u00e9el, ce qui peut \u00eatre une force ou une faiblesse. Parfois, l\u2019association est tellement forte qu\u2019elle emp\u00eache toute tentative d’am\u00e9lioration du design.<\/p>\n

De plus, les \u00e9l\u00e9ments skeuomorphiques peuvent appara\u00eetre incoh\u00e9rents lorsqu\u2019ils sont combin\u00e9s \u00e0 des \u00e9l\u00e9ments ayant peu ou pas de logique avec les fonctionnalit\u00e9s. Par exemple, l\u2019application d\u2019Apple: Find my Friends <\/i>poss\u00e9dait un fond qui ressemblait \u00e0 du cuir cousu, alors que cet \u00e9l\u00e9ment n\u2019a aucun rapport avec la fonctionnalit\u00e9 de l\u2019application. De plus, les \u00e9l\u00e9ments skeuomorphiques peuvent prendre beaucoup d\u2019espace sur l\u2019\u00e9cran, car ils s\u2019appuient fortement sur les images. Ceci augmente le poids de l\u2019application, sacrifiant ses performances pour des embellissements inutiles.<\/p>\n

Enfin, la surexploitation du skeuomorphisme peut \u00eatre submergeant pour l\u2019utilisateur, en transmettant beaucoup trop de signaux \u00e0 l\u2019oeil. G\u00e9n\u00e9ralement, lorsque l\u2019on parle de design, sobri\u00e9t\u00e9 et simplicit\u00e9 sont les ma\u00eetres mots.<\/p>\n

C\u2019est donc pour cela que nous avons opt\u00e9 pour le flat design, ou flat UI, afin de moderniser eXo Platform.<\/p>\n

Une toute nouvelle nouvelle Skin Enterprise<\/i> garde le ton \u201centreprise\u201d, tout en am\u00e9liorant la lisibilit\u00e9 et en offrant une interface moins charg\u00e9e.<\/p>\n

Qu\u2019est-ce que le flat design? <\/strong>  <\/strong><\/h2>\n

Le flat design trouve ses influences chez les suisses. En effet le style suisse privil\u00e9gie  lisibilit\u00e9, nettet\u00e9 et minimalisme. Les designs issus de ce mouvement sont utilitaristes et visent une utilisation optimale de l\u2019espace (en \u00e9tant \u201cplats\u201d donc \u201cflat\u201d en anglais). Josef M\u00fcller-Brockmann, un designer renomm\u00e9 issu de ce mouvement, a r\u00e9volutionn\u00e9 les syst\u00e8mes de grille. La sp\u00e9cificit\u00e9 de son travail r\u00e9side dans le fait qu\u2019il utilise l\u2019espace de la mani\u00e8re la plus efficace possible. Cette qu\u00eate d\u2019optimiser l\u2019utilisation de l\u2019espace est un concept critique dans la conception d\u2019interfaces utilisateur.<\/p>\n

Pour d\u00e9finir le flat design, il est plus simple de d\u00e9finir ce qu\u2019il n\u2019est pas:<\/p>\n