Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise. Voulez-vous en savoir plus ?
Le blog de l'intégrateur web
7 conseils pour mélanger plusieurs fontes dans votre design web
La typographie peut devenir la partie la plus créative de votre design ou la plus frustrante. Travailler avec ne serait-ce qu’une police de caractère peut déjà devenir un défi insurmontable pour de nombreux webdesigners ; alors imaginez ceux qui utilisent jusqu’à sept fontes ou plus dans leur design ! Voici un résumé de l’article 7 Rules for Mixing Multiple Fonts in Good Web Design qui passe en revue les éléments à prendre en considération pour utiliser plusieurs polices de caractère dans votre site web. Voulez-vous en savoir plus ?
Les mathématiques appliquées au webdesign
Mathematics is beautiful? et pourquoi pas Code is poetry pendant qu’on y est ! C’est pourtant vrai : les mathématiques pourront servir de tremplin à l’inspiration lorsque mettrez en route votre prochain design web. Comment ? Vous saurez tout en lisant l’excellent Applying Mathematics To Web Design paru chez Smashing Magazine où j’ai eu la surprise de voir mon article sur l’application du nombre d’or et la suite de Fibonacci dans le webdesign cité dans la partie Fibonacci Design \o/ Voulez-vous en savoir plus ?
Dummy Image — des images de placement pour votre site web
Dynamic Dummy Image Generator est un outil en ligne qui génère une image en fonction de la taille que vous indiquez : saisissez le format dont vous avez besoin à la fin de l’URL du site, comme http://dummyimage.com/434×200 par exemple. Très utile en complément de HTML-IPSUM pour commencer à travailler sans contenu. L’auteur précise que l’on peut « hotlinker » autant d’images que son serveur pourra le supporter ;)
24 frameworks CSS — Mettez une grille (ou pas) dans votre site web
Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. Voulez-vous en savoir plus ?
HTML + LOREM IPSUM = HTMLIPSUM
HTMLIPSUM nous propose de copier-coller le célèbre paragraphe Lorem Ipsum attribué à Cicéron que l’on utilise traditionnellement comme faux-texte pour placer les blocs de contenu dans une maquette en attendant les éléments définitifs. Il existe de nombreux sites qui proposent des portions plus ou moins importantes de ce texte. L’originalité apportée par HTMLIPSUM provient du balisage de Lorem Ipsum avec les balises HTML les plus employées pour structurer du texte : paragraphe p, listes ordonnées ol ou non-ordonnée ul, liste de définition dl, mélange de plusieurs balises pour simuler un texte structuré et pour finir un exemple de formulaire form. Voulez-vous en savoir plus ?
CSS Color Editor remplace automatiquement les couleurs dans vos CSS
CSS Color Editor est une application en ligne qui permet de modifier légèrement ou radicalement votre palette de couleurs en trois étapes : indiquez l’emplacement de votre fichier CSS ; modifiez les anciennes couleurs grâce à un Color Picker complet et intuitif ; téléchargez le fichier CSS modifié. Voulez-vous en savoir plus ?
CleverCSS — Mettez un Python dans vos CSS
CleverCSS est une manière de produire des CSS inspirée par le langage de programmation Python : les accolades sont remplacées par l’indentation des différentes règles CSS et les déclarations sont introduites par le signe deux-points. Jusque-là, rien de bien fou, mais CleverCSS ne s’arrête pas à l’économie de quelques signes et propose de nombreuses améliorations à CSS : de l’optimisation de la syntaxe à l’utilisation des constantes en passant par le calcul sur les valeurs, y compris les couleurs. Voulez-vous en savoir plus ?
Le principe de proximité dans le webdesign
Le « principe de proximité » est un concept issu de la Psychologie de la forme (Gestalt) qui énonce que le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout
. Pour appliquer ce principe de proximité dans le cadre de la conception d’un site web, on rassemblera les éléments qui partagent un destin sémantique commun au sein d’un ensemble visuellement identifiable. Voulez-vous en savoir plus ?
Il y a de la vie en dessous de 600px
Dans un contexte de webdesign, le fold fait référence à la partie supérieure de la page web qui apparait sans que l’on fasse défiler la page vers le bas. C’est une valeur relative à la taille de l’écran que l’on fixe généralement à 600 pixels en prenant la résolution d’écran 1024 x 768 comme taille standard (on retranche les pixels occupés par la barre d’outil du navigateur). Avec l’arrivée massive des NetBooks, j’ai même tendance à placer le fold à 500 pixels. Or, si le fold est une réalité, il ne faut pas hésiter à placer du contenu important sous cette barre des 600px. L’essentiel est que le visiteur ait trouvé des informations au-dessus qui l’encouragent à continuer sa lecture. Comme vous n’êtes pas obligé de me croire sur parole, je vous laisse avec Paddy Donnelly et sa très belle page Life below 600px : Voulez-vous en savoir plus ?

Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le
Commentaires récents