Tous les articles par admin

Un design qui en dit long

Un design qui en dit long …

Je veux un joli blog,
qui donne envie d’être lu.
Imagine ton blog comme la mode

Tu dois d’abord imaginer ton blog comme la mode (designer de mode), recherche quels sont les futures tendances.
Les tendances du webdesign sont comme les modes vestimentaires : elles vont et viennent, se transforment, disparaissent pour mieux revenir quelques années plus tard.

Une bonne ergonomie : c’est comment trouver facilement la bonne information et cliquant au bon endroit

Il faut proposer des interfaces claires et ergonomiques, dont le but sera de mettre en valeur la qualité du contenu.
Il faut définir un titre sur chaque page qui doit être court et signifiant comme par exemple : Pikatruc le nouveau pokémon ! c’est beaucoup plus parlant que pikatruc le descendant attendu par 1 000 000 000 de joueurs

Sur chaque page du site des éléments de navigation et de repérage permettant à l’internaute de répondre à trois questions : Où suis-je ?, D’où je viens ?, Où puis-je aller ?.
Les en-têtes et les note de bas de page des blogs jouent un rôle important.
Une bonne ergonomie c’est aussi une page structurée !

Comment rendre mon site attractif ?

Le design d’un blog permet de créer un nouvel environnement qui soit à la fois esthétique et adapté à sa fonction. Les efforts du webdesign doivent donc viser à améliorer la façon dont l’utilisateur peut accéder à ce contenu.
Le travail de conception fait autour du blog doit permettre aux internautes d’avoir accès facilement au contenu, c’est le rôle du web designer.

Le Responsive design c’est le travail des programmeurs, développeurs web. Ton blog sera adapté à lecture sur ton téléphone, sur ta tablette et ton PC.

La charte graphique c’est le travail du web designer il propose la typographie (la police), le corps, et la grosseur des titres et des textes, les couleurs. On ne met pas plus de 3 couleurs dans une page web, il faut choisir une couleur dominante. Éviter de multiples polices de caractère et ne pas surcharger la page avec des images dans tout les sens.

Attention ! Les couleurs ont une symbolique

Le bleu évoque le calme, la sérénité. Mais également la vérité et la fraîcheur.

Le jaune vif est une couleur joyeuse et stimulante, qu’on apparente à la lumière, au soleil. Comme il s’agit d’une couleur très vive, utilisez-la avec prudence.

Le rouge est une couleur ambivalente. C’est la couleur de la passion, de l’amour, mais c’est aussi la couleur du sang et de la violence. Elle se marie bien avec les marrons, le noir et le blanc.

Le vert est la couleur de la nature par excellence. Il s’associe parfaitement à l’ocre et au brun.

Le orange est une couleur optimiste et tonifiante. A utiliser avec parcimonie avec le rouge ou le jaune.

Le violet est une couleur difficile à marier au sein d’une création design. Liée à la spiritualité, on peut également la rattacher à la mélancolie et à la solitude.

Le marron est une couleur neutre, rassurante, que l’on peut associer au règne animal comme végétal. Elle peut néanmoins être un peu fade. Elle s’accorde bien avec le vieux rose.

Le noir, comme le blanc, n’est pas à proprement parler une couleur. Il est très neutre et est souvent associé à la sobriété et à l’élégance. Il se combine bien avec toutes les couleurs.

Le blanc représente la pureté, la perfection. Il peut se marier avec toutes les couleurs mais peut se révéler vide et fade.

Le gris est doux, calme, passe partout et élégant, mais peut paraître triste en trop grande quantité.

Le rose est la couleur de la féminité par excellence. Il est dynamique avec une pointe de délicatesse si utilisé en petites touches.

A chaque nouvelle année, les couleurs sur le web évoluent comme pour la mode.

Pour conclure,

Des animations simples mais très présentes, le web bouge pour attirer l’œil des internautes.

Des contenus vidéo, la vidéo demeure un contenu très apprécié.

Pensez à votre public si vous préférez regarder des vidéos, vos parents préfèrent peut-être lire du texte !

A chaque nouvelle année, de nouvelles tendances,  le but est de concevoir des sites web qui s’intègrent à la mode du moment.

Intégrer des vidéos ou des sites externes dans ses articles

Dans un article, il est courant de vouloir inclure une vidéo une vidéo, une image interactive…

Le moteur WordPress n’est pas toujours adapté à la manipulation de ce type de contenus. Heureusement, Internet offre une solution : les iframes, véritables « cadres » dans l’article permettant d’afficher le contenu d’un autre site au choix dans l’espace indiqué.

Pour insérer un iframe dans son article, il suffit alors d’utiliser la balise [iframe] :

[iframe width="1280" height="850" src="//www.thinglink.com/card/920686387026460674" type="text/html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"]

Voici les différentes options utilisées pour cette balise :

  • width : largeur du cadre (en pixels par défaut)
  • height : hauteur du cadre (en pixels par défaut)
  • src : adresse du contenu à afficher dans le cadre (ici, une image cliquable)
  • type : type de contenu à inclure, laisser « text/html » dans le doute
  • frameborder : taille en pixels de la bordure à afficher (0 pour ne pas en avoir)
  • webkitallowfullscreen/mozallowfullscreen/allowfullscreen : autoriser le plein écran dans Chrome, Firefox et les autres navigateurs
  • scrolling : afficher un ascenseur si le contenu ne tient pas dans les dimensions du cadre

Remarque : certains sites proposent déjà des codes tout prêt à insérer dans une page web. La notation <iframe> n’est pas supportée directement pas WordPress, il est nécessaire de la transformer en balise (remplacer « < » et « > » par des crochets et supprimer la partie </iframe>).

Pour une vidéo Mediane, par exemple :

<iframe frameborder="0" width="1330" height="770" src="https://be1d.ac-dijon.fr/mediane/m/338/d/i" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>

devient

[iframe frameborder="0" width="1330" height="770" src="https://be1d.ac-dijon.fr/mediane/m/338/d/i" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"]

Bonne rédaction 🙂

Guillaume Laville – Responsable des plateformes d’hébergement – DSI du rectorat de Dijon