Une prise murale pliante

Vous avez un MacBook Air. Il est très fin et très léger, et donc très facilement transportable. Mais, comme tout portable, la batterie n’est pas assez autonome pour pouvoir se passer du chargeur. Résultat : le volume de transport augmente.

prise-pliante-pourquoi

Min-Kyu Choi, un designer sud-coréen étudiant à Londres, a imaginé et réalisé une solution très pratique : le Folding Plug System.

Je vous conseille de regarder la vidéo explicative.

prise-pliante-comment

Evolution d’un design d’appli iPhone

evolution-design-iphone

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.

bbxcandy : un fond d’écran iPhone

J’en avais marre de mon ancien fond iPhone, trop sombre à la longue. Je me suis dit « Allons-y à fond les couleurs! ». Le résultat me plaisait sur mon écran de PC mais le résultat sur iPhone m’a déçu. Peut-être un problème de qualité d’image (je l’ai récupérée en me l’envoyant sur GMail).

Comment vous faites pour installer un fond d’écran iPhone à partir d’un fichier ?

bbxcandy

Typedia : l’encyclopédie des polices

typedia-encyclopedie-polices

Fan de typographie ? Vous voulez en savoir davantage sur vos polices préférées ? Qui a réalisé cette police ? Quelle est son histoire ? Son designer ? Et quel est le vocabulaire pour les typos ? Autant de questions auxquelles essaye de répondre le très joli site Typedia.
Lire la suite

Ikea choisit Verdana

La firme suédoise IKEA, connue pour son pragmatisme et sa communication, va changer la police de son catalogue :  elle passe de Futura à Verdana.

ikea-verdana

Verdana, une police pour les écrans

Même si la typographie ne se résume pas au choix d’une police, il faut savoir que Verdana est une police réalisée pour être lisible sur petits écrans (vous testerez l’Arial en 9px bold, puis le Verdana, y a pas photo). Donc, elle est avant tout faite pour le web et pas le print.

Où est l’originalité ?

Tout internaute quasiment connaît Verdana, ou l’a déjà vue du moins. Quelle idée de l’utiliser comme vecteur de la marque ? Parce que le catalogue IKEA, tout le monde le connaît aussi (car présent dans chaque table basse française…).

Et puis, je sais pas mais je suis très fan de la police remplacée : Futura.

police-ikea

Si vous voulez, il y a même une pétition disponible.

Moteur multi-recherche Google, Wikipedia, YouTube et Twitter

Même si la home page de Google est brevetée, y en a qui s’amusent à faire leur propre version. Comme les gars de chez Infinise Design qui ont fait une version super light de Google, en incluant aussi Wikipedia, YouTube et Twitter dans le moteur de recherche.

redesign-google

recherche-wikipedia

recherche-youtube

recherche-twitter

10/GUI : le futur de l’interface tactile de bureau

10-gui-interface-tactile-futur
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é.

Interface tactile : bureau versus mobile

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.

Problèmes physiques des interfaces tactiles de bureau

Il y a plusieurs problèmes aux interfaces actuelles :

  • avoir à tendre le bras en continu pour utiliser l’écran face à nous
  • garder la tête penchée en bas pour utiliser un écran posé sur la table
  • les mains masquent l’écran

Problèmes de l’interface graphique

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.

On fait comment alors ?

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 :

  • 1 doigt : action dans l’application locale
  • 2 doigts : scroll et zoom
  • 3 doigts : bouger et redimensionner les fenêtres
  • 4 doigts : scroll et zoom de l’espace entier

Matez ça, c’est magique.

10/GUI from C. Miller on Vimeo.

Le HTML 5 en 1998

« It’s not the language you use ; it’s what you do with it. »

Le HTML 5 se popularise. Ok. Mais même avec un code propre et valide dans un langage novateur, tout le monde est libre d’y appliquer le design qu’il veut.
html5-1998

Cube 02 : une police cubique

Sur Fontfabric, une police où tout part d’un simple cube : Cube 02.

police-cubique

Via SimpleBits

La refonte perpétuelle

Le web est un média en mouvement continu. Comme chaque web designer qui se respecte, je fais ma veille régulière et relativement abondante, qu’il s’agisse de graphisme, de connaissances, d’astuces de code, de design, de tendances, d’outils, d’acteurs du web. Avec toute cette masse d’information, textuelle et visuelle, j’ai sans cesse envie d’intégrer de nouvelles idées graphiques et techniques dans ce blog, et je commence souvent des thèmes wordpress sans les terminer au final.

Le dernier en date, débuté il y a 2 mois déjà, s’appelle bbxjulie (en référence au morceau « Julie with… » de Brian Eno). J’y ai beaucoup bossé, je l’ai fignolé et je l’ai même intégré en thème wordpress. La seule qui manque est la page portfolio (une Page WP custom que j’ai pas pris le temps de faire). D’ailleurs, vous pouvez voir sur ce blog le thème bbxjulie.

Lorsque je l’ai commencé, j’étais très enthousiaste et plutôt content du rendu. C’est un des rares thèmes que je n’ai pas laissé tomber au bout de 3 jours, et je me disais qu’il allait être très complet et surtout : qu’il allait durer. Mais au final, même en y ayant passé beaucoup de temps, il ne me plaît pas. Je sais pas pourquoi. Plusieurs éléments me plaisent, notamment la sidebar avec les vignettes du portfolio et le champ de recherche. Mais c’est tout.

Pourquoi une refonte ?

La réponse que je me donne à cette question est très simple : je n’aime plus mon thème actuel. Il est ennuyeux et loin d’être ce que je voulais qu’il soit. Et l’intégration de nouveaux outils implique selon moi une refonte graphique.

Pourquoi ça bloque ?

Le manque d’inspiration, c’est évident. Mais surtout, le flou dans l’identité que je veux donner à ce blog. Ca doit être lié au rôle de ce blog.
Mais d’ailleurs, il me sert à quoi ce blog ? A parler, réponse évidente.
Mais de quoi ? De web design, de jeux vidéo, d’humour, de musique, de multimédia, de technologie, de code.
De moi ? Oui et non. Oui parce que l’intérêt principal d’un blog et la subjectivité affichée de l’auteur. Non parce que je ne parle pas de moi directement.
Quoiqu’il en soit, je me suis toujours refusé à essayer d’établir une charte éditoriale. Sans doute parce qu’il n’y en avait pas au départ et qu’il est compliqué d’en définir une en cours de route.

Résultat : ce blog est en roue libre depuis quelques temps, une sorte de hérisson à la dérive qui s’affiche et se manifeste lorsqu’il ne s’amuse pas à traverser des tunnels.

bbxwall : mon 7ème thème WordPress


Avant d’arriver à mon 5e thème, bbxwall, et quelques semaines après avoir jeté aux oubliettes le thème bbxjulie (du nom d’un morceau de Brian Eno), je suis passé par pas mal de thèmes depuis 2 ans et demi.
Lire la suite

Refonte et thème tumblr pour Waker

Waker, c’est un site de bêtises trop fréquentes et trop futiles pour être postées ici.

Au départ, c’était un WordPress avec un thème pas trop travaillé, mais j’aimais bien la palette de couleurs. Et puis je me suis rendu compte que poster avec WordPress était trop contraignant, car trop long. Même avec le bookmarklet Press This, poster un simple lien ou une photo prenait trop de temps.

Résultat : je prends un tumblr tout simplement. Le bookmarklet est très efficace : il récupère facilement les photos ou la vidéo de la page où l’on est, et l’upload est direct. Au début, j’ai pris mon thème bbxtumblr, mais il manquait d’identité pour Waker.

Donc, j’en ai fait un autre.

Thème Tumblr Waker

Navigation au clavier

La grande particularité est d’avoir intégré grâce à une lib JavaScript, la navigation au clavier comme pour Google Reader ou FFFFOUND, c’est à dire la touche « J » pour suivant et « K » pour précédent, sachant qu’elle gère aussi la pagination dès que vous arrivez en haut ou en bas de la page.

Et si vous voulez savoir pourquoi ça s’appelle « Waker », et bien voilà pourquoi.

Ambilight en HTML 5

Vous connaissez la technologie Ambilight de Philips ? Bon. Imaginez ça dans votre navigateur.

Ambilight en HTML 5

Si vous avez aimé le Sublime Video, vous aimerez l’Ambilight en HTML5 (qui reprend d’ailleurs la même vidéo).
Par contre, j’ai pas trop compris les explications en russe

(via Beautiful Pixels)

allRGB : des images avec 16 millions de couleurs

Vous connaissez les écrans qui affichent + de 16 millions de couleurs ? Bon. Ben là c’est pas des écrans mais des images de 16 millions de couleurs. Et plus précisément : 16 777 216 couleurs. Autrement dit : TOUTES les couleurs disponibles en RGB (où chaque couleur, je le rappelle, correspond à l’addition de trois longueurs d’ondes pour chacune des trois couleurs Rouge, Vert, Bleu pour lesquelles il existe 256 longeurs d’onde chacune). Et ça donne allRGB.

Si vous avez du temps et des compétences en création d’algorithmes

CSS Naked Day!

Aujourd’hui c’est le CSS Naked Day! Virez votre CSS et montrez nous votre code HTML pour voir si il est beau! Bon, j’ai raté les éditions précédentes. Mais avec mon nouveau thème, je voulais tenter le coup!

CSS Naked Day ? Kesako ?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

On April 9th, simply remove all CSS from your website, stripping it entirely of its design.

Le site sera sans CSS pendant 48 heures. En effet, c’est le 9 avril international, c’est à dire, à n’importe quelle endroit sur terre, pour n’importe quel fuseau horaire.

Refonte de Task This, site d’une appli iPhone

Vous connaissez tous ces sites d’appli iPhone ? Depuis 2 ans, c’est devenu une tendance, une catégorie à part dans les designs de site. Personnellement, je les trouve très créatifs, modernes et pertinents. Et je m’en inspire pas mal, comme par exemple dans cette liste de 40 sites d’appli. Malheureusement, je n’ai jamais eu l’occasion de bosser sur un tel site.

C’est pourquoi j’ai forcé le destin. En découvrant Task This, une appli française gratuite de gestion de taches, j’ai tout de suite eu envie de proposer mes services pour faire la refonte. Lire la suite

Lancement de DDDSGN, un site d’inspiration web design

Tumblr c’est magnifique. C’est très facile à utiliser, que ce soit pour poster des images, des liens, des vidéos… C’est un gros aggrégateur de tout et n’importe quoi, on a pas besoin de se soucier de l’hébergement, on peut utiliser son propre nom de domaine, il y a pas mal de services intégrés (Twitter, Feedburner entre autres) et surtout : créer un thème Tumblr est un jeu d’enfant!

Avec cette facilité pour poster tout ce que je veux (et vite!), et un système de template vraiment simple, je me suis dit que j’allais lancer mon petit site d’inspiration en web design, qui regroupera pleins de sites et d’éléments de sites (formulaires, headers, icônes…) : DDDSGN.

Pourquoi « DDDSGN » ?

Je voulais un nom court, simple et fun. Il fait bien évidemment référence à ffffound.

Pourquoi c’est tout noir et blanc ?

J’ai testé beaucoup de couleurs et de palettes de couleurs pour des designs parfois sympas mais qui ne mettaient pas assez le contenu en valeur. Avec un site en fond blanc et le texte en nuances de gris, les couleurs des images ressortent très bien! D’ailleurs, il n’y a aucune image appelée par la CSS. C’est que de la typographie et des couleurs. Plus simple à entretenir, tiens.

Je vous invite à visiter le site et pourquoi pas à vous y abonner !

[Portfolio] Australie Trip : un carnet de voyage 2.0

Mon amie Corine voulait partir en Australie pour 1 an. Désireuse de découvrir de nouveaux paysages et vivre de nouvelles expériences, tout en améliorant son niveau d’anglais, elle voulait raconter au fur et à mesure des kilomètres parcourus son voyage à travers le pays. Il lui fallait donc un blog : Australie Trip.

Si vous êtes friands de paysages arides, de reptiles sauvages ou encore de culture aborigène, abonnez-vous au flux RSS !

Yeek : le site pour trouver des cadeaux originaux

Eh oui, Noël, c’est déjà dans moins d’un mois. Et si comme tous les ans vous n’avez aucune idée de ce que vous voulez/pouvez offrir, voici le site qu’il vous faut.

Yeek recense plus d’une centaine de cadeaux geek et design qui alimenteront sans doute vos idées. En plus, le design et l’intégration sont faits par moi, c’est dire si ça vaut le coup d’aller voir.

Lire la suite

Les interfaces tactiles ne le sont pas

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 :

  1. Ressentir : la chaleur, le poids, la répartition, la matière…
  2. Manipuler : avec puissance, avec précision, en soulevant, en ciseaux

Non mais, allez le lire, vraiment.

La question ici est : qu’est-ce qu’une interface tactile ? Prenons comme exemple, une tablette tactile.

Lire la suite

White Beacon : un nouveau thème WordPress

Lundi soir, un désir, une vision.

J’aimais beaucoup mon thème précédent, bbxwall. Mais il commençait à peser. Visuellement et sur mon serveur. Il m’en fallait un plus léger, pour focaliser l’attention sur le contenu, et décharger mon serveur d’un souci perpétuel.

Lire la suite

Bamboo Stylus

Ma nouvelle prise de note numérique.

L’Equipe se paye une refonte correcte

La meilleure feature issue de la refonte de L’Equipe.fr.

Les commentaires étaient une usine à gaz innommable : du contenu illisible par des internautes inintelligibles, et un pseudo-formulaire en JavaScript.
Maintenant, la possibilité de noter les commentaires offrent aux (quelques) visiteurs intelligents la faculté d’être mis en valeur et de décrocher le précieux sésame, à savoir : être lu par bbx.

2 nouvelles fonctionnalités sur bbxdesign

Depuis que mon thème est en réalité un Tumblr déguisé, j’essaye de l’alléger encore plus. J’ai au passage laissé tomber mon responsive design, trop mal implémenté de ma part.

Lire la suite

Le premier design de Google Calendar

La perfection au niveau des couleurs, du contraste, de l’espacement, de la hiérarchie, de l’équilibre.

Bon sang, je ne peux m’empêcher de regretter le passé ce coup ci.