CSS + WordPress + Web Design
bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress
11 Dec
Je voudrais revenir sur l’excellent article : A Brief Rant on the Future of Interaction Design. Allez le lire, il est génial. Puis revenez ici…
L’idée est que nos mains sont capables de 2 choses principalement :
Non mais, allez le lire, vraiment.
La question ici est : qu’est-ce qu’une interface tactile ? Prenons comme exemple, une tablette tactile.
13 Oct
Pour interagir avec notre ordinateur, on utilise le combo inévitable : clavier + souris. Ca fait plus de 25 ans que ça existe et depuis, cette interface basique mais riche et accessible n’a peu ou pas évolué.
Depuis quelques années, des interfaces tacticles ont fait leur apparition dans le grand public. Je pense notamment à l’ordinateur HP avec écran tactile. Et puis il y a aussi l’iPhone qui, malgré son nom, ressemble davantage à un mini pc qu’à un téléphone portable.
D’ailleurs le côté tactile de l’iPhone est excellent, que ce soit au niveau technique qu’à celui de l’interface. Par contre, au niveau bureau, on est loin du compte.
Il y a plusieurs problèmes aux interfaces actuelles :
Graphiquement, et sans que ce soit lié au côté tactile, l’interface basée sur des fenêtres disposées en vrac sur un plan 2D pose problème. Certaines interfaces ont essayé l’approche 3D, sans grand succès.
10/Gui (alias Clayton Miller) propose une solution innovante et claire : écran + tablette tactile (10 doigts) + disposition horizontale des fenêtres (con10uum).
Tout dépend du nombre de doigts utilisés :
Matez ça, c’est magique.
25 Aug
Le processus de création de l’interface d’une application peut passer par de nombreuses itérations. Même si au départ, le résultat était selon moi déjà très satisfaisant, il ne l’était a priori pas pour tout le monde. La vidéo Convert Design Evolution présente l’évolution de l’appli Convert par les excellents tap tap tap (le site est superbe, les applis aussi).
Convert Design Evolution from tap tap tap on Vimeo.
7 Apr
Pour parcourir facilement l’étendue de la Web Trends Map 4, il fallait une interface simple et fonctionnelle : merci Zoomorama.
28 Mar
iPhone Mockup est à l’iPhone ce que Balsamiq est au web : une appli web pour faire des croquis d’interface. (D’ailleurs, Balsamiq inclut depuis peu des éléments d’iPhone).
Attention : l’appli est en version alpha et peut disparaître à tout moment (c’est ce que dit l’auteur 
).
15 Jan
Vous savez sans doute que le bouton de Google “J’ai de la chance” leur coûte $110 millions par an ? Et bien, un autre bouton lui vole la vedette! Je vous présente le bouton qui vaut 300 millions de dollars!
Ca se passe en 2004. Il s’agit d’un redesign très léger dans le processus d’achat d’un site de e-commerce. Les deux acteurs sont Best Buy et Luke Wroblewski (Interface Designer dont le blog est excellent).
Le problème : beaucoup d’internautes ont du mal à finaliser leurs achast à cause du formulaire qui apparaît en début de processus. Ce formulaire consiste en 5 éléments:
Tout le monde avait des problèmes :
Le formulaire, qui était là pour aider les gens (parce qu’il permettait de garder ses infos si on revenait régulièrement), était au final un obstacle à l’achat.
La solution s’est avérée être particulièrement simple (du moins, dans son application) : le bouton “S’inscrire” a été remplacé par un bouton “Continuer” suivi d’un message.
Vous n’avez pas besoin de créer un compte pour faire des achats sur notre site. Cliquez simplement sur “Continuer” pour accéder au paiement. Pour accélérer vos achats futurs, vous pouvez créer un compte pendant le processus de paiement.
BAM! $300 millions de gagnés.
21 Aug
Si vous comptez développer une application pour iPhone et que vous voulez créer des ébauches de l’interface, utilisez donc ce PSD de l’interface de l’iPhone. Quasiment tout y est : boutons, clavier, liste déroulante, barre de progression, liste alphabétique… et bien sûr, l’iPhone lui-même avec plusieurs écrans déjà prédéfinis.
C’est très pratique car on se rend compte au pixel près de l’espace dont l’on dispose. Par exemple, si l’on décide de faire afficher le clavier, quel espace reste-t-il pour l’application ?
Non seulement, ce psd est complet, il est aussi graphiquement très proche de la réalité, et le fait que la plupart des éléments soient en vectoriel est un plus non négligeable. Gardez bien ce lien dans vos favoris car le psd sera régulièrement mis à jour par leurs auteurs.
14 Aug
Parmi les moteurs de recherche spécialisés qui foisonnent sur le web, en voici un qui peut intéresser les web designers : Pdfgeni.com
C’est un moteur de recherche de pdf. Il permet notamment de trouver des E-books (l’équivalent d’un livre en ligne). Il est par conséquent très facile de trouver des documents concernant un domaine particulier. Même si il peut chercher dans n’importe quel domaine, Pdfgeni s’avère très pratique pour fournir des pdf concernant le web. Par exemple on peut chercher :
Ce ne sont ici que 3 exemples pour trouver de très bons documents. Libre à vous de chercher dans d’autres domaines que le web!
16 Jun
MySpace vous connaissez ? Ce site archi populaire qui a fait régresser le web design de plusieurs années, à cause de son code illisible, de son système de fourre-tout indécent et de ses bugs innombrables. MySpace c’est un peu le Skyblog international. Le seul intérêt que je lui trouve c’est de pouvoir facilement uploader ses morceaux de musique et de les partager (ce qu’a fait bon nombre de groupes de musique professionnels). Mis à part ça, comparé à un autre site très populaire de web social (Facebook), MySpace est vraiment une calamité.
Mais MySpace prépare une refonte totale. Au premier coup d’oeil, le design est bien plus sympa. Ok, génial.
Mais là n’est pas le point le plus important. En effet, MySpace s’est associé à Adaptive Path, une boîte spécialisée dans l’expérience utilisateur. C’est eux par exemple qui avaient créé Measure Map, un outil d’analyse de blog. Un peu comme Google Analytics vous me dites ? Vous ne croyez pas si bien dire : Measure Map a rapidement été racheté par Google en 2006, notamment pour son interface claire et intuitive. Bref, un outil très bien pensé par Adapative Path, dont le blog est particulièrement riche en idées.
Ceci me rend confiant dans la direction que veut prendre MySpace, non seulement pour la qualité du web en général, mais aussi en perspective d’un combat rapproché avec son principal concurrent Facebook, qui lui aussi prépare une refonte (moins fonctionnelle que visuelle).
19 Mar
Quelques jours après la sortie de la version beta d’Internet Explorer 8, Mozilla a sorti une version beta de Firefox 3. Qu’en est-il de cette nouvelle version du navigateur favori des web designers ? Quelles sont les nouveautés ? Mais surtout : est-ce que les gros défauts de Firefox 2 (notamment l’utilisation de mémoire) ont été gommés ?
L’interface de Firefox m’a toujours plu, car elle est sobre mais fonctionnelle. La version 3 apporte son lot de nouveautés, plus ou moins intéressantes.
Ca saute aux yeux. Personnellement, j’utilise plutôt le raccourci clavier mais pour les fans de la souris, c’est un détail très pratique, conséquence de l’utilisation plus importante de ce bouton par rapport au bouton “Suivant”.
Sous FF2, elle offrait déjà l’url et le titre de la page. De plus, elle mettait en premier les sites les plus visités. Avec FF3 s’ajoutent la favicon et une icône si elle est dans les favoris, avec en prime un design plus pratique pour bookmarker directement un site.
Elle s’est bien développée. Les favoris seront gérés comme une mini-base de données, avec moteur de recherche, historique, gestion des tags… Les plugins de favoris ne seront plus nécessaires.
C’est le gros point noir de Firefox 2 : il utilise énormément de mémoire, sans compter celle que les plugins utilisent. Les développeurs ont beaucoup travaillés dessus. Stuart Parmenter, un développeur de Mozilla, explique comment ils sont arrivés petit à petit à gagner en performances. Le test consistait à ouvrir 29 pages dans 30 fenêtres, et ceci, 11 fois d’affilée, en fermant au fur et à mesure les fenêtres pour en garder 30 ouvertes à chaque instant. A la fin, une seule fenêtre restait ouverte pour voir si les navigateurs (ici FF2, FF3 Beta et IE7) récupéraient de la mémoire.
On voit que IE7 n’arrive pas à récupérer de la mémoire, même en laissant une seule fenêtre ouverte. Et on voit que le maximum qu’atteint FF3 est moins grand que ce que FF2 obtient au final.
N’oublions pas Safari et l’excellent Opera, qui ont été testés dans cet article et dont résulte ce graphique. Firefox 3 reste le plus performant.
Le Javascript est omniprésent (notamment avec l’AJAX) que ses performances sont primordiales aussi. Là aussi, FF3 est le plus rapide.
Un navigateur se doit aussi de respecter l’internaute, et d’améliorer son expérience.
Ce n’est pas le point faible de FF2 mais mieux vaut prévenir que guérir. FF3 inclura un outil pour avoir directement des informations sur les sites qu’on visite, et aura un outil anti-phishing plus performant.
En tant que web designer, cela nous intéresse. Au test Acid 3 (plus bas dans la page), FF3 s’en sort remarquablement.
Firefox semble devancer largement ses concurrents, et on espère que les plugins seront rapidement mis à jour, parce que c’est pour moi le point fort de Firefox.
MAJ : Safari est lui aussi en phase de beta test mais n’était pas inclus dans les résultats ci-dessus, faute de tests. Plus d’informations dans les commentaires ci-dessous.
