Sketch, Craft – Utiliser la combinaison Sketch et Craft pour la conception d’applications Android et iOS

by Posted on

Il est certain que pour la conception de “wireframes” et/ou de maquettes de création digitale (app, site web), on se doit parait-il d’être toujours à l’affût du Graal. Je veux parler du logiciel “parfait” qui permettrait de concevoir des IHM au plus prés des “User Stories” si amoureusement documentées ou de garantir le respect absolu d’une expérience utilisateur réussie.

Cette perle rare, elle semble exister en l’espèce avec le couple : Sketch, Craft. Craft est un plugin astucieusement développé par Invisionapp pour favoriser l’intégration horizontale de leur plate-forme avec les deux logiciels les plus populaires en matière de conception d’écran Sketch et Photoshop.

Il est certain que ce qui se dessine, c’est la combinaison gagnante pour la création d’applications notamment : Sketch, Craft, Invisionapp.
Si, à cette combinaison, vous ajoutez un outil comme Jira dans la gestion de projet, vous aurez alors entre vos mains ce qui se fait de mieux actuellement dans la création et la gestion la plus agile possible.

Après ces considérations un peu théoriques, il est temps de voir les quelques aspects bluffants de la combinaison de Sketch et Craft.

Le plus étonnant, outre la facilité de créer les interfaces, c’est la capacité à “cloner” du contenu ou/et à “brancher” des sources externes afin de crédibiliser vos maquettes en vue de les rendre plus séduisantes pour tous, clients, graphistes, développeurs… etc

Notre objectif est de créer “wireframes” pour un prototype d’application pour iPhone iOS sous Sketch avec Craft installé
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

L’onglet “CUSTOM” du bouton “Data” de Craft pour brancher différents types de contenu
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

L’onglet “WEB” du bouton “Data” de Craft pour brancher différents types de contenu
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

L’onglet “JSON” du bouton “Data” de Craft pour brancher différents types de contenu
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Brancher le JSON d’une API ou d’un fichier JSON en local

Créer le modèle d’insertion
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Lier les champs du Sketch avec les champs du JSON
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Une fois branché le JSON sur vos champs, dupliquer le contenu à l’aide du bouton “Duplicate” de Craft
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Et voilà…, votre liste est complétée et pas avec du “Lorem ipsum”
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

La liste se prolonge sous la tab bar notamment
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Le PNG de cet écran dans une ébauche de maquette
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Le JSON
Le fichier JSON que l’on a utilisée provient directement de l’API Deezer. En voici, un tout petit extrait. On l’a utilisé en local.

	{
	"id": "908622995",
	"title": "Bain moussant #relax",
	"description": "Occupez-vous du bain moussant, on s'occupe de la playlist ! Si vous êtes partis pour une douche, ça se passe ici : http://dzr.fm/ChanterSousLaDouche",
	"duration": 12676,
	"public": true,
	"is_loved_track": false,
	"collaborative": false,
	"rating": 2,
	"nb_tracks": 54,
	"fans": 12726,
	"link": "https://www.deezer.com/playlist/908622995",
	"share": "http://www.deezer.com/playlist/908622995?utm_source=deezer&utm_content=playlist-908622995&utm_term=9052677_1493752437&utm_medium=web",
	"picture": "https://api.deezer.com/playlist/908622995/image",
	"picture_small": "https://e-cdns-images.dzcdn.net/images/playlist/58d09305ea1f3983d602ec76ec6ac2a3/56x56-000000-80-0-0.jpg",
	"picture_medium": "https://e-cdns-images.dzcdn.net/images/playlist/58d09305ea1f3983d602ec76ec6ac2a3/250x250-000000-80-0-0.jpg",
	"picture_big": "https://e-cdns-images.dzcdn.net/images/playlist/58d09305ea1f3983d602ec76ec6ac2a3/500x500-000000-80-0-0.jpg",
	"picture_xl": "https://e-cdns-images.dzcdn.net/images/playlist/58d09305ea1f3983d602ec76ec6ac2a3/1000x1000-000000-80-0-0.jpg",
	"checksum": "88e26744d54daf0a9b4c08c9fbe36320",
	"tracklist": "https://api.deezer.com/playlist/908622995/tracks",
	"creation_date": "2014-06-27 09:09:31",
	"creator": {
		"id": "335777521",
		"name": "Rachel - Editor France",
		"tracklist": "https://api.deezer.com/user/335777521/flow",
		"type": "user"
	},
	"type": "playlist",
	"tracks": {
		"data": [{
				"id": "347525111",
				"readable": true,
				"title": "Oh Woman Oh Man",
				"title_short": "Oh Woman Oh Man",
				"title_version": "",
				"link": "https://www.deezer.com/track/347525111",
				"duration": "275",
				"rank": "943279",
				"explicit_lyrics": false,
				"preview": "https://e-cdns-preview-c.dzcdn.net/stream/cc09270258d315a67e49d641339bb6a0-4.mp3",
				"time_add": 1492790520,
				"artist": {
					"id": "4771546",
					"name": "London Grammar",
					"link": "https://www.deezer.com/artist/4771546",
					"tracklist": "https://api.deezer.com/artist/4771546/top?limit=50",
					"type": "artist"
				},
				"album": {
					"id": "39579411",
					"title": "Oh Woman Oh Man",
					"cover": "https://api.deezer.com/album/39579411/image",
					"cover_small": "https://e-cdns-images.dzcdn.net/images/cover/a9d9f74bcb05fc77105881295ce1cf22/56x56-000000-80-0-0.jpg",
					"cover_medium": "https://e-cdns-images.dzcdn.net/images/cover/a9d9f74bcb05fc77105881295ce1cf22/250x250-000000-80-0-0.jpg",
					"cover_big": "https://e-cdns-images.dzcdn.net/images/cover/a9d9f74bcb05fc77105881295ce1cf22/500x500-000000-80-0-0.jpg",
					"cover_xl": "https://e-cdns-images.dzcdn.net/images/cover/a9d9f74bcb05fc77105881295ce1cf22/1000x1000-000000-80-0-0.jpg",
					"tracklist": "https://api.deezer.com/album/39579411/tracks",
					"type": "album"
				},
				"type": "track"
			},
			...
			To be continued

Créer son propre contenu “Custom”

On peut aussi à défaut de consommer du JSON directement créer son propre type de contenu. On va créer une liste des départements français.

Le volant pour créer votre “custom type”
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

Un simple copier-coller des départements (*)
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

On place le premier élément et on va cloner…
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

On clone 45 items c’est à dire dans notre exemple 45 départements, séparés de 3 pixels chacun
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

On obtient dynamiquement une liste de 45 départements. Craft parcoure lui-même la liste que vous lui avez fourni
Utiliser la combinaison Sketch et Craft pour la conception d'applications Android et iOS

(*) Un extrait de la liste des départements français ayant servi à la création de “custom type” departement_fr

Ain
Aisne
Allier
Alpes de Hautes-Provence
Hautes-Alpes
Alpes-Maritimes
Ardèche
Ardennes
Ariège
Aube
Aude
Aveyron
Bouches-du-Rhône
Calvados
Cantal
Charente
Charente-Maritime
Cher
Corrèze
Corse-du-Sud
Haute-Corse
Côte-d'Or
Côtes d'Armor
Creuse
Dordogne
Doubs
... to be continued

Conclusion : On peut décemment penser que, en cet instant, cette suite logicielle Sketch + Craft, couplé au SaaS Invisionapp est un peu la “killer app” du moment. Il existe bien évidemment une danger, celle de la courbe d’apprentissage. Celle-ci peut s’avérer ardue, sachant qu’un outil n’a jamais remplacé l’idée de l’application.

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts