Comment scénariser avec filaires, des dessins, des cartes de site, et organigrammes

Storyboarding désigne généralement le processus d'élaboration des croquis et diagrammes navigation entre ces pages. La combinaison des esquisses de pages (souvent désigné comme filaires) Et des organigrammes de navigation (souvent dénommée cartes du site), Établit la base pour construire un site qui regarde la façon dont il est censé regarder et fonctionne de la façon dont il est censé fonctionner.

Site Internet architecture se réfère à planifier la façon dont tous les éléments d'un site Web - contenu, convivialité (présentation du contenu d'une manière qui fonctionne sur le web), planification technique (comprendre comment le site va être construit), et esthétique (tels que la conception de pages, illustrations, schémas de couleurs, les polices et autres éléments de conception) - conviendra ensemble.

Si vous pensez à l'architecture du site comme une analogie à ce que ferait un architecte dans la conception d'un bâtiment, d'un filaire d'une page web est similaire à un plan, et un ensemble de fil de fer est analogue à un ensemble de plans qui esquisser la façon dont un bâtiment entier se penchera.

Wireframes sont rugueux croquis de la façon dont une page se penchera, ce qui signifie habituellement ils ne comportent pas de pochette développés, la typographie et les couleurs. Parfois filaires sont créés à l'aide de Photoshop, Illustrator ou Fireworks. Considérant que filaires démontrent généralement des liens vers et à partir des pages, organigrammes ou cartes du site mettre l'accent sur une représentation graphique des artères de navigation d'un site.

La figure montre une filaire, une esquisse d'une page web unique. Comme vous le voyez, il a espace réservé texte Ipsum Lorem. Et il a une barre de navigation, qui indique le débit de navigation de base à partir de la page d'accueil, sous le logo.

Ce fil de fer peut être collé sur un mur avec d'autres pages filaires pour obtenir une idée de comment les différentes pages du site sera lié à l'autre et viennent à travers à un utilisateur dans son ensemble.

Et, filaires individuels peuvent être remis à un artiste, qui se traduira par l'esquisse dans une conception artistique à part entière. Par exemple, l'espace qui a été bloqué pour une annonce est de 324 x 648 pixels (px). Ces dimensions permettront un designer pour créer une annonce web qui ressemble bien à cette taille.

Dans l'exemple précédent, en outre, pour les spécifications pour la taille de l'annonce, le fil de fer pourrait venir avec des notes, ce qui indique que les lignes pointillées sont à des fins de localisation seulement, que le concept est 60/40 entre les côtés gauche et droit de la page , et que la zone du logo devrait être 72 px de haut.

Dans la prochaine étape dans le parcours de cette page, un concepteur remplace le texte de l'espace réservé avec le texte réel, des images d'espace réservé avec de vraies images, graphiques d'espace réservé avec de vrais graphiques, et ainsi de suite - à peu près fournissant un modèle détaillé pour la page Web finale.

Sur le chemin, un concepteur apporter quelques modifications à la façon dont le contenu est esquissée dans un fil de fer. La vraie vie ne va jamais tout à fait les plans. Contenu sera plus ou moins long que prévu. Souvent, quand un fil de fer se traduit par une conception, les choses qui semblaient comme ils pourraient travailler esthétiquement dans le wireframe finir tour-offs lorsque mis en œuvre.

Bien sûr, si votre site est un projet d'une personne, vous pouvez remplir le rôle de l'esquisse (filaires et organigrammes) et la conception plus précisément la façon dont les pages seront effectivement regarder.

Voici ce que le fil de fer pourrait finir par ressembler à la suite d'un concepteur crée une vraie annonce et le logo, remplit un texte réel, et joue avec un jeu de couleurs possible.

L'arbitre (s) de la façon dont un site est censé ressembler pourrait être un client, une équipe de collaboration, ou tout simplement vous. Dans aucun de ces scénarios, vos filaires et navigation organigramme servent ensemble comme le modèle pour votre site.

Voulez-vous, le long du chemin, apporter des modifications à ce plan? Bien sûr. Mais les bonnes croquis de base et une carte de navigation de base peut être la différence entre un plan de site Web qui serpente toujours et celui qui se réunit plus ou moins comme prévu, sur le calendrier, et le budget.