Share
Le wireframing est une partie utile du processus de conception de site Web. Il est bon de séparer cette étape de planification et de bien définir le positionnement, l'espacement, la mise en page et d'autres éléments tels que la taille et le ton du texte avant de passer à Photoshop pour ajouter de la couleur, de la texture, des images et des effets afin d'améliorer votre conception..
Fireworks est un excellent outil pour créer une image filaire. Bien que cela ne fonctionne pas parfaitement avec Photoshop, vous pouvez exporter là-bas, puis créer votre image filaire. Nous couvrirons le processus de conception de la création d'une structure filaire pour un site Web d'application iPhone sur Fireworks. Pour ceux d’entre vous qui ne sont pas familiers avec ce programme, ce sera un bon point de départ pour l’utiliser pour structurer vos projets de conception Web. Ceci est une première partie d'une série en plusieurs parties et sera amusant!
Vous trouverez ci-dessous la structure filaire sur laquelle nous allons travailler et vous pouvez voir la version complète en mode filaire ici. Vous souhaitez accéder aux fichiers source complets et aux copies téléchargeables de chaque didacticiel, y compris celui-ci? Rejoignez Vector Plus pour seulement 9 $ par mois.
La création de structures filaires en tant qu'étape distincte du processus de conception de votre site Web présente de nombreux avantages. En voici quelques uns:
Il existe de nombreux programmes que les concepteurs Web peuvent utiliser pour la création d'images en fil de site Web. Voici quelques critères pour choisir un programme à utiliser sur un projet donné: votre familiarité avec le programme, votre capacité à y travailler rapidement, la fonctionnalité du programme, son adaptabilité au projet en cours, sa capacité à stocker des éléments réutilisables, et flexibilité pour faire des modifications.
Vous voudrez peut-être utiliser un programme ne faisant pas partie de la famille Adobe, tel que Omni Graffle, et il en existe certainement d'autres également. Si vous allez utiliser un programme de la suite Adobe pour la création d'images en fil de cercle, même si Fireworks règne en règle.
Vous pouvez utiliser Photoshop, bien qu’il soit plus lent à utiliser pour la trame filaire et qu’il manque des fonctionnalités multi-pages et d’autres fonctionnalités qui permettent à Fireworks de planifier rapidement des sites Web, qu’ils soient gros ou petits. J'ai écrit un article sur l'utilisation d'Illustrator pour la construction de structures filaires au début de 2008 (plus une preuve de concept qu'une recommandation). Bien qu'il soit possible de l'utiliser à cette fin, il manque les outils dont dispose Fireworks pour la création d'images en fil. Je recommande d'utiliser Fireworks dans la plupart des cas pour la configuration en fil de fer. C'est vraiment bien construit à cet effet.
Nous utilisons Fireworks pour ce projet car il est rapide à utiliser. En outre, vous pouvez facilement créer des blocs, les positionner, ajouter du texte, ajouter des coins arrondis et créer rapidement des mises en page avec Fireworks. Il est configuré pour le développement et le prototypage Web. Lorsque vous dessinez des boîtes, elles sont automatiquement alignées sur les pixels. Ceci sans même puiser dans les fonctionnalités plus avancées des programmes.
Il est également possible d'exporter vers Photoshop une fois que vous avez terminé de créer une structure filaire, ce qui est un flux de travail idéal lorsque votre conception finale aura les détails optimaux dans Photoshop. Il y a quelques problèmes que j'aimerais voir dans la prochaine version de l'adresse Adobe avec l'intégration du flux de travail de Fireworks à Photoshop.
Commençons maintenant avec le processus de planification de notre projet et de construction de notre structure filaire..
Avant de vous lancer dans Fireworks et de commencer à créer un site Web, vous devez suivre quelques étapes. Le premier est bien sûr de définir votre projet, le contenu qu’il contiendra, son objectif, etc. Une fois que vous avez résolu le problème avec le client ou que vous vous êtes concentré sur votre projet, il est temps de faire des recherches..
Pour ce projet fictif, nous créons un site Web promotionnel pour applications iPhone pour Aurora, qui est une application iPhone hypothétique pour éclairer votre iPhone avec des motifs lumineux Aurora Borealis. L'idée est qu'il s'agit d'une page d'un projet plus vaste pour une entreprise vendant plusieurs applications pour iPhone. Nous nous concentrons sur cette page pour ce tutoriel.
En tant que designer, nous sommes quelque peu préoccupés par le style depuis le début. Vous voudrez peut-être prendre des notes sur les styles que vous rencontrerez dans vos recherches visuelles ou créer un tableau d'humeur. Notre objectif principal sur la création d’une structure filaire consiste toutefois à définir notre mise en page et nos fonctionnalités (sans se soucier de la couleur ou du style à ce stade)..
Pour ce projet, j'ai parcouru de nombreux sites d'application pour iPhone. J'ai remarqué qu'il existe certaines fonctionnalités communes qui, selon moi, aideraient à vendre une application. Je suis tombé sur des mises en page qui me plaisaient. En voici quelques unes:
J'ai aimé le menu secondaire à Tapulous. Il y avait quelques autres sites qui avaient plusieurs icônes d'application fonctionnant verticalement, ce qui présente l'avantage de pouvoir ajouter un nombre illimité d'applications et le menu y correspondait, mais j'ai vraiment aimé l'accès facile de le faire fonctionner horizontalement vers le haut, car ce site Est-ce que.
Le site Tapbots comporte de nombreux éléments communs sur bon nombre des sites promotionnels les plus populaires pour les applications iPhone. Il a une grande image iPhone qui a un fichier vidéo intégré montrant l'application en action. Il contient une liste claire de fonctionnalités, des témoignages et d’autres contenus dans une grille organisée, des liens miniatures vers de plus grandes captures d’écran et un lien vers la boutique en ligne pour iPhone qui se démarque audacieusement..
Le site Sonico Mobile propose également une navigation secondaire composée d’icônes horizontales que j’ai aimé. J'ai aussi beaucoup aimé leur utilisation de l'espace promotionnel et la façon dont l'iPhone verticalement vertical a divisé cet espace promotionnel horizontal. La manière dont ils ont rompu les prix dans l'espace promotionnel est également bien faite.
Je suis sûr que je pourrais trouver plus de sites qui ont influencé la conception, mais ce sont ceux-là qui ont été les mieux mélangés pour la présentation de base du site. À ce stade, j'ai une bonne idée de ce à quoi je veux que le site ressemble dans ma tête. Alors maintenant, j'ai besoin de le mettre sur papier.
Vous pouvez voir le croquis ci-dessous. Je fais souvent plusieurs croquis pour essayer différentes mises en page, ce qui est très facile à faire lorsque vous travaillez brut avec un crayon et du papier, mais dans ce cas, je me sentais bien après le premier dessin et j'ai donc fini. Remarquez que j'aborde le problème à la fois visuellement et verbalement, en prenant des notes et en listant les fonctionnalités que je veux voir..
N'oubliez pas qu'il est normal que les choses changent lorsque vous passez d'esquisse à une structure filaire dans Fireworks, mais l'esquisse vous aide à comprendre vos idées de base et à réfléchir à vos idées initiales..
Maintenant que nous savons ce que nous allons créer, préparons notre document. J'ai décidé d'utiliser le système de grille 960 comme base de la conception. Maintenant, peu importe si ce framework est même utilisé pour le coder à la fin, mais c'est une grille déjà établie, avec laquelle il est facile de travailler, et je sais qu'elle convient à la plupart des moniteurs, je l'utilise donc souvent pour conception.
Allez-y et téléchargez le système de grille 960. Décompressez-le dans ce dossier, sélectionnez modèles> Fireworks et ouvrez le document "960_grid_12_col.png" dans Fireworks (le fichier PNG est un fichier Fireworks en couches)..
Allez dans Modifier> Toile> Taille de la toile et changez la taille de la toile en 1060px de large par 1500px de hauteur. Cliquez maintenant sur le dossier "12 Col Grid" dans la palette. Déverrouillez-le, puis sélectionnez toutes les colonnes roses, étendez-les sur toute la longueur du document et verrouillez à nouveau le dossier des calques..
Maintenant, allez dans Fichier> Enregistrer, choisissez où le placer et nommez-le "wireframe.png".
Maintenant, configurons nos couches pour que notre fichier reste organisé. Nous apporterons des modifications au fur et à mesure, mais c'est un bon début. Suivez la capture d'écran ci-dessous. Notez que la "couche Web" n'est pas une fonction que nous allons utiliser pour ce projet, mais elle ne peut pas être supprimée de Fireworks..
Créer une mise en page filaire est un peu un processus organique. Reportez-vous à votre croquis et commencez par les plus gros éléments. Nous allons commencer par placer nos fonds pour nos sections principales. Certaines sections vont utiliser le fond du site.
Utilisez l'outil Rectangle (U) pour créer les fonds "en-tête" (hauteur 80px) et "bas" (hauteur 360px), qui couvrent toute la largeur de notre site. Créez également notre zone d’arrière-plan "promotion" (laissant de la place pour notre navigation secondaire). Elle a une largeur de 940 pixels (la taille de la zone de document principale avec des marges de 10 pixels sur chaque taille) et une hauteur de 280 pixels..
L’un des avantages de travailler avec Fireworks est l’inspecteur des propriétés. J'ai donné à cette boîte une rondeur de 10% de l'inspecteur, ce qui a l'air bien. Notez qu’une chose que vous voulez éviter avec vos boîtes arrondies est de les redimensionner manuellement, car cela enlèverait la courbure de la boîte. Utilisez les champs largeur et hauteur de l'inspecteur des propriétés pour ajuster la taille à la place..
Commençons par les zones "header" et "secondary_nav". La plupart de ces zones constituent la navigation principale et secondaire, ainsi que quelques autres détails. Tout d’abord, placez le nom du site aligné à gauche de notre "en-tête". Ceci est un espace réservé pour le logo final.
Commencez par placer le texte de navigation dans le calque "en-tête" à l'aide de l'outil Texte (T) et utilisez une police sans empattement standard telle qu'Helvetica, Myriad Pro ou toute autre police de votre choix. Vous voudrez peut-être vous en tenir à des polices adaptées au Web. Je mets le type à 13 pts, avec une couleur noire, et le rend audacieux. Ajoutez ensuite des boîtes arrondies d’une hauteur de 26 px et d’une largeur appropriée. Définissez l'espacement comme bon vous semble et alignez les cases sur la droite, comme indiqué. Remarquez comment la navigation sélectionnée est représentée avec un arrière-plan sombre et du texte blanc.
Ajoutez maintenant des cases pour la navigation secondaire. Créez chaque zone d'icône d'application à 57px par 57px avec une rondeur forte. Laissez de la place pour une autre boîte de 90 px de large par 100 px de hauteur pour s’adapter derrière l’icône de navigation avec un espace alloué entre chacun. Ajoutez des noms sous chaque icône à 10 points, noir et gras. De plus, j'ai ajouté un graphique d'espace réservé pour un bouton standard de l'App Store aligné à droite, ce qui ajoute un appel à l'action et une certaine légitimité..
La première étape consiste ici à créer deux boîtes en utilisant les mêmes méthodes que celles décrites ci-dessus. Le grand à droite représente un espace où ira l'image d'un iPhone, vidéo que l'on pourrait ajouter à l'écran. La case inférieure est notre principal appel à l'action.
Maintenant, ce bouton a à peu près la même taille que le bouton standard de l'App Store et tous deux sont liés au même endroit (ils remplissent une fonction similaire). Cela peut sembler excessif dans le cadre filaire, mais avec la couleur et d’autres détails, cela peut fonctionner une fois que nous avons créé le dessin final. C’est quelque chose à noter cependant.
Mon sentiment est que le bouton Standard ajoute un peu de crédibilité, et nous pouvons traiter l'autre bouton de manière stylistique de manière à ce qu'il se démarque davantage et attire vraiment le regard comme le principal appel à l'action..
Remarquez comment ces cases chevauchent l'arrière-plan de la zone promotionnelle. Ce type de mise en page fait vraiment ressortir ces deux éléments sur la page.
Créons un espace pour placer le prix de l'application. Créez d'abord une boîte à l'aide de l'outil Rectangle (U). Tout en créant la boîte, maintenez la touche Maj enfoncée pour en faire un carré parfait. Allez-y et faites cette 170px large par 170px hauteur.
Maintenant, appuyez sur Commande + T, maintenez la touche Maj enfoncée et faites pivoter le carré à un angle de 45 degrés. Ensuite, alignez-le comme indiqué ci-dessous afin qu’il soit placé uniformément sur l’arrière-plan de la zone promotionnelle. Copiez maintenant (Command + C) l’arrière-plan de la zone promotionnelle et Coller (Command + V), qui dans Fireworks colle automatiquement une copie à la place..
Sélectionnez maintenant le carré et l’arrière-plan, puis sélectionnez Modifier> Combiner les chemins> Intersection. Et ta gauche avec la forme que nous voulons.
Maintenant, ajoutez tout le texte comme nous l’avions fait auparavant. Vous pouvez explorer diverses options de texte à ce stade. Je me concentre principalement sur la taille, le poids et la position dans cette structure filaire et je vais travailler sur le style et les polices dans la conception finale. Le prix est également créé en appuyant sur Commande + T, en maintenant la touche Maj enfoncée et en faisant pivoter le texte de 45 degrés. Puis changez l’espacement et la taille jusqu’à ce que cela ait l’air beau.
Ajoutez également une règle horizontale sous le texte le plus large (rectangle de hauteur 1px). Activez ensuite les guides en appuyant sur Commande + Touche deux points. Assurez-vous que tout ce que vous avez créé s'aligne comme indiqué ci-dessous.
Les techniques utilisées pour placer ces informations sont toutes basiques. Ce sont tous des boîtes de base et du texte. Allez-y, placez les informations relatives au corps comme indiqué ci-dessous (vous pouvez activer les guides et la superposition de grille, comme indiqué dans la section suivante). Le but de cette section est d’ajouter des détails sur les ventes. Nous décrivons l'application, son rôle, en montrant des captures d'écran, en ajoutant des détails techniques mineurs et en fournissant des témoignages..
Allez-y et activez le calque "12 Col Grid" qui contient notre superposition de grille et allumez nos guides. Notez que cette section utilise une configuration à trois colonnes. Chaque colonne mesure 300 pixels de large. La grille n'est pas aussi évidente ci-dessus, mais vous pouvez voir comment le boîtier de l'iPhone s'aligne sur la troisième colonne et le texte promotionnel sur les deux premières colonnes de la section du corps. La structure de notre grille est vraiment visible maintenant.
Assurez-vous de garder vos couches organisées, comme indiqué ci-dessous.
L'image ci-dessous montre ce que nous créons pour la section inférieure. Il y a quatre sections, alors gardez vos couches organisées en conséquence. Cette section est axée sur l'entreprise et non sur l'application. De nombreux sites vendant des applications iPhone vendent plus d'une application ou, dans certains cas, se concentrent sur plus que la vente d'applications iPhone. Le but de cette section est donc de promouvoir la société, son blog, son support client et son fil Twitter..
Remarquez comment nous utilisons notre réseau différemment pour cette section. Nous sommes allés avec un ensemble de quatre colonnes mis en place ici, ce qui rend chaque colonne 220px large.
La majeure partie de la construction de cette section est constituée de texte et de zones de base. Les zones de liens situées au bas de chaque section ont la même taille que notre navigation principale et peuvent être copiées à partir de là. Regardons quelques aspects de cette section. La première étape consiste à créer une ligne en pointillé, ce qui est simple à faire dans Fireworks..
Vous pouvez bien sûr utiliser l'outil Ligne (N) pour créer la ligne, mais j'ai utilisé l'outil Rectangle (U) à la place. Faites la taille 220px large par 1px de hauteur. Ne lui donnez pas de remplissage et une couleur de trait d'un gris plus foncé que l'arrière-plan. Créez la taille de l’accumulateur 1. Cliquez ensuite sur le bouton à côté de la taille du trait, ce qui nous donne des options de ligne. Allez aux tirets et choisissez Dotted comme indiqué ci-dessous.
Une des choses que je fais souvent lors de la création de structures en fil de fer est de penser à toutes les icônes qui seront utilisées dans la conception finale. Dans ce cas, il n'y en a qu'un que nous utiliserons ailleurs. Vous pouvez conserver l'icône en couleur, mais je veux que cette image filaire soit en niveaux de gris et qu'elle se concentre sur la disposition et l'espacement, et non sur la couleur pour le moment..
Téléchargez le pack d’icônes gratuit Practika de Smashing Magazine. Faites glisser le fichier "twitter.png" 64px sur 64px dans le document. Placez-la comme indiqué et assurez-vous que la case sur laquelle elle est placée est suffisamment large pour qu'elle puisse s'intégrer. Maintenant que l'image sélectionnée est sélectionnée, allez à Filtres> Ajuster les couleurs> Teinte / Saturation, puis réglez la Saturation au minimum..
Encore une fois, gardons nos dossiers organisés.
C'est vraiment basique. Assurez-vous d'ajouter le nom du site et les droits d'auteur. Aussi, placez des liens textuels répétant la navigation du site principal. S'il existe des liens supplémentaires importants, vous pouvez également les placer ici. Alignez le copyright sur le bord gauche et les liens sur le bord droit comme indiqué ci-dessous.
Dans le didacticiel Création d'une structure filaire de site Web dans Illustrator, je traite de l'ajout de légendes à une structure filaire. Il s'agit d'un moyen utile d'ajouter des notes à une structure filaire. Un autre moyen utile consiste à placer les notes en ligne. Ceci est assez simple et est utile pour communiquer des fonctionnalités, des fonctionnalités ou des problèmes avec les clients.
J'aime placer les notes en bleu, de manière à ce qu'elles reposent sur le fil de fer et que le bleu ait une apparence de plan. La dernière image filaire est ci-dessous et vous pouvez voir la version complète en fil de fer ici.
Dissociez tout ce que vous ne voulez pas pixelliser lorsqu'il passe à Photoshop. Si vous souhaitez par exemple conserver la possibilité de texte, vous devez vous assurer que le texte n'est pas groupé. C'est bien de placer des choses dans des dossiers cependant. C’est l’une des particularités de l’exportation de Fireworks vers Photoshop..
Vous pouvez également décider s'il est utile de transférer le texte de Fireworks vers Photoshop (vous pouvez choisir de le supprimer, puis de le recréer dans Photoshop). J'ai eu l'expérience que les zones de texte sont étranges, comme vous le verrez dans le prochain tutoriel qui reprend cette image filaire et crée un site Web Photoshop en couleur. Dans ce cas, nous allons garder le texte en place.
Allez dans Fichier> Enregistrer sous et cliquez sur Options. Le paramètre par défaut est Conserver la faisabilité sur l'apparence. Allez-y et laissez cette valeur par défaut, puis cliquez sur Enregistrer. Le maintien de la comestibilité placera nos formes en tant que calques de forme dans Photoshop plutôt que de les rasteriser, ce qui est préférable dans ce cas..
Fireworks est idéal pour les sites Web de wireframing et de prototypage. Même dans une conception d'une page, vous remarquerez à quelle vitesse vous pouvez élaborer diverses options de mise en page et construire rapidement la structure de votre conception. Une fois que vous aurez commencé à utiliser ce programme pour des projets plus importants, vous découvrirez également une multitude d’outils. Dans notre prochain tutoriel de cette série, nous allons prendre cette application filaire pour iPhone et terminer le design dans Photoshop..
Fireworks contient un certain nombre de fonctionnalités supplémentaires, qui ne sont pas abordées dans ce didacticiel, mais qui pourraient vous aider dans votre prochain projet. Vous trouverez ci-dessous quelques didacticiels utiles sur l’utilisation de Fireworks pour Wireframing. De plus, si vous rencontrez des didacticiels ou des ressources pertinents, veillez à les relier dans les commentaires pour les partager avec la communauté..
Abonnez-vous au fil RSS Vectortuts + pour rester au courant des derniers tutoriels et articles sur les vecteurs.
Accentsconagua