Un cas pour coder vos wireframes

Travailler en tant que designer jour après jour peut être laborieux. Heureusement, le champ s'est élargi et le processus est devenu plus simple. De nombreux outils et ressources gratuits sont disponibles.

Les wireframes apportent de l'élégance à la conception de maquettes. Ils sont la structure de base d'un site Web, avec des couleurs et des améliorations supprimées.

Ils sont utilisés pour visualiser les concepts de conception avec l'essentiel, et ils peuvent fournir une perspective utile sur tout projet.

La plupart des images filaires sont créées dans des suites logicielles telles qu'Adobe Photoshop et Fireworks, mais certains sites Web vous permettent de créer des images filaires directement dans le navigateur.

Dans cet article, nous allons passer en revue le codage d’une image filaire de base en HTML et en CSS et voir comment cela peut être bénéfique au processus de création.

Pourquoi s'embêter?

Pourquoi passer du temps à dessiner la structure d'un site Web? Dans certains cas, cela peut être inutile, mais cela peut aider lorsque vous êtes coincé dans une ornière ou que vous avez du mal à voir la situation dans son ensemble.

Cela peut bénéficier à la fois aux concepteurs et aux clients. Dans le travail rémunéré, vous êtes responsable de plaire au client. En montrant la structure de base de leur site Web qui sera bientôt conçu, les clients peuvent se sentir soulagés et maîtriser tout le processus.

Mais si la conception est très simple ou a une structure simple, créer un fil de fer ne vaut peut-être pas la peine; se moquer de tout dans Photoshop, avec des boutons et de la couleur, peut être tout aussi rapide.

Décider des mesures à prendre exige du temps et de la réflexion critique. Après tout, une structure filaire n'est qu'un outil. Il est sous-estimé par de nombreux concepteurs de sites Web, mais étonnamment utile une fois compris.

Prototypage de wireframes en code

Pendant des années, les logiciels de conception Adobe ont été la première suite de création de systèmes filaires, mais le Web a subi de profondes modifications et continue d'évoluer.

L'augmentation des normes de codage et l'augmentation de Documentation HTML5 sont de grands pas vers un web commun. Désormais, coder une structure filaire de base en HTML et en CSS n'est plus un travail que de s'attaquer au travail dans Fireworks.

Grâce aux wireframes, vous pouvez attaquer un projet de plusieurs côtés. Vous pouvez même tester la compatibilité avec les techniques et les navigateurs CSS2 et CSS3. Les choses ne doivent pas nécessairement être complexes au début. un fil de fer sert simplement de base solide pour commencer le codage.

Le partage de contenu devient également plus facile avec une structure filaire. Vous pouvez héberger tous les fichiers dont vous avez besoin sur n'importe quel serveur Web et vous pouvez configurer un répertoire de démonstration et transférer les mises à jour en direct aux clients et aux responsables de votre projet. Les modifications, telles que les modifications rapides des marges et des largeurs dans le fichier CSS du document, sont également simples.

Standardiser le code pour le long courrier

Les wireframes permettent de gagner du temps dans le processus de développement. Si les styles CSS pour vos éléments de base sont déjà écrits, alors le reste n'est que remplissage (remplissage important, attention).

Commencez correctement avec le bon type de document HTML et la structure de répertoire. Les types de document ne sont pas trop différents les uns des autres. Vous pouvez lire à leur sujet sur le Page de spécifications du W3C . Ils ne comptent pas beaucoup dans l'ancien modèle World Wide Web, mais HTML5 est complet et permet à votre site Web de se développer.

De toute façon, vous devez tester la compatibilité sur autant de systèmes d'exploitation et de navigateurs que possible, et l'étape de prototypage filaire est le moment idéal pour y parvenir, car vous vous êtes déjà concentré sur l'organisation de la mise en page.

C'est également un bon moment pour travailler sur un modèle compatible avec les appareils mobiles. À mesure que la structure change, vous devriez pouvoir incorporer des idées et manipuler le code du document. Le développement devient plus facile car il y a moins de code pour encombrer vos styles mobiles et personnalisés.

Commencer la structure du cadre filaire du document

La meilleure façon de commencer est d'utiliser une ardoise vierge, car elle vous offre la plus grande créativité. Les éléments évidents à inclure dans le code (comme dans tout autre document Web) sont les suivants: html , head et body .

C'est le squelette. Vous aurez besoin de quelques éléments supplémentaires pour que le fil de fer soit beau. le div (ou division) est notable. Il s’agit de l’élément utilisé pour encadrer certaines zones de la page, telles que le logo ou la zone de recherche.

Divs sont les éléments constitutifs des prototypes HTML5 filaires. Tout et tout peut être enveloppé dans un div , et le style est un jeu d'enfant lorsque vous appliquez des classes et des ID à des éléments. Une grande partie de votre code principal sera divisé par divs car ce sont les éléments de base du bloc.

Avec les nouvelles spécifications HTML5, un élément appelé nav a été introduit. Cela peut être combiné avec une liste non ordonnée et des propriétés CSS pour créer et définir la zone de navigation principale de votre site Web. Voici un exemple simple de la façon dont vous pourriez structurer votre nav :

Travailler avec header et footer Éléments

Vous remarquerez dans l'exemple ci-dessus que j'ai utilisé un div avec un identifiant de header séparer ma rubrique de navigation. Ceci est parfaitement acceptable et rien ne va pas avec le code ci-dessus. HTML5 nous donne cependant d’autres options.

le header element in the new HTML5 specs vous permet de définir plus précisément votre structure, ce qui est utile principalement pour les robots d'exploration de pages Web et les lecteurs d'écran, qui séparent une partie "en-tête" du contenu. Cela ne devrait pas faire de différence pour vos utilisateurs, et cela gardera votre code en forme et montrera que vous comprenez vraiment ce dont vous parlez.

Un autre élément intéressant qui a été ajouté est footer . Même idée: utilisez cet élément à la place d'un div pour séparer votre contenu de pied de page. En général, les pieds de page sont hors de portée et contiennent des informations de base sur le site Web ou la société.

Vous pouvez ajouter des liens au pied de page et utiliser un nav élément pour en définir certains, mais cela serait peu judicieux. le nav element spécifie la zone de navigation principale, donc l'ajouter au pied de page ou à un autre endroit serait redondant.

Dans ce scénario, en utilisant le footer élément et séparer les liens de navigation comme une liste non ordonnée est la meilleure. Vous pouvez utiliser un pied de page en colonnes, avec un certain nombre de colonnes de liens. Celles-ci pourraient être séparées div éléments affichés côte à côte, tous enveloppés dans le bas de page principal.

Techniques CSS pour styliser des wireframes

Si vous comprenez le HTML et que vous avez travaillé avec le Web pendant un certain temps, vous connaissez probablement des bases CSS. La plupart des nouvelles fonctionnalités de CSS3 permettent d’ajouter des coins arrondis et des ombres portées au texte.

Je ne veux pas dire que le style CSS n'est pas important, mais la structure et le positionnement de base sont ce qui fait finalement de la structure de votre site Web. Avec CSS, vous définissez la largeur, la marge et l'espacement. Ce sont les propriétés de base de la plupart des éléments Web, et ils constituent la dernière étape dans la création d’une structure filaire vraiment exceptionnelle.

Si vous êtes intrigué par les nouvelles propriétés et les nouveaux sélecteurs de CSS3, consultez les sites Webdesigner Depot. collection d'améliorations . Il contient des guides sur le Web concernant les nouvelles fonctionnalités de CSS3.

Ajouter clearfix aux styles

Si vous n'êtes pas familier avec la technique de clearfix, faites quelques recherches . C'est un cours populaire que vous ajouteriez à un div conteneur contenant deux blocs flottants ou plus.

Si vous n'avez jamais entendu parler de clearfix, cela peut paraître déroutant, mais le concept est simple. Pensez à un conteneur div qui a deux div s à l'intérieur, les deux ont flotté à gauche. Par défaut, la plupart des navigateurs afficheraient les deux colonnes comme se touchant directement et les contenant div élargir la page pour s'adapter à la colonne est la plus longue.

En ajoutant un clearfix classe à votre conteneur, les deux colonnes s'adapteront parfaitement dans le conteneur div , qui s’étend suffisamment pour s’adapter aux deux éléments. Cela résout de nombreux problèmes dans le prototypage filaire, en particulier avec les mises en page à deux colonnes (à savoir le contenu principal et la barre latérale). Cette méthode fonctionnera également pour les mises en page à trois et même quatre colonnes, chaque colonne devant simplement entrer dans un espace plus petit.

Affichage de CSS: Garder les styles externes

Que faire avec le placement CSS est une autre décision importante. Les concepteurs Web et les développeurs professionnels suggèrent simplement de garder une .css fichier, distinct de votre code HTML.

De cette façon, la structure est dans un seul document et la mise en page et le design sont dans un autre. Les deux sont tout aussi importants pour les wireframes, mais ils effectuent des tâches distinctes.

Tout votre code HTML est strictement structurel. Vous pouvez mettre des liens à l'intérieur des paragraphes à l'intérieur du conteneur div s à l'intérieur d'autres conteneurs, et ainsi de suite. Le style contrôle la taille, l'espacement, les marges et le lettrage des paragraphes et des liens, et la structure filaire définit la largeur des conteneurs et leur emplacement sur la page.

Les éléments de page fournissent d'autres exemples. Vous coderiez le div conteneurs pour le contenu et les barres latérales, mais vous les styliser et les positionner en utilisant CSS. Pour un concepteur, il est essentiel de comprendre comment séparer le contenu et le style pour maîtriser les wireframes.

Implémenter des espaces réservés pour les éléments de page dynamiques

Les effets jQuery et les éléments Web Ajax-ified semblent être à la mode. Les tendances se développent et presque tous les sites Web populaires comportent un contenu dynamique. C'est important à considérer. S'ils complètent le design, pourquoi ne pas proposer des blocs dans votre wireframe?

Développer un système back-end complet pour une boîte de connexion dynamique peut ne pas être pratique, mais noter les bibliothèques JavaScript dont vous aurez besoin est un bon début. Vous pouvez également coder les styles qui structurent cette boîte et définir les éléments pour plus tard, lorsque vous ajouterez de la couleur et des détails.

Ces thèmes peuvent être appliqués à de nombreux éléments d'interface. Vous pouvez utiliser des suggestions de recherche similaires à celles de Google ou laisser des notes dans votre code pour implémenter une boîte de nouvelles dynamique ou un flux Twitter, l'une des deux rendant votre fil dynamique et représentant un objet à la place du contenu dynamique. . Pendant la phase de prototypage, c'est tout ce dont vous avez besoin.

Erreurs courantes de développement filaire

Il est difficile de se tromper lorsque vous commencez à coder la structure de base d'un site Web, mais gardez à l'esprit certains détails.

Rappelez-vous que le but d'un wireframe est de présenter un cadre sans trop de détails. C'est utile pendant les étapes initiales de la planification des éléments de la page. vous pouvez plonger profondément dans votre site Web et voir la grande image.

Gardez les choses simples et en ordre. Ne pas tenir compte de cela est une erreur courante et cela va entraver votre capacité à respecter les délais. Une structure filaire n'a pas besoin d'être proche de la perfection. c'est censé être une ébauche du site. Même une structure filaire strictement HTML et CSS ne devrait comporter que des contours d'éléments de page.

Évitez les détours en vous concentrant sur vos objectifs principaux. Rappelez-vous pourquoi vous avez commencé le processus avec une structure filaire en premier lieu!

Les wireframes peuvent également résoudre de nombreux problèmes liés au processus de conception. Coder un prototype en HTML et CSS est le meilleur moyen de prendre une longueur d’avance sur un projet Web, grand ou petit. C'est un moyen simple et efficace de donner forme à vos idées.

UNE tonne d'articles sur le web se rapportent au processus de wireframing. J'ai couvert le côté du codage et du développement, mais pour en savoir plus sur le wireframing, continuez à lire. Les conseils de conception sont là-bas; il suffit de les trouver!

Cet article a été écrit exclusivement pour Webdesigner Depot par Jake Rocheleau , web designer passionné et passionné de médias sociaux. Jake aime lire et écrire sur les dernières tendances de l'Internet numérique et la mise en réseau dans la communauté du design. Allez le voir sur Twitter @jakerocheleau pour en savoir plus sur son travail.

Quelles sont vos expériences avec le processus filaire? Travaillez-vous en code d'abord ou dans un autre type de logiciel? Selon vous, quels sont les avantages du prototypage dans le code?