faaabulous

Besoin d’icônes pour le design de votre site web ou de vos applications ? Default Icon propose une très jolie série d’icônes minimalistes, noires ou blanches, dans des tailles allant de 16×16 à 256×256.

Disponible au téléchargement gratuitement (sous licence CC) dans les formats .eps, .png et .gif, la liste est déjà bien exhaustive mais de nouvelles icônes sont ajoutées régulièrement. N’hésitez donc pas à refaire un passage de temps en temps.

Superbe outil pour les web designers que ce 0to255, qui décline toutes les variantes d’une même couleur de la plus claire à la plus sombre. Ca fait gagner un temps précieux, comme l’explique le développeur de ce service web bien pratique:

I built 0to255 to make my job easier. I’m a web designer who works with colors every day. Usually, I’ll start with a color I want to use, then I’ll manipulate it for various functions. For example, I might brighten a link in its hover state or darken a button’s border to make it contrast with surrounding elements. Web designers do things like these several times an hour.

0to255 cures your color manipulation woes. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.

Il suffit de renseigner le code hexa d’une couleur de départ, et toutes les déclinaisons s’affichent. Et plus rapide encore, en tapant directement l’hexa dans l’adresse web. Par exemple: http://0to255.com/666 affichera les dégradés de gris.

Un outil comme je les aime, pratique, réduit à son strict minimum et agréable à l’oeil.

Tout ce que vous avez toujours voulu savoir sur @font-face sans jamais oser le demander, c’est sur I ♥MB – Implementing @font-face. Une très bonne base, sur une seule page, pour commencer à utiliser cette règle CSS encore trop peu présente dans le webdesign.

Et pour ceux dans le fond qui se demandent ce que c’est encore que ce truc, voici qui devrait les éclairer:

@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users’ computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Verdana and Trebuchet.

Moi, c’est clair, dès que j’ai un peu de temps (2012 à la louche), je m’y colle…

Petit outil bien pratique pour tous les webdesigners fainéants, BgPatterns permet de créer facilement et online des fonds de page pour votre site web/blog, à base de motifs en tout genre. Sachez que c’est très à la mode en ce moment. Si vous n’avez pas encore votre fond à base de symbole tribal ou de fleur (façon papier peint des années 70), vous êtes largués.

Coté technique, il suffit de choisir:

• une couleur d’avant-plan (pour le motif),
• une couleur de fond,
• une éventuelle texture (pas vraiment jolies, celles proposées pour l’instant),
• un motif (toute la réussite d’un joli fond est dans le choix du motif),
• puis de régler les dimensions, la position, les transparences, la rotation de tout ce beau monde et hop, reste plus qu’à télécharger le résultat (format JPG) ou l’enregistrer dans vos créations pour le partager avec la communauté.

Et pour les plus fainéants d’entres vous, il ne reste qu’a piocher parmi les Top rated (comme ça, en plus d’être fashion, vous êtes sûr de plaire au plus grand nombre). Qu’est ce qu’il vous faut de plus ?

L’excellent blog PSDTUTS, qui propose de nombreux tutoriels de qualité pour Photoshop et son tout récent petit frère NETTUTS (lancé en avril) qui s’attaquera lui à tout ce qui concerne le codage web (html, css, javascript, ajax, etc…), ont publiés 2 excellents tutoriels totalement complémentaires pour créer un site web de A à Z.

Sur l’article de PSDTUTS, on retrouve donc tout le design préparatoire du site, étape par étape, réalisé sous Photoshop, pour obtenir une belle maquette du futur site web. J’ai personnellement essayé le truc, sachant que je suis une quiche en Photoshop et j’y suis arrivé, donc vous ne devriez pas rencontrer de problème majeur.

L’article sur NETTUTS, quant à lui, récupère cette maquette Photoshop et la transforme en HTML+CSS, toujours étape par étape, pour bien comprendre le principe de fonctionnement des CSS notamment. Même si tout n’est pas parfait en terme d’accessibilité au niveau du code (en particulier, les positionnements absolus en-veux-tu-en-voilà, et les tailles de police de caractère définies en nombre de pixels), ces 2 « pas à pas » constituent cependant une excellente base pour qui voudrait se lancer dans le webdesign de son propre site/blog.

2 articles à bookmarker absolument!

Trevor Davis a publié un article très utile pour tous les designers web dans lequel il détaille, exemples à l’appui, 6 techniques CSS indispensables dont voici la liste:

1. Fixer la taille de base de votre police de caractère
   En positionnant votre font-size dans la balise body à 62.5% (soit 10px pour 1em), vous vous facilitez la vie: 1.2em = 12px, 1.4em = 14px, etc…
2. Supprimer toutes les marges par défaut
   Certaines balises ayant des marges (et/ou padding) pré-définies, le meilleur moyen pour contrôler totalement votre design est de toutes les ramener à 0 dans un premier temps.
3. Positionner un float pour clearer un float
   Technique indispensable pour bien gérer ses colonnes avec des div.
4. Remplacement d’un texte par une image
   Si vous utilisez une image en header par exemple, mais que vous souhaitez qu’un texte s’affiche à la place dans le cas où les images sont désactivées (ou lors d’un CSS naked day), alors cette technique est faite pour vous.
5. Fausses colonnes
   A utiliser en complément du point #3 pour donner l’impression que toutes les colonnes sont de la même hauteur.
6. CSS Sprites
   Permet de faire des rollovers d’images en n’appelant (donc ne chargeant) qu’une seule image depuis le serveur (le principe étant d’afficher des morceaux différents de la même image au passage de la souris).

J’utilisais déjà une bonne partie de ces techniques qui sont parmi les plus élémentaires lorsqu’on commence à jouer avec les CSS, mais c’est un bon mémo pour les habitués et une bonne base pour les débutants. N’hésitez pas à aller y jeter un coup d’oeil et consultez les exemples ainsi que les extraits de code, ça aide…

Et n’hésitez pas à partager en commentaire vos propres petits trucs.

Impressionnant et surtout très instructif cet article sur Dominiek.com. L’auteur y explique comment il a conçu un service web de A à Z en seulement 24h (étalées sur 4 jours tout de même). Le service en question s’appelle Wigitize.com et est parfaitement fonctionnel. Il permet tout simplement de créer un widget affichant les derniers updates d’un flux RSS pour les inclure dans votre blog.

L’article part de l’idée initiale de l’auteur, puis décompose en tâches chronométrées les différentes étapes du projet:

• créer les éléments de design,
• mettre en place un gestionnaire de projets,
• développer l’application sous RubyOnRails,
• créer les styles CSS pour le code HTML,
• ajouter un peu d’AJAX pour le fun sur certains éléments,
• designer et développer le pied de page du service,
• rendre le widget « embeddable » afin de pouvoir l’inclure dans un blog,
• faire en sorte que tout ça tourne en tache de fond,
• développer une API,
• acheter un domaine,
• configurer le serveur d’hébergement du service,
• petits ajustements par-çi par-là pour rendre le tout plus convivial,
• et un peu de SEO pour terminer.

Bon, on voit bien que le type n’en est pas à son coup d’essai. Il a une certaine expérience qui lui permet d’aller beaucoup plus vite que le commun des mortels dans les nombreux domaines nécessaires à la réalisation de ce projet, mais ça n’en reste pas moins très captivant et pratique pour qui souhaiterait se lancer dans l’aventure. A vous de jouer !

Si vous avez déjà cherché pendant des heures LA police de caractères qu’il vous faut (pour le design de votre site web, ou pour un document quel qu’il soit) sur les dizaines centaines de sites proposant des fonts libres, vous savez à quel point c’est vite saoulant. Ces derniers sont souvent lourds en pub, longs à charger, mal organisés et donc souvent inefficaces.

C’est pourquoi je vous invite à jeter un coup d’oeil à UrbanFonts, qui me semble être de très bonne qualité sur tous ces points: le site est simple (à la sauce web2.0), rapide, bien présenté. Tout est fait pour faciliter votre recherche et votre choix. Ainsi, les polices sont classées par catégorie, un simple survol de l’une d’entre elles affiche un aperçu. Et lorsque vous naviguez dans les pages de polices (par catégorie ou par ordre alphabétique), vous pouvez saisir un texte de pré-visualisation, de même que la couleur du texte et du fond, afin de vérifier directement si votre choix s’approche de ce que vous recherchez.

L’aspect social n’est pas en reste, puisqu’il est possible de noter et de commenter les fonts, ce qui permet d’avoir un Top 100, par exemple. Il ne reste plus, une fois que vous avez trouvé votre bonheur, qu’a downloader d’un simple clic la police voulue au format Windows ou Mac. Bref, tout cela devrait grandement faciliter la tache souvent laborieuse de recherche de polices de caractères sympathiques.