Envie d’un nouveau look ? Voici 7 conseils pour un design moderne et ergonomique en 2013

Envie d’un nouveau look ? Voici 7 conseils pour un design moderne et ergonomique en 2013

En ce début de printemps (pas franchement printanier, vu le temps qu’il fait partout en France), on a envie de changement: renouvellement de garde-robe pour les plus chanceux, ménage de printemps, reprise du sport et bien sûr, rafraichissement du design de votre site web!

Un design de site web a une durée de vie de 2 ans environ, avant de commencer à être passé de mode. Pour donner un effet « WOUAAOUHHH », le changement de votre design doit donc passer par une phase de recherche des tendances actuelles, et c’est ce que je vous propose de découvrir.

N°1 : Responsive Web Design

responsive webdesign

Sans nul doute le phénomène qui a le plus marqué le web en 2012…et qui se poursuit en 2013. Son intérêt est multiple puisque ce type de design permet à votre site de s’adapter à toute résolution d’écran (et donc tout support).

Il permet donc de s’affranchir d’une application iphone ou android (Entre nous, les applications pour smartphone ne sont utiles que pour les applications web (ex: ebay.fr, dropbox.com, coursesenligne.fr..) et non pour les sites de contenus comme les blogs ou les sites vitrines _dans ce cas, elles sont même contre productives).

Pour mon prochain site, en pleine préparation, j’ai utilisé un design responsive, je ne manquerai pas de vous en faire part le moment venu.

D’autres éléments s’accordent à cette tendance, notamment le grossissement des boutons et l’aération générale du design, et ce, afin de rester fonctionnel même sur des très petits écrans.

N°2: La typographie revient en force

typographie

Les polices deviennent originales et sont créées en vectoriel pour le plus grand plaisir des webmasters, qui peuvent enfin mettre en valeur leur contenu, et non leurs images (et oui, nous sommes des visuels, mais le web est textuel!).

Attention tout de même de ne pas abuser de la tendance: une à deux polices par page suffisent amplement, à moins d’aimer avoir les yeux qui piquent!

N°3 : Une navigation qui se déplace

Déjà présente depuis plusieurs années sous d’autres formes, le phénomène s’accentue avec l’apparition de menu horizontaux, qui restent accrochés au haut de la fenêtre, lors du défilement vertical de la page.

Ergonomique, cette fonctionnalité évite à vos visiteurs de remonter en haut de page pour poursuivre sa navigation.

N°4 : Parallax srolling

Très originale, encore un peu marginale, cette technique ne s’adapte pas à tous les projets, au risque de faire un peu « bordélique ». Mais quand elle est bien appropriée, elle a un charme fou. Je vous laisse la découvrir sur le site de cette agence web de Aix-en-provence, avec qui j’ai travaillé il y a quelques temps.

parallax

Sabrina, Reynald, si vous passez par ici, bravo pour la refonte de votre site ! C’est très réussi.

N°5 : Le Skeuomorphisme (mais qu’est-ce que c’est que ça ?)

Arrivé du monde anglo-saxon, ce style de design ne s’est pas encore fait un nom chez nous. Pourtant, ce n’est pas faute de l’employer, et ce très souvent, puisque la popularisation de cet effet nous vient d’Apple.

Il s’agit de reproduire des éléments d’aspect réalistes (objets, matériaux, nourriture) au sein d’une interface digitale. Tout ça pour ça.

skeuomorphisme

N°6: le « Metro » style

Pas d’inquiétude, les sites web ne s’inspirent pas de la douce couleur orange des métros ni de leur look année 80.

Le « metro » style, c’est le petit nom du « Microsoft Design Language », le nouveau style de Windows 8, alias « cette fois ça va passer partout ». Des formes géométriques, des lignes épurées, une simplification à l’extrême à l’exacte opposé de Skeuomorphisme, ce sont les caractéristiques-types de ce style, qu’on risque de revoir souvent.

metro-style

Allez…peut-être que sans les couleurs criardes, ça peut-être joli ? A l’image de Pinterest et son grillage d’image ?

N°7: Des images full-screen qui vous en mettent plein la vue!

Luxe, tranquillité, classe, les images en plein écran donnent un cachet à votre site comme rien d’autre auparavant. L’avancé des technologies a permis ces usages et ces folies. En parallèle, les experts s’accordent à dire que la qualité des images augmentent également. Les webmasters l’ont bien compris: le règne des photos gratuites est terminé. Si vous voulez être « pro », investissez dans la résolution et la qualité !

Admirez plutôt cette page « Collection » venant du site d’une des mes stagiaires, fondatrice et modéliste de la ligne de maillot de bain de luxe « Les baigneuses ».

fullscreen

N°8: Des vidéos de grande taille et épurées

Les vidéos suivent la tendance initiée par les photos: les tailles s’élargissent, les lecteurs s’épurent. Place à l’image, place à l’information, comme sur le site Grafikart.fr

vidéo-fullscreen

Le mot de la fin

En tant que développeur web, le design d’un site n’a jamais été au centre des mes préoccupations (bien que je fasse de l’intégration). Pour moi, le fonctionnel et le contenu sont à privilégier avant tout. Mais avec l’avancée du web, je suis agréablement surprise de constater que le design rejoint la technique, le beau rattrape l’ergonomique, et l’esthétique valorise les contenus. De belles perspectives nous attendent cette année!

Sources

  • http://www.pressmyweb.com/webmarketing-e-marketing-communication/tendances-webdesign-2013/
  • http://fr.wix.com/blog/2013/01/01/5-tendances-de-web-design/
  • http://blog.mmcreation.com/2013/01/10/webdesign%C2%A0-les-tendances-2013/
  • http://www.webdesignertrends.com/2012/12/tendances-webdesign-2013-web

CSS, image, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

25 commentaires

  1. Merci pour cet article !
    Mais il ne faut tout de même pas oublier le Référencement du site et laisser de la place pour un contenu optimisé tout en gardant un beau visuel.

    Répondre
  2. Merci pour ces infos tendances. Je prépare justement mon nouveau blog gagner-du-temps.com, je cherche un design original, j’ai trouvé quelques idées.

    Répondre
  3. Merci MarieEve,

    2 point ont retenus mon attention:

    – Le responsive web design, parce que je me pose la question depuis quelques semaines. Cela me m’apparait comme un incontournable avec l’évolution des supports.
    – Le Skeuomorphisme C’est quoi effectivement, mais à première vue quelques éléments permettent de se démarquer. Nous sommes dans le visuel et l’image est souvent la première chose qui est retenue.
    L’association image-contenu est incontournable: quand on me dit « Paris » c’est une ou plusieurs images qui me viennent. C’est au moins une bonne piste de réflexion pour s’adapter.
    En attendant, j’ai hâte de visiter votre nouveau site.

    Répondre
  4. Bonjour !

    Un billet plein de bons conseilles. Vous faites bien de le mettre en première position, le responsive design (ou design adaptatif) est pour moi la grande nouveauté de 2012/2013. Avoir son site optimisé pour tout support d’écran, pc, tablette comme mobile, est vraiment quelque chose de fantastique et d’indispensable.
    Encore merci :)

    Répondre
  5. Sympa comme article, ça permet de ne pas oublier de replacer le design au centre de la stratégie.
    Je pense que le responsive aura une grosse part du gâteau dès cette année 😉

    Répondre
  6. c’est bien beau tout ça , ça fait envie .
    Le contenu c’est bien sur essentiel cependant dans une société ou l’image est importante ,il faut savoir retenir le regard et l’attention et surtout également avoir une navigation simple. Ce qui me passionne c’est qu’il y a toujours des progrès à faire ,merci Marie Eve

    Répondre
  7. Pour moi les points les plus importants sont le design responsive et les images fullscreeen ! Les 2 sont parfois dur à combiner…

    Répondre
  8. Vraiment magnifique le site de Nestia, bravo!
    Mais, on ne part pas d’un site WordPress là hein?

    Merci Marie-Ève.

    Andrée

    Répondre
    • Bonjour Andrée

      Il se trouve que non, mais ça aurait pu. Rien n’empêche un site wp d’avoir un thème parallax.

      Répondre
  9. Merci Marie-Eve pour toutes ces explications ! Je vais en tenir compte pour la remise à propre de mon site 😉

    En parlant de site, j’ai bien hâte de voir celui que tu es en train de préparer, car comme tu le sais je suis sur le thème de comment créer un blog, alors pourquoi ne pas faire la promotion de tes formations 😉 ça sera avec plaisir !

    Répondre
    • Merci pour la proposition Benjamin :)

      Pour l’instant, ce sera surtout sur mes formations en présentiel, mais dans la V2, je prévois d’y inclure mes formations vidéos (ainsi que mon nouveau projet…mais je garde le suspense encore un peu).

      Répondre
  10. Bonjour et merci pour cet excellent article Marie Eve, l’essentiel est dit et même si ce sont des bases, une petite piqûre de rappel, pour moi je pense que le design d’un site est toujours important, , l’ergonomie est primordiale!

    Répondre
  11. Merci pour cet article Marie-Eve et pour la référence à nextia. Nous sommes ravis que notre approche ait plu à vos lecteurs. Nous avons pris beaucoup de plaisir à l’imaginer: parallaxe, skeuomorphisme, illustrations à main levée, et assemblage d’éléments :-)

    Pour compléter, un autre site en parallaxe que nous avons imaginé pour Bouygues Telecom: http://4g.bouyguestelecom-entreprises.fr/

    Répondre
  12. Excellent article! Merci surtout pour les rappels!
    J’ai un penchon pour le Nextia.

    Répondre
  13. Merci pour toutes ces bonnes idées! Refaire les templates de mes sites en responsive va déjà m’occuper grandement!

    Répondre
  14. Tout d’abord un grand merci pour cet article. Parfois, certaines personnes veulent avoir un beau site et le problème est qu’il devient lourd et la navigation inconfortable. Le design c’est bien, mais il faut se concentrer d’avantage sur le confort pour avoir une navigation fluide.

    Répondre
  15. un très grand merci pour cet article, un peu de changement pour cette année, cela ne peut pas faire bien de mal. Le design met bien en valeur le contenu.

    Répondre
  16. qu’est ce que le Isomorphisme? ceci tout simplement parce que j’en ai aucune idée.merci quand même pour les notions sur le design

    Répondre
    • Bonjour,

      Je n’ai pas compris votre commentaire…qu’est ce que le Isomorphisme? Sur wikipédia je trouve ceci :

      En mathématiques, un isomorphisme entre deux ensembles structurés est une application bijective qui préserve la structure et dont la réciproque préserve aussi la structure1. Plus généralement en théorie des catégories, un isomorphisme entre deux objets est un morphisme admettant un « morphisme inverse » .

      …mais je n’ai toujours rien compris 😀

      Répondre
  17. Bonjour,
    j’ai jamais pensé à changer le « look » de mon site car je croit que les visiteurs n’aiment pas forcément le changement quelque soit vers le meilleur ou vers le pire.
    mais cette question de mode m’a pousser à réfléchir sur les bienfait d’un changement et mettre en cause mes convictions.

    Répondre
    • Bonjour,

      Il est vrai que les changements peuvent déstabiliser, il faut les faire avec parcimonie. Mais il faut vraiment les faire, ça renvoi l’image d’un site à jour, entretenu. 😉

      Répondre
  18. j’ai jamais pensé à changer le look de mon site, mais après voir quelque exemple ici, je pense que je vais travailler sur ce point. car le look du site peut aussi faire la différence et être attractive par les internautes :)

    Répondre
  19. Bonjour et bravo pour cette présentation simple et efficace.
    J’ai écris un article sur le design émotionnel (en parfait profane), mais suite à la lecture du livre d’Aaron Walter, le designer de Mailchimp. La présentation de ces 7 conseils illustre mieux qu’un discours les évolutions du net.
    J’ai franchile pas pour l’utilisation d’un thème responsive. Cela permet un affichage beaucoup plus sympathique de mon site et j’en suis très satisfait. Non seulement sur mobile, mais même sur écran d’ordinateur.
    Quant au Skeuomorphisme, je vais encore attendre un peu…

    Répondre
  20. Merci Marie-Eve pour ce bon panorama des « avancées » du moment , super commenté
    Cela fait envie. Affaire à suivre …

    Répondre

Trackbacks/Pingbacks

  1. WEB | Pearltrees - [...] 8 conseils pour un design moderne et ergonomique en 2013 [...]
  2. 8 conseils pour un design moderne et ergonomique en 2013 - Les Doigts dans le Net | Partage-it.com | Scoop.it - [...] Les tendances en matière de webdesign pour l'année 2013, synthèse de l'avis de nombreux spécialistes...  [...]
  3. Web Design | Pearltrees - [...] 8 conseils pour un design moderne et ergonomique en 2013 [...]

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint