SlideShare une entreprise Scribd logo
Designers
et développeurs
UNE MEILLEURE COLLABORATION
POUR DE MEILLEURES APPS
Hello!!! …world
Les designers vs les développeurs
QUI SOMMES NOUS ?
créative minutieux
organiséimpulsive
analysteempathique
Les armes de chacun
BLEND N’EST PAS PHOTOSHOP…
Les armes de chacun
Designer
 Guidelines
 Sets d’icônes, Kuler
 Balsamiq, outils de wireframing
 lllustrator (icônes, logos)
 Photoshop
 Langage visuel
Développeur
 Modèle Vue Contrôleur
 Visual Studio
 Notepad ++
 Blend
 Langage objet ^^
Pourquoi sommes nous différents ?
C’EST PHYSIQUE… ?
Le fonctionnement du cerveau humain
Main gauche
Œil gauche
Pied gauche
Main droite
Œil droit
Pied droit
Neuro-droitiers
30%
Neuro-gauchers
70%
La répartition dans la population
Un environnement qui s’adapte
Des apps qui s’adaptent
Des atouts différents
L’UNION FAIT LA FORCE…
+
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adaptable
Global
Empathique
Impulsif
Provocateur
Synthétique
Imaginatif
Les différences de caractère
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adaptable
Global
Empathique
Impulsif
Provocateur
Synthétique
Imaginatif
Les différences de caractère
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adaptable
Global
Empathique
Impulsif
Provocateur
Synthétique
Imaginatif
Les différences de caractère
L’un sans l’autre ne devrait pas exister
TV d’Orange
VDM
SFR TV
Jeuxvideo.com
Super
Appli
Minutieux
Précis
Organisé
Analytique
Perfectionniste
Global
Empathique
Imaginatif
L’union fait la force…
Les bonnes pratiques
CHACUN PEUT FAIRE UN PAS VERS L’AUTRE…
hiiiiiii
Designer Développeur
LUI FACILITER L’IMPLÉMENTATION…
PS Etiquette
Quelques exemples
 Grouper les calques par dossier
pour mieux s’y retrouver
Quelques exemples
 Privilégier les méthodes non
destructives (masques)
Quelques exemples
 Mettre les polices utilisées à
disposition du développeur
Quelques exemples
 Créer un fichier pour les
éléments d’interface
 Proposer des motifs qui se
répètent
Quelques exemples
Pensez aux états
La pipette n’est pas mon amie
Et pourquoi pas apprendre à coder ?
 http://www.codecademy.com/fr
 https://www.codeschool.com/
COMPRENDRE ET APPRENDRE À S’EXPRIMER
I .
Pantone
Développeur Designer
L’inspiration
 Dribbble
 Behance
Montrer ce qu’on veut reproduire
 http://capptivate.co/
Un menu qui tombe
comme un papillon!
Wut?
50 niveaux de gris
 http://colorschemedesigner.com/
 http://design-seeds.com/
 http://colourco.de/
 Kuler
Faire confiance en Kuler
Apprendre les bases
 Typographie : http://imwillryan.com/typefun01/
 Apprendre les bases du design : http://hackdesign.org/
Collaboration ne veut pas dire sacrifice
ON PEUT AVOIR UNE RELATION WIN-WIN
Ça te fera de la pub…
 http://salut-l-artiste.tumblr.com/
Oui mais je n’ai pas d’argent…
 Echange de bons procédés…
• Echange de connaissances
• Points DVLUP
 Si application avec publicité, soyez malin !
Oui mais je n’ai pas d’argent…
70%
30%
Peut-on être bi ?
DEVELNER
 « The web is my canvas, but I am not a painter, I am a writer and I
create digital verbs. »
 « to design an entire website in photoshop is like making a clay
model of a car. Sure, it may look great, but how do the individual
parts work in relation to each other? How comfortable are the seats?
What’s under the hood? How does it perform on the highway, in the
city, and on winding mountain roads?”
 medium.com/web-design-and-development/1d21b6e63953
Nos trucs et astuces
LES PETITS PLUS QUI FONT DE GRANDES CHOSES
C’est pas la
taille qui
compte…
Lorem Ipsum
 Résultat plus naturel
 http://www.lipsum.com
 Schnapsum
Comment tourner un path sous
Blend comme un boss
SVG vers Expression Blend
 Inkspace
 XAML
Des logos plus Métro
DEUX SPEAKERS, DEUX STYLES
Photoshop : des logos plus W8 like
 Baguette magique
 Incrustation de couleur
Logo Métro : LayerMask style
Long shadow
Rayures
Avez-vous des questions ?
@RUDYHUYN
@JULIEGRI
SOURCES :
• Cerveau gauche, cerveau droit (Editions Hachette)
• http://www.medecine-et-sante.com/maladiesexplications/droitiergaucher.html
• http://www.cerveauetpsycho.fr/ewb_pages/a/article-droitiers-gauchers-et-oeil-dominant-19887.php
• http://tpe-lateralite-cerebrale.e-monsite.com/pages/hemisphere-cerebraux/les-hemispheres-cerebraux.html
HORS-SUJET

Contenu connexe

En vedette

Cyclor - Boues activées par réacteur biologique séquencé
Cyclor - Boues activées par réacteur biologique séquencéCyclor - Boues activées par réacteur biologique séquencé
Cyclor - Boues activées par réacteur biologique séquencé
Degrémont
 
Reseaux sociaux réunion collective
Reseaux sociaux réunion collectiveReseaux sociaux réunion collective
Reseaux sociaux réunion collectiveYannOxylane
 
Guide sport
Guide sport Guide sport
Guide sport
JA33
 
Présentation des services Restolab
Présentation des services Restolab Présentation des services Restolab
Présentation des services Restolab
Christophe Verhelst
 
Les statistiques
Les statistiquesLes statistiques
Les statistiques
jocelynerichard
 
Un homme triste à en mourir
Un homme triste à en mourirUn homme triste à en mourir
Un homme triste à en mourir
Emmanuel Buriez
 
Tour 1 silente
Tour 1 silenteTour 1 silente
Tour 1 silente
sigmund FREUD
 
20 trucs pour augmenter le trafic de votre blog
20 trucs pour augmenter le trafic de votre blog20 trucs pour augmenter le trafic de votre blog
20 trucs pour augmenter le trafic de votre blog
Florent Bertiaux
 
Au cœur de la route des vins
Au cœur de la route des vinsAu cœur de la route des vins
Au cœur de la route des vinsCGLpmtde
 
Prototype Recycode
Prototype RecycodePrototype Recycode
Prototype Recycode
recycode
 
Terminologia Compu
Terminologia CompuTerminologia Compu
Terminologia Compu
Luis Rv
 
Twitter des fondamentaux à la veille
Twitter des fondamentaux à la veilleTwitter des fondamentaux à la veille
Twitter des fondamentaux à la veille
Faber Content
 
Presentation1.pptx hakkim
Presentation1.pptx hakkimPresentation1.pptx hakkim
Presentation1.pptx hakkim
Hakkim Shajahan
 
Luxury Libraries In Europe
Luxury  Libraries In  EuropeLuxury  Libraries In  Europe
Luxury Libraries In Europe
Natasa Muharemi
 
La propiedad horizontal después de la reforma del código civil catalán
La propiedad horizontal después  de la reforma del código civil catalánLa propiedad horizontal después  de la reforma del código civil catalán
La propiedad horizontal después de la reforma del código civil catalán
José Carlos Piñero Pantín
 
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
ProGobernabilidad Perú
 
2047
20472047
2047
BRANDON99
 

En vedette (20)

Cyclor - Boues activées par réacteur biologique séquencé
Cyclor - Boues activées par réacteur biologique séquencéCyclor - Boues activées par réacteur biologique séquencé
Cyclor - Boues activées par réacteur biologique séquencé
 
Reseaux sociaux réunion collective
Reseaux sociaux réunion collectiveReseaux sociaux réunion collective
Reseaux sociaux réunion collective
 
Guide sport
Guide sport Guide sport
Guide sport
 
3 c-etude fin
3  c-etude fin3  c-etude fin
3 c-etude fin
 
Médiation citadelle
Médiation citadelleMédiation citadelle
Médiation citadelle
 
Rallye francophone 2013
Rallye francophone 2013Rallye francophone 2013
Rallye francophone 2013
 
Présentation des services Restolab
Présentation des services Restolab Présentation des services Restolab
Présentation des services Restolab
 
Les statistiques
Les statistiquesLes statistiques
Les statistiques
 
Un homme triste à en mourir
Un homme triste à en mourirUn homme triste à en mourir
Un homme triste à en mourir
 
Tour 1 silente
Tour 1 silenteTour 1 silente
Tour 1 silente
 
20 trucs pour augmenter le trafic de votre blog
20 trucs pour augmenter le trafic de votre blog20 trucs pour augmenter le trafic de votre blog
20 trucs pour augmenter le trafic de votre blog
 
Au cœur de la route des vins
Au cœur de la route des vinsAu cœur de la route des vins
Au cœur de la route des vins
 
Prototype Recycode
Prototype RecycodePrototype Recycode
Prototype Recycode
 
Terminologia Compu
Terminologia CompuTerminologia Compu
Terminologia Compu
 
Twitter des fondamentaux à la veille
Twitter des fondamentaux à la veilleTwitter des fondamentaux à la veille
Twitter des fondamentaux à la veille
 
Presentation1.pptx hakkim
Presentation1.pptx hakkimPresentation1.pptx hakkim
Presentation1.pptx hakkim
 
Luxury Libraries In Europe
Luxury  Libraries In  EuropeLuxury  Libraries In  Europe
Luxury Libraries In Europe
 
La propiedad horizontal después de la reforma del código civil catalán
La propiedad horizontal después  de la reforma del código civil catalánLa propiedad horizontal después  de la reforma del código civil catalán
La propiedad horizontal después de la reforma del código civil catalán
 
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
Iniciativas de la Sociedad Civil para una Estrategia de Datos Abiertos en el ...
 
2047
20472047
2047
 

Similaire à Designers & Développeurs ; une meilleure collaboration pour de meilleures apps

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
Concept Image
 
Conference pitch l'ux design a ta grand-mere
Conference pitch l'ux design a ta grand-mereConference pitch l'ux design a ta grand-mere
Conference pitch l'ux design a ta grand-mere
Benjamin Richy
 
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...Pixelsfestival
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
NiceToMeetYou
 
Mobile design
Mobile designMobile design
Mobile design
Hadina RIMTIC
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Web à Québec
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Microsoft Décideurs IT
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
Loïc Vanderschooten
 
Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"
Kate De Gourdon
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
Concept Image
 
bloomr-kawaa-design-la-restitution
bloomr-kawaa-design-la-restitutionbloomr-kawaa-design-la-restitution
bloomr-kawaa-design-la-restitutionRemi Rivas
 
Atelier2_améliorer ma présence sur le web_Nicolas Monseigne
Atelier2_améliorer ma présence sur le web_Nicolas MonseigneAtelier2_améliorer ma présence sur le web_Nicolas Monseigne
Atelier2_améliorer ma présence sur le web_Nicolas MonseignePays de Bergerac
 
Le design UX
Le design UXLe design UX
Le design UX
Rizomer
 
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
ツ Thomas Nicot
 
Création ou refonte de site Internet
Création ou refonte de site InternetCréation ou refonte de site Internet
Création ou refonte de site Internet
Office de tourisme Aunis Marais Poitevin
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
Carine Lallemand
 
10 tendances digitales pour 2016
10 tendances digitales pour 201610 tendances digitales pour 2016
10 tendances digitales pour 2016
NiceToMeetYou
 
Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?
Chambé-Carnet
 
Créer son blog
Créer son blogCréer son blog
Créer son blog
Pays Saint Félicien
 
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
Stratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOMStratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOM
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
IANTERNAUTE
 

Similaire à Designers & Développeurs ; une meilleure collaboration pour de meilleures apps (20)

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Conference pitch l'ux design a ta grand-mere
Conference pitch l'ux design a ta grand-mereConference pitch l'ux design a ta grand-mere
Conference pitch l'ux design a ta grand-mere
 
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...
Designers et développeurs: une meilleure collaboration pour de meilleurs Apps...
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
Mobile design
Mobile designMobile design
Mobile design
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
 
Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
bloomr-kawaa-design-la-restitution
bloomr-kawaa-design-la-restitutionbloomr-kawaa-design-la-restitution
bloomr-kawaa-design-la-restitution
 
Atelier2_améliorer ma présence sur le web_Nicolas Monseigne
Atelier2_améliorer ma présence sur le web_Nicolas MonseigneAtelier2_améliorer ma présence sur le web_Nicolas Monseigne
Atelier2_améliorer ma présence sur le web_Nicolas Monseigne
 
Le design UX
Le design UXLe design UX
Le design UX
 
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
 
Création ou refonte de site Internet
Création ou refonte de site InternetCréation ou refonte de site Internet
Création ou refonte de site Internet
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
 
10 tendances digitales pour 2016
10 tendances digitales pour 201610 tendances digitales pour 2016
10 tendances digitales pour 2016
 
Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?
 
Créer son blog
Créer son blogCréer son blog
Créer son blog
 
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
Stratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOMStratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOM
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
 

Designers & Développeurs ; une meilleure collaboration pour de meilleures apps