Design systems : Bench et reco sur les outilsIdean France
Cette liste d’outils permet de donner une bonne vision d’ensemble de ce qui existe aujourd’hui sur le marché. Les outils de design sont en évolution constante et rapide ces dernières années donc il faut s’attendre à beaucoup d’autres nouveautés. Pour en savoir plus, visionnez cette présentation réalisée par Audrey Hacq, Lead Designer chez Backelite
Nous vous partageons cette présentation sur la recette graphique, réalisée par Aurélie Radom, Directrice Artistique / UI Designer chez Backelite. Au programme :
La collaboration entre Designers et Développeurs
- Qu'est-ce qu'une recette graphique ? - petite définition
- Une check-list non exhaustive (à destination des UI / UX / Dev) des éléments à vérifier lors d'une phase de recette, que vous pourrez étoffer / compléter
- Une liste d'outils (extensions web et apps) facilitant la recette du côté des designers et du côté des devs avec des fonctionnalités inspect, détection de typos, couleurs, superposition de maquettes en overlay, screenshots full page etc.
- Les bonnes pratiques avec le process idéal du côté des UI
Design Systems : à votre marque, prêts, partez !Idean France
“Design System”, il semble que ce mot soit sur toutes les lèvres en ce moment… Mais qu’est-ce que cela signifie vraiment ? Quels sont les différents types de Design Systems ? Par où commencer et quelles sont les bonnes questions à se poser ?
Par Audrey Hacq, Lead Designer chez Backelite
Et parce que cohérence et productivité ne doivent pas rimer avec uniformisation, découvrez comment bien démarrer vos projets avec un concept créatif. Une présentation de Florian Cordier, Creative Lead chez Backelite : http://bit.ly/2lTCciA
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...Vincent Biret
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.
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...Flupa
Dans l’environnement constamment changeant des nouvelles technologies, les designers UX doivent souvent pouvoir communiquer leurs connaissances par d’autres voies que des documents longs à préparer ou trop spécialisés. Quelles autres outils et techniques sont à notre disposition ? Dans quel contexte peut-on les utiliser ?
Figma Paris Event #2- DESIGN SYSTEM avec @Puzzle & @QontoHugo BEN BRAHIM
Speakers :
- Kristina Gudim : Head of Design & Innovation @Puzzle Formatrice Design Sytem @Le Laptop
- Alexandre Deslandes : Product Designer @Qonto
Au programme :
➡️ Design System : une vraie ou fausse bonne idée ?
➡️ Retour l’expérience et apprentissage sur l’implémentation du Design System chez @Qonto.
FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...Flupa
La problématique : les militaires appelés à partir en OPération EXtérieure doivent accomplir une série de tâches administratives précédant leur départ. Ces parcours et leur relation avec les différents services s’avèrent très complexes et irritants dans un contexte déjà stressant. Les personnes touchées par cette problématique étant nombreuses, il a été décidé d’organiser un Design Sprint d’une semaine afin de réunir toutes les parties prenantes, et en particulier les militaires issus des 3 armées afin de les faire participer à la conception de leur futur outil, un portail web. Notre rôle en tant que designers (4 UX designers + 1 directeur artistique) a été d’animer les différents ateliers de conception, de revoir les parcours utilisateurs avec les militaires et de construire progressivement un prototype sous la forme de wireframes et de maquettes graphiques.
Les semaines qui ont suivi ce Design Sprint ont permis d’aboutir à un prototype plus détaillé, la réalisation de l’ensemble des wireframes et d’une planche de composants graphiques qui ont servi de base aux premiers développements.
Ce que nous souhaitons illustrer à travers ce retour d’expérience :
– le processus d’un Design Sprint
– l’approche collaborative avec les utilisateurs et plus largement l’ensemble des parties prenantes (commanditaire, utilisateurs, consultants, designers)
– l’expérience humaine : la rencontre des militaires et des designers, coupés du monde sur une base de défense pendant 5 jours.
Design systems : Bench et reco sur les outilsIdean France
Cette liste d’outils permet de donner une bonne vision d’ensemble de ce qui existe aujourd’hui sur le marché. Les outils de design sont en évolution constante et rapide ces dernières années donc il faut s’attendre à beaucoup d’autres nouveautés. Pour en savoir plus, visionnez cette présentation réalisée par Audrey Hacq, Lead Designer chez Backelite
Nous vous partageons cette présentation sur la recette graphique, réalisée par Aurélie Radom, Directrice Artistique / UI Designer chez Backelite. Au programme :
La collaboration entre Designers et Développeurs
- Qu'est-ce qu'une recette graphique ? - petite définition
- Une check-list non exhaustive (à destination des UI / UX / Dev) des éléments à vérifier lors d'une phase de recette, que vous pourrez étoffer / compléter
- Une liste d'outils (extensions web et apps) facilitant la recette du côté des designers et du côté des devs avec des fonctionnalités inspect, détection de typos, couleurs, superposition de maquettes en overlay, screenshots full page etc.
- Les bonnes pratiques avec le process idéal du côté des UI
Design Systems : à votre marque, prêts, partez !Idean France
“Design System”, il semble que ce mot soit sur toutes les lèvres en ce moment… Mais qu’est-ce que cela signifie vraiment ? Quels sont les différents types de Design Systems ? Par où commencer et quelles sont les bonnes questions à se poser ?
Par Audrey Hacq, Lead Designer chez Backelite
Et parce que cohérence et productivité ne doivent pas rimer avec uniformisation, découvrez comment bien démarrer vos projets avec un concept créatif. Une présentation de Florian Cordier, Creative Lead chez Backelite : http://bit.ly/2lTCciA
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...Vincent Biret
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.
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...Flupa
Dans l’environnement constamment changeant des nouvelles technologies, les designers UX doivent souvent pouvoir communiquer leurs connaissances par d’autres voies que des documents longs à préparer ou trop spécialisés. Quelles autres outils et techniques sont à notre disposition ? Dans quel contexte peut-on les utiliser ?
Figma Paris Event #2- DESIGN SYSTEM avec @Puzzle & @QontoHugo BEN BRAHIM
Speakers :
- Kristina Gudim : Head of Design & Innovation @Puzzle Formatrice Design Sytem @Le Laptop
- Alexandre Deslandes : Product Designer @Qonto
Au programme :
➡️ Design System : une vraie ou fausse bonne idée ?
➡️ Retour l’expérience et apprentissage sur l’implémentation du Design System chez @Qonto.
FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...Flupa
La problématique : les militaires appelés à partir en OPération EXtérieure doivent accomplir une série de tâches administratives précédant leur départ. Ces parcours et leur relation avec les différents services s’avèrent très complexes et irritants dans un contexte déjà stressant. Les personnes touchées par cette problématique étant nombreuses, il a été décidé d’organiser un Design Sprint d’une semaine afin de réunir toutes les parties prenantes, et en particulier les militaires issus des 3 armées afin de les faire participer à la conception de leur futur outil, un portail web. Notre rôle en tant que designers (4 UX designers + 1 directeur artistique) a été d’animer les différents ateliers de conception, de revoir les parcours utilisateurs avec les militaires et de construire progressivement un prototype sous la forme de wireframes et de maquettes graphiques.
Les semaines qui ont suivi ce Design Sprint ont permis d’aboutir à un prototype plus détaillé, la réalisation de l’ensemble des wireframes et d’une planche de composants graphiques qui ont servi de base aux premiers développements.
Ce que nous souhaitons illustrer à travers ce retour d’expérience :
– le processus d’un Design Sprint
– l’approche collaborative avec les utilisateurs et plus largement l’ensemble des parties prenantes (commanditaire, utilisateurs, consultants, designers)
– l’expérience humaine : la rencontre des militaires et des designers, coupés du monde sur une base de défense pendant 5 jours.
Analyse sur le marché du meuble et comment SolidWorks et les solutions Axemble permettent d’innover, de collaborer et de développer de nouveaux produits.
Alphorm.com Formation AutoCAD 2021 : Les fondamentauxAlphorm
AUTOCAD fait sans doute partie des logiciels de dessin 2Dles plus performants actuellement. Il dispose d'une large gamme de fonctionnalités permettant de produire des dessins 2D et des informations techniques de qualité.
AUTOCADest un puissant logiciel de dessin technique2D. Plus précisément, le programme permet de concevoir, de visualiser, et bien entendu de modifier des dessins 2D. Il a été conçu pour être bien opérationnel et expert dans le domaine de la conception de dessin technique 2D.
Au cours de cette formation AUTOCAD, vous aborderez les phases d’un projet professionnel de dessin 2D d’une bride. Vous apprendrez à utiliser toutes les fonctionnalités de base du logiciel AUTOCAD, de la création à la présentation.
Avec cette formation AUTOCAD, vous apprendrez à utiliser le logiciel de manière optimale afin de devenir un expert en dessin technique 2D sous AUTOCAD.
Reposent sur une valeur Agile :
Les individus et leurs interactions plus que les outils et processus.
Les bénéfices des avatars :
- Restreint le nombre de tâches simultanées par personne, puisque chacun dispose d’un nombre limité de son avatar : le développeur devient plus facilement task-centric et monotâche,
- Améliore le management visuel par l’identification de “qui travaille sur quoi” : bénéfique pour l’auto gestion de l’équipe grâce à une représentation illustrée,
- Facilite la communication et la compréhension de l’organisation de l’équipe pour le Product Owner,
- Apporte du fun au sein des équipes, plus qu’un trigramme impersonnel et souvent illisible,
- Améliore la lisibilité au sein de votre plateforme d’intégration continue, par l’association de l’avatar à chaque compte utilisateur.
Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ?
Comment construire une architecture CSS modulaire ?
https://www.youtube.com/watch?v=nWWslZboeEE
Découvrez les méthodes utilisées pour concevoir une interface qui procure une bonne expérience utilisateur. Vous verrez l'ensemble des étapes d'un projet UX avec un aperçu des notions fondamentales du design.
De plus en plus, les interfaces tendent à sortir de l'ordinaire écran pour aller vers des formats aussi dynamiques qu'inattendus. Face à ce monde où tout objet peut devenir "écran", il est nécessaire de repenser les méthodologies de design pour favoriser cohérence, rapidité et créativité !
Découvrez notre guide pratique sur l'Atomic Design, une méthode métaphorique bien que concrète au service des designers !
Vous êtes développeur et vous n'arrivez jamais à reproduire les écrans fournis par les designers de votre équipe ? Vous êtes designer et vous ne parvenez pas à suivre le rythme de production pour fournir dans les temps les écrans aux développeurs ? L'Atomic Design, est une méthode de design par composants imaginée par Brad Frost, qui permet de sortir de la conception d'interfaces par pages ou en écrans. Cette méthodologie utilisée depuis longtemps par les développeurs permet de rapprocher les méthodes de conception d'interfaces et la façon dont celles-ci sont développées.
L'Atomic Design permet de créer des environnements de design cohérents, évolutifs et conformes aux attentes des utilisateurs à travers la création d'un Design System.
Les libertés pour un logiciel, c\'est de pouvoir l\'utiliser, le diffuser, et éventuellement le modifier comme on le désire, sans devoir payer ni rendre des comptes à une société. Le code source de ces logiciels est disponible sur internet, et des milliers de développeurs bénévoles répartis dans le monde entier collaborent à leur construction et leur mise à jour. Les produits réalisés par ces passionnés sont surprenants par leur qualité et par leur diversité. Nous vous présentons les plus belles réalisations "grand public" conçues pour tourner sous Windows ou MacOS, dans des domaines aussi variés que le traitement de texte, la gestion de tableurs, de présentations, le traitement d\'images, ... Les plus motivés, qui sont prêts à oublier Windows ou MacOS pendant quelques minutes, pourrons aussi s\'initier à l\'utilisation de Linux, le système libre de gestion d\'un ordinateur.
Aux Namur Linux Days 2006, j'ai présenté un aperçu d'OpenOffice.org Impress, le module pour créer des présentations de la suite bureautique libre. Après une courte présentation du projet OpenOffice.org et de ce qu'on peut faire avec Impress, j'explique les différentes parties de l'interface de ce logiciel. J'explique un petit peu les avantages du nouveau format de fichier (Open Document Presentation), j'effectue une petite comparaison avec Microsoft PowerPoint et, finalement, je donne brièvement quelques conseils pour effectuer une bonne présentation. L'exposé s'est terminé par une démonstration en direct de la création d'un diaporama.
Tous les outils et méthodes utilisés lors de la création du site de la médiathèque de Roubaix en 2015 : fiches de cadrage, personas, audit, ateliers ... et les recettes pour reproduire.
Première partie : cadrer et définir son site web (définir ce qu'on veut faire). Qui aboutit à la définition du cahier des charges.
Analyse sur le marché du meuble et comment SolidWorks et les solutions Axemble permettent d’innover, de collaborer et de développer de nouveaux produits.
Alphorm.com Formation AutoCAD 2021 : Les fondamentauxAlphorm
AUTOCAD fait sans doute partie des logiciels de dessin 2Dles plus performants actuellement. Il dispose d'une large gamme de fonctionnalités permettant de produire des dessins 2D et des informations techniques de qualité.
AUTOCADest un puissant logiciel de dessin technique2D. Plus précisément, le programme permet de concevoir, de visualiser, et bien entendu de modifier des dessins 2D. Il a été conçu pour être bien opérationnel et expert dans le domaine de la conception de dessin technique 2D.
Au cours de cette formation AUTOCAD, vous aborderez les phases d’un projet professionnel de dessin 2D d’une bride. Vous apprendrez à utiliser toutes les fonctionnalités de base du logiciel AUTOCAD, de la création à la présentation.
Avec cette formation AUTOCAD, vous apprendrez à utiliser le logiciel de manière optimale afin de devenir un expert en dessin technique 2D sous AUTOCAD.
Reposent sur une valeur Agile :
Les individus et leurs interactions plus que les outils et processus.
Les bénéfices des avatars :
- Restreint le nombre de tâches simultanées par personne, puisque chacun dispose d’un nombre limité de son avatar : le développeur devient plus facilement task-centric et monotâche,
- Améliore le management visuel par l’identification de “qui travaille sur quoi” : bénéfique pour l’auto gestion de l’équipe grâce à une représentation illustrée,
- Facilite la communication et la compréhension de l’organisation de l’équipe pour le Product Owner,
- Apporte du fun au sein des équipes, plus qu’un trigramme impersonnel et souvent illisible,
- Améliore la lisibilité au sein de votre plateforme d’intégration continue, par l’association de l’avatar à chaque compte utilisateur.
Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ?
Comment construire une architecture CSS modulaire ?
https://www.youtube.com/watch?v=nWWslZboeEE
Découvrez les méthodes utilisées pour concevoir une interface qui procure une bonne expérience utilisateur. Vous verrez l'ensemble des étapes d'un projet UX avec un aperçu des notions fondamentales du design.
De plus en plus, les interfaces tendent à sortir de l'ordinaire écran pour aller vers des formats aussi dynamiques qu'inattendus. Face à ce monde où tout objet peut devenir "écran", il est nécessaire de repenser les méthodologies de design pour favoriser cohérence, rapidité et créativité !
Découvrez notre guide pratique sur l'Atomic Design, une méthode métaphorique bien que concrète au service des designers !
Vous êtes développeur et vous n'arrivez jamais à reproduire les écrans fournis par les designers de votre équipe ? Vous êtes designer et vous ne parvenez pas à suivre le rythme de production pour fournir dans les temps les écrans aux développeurs ? L'Atomic Design, est une méthode de design par composants imaginée par Brad Frost, qui permet de sortir de la conception d'interfaces par pages ou en écrans. Cette méthodologie utilisée depuis longtemps par les développeurs permet de rapprocher les méthodes de conception d'interfaces et la façon dont celles-ci sont développées.
L'Atomic Design permet de créer des environnements de design cohérents, évolutifs et conformes aux attentes des utilisateurs à travers la création d'un Design System.
Les libertés pour un logiciel, c\'est de pouvoir l\'utiliser, le diffuser, et éventuellement le modifier comme on le désire, sans devoir payer ni rendre des comptes à une société. Le code source de ces logiciels est disponible sur internet, et des milliers de développeurs bénévoles répartis dans le monde entier collaborent à leur construction et leur mise à jour. Les produits réalisés par ces passionnés sont surprenants par leur qualité et par leur diversité. Nous vous présentons les plus belles réalisations "grand public" conçues pour tourner sous Windows ou MacOS, dans des domaines aussi variés que le traitement de texte, la gestion de tableurs, de présentations, le traitement d\'images, ... Les plus motivés, qui sont prêts à oublier Windows ou MacOS pendant quelques minutes, pourrons aussi s\'initier à l\'utilisation de Linux, le système libre de gestion d\'un ordinateur.
Aux Namur Linux Days 2006, j'ai présenté un aperçu d'OpenOffice.org Impress, le module pour créer des présentations de la suite bureautique libre. Après une courte présentation du projet OpenOffice.org et de ce qu'on peut faire avec Impress, j'explique les différentes parties de l'interface de ce logiciel. J'explique un petit peu les avantages du nouveau format de fichier (Open Document Presentation), j'effectue une petite comparaison avec Microsoft PowerPoint et, finalement, je donne brièvement quelques conseils pour effectuer une bonne présentation. L'exposé s'est terminé par une démonstration en direct de la création d'un diaporama.
Tous les outils et méthodes utilisés lors de la création du site de la médiathèque de Roubaix en 2015 : fiches de cadrage, personas, audit, ateliers ... et les recettes pour reproduire.
Première partie : cadrer et définir son site web (définir ce qu'on veut faire). Qui aboutit à la définition du cahier des charges.
Human Talk - Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
Vous êtes développeur et vous n'arrivez jamais à reproduire les écrans fournis par les designers de votre équipe ? Vous êtes designer et vous ne parvenez pas à suivre le rythme de production pour fournir dans les temps les écrans aux développeurs ? L'Atomic Design, est une méthode de design par composants imaginée par Brad Frost, qui permet de sortir de la conception d'interfaces par pages ou en écrans. Cette méthodologie utilisée depuis longtemps par les développeurs permet de rapprocher les méthodes de conception d'interfaces et la façon dont celles-ci sont développées.
L'Atomic Design permet de créer des environnements de design cohérents, évolutifs et conformes aux attentes des utilisateurs à travers la création d'un Design System.
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.
Réussir son projet Drupal. Plusieurs clefs du succès par Maxime TOPOLOV (@mtopolov) CTO de @adyax, Leader Européen sur Drupal.
Méthodes qui marchent
Equipe projet
Organisation
Estimation du projet
Choses à faire et à pas faire....
Responsible Design ou Le web moderne à destination de tousjwajsberg
Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
Développement d’un outil de zoom étendue et de création des signets.Abdessadek ELASRI
Les applications ArcGIS Desktop sont dotées d'une interface utilisateur graphique (GUI) par défaut. Vous pouvez la personnaliser et exposer des fonctionnalités développées pour étendre les fonctionnalités des applications bureautiques.
Start with a Concept and Stop Designing like a MachineIdean France
From idea to execution.
The digital industry is moving fast. Creative people need to be more productive as competition is growing up everyday. While many tasks can be more and more automated, conceptualization remains a powerful, efficient and truly human tool to create strong, memorable and engaging experiences.
A keynote by Florian Cordier, Lead Creative @Backelite.
Because a good concept is nothing if it's not share with the teams, you can check this presentation about Design Systems by Audrey Hacq, Lead Designer @Backelite: http://bit.ly/2MNo1qW
From Business to Buttons by Pierre HarléIdean France
What we've learned after going to the "From Business to Buttons" conference in Stockholm on April 27, 2017 :
- Story first : create products that engage ( Donna Lichaw)
- When UX goes offline ( Katie Dill, Director of Experience Design at Airbnb)
- Evolving design systems for flexibility and scale ( Dawn Ressel, Design strategist at Intuit Design System)
- Engaging with compassion ( Eric Meyer, Web legend and author of "Design for Real Life")
- How to fight fascism (Mike Monteiro, Co-founder and Design Director at Mule Design)
A developer who knows how to design by Audrey HacqIdean France
A balanced and understandable interface must follow certain basic page layout rules. This is the job of the designer, not of the developer.
Yet, in order for a mockup to be put together correctly, (and therefore to avoid long and painful hours of revisions), it is vital that the designer and the developer understand each other and speak the same language.
Read on for our guiding principles that will help developers better understand design.
Introduction et présentation de CocoaPods et ses bonnes pratiques. Tout ce qu’il faut savoir sur son fonctionnement, comment et pourquoi écrire ses propres librairies tierces et bien utiliser cet outil (astuces et bonnes pratiques).
Messages Extensions par Nicolas FontaineIdean France
Les Message Extensions, nouveauté iOS10, quelle valeur ajoutée ? Comment ça marche ? Cette présentation répond à vos questions et vous guide sur la manière de créer / architecturer votre extension en swift.
Un développeur sachant designer par Audrey HacqIdean France
Une interface équilibrée et compréhensible se doit de respecter certaines règles basiques de mise en page. C’est le métier du designer, pas celui du développeur.
Et pourtant, pour qu’une maquette soit correctement intégrée (et pour éviter ainsi à chacun de longues et pénibles heures de recette graphique), il est primordial que le designer et le développeur puissent se comprendre et parler le même langage.
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
Présentation et live coding - Les apps groups permettent à vos applications de communiquer, d’échanger toutes sortes de données. Une véritable pluvalue pour un écosystème applicatif que vous pourrez appréhender plus sereinement après cette intervention.
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
Les UX Days de FLUPA sont l'occasion de revenir sur les sujets UX qui ont marqué l'année. Les 16 & 17 juin, Marie-Amélie Cotillon, Responsable du Studio Créatif chez Backelite, a eu l'occasion de présenter une conférence : "Quand les militaires se prennent au jeu du Design Sprint". Au cours de ce Design Sprint, nous avons eu la chance de travailler avec le personnel des 3 armées pour penser et concevoir un portail ayant pour but de faciliter le départ des militaires en OPEX (Opérations Extérieures). Nous avons réalisé divers ateliers pour trouver la meilleure façon d'optimiser le parcours utilisateur et ainsi simplifier et faciliter l'expérience utilisateur globale. Face au succès rencontré, nous vous proposons de découvrir sa présentation et de vous immerger dans ce projet qui nous a passionnés !
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Idean France
Suite au dernier meetup CocoaHeads de Montpellier du 12 mai 2016, retrouvez le compte rendu de la conférence "Programmation réactive sur iOS avec Réactive Cocoa" !
How to design forms that deliver a great user experienceIdean France
Everyone can agree: filling out forms can be painful, boring and long! However, forms allow brands and sites to collect vital information and are often a first or key interaction in a service's interface. With this in mind, it's essential to carefully design forms to make sure you are delivering the best possible user experience!
We've compiled a list of a few best practices that can make forms intuitive and playful, creating a more positive relationship between consumers and brands.
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Idean France
Remplir un formulaire, c’est pénible. Tout le monde s’accorde sur ce point. Pourtant, le formulaire permet de collecter des données, d’interagir avec un service, de devenir acteur d’une interface. Il est donc essentiel de soigner vos formulaires pour assurer la meilleure expérience utilisateur possible !
Suivre quelques bonnes pratiques peut rendre un formulaire intuitif et ludique, instaurant ainsi une relation positive entre l’humain et la marque.
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
1. Sketch pour les designers
Pourquoi, quand et comment l’utiliser
2. Ces dernières années, Sketch a su
s’imposer comme le logiciel idéal pour du
design interfaces.
L’objectif de ce document est de
comprendre pourquoi l’utiliser, dans quels
cas et comment en faire un outil efficace et
collaboratif pour trouver le meilleur
workflow possible.
INTRODUCTION
5. FACILE À PRENDRE EN MAIN
L’interface est simple et le logiciel est peu
coûteux. On est loin des usines à gaz que
sont Axure, Photoshop ou Illustrator ce qui
permet à différents profils de pouvoir
manipuler les fichiers :
→ Un PO peut faire des tests d’évolutions
→ Un rédacteur peut faire des
modifications de textes directement dans
les maquettes
→ Un dev peut aller chercher ses découpes
lui-même
...
6. UNE APPROCHE PAR COMPOSANTS
Ce logiciel est parfait pour une approche
par composants :
● Chaque composant est transformable
en symbole et son comportement
responsive peut être spécifié (fixe,
fluide etc…)
● Possibilité de créer un style guide sur
une page, directement dans le fichier
Sketch et de piloter les modifications
de composants depuis ce style guide
Un style guide dans mon fichier Sketch
7. LA FACTORISATION DU DESIGN
Sketch permet de faire un élément une
seule fois et de le faire évoluer au fur et à
mesure du projet. Chaque partie de
l’interface peut être factorisée et ré-utilisée.
● Les composants peuvent être
transformés en symboles que l’on
peut rendre paramétrables grâce à la
fonctionnalité d’override
● Les Styles partagés permettent de
définir une seule fois une couleur ou
un style de typos.
Symboles paramétrables
Styles de couleurs Styles de typos
8. LES LIBRAIRIES PARTAGÉES
Les librairies partagées permettent de
centraliser tous les éléments visuels du
projet et de garder une cohérence, même
lorsqu’on travaille à plusieurs designers.
● Lingo et Zero height par exemple
proposent de stocker tous les
composants en les classant et de
pouvoir les utiliser directement dans
les fichiers
● Sketch propose aussi maintenant une
librairie partagée qui permet de
savoir lorsqu’un composant a changé
et d’appliquer la modification partout.
La librairie native de Sketch
Comparatif des bibliothèques partagées
Voir cet article
9. VERSIONING DE FICHIERS
Nous sommes de plus en plus amenés à
travailler à plusieurs profils (designers UX,
UI, Créas, PO, Dev…) sur les mêmes fichiers.
Grâce à des logiciels comme Abstract il est
maintenant possible de faire du versioning
de fichiers afin que tout le monde parte
toujours de la dernière version !
À surveiller : Figma qui propose également
du travail collaboratif (et XD qui devrait
suivre) Abstract : outil de versioning pour repartir
toujours du fichier le plus à jour
10. PROTOTYPER RAPIDEMENT
L’autre intérêt de Sketch est de pouvoir
prototyper très rapidement via le plugin
Craft qui crée automatiquement un
prototype invision.
Il existe également d’autres plugins de
prototypages :
● Launchpad qui transforme un fichier
sketch en html
● Mirr.io qui permet de prototyper
directement dans Sketch sans passer
par invision
Protoypage rapide avec Craft
11. PASSAGE EN DEV FACILITÉ
La façon de construire les interfaces avec
Sketch se rapproche énormément de la
façon de penser d’un développeur, ce qui
facilite le passage en dev.
On notera également :
● Des découpes multi-plateformes des
assets en quelques clics
● Des spécifications graphiques
simplifiées avec des logiciels comme
Inspect (en passant toujours par le
plugin Craft), Sympli, Zeplin...
Des specs facilement récupérables par les dev
12. DES PLUGINS À GOGO
Vous n’arrivez pas à faire quelque chose
dans Sketch ? Hé bien quelqu’un a
sûrement déjà créé un plugin pour vous !
En voici quelques uns :
https://medium.com/ux-power-tools/the-
ux-designers-best-companions-for-sketch-
2d6cd3c10534
Sinon ils sont tous référencés là :
https://www.sketchapp.com/extensions/pl
ugins/
Sketch Toolbox permet de gérer facilement
l’installation et la désinstallation des plugins Sketch
14. MAC ONLY
Et oui, c’est un des grands points noirs de
Sketch ; il ne s’adresse qu’aux designers
travaillant sur le système Mac…
Cela peut poser problèmes, notamment si
certaines personnes de l’équipe sont sur
Windows ou si un client veut pouvoir ouvrir
les fichiers sources...
15. GESTION DU TEXTE
La gestion du texte sur Sketch est
beaucoup moins fine que sur des logiciels
comme In design ou Illustrator par
exemple.
L’équipe de Sketch explique bien les soucis
que leurs posent la gestion de la typo dans
cet article.
La gestion du texte peut paraître simpliste comparé
à des logiciels de mise en page classiques.
16. PROTOTYPAGE POUSSÉ
Sketch n’est pas adapté pour du
prototypage poussé (micro-interactions,
transitions complexes etc…).
En fonction de l’objectif du prototype, on
préférera passer par Axure ou encore par
les très bons logiciels Principle, Flinto ou
proto.io.
Et pour des prototypes exportables ensuite
en code, on privilégiera Framer.js
On doit toujours adapter l’effort à l’objectif du prototype
Article
17. ARBORESCENCE
Il est parfois plus difficile sur Sketch d’avoir
une bonne vision de l’arborescence.
Afin de conserver une vision d’ensemble il
est toutefois possible d’utiliser le plugin
Userflow.
Arborescence sur axure
18. DESIGN COLLABORATIF
Il n’est pas encore possible de travailler à
plusieurs sur le même fichier Sketch et de
voir en live les modifications des autres
designers.
On attend beaucoup du plugin Picnic dont
c’est la promesse et pour ceux qui ne sont
pas patients, il est également possible de
se mettre au logiciel Figma dont c’est le
gros point fort.
20. ON RÉFLÉCHIT AVANT DE SE LANCER
Oui, Sketch est facile à prendre en main
mais ce n’est pas une raison pour se jeter
sur le logiciel dès le début du projet…
Donc on n’oublie pas :
- Des sketchings pour dégrossir
rapidement la demande
- La cinématique pour définir le
parcours
- Des zonings ou des wireframes pour
affiner le besoin
Le prototype papier : indispensable avant de se lancer !!
21. LES PAGES
Les pages permettent de structurer le
fichier. Il existe plusieurs approches :
- Une page par sprint
- Une page par fonctionnalité clé
- Une page par parcours
- ...
De mon côté, je préfère lorsque c’est
possible d’avoir une seule page “design”
avec tous les parcours (pour garder la
vision d’ensemble) puis une page “Style
Guide” et une page “Assets”.
Attention : la page “symboles” que Sketch créé automatiquement
devient vite le bazar, même quand on essaie de la ranger
régulièrement. Il est possible d’organiser cette page avec le plugin
Symbol Organiser
22. LES SYMBOLES
Les symboles permettent de factoriser son
design. Bien conçus, ils peuvent être
responsives et dynamiques (overrides de
textes, d'icônes, de couleurs etc...)
Bonnes pratiques :
- Bien nommer ses symboles
- Mettre des “/” dans le nom pour créer des
dossiers
- Faire un symbole le plus intelligemment
possible au vue de ces potentielles
réutilisations
Les bonnes pratiques des symboles
23. LES CALQUES
Les fichiers sont rarement manipulés par
une seule personne. Le but est donc que
n’importe qui puisse en comprendre la
structure.
Les calques doivent être :
- Bien nommés
- Bien rangés
- Groupés
Il est également possible de faire une
recherche parmis les calques pour les
sélectionner rapidement.
24. LES RACCOURCIS SONT VOS AMIS
Afin d’aller plus vite, il est utile de passer
par les raccourcis clavier.
Les principaux raccourcis à connaître
Tous les raccourcis Sketch
25. ET EN BONUS...
Pleins de ressources (plugins, icons,
kits…) pour bien débuter :
http://sketch.fordesignrs.com/
Et des vidéos pour se former :
http://learnsketch.com/tutorials