Webdesign sur iPad – La maquette

Première étape, dans notre saga, le Webdesign sur iPad, la création de la maquette avec iDraw et Photoshop Touch.

Nous allons, dans cette première partie, réaliser la home page d’un site sur le cinéma.
Le but de cette première maquette est de nous permettre d’aborder les principales fonctionnalités de iDraw (http://www.indeeo.com/idraw/) et de Photoshop Touch (http://www.adobe.com/fr/products/photoshop-touch.html) ce qui vous permettra d’acquérir de bonnes bases.

 

1- Création du Document

A la création d’un nouveau document, vous pouvez choisir le « type » de document que vous voulez utiliser, nous choisirons « Grid ».

Première étape modifier les préférences du document (icône en forme d’engrenage) afin de travailler dans les meilleurs conditions, nous allons afficher la Grille, « coller » les éléments à la grille, modifier l’unité de mesure et enfin changer les dimensions de la grille :
Preferences > Show Grid
Preferences > Snap to Grid
Preferences > Units & Rulers > pixels (px)
Preferences > Grid Settings > Spacing > X=10px y=10px

2- Le Header

Après avoir renommé le premier calque (Layer 1) en « Header », nous allons dessiner avec l’outil rectangle la zone du header et le remplir avec un dégradé (Geometry > Appearance > Gradient Fill) et régler son angle à 90 afin d’obtenir un dégradé vertical.

Note : vous pouvez ajuster les coordonnées, rotation et la taille de tous vos éléments graphiques avec l’icône « Geometry » (rectangle avec les 2 abscisses).

Note : vous pouvez ajuster les couleurs, style de remplissage… de deux manières, soit par l’icône Apparence / Syles (cercle avec un i à l’interrieur) soit avec l’outil Fill (rectangle de couleur dans la barre à outils).

Note : Pour garder en mémoire votre couleur/dégradé, il suffit de cliquer dans le grand rectangle à gauche de la palette et de glisser votre couleur/dégradé vers la droite dans les petits carrés.

Note : Vous pouvez aussi utiliser un code RGBA pour chaque couleur, pour y accéder, il suffit d’appuyer sur le cercle à gauche de la pipette pour basculer d’affichage.

Nous allons lui ajouter un logo en le créant avec l’outil texte et en choisissant une police parmi la liste de polices disponibles (Appearance > Text). Puis on va vectoriser ce texte (Modify > Convert Text to Path), car la police choisie n’est pas une police disponible sur tous les OS et enfin on lui rajoute une base-line.

Note : Il n’existe pas pour le moment de moyen de rajouter de nouvelles polices sur l’iPad, néanmoins quelques applications le permettent mais la police ne sera utilisable que sur cette même application. iDraw le permet, par le biais de Dropbox, à partir de l’écran d’accueil avec l’icône Preferences > Manage Fonts, mais les polices ne seront donc utilisables que sur cette application.

Note : Le fait de vectoriser une police vous permet de pouvoir transformer votre texte avec les outils vectoriels habituels (plume, composition de formes…).

Sur la partie droite du header nous allons y rajouter un moteur de recherche. Comme précédemment nous allons utiliser l’outil rectangle, l’outil texte et nous allons aborder la manière de gérer la transparence sur le texte (Appearance > Opacity).

3- Le Menu 

Après avoir créé un nouveau calque (Layers > icône +) et l’avoir renommé « navigation » nous allons utiliser l’outil rectangle et lui appliquer un dégradé et une ombre portée (Appearance > Shadow), puis saisir les différentes entrées du menu avec l’outil texte. Toujours avec l’outil rectangle nous allons tracer 3 rectangles de 1px de large et de même hauteur que la barre de menu, les 2 rectanlges les plus à l’extérieur seront blanc avec une transparence et celui du centre restera noir en 100%, puis avec l’outil Path Selection tool (outil en forme de flêche) nous allons sélectionner ces trois éléments pour créer un groupe (Arrange > Grouping > Group) formant le séparateur et le transformer en symbole réutilisable (Shape Libraries > My Shapes) et enfin nous alignerons (Arrange > Alignment), en respectant le même espace, chaque éléments (textes et séparateurs). 

4 – Le Slideshow 

Après avoir créé un nouveau calque (Layers > icône +) nommé « slideshow », nous allons le faire glisser (icône avec 3 lignes horizontales) sous le calque Navigation afin de bénéficier de l’ombre portée.

Nous allons utiliser Photoshop Touch pour réduire la taille de l’image (icône en forme de & > Image Size) et recadrer (icône en forme de & > Crop), avec des outils que nous connaissons bien puisque ce sont ceux de Photoshop, une image du film The Lorax à la taille exacte de notre slide show, 570 x 300px. Cette image a été téléchargée depuis internet et enregistrée en local sur l’iPad.

Il ne reste plus qu’à nommer et enregistrer notre image.

Note : Nous pouvons enregistrer l’image soit en PNG soir en JPG mais nous ne pouvons pas régler le taux de compression.

Maintenant que notre première image est prête nous retournons sur iDraw pour l’intégrer  dans notre slideshow. Première étape dessiner un rectangle de la taille de notre image, puis nous y insérons l’image (Appearance > Image).

Note : Comme notre image est à la taille exacte il n’y a pas de différence entre la fonction Stretch to Fit et Scale to Fit.

Note : Vous pouvez aussi intégrer l’image dans notre création directement avec l’outil Photo Library.

Note : Nous aurions aussi pu ne pas utiliser Photoshop Touch si la réduction homothétique (Geometry > Aspect Ratios locked) de l’image respecté les tailles du slideshow, mais dans notre cas nous avons aussi besoin de la couper (fonction non disponible sur iDraw pour le moment).

Nous allons maintenant générer les 3 vignettes qui sont à la droite de l’image principale de notre slideshow, en utilisant à nouveau les mêmes outils de Photoshop Touch.

Puis avec iDraw nous allons dessiner un premier rectangle sur le coté droit de notre image principale et un carré et nous allons transformer ce carré en triangle (il indiquera quel vignette est affichée comme image principale) avec l’outil plume (Pen tool > P-) et le coller au rectangle avec la palette de combinaison des formes (Modify > Combine).

Nous pouvons maintenant dessiner les autres cellules, et leurs ajouter les vignettes (avec bordure) et les textes afin de complèter notre slideshow.

5- Le Contenu

Après avoir créé 3 nouveaux calques nommés « Column 1, Column 2 et Column 3 », nous allons créer sur chacun de ces 3 calques un header et une cellule. Sur la colonne de gauche nous aurons un header avec un dégradé différent des deux autres. Nous y ajouterons aussi les trois titres : Now playing, Categories et News.

Column 3

Dans la colonne la plus à gauche, calque « Column 3 », après avoir dessiné un rectangle blanc, un autre pour la vignette et enfin, après avoir rajouté les textes, nous allons créer un rectangle à bords arrondis avec des angles de 5x (outil Rounded Rectangles > Corner Radius). Puis nous y ajouterons, avec l’outil étoile, 5 étoiles (outil Stars)que nous remplirons d’un dégradé et d’une bordure jaune.
Sélectionnez les deux dernières étoiles et changez leur opacité pour leur donner une position « off » (Appearance > Opacity).

Nous allons, avec Photoshop Touch, générer ce nouveau format de vignettes et l’intégrer dans son emplacement.

Maintenant nous pouvons copier > coller en place (Editon > Copy, Edition > Paste in Place) notre bloc, après avoir sélectionné tous les éléments (Editon > Select All), puis le décaler vers le bas.

Note : Le menu Edition n’agit que sur les éléments du calque (Layer) sélectionné.

Column 2

Sélectionnez le calque nommé « Column 2 », colonne qui sera une liste de liens à la iOS. Nous allons utiliser la Bibliothèque de symboles (Shape Libraries > iPhone Mockups) qui comporte tout un lot de symboles iPhone.

De la même façon que nous avons « groupé » (Arrange > Grouping > Group) les éléments pour créer les symboles « séparateurs » pour la barre de navigation, nous devons « dégrouper » (Arrange > Grouping > Ungroup) celui-ci pour pouvoir l’éditer et le personnaliser à notre façon.

Note : La mise à l’échelle en 9 tranches n’est pas disponible pour le moment sur les symboles, nous devons donc le dégrouper pour pouvoir l’éditer et ajuster la taille sans le déformer.

L’édition terminée, nous pouvons à nouveau créer un symbole pour pouvoir créer facilement notre liste.

Column 1

Après avoir sélectionné le calque « column 1 » nous allons créer à nouveau une liste avec images, images du même format que celui utilisé pour les miniatures du slideshow.
Cette liste sera scrollable verticalement , nous créerons donc deux flèches au bas de la liste.

6 – Le Footer

Après avoir créé un calque nommé « footer », vous dessinez un rectangle de couleur noir et nous y ajouterons le copyright à gauche et deux listes de liens sur la partie droite. Aucune difficulté pour faire cela, vous connaissez déjà tous les outils pour le réaliser. 

7 – Le Background et la Toolbar

Notre maquette est presque fini, nous devons encore gérer le background de la page et rajouter un toolbar que nous avons oublié.

Nous allons donc agrandir la zone de travail à 1200px de large et 1300px de haut (Preferences > Dimensions). Sélectionnez un premier calque, par exemple le header, et sélectionner tous les éléments de celui-ci par la fonction »select all » (Edition > Select All) nous allons déplacer la selection de 50px vers la droite et de 30px vers le bas (Geometry > Properties). 30px sera la hauteur de notre toolbar. 
 

Note : Vous devez faire la même chose pour chaque calque car le menu Edition n’agit que sur les éléments du calque (Layer) sélectionné.

L’opération terminée, vous devez créer un nouveau calque que vous glisserez tout en bas de la liste des calques. Sur ce nouveau calque nous dessinons un rectangle qui prendra toute la largeur de la page et qui sera légèrement plus haut que le slideshow. 

Il nous reste à créer un dernier calque qui hébergera la toolbar. La réalisation de celle-ci est là encore simple, il suffit de créer un rectangle qui prend toute la largeur de la page et de 30px de haut. Vous y ajouterez, à gauche un lien vers le site et à droite un lien pour s’identifier. 

Conclusion

Notre première maquette est à présent terminée. Cette première approche nous a permis d’utiliser les principaux outils de iDraw et de Photoshop Touch, évidemment ces applications ne se limitent pas à ces fonctions qui sont bien plus nombreuses et plus puissantes.

Vous pouvez, aussi parmi les nombreux formats d’export, exporter cette création au format PDF ou SVG et l’envoyer par email ou par Dropbox vers votre PC pour pouvoir les éditer (tous les calques sont conservés et éditables) avec Illustrator et donc « peaufiner » le travail.

Ces applications ne sont pas aussi parfaites et puissantes que ceux d’une célèbre Suite CS que vous pouvez avoir sur votre ordianteur, il y a encore un esprit bidouille, on est souvant obliger d’utiliser plusieurs applications pour arriver au résultat final (nous le verrons encore plus dans la prochaine étape avec l’intégration de cette maquette), mais il ne faut pas perdre de vue que nous sommes sur des applications qui coûtent 9 euros et que nous sommes au tout début de l’utilisation de la tablette !

Le but de cet atelier n’est pas de vous démontrer que vous pouvez vous passer de votre ordinateur favoris et de ces logiciels, mais que vous pouvez, lors de vos déplacements, de vos week-end, de vos vacances…. ou tout simplement pour le plaisir, avec une simple tablette, continuer à travailler de manière efficace sur vos projets.
Perso j’aime bien l’approche « Touch/Handmade » qui donne vraiment l’impression de dessiner son interface et le fait d’utiliser ma tablette me donne une approche différente de mon travail.

Prochaine étape l’intégration sur iPad.

Retrouvez ma sélection d’applications pour le « Webdesign sur iPad »