Share
Les applications basées sur un navigateur deviennent de plus en plus courantes et leur viabilité pour une utilisation dans la conception Web augmente régulièrement. Bien sûr, ils n'ont peut-être pas tout le potentiel des applications de bureau, mais ils peuvent toujours être très puissants indépendamment du lieu, et ils comportent des avantages que vous ne trouverez généralement pas dans les logiciels classiques..
Premièrement, les applications basées sur un navigateur sont compatibles entre plates-formes. Peu importe si votre système d'exploitation préféré est Linux, MacOS, Windows ou même ChromeOS, tant que vous disposez d'un navigateur, vous êtes prêt à partir. En fonction des applications, vous pouvez même les utiliser pour effectuer un travail supplémentaire sur une tablette iOS ou Android..
Deuxièmement, vous avez la possibilité d'accéder aux applications n'importe où, sans aucune installation ou gestion. Lancez votre logiciel préféré sur un ordinateur que vous n'utilisez pas normalement. Et ne plus avoir à vous soucier de la gestion des mises à jour.
Dans cet article, nous vérifierons l'état des applications basées sur un navigateur en 2018. Nous examinerons quatre domaines clés qui intéressent les concepteurs Web:
Allons-y!
Même le meilleur logiciel de conception de vecteur et d'interface utilisateur sur le bureau peut nécessiter beaucoup de ressources. En tant que tel, il convient de noter la force des applications de navigateur de cette catégorie. C'est une chose de créer des applications qui comparent des tâches simples, mais créer un logiciel de conception graphique de qualité professionnelle dans le navigateur en est une autre. Et pourtant, plusieurs développeurs semblent avoir réussi cet exploit.
Les quatre choix suivants constituent mes principaux choix pour les applications de conception de vecteurs et d'interface utilisateur dans le navigateur:
Figma est une application qui tombe carrément dans les rouages du concepteur de sites Web. Bien qu’elle soit capable de réaliser tout type de travail vectoriel et qu’elle soit une puissante application de conception graphique, elle convient tout particulièrement à la conception d’interfaces pour les sites Web et les applications Web..
L'une des fonctionnalités remarquables proposées aux concepteurs Web est la possibilité de créer plusieurs "cadres" individuels, qui peuvent être utilisés de la même manière que les planches d'art. Par exemple, vous pouvez créer un cadre pour représenter chaque page dans une conception de site..
Ce qui est intéressant, c’est que tout élément dans un cadre, par exemple un bouton de «contact», peut être connecté à un autre cadre, tel qu’un représentant une page de contact. Cela se fait en faisant glisser une ligne de connexion du bouton vers le cadre cible, ce qui convertit ledit bouton en un "hotspot". En mode présentation, si vous cliquez sur le point d'accès, il chargera le cadre auquel il est connecté, ce qui en fait une fonctionnalité idéale pour simuler le mouvement d'une partie d'une interface utilisateur Web à une autre..
Une fois la phase de conception terminée, Figma facilite la saisie des informations requises pour le codage, telles que les dimensions, les positions, les paramètres de police, les codes hexadécimaux, etc. Il peut également générer des CSS prêts à être copiés et collés que vous pouvez brancher directement dans votre code. Et lorsque des ressources d’image sont nécessaires, elles peuvent être exportées en bloc en une seule fois ou individuellement, selon les besoins..
Si votre tâche principale dans une application vectorielle basée sur un navigateur consiste à concevoir des interfaces utilisateur pour le Web, Figma est une option assez difficile à dépasser..
Gravit Designer est un concurrent sérieux dans l’espace vectoriel en tant qu’application de conception graphique polyvalente et polyvalente. Il est parfaitement viable d'utiliser à un niveau professionnel, ce qui est rendu encore plus remarquable par le fait que Gravit est totalement gratuit à cent pour cent. Il n'y a aucun frais d'achat, frais d'abonnement ou publicité. Il suffit d'ouvrir l'application et de concevoir.
Le logiciel comprend des outils vectoriels robustes tels qu'un stylo de style classique, l'outil très pratique Bezigon et d'excellents outils Freehand et Shading. Il offre la possibilité d'avoir un canevas infini et une longue liste de paramètres de dimensions prédéfinis vous permettant de passer de la taille «Site Web - Énorme» à la taille «iPhone X» en un clic..
Le système «Pages» vous donne une manière de classer les documents de type artboards. Les systèmes d'ancrage et de symboles combinés vous permettent de créer des ressources réutilisables qui se comportent de manière semi-réactive lorsqu'elles sont placées sur des pages de tailles différentes..
L'une de mes caractéristiques préférées de Gravit est son système incroyablement flexible de remplissages multiples, de bordures et d'effets. Un seul élément peut avoir un nombre quelconque de remplissages, de bordures et d'effets, chacun avec ses propres modes de fusion et paramètres d'opacité, ce qui vous permet de créer des styles de conception très intéressants..
Gravit est en train d’être rapidement amélioré, l’équipe de développement ajoutant des fonctionnalités très utiles à intervalles fréquents. La dernière mise à jour majeure a ajouté des symboles et des ancres améliorées. Celle qui précède le stockage en nuage ajouté, Sketch importe et prend en charge les plug-ins. Gravit se déplace rapidement et s’améliore souvent.
Si vous recherchez une application complète dans laquelle vous pouvez faire à peu près tout ce dont vous avez besoin avec des vecteurs, Gravit risque fort de vous faire perdre la tête..
Vectr est une application plus légère que Gravit ou Figma. Je décrirais cette application comme celle à utiliser lorsque vous souhaitez entrer et sortir rapidement et sans courbe d'apprentissage abrupte. Les outils et l'interface de Vectr sont minimalistes et intuitifs, et l'excellente série de didacticiels interactifs dont vous êtes salué lors du premier lancement rend le logiciel beaucoup plus rapide à utiliser..
L'une des fonctionnalités les plus intéressantes de Vectr est que, via un plugin, il peut être utilisé comme un éditeur graphique à part entière dans une zone d'administration WordPress, ce qui peut s'avérer très pratique..
Si vous ne voulez pas trop de tracas, mais que vous voulez un ensemble simple d’outils robustes, Vectr pourrait être l’application qu'il vous faut..
BoxySVG, comme son nom l'indique, est tout au sujet de SVG. Si vous souhaitez créer des graphiques vectoriels pour le Web, cette application est spécialement conçue à cet effet. BoxySVG n'essaie pas de se préoccuper des graphiques d'impression, de la conception d'interface ou de toute autre chose qui pourrait faire oublier que c'est un excellent programme de conception SVG.
Il inclut des fonctionnalités spécifiques à SVG telles que le contrôle des paramètres de la zone de visualisation, l’alignement des objets par rapport à la zone de visualisation et la Conserver les proportions paramètre-pas besoin de creuser dans le code de vos SVG après l'exportation. Et bien sûr, comme vous concevez dans le navigateur, vous verrez vos SVG exactement tels qu'ils apparaîtront lorsqu'ils seront déployés sur le Web..
Si SVG est votre jeu, en particulier pour le Web, consultez ce que BoxySVG a à vous offrir..
Wireframing est une catégorie dans laquelle la sélection actuelle basée sur un navigateur peut en réalité être plus forte que les offres de postes de travail. Il peut être utile de savoir que les encadrements filaires ne nécessitent pas beaucoup de ressources et que la demande d'accessoires filaires accessibles en ligne peut être forte en raison du besoin fréquent de collaboration pendant la phase de planification d'un projet..
Découvrez quatre des principales applications de wireframing basées sur un navigateur disponibles actuellement, sans ordre particulier.
MockFlow devrait plaire à de nombreux concepteurs de sites Web, car il dispose de composants prêts à l'emploi par glisser-déposer pour Bootstrap, Material Design, Foundation, KendoUI et un certain nombre d'autres frameworks populaires. Comme le montre l'image ci-dessus, tous les composants de framework familiers sont prêts à l'emploi, ce qui pourrait s'avérer extrêmement utile pour le prototypage rapide si votre framework préféré figure dans la liste des inclusions MockFlow..
Lorsque vous utilisez MockFlow pour créer une structure filaire pour un projet basé sur une structure, cela ressemblera beaucoup au produit final, alors que la structure filaire conservera la capacité de modifications et d'itérations rapides. La thématique des composants est une valeur par défaut, mais chaque composant peut avoir sa couleur, sa taille, ses polices, etc. personnalisées à sa guise..
MockFlow a beaucoup à offrir pour les structures filaires axées sur la conception Web, en particulier si vous utilisez un framework..
Balsamiq est une application filaire en nuage simple et intuitive à utiliser. En haut de l'écran se trouve un affichage visuel de composants représentant des éléments tels que des périphériques, des images, des en-têtes, des paragraphes, des éléments de formulaire, etc. Faites-les glisser et déposez-les sur l'écran pour former votre structure filaire. Vous pouvez également explorer d'autres sous-catégories pour vous aider à trouver les composants que vous recherchez..
Le style des composants est assez statique, la plupart ressemblant à des objets dessinés à la main. La page d'accueil de Balsamiq dit: «Ils ressemblent à des croquis à dessein! Cela encourage le brainstorming ». Cette réflexion est liée aux systèmes de collaboration qui permettent un partage entre les membres de l’équipe, ce qui permet à Balsamiq de sembler plus à l'aise assez tôt dans le processus de planification d’un projet..
Si vous avez une équipe assez nombreuse et que vous avez besoin de partager des idées entre plusieurs personnes avant de vous planter dans un design, Balsamiq est peut-être l'application pour vous..
Mockingbird est un peu similaire à Balsamiq en ce qu'il vous présente une sélection de composants standard prêts à être glissés et déposés dans votre structure filaire, tels que des boutons, des images, des bannières publicitaires, des en-têtes, etc. Plusieurs pages peuvent être créées et des liens de travail dynamiques peuvent vous permettre de naviguer de maquette en maquette lorsque vous testez votre interface utilisateur ou que vous présentez votre équipe ou vos clients..
La collaboration peut se faire en temps réel. il vous suffit de partager un lien avec votre collègue ou votre client et celui-ci sera en mesure de communiquer les modifications et les suggestions sur place.
Si vous avez avant tout besoin d'une communication efficace avec des personnes hors site, jetez un coup d'œil à Mockingbird.
Wireframe.cc est en quelque sorte un outil de wireframing minimaliste et spartiate qui ne possède pas les cloches et les sifflets de nos trois autres applications. Mais c'est aussi le seul totalement gratuit.
Les composants disponibles ne sont en principe que des rectangles aux coins arrondis ou carrés, des ellipses et des espaces réservés pour les images et le texte. Vous pouvez choisir parmi les couleurs orange, noir, blanc et quelques nuances de gris. En plus de ces fonctionnalités, vous disposez également d’outils de regroupement et d’alignement, ainsi que de la possibilité d’ajouter des annotations..
Wireframe.cc est délibérément clairsemé, et parfois, lorsque vous avez besoin de trouver rapidement des idées, c'est exactement ce dont vous avez besoin. Il n'y a pas de paralysie par analyse ici, juste pour aller directement au travail.
Les éditeurs WYSIWYG d’aujourd’hui remplissent à certains égards le rôle qu’avaient autrefois les programmes de conception visuelle tels que Dreamweaver et Frontpage, mais ils avaient bien au-delà de leurs réalisations bien plus loin que leurs prédécesseurs. Ils peuvent toujours aider les nouveaux concepteurs de sites Web à apprendre le métier, mais ils peuvent également faire gagner énormément de temps dans des projets avancés lorsqu'ils sont utilisés par des utilisateurs expérimentés..
Examinons de plus près deux des applications de conception Web WYSIWYG les plus populaires basées sur un navigateur..
Webflow est très utile pour les débutants et les vétérans de la conception Web chevronnés. Cela est dû au fait que tout peut être fait visuellement, vous travaillez toujours avec les mêmes choses que celles auxquelles vous êtes habitué lorsque vous codez à la main..
Vous ajouterez des éléments div et sémantiques, vous créerez des classes CSS, vous aurez besoin de savoir comment fonctionne le positionnement absolu et relatif, et vous serez responsable de la création de vos sites pour qu'ils soient réactifs. Il n'y a pas de blind aveugle ici, tôt ou tard, vous devrez apprendre ce qui se passe dans les coulisses. Tout ce que Webflow fait est de mettre une interface visuelle sur les techniques de conception Web que vous feriez autrement manuellement.
Pour les débutants en conception Web, cela peut être très utile pour faciliter le processus d'apprentissage. Voir vos changements prendre effet en temps réel peut aller très loin. Pour les vétérans, Webflow est un excellent outil de prototypage. Vous préférerez peut-être toujours écrire votre propre code, mais Webflow peut vous permettre de vous déplacer beaucoup plus rapidement lorsque vous modifiez votre conception. Je l'ai personnellement utilisé en combinaison avec le codage manuel pour créer des échéances serrées à plusieurs reprises..
Donc, si vous êtes un concepteur Web débutant qui cherche à aplanir la courbe d'apprentissage ou un ancien qui cherche à gagner du temps, Webflow vaut la peine d'être examiné..
Lorsque Webflow est une interface visuelle par rapport aux techniques de conception Web habituelles, Froont a pour objectif essentiel de prendre en charge le plus grand nombre de points possible du processus de conception afin de créer un processus de conception rapide et convivial pour les débutants..
Plutôt que d'ajouter des divs, du texte ou des images, vous allez ajouter des sections entières d'un site à la fois. Vous pouvez déposer une barre de navigation, une unité de héros, une section de contenu, des panneaux de tarification, un pied de page, et c’est tout. Froont propose également une vaste sélection de modèles, appelés «projets», que vous pouvez cloner pour commencer votre projet de conception si vous le souhaitez..
Cela dit, à peu près tout est modifiable une fois qu'il est sur la page, il suffit de basculer sur Mode expert pour ajuster des choses comme les marges et l'alignement.
Si vous démarrez tout juste dans la création web ou si vous avez besoin d’un processus visant à garder les mains libres le plus possible, Froont est peut-être ce qu’il vous faut..
Trouver un éditeur de code Web complet est toujours un peu délicat. Il existe de nombreux éditeurs basés sur le Web, mais si vous recherchez quelque chose avec le type de fonctionnalités auquel vous êtes habitué dans votre éditeur de code de bureau préféré, toutes les options ne conviendront pas..
Cela dit, voici deux éditeurs qui se distinguent du lot et qui pourraient s'avérer très utiles pour le codage en déplacement.
Caret est l’un des rares éditeurs de code Web avec lequel vous pouvez ouvrir un fichier local. Cela est probablement dû au fait qu'il installe, via la boutique en ligne Chrome, comme une application normale et fonctionne hors connexion. Vous obtiendrez une icône de raccourci pour votre bureau, qui fonctionnera sans aucun navigateur chromé..
La liste des fonctionnalités est assez impressionnante, en particulier au milieu d’un paysage d’édition de code quelque peu stérile, basé sur un navigateur. Caret comporte une coloration syntaxique, des thèmes, plusieurs curseurs, une palette de commandes, la gestion de projet, la prise en charge de plug-ins et un fichier de paramètres complet et librement configurable, «user.json»..
Caret est non seulement gratuit, il est également open source sous licence GPLv2. Installez-le à partir du Chrome Web Store ou si vous préférez, vous pouvez cloner son référentiel et gérer l'installation vous-même manuellement..
Si vous avez besoin d'un éditeur de code pouvant aller n'importe où, et en particulier si vous êtes un développeur mobile avec un appareil ChromeOS, Caret pourrait être exactement ce dont vous avez besoin..
CodeAnywhere ne vous permet pas d’ouvrir des fichiers locaux, mais se connecte rapidement et facilement à un fournisseur de stockage tiers, tel que GitHub, BitBucket, Dropbox ou un serveur FTP, sur lequel se trouvent vos fichiers. Donc, si vous poussez déjà votre code vers un stockage externe à la fin de la journée, cela peut rendre le processus un peu plus fluide..
CodeAnywhere utilise la coloration syntaxique pour soixante-quinze langues, quatre thèmes et huit schémas de couleurs parmi lesquels choisir, il offre la complétion de code, le remplissage et de multiples curseurs. Il possède également un terminal intégré, des outils de collaboration et un historique de révision enregistré..
Une caractéristique particulièrement convaincante est son service «Containers», qui sont des environnements basés sur le cloud et exécutant CentOS ou Ubuntu, et préconfigurés pour WordPress, NodeJS, Ruby et autres..
Si vous cherchez un moyen simple de travailler sur vos projets hébergés en externe, ou si l'idée de «Conteneurs» semble donner à vos projets une exécution plus fluide, consultez CodeAnywhere..
La gamme pour les éditeurs de photos basés sur un navigateur est un peu plus restreinte que nos autres catégories, ce qui n’est pas surprenant à présent, étant donné que la retouche de photos est probablement la plus gourmande en ressources et la plus difficile à obtenir sans la puissance de bureau.
Nous avons le choix entre trois éditeurs capables. Cependant, deux d'entre eux (Pixlr et SumoPaint) nécessitent Flash, donc si cela fait longtemps que Flash est actif sur votre ordinateur, vous devrez le dépoussiérer à nouveau pour pouvoir utiliser ces deux.
Sur cette note, si vous souhaitez activer Flash mais uniquement pour des applications spécifiques, dans Chrome, accédez à chrome: // paramètres / contenu / flash, puis ajoutez l'URL de l'application à la liste des sites autorisés.
Polarr fait ne pas Need Flash est une application de retouche photo soignée qui vous permet d'obtenir rapidement des images épatantes et prêtes à être utilisées dans le contenu de vos sites. L'ajout de filtres de qualité professionnelle se fait en un clic, grâce à des commandes d'éclairage et de couleur approfondies. Vous pouvez également recadrer, retourner, faire pivoter et redimensionner à votre guise..
Il possède même une fonction «Auto Enhan» qui analysera votre image et la rafraîchira sans que vous leviez le doigt..
Polarr est gratuit, mais vous avez la possibilité d’acheter des suppléments «Pro», tels qu’un outil de texte, un suppresseur de bruit, un jeu de filtres portrait, un jeu de filtres paysage, entre autres. La collection complète d'outils «Pro» est de 19,99 $
Si votre objectif principal est de faire en sorte que vos photos soient parfaites pour être postées en ligne, Polarr est un outil fantastique pour faire ce travail..
Pixlr existe depuis assez longtemps. À l'époque, si je n'avais pas accès à Photoshop, c'est ce que j'utiliserais, et c'est ce que je recommande aux personnes qui souhaitent modifier des images sans pouvoir justifier l'achat d'un logiciel..
Pixlr dispose des outils que vous vous attendez à trouver dans une application raster de bureau, tels que crayon, pinceau, gomme, godet, dégradé, tampon de duplication, dessin de forme de base, texte, flou, affiner, maculer, esquiver, graver, etc. Il possède un système de style de calque simple qui comprend les ombres portées, les ombres intérieures, les biseaux, les lueurs extérieures et les lueurs intérieures. Et il a une liste complète de filtres et de réglages - gardez bien à l’esprit que ces fonctions sont ne pas non destructif.
Vous pouvez utiliser Pixlr pour la conception, la création à main levée, la retouche et l'édition de photos. Si vous avez besoin d'un logiciel Web avec plus d'outils de bureau que Polarr, Pixlr pourrait peut-être simplement combler cette lacune..
SumoPaint ressemble beaucoup à Pixlr et rappelle la même époque. Il contient également le type d’outils que vous êtes en droit de trouver dans un éditeur de raster de bureau, ainsi qu’une sélection étendue de filtres et de réglages..
Cependant, SumoPaint possède des outils de création de formes plus avancés, tels que des étoiles, des tartes, etc. En outre, il dispose d'un outil de dessin astucieux de symétrie et d'un outil de transformation gratuit et utile. Il comporte également des styles de calque supplémentaires: superposition de couleurs, contour, biseau dégradé et lueur dégradée..
Globalement, Pixlr et SumoPaint sont très similaires et jouent essentiellement le même rôle. Si vous recherchez une application de cette nature basée sur un navigateur, la meilleure chose à faire est d'essayer à la fois celle qui vous convient le mieux..
Ceci conclut notre tour d'horizon 2018 de l'état actuel des logiciels basés sur navigateur pour les concepteurs Web..
En résumé:
Pour l’avenir des applications basées sur un navigateur, gardez un œil sur l’essor de WebAssembly, une technologie émergente qui permettra aux logiciels, même les plus pointus, comme les éditeurs vidéo, de fonctionner avec des performances presque natives. Cela pourrait vraiment faire bouger les choses!
Pendant ce temps, vos voyages et vos appareils ultra-portables seront plus productifs grâce à certaines des applications de cette liste.!
Accentsconagua