3 suisses : "webdesign / concept"
-
Upload
david-desrousseaux -
Category
Internet
-
view
1.251 -
download
1
description
Transcript of 3 suisses : "webdesign / concept"
David Desrousseaux [email protected]
@desrousseaux
« Webdesign / Concept »
Mai – Juin 2014
Forma1on pro / 2014
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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 ?
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
Exemple print
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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…
David Desrousseaux [email protected]
@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 …
David Desrousseaux [email protected]
@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 ?
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
La réflexion marke5ng / 4 Cas : le site « Media »
Objec5f n°1 Selon vous ?
KPI / ss-‐Objec5fs A votre avis ?
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
La réflexion marke5ng / 5 Cas : le site « Réseau social »
Objec5f n°1 Selon vous ?
KPI / ss-‐Objec5fs A votre avis ?
David Desrousseaux [email protected]
@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 ? »
David Desrousseaux [email protected]
@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 » …
David Desrousseaux [email protected]
@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 »
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
« brainstorming : site web »
Etape 1 : Phase d’échauffement « Produc5on individuelle d’un mood board / 100% destructuré »
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
2e méthode de créa5vité « Méthode des 6 chapeaux »
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
Exercice collec5f Etape 2
« Produc5on collec5ve d’une carte mentale / mindmap sur le mood board. »
David Desrousseaux [email protected]
@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 !
David Desrousseaux [email protected]
@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 !
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
Ergonomie : UI / GUI « Graphical » User interface
1. Lisibilité 2. Sobriété
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
Ergonomie : UX User eXperience
1. Accessibilité 2. Disponibilité 3. Rapidité 4. Interac5vité 5. U5lisabilité
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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 »
David Desrousseaux [email protected]
@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…
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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.
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
Développons notre culture web
Lister des « best-‐prac1ces »
Trouver de l’inspira1on
Connaître les tendances
David Desrousseaux [email protected]
@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
David Desrousseaux [email protected]
@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é !!
David Desrousseaux [email protected]
@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. »
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
… Alors ? Les leçons à 5rer sur le travail de groupe
??
David Desrousseaux [email protected]
@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. »
David Desrousseaux [email protected]
@desrousseaux
Mai – Juin 2014
Forma1on pro / 2014
The END Merci !
[email protected] @desrousseaux