Articles taggés dans la catégorie Webdesign

Helvetica + Icônes = Helveticons

Si vous aimez bien la police Helvetica et que vous êtes sans cesse à l’affût de nouvelles icônes, je vous conseille Helveticons qui est un ensemble de 245 icônes au format vectoriel basées sur la typographie Helvetica Bold.

245 icônes basées sur la police Helvetica Bold

245 icônes basées sur la police Helvetica Bold

J’aime ce genre d’icônes minimalistes, simples, plats avec un côté rétro ou Mac.

Site Helveticons.ch

Concernant le site Helveticons, il est sobre et joli mais pas très ergonomique au premier abord. Le côté minimaliste du site a pris le devant sur les boutons d’action, et pour cela il faut survoler “245 icons” situé en haut à droite du site pour enfin avoir une prévisualisation de ces fameux icônes ou bien passer la commande :(

12 liens sur le Design Pattern

Dans le cadre de la réalisation du back-office de slashcommunity pour Dimelo, je me suis intéressé à des sites traitant sur le Design Pattern, User Interface…
Le Design Pattern est pour résumer le schéma de conception, en gros des modèles d’interfaces répondant à des cas typiques d’interaction par exemple pour la réalisation d’une page de batch, nous avons tout d’abord la recherche, puis le résultat de la recherche et enfin les actions (supprimer, archiver, mettre en spam…).
La chose importante lorsqu’on conçoit un design avec un ou plusieurs graphistes, c’est l’uniformité, la consistence… “Consistency is the key” par exemple si le bouton d’action “Enregistrer” est de couleur verte, dans les prochaines pages ils doivent rester verte.

Pour ma part, l’UI Design est un facteur important à prendre en charge lorsqu’on visite un site ou une plateforme, l’UI  donne une image de confiance.

Je vous propose sur ce billet une collection de source d’inspiration qui peut être utile, il en existe sûrement d’autres donc n’hésitez pas à me faire partager ;)

#1 UI Patterns

#2 Pattern Tap

#3 La galerie Flickr de Factory Joe

#4 Designingwebinterfaces

#5 Konigi

#6 Yahoo Design Pattern Library

#7 Web Patterns: A UC Berkeley Resource for Building User Interfaces

#8 Webdesignpractices

#9 Ecommr

#10 Quince (requiert Silverlight)

#11 Uidesignpatterns

#12 Uipatternfactory

10 liens sur la typographie

Voici une sélection de 10 liens de mon delicious sur la typographie que j’ai trouvé intéressant de partager (articles de blog, shop online, plateforme de création de typo, site de téléchargement, quizz, vidéos…)

Améliorer l’accessibilité par la typographie est important sur le web et cela fonctionne pour tous les médias (print, web,vidéo…). L’essentiel, c’est que votre texte soit lisible et claire.

#1  ”Web Design is 95% Typography” un article intéressant du site Information Architects

#2  Substraction, le magnifique site de Khoi Vinh, directeur du design au NYTimes. Il utilise à la perfection les règles de la grille typographique.

#3  Dafont qui est l’un des plus gros sites de téléchargement gratuit ( La Foire à Fonts)

#4  Fontfont, la référence pour les typographes. Ce shop on-line propose une grande collection de polices originales ainsi qu’une librairie vraiment importante et contemporaine.

#5  MyFonts, un site américain qui a bientôt 10ans. Il commercialise des polices à télécharger et dispose également d’un catalogue et d’une bibliothèque assez importante. Le site propose une rubrique “What’s the Fonts” qui permet à l’utilisateur d’envoyer une image( jpg,bmp…) et de l’identifier gratuitement au moyen d’un algorithme.

#6  Identifont, un site qui permet d’identifier une police à partir d’une série de questions, d’illustration d’images. Un outil indispensable lorsqu’on cherche la typographie d’une marque, d’une entreprise…

#7  Fontstruct qui est une plateforme en ligne et a pour but de réaliser, partager et télécharger gratuitement sa propre police.

#8  Blueprintcss, un framework (bibliothèque de travail) open source intéressant lorsqu’on veut faire des gabarits de page (spécifier une taille pour les colonnes, typographie…)

#9  ”Arial or Helvetica“, petit quizz marrant à faire au sujet des polices “Arial” et “Helvetica”.

#10  ”Font Conference”, vidéo humoristique au sujet d’une conférence sur la typographie (vue sur Fubiz)

Un nouveau design pour la rentrée

Cela faisait pas mal de temps que je réfléchissais à un nouveau design pour ce blog… L’ancien était certes sobre et efficace mais ne reflétait pas ma personnalité. Il était trop classique à mon goût.

J’ai cherché pas mal d’inspiration à travers le web, les tendances, les couleurs, la typographie pour arriver à ce résultat.

La planche de skate qui est intégrée sur la page, est un peu ce que je suis… Un homme ordinaire qui fait de la planche à roulette (ou qui prend le métro) et qui passe le reste du temps à naviguer sur le web. C’est pour cette raison que vous pouvez observer des autocollants de logo Web2.0 sur le skate (Del.icio.us, Youtube, Last FM, Netvibes…).

Pour le fond de la page, je trouvais qu’il était intéressant de jouer avec le bois. Il s’agit d’une matière intéressante à expérimenter et qui donne un côté sérieux.

J’ai aussi opté pour une mise en page sur 3 colonnes afin de mettre en avant les réseaux sociaux que j’adhère et aussi d’intégrer des vidéos que je trouve intéressante à partager … Bref mon bordel à moi ^_^

Pour conclure, je suis toujours resté sous Wordpress :) et passé à la version 2.6 car j’étais encore sous la 2.1 :(

Last FM nouveau design, nouvelle fonctionnalité

Il y a seulement quelques heures que je viens découvrir que Last FM avait changé de visage. Un joli coup de peinture a été donné à la plus grosse plateforme de site communautaire de musique, la rendant encore plus jeune et branchée dans les deux sens (réseaux sociaux et look).

J’ai découvert Last FM fin septembre 2007 (mieux vaut tard que jamais) grâce à un ancien camarade de promo et depuis je suis devenu fou. Pour ceux qui ne connaissent pas encore Last FM, c’est la référence niveau musical comme YouTube pour la vidéo ou bien Flickr pour la photo et le tout à la sauce 2.0 !

Tous les concerts auxquels j’ai pu assisté dans la capitale cette année. Ce fut à l’aide de cette plateforme grâce à leur rubrique “Concert“. Je n’ai rien à redire sur la radio en streaming concernant la découverte de musique. Last Fm s’occupe de tous pour vous dégottez des groupes qui ont un point commun ou bien une similitude avec le style de musique que vous écoutez.

Et ce soir devant ce nouveau design, je vois qu’un énorme effort a été réalisé au niveau de l’interface graphique, de l’ergonomie et de la navigation.

Un design que je qualifierai de très “light” avec des couleurs froides (blanc, gris, bleu) et des cadres rectilignes donnant un aspect sobre et propre.

Si vous visualisez la plupart des designs tels que facebook, youtube ou flickr… Il n’y a point sur leur page d’effet miroir (de la mort) ou bien des cadres zébrés qui partent dans tous les sens. Ou bien encore dans les images, d’énormes effets d’ombrage qui vont donner l’apparence aux utilisateurs lambdas d’être devant un site web2.0… Bon vous allez me dire que certains aiment et d’autres pas.

Au niveau de l’ergonomie, on retrouve une disposition qui rappelle un peu celui d’un blog avec le contenu principale à gauche et le contenu secondaire à droite. Et oui, notre sens de lecteur est de gauche à droite. Le comportement de l’utilisateur doit être attiré par les différentes zones de la plateforme mais aussi faire le moins d’effort possible visuellement et physiquement. Le fait de basculer la colonne de gauche dans l’ancien design et de le placer à droite dans le nouveau, n’est pas un hasard. La colonne de droite (lecteur flash, à propos de moi, activité recente…) est située juste à coté de la barre de scroll donc moins d’effort de la part de l’utilisateur et donc cela évite de déplacer la souris de droite à gauche si la colonne était à gauche. Tiens en parlant de scroll, vous trouvez pas qu’on scrolle énormément sur LastFM ?

La shoutbox qui était située en haut à droite dans l’ancien design, a été déplacée au centre juste au dessus du footer (pied de page). Elle a donc ainsi gagné énormément au niveau de la largeur et surface de la page contrairement à avant où elle était dans une largeur d’environ de 200px ( je n’ai pas la largeur exacte).

Autre question : Cela ne vous fait-il pas penser au wall (le mur) de facebook :) ?

Sinon, on retrouve les blocs habituels tels que “les morceaux récemment écoutés“, “le top Artistes“, “le top Titres” et tout çà grâce au scrobbler de Last FM et son magnifique plugin.

Au sujet de la colonne de droite, un nouveau lecteur flash apparaît, donnant l’apparence d’avoir un widget pré-installé. Juste en dessous, la rubrique “A propos de moi” affiche la description de votre profil ; vous distinguerez aussi que l’image du profil n’est plus présente. Ce bloc a aussi été déplacé passant de gauche à droite par rapport à l’ancien design.

Sinon, un nouveau bloc fait son apparition avec un look très facebookien, il s’agit des “Activité Récente” et oui c’est le sacré mini-feed de Last FM avec des jolies icônes. Ce mini-feed n’est encore visible que lorsqu’on est connecté à son compte et ne sera rendu public d’ici une dizaine de jours.

Le fameux bloc des “Amis” a changé de dispositions, rangé deux par deux comme à l’école primaire contrairement à l’ancienne disposition où tout était rangé en colonne façon militaire ^^.

Et enfin le bloc “Groupes” dont la nouveauté est l’ajout d’une image devant le groupe que l’on a rejoint. C’est pas beau tout çà ?

En réduisant la fenêtre, vous remarquerez que le design est extensible donc accessible pour des personnes ayant un affichage de 800*600 et tout çà grâce aux feuilles de styles CSS.

Pour conclure à cette nouvelle mise en page de Last FM concernant la page profil d’un utilisateur. J’analyse cela comme une vraie évolution tant au niveau design, ergonomie, fluidité et enfin hiérarchisation de l’information pour une plateforme communautaire de musique.

PS: A part tout çà, la seule chose que je regrette. C’est de ne pas avoir pensé à faire un screenshot de l’ancien design :( J’ai été tellement habitué à cette disposition que j’aurai jamais pensé qu’il allait changer un jour où l’autre leur design et surtout pendant les périodes de vacances…

Webdesign International Festival 2008

La semaine dernière, j’ai reçu un mail d’une demande de confirmation concernant une inscription au WIF 2008 (Festival International de Webdesign). Cet événement se déroule à Limoges dans le Limousin et réunira tous les passionnés du webdesign que ce soit amateur ou professionnel.

Ce festival aura lieu du 17 au 19 avril 2008. Quarante équipes devraient être composé pour s’affronter pendant un marathon de 24heures autour d’un sujet unique.

Le but de cet événement est de favoriser les rencontres et échanges avec les participants. Des conférences sont organisées sur le thème de l’innovation dans le Webdesign et le design interactif. C’est aussi l’occasion de faire des rencontres avec des professionnels, web-agency, éditeurs de logiciels, entreprises, start-up… et une soirée de réseautage est prévu autour du design.

Voilà, je cherche actuellement des personnes pour former une équipe pour la pré-sélection du 18 janvier, si par hasard vous êtes intéressé par cet événement et que vous avez envie de participer au concours, n’hésitez pas à me contacter!

Toutes les informations sur le site du WIF (Webdesign International Festival) : ICI

Création d’un pliage sur Illustrator et Photoshop

Créer un pliage sur Illustrator puis l’exporter dans Photoshop. Je vais vous expliquer comment réaliser un pliage réaliste à l’aide des logiciels Illustrator et Photoshop. Vous avez sûrement dû rencontrer des pliages sur des nombreux sites tels que sur le site de fnac-live.com ou bien sur les icônes de fichiers de Windows Vista. Voici une méthode que j’utilise pour réaliser un pliage, pour cela, vous devez avoir la version CS2 de Photoshop. Tout d’abord, ouvrez un nouveau document sur Adobe Illustrator, vous allez créer un triangle isocèle rectangle. Petit rappel de mathématiques :) un triangle isocèle rectangle est un triangle qui possède un angle droit et deux côtés de même longueur. Petite astuce : utilisez la forme rectangle dans la palette d’outils d’Illustrator. (touche de raccouci [M]), ensuite maintenez la touche [Alt]et [Shift] pour obtenir un carré parfait. Utilisez l’outil «Sélection directe» (touche de raccourci [A]), il s’agit de la flèche blanche qui est placé à côté de la flèche noire, et sélectionnez une partie de la zone de votre carré. Pour l’exemple, prenez la partie en haut à droite de votre carrée. Normalement, vous devez avoir un point noir qui apparaît et 3 points blancs sur le reste du carré. Vous allez supprimez cette zone afin d’obtenir votre triangle.
Pour donner un effet réaliste à votre triangle, sélectionnez l’outil dégradé de couleurs (touche de raccourci [G]). Vous allez lui donner un dégradé de couleur de blanc (#FFF) à gris (#CCC ou #EEE). Affichez les options de dégradé et donnez un angle de direction de 45°. Voilà, vous avez votre pliage réalisé ! Bon maintenant, vous allez me demander pourquoi utiliser Photoshop alors? Pour lui donner encore plus de réalisme à votre pliage.

Ouvez Photoshop, et ouvrez un nouveau document de la taille de votre triangle, puis faîtes glisser votre triangle d’Illustrator sur Photoshop CS2 tout en maintenant votre triangle. Placer votre triangle en haut à droite de votre document puis pixelliser la sélection.

Ensuite faîtes Edition > Transformation > Déformation, l’outil Déformation est une nouveauté du logiciel Adobe Photoshop présent sur la CS2. Elle a la particularité d’adapter une image à un support ou à une forme. Fini les contrôles+T :)! Vous pouvez désormais finaliser votre pliage en lui ajoutant une ombre portée. Voilà, il ne vous reste plus qu’à l’enregistrer selon votre besoin (.gif ou .png). Si par hasard, vous rencontrez quelques problèmes concernant ce tutoriel, n’hésitez pas à me poser des questions.


Copyright © 2007-2009. Tous droits réservés.

Ce blog est propulsé par Wordpress et utilise Blueprint, un thème par VuThéara Kham.