Flowchart pour Sketch : améliorer l’UX dans vos design

Lorsque l’on travail sur une application ou site web relative important en terme d’écran, on peut vite s’y perdre.
De même, lorsqu’un développeur récupère l’interface que vous avez conçu, il se peut qu’il ai du mal à s’y retrouver.

En effet, une UX réussie passe aussi par une bonne organisation de l’information. Grâce à cette nouvelle ressource pour SketchApp, vous pourrez concevoir une interface intuitive et organisée, comme le montre les captures ci-dessous.

Avec ce template, vous aurez toute la panoplie nécessaire à créer un organigramme pour votre design

 

 

UI Selection inspiration #5

Découvrez une nouvelle sélection des plus belles interfaces et animations UI publiée sur le web. Comme d’habitude on y retrouve aussi bien du web que du mobile.

Travel app, par Stano Bagin

Direct Messaging – Chatbox, par jokinL

Setmore – Modal windows, par Lukáš Straňák

tvOS, par Neeson

Engagement Dashboard – Sessions, par Adrian Madács

Digitland Navigation, par Stoyan Daskaloff

Landing – Saving Money, par Jeremy Jones

Smart MZD Player

Log In for a Job App, par Bertil Boisen

gabeloot, par patrickreza

Dashboard [TV], par Michal Soukup

Wine Product List, par michael henning

Digitaland Enter Animation, par Stoyan Daskaloff

Bézier Game : le jeux qui vous fera devenir un expert de la plume

Voici un jeux original et très utile pour ceux qui ont du mal à se servir de l’outil plume sur l’ensemble des outils de graphisme.
Il s’appel tout simplement The Bézier Game, il vous suffit de retracer l’image à l’écran, afin de passer d’étape en étape. Simple mais génial !

personnellement, j’adore 🙂

Swapes : une palette de couleur pour Sketch

Lorsque l’on réalise l’interface graphique d’un application ou d’un site web, il peut être utile de disposer de différentes de palettes de couleurs.
Par exemple, en travaillant sur une application Android, il est presque nécessaire de disposer des couleurs de la charte material design. Et c’est exactement  ce que propose Swapes, la nouvelle extension pour Sketch, mais ça ne s’arrête pas là !

Vous aurez également accès à différentes palettes, comme celle d’iOS ou encore les différents pantones ou encore les couleurs de différents branding (American Express, Atlassian, Behance, Blogger…).

Une fonctionnalité utile également, vous pouvez ajouter directement les couleurs que vous souhaitez aux couleurs de votre document.

Télécharger le plugin

Codepen Selection #2

Voici la seconde sélection de Codepens qui valent le détour. Contrairement à la 1ère sélection où je présentais qu’un seul codepen, cette-fois ci découvrez 3 codepen sur lesquels j’ai particulièrement accroché.

Slice Slider

Un carrousel simple, mais avec une transition très bien réalisée.

See the Pen Slice Slider by Stephen Scaff (@StephenScaff) on CodePen.

Sticky Slider

Ce carrousel vertical saura séduire par sa simplicité

See the Pen Sticky Slider Navigation (Responsive) by Ettrics (@ettrics) on CodePen.

Material navigation

Un concept de navigation original version Material Design

See the Pen Material flex header by Atticus Koya (@OfficialAntarctica) on CodePen.

La dépêche de l’UI Design, février 2017

Voici une nouvelle catégorie d’article, appelée la dépêche de l’UI Design. Dans cette série, vous pourrez découvrir une liste d’articles sur différents thèmes : l’UX et l’UI design, des tutoriaux, diverses ressources…

UI/UX Design

How to create a FRONT END FRAMEWORK with Sketch
Un article complet sur la création d’un « framework » pour le front-end, avec Sketch.

Apple UI Design Resources
Un UI Kit officiel proposé apr Apple (Sketch & Photoshop) à télécharger

Great Alternatives to Hamburger Menus
Un article sur les alternatives aux menus « Hamburger »

Ressources

Calendar UI Kit
Un kit de calendrier à télécharger gratuitement (.sketch)

Text animation
Une collection d’animations sur la typographie, pour le web

Purple mobile UI Kit
Un kit graphique pour vous applications mobiles, le tout sous Sketch

Tutorials

Complete guide for making animated perspective design
Un article sur Medium pour vous aider à réaliser des animations de prototype

Icônes

40 Free eCommerce Icons Bundles
Téléchargez gratuitement 40 packs d’icônes pour vos projets e-commerce.

Responsive Office Icons (EPS, PDF, SVG, PNG)

50 Company icon

Profi icon set

Dripicons V2 (SVG, Webfonts, PSD, Sketch)

HTML/CSS

Propeller bootstrap
Si vous souhaitez ajouter une touche de material design à vos projets, ce framework devrait vous plaire

HTML Reference.io
Un guide de référence pour le HTML

CSS Reference.io
Comme ci-dessus, mais concernant le CSS.

Simple grid

AndroidRennes #1 : Designing Captain train mobile experience

Android Rennes, tout nouveau groupe Rennais a lancé la semaine dernière son tout premier talk.
Cette première conférence était animé par Cyril Mottier, développeur android chez Captain Train, ou plus exactement Trainline.

Je m’y suis rendu avec mon binome de tous les jours. Etant plus sensible à iOS plutôt qu’a Android, je me demandais ce que ça donnerait… résultat : satisfaction garantie !
La conférence était relativement présentée en deux parties : le design, et le technique. Voilà ce que j’en ai pensé.

1ère partie : le design

Etant qu’UI Designer, c’est cette partie qui m’intéressait le plus.  Cyril n’a pas uniquement parlé d’android, mais a beaucoup comparé les deux systèmes, il a évoqué ce qu’il ont pu faire chez Trainline sur l’OS de Google et qu’ils n’ont pas pu faire sur les iPhones et inversement.

On a entendu parlé de branding, d’identité visuelle, d’UX et d’UI, d’icônes… ça change d’entendre un développeur parler de choses là ! 🙂

Ce qu’il fallait retenir

Sur les applications mobiles, on ne peut pas identifié aussi clairement l’identité d’une marque que sur desktop, du fait que l’affichage soit considérablement réduit. De ce fait, le plus gros se fait via l’icône de lancement des applications, point d’entrée de chaque apps.

Pour le reste, la marque est identifiée par la charte graphique (couleurs, icônes, typo…) qui se retrouve tout à long de la navigation de l’application.

2ème partie : le côté technique

N’étant pas développeur, cette partie aurait pu ne pas m’intéresser du tout, mais ce ne fut pas le cas. En effet, les points abordés étaient très intéressant.
Peut-être que je me suis senti moins concerné par certains points, mais d’écouter les avis et problèmes éventuels rencontrés lors de ses 4 années chez Trainline était passionnant.

Ce que j’ai retenu

La chose qui m’a le plus tapé à l’esprit, était le point concernant les releases. Cyril nous a expliqué que chez Captain Train, les releases se faisaient toutes les 6 semaines, et tout le temps le mardi.
Un processus voulu et pensé intelligemment. Cela permet aux équipes d’ouvrir dans un premier temps les releases aux beta testeurs, point d’ouvrir au fur et à mesure la mise à jour aux différents utilisateurs.

De plus, ils ne partent pas du principe où il faut qu’il y ait tant de fonctionnalités pour chaque déploiement, mais ils prennent tout simplement les fonctionnalités qui ont été finies de développées, évitant ainsi une éventuelle pression auprès des équipes.

Bilan, c’était top !

Je suis curieux de voir si la prochaine édition sera tout aussi passionnante. Pour ceux qui le souhaient, la conférence à été filmée et elle est disponible ci-dessous.