Le site n’est pas pour autant mort !

En effet, ces cinq premiers mois ont été pour moi l’occasion de m’essayer au blogging et d’en essayer plusieurs formes : article perso, article catalogue, push de liens,… J’ai ainsi pu déterminer quelle ligne éditoriale, je voulais suivre à l’avenir.

Un nouveau Graphiz est en gestation et sera bientôt en ligne.

by schochie (Flickr)

Typographie : (n.f.) manière de disposer, de présenter un texte.

Les outils tels que Photoshop ou Illustrator ont vraiment permis à cet Art d’exploser. Rien de meilleur que l’instant fugace et lubrique où mes yeux se posent pour la première fois sur une de ces œuvres où le message transcende son support pour s’ériger en douce poésie visuelle !

Ah si seulement je pouvais en faire autant… Et bien oui c’est possible ! Aujourd’hui, je vous ai récupéré les ressources et les tutoriaux qui vous permettront d’élever vos créations à caractère informatif au rang de chefs d’oeuvre visuels.

Enjoy !

Ressources

by bundscherer (Flickr)

20 Creative and Unique Typefaces

Créatives ? Oui ! Uniques ? Aussi !

25 Free Brilliant Fonts For Logo Design

Des polices bien lisibles pour concevoir vos logos.

50 Free Handwritten Fonts for Web Designers and Logo Artists

Une bonne poignée de polices manuscrites !

1000s of Quality Free Fonts – Huge Resource Roundup

Des dizaines de sites pour récupérer des polices gratuites.

Free tool: Symbol Signs collection

Une police avec plein de symboles communs bien pratique.

25 Excellent Typography Tools for the Serious Designer

Des outils dont, d’ici peu, vous ne pourrez plus vous passer…

Tutoriaux et inspiration

by Anonymous Account (Flickr)

Typography – Inspiration, Tutorials and Resources

Pas de publicité mensongère ici.

29 Excellent Typography Tutorials for Designers

Variété et qualité sont les maîtres mots de cette sélection.

18 Fresh Font Designs

Une sélection résolument moderne

The best of the first half of 2009

Ceci n’est pas une compilation des meilleurs moments de l’extraterrestre poilu… mais bien une sélection des plus belles créations de ce premier semestre 2009.

typo/graphic posters

Une belle base de posters pour vous inspirer !

30+ Creative Typography Art

Un dernier pour la route.

by malias (Flickr)

Voici un bon paquet de ressources gratuites glanées sur le web ces deux derniers mois.

Faites-vous plaisir !

Attention aux licences !

Textures

by Sarai WoaH Photography (Flickr)

100 New and Beautiful Seamless Patterns

100 ? C’est peu, mais on s’en contentera, non ?

80+ Fresh New Textures for Creating Web Site Backgrounds

Allez 80 de plus !

10 Free High Res Cracked and Peeled off Textures

Allez vous craquer pour ces textures ?

10 High-Quality Free Brown Paper Textures

L’effet papier froissé est un grand classique, faut-il en avoir un scan haute résolution.

Texture lovers

Site de rencontre pour texture ? Non ! Mais vous devriez aller y jeter un coup d’oeil.

Brosses

by john_a_ward (Flickr)

30 Photoshop Brushes: ‘Drippy Sprays’

Vos graffitis virtuels vont prendre un sacré coup de réalisme !

10 Awesome Free Photoshop Brushes

10 packs de brosses à couper le souffle !

30 Free Photoshop Swirl Brushes

30 nouvelles brosses qui tournent.

Formes

by vectorportal (Flickr)

30+ Useful Photoshop Custom Shapes Set

On ne pense pas toujours à les utiliser mais les formes peuvent s’avérer bien utiles.

Divers

by clickflashphotos (Flickr)

Freebies For Designers – Icons, Vectors, Photoshop Brushes, Stock Images & Templates

Comme si vous n’en aviez pas déjà assez !

15 Most Useful & Free Collection Of Ready-To-Use Design Freebies

Bonne pêche !

Tutoriaux

by wheany (Flickr)

Que serait toutes ces ressources sans quelques tutoriaux pour apprendre à les utiliser ?

18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s

Avec ces 18 tutoriaux et exemples, les brosses n’auront plus de secrets pour vous.

Photoshop secrets

Quelques tutoriaux en vidéo pour découvrir les secrets des pros.

by fevi in cayman (Flickr)

Pourquoi nous demande-t-on toujours de choisir entre le beau et le pratique ? A croire que les deux adjectifs sont antinomiques !

En fait tout ceci est une histoire de maîtrise de la technologie et de l’intérêt du public. Prenons le web (mais ça marche aussi avec les téléphones, les télévisions,…) : au départ c’était moche et pas pratique, rappelons-nous ces magnifiques sites avec leurs frames, leurs tableaux et leurs fonds noirs étoilés.

Ensuite vint le Flash, le web est devenu beau, mais dans leur quête de beauté à coups de dessins vectoriels et de typos délirantes, les web designers ont oublié qu’il fallait que ce soit simple : lisibilité à revoir, temps de chargement longuets, pas de prise en compte des fonctionnalités du navigateur,…

Puis on déterra l’AJAX, enfin le triumvirat HTML/CSS/Javascript put rebriller. L’avènement du web 2.0 vit apparaître des sites pratiques, mais à l’esthétique légère, qu’on cachait sous des dehors de sobriété et de rapidité de chargement… alors que les Téraoctets de stockage remplaçaient les Gigaoctets  et les GBits/s de bande passante les MBits/s.

Mais, ces derniers temps, des voix s’élèvent. Voici, au travers de 15 articles, les dernières trouvailles de nos amis web designers pour un web plus beau mais surtout plus pratique, plus lisible, plus accessible, plus compréhensible, plus aéré, plus élastique, plus mobile,…

Généralités

by aleksandar urosevic (Flickr)

How to Spot Quality within Web Design: Examples & Tips

Un article bien illustré qui présente les meilleurs compromis pour allier ergonomie et web design avec plein de conseils bien utiles.

http://wefunction.com/2009/04/quality-within-web-design/

12 Useful Techniques For Good User Interface Design

Des astuces pour améliorer vos interfaces utilisateurs, à réserver aux applications web.

http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/

10 Tips to Create a More Usable Web

Ici on cause d’utilisabilité : 10 conseils à suivre.

http://www.webdesignerdepot.com/2009/06/10-tips-to-create-a-more-usable-web

40+ Helpful Resources On User Interface Design Patterns

Une belle liste de sites qui s’intéresse aux tendances en matière de navigation du web.

http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/

Les écrans de login

by lee (Flickr)

Web Form Design Patterns: Sign-Up Forms

Un article en 2 partie qui décortique les pratiques en matière de formulaires de connexion.

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

Mise en page

by svensonsan (Flickr)

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Mise en page fixe, fluide ou élastique ? Choisissez à l’aide de cet article !

http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Applying Divine Proportion To Your Web Designs

Le nombre d’or est présent dans de nombreuses disciplines artistiques : la peinture, l’architecture,… et pourquoi pas dans le web design !

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

Les grilles

by adactio (Flickr)

Grid Style In Modern Web Design: Showcase and Resources

Une présentation du système de grille et plein d’exemples.

http://www.instantshift.com/2009/05/21/grid-style-in-modern-web-design-showcase-and-resources/

960 Grid System

Le site officiel.

http://960.gs/

Fluid 960 Grid System

Un dérivé de 960 GS tout en fluidité !

http://www.designinfluences.com/fluid960gs/

The 960 Grid System Toolbox & Resources

Un article sur le 960 Grid System et ses dérivés.

http://www.webdesignerdepot.com/2009/05/the-960-grid-system-toolbox-and-resources/

Adaptive CSS-Layouts: New Era In Fluid Layouts?

La question du Fixe/Fluide pour le 960 Grid System

http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

50 Alluring Typography and Grid Focused Websites

Des exemples de sites basés sur un système de grille.

http://www.thedesigncubicle.com/2009/06/50-alluring-typography-and-grid-focused-websites/

Grid Systems – Making grids in Illustrator

Si vous utilisez Illustrator pour préparer le design de vos sites, voici un article qui vous présente comment mettre en place le système de grille dans l’outil d’Adobe.

http://font.is/?p=1226

Nuages de tags

by rooneyjohn (Flickr)

Tag Clouds Gallery: Examples And Good Practices

A la mode ces derniers temps, les nuages de tags peuvent être un véritable casse-tête à mettre en place : conseils et exemples.

http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/

by nDevilTV

Je suis de ceux qui pensent qu’un bon schéma (graphique, diagramme,…) vaut 10 pages d’explications. J’ai bien dit « bon » schéma. Trop souvent baclés, ces illustrations déservent plus qu’elles ne servent le propos.

Faire un beau schéma n’est pas compliqué, il faut une dose de pédagogie, un soupçon de bon sens,  une cuillère de bon goût et surtout bien connaître ses outils et leurs possibilités !

Les outils

by renaissancechambara

Voici une liste d’outils qui vous permettront de créer des schémas. Je les ai classés par ordre de de complexité :

• Dia – Un excellent petit utilitaire qui vous permettra de réaliser rapidement des schémas simples (ex. UML), déjà présenté dans l’article : Allez ! On prend sa caisse à outs !
• Microsoft PowerPoint – On ne le présente plus. Malheureusement plus bridé que sont confère Visio, il offre dans sa dernière mouture (2007) des fonctionnalités d’optimisation de création de schéma (triple compléments du nom, ouaou !), les smartarts, qui pour des besoins basiques donnent de bien jolis résultats.
• OpenOffice Impress – Le pendant OpenSource et gratuit du susnommé PowerPoint (pas testé).
• Microsoft Visio – Moins connu que Powerpoint, car non distribué dans la version de base d’Office, il offre de nombreuses fonctionnalités de personnalisation des formes qui permettent de créer des schémas convaiquants assez rapidement.
• OpenOffice Draw – Le pendant OpenSource et gratuit du susnommé Visio (pas testé).
• Adobe Illustrator – « The » logiciel de dessin ! Il n’a pas d’équivalent sur le marché. Son prix s’en ressent : 850€ seul…
• Inkscape – Le pendant OpenSource et gratuit du susnommé Illustrator. Un excellent logiciel  qui offre des fonctionnalités très proches de son cousin payant. Son ergonomie est à revoir, mais au plus courageux, il permettra à moindre coût de vraiment dessiner ce qu’ils ont en tête.

Les sites et articles

by oxfam international

Je vous ai aussi sélectionné 5 sites et articles pour vous inspirer et vous donner les outils pour réaliser de bons schémas et graphiques.

Inspiration

InfoGraphic Designs: Overview, Examples and Best Practices

Un très bel article qui présente le pourquoi comment de l’infographie et présente quelques beaux exemples de schémas.

(http://www.instantshift.com/2009/06/07/infographic-designs-overview-examples-and-best-practices/)

Good Transparencies Archive

Une galerie pleine de beaux exemples qui devraient vous inspirer.

(http://www.flickr.com/photos/goodmagazine/sets/72157618896371005/)

Webilus.com

Un site présentant des tonnes de schémas, graphiques, diagrammes qui ont comme sujet commun le Web. Une bonne illustration de « Une bonne illustration vaut dix pages de textes ».

(http://webilus.com/)

Outils

Vous êtes webdesigner ou webmaster et avez besoin de présenter des données chiffrées sur vos sites avec des graphiques ou de les générer à la volée ? Voici deux articles qui devraient vous intéresser :

14 Javascript Resources And Plugins For Creating A Stylish Chart

(http://www.webdesignbooth.com/14-javascript-resources-and-plugins-for-creating-a-stylish-chart/)

Google Chart API

(http://code.google.com/intl/fr/apis/chart/)

N’hésitez pas à me soumettre vos impressions sur les outils et les articles ou même vos créations via les commentaires !

by Vectorfunk (Flickr)

Voilà qui va faire plaisir aux web designers du dimanche dont je fais partie : 6 articles pour faire le plein de ressources !

Beaucoup d’icônes, des menus et quelques boutons gratuits pour agrémenter vos sites web !

Icônes

50 Fresh Useful Icon Sets For Your Next Design

http://www.smashingmagazine.com/2009/06/07/50-fresh-useful-icon-sets-for-your-next-design/

Menu & Boutons

Excellent 53 CSS Based Navigation Menu + 22 Buttons Techniques

http://visionwidget.com/inspiration/web/75-css-navigation-menu-buttons.html

Social

50 Free Social Media Icon Sets for Your Blog

http://directoryfordesigners.com/50-free-social-media-icon-sets-for-your-blog

WHITE MAGIK – A Free Social Icon Pack

http://chethstudios.blogspot.com/2009/05/white-magik-free-social-icon-pack.html

40 Cute Free Twitter Graphics: Badges, Icons & Buttons…

http://wefunction.com/2009/05/40-free-twitter-badges/

Social Media Stars Icon Set: 26 Free Icons

http://directoryfordesigners.com/social-media-stars-icon-set-26-free-icons

C’est la mode : je vous ai fait une sélection de 8 articles glanés à droite à gauche ayant pour sujet commun : Wordpress, la plateforme de blog qu’on ne présente plus.

Seul hic, ils sont réservés aux anglophones (ou presque)…

Thèmes

30 cool Wordpress Hacks

Cet article présente 30 astuces surtout liées à la création de thèmes.

http://www.technobuzz.net/wordpress-hacks/

60 Great Wordpress Themes

Ce n’est pas 1 ni 2, mais 60 thèmes Wordpress gratuits que nous propose Area1 ! Merci et maintenant : shopping !

http://www.area1.info/2009/04/20/60-great-wordpress-themes/

Details on the 10 Most Helpful WordPress Design Blogs

Arbent a listé 10 sites qui proposent des articles et des ressources traitant de la réalisation des thèmes. Le petit plus ? En plus de les présenter, il a sélectionné pour chacun 4 de leurs articles phares !

http://arbent.net/blog/details-on-the-10-most-helpful-wordpress-design-blogs

Rédaction

5 Shortcodes Wordpress super pratiques

Les shortcodes permettent d’automatiser certaine mise en forme, lors de la rédaction d’articles. L’auteur nous présentent leur création au travers de 5 exemples.

http://www.webdevonlinux.fr/2009/04/10/5-shortcodes-wordpress-super-pratiques/

Sécurité

14 tips to wordpress practical security

Bien gérer la sécurité de son application est primordiale ! Un bon article qui donne des bonnes pratiques pour démarrer sereinement.

http://www.ruhanirabin.com/14-tips-prevent-wordpress-get-hacked/

Plugins

13 Simply Useful Wordpress Plugins That Can Make Lives Easier

Une bonne pioche parmi les nombreuses listes « Mes plugin préférés ».

http://www.smashingapps.com/2009/05/27/13-simply-useful-wordpress-plugins.html

The Wordpress Plugins I Use Everyday

A prendre ou a laisser en fonction de vos besoins.

http://www.d-lists.co.uk/2009/06/03/the-wordpress-plugins-i-use-everyday/

10 Wordpress Plugins That Will Increase Your Search Engine Ranking

Encore des plugins… Oui mais ceux-ci vont vous permettre d’améliorer la perception de votre site par les moteurs de recherche. Intéressant.

http://www.webdesignbooth.com/10-wordpress-plugins-that-will-increase-your-search-engine-ranking/

A venir :

• MES plugins Wordpress favoris
• Comment paramétrer Wordpress pour l’utiliser comme un CMS (si si c’est possible !)

Ready ? Fight !

Mange ça tête de bois !

Cliquer sur l’image pour voir la galerie complète.

Machine à écrire by un'2vue

J’ai toujours voulu faire l’expérience de la réalisation d’un cadavre exquis littéraire. C’est un petit jeu d’écriture : en gros, un premier auteur écrit un texte cours, qui est continué par un autre et ainsi de suite, le tout mis bout à bout formant un texte écrit à plein de mains !

Donc je cherche des co-auteurs (3 ou 4) pour partir dans cette aventure rocambolesque (ou pas). N’ayez pas peur, on commencera tout doux pour s’exercer avec deux ou trois essais, puis on se fixera des règles pour ne pas trop divaguer ! ^^

Les aventuriers du verbe sont invités à se manifester en commentant cet article !