Comment faire un wireframe

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, des images et des boutons. Un exemple d`une liste que vous pourriez faire comprendrait: navigation, curseur sur l`image, des boîtes d`introduction, les icônes de réseaux sociaux, les derniers liens de l`article et un droit d`auteur / footer

Déterminer la largeur de votre conception que vous voulez commencer. Dimensions de la mise en page standard sont 960px, 980px et 1020px, mais un avantage de l`wireframe est qu`il vous permet d`expérimenter avec l`échelle de vos éléments jusqu`à ce que tout semble bon.

Choisissez une méthode pour créer votre wireframe. Création d`un wireframe à la main peut être le plus facile, mais il peut ne pas se traduire ainsi à 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 wireframes soit, mais ils 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-friendly formats.

Créez un nouveau document qui est au moins 1680px de large et 980px élevé. 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 grand que votre conception. Lors de l`élaboration à la main, utiliser du papier quadrillé si possible, où un carré est égale à 10 pixels. Sans une grille, convertir un pouce à 100 pixels.

Commencez par créer un rectangle centré en utilisant la largeur et la hauteur de vos dimensions de mise en page de démarrage, qui agiront comme 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 Wireframe et l`interface utilisateur sont utiles à ce stade, vous fournir des éléments standard, vous pouvez placer au sein de votre wireframe tels que des icônes, des zones de texte, barres de recherche, les menus et ainsi de suite.

Marquez chaque élément clairement avec une écriture soignée ou une police sans-serif. Si vous souhaitez inclure les 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.

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

Enregistrez le fichier en tant que JPG pour une compatibilité maximale avec tout ce que votre logiciel client peut utiliser pour la visualiser. Si vous utilisez un logiciel qui prend en charge les couches, enregistrer une copie en couches pour vous-même de sorte que vous pouvez facilement modifier des éléments plus tard, ou utiliser ce wireframe à nouveau comme un modèle pour un autre projet. Si vous avez dessiné votre wireframe à 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.

Commencez par créer vos dimensions principales de mise en page, qui agiront comme cadre principal. La plupart des logiciels de wireframe est livré avec des tailles de mise en page standard pour choisir. Utilisez un fond de couleur ou transparent à la lumière.

Glisser-déposer ou ajouter des éléments des bibliothèques fournies au sein de l`outil. Les choses à garder à l`esprit sont l`espace blanc, le flux de contenu, et l`expérience de l`utilisateur prévu. Vous pouvez régler l`échelle et la taille des éléments de ces outils en faisant glisser leurs poignées de dimension.

Marquez chaque élément clairement 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 les 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 feront automatiquement pour vous.

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

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