Le blog de Nomad » Tools

24 Social Icons

Audrey — Thu, 13 Oct 2011 07:41:08 +0000

Suite au succès des icônes publiées il y a quelques temps, voici une mise à jour du pack, étendu à quelques réseaux sociaux supplémentaires.

Vous y trouverez :

Twitter
Linkedin
Dribble
Forrst
Google Buzz
RSS
Last FM
Vimeo
YouTube
MySpace
Facebook
Skype
Behance
Delicious
Evernote
Digg
Flickr
Shutttr
Zootool
VCard
Google+
Deviantart
Mail
Google reader

Contenu du ZIP :

social_icons2.jpg
social_icons2.psd
sprite_social2.psd
readme.txt (avec position des différentes icones, etc.)

Cliquez ici pour télécharger le fichier ZIP.

Social icons

Audrey — Wed, 05 Oct 2011 16:49:47 +0000

Voici une petite créa d’icônes pour quelques réseaux sociaux dont j’avais besoin pour la page contact. Je voulais un design très simple.

On m’a demandé si je pouvais les partager, alors voilà ! Enjoy :)

Cliquez ici pour télécharger le psd

110 galeries CSS gratuites

Audrey — Wed, 21 Sep 2011 13:12:33 +0000

Voici une liste de 110 galeries CSS auxquelles vous pouvez proposer vos créations gratuitement ! J’insiste sur ce point, car j’en ai visitées des payantes…

Quelques conseils avant de leur proposer votre site :

Vérifier son code HTML :
http://validator.w3.org/

Vérifier ses CSS : (si votre site est en CSS3, n’oubliez pas de le renseigner dans les options)
http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options

Proposer un site clair et ergonomique.

Eviter le flash (évidemment pas de site en full flash…).

Sinon, pas la peine de rafraîchir votre navigateur toutes les 5 minutes, la validation peut durer plusieurs semaines ! Et ils devraient vous prévenir par mail si votre site a été retenu ;)

Les 110 galeries CSS :

16 CSS New

17 CSS Design Yorkshire

http://www.css-design-yorkshire.com

18 CSS Perk

http://www.cssperk.com

19 CSS Based

http://cssbased.com

20 Screenfluent

http://screenfluent.com

21 Design Snips

http://www.designsnips.com

22 Creafiles

http://www.creafiles.com

23 CSS Design Awards

http://www.cssdesignawards.com

24 Dossier Design

http://www.dossierdesign.com

25 CSS Wow

http://www.csswow.com

26 CSS Mozaic

http://www.cssmozaic.com

27 CSS Mania

http://www.cssmania.com

28 CSS Website Awards

http://www.csswebsiteawards.com

29 Design Awards Gallery

http://designawardsgallery.com

30 CSS Design

http://www.css-design.fr

31 Web Creme

http://www.webcreme.com

32 CSS Collection

http://csscollection.com

33 CSS Elite

http://www.csselite.com

34 CSS Clip

http://www.cssclip.com

35 W3C Sites

http://www.w3csites.com

36 CSS Drive

http://www.cssdrive.com

37 CSS Burst

http://www.cssburst.com

38 CSS Flavor

http://www.cssflavor.com

39 CSS Reboot

http://www.cssreboot.com

40 Style Crunch

http://stylecrunch.com

41 Well Done Sites

http://welldonesites.com

42 Design Snack

http://designsnack.com

43 Designer Source

http://www.designersource.net

44 Gouw

http://www.gouw.nu

45 Inspiration King

http://www.inspirationking.com

46 Webdesign Awards

http://www.webdesign-awards.com

47 Beautifully Webdesign

http://www.beautifully-webdesign.net

48 One Pixel Army

49 Screenalicious

http://www.screenalicious.com

50 Wakeup Gallery

51 CSS Envy

http://www.cssenvy.com

52 CSSDSGN

http://www.cssdsgn.com

53 Plasticpilots

http://www.plasticpilots.com

54 Splench

http://www.splench.com

55 Themes CSS

http://www.themes-css.com

56 Crazyleaf

http://webgallery.crazyleafdesign.com

57 CSS Blaze

58 CSS Cake

http://www.csscake.com

59 CSS Cute

~~http://www.csscutie.com~~

60 CSS Deluxe

http://cssdeluxe.com

61 CSS Fresh Blend

http://cssfreshblend.com

62 CSS Leak

http://www.cssleak.com

63 CSS Luxury

http://www.cssluxury.com

64 CSS Orgy

http://cssorgy.com

65 CSS Star

http://www.cssstar.com

66 CSS Vote

http://www.cssvote.com

67 FantastiCSS

http://www.fantasticss.com

68 Mabucplus

http://www.mabucplus.com

69 Style Vault

http://www.stylevault.net

70 Web Designire

http://webdesignire.com

71 CSS Loggia

http://www.cssloggia.com

72 CSS Mix

http://cssmix.nl

73 CSS Ray

http://cssray.com

74 CSS Smooth Operator

http://csssmoothoperator.com

75 CSS Transmit

http://www.csstransmit.com

76 CSS World

http://www.cssworld.de

77 Design Fridge

http://www.designfridge.co.uk

78 Folio Focus

http://foliofocus.com

79 RGB Garden

http://rgbgarden.com

80 Best CSS Design

http://www.bestcssdesign.com

81 Blazing Web Gallery

82 Gallery Buzz

http://gallerybuzz.com

83 Nice Stylesheet

http://www.nicestylesheet.com

84 Site Inspire

http://siteinspire.com/showcase

85 Swell CSS

http://www.swellcss.com

86 Visual Safe

http://www.visualsafe.de

87 CSS Vault

http://www.bestcssvault.com

88 Colorgorize

http://www.colorgorize.com

89 CSS Bag

http://www.cssbag.com

90 CSS Grigit

http://cssbrigit.com

91 CSS Count

http://www.csscount.com

92 CSS Dance

http://www.cssdance.com

93 CSS Dose

http://www.cssdose.com

94 CSS Garden

http://www.cssgarden.co.uk

95 Design By Grid

http://www.designbygrid.com

96 Design Link

http://www.addesignlink.com

97 Best CSS Gallery

http://www.bestcssgallery.com

98 Boxed CSS

http://www.boxedcss.com

99 CSS 2.0

http://www.css20.com

100 CSS Collections

http://csscollections.com

101 CSS Daddy

http://www.cssdaddy.com

102 CSS Depot

http://cssdepot.com

103 CSS Fury

http://cssfury.com

104 CSS Line

http://cssline.com

105 CSS Mayo

http://cssmayo.com

106 CSS Showcases

http://www.cssshowcases.com

107 CSS Style

http://www.cssstyle.me

108 CSS Websites

http://www.csswebsites.nl

109 Dzinemart

http://www.dzinemart.com

110 Fave Design

http://favedesign.com

Si vous en connaissez d’autres, n’hésitez pas à les poster dans les coms.

Tu en rêvais ? Wacom l’a fait !

Audrey — Wed, 31 Aug 2011 08:48:02 +0000

Encore un produit Wacom que l’on va avoir du mal à ignorer… Inkling, c’est le stylo dont n’importe quel graphiste à toujours rêvé !

Il permet de dessiner sur n’importe quel support. Le dessin est directement numérisé, avec la possibilité de créer des calques, du vectoriel… Bref je vous laisse découvrir en images.

Comptez environ 170 euros pour l’achat de ce bijou qui devrait être disponible mi-septembre.

Merci à Jonathan Menet pour l’info.

Les archives d’étapes sont consultables gratuitement

nomad — Fri, 22 Jul 2011 19:21:07 +0000

Ouverture du site des archives de la revue étapes. 17 ans de culture visuelle à découvrir ou à redécouvrir avec 18 000 pages, 190 numéros consacrées à l’histoire du design, la typographie, les portraits de designers célèbres, les création de logos, les affiches… Gratuit pendant tout l’été, l’accès sera réservé aux abonnés de la revue après le 31 août 2011.

Pour y avoir accès, munissez vous du LOGIN : demo@etapes.com et du PASSWORD : welovedesign

http://archives.etapes.com

QR codes & popcodes… qu’es aquò ?

Audrey — Tue, 12 Apr 2011 11:23:13 +0000

De plus en plus d’outils sont mis à notre disposition, nous permettant de mêler réalité et virtuel.
Je vais vous parler ici des QR Codes et Popcodes.

Les QR Codes

Le QR Code a été créé au Japon en 1994 pour l’entreprise Toyota, mais n’a réellement commencé à se démocratiser que dans les années 2000.

Les codes QR peuvent mémoriser des adresses web, du texte, des numéros de téléphone, des SMS ou autres types de données lisibles par les smartphones et téléphones mobiles équipés d’une application de lecture (lecteur de code QR).

L’avantage du code QR est sa facilité et rapidité d’utilisation et de création. Pour lire un code QR, il suffit de lancer l’application de lecture et scanner le code avec le mobile. De nombreuses pages Web offrent ces applications pour mobiles, généralement gratuites.

En ce qui concerne l’écriture, plusieurs sites web permettent de générer librement les codes QR.
Après de longues recherches de compatibilité, lisibilité, etc, je vous recommande ce générateur : http://keremerkan.net/qr-code-and-2d-code-generator

Exemple d’utilisation : nous venons de refaire nos cartes de visite et y avons intégré un QR Code. L’avantage réside dans le fait que l’utilisateur n’a pas besoin de saisir manuellement les informations. Il lui suffit de « flasher » la carte avec une application, puis au choix, enregistrer un nouveau contact, envoyer un message (sms / mail), aller sur le site ou téléphoner.

Vous pouvez faire le test directement sur votre écran en flashant le code situé en bas à gauche de l’image.

Les popcodes

La réalité augmentée, c’est l’affichage d’un modèle virtuel (2D ou 3D) en superposition à l’environnement visible. Cette technologie mixant réalité et virtuel est aujourd’hui utilisée dans de nombreux domaines, comme par exemple les jeux vidéo, l’éducation, les chasses au trésor virtuelles, le cinéma et la télévision (post-production, studios virtuels, retransmissions sportives…), les industries (conception, design, maintenance, assemblage, pilotage, robotique et télérobotique, implantation, étude d’impact…) ou le médical.

Elle s’est largement démocratisée grâce à l’arrivée des smartphones. Voir par exemple 10 app. iphone dans cet article : http://www.clubic.com/article-324608-1-realite-augmentee-applications-iphone-3g.html

Pour en revenir à Popcode, il s’agit d’une plateforme et application de réalité augmentée sur mobile mise au point par Extra Reality Limited, une société fondée en 2010 pour commercialiser une partie des résultats des recherches menées dans le département d’ingénierie de l’Université de Cambridge.

Elle propose une démonstration avec un T-Shirt sur lequel est imprimé un puzzle que l’on peut résoudre à l’aide de son téléphone. Vous pouvez également télécharger un pdf pour tester vous même leur application : http://files.popcode.info/PopcodeDemoBook.pdf

Et voici quelques vidéos de démonstration :

Gravatar… Qu’es aquò ?

Estelle — Fri, 25 Mar 2011 16:53:21 +0000

Aujourd’hui, une grande majorité de blogs, tels que celui-ci, utilisent le système Gravatar pour afficher les avatars. Comment ça marche ? Voici une brève explication.

Gravatar, qu’est ce que c’est ?

Gravatar est l’acronyme de Globaly Recognized Avatar. C’est un service Web gratuit qui permet de lier un avatar à une adresse email en quelques clics.

Comment obtenir son gravatar ?

Rien de plus simple : Munissez-vous de votre adresse email et d’une image. Rendez-vous sur le site Gravatar.com, cliquez sur le lien « Log In/Sign Up » et laissez-vous guider. That’s all folks !

Comment utiliser son gravatar ?

A moins que vous décidiez de modifier votre avatar, vous n’aurez pas besoin de renouveler l’opération. Votre avatar étant désormais associé à votre adresse email, lorsque vous posterez un commentaire sur un blog utilisant ce système (et sous peu que vous renseigniez la même adresse email, cela va sans dire), ce dernier s’affichera comme par magie en face de votre nom.

Cerise sur le gâteau, votre avatar tout beau tout neuf s’affichera aussi dans les commentaires que vous avez postés dans le passé. Elle est pas belle la vie ?

Et bing le mentalizer !

Audrey — Wed, 23 Mar 2011 13:01:58 +0000

Sous couvert d’un jeu du style akinator, the mentalizer est une campagne de pub pour Bing de Microsoft.

J’ai réussi à le planter avec l’objet « x-acto » ! Mais l’idée reste intelligente, la réalisation bien faite et vous pouvez customiser le visage du mentalist avec une image de votre choix en bonus.

Pictogrammes au kilo

Audrey — Thu, 17 Mar 2011 15:10:35 +0000

TheNounProject

Une ressource géniale : http://thenounproject.com

Le but de ce site : partager, célébrer et mettre en valeur ce language visuel universel que sont les pictos.

Icotrip

Un peu dans la même veine que le 1er, à la différence que ce sont des png qui sont proposés en téléchargement et non des fichiers vectoriels.

http://www.icotrip.com

Graphic Design Museum

Animation pour l’ouverture du Graphic Design Museum de Breda, Netherlands.

Ainsi font, font, FONTS… 18 outils typographiques

Audrey — Sat, 12 Mar 2011 17:51:12 +0000

De plus en plus de sites proposent des fonts, gratuites ou payantes. Comment s’y retrouver dans cette multitude de ressources mises à notre disposition ? Voici une petite liste de ceux que j’utilise régulièrement…

Un must have

FontFabric : http://fontfabric.com

Pour commencer, le site est beau et, dans le genre, il n’y en a pas beaucoup qui le soient. Ensuite, les polices qui y sont présentées sont toutes – ou quasiment – de qualité. Certaines sont gratuites, d’autres payantes. Elles y sont présentées sous forme d’alphabet, mais également à travers de très beaux graphismes.

Free fonts

Dafont, the number 1, celui que tout le monde connait : http://www.dafont.com/fr

Vous y trouverez une quantité non négligeable de polices de toutes sortes, triées par genre, avec ou sans accents.

Fawnt : http://fawnt.com/fonts/browse-results.html

Un DaFont like…

Fontstock : http://www.fontstock.net

Comme le précédent avec en plus des vignettes de présentation des fonts sur enrobage graphique.

FontCubes : http://www.fontcubes.com/all/popular

The league of moveable type : http://www.theleagueofmoveabletype.com

Deviantart : http://browse.deviantart.com/?qh=§ion=&global=1&q=font

Des artworks, des photos, des psd, du vectoriel, un peu de tout quoi… oui mais on y trouve aussi des fonts !

FontSquirrel : http://www.fontsquirrel.com

« 100% free for commercial use »

Google : http://www.google.com/webfonts

Depuis quelques temps, google a lancé un nouvel outil de recherche, spécial fonts !

Pixel fonts

Intéressant pour ceux qui recherchent des « pixels fonts », que ce soit pour des sites en flash ou autres.

Free pixel fonts : http://www.adobeflash.com/download/fonts/pixel

FFF (Fonts For Flash) : http://www.fontsforflash.com

Shopping fonts

L’achat de polices n’est pas exceptionnel dans les budgets créas. Ces sites sont là pour ça !

P22 Type Foundry : http://www.p22.com/P22_2004/Frames/browse.html

FontShop : http://www.fontshop.com

Tools

Fonts in use : http://fontsinuse.com

Ce site nous expose les typos qui ont été utilisées sur différents supports (magazines, affiches…). Un site très bien fait !

WhatTheFont : http://new.myfonts.com/WhatTheFont

Cet outil va vous permettre d’identifier les typos présentes dans vos documents, via un upload de ces derniers ou en indiquant une url.
Je l’ai testé à plusieurs reprises et je dois dire que j’ai été bluffée !
Vous y trouverez également de nombreuses polices disponibles en téléchargement.

Identifont : http://www.identifont.com/identify.html

Comme le précédent, mais vous devez répondre à toute une série de questions.

FontStruct : http://fontstruct.com

Après vous être enregistré gratuitement sur le site, vous aurez accès à un outil vous permettant de créer vos propres typos et de les télécharger.
La prise en main est très simple. Après, tout est question de talent et de patience !

TypeNavigator :

Un outil pouvant vous aider à choisir une police en précisant si elle doit être avec ou sans sérif.

Whatfont : http://chengyinliu.com/whatfont.html

Détectez les polices utilisées dans les sites web que vous visitez et ce sans passer par le code source !

**************************

Comme je le disais au début de ce post, il existe une pléthore de sites proposant des fonts en téléchargement. Donc si votre préféré ne fait pas partie de cette liste, n’hésitez pas à poster le lien dans vos coms !