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 !

Pour éviter de présenter un webdesign par ci par là sur ce blog, j’ai décidé d’en regrouper plusieurs par articles, de te faire une sélection hebdomadaire de webdesigns originaux, bien réalisés et qui donnent de l’inspiration.

Pour cette première, j’en ai sélectionné 6 qui sont assez variés. Cela va du portfolio utilisant l’effet bokeh au site d’une agence web australienne avec plein d’illustrations (il faut cliquer sur les captures d’écran pour accéder aux sites).

Yummy Wakame

Un portfolio bien réalisé, très coloré et utilisant l’effet bokeh (voir wikipedia). Tous le site joue avec des effets de lumière.

Green Woods CC

Ce qui m’a le plus marqué celui-ci, c’est bien évidemment le header que je trouve très réussi. Les divers effets de transparence également utilisés dans le contenu et le footer sont également bien faits.

Southern Comfort

Le site allemand d’une marque de liqueur de whisky (il faut donner sa date de naissance pour y entrer !). On y retrouve des illustrations et des photos qui sont intégrées entre elles. Et le site utilise JQuery pour le slider de la page d’accueil, que demander de plus ?

Treme (par Orange Cinéma Séries)

Une fois n’est pas coutume un site en flash et en français. La réalisation est parfaite, la photo utilisée en fond est vraiment réussie.

Make Photoshop Faster

Un deuxième site coloré utilisant l’effet bokeh. Les effets de transparence ainsi que les grosses typographies ajoutent beaucoup au design du site.

Red Tiki

Une web agency austalienne. Le site utilise pas mal d’illustrations, et j’aime particulièrement leur logo (que l’on retrouve aussi en ASCII art dans le code !).

Sur le même sujet :

1. Les web designs de la semaine

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 !

Aujourd’hui, c’est un assez gros coup de coeur que le design du portfolio d’Adam Dannaway. La page d’accueil représente bien le côté parfois schizophrène dans la création de site web. Avec d’un côté le graphisme du site et de l’autre le développement.

On sent que le site est bien fait, bien fini. Les légères animations Javascript (faites avec Mootools) apporte un plus. Le design reste néanmoins assez sobre avec son fond blanc et ses textes en noir. Ses réalisations sont bien mises en avant.

Pour moi, c’est un site à garder précieusement dans mon Delicious !

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

Parce que c’est dans l’air du temps, on trouve de plus en plus de sites web ayant un design qui intègre parfaitement des sliders. Souvent sur la page d’accueil d’un site, le slider permet de mettre en avant beaucoup d’informations (sous forme de texte ou bien souvent d’images) sans pour autant surcharger la page.

Il peuvent être fait avec du JQuery (voir l’article parlant d’EasySlider), Mootools voire même en flash pour le dernier de cette sélection. Toute l’astuce réside dans le fait de bien l’intégrer dans la page sans qu’il soit différent du style de la page. Le placement et l’intégration des éléments de navigation du slider sont souvent primordiaux, même si on ne les voit pas au premier abord, l’utilisateur saura où les trouver.

J’ai fait pour vous une petite sélection de design intégrant ces sliders :

http://www.etondigital.com/

http://graphik.fi/

http://www.sketchen.com/

http://www.slidedeck.com/

http://www.utah.travel/utah-maps/

Sur le même sujet :

1. Les web designs de la semaine

Aujourd’hui, j’ai décidé de présenter plusieurs galeries / blogs qui aident à trouver de l’inspiration et de suivre les dernières tendances en matière de web design.

Foliofocus.com

Foliofocus est une galerie de sites web, la particularité de celle-ci est qu’elle ne présente que des portfolios ! On y trouve donc pas mal de sites audacieux.

CssLeak.com

CssLeak propose, quant à lui, à la fois un blog qui parle de toute la partie front end dans la création de sites web : design, intégration, javascript (j’y ai même lu des articles sur JQuery !)

designshack.co.uk

Un peu le même principe que CssLeak, Design Shack propose un blog (qui ne parle ici quasiment que de web design) et une galerie CSS. La manière de parcourir la galerie est bien faite : on peut trouve un design par couleur, par forme de site ou par catégorie.

thedesigninspiration.com

The Design Inspiration est un blog qui se veut une grosse source d’inspiration. On y retrouve des logos, des illustrations, des web design, des photos, des patters et des typographies. Il y a en moyenne une dizaine d’articles par jour !

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 !

Un petit coup de coeur que j’ai eu il y a quelques temps pour les graphismes de Glennz. Les t-shirts qu’il propose avec ces graphismes geek et bourrés de références : jeux vidéos old-school, séries TV… Je suis l’heureux possesseur de 2 t-shirts (dont celui sur l’évolution des legos que l’on voit sur l’image ci-dessus).

Il est également proposé un système de vote pour choisir les visuels que l’on veut voir disponible en t-shirt. Je te laisse donc aller faire un tour et apprécier les visuels !

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 !

Pour reprendre les (bonnes) habitudes, une petite présentation de deux sites web très réussis graphiquement et qui présente la particularité d’être animés avec du JQuery.

Le premier est le portfolio d’un web designer australien : Jay Hollywood. Un design sur fond gris (toujours classe si bien réalisé !). Le fun commence sur la page d’accueil avec le slider : l’effet de mise en avant est vraiment bien fait avec des effets d’ombre porté et de masque sur les éléments à droite et à gauche. On retrouve du JQuery sur toutes les pages du site. Les illustrations de l’en-tête du site sont toutes nickel je trouve. Enfin je suis également fan du formulaire du contact et du petit effet de transition lorsque l’on clique sur « Just saying Hello »…

Le deuxième est totalement différent. Indofolio est le portfolio d’un web designer indien. Il fait partie des sites web dits horizontaux. Sa particularité (outre son design particulièrement réussi) est dans les effets de transition : une sorte d’effet Parallax. En effet il a donné de la profondeur au site, les images des différents plans ne se déplace pas à la même vitesse. Autre petit effet sympa est le drag’n'drop sur la partie « My Network » pour être redirigé vers la page voulue.

Enfin, je peux également citer le re-design de mon portfolio : arnaud-k.fr (également avec de JQuery) mais j’y reviendrai bientôt !

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 !

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 !

Pour ce site du dimanche, je vais présenter Hull Digital Live. Le site présente une conférence sur les technologies numériques dans la ville de Hull en Angleterre. Le design simple, assez minimaliste et clair m’a plu. Les effets crayonnés sont bien réussis.

J’ai également bien aimé le footer du site, avec les effets de vagues, les couleurs utilisées et le compte à rebours mis en forme de manière originale.

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 !