Share
Après avoir fait un croquis, il y a une dernière chose sur laquelle vous devriez travailler avant de commencer à concevoir (bien que, certes, tout cela fasse partie de la conception). Wireframing est essentiellement un guide visuel d'un site Web qui vous aide à regarder la mise en page sans penser à l'esthétique du projet..
L'aspect d'une structure filaire varie énormément, en fonction de votre interlocuteur. Vous disposez de nombreuses options lors de la création de structures filaires - de la manière dont vous affichez vos structures filaires au logiciel avec lequel vous les créez..
Lors de la création de vos structures filaires, vous devez utiliser la mise en page et le contenu que vous avez précédemment organisés. L'idée d'une structure filaire - pouvant être livrée à un client, ou tout simplement comme une étape supplémentaire que vous préférez prendre - est de pouvoir afficher la mise en page et le déroulement d'une page de site Web avant de vous perdre avec le design. des détails tels que la couleur, la typographie ou tout autre aspect visuel.
Le meilleur moyen de créer des structures filaires numériques pour votre projet est de passer directement de la phase d'esquisse. Dans cette section, vous devriez déjà avoir déjà joué avec la mise en page, mais créer une structure numérique est un moyen beaucoup plus professionnel de définir vos idées sur la mise en page et le déroulement de votre page Web..
Lorsque vous concevez des structures filaires créatives, vous voulez vous assurer que vous utilisez le contenu réel que vous avez créé au début du projet. Personnellement, je préfère concevoir des structures filaires dépourvues de tout ce qui pourrait persuader un client de penser que les décisions de conception qui affectent l’apparence du projet sont prises. Par conséquent, je m'assure toujours de concevoir une structure filaire qui se concentre uniquement sur le contenu du projet et sur la manière dont le contenu est présenté sur la page..
Exemple d'image filaire créée à l'aide de l'application Balsamiq Desktop. Un contenu bien écrit et affiché de manière utile et pertinente pour ceux qui le liront se traduira toujours par une meilleure conception et une meilleure expérience en ligne. Une structure filaire bien conçue est une structure qui tient compte du fait que le contenu est l'élément le plus important de la page et qui permet d'afficher ce contenu de manière adaptée au projet et à ses utilisateurs finaux..
L'étape filaire d'un projet est étroitement liée au moment où vous modifiez et travaillez avec votre contenu vers le début du projet. À titre d’exemple, à ce stade, vous aurez travaillé dur pour vous assurer que le contenu sera facile à lire en utilisant correctement les en-têtes et les listes. Concevoir une bonne structure en fil de fer signifie transférer ce contenu (en paragraphes, en-têtes, en listes, et de toute autre manière que vous avez choisie pour formater le contenu) dans votre structure en fil de fer et en recherchant comment vous pouvez commencer à créer. visuel relations entre chaque bit de contenu, en reliant les points jusqu'à ce que vous obteniez une représentation visuelle de l'apparence possible de ce contenu sur une page.
Afin de garder vos wireframes sans conception et axés sur le contenu, travailler avec des blocs est un moyen très simple de sectionner des parties d'une page pour des zones de contenu particulières..
Dans la pratique, cela signifie que si, par exemple, vous vouliez un en-tête standard en haut de la page, vous ajouteriez un bloc en haut de votre conception filaire. Si, par exemple, vous vouliez ajouter un logo et une zone de navigation dans l'en-tête, vous devez placer des blocs supplémentaires pour ces éléments dans l'en-tête de votre structure filaire..
Vous pouvez ensuite utiliser des blocs dans le reste de la conception filaire, en continuant de sectionner des zones pour des bits de contenu spécifiques.
Toutefois, les blocs ne doivent pas uniquement être un carré ou un rectangle monochrome littéral. Une fois que vous avez une idée de votre présentation de base avec les blocs que vous avez ajoutés, n'hésitez pas à utiliser votre contenu réel dans des endroits qui vous seront utiles. Par exemple, utilisez le contenu réel pour les éléments de navigation, une introduction à une page, les en-têtes, etc. Cela vous aide à voir de manière visuelle comment le contenu fonctionne ensemble dans la mise en page que vous créez..
Lorsque vous concevez vos structures filaires, veillez toujours à bien étiqueter les zones ou les sections que vous placez dans votre structure filaire. Bien que vous puissiez comprendre ce qu’un bloc désigne (en particulier lorsque le contenu réel n’y est pas placé), un client ou un collègue ne le sait pas et vous devez le préciser aussi clairement que possible pour qu’il comprenne ce qu’il regarde..
Lorsque vous concevez vos structures filaires, vous devez prendre en compte le flux de la page: examinez la façon dont le contenu est placé sur la page et comment il passe d'une section de contenu à une autre..
Le but ici est de s’assurer que le contenu est correctement lu et que l’œil bouge librement d’une section à l’autre. Cela est particulièrement important lorsque vous avez des pages contenant beaucoup de contenu - les utilisateurs doivent pouvoir passer facilement d’une section à l’autre, sans que cela soit une expérience choquante. Si les pages sont trop occupées et qu'elles ne sont pas correctement classées, les utilisateurs seront désemparés par ce qui semble être un processus difficile à comprendre ou à suivre..
Une idée est de penser à ce que vous feriez de manière intuitive lorsque vous naviguez sur un site Web - commencez par regarder vers le logo et l'en-tête, puis vers le titre principal et suivez le contenu principal, en vous déplaçant progressivement vers une barre latérale, etc..
Lors de la conception d'un site Web, il est presque impossible de créer une structure filaire distincte pour chaque étape de modification, de présentation ou d'assemblage du site Web. Au lieu de cela, après avoir pensé au flux de votre conception et de votre contenu, vous pouvez regarder un flux réactif vers la conception filaire..
C’est un conseil que j’ai retenu lors de la discussion Responsive Day Out de Sarah Parmenter, dans laquelle Sarah explique comment elle ajoute des numéros à sa structure filaire qui aident un client à comprendre comment le contenu et les éléments peuvent s’empiler sur un écran plus petit. C’est vraiment utile, car cela aidera un client à comprendre la hiérarchie du contenu, ce qui signifie également que vous pouvez commencer à examiner les pièges et les difficultés possibles lorsque vous travaillez de manière réactive très tôt dans le projet, ce qui peut vous faire économiser beaucoup. beaucoup de temps plus tard dans le projet.
Lors de la conception de structures filaires, vous avez un choix ridicule en ce qui concerne le logiciel que vous pouvez utiliser. Personnellement, je pense qu’il existe trois choix bien définis qui semblent le plus populaires, en particulier dans l’industrie du Web..
Lors de la conception d’une structure filaire, la solution la plus simple est peut-être de travailler avec une application graphique que vous connaissez déjà - ou du moins que vous en avez déjà utilisée un peu auparavant. Cela signifie qu'il y a peu ou pas de courbe d'apprentissage, vous pouvez donc espérer concevoir vos structures filaires un peu plus rapidement.
La manière la plus simple de concevoir avec votre logiciel graphique consiste à utiliser les outils de forme et de texte, qui permettent de créer vos blocs de base, ainsi que des zones spécifiques avec un contenu réel. N'oubliez pas d'étiqueter vos blocs filaires à l'aide de l'outil Texte pendant que vous avancez.
Cela peut être une surprise pour certains, Keynote et Powerpoint étant généralement utilisés pour créer des présentations. Cependant, ce sont des outils très puissants et faciles à utiliser pour créer d'autres éléments, y compris des structures filaires. En utilisant les outils par défaut disponibles dans les applications elles-mêmes, vous pouvez facilement créer des structures filaires d'aspect professionnel très rapidement..
Ma préférence personnelle, Balsamiq Mockups est une application dédiée à la création de structures filaires. Cette application simplifie vraiment la conception de vos structures filaires et dispose de nombreuses ressources pour glisser et déposer rapidement les éléments que vous souhaitez placer..
Une des choses que j'aime dans Balsamiq Mockups, c’est qu’elle utilise un style approximatif et schématique qui se prête vraiment à montrer que les structures filaires ne sont que cela - une idée de mise en page qui pourrait ensuite être traduite en un design approprié. Vous avez le choix entre une impression plus standard des structures filaires et une finition esquissée, si vous estimez qu'un client serait plus réceptif à cela..
Avec l'introduction des kits d'interface utilisateur, il est également très facile de commencer à concevoir des structures filaires plus complexes sur diverses applications. Des kits complets que vous pouvez télécharger pour utiliser en tant que PSD dans Photoshop, des ensembles qui vous aident à créer des structures filaires dans Keynote beaucoup plus facilement - il y a quelque chose pour vous aider.
Accentsconagua