10 sites pour télécharger des icones

Un élément essentiel pour donner une touche sympa à un design web, à vos thèmes WordPress ou alors à une application informatique : les icones. Les graphistes les plus doués pourront créer leur propres icones en utilisant leur logiciel de création graphique préféré, mais pourquoi ré-inventer la roue ? Il existe une multitude de site proposant des icones en téléchargement gratuit.

Voici quelques ressources pour télécharger des icones gratuitement :

Les icones de FreeIconsDownload.com

image

Des icones et boutons classés par thème.

Les icones de IconShock Blog

image

Un blog qui offre très régulièrement des icones en téléchargement gratuit mais aussi des informations sur le design web et les logos…

Les icones de Free Icons Web

image

20 catégories et plus de 15 000 icones à télécharger gratuitement.

Les icones de DryIcons

image

Encore un blog qui diffuse régulièrement des icones en téléchargement gratuit pour notre plus grand bonheur.

Les icones de Icon Archive

image

24 000 icones classé dans plus de 30 catégories disponible en téléchargement gratuit

Les icones de Designus.com

image

Je vous parlais déjà de ce site qui met à disposition de très bonnes ressources pour WebDesigner. La rubrique logo est également très bien fournie.

Les icones de IconFinder.Net

image 

Les icones de Icon Dock

image 

Les icones de Icons-Online

image

Une liste exclusivement en English de 9 sites et non 10 comme indiqué dans le titre, n’hésitez pas à partager dans les commentaires des sites (de qualité) francophones que je rajouterai à la liste.

Le festival de Cannes du Web : les Webby Awards 2009

La cérémonie des Webby Awards récompense chaque année depuis 1996 les sites Internet les plus originaux. La remise des prix ce fera le 8 juin prochain à New York.

Comment ça marche les Webby Awards ?

image Les prix sont décernés par l’Académie internationale des arts digitaux et sciences, une communauté de 550 experts qui compte, entre autres, parmi ses membres, l’un des pères fondateurs d’Internet Vint Cerf, le chanteur David Bowie, le PDG de Virgin Richard Branson, le PDG de RealNetworks Rob Glaser ou le créateur de la série animée "Les Simpsons" Matt Groening. L’Académie compte aussi de nombreux journalistes de journaux et magazine comme Elle, le New York Times, Wired, etc.

C’est l’Académie internationale des arts digitaux qui sélectionne les sites et décerne le “The Webby Award” dans chaque catégorie (Websites, Interactive Advertising, Online Film & Video et Mobile). Un deuxième prix est également délivré, “The People’s Voice Award”, ce dernier est voté par le public (c-a-d nous).

Et les lauréats des Webby Awards ?

Voici quelques uns des lauréats :

  • Meilleur site e-commerce : Nike ID
  • Meilleur site automobile : Smart
  • Meilleur site télécom : Orange
  • Meilleur site beauté : Axe
  • Meilleure animation : Coraline 
  • Meilleure page d’accueil : Adidas
  • Meilleur usage de la typographie : Wordle
  • Meilleur design visuel : Saab
  • Meilleur site produit high tech : Tom Tom
  • Meilleur service financier : Mint
  • Meilleur site de mode : Red Issue
  • Meilleur site de jeux : Club Penguin
  • Meilleur site d’Art : Dreamgrove
  • Meilleure application : Animoto

Vous le remarquerez sans doute, il n’y a pas que du site d’exception dans la liste…

Qu’en pensez-vous ?

Comment créer un site lorsque l’on manque d’inspiration ?

Comment créer un site web lorsque l’on manque de temps, d’argent ou d’inspiration ? Voici une question qui doit tourner dans l’esprit de nombreux concepteurs et apprentis Webmaster (question que votre serviteur ne se pose bien évidemment jamais).

La réponse se trouve assez facilement en cherchant sur le net, ou, en lisant cette article jusqu’au bout !

Internet est bourré de ressources pour les paresseux ! Ainsi, si vous avez besoin de créer un site et que vous n’êtes pas un expert du web design, il vous est toujours possible de télécharger des modèles de sites en les modifiant un minimum afin de répondre à vos besoins (technique du copier/coller/modifier).

Cette technique est relativement simple et peut être utilisé par toutes personnes ayant un minimum d’expérience dans la manipulation des fichiers (x)HTML/CSS avec un soupçon de créativité.

Voici une sélection de site sur lesquels vous trouverez une multitude de modèles :

image  Plus de 300 modèles de site web

image Plus de 3000 modèles de site web

image  Plus de 2000 modèles de site

image  plus de 200 modèles de site internet

image  Plus de 4000 modèles de site web

image  Des modèles de site internet gratuit et payant

image Peu de modèles, mais la qualité est présente

 image Des modèles de site, menus, mise en page…

Les sites présentés ci-dessus peuvent également faire office de source d’inspiration pour vos futures créa.

S’il m’est déjà arrivé d’utiliser ce genre de site pour certaines créations, je dois avouer ne pas en être un grand fan. L’utilisation de cette technique bride la créativité.

Où trouver de bonnes sources d’inspiration web ?

Vous cherchez de l’inspiration pour le web Design de votre prochain site web ? Rien de tel qu’un tour sur le web pour trouver l’inspiration ! Le problème : vous risquez de passer des heures à tourner en rond sur des sites au design plus que moyen… Pas de panique, je vous ai concocté un pot pourri des meilleures sources d’inspiration en matière de design web, histoire de booster votre créativité 😉

Poursuivre la lecture

Comment bien organiser vos fichiers CSS

Tout webDesigner qui se respecte utilise des feuilles de styles. L’intérêt de ces dernières est indéniable, je ne reviendrai donc pas sur ce point. Intéressons-nous un peu à l’organisation des CSS.

Définition du contenu de la feuille de styles (CSS)

Si vous avez déjà récupéré des feuilles de style depuis un CMS (dotclear, wordpress ou autre), vous avec certainement constaté une section au début du fichier CSS contenant quelques informations sur l’auteur, la date de création, la version etc…
Exemple :

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Filename: grid.css
* Version: 1.0.0 (2007-09-21) YYYY-MM-DD
* Website: http://site.com/
* Author: Name
* Description: Handles the site layout.
== STRUCTURE: ==============================
* Page width: 950 px
* Number of columns: 3
============================================
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

Les commentaires

Les commentaires sont toujours pratiques dans un code source. J’en place un peu partout, toujours utile lorque l’on reprend un fichier de plusieurs centaines de lignes que l’on a pas utilisé depuis longtemps.

Les ancres

Un peu comme en HTML les ancres permettent de faire un lien au sein même d’une page. Sauf que dans un fichier CSS ça marche avec la fonction rechercher (ctrl+F pour les anciens). Ce que je fais en général en début de fichier je place une sorte d’index comme suit :

== INDEX: ===================================
_header : entête _sidebar1 : barre latérale _footer : ...ben le footer.
============================================

Pensez bien à utiliser un identifiant unique ou alors à préfixer vos ancres (avec un « _ » underscore par exemple). Dans le cas contraire vous allez vous rendre fou à chercher un texte déjà utilisé dans le code CSS (fond, texte…).

Ensuite il conviendra d’insérer l’ancre au bon endroit dans votre fichier CSS :

/* _header <- l'ancre précédemment nommé au début du fichier
==========================================*/
#header{
<attributs>
}
#header .logo{
<attributs>
}
[...]

/* _footer <- l'ancre précédemment nommé au début du fichier
==========================================*/
#footer{
<attributs>
}

==========================================*/

Vous l’aurez compris, une recherche dans le fichier vous menera directement à la partie du code qui vous intéresse.

Le nommage des fichiers

Afin de mieux s’en sortir avec les différents éléments CSS, il est préférable de séparer vos CSS en différents fichiers comme ceci par exemple :

  • typography.css : contient les polices, titres, couleurs etc… En fait la typographie.
  • layout.css :contient la mise en page
  • form.css : la mise en forme des formulaires 
  • script.css : les feuilles de styles associées à divers scripts importés (scriptaculous, etc…)
  • print.css : la feuille de styles pour l’impression
  • xxx.css for : tout ce que vous jugerez bon pour vous simplifier la vie

Cette division de vos fichiers CSS permet d’y voir beaucoup plus clair, le code de chaque CSS sera nettement plus court. Ensuite 2 solutions : vous intégrez chaque fichier CSS dans votre HTML. Ou alors vous créez un fichier CSS master incluant tous les autres, ainsi il n’y aura qu’un fichier CSS à appeler depuis votre HTMLeu…

Ce billet m’a été inspiré du site Dezigner Folio.