Masques CSS : vers de nouveaux usages dans le webdesign- Vincent De Oliveira

masques css

 

Les masques existent depuis « presque » toujours dans Photoshop, c’est même l’une des fonctionnalités primordiales. Aucun designer ne peut s’en passer. Pourtant, c’est tout frais sur le web, en tout cas depuis que la communauté délaisse Flash. En se basant sur mes expérimentations, cette conférence est un tour d’horizon de l’utilisation des masques sur le web. Elle tentera d’expliquer les différences entre clipping et masking (les deux types de masques) en CSS et en SVG en présentant de nouveaux types d’effets visuels ainsi que de nouvelles interactions rendues possibles grâce à eux. Présenté par Vincent De Oliveira Formateur CSS & UI. Auteur du livre CSS3 Le design web moderne.

Source : Paris Web

design & mouvement

Hier je vous parlais du blog d’ELECTRIC STUDIO concernant les nouveautés de la publication Numérique.
parmi, les blog que j’apprécie particulièrement, il y a également le blog du webdesign.

Grands Bravo et merci aux rédacteurs qui continuent de nous transmettre les tendances web et graphiques du moment.
Aujourd’hui 2 articles ont attiré mon attention et je tenais à les partager.

La navigation ergonomique

Depuis quelques années maintenant, les évolutions technologiques (HTML et CSS notament) permettent d’enrichir notre navigation, de la rendre plus fluide, plus ergonomique.
Les possibilités de mouvements et de transitions CSS enrichissent considérablement la navigation.
Et si le scroll vertical reste classique et majoritaire, quelques sites exploitent les innovations, et nous offrent des navigations plus originales.
je vous laisse découvrir l’article et les exemples :

navigation originale

Les logos en mouvement

Depuis quelques temps, et notamment sur les réseaux sociaux, on assiste aux retour en force de gif animés.
Aujourd’hui et pour notre plus grand plaisir à nous graphistes,  les logos se font aussi animés.
Le motion design est et restera un élément important à la communication numérique.
Je vous laisse découvrir les exemples de logos que le blog du webdesign nous a partagé :

logo anime

 

les tendances du web design pour 2015

les tendances du web design pour 2015.
Lors d’un entretien d’embauche, on m’a très récemment demandé quelles seront les tendances du web design non pas pour 2015, mais d’ici 5 ans…
Heu… d’ici 5 ans ?… tout va tellement vite qu’on ne va pas s’emballer, je ne suis pas encore médium !
Toutefois, j’ai répondu à la question en partant des tendances d’aujourd’hui et de celles que je pouvais projeter pour l’an prochain.

J’ai d’abord évoquer le FLAT DESIGN, la notion de simplification visuelle qui permet une lecture plus facile sur supports mobiles.
Des couleurs légères (blanc, gris), pas d’ombrées, on va droit au but, l’optimisation visuelle permet de mettre en valeur le contenu.

Les PICTOGRAMMES et ICÔNES pour illustrer et simplifier la navigation.
Les lecteurs web et mobiles aiment la notion de visuels.
Un pictogramme parle davantage et de manière plus rapide à l’internaute, et permet de simplifier la navigation.
Personnellement, j’utilise beaucoup la police fontawesome, qui est plutôt complète et bien illustrée.

La TYPOGRAPHIE
Avec l’apparition des Google Fonts et de leur intégration très facile, la typographique prend place sur le web.
Elle permet une personnalisation intéressante et apporte une richesse visuelle non négligeable.

Le PARALLAX
qu’il soit vertical, horizontal, réagissant au mouvement de la tablette ou du smartphone, le parallax est l’une des grandes tendances qui je pense, perdurera.
En effet, ce principe permet une navigation enrichie et ludique, et apporte du dynamisme et de la profondeur à une page.

Principe de GRILLES et de RESPONSIVE
En tant qu’infographiste webdesigner,il y a bien longtemps que j’ai compris que le responsive n’était pas une option, mais une logique obligatoire pour tous les sites web à venir.
La lecture multi-supports est désormais généralisée et un site non responsive n’est plus cohérent face à la demande.
Les grilles modulables et visuelles sont apparues avec le responsive design et offrent des possibilités de graphisme et de lisibilité très utiles.

Un SITE WEB et une APPLICATION
De plus en plus de marques complètent leur site web avec une application mobile.
En effet, la lecture n’étant pas la même sur supports mobiles que sur le web, il est judicieux d’adapter l’usage au support.

La MONOPAGE
L’apparition du site simplifié à une seule page est très pratique et envoie une nouvelle notion de navigation.
un petit exemple sur mon site : www.sophierohart.fr
Plus simple, plus directe.
Attention toutefois au temps de téléchargement de la page. En effet, si elle est trop chargée, le temps de chargement sera long et la navigation moins agréable.

Le STICKY MENU
Oui ce menu magique qui vient se fixer en haut de votre page et reste présent jusqu’au bas de page.
Une nouvelles fois, les principes d’ergonomie et de simplification sont les grandes tendances de l’année à venir.

La PHOTO et la VIDEO
des visuels pleines pages, slider, slideshow, des vidéos etc. L’avenir du web est visuel.
L’image, le son, la vidéo seront, je pense, des éléments récurrents et primordiaux dans la navigation.

Les RESEAUX SOCIAUX et la PERSONNALISATION
Je pense que les réseaux sociaux tiendront une place toujours plus importante dans le web futur.
La « narcissisation » qu’ils engendrent sera toujours plus forte, et les commerces devront innover davantage pour attirer leurs clients avec des campagnes hyperpersonnalisées.
(rapport aux big data et aux données collectées)

La REALITEE AUGMENTEE
Amorcée en 2014, la réalité augmentée fera partie de nos quotidiens sur nos différents supports connectés.

Pour conclure, les tendances prochaines en web design seront axées sur l’ergonomie (UI et UX), la navigation simplifiée, et la richesse visuelle.
Nous chercherons à apporter des expériences de navigations toujours plus enrichies et agréables.
Les réseaux sociaux et les collections de données permettront une personnalisation extrême des campagnes e-commerces.

Un avenir très prometteur en terme d’innovations et de culture visuelle.
Des tendances en webdesign qui sont décrites et imagées dans ce petit compte rendu assez complet que je vous invite à lire :
[slideshare id=38916551&w=427&h=356&style=border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;&sc=no]