Comment faire un wireframe

Décider 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 d`image, boîtes d`introduction, les icônes de réseaux sociaux, les derniers liens de l`article et un droit d`auteur / pied de page

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

Choisissez une méthode pour créer votre wireframe. Création d`un wireframe à la main peut être le plus facile, mais il ne peut pas bien se traduire dans un fichier numérique qui peut être utilisé comme un plan précis pour votre composite. programmes logiciels tels que Adobe Photoshop, Illustrator, InDesign ou ne sont pas vraiment optimale pour créer wireframes soit, mais ils n`assurent une compatibilité maximale avec votre conception composite ou réelle. Votre dernière option est d`utiliser un outil de wireframing, dont plusieurs permettent la collaboration et à l`exportation pour la conception respectueux de formats.

Créez un nouveau document qui est au moins 1680px de large et 980px élevé. Vous pourrez imaginer comment votre conception et son échelle regarderont lorsqu`ils sont présentés dans un navigateur Web si votre espace de travail est plus grand que votre conception. Lors de l`élaboration à la main, en utilisant 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 sera votre trame initiale. Dessinez chaque élément dans les positions souhaitées en utilisant des formes simples et des nuances de gris. Si vous utilisez le logiciel, et des kits graphiques Wireframe 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, les barres de recherche, les menus et ainsi de suite.

Étiqueter 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 ligne en pointillés de couleur claire à 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 à côté du wireframe. Vos notes de conception pourraient inclure des idées liées à la couleur, la fonctionnalité ou l`objet d`éléments dans le wireframe. Si vous utilisez un logiciel, assurez-vous que les notes sont discrets et se rapportent clairement aux éléments étiquetés par nom ou le numéro.

Enregistrez le fichier en format JPG pour une compatibilité maximale avec tous les logiciels que votre client peut utiliser pour la voir. Si vous utilisez un logiciel qui prend en charge les couches, enregistrer une copie pour vous-même en couches de sorte que vous pouvez facilement modifier des éléments plus tard, ou utiliser ce nouveau wireframe comme modèle pour un autre projet. Si vous avez dessiné votre wireframe main, vous devez numériser l`image et la redimensionner pour adapter la représentation précise des dimensions que vous définissez.

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

Glisser-déposer ou ajouter des éléments des bibliothèques fournies dans l`outil. Les choses à garder à l`esprit sont l`espace blanc, le flux de contenu et l`expérience 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.

Étiqueter 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 ligne en pointillés de couleur claire à 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 pourraient inclure des idées liées à la couleur, la fonctionnalité ou l`objet d`éléments dans le wireframe. Si vous utilisez un logiciel, assurez-vous que les notes sont discrets et se rapportent clairement aux éléments étiquetés par nom ou le numéro.

Exporter ou enregistrer le fichier au format PDF ou JPG afin que votre client peut voir facilement. Si vous avez choisi l`outil de collaboration wireframe soutient, il est une bonne idée d`inviter votre client de se connecter et laisser des commentaires.