Magazines interactifs
Un nouveau magazine interactif nommé Glo (réalisé en html/javascript) par MSN vient de faire son apparition.
L’interface est vraiment très bien réalisée. La navigation principale se fait via scroll vertical.
On peut accéder aux détails d’articles via 1 click sur des boutons latéraux.
Présence constante du sommaire sous formes de vignettes marque page dans une barre semi-volante.
Idéal pour iPad. Of course.
On avait déjà vu ce concept un peu dans la même veine.
2010 tendences du web
Les tendances : Simple, aplati, fenêtres modales, énormes header, photos grand format, navigation au clavier, grosse typos, sites web d’une page, beaucoup de javascript.
Via : Smashing Mag, Web Designer Wall
Le design pour mobile
Quelques règles indispensables et erreurs à éviter afin de réaliser une interface pour mobile intuitive et efficace
- N’afficher que les éléments qui sont essentiels. Ne pas abuser de features et d’options sur un écran.
- Nos doigts ne sont pas des pointeurs de souris : il faut réaliser des boutons larges et distincts.
Si c’est impossible, il faut utiliser les mouvements multitouch (notemment le zoom) et/ou ajouter plus d’écrans avec moins d’options dessus. Réaliser un processus de selection séquentiel (grouper et dissocier) - Attention la taille des pixel est plus petite sur l’iPhone et android phones (~+163 dpi) que sur l’écran de notre ordinateur (~+100 dpi). Donc à même résolution les screenshots vus sur un émulateur iPhone apparaitront plus grand qu’en réalité.
- Avoir un design cohérent avec l’OS. S’aligner sur le style, thème etc. du systeme. Ne pas essayer de trop casser les règles. C’est du temps donc de l’argent perdu pour pas de gain réel. Le branding de sa marque doit se jouer de façon subtile (couleur)
- Ne pas oublier que le tel n’est pas un ordinateur. On l’utilise dans des conditions différentes et dégradées (luminosité ambiante, bruit, qualité du réseau, etc.)
Source : Smashing Mag(1/2), Smashing mag 2/2, Jacob Nielsen’s Mobile Usability, Iphone UI guidelines, Android U.I guidelines, Alex Komarov
L’interface du Zune HD
Le Zune HD, (ipod touch de microsoft) vient de sortir.
Oui on est dans le multitouch à la sauce iPhone, mais là où c’est intéressant c’est en terme de navigation et d’interface utilisateur.
Un travail original a été fait autour du graphisme et du jeu autour des typo. On aime ou pas. Graphiquement parlant c’est joli et ça change. Après je reste sceptique quand à l’ergonomie et la prise en main pour les utilisateurs novices.Pas d’effets de bouton, pas de suggestion de cheminement pour l’utilisateur. Enfin c’est “classe”
Quand les pub secouent flash ou vice et versa
Après l`exemple de Warioland sur Youtube on retrouve le meme concept avec madagscar2 sur Allocine.
On fait trembler l`écran, les persos sortent du player vidéo.. Bref un bon rendu, moins efficace que celui realisee pour Warioland mais sympathique tout de meme.
100+ menus de navigation
De très bonnes idées de design de menus CSS. Via VandelayDesign
Pour mettre en pratique tout ca, voici des scripts de menus en js
Photoshop cs4 suédé
Une jolie pub de Photoshop cs4. Totalement dans la Tendance sweded..
Vodafone Australie en hippy style
La nouvelle campagne de pub print de Vodafone Australie présente uniquement dans les aéroports prend un style hippies 70`s . Tout est question de tendences.. MTV fait de l`organique, Vodafone du hippie..
Redoutablement bien réalisée par l`agence Yello. Le concept est Go Global. Tu voyages, Vodafone te suit.
affichage de donnees css/html
Après mon post sur les tableaux, un petit aperçu de ce que devrait donner un bon affichage de données en CSS. Voir l`article de sixrevisions.com
Light drawing in motion
Une excellente vidéo de snowboard utilisant l`effet du moment : light writing
Un joli menu en css facon apple style
Voila un petit tuto sympa pour créer ce genre de menu élégant discret et tendance.
Voir le tutoriel.Et la Demo.
demain sera motion & colorfull everywhere
En tombant sur les projets de philips, je ne peux m`empêcher de partager mes petites idées de demain.
Ça fait un bout de temps que ça trottait au fond de mon crane mais la je me dis que c`est pour bientôt (allez dans 5 -8 ans)
Avec l`apparition de l`encre électronique , les surfaces pourront donc être recouvertes de peintures “électronique”, donc animées et interactives.
Philips nous parle de
- skin tatoo ou le tatouage est anime et interactif. Il est en fait pose sur un film transparent qu`on collerait sur la peau.
- skin dresses qui fait des vêtements animes et illumines.
- SkinTile : des bijoux animes en couleurs qu`on pourra coller sur le corps
Donc au niveau artistique ça pourrait être vraiment chouette et je me dis que demain on verra, entre autre, sur les murs de nos villes, sur les camions de marches et nos trains de banlieues des graffitis animes et pleins de couleurs!
Alors checkons régulièrement Graffiti Research Lab, demain pourra être la plus vite que prevu !
Publicite pour Jo
Cette pub est magnifique et bougrement efficace.
Li-ning est une compagnie chinoise sponsor de l`équipe de chine.
grrrrr…… ça donne de la force. (agence : Leo Burnett, Shangai)
Tout aussi efficace, mais pas le même registre la campagne Print de Amnesty international. Et oui c`es aussi ca les JO “After the Olympic Games, the fight for human rights must go on” (agence Tbwa, Paris)
Source : artskills
Animoto pass en Haute DEf
Animoto, le site qui a retourné (modernisé, démocratisé) les slideshows d’images en video, passe à la vitesse supérieure en permettant cette fois de downloader le slideshow en qualité DVD ou de le recevoir en DVD.
Il etait aupraravant limité à 1m30′ et en taille tres réduite (exploitable uniquement sur le web)
Voilà qui va ravir les professionnels.. marges en perspectives..(5$ le download en qualité DVD)
PSD2CSS Online : uploadez un psd et downladez html+css
C’est assez génial comme service et quand bien même Photoshop le fait en créant des tranches et en exportant en html+images, cette application online est lui plus orienté CSS.
Avant de l’uploader il faut quand meme transformer votre psd : aplatir des calques et séparé le contenu du contenant.
Le résultat final est pas mal du tout.
A garder sous le coude en cas de rush.