Les grandes tendances du webdesign en 2019 !

Comme la mode, le webdesign a ses tendances et ses code et en 2019 plus que jamais le mot est donné sur la créativité et l’originalité de celui-ci.

  1. Le material design a sa place en 2019.

Le material design, le design crée par Google a bien sa place en 2019, remplaçant le flat design, avec des couleurs uniforme et en harmonie et le mot d’ordre et la simplicité mais il y a aussi des perspective et des ombres.

2. Le vintage, le retour incontournable.

Que ce soit dans la mode ou dans le design, le vintage a fait son grand retour, tournée vers des tendances plus années 70 et années 90. On peut même parler de tendances plus anciennes car il y a un léger retour de l’art déco et même de l’art nouveau qui datent des années 30-40.

Avec des formes très géométrique, des couleurs vives mais aussi des couleurs plus tendre et pastel, le vintage est bien présent dans les tendances de 2019.

3. Des dégradés, en veux-tu, en voilà.

On peut rajouter à nos couleurs en 2019, la grande tendances des dégradés, qui sont jugés moins agressives.

4. Minimaliste, du vide pour aller à l’information.

Efficacité, c’est le mot d’ordre pour le minimalisme, aller au plus simple pour l’utilisateur et qu’il trouve les informations le plus vite possible.

5. L’arrivée de la réalité augmentée.

Après avoir fait sa place dans les jeux-vidéo, beaucoup de site de e-commerce utilisent la réalité augmentée pour présenter des produits, cela nécessite juste un appareil avec une caméra. Certains site peuvent proposer de tester, des lunettes ou un chapeau ou même voir si un meuble irait dans votre habitation comme ikea.

6. Des illustrations pour expliquer un concept.

Les designers n’hésitent plus à utiliser des illustrations pour expliquer un concept, une idée, laissant les formes géométrique un peu de coté pour préférer des formes plus arrondie ou même des illustrations.

7. Les typographies mise en avant.

En 2019, les création typographiques seront présentes, avec un peu de CSS et quelques manipulations en Javascript, nous pourrons créer des créations magnifique et très graphique.

8. Le « brutalisme » et les pages déstructurées pour une vision plus originale.

Quelques peu, en contradiction avec le minimalisme, le brutalisme est une mouvance qui cherche à créer des pages déstructurées et atypique. Sans vraiment de règle sur les aspect graphique cela reste complètement originale.

9. Le one-page, toujours là et ça continue.

Pour beaucoup le one-page est signe de facilité, mais il faut se pencher sur quelques sites pour se rendre compte que le one-page pour être signe d’originalité et voir même peut raconter une histoire, qui nous donne envie de scroller encore et encore, avec des effets de parallax, notre one-page peut devenir vraiment surprenant et atypique.

10. Des animations, pour donner vie au site.

Des animations plus vives seront grandes tendances sur mobile notamment mais aussi sur bureau.

Pour conclure, 2019 nous offre un pannel que ce soit dans les couleurs et de tendances graphique et de webdesign, où le mot d’ordre est la simplicité et l’originalité.

N’oubliez pas restez créatif.

Source :

Web design trends

Graphiste.com

Codyhouse, un framework et des expérience web.

Vous avez toujours voulu avoir un carrousel un peu plus original ou une manière très graphique de présenter un produit sur votre site, maintenant avec Codyhouse c’est possible. Ce framework, au delà d’être un framework classique,  vous propose aussi un librairie d’expérience web.

Ce framework est comme je disais auparavant un framework tout à fait classique, ce qui le rend plus particulier c’est qu’il y a des « expériences web ».

C’est différentes expériences, ce présente comme ci-dessus, cela permet de créer des tas de choses assez intéressantes et intuitives, et graphiquement superbe. Ces différents expériences peut être des effets, des navigation et on a même une partie UX.

Du coté du framework, il est tout a fait classique mais il reste assez intéressant.

Vous pouvez même retrouves des tutos sur Youtube pour utiliser ce framwork.

Voilà un petit framework, assez intéressant pour bien commencer l’année 2019.

Et n’oubliez restez créatif

Source :

Le blog du webdesign

Codyhouse

Motion Capture ?

Aujourd’hui je voudrais vous présentez ce qu’est le motion capture.

Le motion capture ou la capture de mouvement en français, est une technologie qui permet d’engistrer des mouvements d’une personne ou d’un objet pour les reproduire virtuellement. Cela a énormément contribué dans l’étude des mouvements humais ce qui a permis d’aider dans des domaines très avancés de la médecine.

Plus récemment, celle-ci a été utilisé dans les domaines du jeux-vidéo et dans le cinéma. Par ailleurs, le premier film qui a été réalisé entièrement en motion capture est Le pôle express (2004).

Comment c’est possible ?

Pour faire du motion capture, déjà il vous faut un Homme, ou animal… auquel nous allons lui ajouter différents capture qui vont saisir les mouvements les plus proches de la réalité, il y a un nombre différents de caméras allant de 8 à 24 pour les captures multiples. Après tout avoir calibrés et que notre sujet a fait sa prestation, nous allons pouvons donner vie à notre personnage numérique. Mais nous allons revenir rapidement sur les capteurs car ils sont importants.

Capteurs optique

Ces capteurs sont importants car ils vont saisir les mouvements aux endroits stratégique du corps c’est à dire les articulations, ce sont les caméras les plus utilisées. Des caméras vont envoyer des rayons infrarouge qui vont réfléchir les capteurs optique du sujet mais cette technique bien qu’elle soit la plus utilisée a un petit problème c’est la sensibilité aux obstacles, entre les capteurs et les caméras si le sujet devait a passer un obstacle.

Capture gyroscopique

Suite au problème, liés aux premiers capteurs, de nombreux studios se tournent alors au motion capture gyroscopique. Ces capteurs permettent de capturer en temps réel la partie du corps sur laquelle ils sont, via un émetteur qui va transmettre auprès d’un ordinateur sans trop s’en éloigner car ils faut que l’ordinateur capte le signal des capteurs.

Capture mécanique

Cette technique marche grâce à un exosquelette construit autour de l’objet. L’exosquelette est une structure dont les angles sont des capteurs angulaires, ceux-ci sont reliés par des fils à un ordinateur. Chaque capteur connait sa position par rapport aux autres, ce qui permet à l’ordinateur de savoir les mouvements de l’ensemble de la structure. Mais il y a beaucoup de contrainte vis à vis des câbles qui doivent être reliés mais cependant cette technique reste très précise.

Il existe d’autres technique pour le motion capture qui sont plus poussés mais que je vais pas détaillées ici.

Cependant cette technique reste très chère, mais elle est rapide en terme de production, nous pouvons l’exemple du film du seigneur des anneaux dont le budget pour le motion capture représente près d’un tiers du film.

Dans les jeux vidéo, cette technique est aussi très utilisé pour donner vie à des personnage et pour qu’ils puissent être le plus réaliste possible, nous pouvons citer l’exemple de L.A Noire un jeu d’enquête qui se déroule dans les années 50.

Cette technique est vraiment impressionnante, et permet de créer beaucoup de choses qui n’était forcément possible auparavant.

N’oubliez restez créatif.

Source :

Realité virtuelle.com 

Youtube motion capture

Youtube motion capture L.A noire

Vapid, un CMS pas comme les autres !

Aujourd’hui je voudrais vous présenter Vapid, qui est un CMS quelque peu original.

Qu’est-ce qu’un CMS ?

Pour commencer, je vais vous expliquer ce qu’est un CMS (Content Management System  ou un système de gestion de contenu en français). Ce terme est utilisé pour désigner un type d’application qui permet de créer un site web dynamique. Le client est totalement autonome et peut mettre son site à jour tout seul. L’avantage d’un CMS c’est qu’il permet la séparation du contenu et de la forme avec un système de templates : l’interface graphique est indépendante du contenu.

Et Vapid ?

L’idée de Vapid, c’est que c’est vous qui va construire votre dash-board, qui va vous servir pour justement effectuer des changements sur votre contenu. Le dashboard se crée seul autour des champs dont vous avez besoin.

Sur l’image ci-dessus, nous pouvons voir qu’à partir du code nous pouvons générer des éléments dans le dash-board pour modifier le contenu du site, donc nous pouvons ajouter ce que nous avons vraiment besoin et le gérer facilement.

Et c’est pas fini ? car nous pouvons aussi créer des fichiers minifiés pour les CSS et JS, ce qui est vraiment très intéressant bien entendu il faut avoirr quelques connaissances en code pour réussir à utiliser ce CMS.

C’est un CMS penser pour les intégrateurs, d’ailleurs tout est dit dans le slogan « for people who build websites for other people », peux ceux qui construise des sites web pour les autres.

N’oubliez pas de rester créatif.

Source : blog du webdesign

vapid.com

 

UI / UX ?

Comme j’aime beaucoup parler de design et de qui est à l’imagerie numérique, j’hésitais à vous parler d’animation ou encore de design mais voilà je voulais qu’on décrypte ensemble l’UI/UX.

Qu’est ce que c’est que ça ??

Déjà on va commencer par l’UX, le designer UX est la personne qui est responsable à partir des objectifs établis par le client de trouver l’équilibre entre ces objectifs et les besoins des utilisateurs par diverses applications, en fait tout produit pour lequel une interface est requise. Pour y arriver le designer UX fera des recherches sur les utilisateurs pour savoir qui sont exactement les clients. Donc c’est celui qui va réfléchir à la mise en avant du produit et penser un peu à partie marketing.

Et pour l’UI

Si on devait le dire grossièrement, c’est la partie plus créative si on peut dire. Bien entendu, il participe dés le départ du projet avec le client et le designer UX et s’occupera d’un guides des styles qui contiendra tous les visuels liés au projet. Concrètement, on peut dire qu’il est en quelque sorte un directeur artistique sur le projet et veillera que la charte graphique est respectée durant le projet et le designer UX lui veillera que les fonctionnalités soient respectées.

C’est un très gros travail d’équipe, les designers UI et UX travaillent en symbiose pour que le projet soit viable.

Beaucoup d’entreprise cherchent à mettre les produits en avant avec une forte identité graphique et une bonne utilisation client.

N’oubliez pas rester créatif !

Source : ici 

Avoir des vêtement sur mesure grâce au scan 3D

Qui n’a jamais rêvé d’avoir un pantalon où on pas besoin de sautiller pour le fermer ou encore d’une chemise qui n’a pas besoin d’être retaillée parce qu’elle n’est pas assez cintrée, aujourd’hui c’est possible grâce au scan 3D.

On peut trouver beaucoup d’entreprise qui aujourd’hui utilise le scan 3D pour vous proposer des vêtements sur mesure, comme par exemple le bouton noir qui propose de faire un tailleur sur mesure avec le scan 3D.

Alors comment ça se passe ?

Déjà, première étape est pas des moindres il faut choisir son tissu, et voir quel tailleur il faut, normal c’est du sur mesure après tout. Mais après on peut vraiment tout personnaliser.

Puis le scan 3D, c’est comme entrer dans une cabine d’essayage mais au lieu de vous changer pour essayer, cette cabine va vous scanner et elle va prendre plus de 100 mesures en 10 secondes donc en quelques secondes on aura un modèle 3D tout fait et prêt à l’emploi.

Et donc l’étape finale qui est logique c’est la confection grâce au scan 3D, on pourra faire des patrons et donc faire un tailleur sur mesure et vraiment adapté à la morphologie à la personne.

C’est bien beau mais le prix dans tout ça ??

En moyenne il faudra compter un peu plus de 200€ pour un tailleur personnalisé et sur mesure.

Personnellement j’adore l’idée qu’on puisse grâce au scan 3D faire des vêtement vraiment bien adaptés à la personne surtout qu’on a du mal a trouver sa taille ou qu’on est pas satisfait des standard des vêtement vendu dans les boutiques.

Bien sûr, la boutique ne propose pas que des tailleurs pour les hommes, on peut aussi faire une veste, chemise, jean et autres vêtement et il y a une collection pour les femmes.

Vous pouvez retrouvez la boutique du bouton noir sur facebook >ici<

Site de la boutique >ici<

Vous pouvez dans cette vidéo une personne qui teste le scan 3D de la boutique du bouton noir.

Et n’oubliez pas restez créatif

Source :

http://www.bouton-noir.fr/

Bouton Noir

Le Motion design !

Aujourd’hui nous pouvons créer des animations en CSS et en Javascript avec bien sûre, ces différentes bibliothèque mais j’aimerais vous parlez aujourd’hui d’une autre technique qui permet de créer des animations, utilisés dans le domaine du web ou même dans l’audio-visuel qui le motion design !

Déjà c’est quoi le motion design ?

Eh bien pour faire au plus simple, c’est de l’animation (non c’est pas vrai) mais qui peut toucher dans beaucoup de domaines et avec beaucoup de technique, une animation en motion design peut être abstraite, réaliste, informative et j’en passe et elle peut être en 2D, en 3D, en images de synthèse…

Par exemple la vidéo du studio Black Ship Studio explique bien ce qu’est une animation dite « motion design », raconter une histoire dans un style simple mais graphique, ce qui permet de capter l’attention de son auditoire.

Et on peut en faire son métier ?

Oui, quelle question il y a des personnes spécialisé dans ce domaine, le plus souvent indépendant ou travaillant dans des studios.

Bien entendu il faut être artiste (sinon ça risque de devenir compliqué), être capable de pouvoir imaginer toutes étapes de son animation et créer un scénario.

Etre à la page de ce qui se fait, c’est normal aussi, il faut être au courant des dernières tendances de design ou graphisme qui se font.

Il faut savoir monter une vidéo en rythme et bien entendu toucher sa bille en logiciel montage de vidéo.

Parler Anglais c’est quand même mieux.

Si vous avez toutes ces qualités, eh bien c’est génial vous pouvez espérer (en trouvant une bonne formation ) devenir motion-designer ! vous pouvez être fière !

Voilà pour les qualités du motion-designer, je pense faire un article sur quelques animations que je trouve jolies.

Et l’intérêt du motion design ?

Eh bien raconter des histoires simple et efficace dans un univers graphique bien défini, déjà !!

Après bien sûr, on peut présenter un produit, un concept, une étude on peut aussi animer un infographie et donc insister sur certains aspect de celle-ci.

C’est sur ce que je vous laisse avec une dernière animation en motion design !

Une animation en motion design, doit être courte, pédagogique, dynamique, esthétique !!

Et n’oubliez pas rester créatif !!

 

Être au courant des dernières tendances dans le graphisme !

Nous avons vus ensemble depuis un certain temps comment rendre avec pleins d’outils sur le web notre site plus beau ! Mais, c’est bien joli de le rendre plus beau mais il faut être à la mode ! à la page ! à la dernière tendance bref il faut savoir ce qui se fait et être au courant des dernières tendances.

Pourquoi ?

Pourquoi de quoi ? Regarder tous ces sites mais pour être à la page les enfants voyons, il faut savoir ce qui se fais pour être dans la hype et surtout créer vous aussi à votre tour des nouveautés et des sites superbes !

Alors je vais vous donner quelques sites pour être au courant de tout ce qui fait dans le domaine du design et du graphisme en général ! Allez hop ! On est parti !

Le plus classique mais efficase Pinterest ! 

Eh oui, Pinterest ce n’est pas que pour rechercher des recettes d’apéro dînatoire, on peut très bien chercher et trouver des articles et nouveautés hyper intéressante dans tout ce qui fait que ce soit le design, le front-end aussi, les templates, les animations, on peut donc s’y retrouver dans tous les domaines !! Et surtout à les partager ! Créer des tableaux et des sous tableaux (oui oui des sous tableaux vous m’avez bien lu !! ) Parce que pourquoi quitte à fouiner sur des nouvelles idées faut pas hésitez à la faire a plusieurs !!

Codprods

Codprods est un blog qui vous permet de voir pleins de site à la page et divers article sur celles-ci, vous pourrez aussi trouver des tutoriaux pour vous aider à créer un site au top. Vous pourrez trouvez aussi des « collectifs » qui sont comme des tableaux avec diverses infos sur les nouveautés ou des tutos, qui vont vous ramener sur différents articles du site. Bref, un site à suivre et à voir !

C’est parti ->ici<

Dribbble

C’est un site qui se dit être « le réseau social le plus important pour tous ceux qui s’intéressent au design » c’est un site super intéressant avec un super équipe dynamique (d’ailleurs si vous voulez vous pouvez travailler avec eux !) et c’est super intéressant de voir tout ce qui est design et même des animations ! Par contre il faut créer un compte! Mais foncez parce que je le trouve super intéressant !!!!

C’est parti >ici<

Le plus connu Webdesigner Trends !

C’est Le site à suivre pour être au courant des tendance du webdesign et franchement je l’adore ce site est vraiment super bien !! Mais ce site ne s’arrête pas qu’aux tendances du webdesign on peut trouver des articles sur différents domaines artistique !

C’est parti >ici<

Cela vous fait déjà pas mal en site à surveiller et à fouiner en long en large et en travers pour vous créer des sites tout beau et tout propre et surtout être au courant des dernière tendances et qui sait papoter un peu avec d’autre personnes qui travaille dans le domaine du web !!

Alors hésitez pas à fouiner ces sites et n’oubliez pas d’être créatif !!

 

Une image crée en HTML et en CSS ?!

Qui vous a dit que le HTML et le CSS était juste là à faire un beau site web pour vendre vos cookies !

Aujourd’hui, j’aimerais vous montrer les œuvres d’une jeune Anglaise Rachel Bull, qui créer des images de personnage animés entièrement en HMTL et en CSS.

Ne soyez pas surpris ça existe !

Et bien oui ! ça existe ! Rachel Bull, développeuse Front-End et designer, nous montre que le codage HTML et CSS peuvent être poussé jusqu’à créer des image entière !

D’ailleurs vous pouvez votre son code =>ici 

Je ne vais pas vous faire le détail, de tout son code mais je peux vous dire que cela me donne envie de continuer à apprendre et à améliorer mon niveau en HTML/CSS.

Sur ce, je vous laisse sur certaines de ses œuvres qui sont véritablement superbe.

Et n’oubliez pas restez créatif !!