Archive pour la catégorie ‘Design’

HTML5 : la table périodique des balises

Mercredi 30 novembre 2011

Implacable Josh Duck : hormis un blog qui rosse les yeux, Josh Duck est un développeur-programmeur qui mérite un petit  coup d’œil sur ses projets. Sa table périodique HTML5 est sans doute à ce jour, son meilleur outil.

Josh Duck, développeur australien, propose une table périodique des éléments HTML5, qui reprend l’ensemble des balises standards du langage : des éléments « racine » aux métadonnées, en passant par les éléments de contenus embarqués, d’interactivité, et aux différents niveaux sémantiques.

Découpée selon le célèbre modèle de la table périodique des éléments chimiques, conçue par Dimitri Mendeleïev, chimiste russe du 19e siècle, cette table permet, au-delà de l’intérêt pour la synthétisation, très pratique et plutôt bien faite, de s’interroger encore sur les principes de visualisation.

Relayé massivement sur Twitter, sa table est l’occasion de découvrir le développeur et ses travaux, mais davantage encore de s’arrêter sur la modélisation et sa méthode, agencement intuitif d’éléments pour une visualisation plus globale et une mémorisation plus instantanée des éléments.

 - Charlene Lefoulon.

Réalité Augmentée : « superposer le virtuel au réel »

Jeudi 4 août 2011

Le 8 juillet dernier, à La Cantine, se déroulait le premier atelier sur « l’Etat des lieux de la Réalité Augmentée ». L’idée de fédérer autour de la thématique et de sa problématique associée avait pour elle d’être novatrice : à mi-chemin entre progression fulgurante et tendance à confirmer, la réalité augmentée se voudrait moins en quête de modèles, qu’expérimentale sur de nombreux points. Bref retour sur cette soirée, qui attend déjà sa suite dès la rentrée.

La réalité augmentée, ou l’art de « superposer le virtuel au réel, de manière interactive et en respectant les perspectives », trouve autant de champs d’extension, selon que l’on aborde différents domaines comme le marketing, l’éducation, le divertissement, ou encore la Défense. La table ronde organisée à La Cantine offrait un panel des plus variés pour le rappeler, puisque Aurelien Fache (OWNI), Laurent Allias (Cabarey Communication), Yohan Bentolila (Previznet), et Jean-François Chianetta (Augmentedev) s’étaient donnés rendez-vous.

Le sujet touche différents domaines, comme la géolocalisation, qui semble la première s’être emparer du phénomène : par le truchement du couplage de différentes technologies – GPS, marquage, capteurs – il est possible de faire apparaître des informations numériques, des données virtuelles sur un espace réel, comme un plan de quartier, une carte de zone. Avec ou sans marqueurs, cette technologie paraît aujourd’hui stable et rapide, et l’ensemble des professionnels l’utilisant et la diffusant semblent s’accorder sur son efficacité.

L’aspect palpable de la réalité augmentée se définit aussi par ses supports. Pour la rendre efficiente, des travaux de recherche sont effectués sur les objets : lunettes, verres de contact (on parle de « miniaturisation de l’informatique ») ou encore implants sur le nerf optique… Autant d’éléments servant à la réflexion des limites, aussi, du canevas.

Les animateurs de la soirée ont rappelé que la Réalité Augmentée est toujours indissociable de la réalité.  Son implémentation – jeux vidéo, médias, marketing expérientiel, urbanisme , site Web – devrait faire  l’objet d’une seconde rencontre, prévue en septembre, toujours à l’atelier de La Cantine.

 - Charlene Lefoulon.

Le processing, nouvelle façon créative d’afficher des données ?

Mardi 14 décembre 2010

Le processing est un langage dérivé du Java (ce qui lui permet d’être fonctionel sur n’importe quel support équipé d’une plate forme Java). Très apprecié pour sa simplicité et ses capacités d’animation, ce langage se repand rapidement dans l’art vidéo, le motion et les interfaces.

Sa capacité à se plugger à différents modules ou flux (vidéo, audio, ect. ) permet, entre autre dans l’animation, de générer des formes et mouvements aléatoires suivant différents paramètres, avec beaucoup de fluidité. Sur les traces de l’art fractal des années 70-80 ce langage de production et d’interactivité se retouve dans de nombreuses installations et productions artistiques.

Le langage permet aussi l’affichage de données complexes et offre des perspectives de spatialisation, de mise en forme et de mouvement de chiffres ou de bases de données. Une technologie qui permet donc une application très large et (apparemment) simple d’utilisation pour créer des univers imitant la vie, riches de mouvements, en constante mutation et à l’estéthique presque poétique.

Vidéo générée par processing

 

Metamorphosis from Glenn Marshall on Vimeo.

LAIKA from Michael Flückiger on Vimeo.

Solar, with lyrics. from flight404 on Vimeo.

Outils et installations via processing

toxiclibs showreel from postspectacular on Vimeo.

Graffiti Stop Motion : quand le Stop Motion rencontre l’art urbain…

Lundi 10 mai 2010

Le Stop Motion, on ne s’en lasse pas ! Et aujourd’hui il en existe une nouvelle forme. On mixe le Stop Motion à l’art urbain et ça donne le Graffiti Stop Motion.

Alors qu’en filmant non stop une de ces réalisations cela aurait pris environ 3h, avec le Stop Motion on arrive à concentrer le tout dans 10 minutes environ !

Les peintures prennent vie dans la ville pour un rendu street-art très impressionnant. Ces artistes nous plongent dans un univers polymorphe où tout est en mouvement perpétuel, le tout procurant des sensations assez étranges.

Je vous laisse voir par vous même …

Et si vous voulez plus d’infos sur le Stop Motion en général, il y a eu très bon article réalisé sur le blog en janvier ici

Noteput, la table interactive de création musicale

Mardi 13 avril 2010

Une table interactive qui combine 3 sens à savoir :
L’ouïe, le toucher et bien sûr la vue.

noteput

Ce dispositif de composition musicale est original dans la mesure où il ré-introduit la manipulation d’objets symboliques. La réalité augmentée vue jusqu’alors s’appuyait sur des symboles purement techniques sous forme de marqueur visuels sur lesquels on pouvait manipuler des objets virtuels, alors qu’ici, l’objet est solide et porteur de sens : la note de musique

Noteput – Interactive music table from Jonas Heuer on Vimeo.

et ici sur notput sur fubiz

Pleine page d’un site Web : orienter l’ergonomie pour une lecture adaptée

Mardi 23 février 2010

Une réflexion de plus en plus courante amène à penser que la façon dont nous lisons sur le web n’est pas forcément la plus adaptée.

En, effet, nos écrans sont horizontaux, alors que la plupart des sites de contenus sont conçus de façon verticale. Ce qui a pour conséquence une longueur de page interminable, et un espace latéral vide

pleine_page

Pour ajouter à ceci, nous sommes confronté à une inflation du nombre de résolutions d’écran. Le 1024×768 n’est donc plus majoritaire; mais on voit apparaître de plus en plus de petites résolutions ainsi que de très grandes.

Des travaux basé sur le framework jquery permettent de placer autant de bloc les uns à côté des autres tant que la résolution le permet.

Plus sur le sujet :
le futur de l’édition en ligne, quelques hypothèses
un exemple : factory magazine

Interface Windows Phone 7 series, une réussite ?

Mardi 23 février 2010

windows_seven_series1

La nouvelle interface mobile de Microsoft fait parler d’elle !

L’interface sobre, élégante, la typo y retrouve une place de choix.

La compétition accrue sur le secteur du mobile force effectivement Microsoft à se positionner en terme de design et d’interface, et c’est assez rare pour être souligné. Le leader des systèmes exploitation rompt clairement avec Windows Mobile, très critiqué, trop proche de son grand frère XP et peu adapté au terminaux mobiles. Aujourd’hui, le leader sur ce secteur c’est Apple avec Iphone OS qui a été introduit il y a déjà 3 ans.

En dehors du fait qu’elle soit réussi, la nouvelle interface ré-introduit une forme de simplicité.

Etienne Mineur s’en prend sur son blog notamment au design d’Apple « qui se ringardise ». Mais ne serait-ce pas du fait de l’avoir tellement copié, décliné sous toute ses formes qui produit cet effet de lassitude ? Et puis, c’est vrai, le look « aqua » d’OS X fête ses 10 ans. Alors effectivement il temps de passer à autre chose !

En savoir plus sur Windows Phone 7 series

L’art génératif, ou la représentation des données en mode visuel

Vendredi 12 février 2010

visual_compexity

Manuel Lima, Nokia Londres, designer d’interaction, nous propose Visualcomplexity.com dont le sujet est basé sur ce qu’on appelle « art génératif ».

Les points de départ sont souvent les informations structurelles de la société qui déterminent les tendances culturelles et les modèles émergents aujourd’hui.
http://www.visualcomplexity.com/vc/
Les résultats visuels sont assez beaux, très graphiques

Art génératif, la représentation des données :

John Maeda avait ouvert la voie mais il est vrai qu’on voit apparaitre plein de projets créatifs notamment autour de la galaxie processing :
http://processing.org/exhibition

Un autre Cador sur le sujet : Aaron Koblin
http://www.etapes.com/actus/video-interview-de-aaron-koblin
http://www.aaronkoblin.com/work.html

Indémodable LEGO

Mardi 2 février 2010

On pourrait penser qu’avec plus de 50 ans de bons et loyaux services, la marque aux briques de couleurs serait désuète. Or celle-ci est toujours tendance et surfe même sur nos nouvelles technologies.

lego_mur
legoclick

Après avoir revisité nos plus grands moments photographiques :
avec justesse, celle-ci s’amuse a envahir nos écrans et nos oreilles avec le Stop Motion sur cette bonne vieille musique de nos consoles C64, Atari ou encore Amiga.

stimpson1
Plus sur izergrid

lego_tank-550x388
Plus sur Fubiz

moon
Plus sur Flickr

Lego s’invite même dans notre vie quotidienne avec ces disques durs, portefeuille, sculpture…
Serait-ce pour ne perdre les contacts avec ses anciens joueurs, ou tout simplement est-elle ancrée dans nos gênes ?

wallet1
Lego Wallets sur Fubiz

lego_kitchen
Lego kitchen sur Fubiz

lego_socle
iBlock Speaker Dock sur w3sh.com

et nos jeux vidéo ici :

lego_vetement
et nos vêtements

Et pour se faire connaître, amourache de nos enfants celle-ci n’hésite pas a se lancer dans la réalité augmentée,

Les objets de la vie quotidienne
Garder le lien avec ses anciens joueurs

La réalité augmentée
lego_realite
Augmenter l’expérience de marque ici et

et sans oublier le parc d’attraction

lego_ville1
et autant de blog à son effigie

lego_logo
s’amuse a refaire les logos de ses grande marques.


et comme disait cette publicité de 1980 :
LEGO un nouveau joueur pour tous les jours.

Verbatim lance son site événementiel interactif

Lundi 1 février 2010

Un site événementiel pour célébrer le leadership de Verbatim sur le secteur des supports d’enregistrement.

verbatim

Vous êtes invités à créer votre monstre « robotique » à partir de clés USB, de DVD et de carte mémoire.

S’en suit, un affrontement entre votre robot et un monstre existant.

Autant le dire tout de suite, la réalisation est impeccable, ce qui lui a valu un beau « site du mois » (S.O.T.M) chez thefwa.com.

Une DA sobre, centrée sur l’animation

La qualité et la fluidité de l’animation 3D temps réel est impressionnante. Du jamais vu à ce niveau pour du Flash.

http://www.verbatim.jp

Lisibilité des sites Web

Vendredi 29 janvier 2010

Des choix typographiques et du design

lisibiliteweb3

La couverture n’est pas très belle (c’est la collection qui veut çà) mais la qualité du contenu l’est inversement.

  • Marie-Valentine Blond
  • Olivier Marcellin
  • Melina Zerbib
  • Préface d’Etienne Mineur
  • Ed. EYROLLES

Une table des matières didactique :

1ère partie :

  • Ce qu’il faut savoir sur la lisibilité
  • Le mécanisme de lecture
  • Mesure et facteur de lisibilité
  • Écrire pour être lu
  • L’accessibilité

2ème partie

  • La typographie et le web
  • Histoire des caractères conçus pour l’écran
  • Les caractères et le web
  • Choisir un caractère

3ème partie

  • La mise en écran, la structuration des contenus et la diffusion sur le web
  • Structurer le contenu web
  • La composition des textes sur le web
  • La diffusion sur le web

Aujourd’hui, Apple : Génie Culte & Mystère

Lundi 25 janvier 2010

logo-apple7-1-253-3

Un très bon article du Monde sur le culte et le mystère Apple et l’Event qui dévoilera la tablette du constructeur. Le monde revient aussi sur le fonctionnement de l’entreprise et dresse un portrait de Steve Jobs en demi teinte.

Ici l’article du Monde

Flash, WebGL, Unity : prenez possession de l’interface avec HelloEnjoy !

Mardi 29 septembre 2009
helloenjoy

Comme un « echo » à hello World, HelloEnjoy est un site d’agence, qui nous fait une belle démonstration en 3D temps réel en Flash (c’est la mode du moment), c’est plutôt très bien réalisé, la typo est manipulable à souhait, le tout gérant l’inertie et la gravité. ENJOY !

http://www.helloenjoy.com/

Stéphane & Francis

  • Les sorties

    • aperçu pour SODEXO

      > SODEXO

      La Planète Sodexo présente son nouveau site Web.

    • aperçu pour Claro-Afflelou

      > Claro-Afflelou

      Le dernier-né d’Afflelou simplifie vos démarches opticien, n² les digitalise.

    • aperçu pour Kiabi Emploi

      > Kiabi Emploi

      Postuler en ligne sur le site de Kiabi ? C’est désormais possible grâce à n².

    • aperçu pour Ryder Cup 2018

      > Ryder Cup 2018

      Pari gagné : la France accueillera la Ryder Cup 2018, quelque six mois après la mise en ligne du site de soutien n²

    • aperçu pour 48h Brico !

      > 48h Brico !

      Weldom, bricoleur averti, partage ses bons plans sur 48h Brico.

    • aperçu pour Athlenergy

      > Athlenergy

      Areva vous remet en forme grâce à Athlenergy : un site dédié au partenariat entre la marque et la FFA.

  • Les lectures du moment

    • Dont’ make me think, a common sense approach to web usability
      de Steve Krug
      éd.New Riders, 201 p.

       

    • Lisibilité des sites web : Des choix typographiques au Design d’information,
      de Marie-Valentine Blond, Olivier Marcellin, Melina Zerbib,
      éd.Eyrolles, 313 p.

    • The Visual Miscellaneum : A Colorful Guide to the World’s Most Consequantial Trivia,
      de David Mccandless, éd. Collins Design, 256 p.

    • L’essentiel d’ActionScript 3,
      de Colin Moock, éd. O’Reilly, 959 p.

    • Designing Interactions,
      de Bill Moggridge, éd. The MIT Press,
      766 p.

    • Ergonomie Web,
      d’Amélie Boucher, éd. Eyrolles, 426 p.

  • On aime / on n'aime pas

    • > FFFFOUND

      like

      Le plein d’images bookmarké.
      Seul hic il faut être parrainé pour devenir membre