Au travers de cette session et d'exemples de la vie de tous les jours nous vous expliquerons comment faire en sorte que vos développeurs et vos designers s'entendent bien. C'est primordial pour la réussite de projets SharePoint et la satisfaction client. L'objectif étant de délivrer des solutions belles, ergonomiques et fonctionnelles.

1. SharePoint : développeur vs
designer

2. Thanks to our sponsors!Merci aux commenditaires !

3. www.sharepointsummit.org
3
Il était une fois une designeuse
Sandrine GARCIA
Graphiste / intégratrice
Web/SharePoint
Ergonome en herbe
Travailleur autonome
sandeedesign@gmail.com

4. www.sharepointsummit.org
4
Il était une fois un développeur
Vincent BIRET
@baywet
http://bit.ly/vincentb
vbiret@outlook.com
Designer
« moyen »

5. 5
http://dribbble.com/shots/1337078--animated-Designer-vs-Developer

6. www.sharepointsummit.org
Le monde des designers et celui des
développeurs

7. www.sharepointsummit.org
Objectifs / Enjeux
7
Pourquoi avoir des Développeurs et
Designers qui s’entendent?
Projets plus finis
Synergie d’équipe
Plus heureux au travail
Plus efficaces

8. www.sharepointsummit.org
8
Agenda

9. www.sharepointsummit.org
Le Monde des
designers

10. www.sharepointsummit.org
10
Le design n’est pas que du coloriage
Esthétique = Cohérence avec une image corporative
Ergonomie / Optimisation de l'expérience de l'utilisateur
-> en fonction de son expérience
==> Adoption utilisateur<==

11. www.sharepointsummit.org
11
Les contraintes du designer
Avoir à négocier avec les «goûts» des
décideurs
Passer les barrières multiples de validation
Designer à partir d analyses incomplètes
 Volontairement
 Involontairement
Faire le pont entre analyse et technique

12. www.sharepointsummit.org
12
Niveau d’expertise du designer
Print
(communication
papier)
Web
(intégration
ou pas)
Rockstar Sharepoint
(intégration
HTML/CSS/SharePt)

13. www.sharepointsummit.org
13
Comment se faire aimer de son designer ?
• L'impliquer dès la phase d'analyse
• Produire des wireframes FILAIRES (sans éléments de couleurs ou
graphisme)
• Mettre du vrai contenu dans les Wireframes en variant les tailles de
texte / positionnements d'images etc.
• Indiquer tous les éléments de survols à designer
• Préciser le comportement du site (largeur fixe ? variable ? responsive ? )

14. www.sharepointsummit.org
Wireframes - exemples
14

15. www.sharepointsummit.org
15
Le Designer pourra vous aider aussi pour
Vos wireframes
La méthode des personnas
La méthode du tri de cartes

16. www.sharepointsummit.org
Le Monde des
développeurs

17. www.sharepointsummit.org
17
Contraintes du développeur
Faut que ça marche
Fiable
Performant
Pas de temps pour faire du « coloriage »
Changements incessants

18. www.sharepointsummit.org
Niveau d’expertise du développeur
18
Junior
(je connais à
peine l’asp.net)
Intermédiaire
(j’ai déjà touché à
SharePoint)
Rockstar
(je t’ai recodé le
compilo au passage)

19. www.sharepointsummit.org
19
Comment ne pas se faire détester par son
designer?
HTML: #id .classes (noms SharePoint?)
Pas de style en ligne
Sémantique HTML + balisage "propre" (ex:
block/inline)
Evolution des balises possible ?
Aviser si le balisage change en cours de travail
Parler le même langage!!!!
Préparer le terrain (scripts et autres outils)
Autonomie (accès TFS, ghostable)

20. www.sharepointsummit.org
20
Ghoster en librairie
Types de déploiements
 Hive
 Contenu
Solution : Ghoster les fichiers

21. www.sharepointsummit.org
21
Déployer les fichiers partagés

22. www.sharepointsummit.org
22
Demo – Ghosting/Code/Scripts

23. www.sharepointsummit.org
23
Résultat

24. www.sharepointsummit.org
Le cycle de vie proposé
Dev
Déploiement
AjustementsTests
Rapatriement
24

25. www.sharepointsummit.org
Création produit

26. www.sharepointsummit.org
26
Création d’un produit sur SharePoint
Réflexion sur la logique des écrans, la
disposition de l'information
Donner identité à un produit : efficace mais pas
marketé, les ventes s'en ressentent

27. www.sharepointsummit.org
Logos – Suite Office / Adobe
27

28. www.sharepointsummit.org
Les icones - Oceanik
28

29. www.sharepointsummit.org
Le Bandeau - Oceanik
29

30. www.sharepointsummit.org
Design alternatif
30

31. www.sharepointsummit.org
Bonnes pratiques
Fournir des captures d’écrans
de mise en contexte (pour des
icones par exemple)
Communiquer dans le même
langage( se faire un lexique ?)
Monkey tests
Tests A/B
31

32. www.sharepointsummit.org
Conclusion
Ce qu’il faut retenir
Dev’s & Designers = alliés != ennemis
Communiquez!!!
S’adapter au niveau d’expertise des personnes
Simplifiez vous le travail
Bonnes pratiques
32

33. Thank you for your attention!
This presentation will be available on the Montreal
SharePoint Summit web site after the event.
Merci de votre attention !
Cette présentation sera disponible sur le site internet
de SharePoint Summit Montréal, après l’événement.
Sandrine
sandeedesign@gmail.com
Vincent
http://bit.ly/vincentb
vbiret@outlook.com
@baywet

34. SVP évaluez ma session!
Complétez le sondage et courez la chance
de gagner une tablette Surface
Please rate this session!
Fill out the survey and get a chance to win a Surface