LE DEBUGGER's blog - Design

La patch circulaire, la dernière tendance en design graphique

Mox Folder — Fri, 20 Jun 2008 16:17:00 -0400

Le design graphique comme beaucoup d'autres choses a toujours été une histoire de modes et de tendances. Récemment il y a eu l'effet miroir vertical qu'on voyait auparavant principalement dans le domaine du luxe et qui aujourd'hui s'est généralisé dans la pub et même au delà (Apple a intrégré cet effet miroir à iTunes, iLife puis ensuite OSX), y a aussi les reflets en général qu'on retrouve sur les boutons d'interfaces web ou encore les produits électroniques dans la pub toujours (TV, écrans de téléphone mobile, etc) ... on parlera parfois de design 2.0, mais je pense que ce qu'on appelle vulgairement design à la 2.0 n'est que la partie visible (et caricaturale) d'une tendance globale et généralisée.

Bref, si vous voulez donc être tendance il semble que le nouvel élément graphique à la mode soit un patch rond avec une partie retournée, un revers. Exemples concrets ci-dessous trouvés sur : un site web anglais de vente de vêtements, un prospectus pubicitaire d'un magasin d'électronique canadien pour la fête des pères (La Source, le Radio Shack local) et un magazine (papier) américain (Entertainment Weekly) .

Notez que ces trois exemples assez différents ont tous la particularité d'être bien exécutés et plutôt soignés : dégradés, transparence, ombres... c'est de la belle ouvrage, rien n'est laissé au hasard.

Si vous en trouvez d'autres, n'hésitez pas à me le faire savoir par commentaire.

Voyage SNCF, le nouveau site

Mox Folder — Wed, 14 May 2008 10:23:00 -0400

Si vous vous demandez pourquoi et comment une entreprise de ce calibre, Voyage-SNCF - l'un des, si ce n'est LE 1er voyagiste français - peut pondre un lifting de son site web aussi mal fagoté et, à priori, aussi peu professionnel j'ai ma petite idée sur la question :

Le poid de l'administration et tout ce que ça implique.

Je ne vois pas d'autres explications, l'administration est une plaie en entreprise, surtant dans les grandes. Voir captures d'écrans chez Roycod et LSD.

(En exemple parmi d'autres: pourquoi conserver des onglets à coins arrondis mal exécutes plutôt que de choisir des coins carrés ? Je veux dire, arrondis ou pas peu importe, si le graphiste ne connait pas suffisement Photoshop, soit, ça peut arriver rien de dramatique à ça, mais ça prend pas la science infuse pour décider de mettre des bords carrés).

Pomme Z

Mox Folder — Wed, 30 Apr 2008 13:11:00 -0400

On aime tous les références hyper pointues, c’est toujours flatteur de les reconnaitre. Par exemple, ces visuels ci-dessous : je sais que seul moi et une poignée d’autres personnes sur terre pouvons comprendre le message au premier coup d'œil. On se sent supérieur, comme si on faisait partie d’une élite.

Visuels de Atmostheory via Swissmiss.

60 solutions AJAX pour égayer vos sites

Mox Folder — Tue, 15 Apr 2008 18:00:00 -0400

J'adore les compils de Smashing Magazine, elles se révèlent souvent être d'excellentes ressources. Ici ils ont compilés plus de 60 techniques basées sur AJAX, voici ce que j'en retiens et/ou ce que j'aimerais bien pouvoir intégrer sur ce blog pour le prochain design :

Pop up Bubble : comme son nom l'indique ;
Pour des diaporamas de photos attrayants iCarousel et Carousel, voir aussi Mini Showcase ... dans le même genre y a aussi Product Slider qui reproduit le menu des produits du site Apple et, toujours d'inspiration Apple, qGallery affiche des images à la manière d'iPhoto ou encore un badge Flickr dynamique ;
Présentations par slides avec transitions : Oversized Sliding Tabs et Accessible News Slider ;
Des menus animés : Mootools animated sidebar menu et 13 menus plus ou moins intéressants ;
Tableau : Tablecloth surligne la colonne et la ligne d'une cellule pour laquelle on passe la souris dessus ;
Starbox vous permet d'ajouter un système de notation ;
Input text : à la Facebook, ou pas ;
So 2.0 ... un pop-up surgit au centre avec un formulaire à remplir tandis que le reste de la page s'assombrit : Modal Box ;
Accordion permet d'afficher ou masquer des éléments avec un effet accordéon, j'aimerais bien utiliser un système proche pour afficher les articles lorsqu'on clic sur un titre.

Diaporama en Flash

Mox Folder — Tue, 15 Apr 2008 06:00:00 -0400

On trouve sur le web des tas de diaporamas en Flash tous plus ou moins élaborés. Sur son site Felix Turner propose toute une panoplie de diaporamas libres d'utilisation, je vous invite à l'explorer et découvrir ses différents travaux, en particulier l'impressionnant Flickr Related Tag Browser qui offre une interface originale pour rechercher des photos Flickr par tags. Voir aussi Simple Viewer, excellent pour présenter des portfolios.

Felix Turner a aussi collaboré au site Vuvox, qui permet entre autre grâce à Vuvox Express de créer des diaporama graphiquement attrayants très simplement à partir de comptes Flickr, Piccasa ou encore de simples flux RSS, voir ci-dessous pour un exemple :

Les CSS par l'exemple

Mox Folder — Thu, 10 Apr 2008 06:00:00 -0400

Dans mon entourage professionnel, des graphistes print totalement étrangers au design web me demandent régulièrement de leur expliquer brièvement comment créer des pages web, c'est quoi le HTML, etc. La question qui revient le plus souvent c'est de savoir si avec Dreamweaver on peut créer un site Internet sans connaitre le HTML. Là, ma réponse est systématiquement la même : Oubliez Dreamweaver !!!. En effet le logiciel de feu-Macromedia est devenu une telle usine à gaz, que si on veut apprendre à faire du web c'est sûrement pas par là qu'il faut commencer. Un graphiste pense souvent à tort que s'il maitriste Quark X-Press ou InDesign sur le bout des ongles, il peut donc se familiariser en quelques heures avec Dreamweaver et arriver à produire des page web.

Alors, oui il y arrivera sûrement avec un peu de détermination - après tout un logiciel reste un logiciel. Cependant je ne pense pas que ce soit la bonne solution.

Back to Basics

Comme pour tout, il faut revenir aux basics, on ne se met pas à résoudre des équations si on ne connaît pas les principes élémentaires d'algèbre. La plupart des graphistes print voudraient résoudre leur équation sans même apprendre à compter, la première vérité c'est qu'il ne veulent pas mettre les mains dans le cambouis... tellement habitués qu'ils sont au confort de leur interface WYSIWYG... alors que dans le fond il y a peu de différence entre une page Quark X-Press et un fichier HTML. La seconde vérité c'est que ÉNORMÉMENT de graphistes ont trop peu de méthodologie, genre les feuilles de style j'en ai entendu parler, je sais ce que c'est, je sais que c'est utile mais je m'en sers jamais, pire ... je ne sais pas m'en servir.

Parti de là, on comprend bien vite que parler à un ~~artiste~~ graphiste de balisage de texte ça va vite le barber. Pourtant, qu'on face de la PAO (avec X-Press ou InDesign), du traitement de texte (avec Word), ou encore qu'on face du HTML on fait tous du balisage de texte. Quand je slectionne un mot (au passage je vous rappelle des raccourcis bien pratiques ;o) et que je clique sur B pour le mettre en Bold je fais du balisage de texte, de même que lorsque j'enveloppe un mot d'une d'une balise <strong>.

CSS

Ce qu'il faut donc retenir de cette longue mais nécessaire introduction c'est qu'une page HTML n'est plus ni moins qu'un agencement d'éléments dans un page. Sur X-Press ou InDesign on agencera sa page par boites (box) alors qu'en HTML agencera sa page par balises. Dans les 2 cas on stylisera sa page grâce et des feuilles des style.

En HTML, les feuilles sont ce qu'on appelle CSS pour Cascading Style Sheet et ce qui est vraiment tripant par rapport à de la mise en page traditionnelle (traitement de texte ou PAO) c'est que c'est beaucoup plus puissant. Alors que dans les logiciels de mise en page traditionnels les feuilles de style n'agissent que sur le texte (ou presque). En HTML avec les CSS on peut paramétrer tous les éléments qui servent de balise, que ce soit un <DIV> (l'équivalent d'une boite) ou un <EM> (l'équivalent de l'italique - pour qui par exemple on peut attribuer un autre style que l'italique pour les esprits les plus tordus).

Bref tout ça c'est bien théorique, en fait plutôt que tout ce blabla j'aurais bien pu me contenter de ces derniers mots. Je vais donc conclure par un exemple des plus parlant, avec une représentation de diagrammes uniquement en CSS et HTML. Sur l'image ci dessous à gauche, la mise en page en HTML sans style, à droite la même mis en page HTML avec les styles appliqués.

Voir le code associé et toute l'explication sur le blog de l'auteur de cette démonstration.

L'histoire du Mal

Mox Folder — Sat, 23 Feb 2008 13:40:00 -0500

Sympathique documentaire animé sur l'histoire du Mal, de la Grèce ancienne à nos jours, dans nos civilisation occidentales.

Citation de l'auteur qu'on peut trouver sur sa page Youtube de la vidéo:

The film was intended to show what people have believed in and pointed to as evil throughout history. It was meant to get you to think about what evil really is. It is meant to show that when we get too obsessed with "evil" we might end up taking part in it ourselves.

Revue web, spéciale DESIGN

Mox Folder — Sun, 10 Feb 2008 06:00:00 -0500

Je laisse tomber mes revues web hebdo, la régularité étant trop contraignante je préfère faire des revues du web par thèmes lorsque j'ai assez de contenu. Ça permet de revenir sur des articles ou des news qui datent aussi. Cette revue est consacrée au design.

Typographie

J'avais déjà parlé du film Helvetica rendant hommage au créateur de la fonte du même nom, en septembre dernièr Écran.fr revenait sur le film et la fonte à l'occasion d'une exposition chez Collette. L'Helvetica en quelques mots :

Elle est l’amie des entreprises, de toutes les entreprises : Toyota, Tupper ware, Lufthansa, Muji, Nestlé, Orange, ou American Apparel. Et la chouchoute des administrations. Tous aiment sa neutralité, son efficacité, sa transparence. Son côté rassurant et un poil autoritaire. C’est elle qui dit ce qu’on a le droit de faire ou pas dans la rue : « Ne pas jeter ! », « Tirez », « Poussez », « Interdit de se garer », « Défense d’afficher » ; mais elle aussi qui nous guide dans le métro new-yorkais.

En octobre dernier SimpleBits nous apprenait que Webkit (le moteur de rendu de Safari) supporte désormais la balise CSS @font-face qui permet à l'utilisateur de télécharger la fonte spécifiée par le web-designer. Ainsi on n'est plus limité aux polices sytèmes (soit Arial, Trebuchet, Verdana, Times;o), et ça tombe bien puisque SimpleBits conçoit et vend des polices de caractère dont DingBit. Espérons une généralisation proche sur tous les navigateurs. Pour ceux qui ça intéresseraient, j'ai trouvé sur cette page de mozilla un exemple de CSS :

@font-face {
  font-family: nom-de-police-distante;
  src: uri;
}

Tester les caractères spéciaux d'une fonte parmi les fontes système Mac et PC, via Swissmis ;
A Dialogue With Public Space, Robin Howie joue avec la typograhique dans un contexte urbain, ça rappelle certains travaux d'Antoine Bardou-Jacquet (Noos vous vous souvenez ?) ;
Présidentielle US, que disent les fontes des affiches des candidats ?

Web design

Dan Cederholm de SimpleBits faisait remarquer que le site d'Ikea bénéficie d'une mise en page élastique. En clair, la mise en page s'adapte autoutomatiquement en fonction de la taille de la fonte sans déformer la maquette. Allez sur le site d'Ikea, pour tester faites pomme + plusieurs fois ou ctrl + si vous êtes sur PC (pomme 0 et ctrl 0 pour revenir à la taille de police par défaut) . Essayer avec d'autres sites, vous verrez que souvent la mise en page ne supporte pas le changement de la taille de fonte. Dan Cederholm est l'auteur du livre Bulletprooff Web Design, une introduction au design Web dans lequel il définit son concept qu'il nomme bulletproof (à l'épreuve des balles en français). Cet exemple avec Ikea illustre parfaitement ce concept.

Général

Un ouvrage comprenant 500 grilles et feuille de style prêtes à l'emploi ;
10 Ways To Get Design Approval : Je retiendrai particulièrement le 4 - Avoid multiple concepts - qui, il est vrai, est contre-productif en plus d'ouvrir la porte grande ouverte à des absurdités... It is common for a client to request one element from one design and another from the second. As any designer knows this seldom works ... et là n'importe quel designer se reconnaîtra dans ces mots ;o) ;
Le meilleur des tutoriaux Illustrator par Smashing Magazine ;
10 idées pour un design web pertinent, toujours via Smashing Magazine ;
Yang Liu, étudiante chinoise à transcrit sous forme graphique les différences de culture entre les allemands et les chinois, via Fubiz.

Yahoo Design Pattern Library

Mox Folder — Fri, 08 Feb 2008 08:08:00 -0500

Alors que je lisais un énième article sur les prévisions de rachat de Yahoo par Microsoft (Design Couldn’t Save Yahoo), je tombe sur un lien vers la page Yahoo Design Pattern Library...

...ou comment Yahoo tente d'évangéliser les internautes et la communauté de designers web en prêchant le bonne parole. C'est évidemment une très bonne source et une très bonne initiative de la part de Yahoo et il n'est finalement pas surprenant que Flickr soit tombé entre leurs mains. Au delà de ça, la vraie question serait plutôt : Could design (comprendre Yahoo) save Microsoft ?, en fait la vraie crainte serait de voir Microsoft saloper les différents services de Yahoo... Quand on voit la gueule de Vista et de leur Live Space y a effectivement de quoi avoir peur.

CommandShift3, votez pour le meilleur site web

Mox Folder — Wed, 30 Jan 2008 17:13:00 -0500

Voilà un site typiquement web 2.0, très bien fait avec un joli design. Reprenant le principe des sites de battle de photos de pin-up dans lesquels ont doit voter pour celle qu'on trouve la mieux, ici il faut voter pour le design de site qui nous attire le plus...

Et je dois bien avouer qu'avec prés de 40% de victoires, je suis un peu déçus de mon ranking, je suis dans la petite moyenne quoi. À voir comment ça évoluera avec le temps, mais ça semble baisser de jours jours :o(...

Vous pouvez ajouter vos propres sites et vous aurez droit en prime à des messages vidéos de personnalités du design web. Accessoirement ce site est aussi une très bonne source d'inspiration pour les designers, relever les tendances, etc.

Stop Motion

Mox Folder — Sun, 27 Jan 2008 19:50:00 -0500

Le Stop Motion est une technique d'animation qui permet de créer une animation à partir de photos dont le sujet est fixe. Les exemples les plus connus sont les animations réalisées avec de la pâte à modeler comme les films de Wallace et Gromit. Le stop motion ~~est~~ était aussi parfois utilisé pour les effets spéciaux au cinéma (voir les films de Ray Harryhausen, ou encore Robocop de Paul Verhoeven avec l'ED-209). Personnellement je pense qu'on peut aussi considérer la technique du bullet time comme une variante du stop motion (l'idée étant toujours de prendre un sujet en photo et de créer une animation à partir de ces photos mises bout à bout). Le bullet time a été popularisé et baptisé grâce au film Matrix mais existait déjà bien avant.

La vidéo ci-dessous a été réalisée uniquement avec des polaroids instantanés et repousse assez loin des limites du procédé, on imagine même pas le travail et la patience pour arriver à un tel résultat :

Process Enacted de Jordan C Greenhalgh, voir le site officiel.

Mr Plus

Mox Folder — Mon, 03 Dec 2007 08:00:00 -0500

Je ne peux pas m'empêcher de vous faire découvrir La Quadrature, blog d'un illutrateur à l'univers très particulier dont la planche ci-dessous tirée de la série intitulée Mr Plus donne le ton...

... Évidemment vous aurez tous reconnu qui est Mr Plus.

Se débarrasser d'Office une bonne fois pour toutes

Mox Folder — Sun, 02 Dec 2007 11:16:00 -0500

Depuis que je possède mon Mac Book, c'est à dire que je suis passé sur Mac Intel et que j'ai définitivement tiré un trait sur Windows et le PC, je n'utilise plus la suite Office de Microsoft à la maison. Mieux : je ne l'ai même pas installé (en fait je l'ai viré de mon Mac puisque Apple le fourni en version de démo).

Avant, les premiers logiciels que j'installais c'était la suite Office, mais on va pas se voiler la face hein, comme la plupart des gens je n'ai jamais acheté Office, ni même un de ses composants les plus couramment utilisés, Word ou Excel. J'ai bien tenté d'essayer les solutions open source genre Open Office, ou Neo Office, mais je dois dire que c'est toujours assez frustrant : certes c'est gratuit (ou très peu cher, ça dépend si on donne ou pas), certes ils sont à priori très semblables à la suite de Microsoft mais néanmoins l'interface, l'ergonomie et les fonctions diffèrent, sans compter les problèmes d'interprétation des .doc. Pour mon utilisation personnelle je donc suis parti d'une logique simple : Quitte à changé de logiciels et d'habitudes autant y aller carrément.

L'année dernière, j'avais besoin de refaire mon CV et il se trouve qu'en plus d'installer une démo d'Office, Apple installe aussi une démo d'iWorks sur ses machines. C'est ainsi que j'ai refait intégralement mon CV avec Pages. Dès les premières minutes j'ai été bluffé par la simplicité et la puissance du traitement de texte d'Apple (gestion des transparences et des ombres par exemple), il ne faut en effet que quelques heures pour le maîtriser (on en fait vite le tour aussi mais l'essentiel des fonctions sont bel et bien là).

Lors de la dernière mise à jour d'iWorks, Apple y a inclut un tableur. Même si Pages était capable de gérer des tableaux de données, pouvoir bénéficier d'un tableur est appréciable. iWork '08 est finalement composé de trois logiciels:

Traitement de texte et mise en page : Pages '08 ;
Tableur : Numbers '08 ;
Présentation : Keynote '08.

Je vous invite à aller faire un tour sur la page iWork du site d'Apple pour découvrir cette suite plus en profondeur, pour moins de 100€, vous avez une suite logicielle complète et relativement puissante. Je viens de découvrir aussi le site iWorkCommunity.com pour échanger des templates.

Il y aussi la solution Google Docs mais je préfère y avoir recours ponctuellement, d'autant que les fonctions sont quand même bien limitées (je ferais pas mon CV dessus par exemple).

Branlette intellectuelle

Mox Folder — Thu, 29 Nov 2007 19:43:00 -0500

Ce qu'il y a de génial avec une photo c'est qu'on peut lui faire dire tout et n'importe quoi, tout dépend de l'interprétation qu'on en fait. Et ce qu'il y a d'encore plus génial c'est que tout le monde peut se livrer à cet exercice pour le moins subjectif... même le dernier des crétins.

Ainsi, là où moi je ne vois que 2 hommes qui discutent entre eux - l'un exposant vivement ses arguments, l'autre écoutant avec le sérieux qu'on lui connaît et les yeux grands ouverts - David Abiker sur le site d'ASI y voit un dialogue qui s'établit mal. Certes il y a l'opposition bleu républicain/rouge révolutionnaire, mais de là à parler de début de coup de poing et sourcil sceptique il y a un pas... que seule une interprétation subjective permet de franchir.

... Enfin ça c'est pas le pire, c'est une interprétation que je peux comprendre. Le pire comme souvent vient dans les commentaires :

Cette photo (montage ou non, peu importe) n'est faite que de contradictions. Rien de rassurant...

Rien que ça ! Moi je dirai même plus, cette photo est terrifiante... On aime bien s'amuser à se faire peur, et vous verrez en bas de note qu'on peut aller très loin comme ça. Dans un genre similaire, on a aussi le sympathisant du parti énervé et de mauvaise fois :

Pourquoi cette photo est-elle dangeureuse? Car elle n'est faite que de clichés (désolé pour le jeu de mots). C'est tellement facile de montrer une personne en colère, habillée de rouge et de la faire passer pour un "syndicaliste énervé"! Alors que rien ici ne le prouve!

Euh, quand même, quand on fait grève c'est qu'on est un minimum énervé non ? Et puis syndicaliste énervé me parait être un doux euphémisme (c'est pas une critique hein mais un constat, je considère pas ça comme une tare d'être énervé bien au contraire !).

Et puis il y a les éternels perplexes adeptes de la théorie du complot qui jureraient que rien ne s'est écrasé le 11 septembre, c'est peut être finalement les commentaires les plus intéressants :

cette photo est-elle réelle? On dirait un montage : les deux visages ne se parlent pas, les yeux ne regardent pas dans la même direction....

Enfin il y a ceux qui savent :

Car il est évident qu'il s'agit d'un photo-montage et que ces deux personnes ne se sont (sûrement) jamais retrouvées face à face: On voit clairement que ces deux regards ne se croisent pas, et que le manifestant est sur un plan légèrement plus reculé que celui de Sarkozy (regardez celui qui est censé se trouver derrière Sarkozy et qui est si flou...).

Il y a aussi ceux qui savent plus que ceux qui savent, les intégristes de l'art qui sont les seuls à pouvoir parler de l'œuvre parce que eux connaissent Ali Arif :

Mais c'est pas une photographie d'auteur ou une photographie d'art!!! Retournez voir Ali Arif, si vous ne voyez pas la différence... Ici le sujet est identifié, et à part le sourcil et la main, non intentionnels question vision du photographe, on n'a pas grand chose à se mettre sous l'oeil. Donc signée ou pas, quelle importance, des dizaines de photographes ont fait la même. C'est une photo qui prend la tangente du gros titre du nouvel obs, et qui prend la tangente de toute intention d'auteur. Je ne crois pas une minute que le photographe ait eu le choix d'autre chose que ce face à face de rupture au moment où il a appuyé sur la détente...

Heureusement il y a toujours les petits malins qui viennent nous rappeler que tout ça n'est que du spectacle et de la représentation :

Sarkozy se chope lui-même par le col, pour faire croire qu'il est agressé...quel manipulateur!

On peut définitivement tout faire dire à une photo, même - et peut-être surtout - la plus banale. Certains vont même parfois très loin dans leurs élucubrations, pour vous dire à quel point ça peut être subjectif. J'en veux pour preuve ce précédent décodage de David Abiker où un commentateur ne voyait en Sarkozy qui regarde au travers d'une longue vue ni plus ni moins qu'un agent de la Gestapo regardant ce qui passe dans un four crématoire (je suis pas sûr, par ailleurs, que les agents de la Gestapo étaient présents dans les camps, mais bon ça c'est autre chose), quand je disais qu'on aimait bien s'amuser à se faire peur :

il me fait penser aux costumes des acteurs incarnant la Gestapo, sans le chapeau. Et le petit bout de la lorgnette, ça me rappelle le film Amen quand ils regardent ce qu'il se passe dans les fours par un juda(s?). Voilà désolé pour cet pensée sombre, mais ça me glace.

Ça me glace moi aussi ... Bref quand je vous disais, même le dernier des crétins.

Flickr photo : Les hommes en noir

Mox Folder — Mon, 12 Nov 2007 19:59:00 -0500

Si y en a qui chôment pas en ce moment c'est bien eux (et ils vont devoir redoubler d'effort dans les jours qui viennent), mais c'est pas de ça dont je vais vous parler...

originally uploaded by Julien Muguet.

Bien équilibrée (la masse noire au premier plan contraste bien avec les couleurs plus claires au second plan), la composition est classique mais efficace : le CRS du milieu est encadré par 2 autres CRS qui se trouvent en majeure partie hors champ, le regard est dirigé vers le centre et plus exactement derrière les CRS en fait (d'ou l'importance de la masse noire au premier plan, c'est là que notre regard se dirige en premier, mais on a envie de voir ce qui se passe derrière).

La perspective est tout aussi intéressante car elle rajoute du dynamsime dans une composition ou les sujets sont statiques (deux points de fuite principaux: l'un formé par la perspective des CRS au premier plan qui fuit vers la gauche, et l'autre formé par le bâtiment en arrière plan qui fuie vers la droite). Enfin, et c'est le point crucial que je voulais souligner, la contre-plongée sur les CRS est très intéressante pour deux raisons :

Elle épouse le point de vue des sans papiers à terre, pourtant nous ne sommes que de simple spectateurs, on assiste à la scène et les CRS sont de dos, destabilisant ;
Avec la perspective, les CRS apparaissent comme des colosses ce qui souligne d'autant plus leur supériorité en opposition à la fragilité voir la détresse des sans papier à terre qui sont pourtant en surnombre (et j'insiste encore sur les couleurs qui viennent renforcer tout ça).

Comme cette photo dont je vous parlais la dernière fois, j'aime bien le coté presque cinématographique de la scène sauf que la photo ci-dessus est évidemment beaucoup plus profonde avec plus sens aussi.

Flickr photo : Exécution

Mox Folder — Thu, 01 Nov 2007 23:06:00 -0400

En découvrant récemment la fonction blog-this de Flickr, je me suis dit dit que j'allais poster régulièrement des photos provenant de Flickr... puis rapidement je me suis demandé quoi poster. Fallait un thème, et aujourd'hui je me suis rappelé qu'il y avait une communauté Stikfas active sur Flickr.

J'aime bien cette photo pour le sens cinématographique de la mise en scène (on pense à Une Balle dans la Tête de John Woo, ou encore Platoon d'Oliver Stone). Belle composition et la profondeur de champ est aussi très bien rendue. Je vous invite aussi à voir ou revoir la série de photos que j'avais pris avec mes Stikfas pour fêter l'achat de mon iPod Nano.

fun with stikfas, originally uploaded by Silvr.

Vidéo et utilisabilité

Mox Folder — Fri, 26 Oct 2007 14:58:00 -0400

Outre les billets à répétition au sujet de Facebook (wouah mate le nouveau groupe que j'ai créé avec son titre qu'il est trop drôle !), la lubie du moment sur les blogs français c'est Seesmic, la nouvelle start-up de Loïc Le Meur. Retour en grâce pour le premier blogueur de France qui semble plébiscité de toutes parts.

J'ai regardé un peu ses podcasts qui suivent la création de la start-up, j'aime bien la spontanéité de LLM et l'effort qu'il y met, MAIS - comme la plupart des podcasts où les mecs s'écoutent parler devant l'objectif et n'en finissent pas de blablater et donnent l'impression de se parler devant leur miroir - que c'est long et chiant !.

En se connectant sur le site Seesmic.com on arrive sur une page qui liste les vidéos de LLM sous forme de vignettes, on clique sur une vignette et la vidéo se joue à l'écran, cf image ci-dessous :

À ce niveau là je vois déjà 2 problèmes rédhibitoires pour moi :

On n'a aucune indication de temps, on ne sait pas combien de temps va durer la vidéo et il n'y pas de timeline qui pourrait nous indiquer si on en est au 1/4, à la moitié ou sur la fin ;
Il n'y a aucune interactivité hormis la pause et la lecture, pas de possibilité d'aller en avant ou de revenir en arrière si j'ai raté un bout.

Ce défaut d'ergonomie est un exemple parmi d'autres en général sur le web, j'ose espérer que le reste du service n'est pas du même accabit même si on peut trouver ça inquiétant de la part d'un entrepreneur qui désire s'investir dans la production de contenu vidéo. C'est un détail révélateur car néanmoins et malheureusement, assez courant sur le web.

En terme d'ergonomie il est primordial d'indiquer à l'utilisateur où il se situe... sinon on risque de le perdre :

Vous téléchargez, uploadez, copiez un fichier ou gravez un CD, c'est la base : vous devez pouvoir situer l'action que vous faites dans le temps (recours à une timeline généralement) ;
Vous passez commande sur un site : au moment de valider la commande certains sites ont bien intégré qu'ils devaient vous informer du nombre d'étapes passées et de combien d'étapes il vous reste à effectuer avant que la commande ne soit terminée ;
Vous installez un logiciel : vous devez être informé sur le nombre d'étapes et sur le temps que ça va prendre (cf. Windows ou Adobe CS).

Et bien pour une vidéo c'est la même chose, si je me lance dans une action j'ai besoin de savoir si ça va ma prendre 2min, 15 min ou 1h.

Tip of the day: Naviguer dans du texte à partir du clavier

Mox Folder — Wed, 24 Oct 2007 17:26:00 -0400

La souris est périphérique très pratique, depuis qu'on l'a inventé et qu'on l'utilise on ne peut quasiment plus s'en passer. Ceci est vrai quand navigue sans avoir à saisir de données, mais lorsque doit en saisir au clavier et qu'on utilise la souris en même temps c'est autre chose. En effet, on n'a que deux mains : l'une est occupée par le clavier et l'autre occupée par la souris, alors qu'on serait parfois tellement plus productif est efficace en gardant les deux mains sur le clavier.

Heureusement les développeurs on pensé à tout, les OS et les logiciels intègrent ce genre de pratique : après tout, en cas de défaillance de la souris il faut pouvoir garder la main sur l'interface. Je m'en vais donc vous livrer quelques astuces qui peuvent s'avérer plus ou moins pratique lors de la rédaction d'un texte dans un traitement de texte, une interface d'administration d'un blog ou un webmail ou encore dans votre logiciel de mail préféré.

Focalisons nous sur l'utilisation aujourd'hui devenue la plus courante : le navigateur web. Vous l'utiliserez par exemple pour vos mails (GMAil, Yahoo, hotmail, etc.), mettre à jour votre blog, participer à des forums, écrire des commentaires sur des sites (YouTube, blogs, Flickr, etc)...

Ce qui suit vaut pour Firefox sur Mac, mais j'imagine que les autres navigateurs sur windows ou autres fonctionnent plus ou moins de la même façons.

Réapprendre à ce servir du clavier

Lorsque l'on tape un texte (à deux mains hein ;o) et que l'on désire naviguer dans le texte - que ce soit pas exemple pour retourner en début de paragraphe, ou sélectionner une partie du texte - le premier réflex et d'utiliser la souris. Si au premier abord cette utilisation parait la plus pratique et rapide elle nous oblige à interrompre la frappe. On perd en fluidité et on perdre par la même occasion le fil de son idée or il n'est pas toujours nécessaire d'avoir à reprendre la souris : idéalement on ne devrait reprendre la souris qu'en cas de nécessité absolue.

Navigation au clavier

Il n'y a pas 36 manières dans naviguer dans du texte au clavier, tout passe par les flèches et à la rigueur les touches Page up et Page Down. C'est pas compliqué : avec haut, bas, gauche, droite on déplace le curseur où on le désire.

Problème : le curseur ne se déplace que d'un caractère ou une ligne à la fois, si on veut remonter de 10 ligne, il faut appuyer 10 fois sur la flèche du haut.

Pour palier à ce problème il faut combiner les flèches avec un ou plusieurs autres touches. Quelques exemples :

alt + flèche de droite (ou flèche de gauche), vous fera avancer ou reculer d'un mot ;
alt + flèche de haut (ou flèche de bas), positionne le curseur en haut ou en bas de la fenêtre de texte ;
cmd (pomme) + flèche de droite (ou flèche de gauche), positionnera le curseur à la fin ou au début de la ligne ;
cmd (pomme) + flèche de haut (ou flèche de bas), positionnera le curseur à la fin ou au début de votre texte.

Pas testé sur Windows, mais je pense qui si vous remplacez cmd par ctrl ça devrait donner le même résultat

Aller plus loin

Ok, maintenant que vous savez déplacer votre curseur sans utiliser votre souris, je vais vous donner une astuce pour sélectionner du texte : utilisez la touche shift en association avec les combinaisons cités ci-dessous. La touche shift est une touche avec une flèche pointée vers le haut et qui sert à faire des caractères en majuscules... c'est aussi celle qui est utilisée lorsque l'on souhaite sélectionner plusieurs éléments à la fois, c'est vraiment LA touche de sélection. Ex:

shift + flèche droite (ou gauche), sélectionne le caractère suivant ou précédent ;
shift + flèche haut (ou bas), sélectionne tous les caractères de la ligne avant ou après le curseur + les caractères de la ligne précédente ou suivante alignés avec le curseur (ndr. c'est pas clair mais testez, vous allez comprendre) ;
shift + alt + flèche droite (ou gauche), sélectionne le mot après ou avant le curseur ;
shift + alt + flèche haut (ou bas), sélectionne le texte visible dans la zone de texte avant ou après le curseur ;
shift + cmd + flèche droite (ou gauche), sélectionne les caractères de la ligne après ou avant le curseur ;
shift + cmd + flèche haut (ou bas), sélectionne TOUT le texte avant ou après le curseur.

Aller encore plus loin

Selon les logiciels il y a quelques subtilités car tous ne réagissent pas pas pareil, notamment les logiciel de PAO et d' eMail. À cela, il y a une raison : en HTML comme en PAO on fait une différence entre un paragraphe et un retour charriot, cf. image ci-dessous. En html un retour charriot sera symbolisé par une balise BR.

Par exemple dans Quark X-Press :

shift + cmd + flèche haut (ou bas), sélectionne le paragraphe avant ou après le curseur ;
shift + alt + cmd + flèche haut (ou bas), sélectionne TOUT le texte avant ou après le curseur ;
shift + alt + cmd + flèche droite (ou gauche), sélectionne les caractères de la ligne après ou avant le curseur.

En définitive, il y a un certain nombre de possibilités, à vous de tester sur différents logiciels et choisir en fonction de ce qui vous parait le plus pratique et évident ... Une chose qui est sur, c'est qu'il est très difficile de se défaire de cette satanée souris, moi même en rédigeant cet article je n'ai pas respecté 1/4 de ces raccourcis clavier ;o)

La marketing c'est Super Grave parfois...

Mox Folder — Mon, 22 Oct 2007 10:00:00 -0400

Cas de conscience : quand on travail dans mon domaine on doit avoir un niveau de tolérance assez élevé face au stupidités que le marketing et le commerce peuvent engendrer parfois. En atteste les trois exemples ci-dessous... pas facile parfois de rentrer d'une belle journée ensoleillée pleine de rêves et de promesses, de lire ses flux RSS et d'enchainer 3 inepties :

Opération promo avec Dailymotion pour le film Superbad (Super Grave en français) via Aziz : opération totalement crétine, le film est plutôt bon et sincère et ne mérite surement pas ça... C'est pas grave en soit, c'est anodin et c'est peut-être finalement pour ça que ça me hérisse autant les poils. L'UGC (User Generated Content) là ne sert qu'à palier au manque de créativité et d'inspiration. Allez, je vous invite plutôt à lire ou relire l'interview des acteurs et auteurs du film dont je parlais dans ce billet ;
Affiche pour Mercedes vantant les 8 huit airbags d'une voiture (via Greg) : Je trouve ça horrible, ni plus ni moins... je suis pourtant pas féministe et ne manque pas d'humour ni de dérision. Certes le message passe et s’imprime dans les esprits comme le souligne Greg, est-ce pour autant qu'on doit tout se permettre ? Pas sur... en même temps comme je le disais ci-dessus, y a rien de grave (je pensais juste qu'on avait arrêté de prendre de la coke à la fin des années 80 dans les agences de pub, je veux dire, sur le papier dans la salle de brainstorming je comprend qu'on puisse trouver l'idée bonne mais je comprend pas qu'on puisse aller au bout avec un tel concept) ;
Un affiche rétro pour Coca Cola (via Damdam) : et on ose dire parfois que tout le fout camps, c'était mieux avant blablabla alors qu'une publicité comme celle là serait aujourd'hui - à juste titre - totalement inimaginable. Même un publicitaire cocaïné jusqu'à la moelle n'oserait pas coucher une telle idée sur le papier (vive le conditionnement oui je sais, en ces temps de global warning il ne fait pas bon s'attaquer à certains tabous).

Ce dernier exemple est typique : Qu'aurais-je fait si j'avais été un jeune designer plein d'avenir dans l'Allemagne des années 30 ? La question est brutale mais mérite d'être posée je pense, il est toujours bon de se remettre en question et rester aware.

30 astuces pour Photoshop

Mox Folder — Thu, 27 Sep 2007 17:40:00 -0400

Nick La, auteur du blog Web Designer Wall nous livre 30 raccourcis et tips pour Photoshop qu'il a appris à manipuler à force de pratiquer le fameux logiciel d'Adobe. Si vous êtes utilisateur de Photoshop y en a que vous connaitrez surement déjà, voici ci-dessous mes découvertes préférées :

Drag selection (n° 1) ;
Drag to adjust numeric value (n° 6) ;
Scroll to adjust numeric value (n° 7) ;
Collapse or expand all layer groups (n° 10) ;
Navigate layer blending mode (n° 13) ;
Switch between document windows (n° 26).

Je vous invite aussi à découvrir un autre site de l'auteur : Best Web Gallery qui, comme son nom l'indique, est une gallerie qui répertorie le meilleur du web, un peu comme l'initiative dont je vous parlais dans ce billet.

Typographie animée

Mox Folder — Wed, 12 Sep 2007 19:42:00 -0400

Très bon (je vous invite aussi à cliquer sur les liens pour aller sur le site de YouTube, y a tout un tas d'autres animations de typographies dans les related videos) :

Devil's Advocate in Typography

Are You Ganna Be My Girl ?

Via infosthetics.com.

Développement web : 6 questions posées à 50 designers

Mox Folder — Tue, 04 Sep 2007 16:34:05 +0000

6 Questions posées à 50 designers web, ça nous donne 300 réponses et autant de points clef pour nous aider à appréhender un maximum de problématiques liées au développement web.

À lire sur Smashing Magazine qui classe les réponses en 3 grandes catégories :

Les mythes ;
La recette miracle ;
Si j'avais su...

Mobile Web Design

Mox Folder — Thu, 30 Aug 2007 11:10:05 +0000

On peut pas faire plus explicite comme titre de bouquin. Écrit par Cameron Moll, un designer suisse installé à Salt Lake City, Mobile Web Design est donc comme son titre le suggère un ouvrage sur le design d'applications web pour appareils mobiles.

Le plus simple pour se faire une idée étant de jeter un coup d'œil sur la preview (à télécharger ici), ou encore de visiter le blog de Cameron.

Ouvrage pour design web mobile oblige, on peut l'acquérir en version PDF pour la modique somme de 19$us (voir sur le blog de l'auteur) afin le lire sur son ~~iPhone~~ Nokia :

Nokia's iPhone

Ouais je sais, elle était facile celle-là ;o)

(J'en profite pour faire un petit aparté sur cette vidéo Nokia, je me demande si c'est pas un coup de buzz de Nokia, j'ai du mal à croire qu'il copient aussi ouvertement le téléphone d'Apple surtout après les déclarations qu'ils ont fait lors de la sortie de l'iPhone).

Des icônes pour votre bureau

Mox Folder — Mon, 27 Aug 2007 12:58:24 +0000

Je cherche des icônes pour le nouveau design du blog - à terme je vais les designer moi même mais pour pouvoir mettre en ligne le nouveau design ASAP j'ai besoin d'icônes, alors je cherche des icônes libre de droits - bref, en cherchant je suis tombé sur fasticon.com qui propose gratuitement des icones compatible OSX, Windows et Linux.

Il ont aussi des lots de packs complets en vectoriel, là c'est payant mais les packs ont l'air d'être de grande qualité.

10 widgets Dashboard indispensables

Mox Folder — Mon, 20 Aug 2007 11:00:10 +0000

Bon ok indispensables c'est peut-être un peu fort... bref, Engadget nous donne une liste de 10 widgets Dashboard (plus ou moins) utiles. Parmi ceux-ci, je retiens pour les bloggueurs ou designers Web que nous sommes :

2 widgets pour les outils Google AdSense (Widsense) et Analytics (Google Analytics Widget) ;
Pour les puristes qui ne jurent que par les éditeurs de textes : HTML Entity look up permet de trouver instantanément le code HTML d'un caractère, le truc bien c'est que vous pouvez aussi boormarker l'URL car l'auteur a rendu possible d'obtenir directement ces informations de son navigateur sans passer par Dashboard ;
PHP Function Reference : je suis une buse en PHP, mais ça à l'air cool (permet d'accéder en quelque clics à des informations et documentations sur des fonctions PHP), du coup je me suis en quête d'un widget équivalent pour les fonctions CSS et j'ai trouvé SeeSS ainsi que CSS Cheat Sheet et enfin CSS Tweak qui permet d'optimiser un fichier CSS en retirant tout le superflu et obtenir ainsi un fichier plus léger... à tester (pour ce dernier on peut aussi tester directement sur une page Web);
Enfin Stop Dashboard permet de d'économiser de la mémoire en faisant un reboot du dock, ainsi les widgets ne sont plus chargés jusqu'à ce qu'on relance Dashboard (j'avais prévenu que c'était plus ou moins utile ;o).

Placement produit

Mox Folder — Wed, 16 May 2007 11:49:02 +0000

Ci-dessous, deux exemples criants de placement de produits dans des séries TV :

CSI : New York (CBS)

On voit ici l'opérateur téléphonique Sprint avec 2 téléphones de marque Samsung et Palm. Sont mis en avant en plus des appareils : les fonctions multimédias (vente de musiques en ligne) et les transmissions DATA... deux services qui sont évidemment facturés par l'opérateur téléphonique.

Desperate Housewives (ABC)

Là c'est plus subtil : juste avant la coupure pub on a un gros plan (non justifié) sur une voiture de marque Nissan, lorsque la coupure pub débute, le premier spot diffusé est un spot pour Nissan.

Couteau suisse du Web designer

Mox Folder — Thu, 15 Mar 2007 11:02:00 +0000

Web Design Inspiration est une sélection de design Web sur Flickr, il y a aussi ce blog qui recense une sélection de design web ;
53 Techniques CSS ;
Comparateur de fontes en ligne ;
Un outil on-line de vectorisation d'images bitmap.

Outils Firefox :

Web Developper Extension : extension Firefox qui permet - entre autres - d'éditer les CSS d'une page web, de les modifier et de voir en temps réel dans le navigateur le résultat.

“Helvetica” by Gary Hustwit

Mox Folder — Wed, 14 Mar 2007 16:27:50 +0000

Comment reconnait-on un utilisateur de Windows et un utilisateur de Mac ? L'utilisateur Windows vous parlera d'Arial alors que l'utilisateur Mac vous parlera d'Helvetica. Les deux fontes sont très similaires, mais pourtant l'Arial n'en demeure pas moins qu'une copie de l'Helvetica.

Ci-dessus le logo LE DEBUGGER est réalisé avec une police Helvetica Neue, une version modernisée en 1983 et déclinée en différentes variantes.

À l'occasion des 50 ans de l'Helvetica, un documentaire hommage sobrement intitulé Helvetica rendra donc hommage ce printemps à son créateur Max Miedinger. La première a eu lieu hier, à Austin au Texas. D'autre projections sont prévues dont une à l'Université Concordia de Montréal les 4 et 5 mai lors du Logo Cities Symposium alors qu'une projection française est prévue quant à elle le 25 mai au palais de Tokyo à Paris (liste des projections mondiales).

À voir absolument si vous aimez la typographie et le design en général.

Porno Chic (Puma)

Mox Folder — Tue, 13 Mar 2007 22:21:47 +0000

Ah tiens, pour faire suite à mon précédent post sur Dolce & Gabbana, ce week-end en rangeant des sauvegardes, je suis tombé sur ces vieilles images ci-dessous pour Puma qui datent déjà de plusieurs années.

Me souviens plus si ce sont de fausses ou vraies pub... Bref, j'aime bien l'idée, même si un peu trash. Par contre la tache sur la cuisse est vraiment de mauvais gout je trouve, le détail en trop et inutile qui plus est. Dommage.

Comparateur de fontes

Mox Folder — Thu, 15 Feb 2007 16:53:21 +0000

Dans la catégorie outil indispensable du Web designer, j'ai nommé : Typetester.

Typetester, permet tout simplement de comparer à l'écran différentes polices de caractère avec différents styles appliqués (couleur, corps, interligne, etc.). On peut tester avec le texte que l'on veut et, cerise sur la gâteau, une option nous permet de récupérer le code CSS du style ainsi créé.

Simple, pratique et efficace.

Web Design Inspiration

Mox Folder — Wed, 31 Jan 2007 17:00:29 +0000

J'adore quand on détourne un objet ou un produit quelconque de son utilisation principale. Ainsi un utilisateur de flickr utilise les possibilités de ce formidable site d'hébergement de photos en ligne pour cataloguer une multitude de captures d'écran de sites Web pour en faire une banque d'images d'inspirations en design Web. Pas indispensable, mais utile et intéressant... excepté un léger défaut : les captures semblent provenir en grande majorité de site anglophones, on aurait apprécié une plus grande pluralité. Big up à Patrick Haney, l'auteur

Via The Moose's Corner

Apple design: Du PowerMac au MacPro

Mox Folder — Mon, 29 Jan 2007 14:41:42 +0000

La fin des années 90 sera un tournant pour Apple. En effet, en 1997 Steve Jobs reprend les reines de la société dont il est a l'origine et réalise un coup de génie en confiant à Jonathan Ive le design de l'iMac qui sera l'étandart de la marque à la pomme auprès du grand public jusqu'à l'arrivée de l'iPod.

Sortie en 1998, l'iMac reste à ce jour le modèle d'ordinateur le plus vendu au monde et préfigurait déjà l'orientation du design de la gamme Apple pour les années à venir. Écrans, PowerMac et iBook allaient par la suite être déclinés selon les codes définis par l'iMac : Des formes douces et rondes, une coque faite d'un plastique massif qui inspire la robustesse malgré la transparence et enfin un code couleur immédiatement reconnaissable fruit de l'association d'un blanc laiteux et d'une couleur de type candy.

Le Power Macintosh G3 (Blue & White) est ainsi né, et répond aux codes mis en place, excepté qu'il n'est pas translucide contrairement à l'iMac. Comme son nom l'indique, il est bleu et blanc et disons le franchement un bleu flashy tendance turquoise et un blanc pas franchement blanc comme un blanc mat, crémeux. Ce Power Mac était aussi affublé d'un immense tag G3 sur le flanc... il fallait bien faire oublier le nom technique barbare Power PC 750. D'ailleurs avant l'iMac le Power Mac G3 c'etait ça.

En 1999, le G3 a droit à une upgrade, il devient G4 et est légèrement relifté : Le blanc crème tend vers le gris et le bleu devient plus sombre, moins saturé et plus profond et la coque se fait plus brillante, étincelante : on ne voit pas au travers mais l'on se reflète dessus... comme pour marquer encore plus la différence avec la gamme grand public de l'iMac qui parallèlement va se décliner en mandarine, citron vert, fraise, raisin et myrtille toujours translucide. Au passage le tag G3 disparait. On assiste à une première étape d'évolution du design pour Apple qui tend vers une épuration, plus de pureté et de sobriété dans les lignes et les couleurs.

Le PowerMac G4 Quicksilver confirmera cette évolution : le bleu sombre et profond laisse place au gris. Le PowerMac est dorénavant composé d'un gris clair et d'un gris plus foncé. Il subira une ultime évolution (cf. photo ci-dessous le PM G4 MDD pour Mirrored Drive se trouve juste avant le G5) avant de laisser sa place au désormais célèbre PowerMac G5 .

Le PowerMac G5 sorti en 2003 est un peu l'aboutissement ultime de plusieurs années d'évolution de design. Si l'aspect global ne change pas - une tour restant une tour - on constate néanmoins un changement brutal du design : Le plastique brillant est remplacé par du métal brossé (mat), la composition en 2 couleurs laisse place à un gris neutre, enfin les lignes arrondies laissent définitivement place à des lignes droites et pures. Ne reste guère que les immenses poignées/pieds au 4 coins de la tour et la pomme sur le flanc pour nous rappeler que définitivement ce PM G5 reste une machine Apple. Avec le passage aux processeurs Intel le PM G5 sera renommé en MacPro et ne subira que peu modification extérieurs, le principal se faisant à l'intérieur, dans les entrailles.

Voilà pour cette première partie, je n'ai parlé volontairement que de l'extérieur mais chez Apple le design intérieur et tout aussi soigné que le design extérieur, à ce titre le passage du PM G5 au Mac Pro est un modèle du genre. Rendez-vous mardi prochain pour la suite...

53 techniques CSS indispensables

Mox Folder — Mon, 29 Jan 2007 10:43:05 +0000

Utiliser les CSS pour faire un site Web est aujourd'hui devenu indispensable. Le blog de Alsacréations milite d'ailleurs beaucoup en sens. La semaine dernière les auteurs ont rapporté un lien très intéressant qui recense 53 techniques indispensable basées sur des CSS.

À défaut d'être toutes pertinentes (ici pour une description plus détaillée), ces 53 techniques présentent au moins l'avantage de brasser l'étendue de ce que l'on peut faire en CSS... évidemment ce n'est pas limitatif à ces 53 techniques.

(Via The Moose's Corner)

Apple design evolution

Mox Folder — Fri, 26 Jan 2007 17:47:55 +0000

On a souvent tendance à réduire les produits Apple à leur design... 1ère erreur ! On a aussi souvent tendance à réduire le design d'un produit à l'esthétisme... 2e erreur ! En contre-partie, il est vrai que Apple doit beaucoup de son succès au design de ses produits : un design soigné, marqué et à contre-courant de ce que fait généralement la concurrence. Il est tout aussi vrai que l'on retient principalement l'aspect esthétique du design d'un objet ou plus généralement d'une marque.

À raison d'un billet par semaine durant 4 semaines, je retracerai plusieurs années de design Apple en me focalisant sur l'évolution du design des produits phares de la marque depuis la renaissance à la fin des années 90, c'est à dire depuis le retour officiel de Steve Jobs et la sortie de l'iMac qui a, selon moi, été un tournant pour Apple en matière de design. Le mardi étant généralement la journée de la semaine choisie par Apple pour annoncer des nouveautés, je publierai les billets suivants les 3 prochains mardi :

Du PowerMac au MacPro ;
De l'iBook au MacBook ;
iPod, iMac et PowerBook ;
Cohérence du design.

Stay tuned...

Mazda fait aussi son cinéma

Mox Folder — Fri, 05 Jan 2007 11:55:42 +0000

Aprés Stella Artois dont je vous présentais quelques affiches ici et là, c'est au tour de Mazda de s'imprégner du cinéma et pour l'occasion ils ont ouvert un mini-site intitulé : “12 second thriller” sur lequel on peut réaliser son propre film d'une durée de... 12 secondes.

C'est beaucoup moins riche que les affiches Stella-Artois et, bien que l'interface soit plutôt sympathique, il y a autant - voire moins - d'interactivité que dans les affiches précédemment citées. Opération marketing faiblarde qui ne se contente finalement que d'aligner des spots de pubs. On aurait apprécié plus d'intégration Web 2.0 comme la possibilité d'afficher sont spot créé sur son blog... Cela dit, pour ce faire il aurait au moins fallu que l'on puisse créer quelque chose, ce qui n'est pas le cas.

Violences conjugales

Mox Folder — Fri, 24 Nov 2006 11:11:39 +0000

2 vidéos contre les violences conjugales. La 1ere pour la France à l'initiative de la Fédération Nationale Solidarité Femme, et la seconde pour l'Angleterre à l'initiative d'Amnesty International. À vous de juger laquelle est la plus efficace, pour ma part je trouve la française vraiment pas terrible : d'une part on croirait être devant un mauvais film d'auteur français avec des acteurs hystérique et d'autre part le coup du gamin qui se met à frapper sa mère au sol a plus un effet comique qu'autre chose (ou comment passer d'un film de Nicole Garcia à South Park en quelques secondes).

SOS femmes battues UK
envoyé par solaro

Via Marketing Alternatif

Nouveau spot Sony PS3

Mox Folder — Mon, 06 Nov 2006 11:15:44 +0000

Si vous suivez l'actualité web de prés, vous n'aurez surement pas raté les nouveaux spots publicitaires pour la gamme d'écran plat Bravia de Sony (ici et là sur Marketing Alternatif, du coté d'Aziz et Roycod. Il y a même des affiches (sur Business Garden).

Dans cette campagne de pub, la couleur y est éxagérement mise en avant. Et bien Sony remet ça cette fois-ci avec la PS3, comme pour nous dire que la PS3 avec son lecteur HD Blu-Ray (dont je vous livrait mes 1ere impressions ici) serait l'accéssoire idéal pour accompagner un écran Bravia.

Le rubixcube vient symboliser les deux associations d'idée (le jeu et les couleurs) dans un univers blanc monochromatique qui rappellera les teintes de la Nintendo Wii. Curieux de voir que pour communiquer sur la HD, Sony adopte l'angle de l'éclat des couleurs : en évitant soigneusement un blabla technique réparbatif Sony vient titiller l'un de nos 5 sens.

Voici l'URL Youtube. Un autre spot est aussi passé hier soir durant les Simpsons, mais il n'est pas encore sur Youtube visiblement...

Stella Artois et les grands classiques

Mox Folder — Fri, 03 Nov 2006 17:06:34 +0000

Aprés les deux que je vous présentais hier, voici une 3e affiche pour Stella Artois. On y voit, entre autre : Superman dans la cabine téléphonique, North by Nothwest, Orange Mécanique, War Of The World, Taxi Driver...

Ceci n'est pas un sac LV

Mox Folder — Thu, 02 Nov 2006 19:13:47 +0000

J'adore les détournements d'une manière générale, que ce soit pour des symboles, des objets, etc. Sur son blog, Patrice signale un site de vente par correspondance qui vend des contrefaçons, disons ... particulières :

Un petit coté Magritte...

Stella Artois revisite le cinéma

Mox Folder — Thu, 02 Nov 2006 19:06:06 +0000

Campagne de publicité pour Stella Artois mêlant des références de films connus.

On peut y reconnaitre, entre autre :

Sur la 1ere : Twister, Les Oiseaux, Elephant Man, Jurassic Park (ou Edward au mains d'argent ?), Shining, Massacre à la Tronçonneuse, Babe, la Famille Adams...
Sur la 2e : Apocalypse Now, James Bond Contre Dr No, La Leçon de Piano, Armageddon ou Deep Imppact, Jaws, Il faut sauver le soldat Ryan (ou le le jour le plus long peut-être ?), on voit un sous-marin au fond c'est peut-être À la Poursuite d'Octobre Rouge...