mood design

l'alternative logicielle

image pour design responsive

Tumult . HYPE pro

le webmotion sans douleurs

le 3 novembre 2019 :: par joel Berne

  1. domaine :: bannière, animation, site, design, mockup et applications
  2. prise en main :: très simple, mise en route facile
  3. prérequis utiles :: logiciel de graphisme ou de vidéo
  4. concurrents :: Animate, Muse, Google Web Designer et JQuery
Avantages & inconvénients

    +les plus

  • prise en main facile
  • gestion des projets simplifiés
  • compatible HTML5 et CSS3
  • animations simples et puissantes
  • outils de dessin
  • Pro: symboles réutilisables
  • Pro: gestion du responsive

    les moins

  • pas d'importation SVG éditable
  • Google Font sommaire
  • fonctions avancées avec JS

HYPE 4 Présentation ::

Hype est un logiciel Mac qui permet de créer des animations Web sous forme de bannières animées à intégrer dans des pages HTML, ou des sites Web tous supports. Depuis la version 3, il vous aide à créer des jeux simples interactifs avec sur les téléphones ou les tablettes.

Sa principale qualité est sa simplicté d'apprentissage quelque soit votre pratique des outils de graphisme. C'est une interface graphique pour créer des éléments javascript au même titre que JQuery

Il est décliné en deux versions. Une version de base et une version Pro qui offre en plus des outils classiques de Hype, la possibilité de créer des symboles, de gérer les options responsive et un moteur d'événements physiques.

On peut tester ses créations directement sur un navigateur ou sur son téléphone à l'aide d'un utilitaire gratuit; Hype reflect.

Il est vendu sur le site de l'éditeur ou sur l'AppStore. Son prix varie entre 45 et 90 € selon les versions.

Fonctionnalités :: le tour du propriétaire

Hype est totalement intégré à l'ergonomie à laquelle tout utilisateur de Mac est désormais habitué. À l'instar de Pages ou de Numbers, on est dans une interface épurée sans outils inutiles avec les fonctions dans la barre supérieure et les options dans une barre d'inspecteur à onglet placée à la droite de la fenêtre.

La plupart des onglets ne présentent aucun secret même à un utilisateur non habitué aux contraintes du Web. J'aime à penser qu'il préfigure l'avenir des logiciels de production laissant la part belle à la création et non à l'apprentissage fastidieux d'un outil trop compliqué.

La partie 1 représente le canevas de votre document, comme on peut le trouver dans Keynote, After Effects, Illustrator ou Photoshop. On y toruve toutes les aides utiles à la création, par exemple le placement magnétique des objets les uns par rapports aux autres.

La partie 2 est la tour de contrôle du logiciel avec sa palette Inspecteur. On peut définir la taille du document, les options de l'objet créé, l'interactivité avec le visiteur ou les options complexes de l'animation. Toutes les options des inspecteurs sont des fonctions HTML 5 et CSS 3.

La partie 3 représente l'équivalent de la palette des calques d'Illustrator, elle sert à gérer les objets de la scène, mettre en premier plan, en arrière plan ou grouper les éléments.

La partie 4 est la timeline qui permet de définir les comportements des différents éléments dans le temps. On peut créer des actions pour lancer les animations selon les actions du visiteur à la façon de ce que faisait Flash mais avec plus de simplicité.

Les parties 1, 3 & 4 n'ont rien de nouveau pour tous ceux qui ont utilisé After Effects ou tout autre logiciel de montage ou d'effets spéciaux.

La partie 5 montre la non-complexité des outils et des fontions du logiciel. Que l'essentiel. On utilise, comme en HTML et CSS qu'un seul élément, la DIV rectangulaire, qu'on agrémente avec quelques options. Simplissime !

La partie 6 est la partie spécifique à la création de sites Web ou de bannières. Elle permet de créer les différentes pages ou les différentes scènes de vos projets.

La prise en main du logiciel ne demande que quelques heures au maximum. Pour en exploiter toute la richesse il faut avoir des notions d'intégration Web, de vidéo et de design. C'est un outil simple, pas un outil qui promet de faire le travail à votre place. L'intelligence artificielle devra donc être la vôtre.

Utilité ::

Hype est une alternative à plusieurs outils Web actuels et bientôt disparus. À sa sortie, il visait clairement à remplacer Flash sur les machines Mac, offrant une interface très simple pour ceux que la complexité de l'outil d'Adobe rebutait. Sa première version était certes limitée mais pleine de promesses.

On peut également voir le logiciel comme une alternative ludique à la bibliothèque javascript JQuery. Tout se faisant dans un premier temps grâce à l'interface de Hype. L'intérêt de l'outil est qu'il permet d'ajouter des comportements javascript capable d'enrichir énormément ses capacités. Il se destine donc à tous ceux qui ne veulent pas programmer en JS, ceux qui ne veulent pas passer du temps à chercher des modules JQuery acaptés à leurs besoins et aux développeurs qui cherchent un outil pour produire rapidement des modules interactifs avancés.

Avec le temps, c'est devenu un logiciel complet capable de créer rapidement des sites originaux ou tester des interfaces d'applications à moindres frais. Il ajoute désormais une couche de HTML qui facilite le référencement auprès de Google et permet de gérer nombres d'options du HTML 5.

L'apparition de l'inspecteur "ressources" dans Hype 2 et son amélioration au fil des différentes versions, permet de faire des mises à jour efficaces et sans risque. La possibilité de créer des symboles depuis la version 3 Pro ajoute à sa productivité.

La version Pro a introduit aussi une façon simple et efficace de gérer les options "responsive" de gestion des différents tailles d'écran. Une fois de plus, le logiciel offre une ergonomie au service de l'utilisateur de base. Quand une option très demandée manque ou demande l'intégration d'un code javscript compliqué, il suffit souvent d'attendre la prochaine mise à jour pour la voir arriver dans l'interface. Par exemple, la possibilité de lier les animation à la position de la souris dans l'écran a été intégrée sous forme d'une action spécifique très simple à appliquer.

C'est un logiciel à posséder sur son ordinateur.

Mode d'emploi :: faites un clic maintenu sur les images

le résultat :: la vidéo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

partie 1 :: lololo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

partie 2 :: lololo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

partie 3 :: lololo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

partie 4 :: lololo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

partie 5 :: exportation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis accusantium omnis ut? Recusandae debitis sequi, qui aliquam distinctio totam expedita similique reprehenderit labore. Quia eaque, necessitatibus voluptatum et vitae. Placeat nihil voluptatibus libero ipsum. Vitae iusto reiciendis veritatis reprehenderit cum eum, nesciunt sed beatae praesentium autem fugiat placeat quas laudantium nulla vel odit, maxime quis quasi doloremque? Sequi, provident.

les tarifs ::

Le logiciel est disponible sur l'AppStore et sur le site de l'éditeur.

les tarifs du logiciel en version A :: 33$

les tarifs du logiciel en version B :: 99$

Tumult Hype

Apprendre Hype 4 ::

Vous trouverez des vidéos d'explication sur le site.

initiation au logiciel

le site de tutos

Autres outils alternatifs dédiés au Design Web

Html & CSS

Les différents outils capables de gérer le code Html et Css de vos futurs sites sans avoir besoin d'utiliser Dreamweaver.

Designer & Coder

Logiciel pour mettre en place des pages Web et capable de gérer le code, à la façon des solutions Invision.

JavaScript facile

Outil pour créer facilement des diaporamas et carrousels en JavaScript sans une ligne de code.

Bootstrap facile

Logiciel Mac pour créer simplement des sites Web à partir des règles de mise en forme de Bootstrap.