[WEB] W3schools, des révisions web en ligne

Dans un registre assez sérieux, le code n’est clairement pas pour tout le monde. En général, on bidouille avec ce qu’on sait, et le reste du temps on se contente soit de laisser le reste à un programmeur plus calé que nous, ou alors on persévère en cherchant désespérément une explication sur le web.

Pour les adeptes de cette deuxième option, voici W3schools, un bon petit classeur de cours en ligne. Gratuit pour les notions de base, il explique le html pour les nuls, élément par élément, ce qui permet notamment de s’y retrouver un peu. Le site propose également ses exemples à lui, avec une preview du code et du résultat.

Ce que je trouve très intéressant chez ce site, c’est vraiment l’aspect chapitre pour chaque élément. Il propose d’ailleurs du html mais aussi du CSS, Jquery, Javascript… mais bon, on va rester sur du html pour le moment.

Advertisements

[SITE WEB] Au Fond du Jardin

Rien à voir avec le graphisme mise à part son site, mais Au Fond du Jardin fut une jolie découverte pour ma part. Très peu d’établissements de restauration proposent des sites aussi complets, mais alors aussi beaux!

17453339_1884441871836486_191622142_o.png

Au Fond du Jardin est un salon de thé à thème, se spécialisant dans les pâtisseries. Sur le site, il est possible de consulter la carte, mais aussi d’accéder à la boutique en ligne.

Pour commencer, nous sommes accueillis par un menu nous proposant deux choix: découvrir le salon et sa carte, ou passer à la boutique en ligne. Je ne m’attarderai que sur la partie “Notre univers”.
Bien que très joli et bien présenté, le template est plutôt classique. La page est en scrolling fixe.
Un menu discret comportant le logo et un bouton hamburger est placé dans une barre sur le haut de la page. En dessous se trouve une vidéo de présentation des produits, mise en scène minutieusement et accompagnée d’une musique. La vidéo prend toute la largeur de la page, et laisse ensuite place à un menu au contenu plus détaillé, proposant la carte de manière générale, les différentes pâtisseries, les différents thés… dans des blocs accompagnés de photographies des produits qu’ils présentent.

L’ensemble du site dispose de typos uniquement elzévirs, donnant un effet de prestige. Les descriptions sont en italique et les titres en capitales, pour accentuer le contraste et hiérarchiser le contenu.

[WEB] Google Fonts, outil web indispensable

Dans le webdesign, on a tendance à se limiter pour le choix typo. Pas dans un souci de lisibilité, comme pour le design classique, mais plutôt de compatibilité – Google Fonts, fondé en 2010, est justement un petit outil web très pratique pour régler ce genre de problèmes. L’idéal dans les domaines créatifs étant la liberté totale, imaginez pouvoir choisir vos typos dans un catalogue immense et constamment renouvelé!

Eux-mêmes le disent, “Nous pensons que le meilleur moyen d’ajouter du caractère et de la performance à nos sites web, c’est de travailler leur design. Notre but est de faciliter ce procédé”.
Je vous invite donc à visiter Google Fonts, et même à l’essayer si vous avez le temps!

(WEB) Quelques astuces de novices, pour les novices !

Aujourd’hui on va parler de webdesign – pas le webdesign austère avec du code interminable où la moindre erreur vous coûtera votre jolie mise en page. Non, là on va parler de l’aspect pré-production, voire post-production – lorsque votre squelette est déjà formé et qu’il suffit juste d’ajouter de la typo, des couleurs, du contenu.

Les moodboards c’est important, même pour les sites web!

L’intérêt d’un site web, c’est les informations qu’il contient. Il peut être lisible et complet – mais si il est moche, vos informations perdront leur intérêt et l’internaute se contentera d’un autre site. Donc on jette la comic sans, et on opte pour une antique moins honteuse.

On prend un peu de recul avant de se lancer

Une fois le moodboard réalisé, on a tendance à passer au zoning, puis à un début de mise en page web. Mais avant d’envoyer le projet au webmaster (ou de le commencer vous-même), il est conseillé de regarder la mise en page… de loin. Pour garantir un design plus dynamique, il faut varier les corps –et les graisses.

Personnalisez au maximum avec Google Fonts

Un billet consacré à Google fonts sera bientôt posté – ce qu’il faut retenir, c’est que vos pages web ne se limitent pas à la times ou la verdana. Vous avez une palette infinie à disposition pour vos typos – adaptez ce choix au thème de votre site!

Les sliders et les barres de navigation, à la corbeille!

D’une, les sliders ont brièvement été à la mode car il s’agissait de montrer plusieurs données sur un seul bloc. Mais bon, maintenant tout le monde sait que la lenteur réduit la lisibilité des images, et qu’il est plus intéressant de choisir directement ce qu’on veut voir. Pareil pour les barres comme unique moyen de navigation: le scrolling est plus moderne, et la barre de navigation fait stagner le site et limite son potentiel en dynamisme.

Retenir l’attention du lecteur

Ce dernier conseil s’applique une fois que votre site est mis en ligne – l’importance de l’update. Gardez l’intérêt du public, entretenez votre blog et mettez le site à jour! Et plus que ça, annoncez de temps en temps l’arrivée de prochains posts.

Pour conclure, le webdesign c’est juste du design en fait.

[GRAPHISME] L’affiche du FIFA d’Annecy 2017

19223044_774044396102143_2431969364985339179_o

Bonjoir, on reprend doucement l’année avec une petite présentation d’affiche! Cette année j’étais au festival international du film d’animation à Annecy, un séjour magnifique avec une affiche qui l’est tout autant.

annecy_2017_poster-1.jpg

Cette année, les illustrateurs Ugo Bienvenu et Kevin Manach ont été sollicités à réaliser cette affiche. Le thème de l’année 2017 était l’érotisme, et la Chine était également le pays invité. Le style graphique est largement inspiré du pop art et des comics des années 50s/60s, avec une palette très primaire mais aussi très contrastée, notamment avec la teinte rosée de la peau et de la glace par rapport à la nature annécienne bleue-verte. Les couleurs dominantes sont donc froides, donnant un effet particulièrement rafraîchissant pour nous, pauvres non-accrédités ayant attendu 55 minutes au soleil… par séance.

… Pour en revenir à l’affiche, la typographie a été confiée à Christian Debbane, lui-même illustrateur, graphiste et typographe. Le titre est dans une police didot très élégante et formelle, accompagnée d’une antique fine et simple pour les sous-titres.
Le système de composition et l’accroche sont aussi sobrement centrés, la forme de la protagoniste submergée dans la nature; on peut noter que plus on monte, moins sa silhouette est noyée dans le fond.

Pour l’anecdote, la femme au premier plan représente la femme de l’illustrateur Ugo Bienvenu, Jade. Les artistes l’avaient aperçue en train de manger un jambon-beurre dans un jardin, et ont décidé de remplacer le sandwich par une glace, et le jardin par le lac d’Annecy en arrière-plan.
Et pour conclure, je tiens à dire que le festival d’Annecy est un moment magique qui m’a projetée dans ma passion de l’animation, et inspirée pour mon avenir dans ce domaine.

Quoi qu’il en soit, d’autres billets sont à venir!

[TYPO] La Josefin Sans, le vintage scandinave

sa-720x300 (1)

Étant particulièrement friande de la Futura créée en 1927, j’ai été tout naturellement attirée par la Josefin Sans. D’abord interpellée de voir mon prénom (orthographié de manière immonde) dans la liste de typos disponibles dans inDesign, je fus agréablement surprise de voir une typo aussi jolie et sobre pouvant facilement remplacer la Futura.

Il s’agit d’une antique dont les dix variantes sont une thin, light, regular, semi-bold et bold ayant leur version italique. La forme des glyphes est très ronde et spacieuse.
L’auteur, Santiago Orozco, s’est inspiré de la Futura de Paul Renner mais également des typographies scandinaves, ce qui donne une typo sobre.

[ILLUSTRATEUR] Si_Ku, la couleur qui apporte tant au style graphique

omekasi

Si_Ku est un animateur et illustrateur japonais. Il a commencé à se faire connaître en 2011 en réalisant la plupart des clips du compositeur Kikuo.
Son univers graphique est particulier; ses visuels sont colorés, clairs, détaillés, et la figure qu’il utilise le plus est celle d’une demoiselle inexpressive.

Loin du style manga cliché et insipide dont nous sommes aujourd’hui abreuvés, le style graphique des figures humaines de Si_Ku semble minimaliste et bien à lui. Il utilise des formes géométriques, des couleurs, et ses peintures ont bel et bien une texture propre à elles.

J’aime son travail car le choix des couleurs est impressionnant, et son rapport à la texture est toujours très pertinent: en effet, s’il se contentait de colorier au Promarker, son style serait alors insipide. Cet artiste représente à lui tout seul ce que j’attends d’un style graphique incomplet ou minimaliste: un élément pour le sauver de la fadeur.

20150617091751

[SITE WEB] ChrisJockey Primate

Le portfolio est un moyen pratique de regrouper et exposer son travail, dans le but de le montrer à un potentiel employeur par la suite. Certains se contentent d’un Tumblr ou d’un ArtStation…. et d’autres choisissent un site interactif steampunk. Rien que ça.

chrsjockey.PNG

Christian Marquez est un webdesigner, illustrateur et animateur Colombien, et je vais vous présenter son site portfolio, accessible sur ce lien. Inutile de préciser qu’il vous faudra Flash pour pouvoir naviguer.

Le site est statique, en one-page, l’index étant un loop d’animation représentant un bateau flottant. L’univers graphique est steampunk, voire dieselpunk. La typo contraste avec le thème et donne un côté plus informatique; elle semble être utilisée pour le texte d’une infinité de jeux vidéos, notamment sur Nintendo DS.

Il s’agit d’un parfait exemple de design d’interaction: les autres pages sont accessibles via les différentes parties du bateau. Entre autres, la partie “Web design” se situe sur la tour annexe, l’animation sur les engrenages, l’illustration sur la fenêtre du haut… cliquer sur l’un d’entre eux active un roll-over qui présente donc quelques travaux.

Hormis un manque d’ergonomie concernant l’emplacement des différentes rubriques, j’ai trouvé ce site très intéressant car son univers graphique me plaît, et qu’il fait son job en tant que portfolio.

[EXPOSITION] Présumées coupables

2dc286_94087e2673e143c1bb18e5ba945505bc-mv2

Présente aux archives de Paris dans le 3e arrondissement, l’exposition Présumées Coupables à immédiatement capté mon attention. Les injustices ancestrales faites aux femmes méritent bien d’être regroupées, même partiellement, pour se rendre compte que nous avons été discriminées bien longtemps, pour des causes toujours aussi irréalistes.

La lumière était importante et même très intéressante lors de l’exposition; on entre dans un bâtiment baigné de lumière, et l’exposition se passe dans de grandes salles sombres avec une lumière tamisée.

Des documents par centaines sont présentés dans des vitrines et les témoignages sont cités sur un écran, avec pour la plupart une traduction en anglais et du vieux français au français plus courant. Ces témoignages sont authentiques des procès fait au femmes accusées de sorcelleries. Une autre partie de l’exposition concerne d’autres accusations importantes, comme l’empoisonnement (agréablement surprise d’avoir vu tout un article sur Hélène Jégado, femme qui a inspiré Jean Teulé pour son roman Fleur de Tonnerre) ou même l’avortement et l’infanticide.

Différentes représentations de la femme étaient exposées, toutes époques confondues.

La salle qui m’a le plus intéressée était celle consacré à la Libération, avec les fameuses femmes “coupables” d’avoir eu une liaison avec un Allemand lors de l’occupation. Tondues, humiliées, emprisonnées; l’injustice est insoutenable et on sort de cette salle avec la rage de savoir qu’il y a moins d’un siècle, ce genre de pratiques étaient vues comme justes et méritées.

Très bien documentée et informative, cette exposition est utile pour éduquer et rappeler les injustices commises dans le passé.