iPad_Sketching_Template

Esquisses : méthodologie

Réa­li­ser un site inter­net (ou une webApp) néces­site de pas­ser par une méthode de concep­tion aupa­ra­vant. Il est en effet dif­fi­cile d’appréhender l’écriture du code si, en amont le site site n’a pas été dessiné.

De l’idée au des­sin — esquisse

Qu’il sagisse de n’importe quel type de pro­jet, d’oeuvre, le des­sin est l’étape fon­da­men­tale qui lie une idée à sa forme. C’est la pre­mier pas de la concré­ti­sa­tion du pro­jet. La spé­ci­fi­cité d’une page HTML, cepen­dant, est de s’incrire sur un type d’écran. Les pro­por­tions de l’écran varient en fonc­tion du péri­phé­rique. De ces dimen­sions décou­lera ou non, de choix d’organisation de l’information sur la sur­face du péri­phé­rique. Il peut être utile, lors du des­sin de la page, d’avoir papier avec des repères d’unités pour pré­pa­rer l’étape suivante.

Du des­sin à la maquette — maquette, mockup

La maquette est très utile quand il s’agit de pré­sen­ter clai­re­ment un pro­jet à un inter­lo­cu­teur. C’est l’étape-type de vali­da­tion quand on pré­sente un pro­jet qui a besoin d’être validé avant d’être réa­lisé. Ça peut éga­le­ment être un moyen de pré­sen­ta­tion d’un pro­jet pros­pec­tif, mani­feste… Il est très impor­tant de pré­sen­ter le pro­jet dans son contexte d’utilisation (sur tablette, sur mobile, une ver­sion explo­ra­teur + ordi­na­teur de bureau), si on veut que l’interlocuteur, qui n’est pas aussi impli­qué que le desi­gner sur cette par­tie du pro­jet, com­prenne com­ment le pro­jet exis­tera une fois abouti. C’est le moment où les choix typo­gra­phiques se pré­cisent, l’interface gra­phique et ses élé­ments prennent forme.

De la maquette au code

Cette étape per­met de pré­pa­rer les élé­ments gra­phiques (images pixels, logos, illus­tra­tions vec­to­rielles,…) pour pré­pa­rer leur inté­gra­tion dans le code. Cette étape consiste essen­tiel­le­ment à l’exportation cor­recte des élé­ments visuels (bonne taille, bonne résolution).

Fichiers à télécharger

Voici plu­sieurs fichiers à télé­char­ger pour vous aider à avan­cer entre les dif­fé­rentes étapes de réa­li­sa­tion de votre site.

Esquisse

iPad_Sketching_Template

Télé­char­ger

iPhone_4-template

Télé­char­ger

Desktop-template-notes-landscape

Télé­char­ger

Grille

Télé­char­ger

Maquette

iPad-template

Télé­char­ger

iPhone5-template

Télé­char­ger

Safari-template00

Télé­char­ger

0