Le webdesign en 2015

Dans cet article, je vais tenter de retranscrire mon opinion et mes observations sur les bonnes pratiques dans le webdesign en 2015. Je préfère vous prévenir, cette vision est totalement subjective, elle est le fruit d’une veille sur l’évolution du web et du webdesign.

Capture d’écran 2015-03-27 à 02.05.01

Un modèle de webdesign de 2015 : Simple, rapide, beau = efficace !!

Les tendances du webdesign à suivre

Un style minimal

Le style minimal est né d’un courant architectural et d’arts appliquées. Il a réduit ce qui est décoratif ou superflu pour n’exprimer que l’essentiel. Le concept est basé sur l’efficacité, la modernité, la neutralité, la devise étant « less is more ». Le but n’est plus d’en mettre plein les yeux par le design mais le webdesign remet au centre de sa réflexion l’expérience utilisateur.

Le flat design

Le flat design initiée par Microsoft en 2010 avec le Windows Phone. Plus plat, plus graphique, plus géométrique, plus minimal… Google révolutionne le genre avec Material design, qui redessine les bases du flat, essentiellement sur mobile : fluidité, animations responsives, ombres, typographie épurée et lisible. Le flat design est capable de se décliner dans différents styles et correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d’accessibilité et de mobilité liées au web d’aujourd’hui.

Le Responsive

Le design que l’on appelle liquide ou responsive doit aujourd’hui s’adapter à tous les canaux (tablettes, smartphones, TV, ordinateurs…). Ce design n’est plus une tendance mais une obligation comme nous vous l’avons expliqué précédemment ! Aujourd’hui, les webdesigners parlent même de « mobile first », réfléchissent d’abord à l’aspect du site sur mobile pour l’enrichir sur des écrans plus grands. La multiplication des appareils, des formats et des résolutions impose d’adapter son contenu à l’utilisateur sans modifier son expérience. Toutefois, certains sites préféreront proposer une application ou un site 100% mobile. Ceci peut se comprendre totalement, mais dans un premier temps, je conseillerais de se lancer avec un site responsive. Puis, dans le futur, envisagé un site 100% dédié au mobile mais avec la réflexion d’aller plus loin dans l’expérience utilisateur.

Le Monopage

Certains sites restent multipages car cela répond à un besoin pour une entreprise de présenter clairement ses services, ses tarifs, son expertise… Aujourd’hui, la tendance est aux sites monopages qui sont optimisés pour tous types d’écrans. Ces sites permettent de se concentrer sur l’essentiel, de cacher les onglets et les sous-menus mauvais pour la navigation sur mobile. De plus, les sites monopage permettent de scroller en attendant le chargement de la suite plutôt que d’être obligé de cliquer et attendre le chargement d’une page entière. Ce genre de site privilégie une petite fonctionnalité qui permet d’améliorer l’usage utilisateur mobile. En effet, Dan Saffer a inventé un nouveau terme « les micro-interactions » comme le « pull to refresh ». Qui n’a jamais fait glisser vers le bas son fil d’actu Facebook sur son mobile pour voir les tous derniers statuts de ses amis, vous voyez apparaître un cercle qui charge la page… Voilà vous avez compris le pull to refresh. Cette micro interaction est un des exemples qui améliorent l’expérience utilisateur, je ne sais pas vous mais il m’est arrivé de faire cinq fois ce geste en 30 secondes, on en devient même accroc…Si vous parvenez à développer des micro-interactions qui paraissent anodines mais très utilisées, alors vous faites la différence.

L’image 

Une image est souvent plus parlante que des mots mais surtout plus efficace ! L’image est devenue l’axe prioritaire pour communiquer sur le web. Photo, illustration, icônes, sont des images qui permettent de passer le bon message, de transmettre l’information lors d’une lecture transversale mais surtout d’attirer votre oeil. Les illustrations et les icônes apportent une navigation intuitive surtout sur mobile et les photos authentiques donnent de la valeur à un site. Les images se mettent aujourd’hui au service du storytelling. Plutôt que de faire de longs discours, le webdesign en 2015 permet d’illustrer un texte court avec des images intenses. Enfin, avec la réussite de Pinterest, le style en « mosaïque » est de plus en plus visible sur les sites web. Toujours dans une volonté de simplification, ce style permet d’avoir un aperçu très rapide du contenu. Il est donc efficace et très pertinent pour le responsive design. Beaucoup de sites très fréquentés, de réseaux sociaux utilisent ce style pour rendre agréable la navigation à ses utilisateurs.

Et la vidéo ?

De plus en plus, la vidéo va être mise en avant sur le web. On remarque les efforts faits par de nombreux sites et réseaux sociaux pour développer leur plateforme vidéo. Les vidéos vont devenir de plus en plus engageantes et adaptées au mobile. Il est, cependant, nécessaire de réaliser des formats vidéos courts pour respecter l’usage du mobile.

La typographie

La police a toute son importance sur le web, elle fait partie intégrante d’une charte graphique, d’une stratégie de webdesign. Il faudra cette année, privilégier des polices de caractère simples mais surtout avec des contrastes marqués dans la taille, l’épaisseur, la couleur… La typo se conjugue avec les icônes du site et permet de renforcer l’image souhaitée.

Le Social design

Permettre à votre site d’être connecté avec les réseaux sociaux vous permettra de l’amener dans la sphère privée de vos utilisateurs et donc de recruter d’autres utilisateurs totalement gratuitement. Il est, cependant, important de ne pas se perdre et de choisir les réseaux sociaux où sont présents vos utilisateurs. Utiliser principalement ces réseaux sociaux pour créer du trafic, recruter des utilisateurs, et vous positionner. Ces types de réseaux sociaux modifient par leur utilisation, les codes et les tendances du webdesign. Ils sont donc à surveiller !! Vous pourrez en tirer des bonnes pratiques pour les intégrer directement sur votre site et être à la pointe du webdesign.

Des pistes à creuser :

Le Data design

Les données sont partout aujourd’hui ! Elles entrent de plus en plus dans la sphère personnelle avec nos objets connectés du sport, de la santé ou encore de la maison. Les gens sont désormais habitués aux chiffres, aux données et donc au data design. Les infographies également sont très appréciées sur le web et permettent de vulgariser le data design. Ces données alliées avec de très belles images permettent de rendre accessible et agréable à tous d’apprendre sur un sujet. Cette caractéristique explique la forte viralité de ces contenus sur le web de nos jours.

La gamification

Connaissez-vous les serious game ? Ils utilisent les ressorts du jeu pour capter l’attention de sujets sérieux. Ce type de jeu se pratiquent toujours avec une intention pédagogique, communicationnelle… Si vous avez besoin de faire passer un message efficacement par des ressorts forts et marquants, il faudra utiliser le jeu qui implique les utilisateurs et qui marquent fortement. De plus, vous pourrez rendre ludique vos contenus publicitaires et capter un maximum de personnes. Aujourd’hui, nous sommes tellement inondés par les publicités qu’il est primordial pour les marketeurs et les webmarketeurs de se différencier pour capter un maximum de prospects. La gamification est un bon outil pour réaliser ces objectifs mais attention à bien le réaliser !

L’utilisation du Vintage

Avec la tendance du flat design, l’utilisation du Vintage est un bon moyen de prendre le contre pied. Ce webdesign vous apportera de l’authenticité et de l’empathie auprès de vos utilisateurs. Attention, il faut tout de même garder une image moderne avec l’utilisation de la monopage (si possible), du social design, des images, de la vidéo…. Comme toujours, ce design est à utiliser pour diffuser un message bien précis à une cible déterminée…attention à ne pas vous tromper !

Tout au long de l’année 2015, il sera important de surveiller les tendances et utilisations du mobile. Mais rappelez-vous, pour un site web moderne, il faut penser simplicité, rapidité et mettre l’expérience utilisateur au centre de votre réflexion. Pour vous faciliter le travail, ne perdez jamais de vue la nécessité du responsive design et envisagez d’abord votre plateforme sur mobile avant de la penser sur un autre « device ».

Et n’oubliez pas de surveiller, toute l’année, les tendances et ainsi anticiper les évolutions.

Pour approfondir ce sujet : http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551

Dimitri Marié – @dimitrimarie

Publicités

Déclic et des Trucs animé par le Feu sacré d’Herezie !

Declic et des trucs_equipe

Début janvier je vous présentais le concours pour le moins original que lançait l’agence de communication Herezie : le feu sacré ! Loin des standards des concours classiques qui offrent des opportunités de (précieux) conseils ou d’entrées dans des accélérateurs, Herezie soulignait que le véritable nerf de la guerre pour les start-ups était (et est toujours) l’argent en proposant d’apporter son soutien financier à l’heureuse élue.

L’agence avait fixé sa dotation initiale à 15 000 €. Elle avait la possibilité d’augmenter de 10€ par tweet mentionnant le hashtag #lefeusacré (1 tweet par tweetos bien sûr) dans les 15 heures suivant l’embrasement, c’est-à-dire le début du concours qui était le 15 janvier 2015 à 17h.

2 mois après, Herezie nous apporte deux nouvelles : le montant final de sa dotation qui est de 22 220 €, et le nom de la start-up choisie parmi les 108 candidates !

Declic et des trucs, le feu sacré de l’éducation et de l’apprentissage

Le choix d’Herezie s’est donc porté sur la toute jeune start-up crée en juillet 2014 Déclic et des Trucs. Cette initiative portée par 4 jeunes entrepreneurs innove en développant des contenus ludo-éducatifs pour les 7-10 ans.

DECLIC et des TRUCS envoie chaque mois des Kits créatifs et éducatifs pour mettre en pratique les notions scolaires et ainsi mieux préparer les enfants à leur entrée au collège.

Construire un cube en origami pour comprendre la géométrie ou encore faire un gâteau pour maîtriser les volumes, sont autant d’astuces simples et concrètes pour déclencher le fameux « Declic » tant recherché.

Declic et des trucs 3collaboractifs

« Ce projet d’entreprise a retenu notre attention pour son approche fondamentalement hérétique. Tout d’abord, il s’inscrit avec pertinence dans des tendances sociétales porteuses (cf. e-learning, le fait soi-même, les kits et boxes…). Ensuite parce qu’il véhicule des valeurs nobles d’apprentissage, de création et de transmission. Enfin parce qu’il développe une nouvelle forme d’apprentissage interactive et ludique qui allie la pratique à la théorie. » précisait Pierre Callegari, co-fondateur d’Herezie.

Le ludique, nouvelle base d’un apprentissage autonome

Déclic et des Trucs n’a, disons-le nous, pas l’objectif de remplacer l’école, mais prône surtout un apprentissage différent déjà largement initié dans les formations supérieures avec les MOOC, cours en lignes ou autres formes d’auto-apprentissage.

La start-up mise sur le fait que tous les enfants sont différents et qu’ils n’aiment pas tous les mêmes choses, de même qu’il n’y a pas qu’une seule forme d’intelligence mais plusieurs et que nous sommes tous doués pour quelque chose !

Ainsi Déclic et des Trucs a eu l’idée de proposer des kits qui font appel à différentes capacités présentes en chacun d’entre eux. Ce sont des activités en lien avec diverses formes d’intelligence pour que chacun s’y retrouve et s’exprime à sa manière.

Entre cuisine, Origami, peinture, enquêtes et jeux, les manières d’apprendre sont multiples. Chaque enfant ayant aussi le choix pour travailler ce qui lui plaît le plus de la façon qui lui plaît le mieux !

Côté développement, la start-up fait déjà son trou alors qu’elle n’a même pas fêter sa première année d’existence. Nul doute qu’avec le soutien d’Herezie on entende reparler de Déclic et des Trucs dans les mois à venir !

http://mediacenter.orange.com/fr/live-Orange-TV/Emissions/Hello-startup/Declic-et-des-Trucs-apprendre-en-s-amusant

Fabien Clouet  /  @fabienclouet

Tatacaisse : le covoiturage de courte distance entre étudiants !

tatacaisse_concours Trouver chaque jour une voiture pour aller en cours

Tatacaisse est une plate-forme de co-voiturage entre étudiants pour faire les trajets entre les domiciles et l’école. L’objectif est de permettre aux étudiants d’aller à coup sûr à l’école en voiture et ne plus être dépendant des transports en communs. Et puis, il faut bien avouer que c’est plus sympa et confortable de rencontrer d’autres étudiants et d’aller en cours en voiture. Mais pour y aller, on peut demander aux personnes de sa promo, de ses amis mais on a pas tout le temps quelqu’un qui peut nous emmener. Et puis quand on emmène nos amis, on est toujours le seul à payer les frais d’essence. Une fois ça va, dix fois ça commence à faire.

Un fonctionnement simple

Les conducteurs doivent simplement enregistrer leur adresse et celle de leur école pour proposer chacun de leurs trajets en un clic. Pour le passager, l’expérience est encore plus simple ! Il faut préenregistrer son adresse puis indiquer que nous souhaitons partir, l’application nous géo-localise et propose une liste de conducteurs prêts à nous emmener. Les transactions s’effectuent via des portefeuilles électroniques. Une fois l’accord validé, elles se font de manière automatique. Les créateurs du concept promettent des économies jusqu’à 65 € par mois pour les conducteurs. C’est intéressant quand on est étudiant !

Un positionnement de niche judicieux ? 

Reste aujourd’hui à se demander si le co-voiturage sur des trajets de courte distance est un marché existant…de plus exclusif au aux étudiants. Si oui, est-il intéressant pour les utilisateurs de payer une commission sur des accords de 2 ou 3€ ? Les fondateurs réalisent une phase de test à Rouen puis envisagent de se déployer sur des villes comme Reims, Rennes, Lille, Marseille, Bordeaux, Lyon et Montpellier. Cette stratégie leur permettra ensuite de proposer un service de co-voiturage pour proposer aux étudiants de rentrer chez leurs parents. Le monde du covoiturage est de plus en plus concurrentiel, en se positionnant sur la cible étudiante et sur la niche des courtes distances, Tatacaisse parviendra t’il à s’imposer ?
Il ne reste plus qu’à suivre leur évolution pour en savoir plus…

Vous pouvez suivre Tatacaisse sur http://tatacaisse.com, sur Facebook et sur Twitter .

Dimitri Marié – @dimitrimarie

CamPark : Arrêter de chercher, trouver une place libre en ville !

Campark 3collaboractifs

Trouver une place de parking en ville a toujours été un parcours du combattant… quand on a la chance d’en trouver une gratuite après avoir tourné 30 minutes. Pour y remédier, on est souvent obligé de trouver une application de parking participatif dans des parkings privés comme le fait par exemple Zenpark. Aujourd’hui, Campark vous propose une nouvelle façon de trouver des places publiques libres : la plus proche du cinéma, de votre magasin ou de votre lieu de rendez-vous pour ne pas perdre de temps !

Les créateurs sont partis d’un constat simple pour trouver une idée très intéressante : La France est un des pays les plus vidéo surveillés alors pourquoi ne pas exploiter ces images pour trouver les places libres ?!

Le principe de Campark est d’utiliser les flux vidéo des caméras de surveillance dans les lieux publics pour déterminer, grâce à un système d’analyse d’images, si une place est libre ou occupée dans une rue de la ville.

La plateforme CamPark repose sur :

  • L’analyse d’images permettant de déterminer en temps réel si une place est libre ou occupée
  • Un système central pour répertorier et d’actualiser en temps réel l’occupation des places de parking d’une ville
  • Une application mobile pour guider les utilisateurs en temps réel vers des places libres.

La plupart des flux vidéo des caméras de surveillance sont disponibles en France et dans de nombreux pays en OpenData, et quand on sait qu’il y a 25 millions de caméras dans le monde, on se dit qu’on pourrait bientôt ne plus tourner en rond à chaque fois qu’on veut se garer en ville !

Les créateurs de l’application proposeront un abonnement à ses utilisateurs mais également de la publicité géolocalisée et contextuelle.

Les collectivités pourraient être intéressées par ce concept car il permet de rentabiliser ses équipements sur les caméras et ne plus dépenser des sommes astronomiques pour des capteurs au sol.

CamPark devrait voir le jour dans les prochains mois ! Surveillons son arrivée sur le marché des applications pour arrêter de chercher une place pendant des heures et d’enchaîner les contraventions !

Vous pouvez déjà retrouver CamPark sur www.campark.fr et suivez leur évolution sur twitter @ProjetCamPark

Dimitri Marié – @dimitrimarie

Responsive Design à la Webschool Orléans

Webschool 3collaboractifs

Ce mardi se tenait la session mensuelle de la Webschool Orléans, avec au programme le responsive design. Retour sur l’événement web de la semaine qui se tenait à la CCI place du Martroi.

Le président Bertrand Laurentin présentait les actualités de l’association, avec en tête d’affiche le nouveau site web réalisé par le partenaire Kiwik. Un site bien sur conçu de façon responsive !

Le trésorier Philippe Guerin ne manquait pas non plus de mettre en valeur le fil d’actu twitter intégré. Un bon moyen de suivre les dernières infos de la #Webschool. Fil Twitter qui permet également à ceux qui n’ont pu venir de suivre la session en livetweet !

En plus des nombreux partenaires qui soutiennent la Webschool, Bertrand nous annonçait également l’arrivée d’un nouveau partenaire d’importance puisque Orange a décidé d’apporter son soutien à l’association orléanaise.

Pour parler du responsive design, la Webschool accueillait Pierre-Antoine VIALLON, directeur de communication de l’agence orléanaise ADS-Communication, créée en 1997.

Le web et la mobilité

Avant d’attaquer le responsive design, Pierre-Antoine faisait un petit tour d’horizon du web et des usages mobiles :

L’usage du web en connexion mobile a dépassé celui des connexions fixes (type PC) depuis l’année 2013.

Entre 2012 et 2014, respectivement +20% et +25% de la population française se sont équipés de smartphones et tablettes quand la part de français possédant un ordinateur portable reste stable. Preuve en est que la mobilité est en marche !

A noter qu’au premier trimestre 2012, 20 millions de tablettes étaient vendues dans le monde contre 80 millions au troisième trimestre de l’année 2014.

La mobilité est toutefois à nuancer en fonction des marchés visés. Sur le marché BtoC, le mobile représente aujourd’hui presque 50% du marché, cependant, il ne s’élève qu’à 15% sur le marché BtoB.

Un dernier chiffre pour conclure sur la consommation mobile du web : 1 français sur 3 utilise un smartphone régulièrement.

Le responsive design

S’il fallait définir le responsive design, Pierre-Antoine insiste sur le fait que le site que vous concevez n’est plus statique. Il bouge avec la taille de la fenêtre ou le format de l’écran du terminal. Parmi quelques exemples de bons élèves, Pierre-Antoine citait l’Elysée, ZD.net, Microsoft ou en plus local l’hôtel de l’abeille et bien sur la webschool.

Le contenu est donc liquide puisqu’il s’adapte. La page reste la même mais les CSS (feuilles de style) gèrent la mise en place et déplacent les éléments (menu compacté…) selon une logique de dégradation pour masquer certaines zones.

Responsive design webschool 3collaboractifs

Ci-dessus le site de la webschool en pleine page et format réduit

Concevoir son site avec le responsive design présente plusieurs avantages. Vous n’avez ainsi plus qu’un seul support à gérer et votre référencement s’en trouve optimisé. Par ailleurs, cela représente un bon compromis pour développer des premières versions de vos plateformes. Twitter a d’ailleurs développé Bootstrap, un framework en libre accès pour nous aider à travailler.

Cependant, le responsive design n’est pas la seule vérité du marché puisque les applications représentent depuis quelques années un moyen incontournable de se connecter via smartphones ou tablettes de part sa facilité d’accès. Le site mobile responsive peut en effet s’avérer plus long à charger puisqu’il faut passer par un navigateur. Il demande aussi une meilleure connaissance du media puisqu’il faut tester son interface sur tous les supports. Une contrainte de création puisqu’il faut adapter le déplacement et la dégradation de tous les blocs.

De manière générale Pierre-Antoine VIALLON décrivait le paysage web mobile comme assez mixte. Puisque si nous nous connectons sur les applications régulières, mais tout le reste du web se passe sur le navigateur. Et en tant que clients exigeants que nous sommes tous, nous critiquons le site dès que le moindre détail ne fonctionne pas. Imaginez donc que votre site ne s’adapte pas au format du smartphone de vos clients, un bon raté pour commencer votre relation avec lui. Vous l’aurez donc compris, la marche du responsive design n’est pas à rater !

Prochain rendez-vous à la webschool le 21 avril avec une thématique qui nous tient à cœur, l’économie collaborative. En espérant vous voir nombreux là-bas.

Fabien Clouet  /  @fabienclouet