3.0 Logiciel de conception populaire - Excel with Business

CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
3.0 Logiciel de
conception populaire
M
aintenant que vous
possédez une bonne
vue d’ensemble des
pages web, des navigateurs,
de l’hébergement et de tous
les composants tournés vers
l’extérieur, il est temps de
passer dans les coulisses et
de faire le tour des outils
logiciels qui construisent
véritablement des sites web.
Le premier concept à clarifier
est la différence entre «
conception » de site web
et « développement » de
site web. La conception de
site comprend tout, depuis
l’expérience utilisateur jusqu’à
la planification de la navigation en passant par la
création de l’interface graphique. Le développement
de site, en revanche, se concentre sur la
programmation du code qui unit la page, connecte le
site aux bases de données et vous permet de réaliser
des choses telles qu’acheter des objets avec une carte
Figure 3-1: Toute page web possède deux côtés : le joli côté que voient
tous les utilisateurs et le côté du code sous-jacent qui unit l’ensemble.
de crédit. Pour illustrer cette différence, comparez les
Figures 3-1 et 3-2. La Figure 3-2 montre l’envers de la
vue du code d’une superbe page web montrée dans la
Figure 3-1.
Figure 3-2: Ce code PHP d’apparence complexe est ce qui unit la Figure 3-1.
17
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
Dans cette unité, nous nous concentrerons sur le côté
conception de l’équation. D’autres unités s’attachent
aux sujets du développement, mais ne vous inquiétez
pas, nous ne serons pas trop techniques – juste
suffisamment pour vous doter de la connaissance
adéquate.
3.1 Rôle du logiciel de graphismes dans
la conception web
La phase de conception requiert deux types de
logiciels extrêmement différents pour produire tous
les composants nécessaires. Non seulement devezvous résoudre la conception des informations, ce
qui est évoqué plus loin, mais vous devez également
produire les graphismes du site, soit pour votre
propre projet, soit pour les partager avec les clients
pour approbation avant de pouvoir commencer à
produire le site.
Conception des informations
Au cours de la phase de conception, comme le
détaille l’Unité 8, la première tâche consiste à
développer « l’architecture des informations » d’un
nouveau site. L’architecture des informations est un
terme prétentieux pour nommer les projets pour le
site. Un des documents produits à cette étape est le
« plan du site », qui montre toutes les pages d’un site
et comment elles sont interconnectées. Il existe bon
nombre d’outils logiciels que vous pouvez utiliser
pour construire un plan de site, comme celui montré
dans la Figure 3-3. Certains sont de coûteuses
applications logicielles et d’autres des outils en ligne
offrant des essais de 30 jours (mais ces offres offrent
moins de flexibilité au niveau de l’apparence des
plans de site).
Applications logicielles:
• Omnigraffle - (http://www.omnigroup.com/
omnigraffle)
• Microsoft Visio - (http://office.microsoft.com/enus/visio/visio-2010-buy-page-FX101836377.aspx)
• Adobe InDesign - (http://www.adobe.com/
products/indesign.html)
Outils en ligne:
• Slickplan.com - (http://slickplan.com/)
• Gliffy.com - (http://www.gliffy.com/uses/website-map-software/)
Figure 3-3: Tous les plans de site n’ont pas l’air aussi raffinés que ceux construits avec
Adobe InDesign. Il existe de nombreux outils que vous pouvez utiliser pour construire
des plans de site, depuis Microsoft Visio aux outils en ligne disponibles sur Slickplan.com.
18
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
Structures filaires
Exploration de la conception visuelle
Une fois que vous avez construit un plan de site,
l’étape suivante consiste à déterminer les détails de
chaque page. Vous pouvez le faire en créant des
Si vous concevez le site pour quelqu’un d’autre, le
client voudra voir plusieurs idées visuelles entre
lesquelles choisir avant de déterminer quel design
Figure 3-4: Une structure filaire est une diagramme
en noir et blanc qui montre le contenu et le
dessins schématiques appelés
« structures filaires », ou « fils
de fer », pour chaque type de
page unique, comme le montre
l’exemple de la Figure 3-4. La
plupart des outils précédemment mentionnés sont capable
de créer des schémas filaires.
Voici une liste de quelques outils
logiciels en ligne:
• Mockingbird - https://
gomockingbird.com/
• Mockflow - http://www.
mockflow.com/
• Axure - http://www.axure.
com/download
Figure 3-5: Les planches de tendance sont des collections d’images, de polices et de couleurs
destinées à aider les clients à choisir une approche visuelle générale pour un site web. La
Creative Suite d’Adobe offre les outils parfaits pour créer des planches de tendance.
19
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
poursuivre. Pour
que coule la sève
créatrice, beaucoup
de concepteurs
commencent par
assembler des
« planches de
tendance » comme
le montre l’exemple
de la Figure 3-5, qui
saisit le sentiment
photographique
générale, l’utilisation
de la palette de
couleur et des
polices. En créant
des planches
de tendance,
vous n’avez pas
à vous inquiéter
immédiatement
de la navigation et
de la structure du
site. C’est un excellent moyen d’avoir une
longueur d’avance dans la détermination
du style visuel alors que l’équipe chargée
de l’expérience utilisateur travaille sur
l’architecture des informations et sur les
détails de la structure filaire.
Figure 3-6: Les tuiles de style sont plus spécifiques à la marque d’un client
que les planches de tendance. Ils offrent une chance de montrer les polices,
les couleurs et le traitement des boutons à côté des images et des logos
de la marque.button treatments alongside brand images and logos.
«Maquettes détaillées» web
Une fois que vous obtenez le ressenti pour
le style visuel qui fonctionne le mieux, vous
devrez créer des maquettes de page web
d’apparence réaliste dans un design proposé.
Utilisez les diagrammes filaires en tant que
guide en termes de navigation et d’éléments
de contenu, ces maquettes de conception
montreront à quoi ressemblera la page finie.
J’aime montrer au moins trois différentes
maquettes de conception entre lesquelles le
client peut choisir.
Après des allers retours, vous obtiendrez
finalement l’approbation pour un design
et vous commencerez à produire des «
maquettes détaillées » de conception. Les
compositions sont des fichiers sources
d’illustrations, typiquement construits sous
Adobe Photoshop, qui comprennent toutes
20
Figure 3-7: Ce site pour mobile est en fait une « maquette détaillée » pour
montrer à quoi ressemblera le site. Sur la droite, vous pouvez voir les couches
Photoshop qui contiennent tous les composants d’illustrations sources.
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
les pièces de composants d’illustrations nécessaires
pour construire une page ou une série de pages.
Comme vous pouvez le voir dans la Figure 3-7,
elles semblent absolument réelle, comme s’il était
possible de les placer directement sur le serveur
pour qu’elles fonctionnent. Malheureusement, ce
n’est pas le cas. Les compositions de conception
doivent être reconstruites en utilisant des outils
de développement web que nous couvrirons dans
l’Unité 4.
3.2 Photoshop
Adobe Photoshop obtient une attention particulière
dans ce cours parce qu’il s’est dégagé en tant
qu’outil logiciel standard utilisé au sein des agences
de conception et de développement de sites web.
Apprendre à utiliser Photoshop à son potentiel
maximum demandera un important investissement
en temps, mais cela vaudra bien l’effort. En raison
de son ubiquité, partager les maquettes détaillées
Photoshop entre différents concepteurs, développeurs
et clients crée un flux de travail efficient.
Alors qu’il existe d’autres candidats tels qu’Adobe
Fireworks, qui a été conçu spécialement pour créer
des maquettes détaillées, aucun n’a obtenu une
pénétration de marché suffisante pour convaincre
les concepteurs de l’utiliser à grande échelle. Comme
déclaré auparavant, les maquettes détaillées de site
ont l’air réel, mais elles ne servent réellement que
de source pour les graphismes et de guide de mise
en page. La maquette détaillée est transmise à un
développeur qui doit ouvrir le fichier et extraire ce
dont il a besoin pour recréer la page en langages de
code. Par conséquent, les développeurs ont besoin
de travailler confortablement à l’intérieur du logiciel
et de parcourir le fichier source. Comme vous
pouvez le voir dans la Figure 3-7, les fichiers sources
de Photoshop, ou fichiers « .psd » (nommés en
fonction de leur extension de fichier), possèdent de
nombreuses couches qui contiennent potentiellement
des centaines d’éléments graphiques individuels.
3.3 Ressources de médias créatifs en
ligne
Lorsque vous créez des maquettes détaillées de
conception de site, vous devrez incorporer des
actifs de photographie, des boutons et des icônes,
un faux texte (nous expliquerons pourquoi) et vous
devrez utiliser des polices au-delà de celles qui sont
installées par défaut sur votre ordinateur. Ci-dessous,
vous trouverez une liste de ressources en ligne pour
ces actifs créatifs :
Médias de stocks
Une des meilleures
sources de stock
peu coûteux de
photographies,
d’illustrations, de
vidéo et d’audio est
iStockphoto. Leur base
de données d’actifs
créatifs grossit chaque
jour en raison des
concepteurs amateurs
et professionnels,
des musiciens et des
photographes qui
téléchargent leur travail
et reçoivent des droits
d’auteur lorsque des
concepteurs tels que
vous choisissent et
utilisent leurs biens.
Figure 3-8: iStockphoto.com est une ressource créative en ligne peu coûteuse et vaste
pour les actifs de photographie, de vidéos, d’icônes, d’illustrations et d’audio.
Comme le montre la
Figure 3-8, une solide
© iStockphoto LP. www.istockphoto.com
21
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
fonctionnalité de recherche
vous permet de trouver les actifs
appropriés par profil de couleur,
par thème et orientation
d’image. Une fois que vous avez
trouvé un actif, le prix est relatif
à sa taille et sa résolution. Vous
pouvez également télécharger
des images avec l’élément en
filigrane pour pouvoir, avant
achat, voir les actifs à l’œuvre
dans vos conceptions web.
Polices en ligne
Une autre des ressources
favorites en ligne est Veer.com.
Même si Veer est également
une bonne ressource pour
les stocks de photographies,
il excelle réellement en tant
que ressource de polices.
Vous pouvez chercher les
polices à l’aide d’adjectifs
communs tels que « moderne
» ou « dessiné à la main »,
ou vous pouvez trouver les
polices par style tel que « sans serif ».
Le résultat de recherche qui apparaît,
comme montré dans la Figure 3-9,
vous permet de raffiner encore plus vos
critères de recherche (panneau de gauche), et même
mieux, de taper votre propre texte pour voir à quoi
ressembleront vos gros titres.
« Texte grec »
En développant des structures filaires et des
maquettes détaillées de design, vous n’incluez
jamais un texte réel, ou une « copie » comme elle
est appelée. Les auteurs assignés à un projet de site
génèrent habituellement une copie sous la forme de
documents Microsoft Word. La copie n’est placée
dans le site web qu’après avoir été revue, corrigée
et approuvée. La copie est généralement placée
directement dans une base de données – contournant
l’ensemble des maquettes visuelles détaillées.
Essayer de raffiner et de modifier une copie dans
des outils logiciels graphiques au cours du processus
de conception n’est pas une pratique efficace. Non
seulement les concepteurs ne sont habituellement pas
22
Figure 3-9: Veer.com is an excellent resource to find
appropriate fonts for your web or mobile site project.
© Veer, a Corbis Corporation Brand. www.veer.com
les auteurs, mais vous ne voulez pas que le processus
créatif visuel soit entravé par des essais de découverte
de titres incisifs et de corps de copie informatif.
Donc, ce qu’utilisent les concepteurs est un fauxtexte appelé (injustement, puisque c’est du latin !) «
Texte grec » en anglais, ou encore « lorem ipsum »,
en tant qu’élément de substitution pour le corps de
copie de leurs maquettes détaillées. Les concepteurs
utiliseront une copie réelle pour les éléments de
navigation et pour les principaux titres pour que
les membres de l’équipe et les clients puissent
mieux évaluer le design de la page, mais il doit être
clairement affirmé que ce texte n’est pas final et qu’il
n’est présent qu’à des fins de visualisation. Voyez
comment la Figure 3-10 montre un mélange de titres
lisibles et de faux-texte de substitution.
Une excellente ressource en ligne pour générer du
faux-texte se trouve à t http://www.lipsum.com/
© 2012 Excel With Business
CONCEPTION DE SITE WEB
L‘UNITÉ 3 Outils de conception de site web
Figure 3-10: Lors du développement de maquettes détaillées de site web, utilisez de la copie réaliste (pas nécessairement
final) pour les principaux titres, locutions et navigation. Utilisez du faux-texte de remplissage pour tout le reste.
NEXT
PROCHAINE
23
L‘UNITÉ 4 Outils de conception de site web
© 2012 Excel With Business