6 façons d'améliorer la conception de votre blog
Les blogs peuvent souvent être laissés pour compte en matière de conception. Beaucoup d’entre nous ne tiennent pas compte de la nécessité d’une conception intensive en ce qui concerne nos blogs, que ce soit pour nos sociétés ou pour nous-mêmes.
Mais il est important que nous réalisions que chaque aspect de notre identité en ligne devrait être conçu de manière propre et intuitive, quel que soit le style que vous préférez. Cet aspect insaisissable du travail Web est quelque chose que nous devrions constamment chercher à atteindre. Et oui, cela comprend le temps passé à travailler avec les blogs.
La plupart du temps, les blogs se perdent dans la confusion, car nous les considérons comme des «clichés de texte» massifs en ce qui concerne l’architecture de l’information, ce qui est certainement un aspect de leur identité, mais ils ont plus de potentiel.
Certains blogs, lorsqu'ils sont conçus correctement, sont parfaits pour afficher notre flux de pensées ainsi que certaines informations sur le portfolio, tandis que d'autres sont parfaits pour afficher des nouvelles et des photographies.
Le fait est qu'un blog peut être un excellent moyen de tenir une variété de sujets et que l'affichage dépend des choix de conception spécifiques que vous faites. Au cours des cinq dernières années, beaucoup de choses sont venues simplifier le monde des blogs. Par exemple, WordPress est génial et les thèmes font beaucoup de travail de conception pour nous, mais si vous souhaitez le pimenter, vous devez garder à l'esprit certaines choses.
De même, si vous souhaitez modifier la navigation ou la présentation du thème, vous devez également prendre en compte certaines choses. Cela vaut pour presque tous les moteurs de blogs, ou lorsque vous travaillez seul. Voici plusieurs de mes réflexions sur ce que je pense que ces bits importants sont.
Travailler avec des effets de texte basés sur des ombres
Les effets de texte sont d'excellents moyens de présenter des titres d'en-tête, des barres de navigation ou des introductions de contenu sur votre blog, à condition qu'ils soient utilisés avec parcimonie. Passons en revue quelques-uns des effets les plus courants que nous constatons surexploités sur le Web et comment les utiliser correctement.
Texte rétro
C'est souvent pénible de travailler avec, mais il semble avoir fait le tour depuis un an et demi malgré ce fait. Et avec l'avènement de CSS3, il est beaucoup plus facile de manipuler et de trouver cette nuance parfaite. J'ai un exemple ici pour nous aider à comprendre comment créer cet effet correctement, alors je vais aller quand et quand ne pas l'utiliser. Le nom du jeu avec des effets rétro n’est pas un rayon de flou et utilise des ombres doubles. Alors, disons que nous travaillons avec une police de couleur sombre (# 707070I), nous voulons utiliser une ombre de texte double pour y parvenir. Cela ressemblerait à ceci:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Cela devrait vous donner un bel effet double frontière, avec un look très 70's. Bien sûr, pour obtenir ce vrai son de 70, vous devrez peut-être ajouter toutes sortes de manipulations de couleurs, mais au moins nous avons l’effet de base. Rappelez-vous cependant, ne soyez pas trop fou avec la coloration - et n'allez certainement pas trop fou avec les décalages x et y pour les ombres du texte (car il pourrait se révéler illisible très rapidement). Lorsqu'il s'agit d'utiliser un effet rétro, la meilleure utilisation est celle des titres d'en-tête. Ce n'est pas un effet qui fonctionnerait bien avec un texte de petite taille ou des informations descriptives. Mieux vaut le laisser coller au sommet de votre blog et le laisser seul.
Texte typographique et encart
Une autre caractéristique populaire proposée par CSS3 shadow est un type de style en creux, également appelé «typographie». C'est certainement un sujet d'actualité dans le monde des effets de texte CSS3, alors passons à la façon de les faire correctement. Un style d'encart est généralement obtenu en décalant légèrement l'axe des ordonnées pour donner l'impression d'un surlignage subtil dans l'arrière-plan immédiat du texte. Souvent, vous verrez qu'il est opposé au contraste de fond (clair ou foncé), de sorte que l'effet a plus d'impact sur le lecteur. Examinons un exemple.
Fond clair, texte sombre:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Fond sombre, texte clair
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Cela donnera un effet de calque / encart vraiment agréable qui peut être utilisé pour les en-têtes ou les titres de blog. Utilisez-le avec parcimonie sur tout le site, car rien n'est pire que de trop utiliser les effets de texte. Dans ce cas, vous pouvez utiliser différents sous-en-têtes ou différents encadrés ou éléments de bas de page, mais assurez-vous de ne pas les utiliser sur une information descriptive. Encore une fois, aucun effet de texte basé sur des ombres ne devrait être utilisé pour une telle chose.
Travailler avec des images sur votre blog
Let's face it, en tant que concepteurs de sites Web, nous aimons montrer notre travail. Nous l'aimons tellement que même nos blogs personnels peuvent être criblés d'images de portfolio et de légendes. Alors pourquoi ne pas consolider ces deux? La meilleure façon de travailler avec des informations de légende consiste à contenir des informations pertinentes dans l'image elle-même, et la meilleure façon de le faire consiste à implémenter un effet CSS3 directement sur l'image.
Si vous êtes curieux de savoir pourquoi je pense que cet aspect est si important pour travailler avec des images, rendez-vous sur la boutique en ligne Google Chrome (modules complémentaires). Ils sont capables d’afficher des milliers d’images sans aucun texte autour d’eux, tout en nous donnant assez d’informations sur cette image pour savoir si nous voulons ou non cliquer dessus. C'est génial, et beaucoup d'entre nous devraient implémenter une telle technique non seulement pour nettoyer le texte de légende inutile, mais aussi pour améliorer l'expérience utilisateur.
Alors, recréons cela pour votre blog personnel, mais avec votre propre touche, de sorte que vous puissiez afficher les informations sur le client pour les images de site Web sur lesquelles vous avez travaillé:
Nous devons d'abord créer un conteneur pour l'image, puis à l'intérieur de cela, nous devons créer un autre conteneur pour le texte que nous voulons utiliser. Dans ce cas, nous utiliserons un sous-en-tête, un peu de texte et un lien. puis à l'intérieur de celui-ci, un conteneur pour le texte et des liens vers le site Web du client que nous affichons.
Dans cette section, nous procédons à la transition de l’image proprement dite et à la préparation de la transition du texte. Nous identifions également le fait que nous voulons que l’image sorte le long de l’axe des X et non de l’axe des Y. nous aurons un type d'effet de porte coulissante.
Nous allons maintenant définir l'effet de survol de la souris et démarrer la transition pour cet événement.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Comme vous pouvez le voir ici, ce que nous avons fait était similaire à ce que nous avons fait ci-dessus pour l'image. Nous avons simplement apporté le texte après l'image à gauche et lui avons accordé un délai de + 0.1s pour que tout se passe bien. Et c'est à peu près tout.
Il y a beaucoup d'autres manières de personnaliser ceci, et certainement une tonne d'autres effets de transition que vous pouvez utiliser. Rappelez-vous cependant que si vous travaillez avec des transitions plus avancées, ne les utilisez pas de manière aussi répétitive que vous le feriez avec quelque chose d'aussi simple. Il vaut mieux les utiliser avec parcimonie pour mettre en valeur les images clés.
Travailler avec des dispositions créatives
Souvent, en tant que concepteurs de sites Web, nous verrons les tendances excessivement utilisées qui ont été maltraitées d'année en année et souhaitons être une voix pour le changement à leur égard. Mais aller à contre-courant peut être une pratique risquée, surtout si vous ne le faites pas correctement (note: je ne dis pas que vous devez être créatif de la «bonne façon» car il n’ya pas de «bonne manière» de sois créatif). J'ai mentionné cela parce que je pense qu'être créatif est par définition la déliaison de nous-mêmes des contraintes ou des normes créatives, et en fait j'encourage cela, mais je pense aussi que nous devrions nous méfier de la raison pour laquelle de telles normes les thèmes de conception et ce que nous pouvons faire pour innover avec eux dans cette optique.
Alignement de texte unique
Lorsque vous travaillez avec du texte de manière créative ou unique (c.-à-d. Pas aligné avec le centre Arial 12pt), il est vraiment important de vous rappeler que votre texte n'est plus le contenu principal de la page. Il a été relégué à un élément de soutien, même s'il est important.
Une question à toujours se poser lorsque vous travaillez avec du texte est la suivante: «Est-ce que cela concorde bien avec le reste de la page? la page.
Mais indépendamment de ce qu'il est adjacent ou perpendiculaire à vous devez essayer de trouver le meilleur équilibre possible. Pensez aux lignes de la grille et étudiez les systèmes de grille là-bas si vous devez ( Système de grille 960 est ce que je recommande). Étudiez où ils ont placé la disposition de la grille sur la page, puis demandez-vous pourquoi, puis déduisez si la vôtre est aussi équilibrée que cela. Imaginez que vous déposez votre contenu le long du système de grille lui-même et essayez de penser à ce à quoi il ressemblerait dans ce cas, puis répliquez-le dans CSS.
Pieds créatifs
Les pieds de page créatifs peuvent vraiment ajouter beaucoup de personnalité à un blog ou à un site Web, et cela semble en quelque sorte contre-intuitif. Que nous parlions du défilement jQuery qui nous amène dans un beau thème sur le thème "sous la terre", ou juste au bas du site Web ou du blog d'une entreprise, il s'agit d'une partie très minuscule d'un site Web. peut avoir un impact très puissant. Les avis sont partagés sur la mesure dans laquelle cela se produit et pourquoi. J'ai ma propre théorie: quand nous lisons une page Web, nous commençons en haut et nous nous dirigeons vers le bas, et c'est en bas de page que nous tirons nos conclusions sur ce que nous avons lu.
Lorsque vous travaillez avec un pied de page créatif, vous devez garder à l'esprit certaines choses et quelques bonnes pratiques que j'ai remarquées dans les bas de page que j'aime le plus. Pour moi, la partie la plus importante de l'utilisation d'un pied de page de cette manière consiste à utiliser le même schéma de couleurs que votre site Web, mais avec un contraste différent . C'est extrêmement important, et vous pouvez bien sûr augmenter ou diminuer le contraste de la couleur de la police en fonction du contraste avec lequel vous travaillez pour le thème général du pied de page.
La chose importante à retenir est que vous voulez avoir un style bien défini pour cette section. Cela donne un bon sentiment d'achèvement du site. Lorsque vous utilisez cette technique, vous pouvez rendre le pied de page aussi grand que vous le souhaitez, dans des limites raisonnables, car avec la palette de couleurs contrastées, il est évident que cette section est en fait un pied de page.
En ce qui concerne le contenu, dans le monde du nouveau pied de page, il peut être utile d'ajouter votre logo et votre nom de blog, vos images ou liens de réseaux sociaux, votre dernier tweet et même un formulaire de contact simpliste. Cela peut bien sûr varier en fonction de vos préférences personnelles, mais je voudrais montrer toutes ces options pour illustrer l'évolution du passé et du présent dans ce qu'il convient d'afficher au bas d'un site Web ou d'un blog.
défilement jQuery
C’est l’un de mes moyens préférés pour naviguer sur un site Web, et je pense aussi que cela est spécifiquement applicable à la navigation des publications sur un blog. Il y a plusieurs manières de travailler avec jQuery pour cela, alors je vais examiner ce qui est l'un de mes moyens préférés (et le plus facile) pour faire défiler en douceur et ensuite passer en revue ce qui se passe et comment l'implémenter.
C'est le code du défilement vertical, car le défilement horizontal n'est pas souhaitable.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});Ce qui se passe ici peut paraître compliqué, mais c'est en fait assez simple. Nous ouvrons une fonction sur ".class" de l'élément de navigation sur lequel nous allons cliquer (nous appelons cela un événement click). La partie la plus importante ici est de nommer la classe de la liste (ul) en "nav". Ou remplacez le "nav" dans le code par celui que vous avez nommé cette classe. Et c'est à peu près tout pour un défilement jQuery fonctionnel, il suffit de le lancer dans votre site Web et de le jQuery minifié (préférable) et vous êtes tous prêts à partir.
En ce qui concerne l'utilisation d'un défilement vertical comme celui-ci, il est assez illimité. Beaucoup de gens aiment ne pas avoir à faire défiler la page manuellement, ils aiment vraiment la page qui le fait pour eux, et c'est aussi une excellente façon de passer de la publication à la publication sur un site Web, surtout si ces messages sont volumineux. Je vais souvent l'utiliser pour passer à différentes sous-sections de portefeuille au sein de mes blogs ou à travers des catégories sur des sites Web. C'est également une technique parfaite si vous créez un thème pour votre site, par exemple en faisant un thème de la journée ou des thèmes pour vos catégories ou vos sujets de blog.
J'espère que certaines de ces techniques vous ont aidé à essayer d'appliquer diverses esthétiques de conception sur votre blog. Rappelez-vous, utilisez-les avec parcimonie et veillez à agir avec le meilleur jugement lorsque vous utilisez des effets flashy. Nous avons l'obligation de créer un Internet qui n'est pas aussi laid que certains aspects du monde extérieur. Bien qu’il s’agisse d’une tâche de grande envergure, nous pouvons l’accomplir si nous la prenons un seul dessin à la fois et un jour à la fois. Restez simple, gardez-le honnête, gardez-le réel et mettez toujours la passion dans ce que vous faites, comme cela transparaîtra toujours.
Quels sont vos meilleurs conseils pour la conception de blogs? Qu'est-ce qui fait un très bon design de blog? Faites le nous savoir dans les commentaires!
