3 suisses : "webdesign / concept"

David Desrousseaux [email protected]

@desrousseaux

« Webdesign / Concept »

Mai – Juin 2014

Forma1on pro / 2014


@desrousseaux

1 / Objec5f pédagogique : Face à un projet client, proposer un concept et un environnement graphique adapté au web.

2 / Compétences à acquérir : Analyse ar1s1que de l’univers, des couleurs et mise en place d’un mood-‐board.

Mai – Juin 2014

Forma1on pro / 2014

Rappel des objec5fs


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Pour commencer…

Ø  Quand / Dans quel cadre ? Ø  De quoi s’agissait-‐il ? Ø  Sur quel site ? Ø  Pourquoi avez-‐vous trouvé cela créa1f ?

Avez-‐vous vu quelque chose de créa5f sur le web récemment ?


@desrousseaux

C’est quoi un concept ?

La créa1on d’une concep1on graphique vs. d’une charte graphique, c’est créer l’univers, définir le design visuel que l’on donne à un support, à une communica1on.

Charte graphique = déclinaison pra1que de la concep1on graphique.

Mai – Juin 2014

Forma1on pro / 2014

Défini5ons 1/2


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Exemple print


@desrousseaux

Forma1on pro / 2014

Exemple web


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Différences print / web 1.  Tout est mesurable => Choix graphiques objec1fs vs. Subjec1fs 2.  Beaucoup d’anglicismes 3.  (…)

4.  Et surtout… il existe pleins de manières de consulter le web ! 1.  Support différents : desktop / phablet / mobile… 2.  Configura1ons différentes : Windows, Android, iOS… 3.  Vitesses de chargement différentes : ADSL / 4G… 4.  Pleins de « browsers » (=navigateur web) : Firefox, IE, Chrome, Opera…

cf. IE6 countdown


@desrousseaux

C’est quoi le marke5ng ?

Wikipedia « L'ensemble des ac1ons ayant pour objec1f de prévoir ou de constater, et le cas échéant, de s1muler, susciter ou renouveler les besoins du consommateur, en telle catégorie de produits et de services, et de réaliser l'adapta1on con1nue de l'appareil produc1f et de l'appareil commercial d'une entreprise aux besoins ainsi déterminés. »

Mai – Juin 2014

Forma1on pro / 2014

Défini5ons 2/2


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

La réflexion marke5ng / 1 Cas : le site « corporate »

Objec5f n°1 développer la visibilité de l'offre et de la marque

Sous-‐objec5fs : valida1on de la lisibilité de l'iden1té de la société, améliora1on de la qualité du trafic…


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

La réflexion marke5ng / 2 Cas : le site « ecommerce / marketplace »

Objec5f n°1 transformer les visites en ventes

KPI Taux de refus, Taux d’abandon du panier, Taux de conversion, Taux de rebond, VU / mois …


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

La réflexion marke5ng / 3 Cas : le site « Landing page / Advergame »

Objec5f n°1 alimenter une BDD de prospects pré-‐qualifiés

KPI / ss-‐Objec5fs A votre avis ?


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

La réflexion marke5ng / 4 Cas : le site « Media »

Objec5f n°1 Selon vous ?



@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

La réflexion marke5ng / 5 Cas : le site « Réseau social »

Objec5f n°1 Selon vous ?



@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Les 3 méthodes de créa5vité Êtes-‐vous cerveau droit / cerveau gauche ?

Youtube : « hbdi + danseuse » youtube.com/watch?v=BZevSglezAE « Êtes-‐vous cerveau gauche ou cerveau droit ? »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

1ère méthode de créa5vité « Méthode HDBI ou Herrmann » Cerveau droit / Cerveau gauche

Objec5f : permeore de sor1r des jugements de valeurs sur le "bon" ou le "mauvais" fonc1onnement d'une personne dans un groupe. « Mieux se connaître » « Mieux communiquer avec mon équipe » « Développer votre créa1vité » « Mieux coacher » « Savoir comment les autres pensent » « S1muler le travail en équipe » …


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Exercice individuel « L’acte créa5f »

« Puiser quelques informa1ons provenant de la mémoire (logique ou irra1onnelle) et de les réorganiser d'une manière nouvelle, poussée par l'imagina5on, la sensibilité, l'ins5nct, la spontanéité, l'inspira5on, les émo5ons fortes. » Ex : voiture => vitesse, sécurité, transport, route, passager, co-‐voiturage…

=> Brainstorming sur le terme « site web »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

« brainstorming : site web »

Etape 1 : Phase d’échauffement « Produc5on individuelle d’un mood board / 100% destructuré »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

2e méthode de créa5vité « Méthode des 6 chapeaux »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Exercice collec5f Etape 2

« Produc5on collec5ve d’une carte mentale / mindmap sur le mood board. »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

3e méthode de créa5vité « CPS : Crea5ve Problem Solving »

Une checklist en 8 étapes : 1.  Iden1fier les besoins 2.  Les problèmes 3.  Les objec1fs principaux 4.  Les idées depuis ces obj. 5.  Faire une sélec1on 6.  Budget / Planning 7.  Adhésion 8.  Plan d’ac1on

Idéal pour la ges1on de projet !


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Les techniques de créa5vité

hop://fr.pinterest.com/pin/170362798378683040/ Toutes les expériences sont sources d’idées

Ø  Faire appel à ses 5 sens Notre subconscient trie les idées et les stocke

Ø  Les expériences sont interconnectées Ø  … Ø  Puis, on imagine de nouvelles connexions

Ø  Ça y’est, une nouvelle idée est née !


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Les bases de l’ergonomie « 2 univers, pour un contenu adapté au web »

User Interface User eXperience

UX UI


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : UI / GUI « Graphical » User interface

1.   Lisibilité 2.   Sobriété


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Lisibilité [UI] •  Choix de la Fonte = fin de la limite Arial / Verdana | Times | Comic

cf. Google Fonts •  Taille des textes •  Couleur •  Alignement •  Interlignage •  Interleqrage •  … •  Et un contenu simple à lire

et sans jargon ;) cf. score de lisibilité Flesch


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Sobriété [UI] •  Flat design vs. 3D/Skeuomorphisme

cf. style Metro / Windows •  Logos over-‐flat vs. Logos + sophis1qués

=> « manque de souveraineté » cf. CubaCouncil

•  Tendance au « long shadow » •  U1lisa1on du blanc

cf. IFTTT


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : UX User eXperience

1.   Accessibilité 2.   Disponibilité 3.   Rapidité 4.   Interac5vité 5.   U5lisabilité


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Accessibilité [UX] •  « Interopérabilité »

Non limité à une res1tu1on spécifique / Responsive ex : Fonc1on « Lecture » sous Safari presse-‐citron.com ex : Flash

•  Normes WAI RGAA + WCAG

•  Choix des couleurs Colour Contrast Analyzer CCA2

•  Légendes Légendes visibles / alterna1ves

•  Zoom « Ctrl + moleoe » Autre cas : « Zoom XXL » Darty cf. richcommerce.fr


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Disponibilité [UX] •  Site disponible = « site qui ne plante pas »

=> sen1ment désagréable / néga1f => abandon du client et de l’acte d’achat

•  3 à 5 jours de non disponibilité => déréférencement chez Google

•  Best prac5ce des pages 404

•  Fun / ton décalé •  Moteur de recherche intégré

+ « suggest »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Rapidité [UX] •  En termes techniques

•  Temps de chargement / temps d'accès Cf. Compteur Google Web Fontes GTMetrix / Pingdom

Ø  Cas des Sprites •  Cas des Widgets

•  En termes de contenus •  chargement asynchrone :

•  5-‐7 secondes storytelling vs. Longues videos Vine vs Youtube

•  Ar1cles de brève vs. Ar1cles de fond cf. Melty, Locita…


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : Interac5vité [UX] •  Formulaires

•  Champs de saisie : contact, commentaire… •  Boutons d'ac1on

•  Eye-‐catcher cas : Fiche produit Webdistrib

•  Menus / Liens •  URL internes vs URL sortantes •  Clic vs. Survol cf. « menu 3Suisses »

•  Ges5on d’événement •  Scroll => Scroll parallax •  Focus => Placeholder •  « Flash in flash » •  Zones fixes cf. Fiche produit Decathlon


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Ergonomie : U5lisabilité [UX] •  « Règle des 3 clics » •  Sens de lecture « F-‐paoern » •  La zone de flooaison / zone « above the fold »

cf. Google Browser Size •  Elements de ré-‐assurance / Tiers de confiance

Badge Google, FIA-‐NET, eKomi… •  Fil d’ariane / Breadcrumb •  Iconisa1on graphique, pour donner du sens !

Cf. Font awesome : bouton d’ac1on, URL sortante Menu ex : Magento


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

•  Lisibilité •  Sobriété •  Accessibilité •  Disponibilité •  Rapidité •  Interac1vité •  U1lisabilité

Evalua5on de fiches produit « Matrice d’évalua5on / Graphique radar »

vs.

.fr .no

vs.


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Développons notre culture web

Lister des « best-‐prac1ces »

Trouver de l’inspira1on

Connaître les tendances


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Le webdesign en 2014 « Les 10 tendances, par Vanksen »

hop://fr.slideshare.net/Vanksen/les-‐10-‐tendances-‐webdesign-‐de-‐2014-‐by-‐vanksen


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Réaliser un Mockup Mockup / Wireframe / Zoning

Réalisons un squeleoe de fiche produit sur moqups.com Cas : Ø  Paire de chaussures Ø  Avec un prix en promo1on Ø  Et une zone de croisement de produits Ø  …le reste : laissons place à votre

créa1vité !!


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

Phase 2 : Habillage Créons une maqueoe sous Photoshop en binôme, avec des ou1ls d’aide à la créa1vité, en sélec5onnant 1 mockup. Adobe Kuler / Color Hunter + Color Thief Stripe Generator Quick Ribbon Jquery UI … « Le designer répondra aux demandes du chef de projet du binôme, mais s’autorise à être force de proposi5on. »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

… Alors ? Les leçons à 5rer sur le travail de groupe

??


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

1.  Créer un climat d’ouverture 2.  Être curieux => Avoir une bonne culture générale 3.  Être rigoureux => Déterminer 1 objec5f précis 4.  S’arrêter et prendre le temps d’observer 5.  Eviter la censure 6.   Être à l’écoute des retours externes :

accepter les remarques et construire sur ses idées et celles des autres. 7.  Ne pas se décourager, pour mo1ver sa créa1vité 8.  Adopter une a�tude ludique 9.  Et … Changer la musique dans son casque !

Les 8 condi5ons pour concevoir « il faut contribuer à développer un sen1ment de sécurité psychologique. »


@desrousseaux

Mai – Juin 2014

Forma1on pro / 2014

The END Merci !

[email protected] @desrousseaux

3 suisses : "webdesign / concept"

Internet