10 refontes de logos en 2012

Voici un article intéressant à propos de la refonte de logos durant l'année 2012.
http://www.creativebloq.com/10-biggest-logo-redesigns-2012-12121452

Tendances visuelles découlant de systèmes d’exploitation : après le web 2.0 provenant d’Apple, l’interface de Windows 8 fait son apparition.

Nous voyons depuis quelques années, beaucoup de dégradés, d’ombres, d’effets de réflexions et de miroirs. Ces éléments graphiques furent à l’origine inspirés de design créés par Apple. Cette fois, c’est Microsoft qui part le bal en introduisant la nouvelle interface Windows, fortement inspiré par le style typographique international aussi appelé style suisse. Ce style prône la simplicité et l’efficacité et utilise la typographie et des formes de base. L’interface fût pensé pour être facile d’utilisation sur une tablette ou un téléphone à écran tactile car on le sait, les gros boutons ayant peu de texte facilite la navigation sur ce genre d’appareils.

Microsoft décline son design par la présence d’icônes simples et épurées de couleur blanche, par l’usage de typographie sans sérif et par la présence de masses de couleur rectangulaires ou carrées. La palette de couleur utilisée y est assez vive.

Appelé au départ «interface Metro » (Metro style), Windows dût abandonner cette appellation suite à la menace de poursuite judiciaire de la part de la chaîne allemande Metro AG. Les noms les plus communément utilisés sont Modern UI, interface Windows ainsi qu’interface Windows 8. Le débat fait toujours rage sur le Web au sujet du nom définitif à donner à cette interface et seul l’avenir nous éclairera à ce sujet.

Sources : 
http://www.theinquirer.net/inquirer/news/2198399/microsoft-renames-metro-to-modern-ui
http://www.neowin.net/news/is-metro-now-called-modern-ui
http://www.tomsguide.fr/actualite/Windows8-WindowsRT-Interface-Windows-Metro,18720.html
http://www.pcinpact.com/dossier/600-l%E2%80%99interface-le-mauvais-carreau-de-windows-8/1.htm
http://fr.wikipedia.org/wiki/Windows_8
http://onepartscissors.com/2012/04/web-design-trends-into-2013.html
http://en.wikipedia.org/wiki/Metro_(design_language)
http://www.fastcodesign.com/1669407/microsoft-gets-brutally-honest-about-redesigning-windows
http://fr.wikipedia.org/wiki/Style_typographique_international
http://www.01net.com/editorial/571209/windows-8-microsoft-renomme-l-interface-metro-en-windows-8/

Le défilement parallaxe

Pour ajouter un effet de profondeur aux sites Web, les designers Web ont recours à une méthode utilisée depuis longtemps dans le domaine du jeu vidéo : le défilement parallaxe.

Celui-ci consiste à faire bouger différents plans à différentes vitesses pour créer un effet de profondeur et de mouvement. Par exemple, au premier plan un personnage bougerait rapidement, au second plan une forêt lointaine bougerait à vitesse moyenne et finalement au troisième plan des nuages bougeraient à vitesse lente. Tout ceci dans le bus de créer un effet de profondeur.

Le mouvement peut être associé au défilement du site (scroll) ou au mouvement de la souris et est exploité de différentes façons. Vous en trouvez aussi des exemples sur le site de ProWeb au moyen des icônes de médias sociaux qui se chevauchent dans l'arrière-plan et dans la bannière présentant les services dans le haut de la page.

Cet effet, bien utilisé, offre de multiples possibilités au designer Web. À noter qu'il faut garder la lisibilité, la facilité de navigation et le temps de chargement en tête lors de l'utilisation d'un tel effet dans un site Web.

Source :
Définition du défilement parallaxe
http://fr.wikipedia.org/wiki/D%C3%A9filement_parallaxe

Six tendances prévues pour 2013 (anglais)
http://smashinghub.com/web-design-trends-in-2013.htm

Explication des effets de parallaxe
http://design.ikomeo.fr/les-effets-de-parallaxe-webtrends

Liens intéressants :
21 exemples de défilement parallaxe (anglais)
http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

30 sites contenants un effet parallaxe (anglais)
http://www.awwwards.com/20-great-websites-with-parallax-scrolling.html

On peut se passer de Visio ?

Les outils de quand t'a pas Visio

http://www.gliffy.com/
Bon éditeur online, sauve juste en image, fait en Flash (html5 en preview).
Plusieurs beaux modèles de base.
Permet la collaboration, et sauver xml.

http://www.diagram.ly/
Un peu moins beau que gliffy mais html5.
A (entre autres) des templates uml et des clipart.
Permet de sauver en xml (et de réouvrir ailleurs ce même fichier...) mais pas de collaborer.
Il parait qu'on peut ouvrir des fichiers Visio également !

https://bubbl.us/
Vous avez besoin très rapidement de mettre vos idées sur un canvas ?  Ça relie des bulles ensembles (juste à survoler les bulles et peser sur les petits icônes qui apparaissent autours.

Go analyse go !

Ici un lien vers des alternative (que je ne recommende pas particulièrement...)

Savoir s'adapter, de plus en plus vrai sur le Web!

Vous avez fort probablement déjà été obligé de « zoomer » (redimensionner) ou « scroller » (faire défiler) pour pouvoir consulter un site Web sur un mobile. Ceci est dû au fait que ces sites ont été conçus pour un écran d'ordinateur.

Ce problème peut être évité grâce au « responsive design » (conception adaptative ou réactive).

Cette méthode consiste à permettre à la mise en page d'un site Web de s'adapter aux divers appareils et à leur résolution d'écran respective.

Le site ainsi conçu changera de disposition selon la taille d'écran de l'appareil sur lequel il est affiché. Au moyen de CSS et de JavaScript, la dimension et la disposition des images, titres, textes et autres éléments pourra se modifier et permettre d'accéder à l'information du site de façon agréable. Ce type de design fluide s'oppose au design fixe de la méthode habituelle.

Il existe aussi un autre moyen de créer un site adapté aux divers appareils; il s'agit de faire plusieurs versions d'un même site. Ces versions séparées seront de diverses tailles et seront pensées pour faciliter la vie de l'utilisateur. Sur un appareil mobile par exemple, on pourrait trouver des options de géolocalisation ou de recherche de restaurants à proximité. L'utilisateur d'ordinateur de bureau, celui qui consulte un site sur sa tablette le soir bien assis dans son sofa et celui qui navigue sur son cellulaire en se déplaçant, n'ont pas les mêmes besoins.

Voici une comparaison de chacune des méthodes :

Responsive design (conception réactive) :

• Une seule version doit être développée
• Intégration plus complexe (compatibilité avec les navigateurs, CSS et code HTML plus poussé).
• Conception du site en blocs modulables.
• Maintenance plus facile
• Adapté pour les sites informatifs
• Moins de latitude dans le design (nottamment au niveau des images et de la disposition)

Versions séparés :

• Utilisation adaptée à l'appareil sur lequel il est consulté
• Couteux en temps et en argent lors de la conception
• Maintenance plus difficile
• Design plus facile car adapté au média visé

La conception du site débutera par la version mobile pour téléphones intelligents, comportant moins d'éléments et étant plus limitée. Elle se poursuivra jusqu'à la version la plus complexe, soit la version pour ordinateur de bureau ou portable.

Par Serge Bilodeau

Sources :

Explication détaillée du concept de « responsive design » (conception réactive)

http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/

Tendances du design Web pour 2012 – bref résumé du « responsive design » (conception réactive)

http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/

https://www.axialdev.com/blogue/2012/06/design-les-tendances-web-pour-2012/#.UDvd-dZlSAp

http://webdesignledger.com/tips/web-design-trends-in-2012

Définition du « Responsive Web Design » (conception réactive)

http://fr.wikipedia.org/wiki/Responsive_Web_Design

Tendance Web 2012: les menus fixes

Le Web et les technologies s'y rattachant évoluent rapidement ce qui entraîne de nouveaux styles graphiques et de nouvelles idées. On voit apparaitre des pages plus longues, ce qui est particulièrement vrai pour les blogues, et l'utilisation du 'scroll' est de plus en plus commun.

Cette façon de « designer » les sites a entraîné une utilisation de plus en plus fréquente de la navigation en position fixe.

En effet, les menus sont de plus en plus ancrés dans le haut d'une page et restent ainsi accessibles en tout temps alors que le contenu défile sous celui-ci.

Les barres latérales de réseaux sociaux et autres informations pertinentes sont souvent fixés à gauche de l'écran. Elles sont facilement repérables et ne nuisent en rien au contenu et au visuel du site, particulièrement depuis l'avénement des écrans panoramiques.

Liens intéressants:

11 exemples de menu fixe

http://webdesigncrowd.com/11-inspirational-fixed-position-menus/

21 exemples de menu fixe

http://webdesignledger.com/inspiration/21-examples-of-fixed-position-menus-in-web-design

Le module d'extension "Sticky Social Bar" pour votre Blogue

http://codecanyon.net/item/sticky-social-bar/1675421

Exemple d'utilisation du "Sticky Social Bar"

http://codecanyon.net/item/sticky-social-bar/full_screen_preview/1675421

Tutoriel pour installer 'Sharebar' dans Wordpress

http://www.youtube.com/watch?v=rENOWwm4B0o

Sources:

Article sur les tendances Web en 2012

http://webdesignledger.com/tips/web-design-trends-in-2012

Article sur les tendances Web en 2012

http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/

Site de tutoriels

http://autourdututo.fr/

Pour tous les fans de gadgets

Aller faire un tour sur ce site la.
http://iwanties.com/category/tech/page/10