Les partenaires publicitaires:

Comment faire un wireframe

Bien que pas tous besoin d'un projet filaire, en utilisant l'un pour générer un modèle de conception peut vous aider à obtenir une approbation rapide de votre client sur l'écoulement du contenu sans les distraire avec la couleur et la texture. Wireframes vous permettent également de réfléchir à la fonctionnalité et le fondement de votre conception. Vous pouvez facilement créer un fil de fer dans votre programme d'édition graphique, ou utiliser une multitude d'outils en ligne et des kits graphiques.

Avant que tu commences

  1. Décidez quels éléments seront présents dans votre conception. Les éléments communs à inclure sont: la navigation, les zones de contenu, des widgets ou des boîtes de fonction, les images et les boutons. Un exemple d'une liste que vous pourriez faire inclurait: Navigation, curseur sur l'image, boîtes d'introduction, icônes de réseaux sociaux, les derniers liens de l'article et un droit d'auteur / footer

  2. Déterminer la largeur de votre conception que vous souhaitez commencer. Dimensions de la mise en page standard sont 960px, 980px et 1020px, mais un avantage de la filaire est qu'il vous permet d'expérimenter avec l'échelle de vos éléments jusqu'à ce que tout ressemble à droite.

  3. Choisissez une méthode pour créer votre filaire. Création d'un fil de fer à la main peut être la plus facile, mais il peut ne pas bien se traduire dans un fichier numérique qui peut être utilisé comme un plan précis pour votre composite. Des logiciels tels que Adobe Photoshop, Illustrator, InDesign ou ne sont pas vraiment optimale pour créer des représentations filaires soit, mais ils le font assurer une compatibilité maximale avec votre conception composite ou réelle. Votre dernière option consiste à utiliser un outil de wireframing, dont plusieurs permettent la collaboration et l'exportation de concevoir-amicales formats.

Créer un filaire From Scratch

  1. Créez un nouveau document qui est au moins 1680px 980px de large et de haut. Vous serez en mesure d'imaginer comment votre conception et son échelle se penchera lors de sa présentation dans un navigateur Web si votre espace de travail est plus grande que votre conception. Lors de l'élaboration à la main, utiliser du papier quadrillé, si possible, où un carré est égal à 10 pixels. Sans une grille, convertir un pouce à 100 pixels.




  2. Commencez par créer un rectangle centré en utilisant la largeur et la hauteur de vos dimensions de la mise de départ, qui agiront en tant que votre trame initiale. Dessinez chaque élément dans les positions désirées en utilisant des formes simples et des nuances de gris. Si l'utilisation de logiciels, kits graphiques filaires et l'interface utilisateur sont utiles à ce stade, vous fournir des éléments standards que vous pouvez placer au sein de votre fil de fer tels que des icônes, des zones de texte, les barres de recherche, les menus et ainsi de suite.

  3. Étiqueter clairement chaque élément avec une écriture soignée ou une police sans-serif. Si vous souhaitez inclure des dimensions, le faire en utilisant une couleur ligne pointillée lumière à l'extérieur de l'élément et assurez-vous que l'élément représente les pixels étiquetés avec précision.

  4. Ajouter des notes de conception dans les marges ou les conserver dans un fichier séparé de présenter aux côtés de la filaire. Votre conception notes pourraient inclure des idées liées à la couleur, la fonctionnalité, ou but de les éléments dans le filaire. Si vous utilisez un logiciel, assurez-vous que les notes sont discrets et se rapportent à des éléments marqués par nom ou un numéro clairement.

  5. Enregistrez le fichier au format JPG pour une compatibilité maximale avec le logiciel que votre client peut utiliser pour la voir. Si vous utilisez un logiciel qui supporte les calques, enregistrer une copie couches pour vous afin que vous pouvez facilement modifier les éléments plus tard, ou utiliser ce filaire à nouveau comme un modèle pour un autre projet. Si vous avez dessiné votre filaire à la main, vous aurez besoin pour numériser l'image et redimensionner pour l'adapter à la représentation précise des dimensions que vous définissez.

Créer un filaire Utilisation filaire Software



  1. Commencez par créer vos dimensions principales de mise en page, qui agira en tant que votre base principale. La plupart des logiciels filaire est livré avec des tailles de page standard à choisir. Utilisez un fond de couleur ou transparent à la lumière.

  2. Drag and drop ou ajouter des éléments des bibliothèques fournies dans l'outil. Choses à garder à l'esprit sont les espaces blancs, des flux de contenus, et l'expérience de l'utilisateur prévu. Vous pouvez ajuster l'échelle et la taille des éléments de ces outils en faisant glisser leurs poignées de dimension.

  3. Étiqueter clairement chaque élément en cliquant sur le texte de l'étiquette à l'intérieur de chaque élément et en tapant un nom ou un numéro. Si vous souhaitez inclure des dimensions, le faire en utilisant une couleur ligne pointillée lumière à l'extérieur de l'élément et assurez-vous que l'élément représente les pixels étiquetés avec précision. Certains outils de wireframing le fera pour vous automatiquement.

  4. Ajouter des notes de conception correspondant à chaque élément dans les marges ou dans un document distinct. Votre conception notes pourraient inclure des idées liées à la couleur, la fonctionnalité, ou but de les éléments dans le filaire. Si vous utilisez un logiciel, assurez-vous que les notes sont discrets et se rapportent à des éléments marqués par nom ou un numéro clairement.

  5. Exporter ou enregistrer le fichier au format PDF ou JPG si votre client peut facilement le voir. Si votre outil filaire choisi prend en charge la collaboration, il est une bonne idée d'inviter votre client de se connecter et laisser des commentaires.

» » » » Comment faire un wireframe