Après 6 mois d’arrêt, le blog n’est pas (totalement) mort !

Pour une reprise en douceur, voici une sélection de 5 sites web de freelances ou d’agences web qui m’ont plu en terme de graphisme et en terme de navigation !

Ghost Horses

Un travail sur les typographies, un humour très second degrés et une pointe de JavaScript. Le tout avec un design sobre.

Two24

Un site avec une photo en noir & blanc en plein écran et en fond. Le tout très sombre. Je trouve l’ensemble réussi.

Tom Pain

Un joli site avec une navigation originale. Le tout est animé à l’aide de JQuery et la navigation peut se faire au clavier. À tester donc.

2am Media

Le site d’une agence web anglaise, utilisant une grande photo en noir et blanc en background et on retrouve une belle utilisation de la couleur dans les éléments HTML.

Impala Webstudio

Le site d’une agence française, pour une fois ! Un fond gris, des typos recherchées (et utilisant @font-face), des belles photos, un slider (fait avec JQuery)… Tout pour me plaire ! J’aime également assez ce qu’ils ont fait sur la page L’équipe.

.

Pas encore de billet sur le même sujet !

Comme à peu près tous les 6 mois depuis que je tiens ce blog, j’ai fait une grosse mise à jour du design du blog. Voici une description des différentes modifications.

Pour commencer, j’ai essayé de faire un vrai logo.  Fini le « arnaud-k » en texte avec deux ou trois effets photoshop… Ce logo, avec des proportions plus simple à intégrer, je vais pouvoir m’en servir sur mes divers sites.

J’ai voulu un design plus clair, plus travaillé et mieux fini que le précédent (qui, je dois bien l’avouer, avait été fait à l’arrache). J’ai donc pris mon temps pour faire la maquette (étalé sur 2 semaines), et l’intégration à WordPress (intensif sur un week-end).

J’ai également décidé d’adopter un code couleur pour les principales catégories / principaux mots-clefs pour permettre d’identifier plus rapidement différents articles sur la page d’accueil :

• Bleu pour JQuery
• Jaune pour les Tutoriaux
• Vert pour le Web Design
• Rouge pour les actualités du web

J’ai également utilisé la propriété CSS @font-face pour les différents titres présents sur le site avec la méthode décrite dans mon précédent article.

Je sais qu’il reste encore un ou deux détails à corriger, mais ça sera fait normalement dans la semaine ! Un autre article devrait faire suite à celui, où j’aborderai plus le côté technique pour l’intégration dans WordPress et de ce que j’ai pu utiliser ici. N’hésite pas à donner ton avis / critiquer / faire des compliments.

Sur le même sujet :

1. Le blog, le retour !

Avec les nouveaux navigateurs, les nouvelles normes et les nouvelles technologies on peut maintenant sereinement utiliser la propriété CSS @font-face et faire en sorte que ça marche sur tous les navigateurs ! Avec certes un ou deux hacks CSS, notamment pour IE6 et pour éviter que des fichiers soient chargés plus que nécessaires.

Voici par exemple, la technique utilisée et décrite par Paul Irish (qui travaille, entre autres, pour Google Chrome et fait partie de la JQuery team) dans son article « Bulletproof @font-face syntax » :

@font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
   url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Pour avoir des explications complètes, je te conseille fortement l’article présenté ci-dessus. On voit bien qu’il faut posséder la typo dans différents formats (eot, woff, ttf) pour que @font-face fonctionne partout.

Et c’est là qu’intervient le site FontSquirrel et son « @font-face generator kit ». A partir de l’upload d’une typo (j’ai testé avec une .ttf), il la convertit dans les formats qui nous intéressent, prépare une page de démo avec le CSS qui va bien et, enfin, propose de télécharger une archive de tout ça ! J’ai fait le test avec un typo que j’avais et tu peux voir le fichier de démo de FontSquirrel.

Cela ouvre quand même de belles perspectives, tant que ça ne part pas dans tous les sens. J’ai d’ailleurs décidé d’utiliser cette technique pour le prochaine re-design du blog (coming soon).

Pas encore de billet sur le même sujet !

Une fois n’est pas coutume, je vais parler d’un site fait en Flash… (n’en déplaise au pro-Apple ). Proximity Philippines est (apparemment) le site d’une agence de com’.

Dès que l’on arrive sur le site, le mode plein écran est activé par défaut. On se retrouve avec un fenêtre où tout un navigateur et un site ont été re-dessiné à la main. Lors de la visualisation du portfolio, on se retrouve même avec plusieurs « onglets » ouverts.

Je trouve le site vraiment bien fait avec un léger humour second degrés : il faut essayer le « panic button » par exemple ou bien cliquer plusieurs fois sur la croix en haut à droite pour fermer le site !

Sur le même sujet :

1. Les web designs de la semaine

Une (petite) sélection de sites trouvés au fil de mes navigations. J’ai trouvé ces sites créatifs, bien faits visuellement et imaginatifs. Ils ont tous un point commun : l’utilisation de JQuery, certes à divers degrés, mais JQuery tient une part importante dans ces sites.

Appear.dk

Peut-être le site le plus complet en matière de JQuery de cette sélection. J’avoue que c’est un de mes coups de cœur. La navigation y est surprenante !

Jacob O’neal

Une joli portfolio utilisant des effets d’apparition / disparition et des accordéons horizontaux.

Vivo Group.com.au

Le site web d’une agence australienne. Au premier abord on pourrait croire à du flash, mais en fait non.

Cafundo.com.br

Un blog brésilien mélangeant très bien illustrations et JQuery (j’aime assez la sobriété de la sidebar).

Alex Bouga

Je crois qu’il n’y a pas grand chose à dire en terme d’illustrations et d’animations. Il faut aller y faire un tour et tout y essayer

Voilà, je pense qu’avec tout ça la semaine va être assez inspirée ! Et si tu as un site que tu souhaiterais voir apparaître dans une de mes sélections (avec ou sans JQuery) n’hésite pas à m’envoyer un petit lien (contact [at] arnaud-k.fr ).

Sur le même sujet :

1. Les web designs de la semaine

Encore un nouveau thème pour le blog, je sais que le dernier datait d’il y a moins de 3 mois… Mais il ne me plaisait déjà pu et j’avais d’autres idées en tête !

Pour celui là, que j’ai également conçu et intégré moi-même, j’ai assayé de faire le plus simple et le plus propre possible. Un fond de page uni, un fond de contenu uni, des icônes monochromes… Les éléments les plus travaillés étant le logo et les titres de la sidebar (que j’ai au passage allégée). Que dire de plus ? A part que j’attends ton avis sur ce design ! Et si vous constatez des bugs graphiques, des portions non traduites, n’hésitez pas à me le signaler dans les commentaires.

Pour parler un peu technique, je suis parti d’un thème WordPress minimaliste, avec le moins de styles différents et le plus simple possible afin de repartir (du plus proche possible) de zéro. Avec la base et le codex WordPress pour personnaliser les éléments, c’est allé plus vite que je ne le pensais. Maintenant j’ai plus qu’à attendre de voir si le nouveau design n’a pas d’impact négatif sur le référencement du blog !

Pas encore de billet sur le même sujet !

A ce que j’ai compris, Swiths est une agence web Polonaise. Le web design (tout en texture bois) et l’en-tête tout particulièrement est très travaillé. Je trouve que le rendu est très réussi. Le menu en Flash est simple mais j’apprécie l’effet de survol, le switcher de langue est également bien fait ! Le footer où l’on voit la fin du bureau donne un bel effet je trouve.

Et comme dirait Pascal, ils sont forts en web design dans les pays de l’Est ! Bon assez parlé, je te laisse y aller !

Pas encore de billet sur le même sujet !

Le site du jour, que je viens tout juste de découvrir : TheyMakeApps.com. Le site propose de référencer les agences de création d’applications pour « ordiphone » – smartphone en anglais – : Iphone, Android…

Le design tout d’abord. Tout, ou presque, est en gris (#303232) et blanc. Cela donne un certain style (assez classe je trouve) au site. Un gros travail a donc été fait sur les typographies (tu peux déjà compter le nombre de typos différentes sur la capture ci-dessus !). Les icônes et petites illustrations (en dehors des images des agences) sont également très travaillés et bien réussies.

Ensuite la navigation sur le site lui-même. La première fois que l’on y accède, il est demandé de choisir entre modes de navigation : à la souris (classique) ou tout au clavier (avec, nous promettent-ils « more fun »). Après avoir choisi clavier, tu pourras constater que tout a bien été étudié pour naviguer dans le contenu, activer un bloc, voir les détails d’une agence et revenir sur le listing…

Cela faisait quelques temps que je n’étais pas tombé sur un site web tel que celui là

Pas encore de billet sur le même sujet !

Installer Photoshop sur Ubuntu, c’est possible. Je tiens à préciser qu’il existe néanmoins Gimp, un bon logiciel de création et de retouche photos, mais qui n’arrive pas encore à égaler Adobe Photoshop. Attention, je ne parle pas ici de Photoshop CS4, mais de Photoshop CS2 et je parle de la version d’évaluation de 30 jours (rien d’illégal ici…) .

Tout d’abord, il faut commencer par installer Wine sur son Ubuntu. Wine permet d’exécuter les applications .exe sous Linux (Wine signifiant Wine Is Not a Emulator, c’est un acronyme récursif…). On le trouve dans les paquets Synaptics. Pour plus d’infos sur l’installation de Wine, n’hésite pas à aller faire un tour sur la doc officielle d’Ubuntu.

Il faut ensuite télécharger la typo Tahoma et la copier dans le dossier c:/windows/Fonts de Wine (en cliquant sur Applications / Wine / Browse C:/ drive ). La typo est nécessaire pour l’affichage du texte de l’interface de Photoshop.

Ensuite il ne reste plus qu’à télécharger Photoshop CS2 (par dispo ici, sur le site officiel). Une fois le téléchargement fini, il faut faire clique-droit puis ouvrir avec Wine Executer des programmes Windows. Il faut suivre l’installation normalement. Il ne reste plus qu’à lancer Photoshop en faisant, Applications / Wine / Programmes / Adobe Photoshop CS2.

J’ai pu remarquer quelques légers bugs mais rien de méchant : on ne peut changer de bureau tant que le logiciel n’a pas fini de se lancer, des fenêtres disparaissent (on peut les faire revenir en les désactivant et en les réactivant)…

J’espère t’avoir aider, je ne pourrai pas faire plus, en cas de problème, je t’invite à aller sur les forums officiels d’aide Ubuntu.

Pas encore de billet sur le même sujet !

Un des rares sites où j’ai fait wOoh en tombant dessus. Je suis totalement fan du design du blog thepixel.com. Les illustrations du header et du footer sont impressionnantes, très bien réalisées et bien intégrées dans le site. Au final on se retrouve avec un blog au design original, sans cadres pour le contenu, avec des couleurs flashy.

Sur ce, je retourne bosser !

Pas encore de billet sur le même sujet !

Pour la petite sélection de web designs de la semaine, je vous ai préparé une belle liste de 10 web designs utilisant des textures bois (en fond de page pour la plupart).

Dans cette liste on retrouve principalement des portfolios de web designers / graphistes (dont un français, le 6ème de la liste), 2 blogs (dont WPsmash, où j’aime assez l’utilisation de JQuery qui a été faite).

Malgré leur point commun évident, j’ai essayé de faire une sélection la plus large possible et de choisir des sites qui ne ressemblent, au final, pas tant que ça. Il suffit de cliquer sur les captures pour aller visiter les sites.

Enjoy !

1. Calixto Jùnior

2. Lanikai Properties

3. Respiro Media

4. The things we make

5. B. Candullo

6. Camille Boidron

7. Nine Lion Design

8. Julius Mattsson

9. Marmalade on toast

10. WPsmash

Pas encore de billet sur le même sujet !

Comme tu as pu le constater, depuis vendredi est en ligne le nouveau design du blog. Contrairement au précédent (qui datait seulement de cet été), c’est un thème que j’ai fait entièrement moi-même. C’est aussi pour cela que j’ai eu envie de changer, de mettre quelque chose fait de mes (pas si) petites mains.

Les codes couleurs sont à peu près les mêmes avec les nuances de bleu, l’espace de lecture des articles gardent la même taille (600px) pour que les images des précédents billets ne dépassent pas, la colonne de droite a, par contre, été agrandi. J’ai également ajouté des images sur les listes « articles sur le même sujet » en modifiant le plugin WP (Yet Another Related Posts Plugin) et j’en ai profité pour franciser certaines parties du blog qui étaient toujours en anglais.

En plus des liens vers mon Flux RSS, mon Twitter et mon compte Flickr (déjà présent sur l’ancienne version) j’ai ajouté deux liens dans l’en-tête : vers mon compte Delicious où tu pourras retrouver les derniers liens bookmarqués (souvent sur les thèmes du web design et de JQuery) et un chti lien vers mon (également) nouveau portfolio !

Donc pour les critiques, compliments, donations, insultes ou lançage de fleurs c’est dans les commentaires de cet article que ça se passe !

Pas encore de billet sur le même sujet !

Le blog est  (enfin ! ) de retour! Je reprends le blog en douceur et après un petit break qui s’imposait. Les articles viendront maintenant sur un rythme un peu plus tranquille (et non, il n’y aura plus 2-3 billets par jour…).

Pour ce retour, j’ai le plaisir d’annoncer la mise en ligne de mon portfolio / CV.  Non pas que je cherche du boulot (au contraire, j’en ai trop en ce moment !), mais c’était juste pour m’amuser, faire du web design, de l’HTML / CSS et enfin du JQuery. Je me suis bien éclaté avec JQuery, et au final il y autant de lignes de code avec JQuery que de CSS !

Le design est basé sur le concept des sites horizontaux (voir des exemples dansun précédent billet). On retrouve donc des liens de navigation ( < et >) tout le long du défilement. On peut également naviguer en utilisant les flèches gauche et droite du clavier.

Enfin, il existe une version anglaise du site pour commencer la conquête du monde !

Pas encore de billet sur le même sujet !

Le site Raleigh Dead Drop est un site assez coloré malgré le fond gris. Le design assez minimaliste est également moderne. Les coleurs de la charte graphique sont bien choisis, le compte à rebours (en Flash) est également bien réalisé.

Je n’ai pas bien saisi le pourquoi du comment du site (pas trop d’explications quand même). Le plus impressionnant graphiquement reste quand même le logo !

Pas encore de billet sur le même sujet !

Le site d’Orman Clark est le portfolio d’un web designer. Le design tout en illustration vectoriel. Le site est composé d’une seule page séparée en plusieurs sections. Avec un effet de scroll (fait avec JQuery) on peut parcourir ces différentes parties. A noter qu’on trouve également un slider JQuery.

Tous les éléments du site sont travaillés graphiquement, même les champs du formulaire de contact. J’aime assez ce genre de portfolio utilisant des techniques modernes !

Pas encore de billet sur le même sujet !

Pour aujourd’hui ça sera un site différent des autres : le portfolio/CV en ligne de Ben Lind. Ce site est différent des sites de cette série (pour tout les ‘web design du jour‘ c’est ici) de part son style. Le design du site de Ben Lind est un design que l’on peut qualifier de minimaliste. Très peu d’éléments graphiques, il présente sobrement ce qu’il a fait.

Je suis fan de l’effet typo sur le I’m Ben dans l’en-tête (avec le ‘m’ et le ‘B’ mélangés…). Les couleurs utilisées sont simples et le rouge égrainé un peu partout accroche bien l’oeil.

Pas encore de billet sur le même sujet !

Le site du jour est le site web d’une web agency slovaque : Trust Solutions. Le design très moderne du site et les couleurs utilisées m’ont plu. La charte graphique Noir/Vert/gris me fait invariablement penser aux couleurs XboX…

La simplicité de la page d’accueil la rend plus efficace je trouve. Le slider (fait en utilisant MooTools et un plugin) est bien mis en avant et en valeur. Et pour continuer avec MooTools, il y a aussi un petit menu déroulant (vert flashy…) !

Pas encore de billet sur le même sujet !

Le site du jour est un blog espagnol parlant de design web, de nouvelles technologies et de gadgets. Le nom Blog Me Tender provient d’un jeu de mot avec une chanson de Elvis Presley (Love Me Tender -> merci à @colinblane pour la correction).

Le fond du site est composé d’une photo d’un ciel nuageux sur lequel ont été ajoutés des croquis. Je trouve les dessins ‘crayonnés’ très réussis. Pour le reste du blog j’apprécie la légèreté qu’il y a dans les listings des articles, il n’y a pas de vrai séparation entre les billets. Ça donne un aspect aérien à l’ensemble.

Pas encore de billet sur le même sujet !

Troisième blog français dans cette série : Blup! Derrière ce nom, se cache en fait Dew, le créateur du Dewplayer, le petit player audio flash que l’on trouve sur des milliers de site (mais si tu sais le vert et gris !).

En tout cas, j’aime bien le design de son blog. Outre les effets papiers et post-its chiffonnés dans la colonne de droite, le design contient dans l’en-tête et dans le pied de page tout ce qui plaît à Dew. En vrac on retrouve du réglisse, Toad, Nathalie Portman, le Doc Emmett Brown… Le tout est bien agencé et ne fait pas trop surchargé et l’ensemble est très coloré !

Pas encore de billet sur le même sujet !

Pour une fois ce sera un site de fille ! Le site Rut m.fl est (apparemment) le site d’une boîte suédoise de création de vêtements (désolé mais je ne comprends pas bien le suédois…). Le design est assez réussi, il est très propre.

On y retrouve un travail sur les nuances de gris (le site est principalement blanc/gris/noir) et des touches de rose (bah ouais c’est pour les filles   ). Je trouve que l’effet ‘papier déchiré’ dans l’en-tête du site est bien rendu. Les diverses éléments (cassette audio, papillon…) sont également bien intégrés au design du site.

Pas encore de billet sur le même sujet !