Ça fait un moment depuis Tuiles de style ont été amenés dans ce monde par le génie d'un Samantha Warren . Pour ceux d'entre vous qui auraient pu les regarder une fois, puis oublié ce qu'ils sont, voici une brève explication:
Les tuiles de style sont une sorte de modèle qui vous permet de tester et de prévisualiser rapidement diverses couleurs, polices, textures et autres options liées au style esthétique de vos conceptions avant de créer une maquette haute fidélité, mais après la fabrication des images filaires. Ils sont destinés à être présentés aux clients, aux parties prenantes ou à toute autre partie intéressée assez tôt dans le processus de conception. De cette façon, vous pouvez vous soucier du choix de la police et des questions telles que "Pouvons-nous avoir un" flash plus rouge "?"
Autrement dit, vous devriez les utiliser, même si ce n'est que pour vous. Il peut sembler difficile d'ajouter une nouvelle étape au processus de conception. mais je peux vous dire par expérience personnelle que cela en vaut la peine. Je conçois dans le navigateur: regarder une toile vierge de Photoshop peut être intimidant; regarder une fenêtre de navigateur vide semble toucher beaucoup plus fort.
Le sens de l'orientation fourni par la création d'une tuile de style facilite la conception du reste du site. Ce n'est rien de plus complexe ou contraignant qu'un guide de style; ainsi, cela donne à la fois un lieu de départ et la liberté d'ajuster les choses au fur et à mesure.
Cela soulève toutefois un petit problème avec les tuiles Style originales. Ils sont des PSD. Les concepteurs basés sur un navigateur comme moi voudront des tuiles de style basées sur un navigateur. Nous voulons voir comment ces choses vont se retrouver sur le Web, après tout, et sur autant d’appareils que possible.
Plusieurs personnes sont déjà devancées sur ce front. Il existe des modèles prédéfinis pour les personnes qui souhaitent commencer à créer des tuiles de style dans leur navigateur. Vérifie-les:
Les charmantes personnes de Sparkbox ont créé un modèle de tuile de style sensible basé sur HTML et Sass. C'est l'une des options les plus simples, comme dans la démo, mais le code est bien commenté. Ils ont même inclus des scripts facultatifs pour le rendre compatible avec Internet Explorer 7 et les versions ultérieures, au cas où votre client n'aurait pas mis à jour son navigateur dans ... pour toujours.
Créé par Namanyay Goel , Webstiles avoir beaucoup en commun avec les autres solutions de cette liste. Ce qui les différencie, c'est qu'ils ont été construits avec le pré-processeur CSS moins connu (certains diraient sous-estimé).
Si vous travaillez avec le framework Compass, avec des choses comme Ruby et Sass, essayez celui-là sur pour la taille. Il peut être installé comme n'importe quel autre joyau Ruby, il devrait donc être placé dans votre flux de travail. Fait intéressant, la copie de corps peut être "générée" via une variable Sass et l’attribut content :. Le tout est conçu pour que vous n'ayez jamais à toucher au HTML.
le Plaque chauffante réactive pour les tuiles de style apporte des ombres portées plutôt dures, mais il est réactif et n'utilise rien de plus compliqué que le HTML et le CSS classiques. Pas de frameworks, pas de pré-processeurs, rien. C'est un bon point de départ si vous souhaitez simplement l'ouvrir dans un éditeur de texte et y aller.
Avec toutes ces options pré-faites, pourquoi voudriez-vous créer vos propres tuiles de style HTML / CSS à partir de rien? Semble comme une perte de temps? Eh bien, oui et non.
Si vous créez un site simple et que vous n’avez pas encore tout prévu, ou si le client ne l’a pas encore envoyé, l’une des options préconfigurées se portera bien. Toutefois, si vous créez une application Web complexe ou un très grand site avec un grand nombre de types de contenu ou d'éléments d'interface utilisateur distincts, vous pouvez créer un modèle de tuile de style à partir de rien.
Les versions existantes ne tiennent pas compte de la diversité des types de contenu et d’éléments possibles. Ainsi, vous pourriez vouloir une tuile de style qui inclut une vidéo, un lecteur audio ou une carte incorporés. Vous pouvez en choisir un qui présente une interface à onglets ou un menu accordéon.
Si vous créez un site qui dépend de certains éléments d'interface utilisateur peu communs, vous pouvez créer un modèle de tuile de style comprenant ces fonctionnalités.
Cela ne doit pas être si difficile. Configurez simplement une disposition simple de deux ou trois colonnes et commencez à inclure les éléments visuels les plus importants pour votre conception, en fonction du contenu / des fonctionnalités. Ceux-ci comprendront:
Il n'est généralement pas nécessaire de le rendre compatible avec tous les navigateurs. Restez simple, gardez le HTML5. Sauf si vous utilisez un élément d'interface utilisateur non standard qui doit être codé à partir de zéro en HTML et CSS, ne vous préoccupez pas de JavaScript.
La meilleure partie? Vous pouvez affiner et réutiliser tous les CSS pertinents lorsque vous commencez à coder votre maquette basée sur un navigateur!
Si vous ne les utilisez pas déjà, les tuiles de style sont plus que intéressantes.
Montrez-les aux clients, conservez-les pour vous-même, utilisez les options préconçues ou lancez vos propres ... peu importe. Le simple fait d'avoir un sens stylistique facilitera grandement la saisie de cette fenêtre vierge.
L'image sélectionnée, studio de design via Anne-Sophie Leens