Forum dédié au moteur de recherche et aux techniques d'optimisation par #taggle
Vous n'�tes pas identifi�.
Salut,
Voici une liste de ressources de sites, listes, tutos, etc…dans lesquels vous pourrez puiser de l’inspiration pour vos futurs design.
Vous avez déjà sûrement vu une partie de ces URLs dans le Digg-like de Taggle…d’autres sont inédites.
Il y a d'abord ces fabuleux articles de l'excellent site Webdesignfromscratch.com.
Les 2 premiers sont les plus longs et les plus importants.
Design, le style actuel:
http://www.webdesignfromscratch.com/current-style.cfm
Le guide du design Web 2.0:
http://www.webdesignfromscratch.com/web … -guide.cfm
Ceux-la sont moins longs et franchement, à votre place, je les lirais tous en prenant bien mon temps tellement c'est de la balle.
Ce mec m'a ouvert les yeux sur quelque chose que je connaissais déjà, mais superficiellement; ça fait des mois que je cherchais à gauche et à droite un bon tuto sur le sujet et surtout avec des exemples concret.
Ses articles ont dépassé de très loin toutes mes attentes.
De l'importance du contenu:
http://www.webdesignfromscratch.com/content.cfm
Ne décorez pas, communiquez:
http://www.webdesignfromscratch.com/don … nicate.cfm
Navigation:
http://www.webdesignfromscratch.com/navigation.cfm
Logos:
http://www.webdesignfromscratch.com/logos.cfm
Les logos textuels:
http://www.webdesignfromscratch.com/tex … _logos.cfm
Les effets 3D:
http://www.webdesignfromscratch.com/3d_effects.cfm
Celui-ci, qu'il conseille à la fin d'un de ses articles est terrible aussi:
http://f6design.com/journal/2006/10/21/ … -of-web-20
Ensuite viennent les fameuses listes.
Je commence par la dernière en date de SmashingMagazine « Les 40 magazines design/tech à lire absolument ».
Y sont listés les meilleurs sites de design mais aussi les sites « tech » dont l’excellent Alistapart, CSS Reboot, TheFWA (pour le Flash), Ajaxian, ThinkVitamin, UXmatters (design d’interface…waouw, je vous reparlerais de ce site qui héberge, entre autres choses, un article d’un des frères Eisenberg, co-auteur de « Waiting for your Cat to Bark » et co-fondateur, toujours avec son frère, de la boîte « Future Inc » qui met en place sur les sites Web de ses clients, dont Universal.com +80% de transfo, le principe de scénario de visite selon les profils utilisateurs ou « personas »), LifeHacker, DesignMeltDown, etc…et ils en oublient d’autres comme CSSbeaut, CSSremix ou MiniAjax.
Allez voir tous ces sites que je viens de me faire chier de vous citer :
http://www.smashingmagazine.com/2007/03 … s-to-read/
Continuons avec les listes de SmashingMagazine et « Les 50 plus beaux design réalisés en CSS » :
http://www.smashingmagazine.com/2006/12 … ns-in-2006
Puis, « Les 45 design les plus frais, propres et impressionnants » (ah ces ricains, ils nous font bien marrer avec leurs formules à la con…n’est ce pas Americas ? T’inquiète, y’a plus d’images à regarder que de texte en ricain à lire) :
http://www.smashingmagazine.com/2007/03 … e-designs/
J’enchaîne sur « Les 30 designs obscurs que vous devriez voir » (à déconseiller aux apprentis Jedi) :
http://www.smashingmagazine.com/2007/01 … ldve-seen/
Ensuite regardons ensemble le prétentieux « 53 techniques CSS sans lesquelles vous ne pourriez pas vivre ».
Moi j’en connais parmi vous qui vivent très bien sans et dont les sites ne savent même pas ce qu’est une feuille de style.
Les bonnes vieilles balises HTML des familles et les inusables tableaux font encore très bien l’affaire :
http://www.smashingmagazine.com/2007/01 … ve-without
Enfin, et sans perdre mon souffle, je vous propose « Menus de navigation en CSS : les solutions modernes » (non, pas de titre du genre « les 50 plus belles gamelles de l’histoire de la télé » cette fois-ci…allez savoir pourquoi) :
http://www.smashingmagazine.com/2007/03 … solutions/
Les listes de SmashingMagazine ne sont pas les meilleures, je les ai mis en 1er histoire de m’en débarrasser.
Il faut dire qu’ils aiment ça les listes chez SmashingMagazine.
C’est sur que pour se faire Digguer, y’a pas mieux.
Continuons sur une liste allemande…de sites US. Je la trouve assez excellente, il y a plein de tutos ainsi que de nombreux sites d’excellente qualité:
http://www.drweb.de/weblog/weblog/?p=780
Une autre excellente liste, issue de la précédente, en espagnol cette fois –ci (alors Americas, content ?)…de site US (désolé, c’était vraiment pas cool de ma part, mais tu verras, c'est plein d'images):
http://www.leandrodonofrio.com/recursos … efinitiva/
On enchaîne sur les 3 excellentes listes de Phil Renaud, beaucoup plus qualitatives que celle de SmashingMagazine.
Tout d’abord, les « Les 35 sites au design les plus sexy que vous avez oublié »:
http://philrenaud.com/57
Attention, préparez-vous, l’originalité du prochain titre de liste choisi par Philibert est assez hilarante, « Les prochains 35 sites au design les plus sexy que vous avez oublié ». Ne vous fiez pas au titre, c’est de la bombe:
http://philrenaud.com/156
Pour la suivante, Philou a tenu compte de mes remarques et n’a pas osé nous refaire le coup du titre qui ne fait pas rire et il a intitulé sa 3ème et dernière liste le plus sobrement du monde « Les 35 sites au design les plus sexy que vous avez oublié, 3ème partie »…respect Phil:
http://philrenaud.com/24
Ensuite, je vous avais mis de côté les meilleurs design de Novembre 2006 par StandardsRebbot (c’est encore très frais comme design la saison Nov’06), mais cela fait quelques jours déjà qu’on ne peut plus y accéder…c’est ça l’Internet d’aujourd’hui, Web 2.0, Beta release, je me fais cramer mon serveur par ces cons de Diggers qui oublient de cliquer sur les AdSenses, du coup je ne peux pas payer mon hébergeur et ma concierge commence à me regarder de la même façon que ce dernier. Je vous le mets quand même, d’autant que ça ne vous coûtera pas plus cher:
http://standardsreboot.com/nov06/
Vous trouverez sur ce site une liste de badges si tendance sur le Web 2.0.
Je vous en ai parlé un peu plus haut, alors n’oubliez pas d’aller voir le reste du site:
http://designmeltdown.com/chapters/Badges/Part2.aspx
Swfir, ça déchire. Allez voir pourquoi:
http://www.swfir.com/
Découvrez tout plein de menus en CSS. Il faut absolument voir aussi le reste du site:
http://www.cssplay.co.uk/menus/index.html
On continue avec les listes de tutos Ajax qui vont bien.
Commençons par les inénarrables tutos de Max Kiesler:
« Un tour de table de 30 tutoriaux Ajax »:
http://www.maxkiesler.com/index.php/web … tutorials/
Et la suite, « 60 tutoriaux Ajax de plus»:
http://www.maxkiesler.com/index.php/web … tutorials/
Enfin « Scripts de galeries en Ajax à télécharger, présentations et effets »:
http://www.maxkiesler.com/index.php/web … d_effects/
Allez voir le blog de Max, parceque là il s’est carrément lâché et il nous a pondu une chiée de listes en tous genres (de la super came)…pour ceux qui, comme Max, kiffent grave Ajax. Sinon vous risquez l’overdose :
http://www.maxkiesler.com/
Un grand classique de l’Ajax Attitude avec le Drag’n’Drop, les fameuses Rating Stars ou « Comment mettre des petites étoiles de notation en Ajax » plein ton site Web:
http://www.masugadesign.com/the-lab/scr … ating-bar/
Plein de tutos Javascript, DHTML et CSS. Que du bonheur:
http://www.javascriptkit.com/
Le petit frère de JavascriptKit, une grosse librairie de scripts Javascript et DHTML. Que du bonheur bis:
http://www.dynamicdrive.com/
Une galerie de logos…terrible source d’inspiration/pompage:
http://logopond.com/
Plein de ressources de design (merci Sid):
http://blog.inserit.com/links.php
Plein de backgrounds fait de pixel patterns:
http://k10k.net/pixelpatterns/
Quelques pépites:
Site communautaire Web 2.0 sur l’univers des comics. Créé par les fondateurs de Boompa.com. Design à parfaire mais fonctionnalités Ajax très sympas (voir la vidéo de présentation en grand format -> double cliquez dessus):
http://www.comicvine.com
Regardez l'effet à droite lors du scroll avec l’ascenseur (pur truc CSS tout bête, pas de JS, pas de flash). A voir aussi le favicon animé sous Firefox:
http://www.ronemedia.com/
Nouveau Network de chaînes thématiques. Mix entre blog et télévision. Je sais, ça s’appelle un podcast, mais ces mecs ont mis les moyens, regardez les images de la soirée des Awards, ça pue le pognon.
Le blog de la boîte qui les publie :
http://blog.nextnewnetworks.com/
Les 2 meilleures chaînes thématiques :
http://www.pulpsecret.com/
http://www.channelfrederator.com/
Exemple de footer statique créé sans iFrame, rien qu'avec du CSS:
http://kyyhkynen.net/
http://houseofpretty.com/
Regarder la zone de login à gauche avec l’image en fond de la fenêtre de saisie, magnifique:
http://per.fectio.net/
Voila, c’est fini comme dirait Jean Louis.
Hors ligne
Chapeau et Merci pour ton boulot de recherche et de synthèse Turulillo
Là tu nous donnes pas mal d'éléments pour faire de beaux sites
Dommage que les frenchies ne documentent pas aussi bien leurs exploits dans l'utilisation du CSS... car il ya pas mal de webdesigners français qui valent le coup mais on trouve peu de documentation en français malheureusement.
Hors ligne
Excellent ! Bravo et merci pour cette synthèse plutôt complète
Je suis en train d'essayer de comprendre le coup du scroll ascenseur et du footer statique...
Hors ligne
Tiens bah justement je réorganisais mes flux designs hier (suite à la lecture de la liste http://www.smashingmagazine.com/2007/03 … s-to-read/ cité par Turu)
Trois OPML
http://88.191.28.40/malaiac/docs/design_us.xml une vingtaine de bon flux design US > justement extraits de la liste
http://88.191.28.40/malaiac/docs/design_full.xml 150 flux extraits de http://design-feed.net/feeds.html
http://88.191.28.40/malaiac/docs/web_trends.xml web2.0, web trends, etc , une vingtaine de flux (genre readwrite, radar, etc)
Derni�re modification par Malaiac (21-03-2007 09:32:23)
Hors ligne
Merci Turu, enfin un post digne de ce nom qui nous apprend pleins de trucs! Je l'attendais celui-là en plus
Je connaissais effectivement Webdesign from scratch dont j'ai parlé ici
http://forum.taggle.org/viewtopic.php?id=3819&p=2
et que MagicYoyo avait cité je ne sais plus où et qui est une ressource incroyable pour nous les webmasters
Appollo avait aussi filé une ressource pour faire des boutons "à la web 2.0".
Si je peux me permettre d'ajouter une ressource
http://www.evasion.cc/blog/post/2006/12 … -20-et-CSS
ainsi que
http://wisdump.com/design/top-7-freshes … s-of-2006/
7 design "frais" de plus
Et n'oubliez pas les petites icones
http://www.eon-studio.com/sites/wagoo.info/?p=21
http://forum.taggle.org/viewtopic.php?id=3444
Hors ligne
Excellents liens Malaic et Marie.
Liste des sélecteurs CSS:
http://wiki.media-box.net/documentation/css
Liste des sélecteurs CSS en image:
http://www.ilovejackdaniels.com/cheat-s … eat-sheet/
Concernant ce dernier site, les pros ddu CSS auraient il l'amabilité d'aller jeter un oeil sur le code et de nous dire comment il arrive à faire en sorte que quand on passe d'une page à l'autre, il n'y a que le cotenu du milieu qui se charge (genre AJAX) alors que les URLs changent.
En fait , les images, le bandeau, le contenu de gauche, en gros tout ce qui n'est pas le contenu du centre ne bougent pas alors qu'on passe bien d'une page à une autre.
C'est peu être tout bête mais je ne comprends pas comment il fait.
Hors ligne
Turulillo a �crit:
Liste des sélecteurs CSS en image:
http://www.ilovejackdaniels.com/cheat-s … eat-sheet/
Concernant ce dernier site, les pros ddu CSS auraient il l'amabilité d'aller jeter un oeil sur le code et de nous dire comment il arrive à faire en sorte que quand on passe d'une page à l'autre, il n'y a que le cotenu du milieu qui se charge (genre AJAX) alors que les URLs changent.
J'ai déjà remarqué ca sur certain de mes sites, j'ai pas testé sous IE mais sur FF ca se produit quand le code est propre et valid
là le site est valid et le code propre
http://www.forum-foot.info/sujets-libres/vt3300.foot
là si tu utilise la pagination entre les deux adsenses en haut ca doit le faire
w3c aussi (ouais ben voilà c'est pas que du snobisme alors.. )
edit : ou c'est le 18Mega ?
Derni�re modification par pagetronic (21-03-2007 17:26:14)
Hors ligne
Moi ça le fait pas, pourtant je suis valide
A mon avis ça vient surtout de la légereté du design
Hors ligne
Je n'ai rien vu de particulier dans le source, je pense que c'est surtout une bonne gestion du cache (quand on le désactive, l'effet disparait et on voit bien le rechargement à chaque page)
Hors ligne
Yep, et pis si <title> change, c bien que le html change
Hors ligne
ForumFr est en cache disque, ca le fait pas alors que ForumFoot demande la revalidation du cache
valid valid la home oui
ca vous le fait sur ForumFoot?
edit : c'est pas l'usage modéré de tableau? moi j'en ai un seul et eux pas dutout
Derni�re modification par pagetronic (21-03-2007 17:36:59)
Hors ligne
Juste un petit addon pour m'excuser de pas avoir participé au topic avant mais c rude en ce moment. voila ce que je vous suggère de lire : http://www.useit.com/alertbox/
Les articles ne sont pas tous jeunes mais font souvent références à des éléments du livre d'Alain Leterrier que m'avait conseillé un TG lors du séminaire (merci à lui et il se reconnaitra )
Hors ligne
Effectivement, c'est pareil sur ton forum Page, mais c'est moins visble car il n'y a que le bandeau qui ne change pas alors que chez lui t'as le contenu de droite aussi.
C'est surement cette histoire de gestion du cache.
Sinon la liste de liens/feed de Malaic est terrible. Tous mes sites préférés, même ceux qui ne concernent pas directement le design mais plutôt l'expérience utilisateur (design d'interfaces) y sont.
Je la recommande chaudement:
http://design-feed.net/feeds.html
Sinon c'est excellent AlertBox.
Le problème de tout ça, c'est que comme c'est en anglais, ça me prends 3 à 4 fois plus de temps pour bien comprendre et que même si c'était en Français, vous avez vu le nombre de trucs bien qu'il y a à lire ? C'est juste pas possible pour un être humain, ça me rend dingue.
Vous n'imaginez pas la frustration que c'est pour quelqu'un comme moi, des fois je me couche à 5 heures du mat' après des sessions de lecture qui ressemblent à du gavage de cerveau (qui ont commencé 18 heures plus tôt, vers midi), c'est hardcore, et j'arrive pas à m'endormir avant 6 heures tellement je cogite, en essayant de me souvenir d'un maximum de choses, pour surtout pas oublier un truc important que je viens de voir....mais j'en ai vu tellement, que ça sert à rien. Du coup, j'angoisse.
Tiens la par exemple, j'entends ma femme qui monte les escaliers histoire de me débrancher du PC, pour aller bouffer un truc, regarder un film à la télé, faire un truc quoi.
Le temps que j'écrive cette phrase, elle est déja redescendu pour bouffer un truc à la va vite.
Hors ligne
Excellentes sources merci, je sens que je suis parti pour une session lecture non stop
Turulillo a �crit:
Tiens la par exemple, j'entends ma femme qui monte les escaliers histoire de me débrancher du PC, pour aller bouffer un truc, regarder un film à la télé, faire un truc quoi.
Le temps que j'écrive cette phrase, elle est déja redescendu pour bouffer un truc à la va vite.
Hors ligne
> Toucouleur, useit, c'est surtout le site du gourou de l'accessibilité Jakob Nielsen.
Donc dix ans d'archives sur les recommandations du bonhomme, pas toujours réalistes, mais souvent lucides
Hors ligne