Les sites Web de maquettes, également appelés éditeurs graphiques en ligne ou outils de conception, permettent aux utilisateurs de créer diverses conceptions graphiques, illustrations, bannières, logos, présentations et plus encore directement à partir de leur navigateur Web sans avoir besoin d'installer un logiciel spécialisé sur leur ordinateur. Ces outils en ligne offrent généralement une variété de fonctionnalités et de modèles qui facilitent le processus de création de conception.

Contrairement aux prototypes, qui sont censés fonctionner réellement, les maquettes sont des éléments visuels statiques destinés à montrer les dispositions de conception, l'atmosphère, les couleurs et l'esthétique globale. Certains concepteurs préfèrent créer chaque bouton et chaque icône à partir de zéro, mais si vous souhaitez aller de l'avant ou trouver l'inspiration, les mises en page et les logiciels de sites Web sont préchargés avec ces éléments et peuvent être plus faciles à utiliser qu'un logiciel de conception graphique.

Les sites ci-dessous vous aideront à créer des maquettes d'écran de sites Web, des maquettes d'écran d'applications, des maquettes de produits, etc. La plupart sont livrés avec des modèles de mise en page de sites Web ou des kits d'interface utilisateur qui vous permettent de concevoir à l'aide d'éléments prédéfinis tels que des boutons. Ils vous font gagner beaucoup de temps si jamais vous vous retrouvez dans une situation difficile et avez besoin de transférer rapidement une mise en page. Pour chacun nous analyserons le prix, avantages et les inconvénients, ainsi que à qui ils sont recommandés.

1. Adobe XD. Sites Web pour créer des mises en page

Adobe XD est la réponse de la famille Adobe aux logiciels de conception numérique. Il contient tous les détails et nuances que vous attendez de la société derrière Photoshop et Illustrator, mais il propose également un prix tout aussi élevé.

Cependant, si vous recherchez des mises en page de qualité professionnelle avec tous les détails, Adobe XD est là pour vous. Il gère l'ensemble du processus de conception, y compris les prototypes interactifs, et s'intègre même à d'autres logiciels Adobe si vous souhaitez créer ou personnaliser des éléments dans Photoshop ou Illustrator.

Il est également assez sophistiqué dans ses fonctionnalités, avec des effets 3D, des animations et la possibilité de créer une bibliothèque de composants, un endroit pour stocker tous vos éléments comme des boutons et des icônes afin que votre équipe puisse les utiliser à nouveau dans un autre projet (cela aide les clients fidèles s'ils le souhaitent). voir les mêmes contrôles sur le nouveau produit). Il existe également des fonctionnalités spéciales telles que Repeat Grid, qui vous fait gagner du temps lorsque vous devez copier et coller un motif encore et encore, et Padding, qui protège tailles de pixels lors de l'édition de différentes couches des mêmes éléments.

Coût:

  • 9,99 $/mois
  • 99,99 $ par an (prépayé)

Avantages : Sites Web pour créer des mises en page

  • Convient à l'ensemble du processus de conception, y compris aux prototypes interactifs
  • fonctionnalités sophistiquées : effets 3D, animation et bibliothèque de composants
  • Fonctionnalités pratiques permettant de gagner du temps : indentation, motifs répétitifs et édition facile
  • S'intègre à d'autres logiciels Adobe

Inconvénients:

  • exagéré si vous voulez juste une mise en page simple et rapide

Recommandé pour…

  • les personnes suffisamment sérieuses en matière de conception numérique pour vouloir des logiciels de premier ordre
  • conception régulière - aucun pour des projets ponctuels ou individuels

2. Interface utilisateur fluide. Sites Web pour créer des mises en page

Bien que techniquement destiné au prototypage, Interface utilisateur fluide est suffisamment robuste pour créer de superbes maquettes qui peuvent ensuite être converties en prototypes interactifs. Il s'agit d'un excellent choix pour les concepteurs expérimentés et les équipes de conception qui travaillent sur l'ensemble de la portée d'un projet.

L'interface utilisateur flexible n'est pas aussi conviviale que celle d'autres sites Web de mise en page populaires, qui peuvent ne pas plaire aux débutants. Cependant, il possède toutes les fonctionnalités de qualité professionnelle dont vous avez besoin pour la conception de sites Web et d'applications, notamment des wireframes et une bibliothèque de composants et d'icônes d'interface utilisateur prédéfinis. L'un de ses avantages réside dans ses outils de collaboration, qui permettent aux utilisateurs de visualiser, commenter et modifier les mêmes fichiers depuis n'importe où dans le monde.

Coût:

  • Forfait gratuit (1 projet)
  • 8,25 $/mois (facturé annuellement) [Solo]
  • 19,08 $ par mois (facturé annuellement) [Pro]
  • 41,58 $ par mois (facturé annuellement) [Équipe]

Avantages : Sites Web pour créer des mises en page

  • fonctionnalités avancées adaptées aux professionnels
  • légèrement moins cher que les sites Web de maquettes similaires
  • coopération de première classe
  • grande bibliothèque de composants intégrée
  • applications mobiles et changement d'appareil faciliter la création de mises en page pour les appareils mobiles

Inconvénients:

  • courbe d'apprentissage

Recommandé pour…

  • les personnes qui souhaitent un outil de conception à part entière, mais qui sont également soucieuses de leur budget

3. En Vision. Sites Web pour créer des mises en page

InVision est un concurrent direct d'Adobe XD et constitue un autre outil de maquette et de prototypage tout-en-un, également doté d'un abonnement mensuel coûteux. InVision partage de nombreuses fonctionnalités sophistiquées d'Adobe XD, notamment des outils d'animation précis pour le prototypage, mais est un peu moins convivial en termes d'efficacité et de rationalisation des tâches.

Il convient également de noter qu'InVision est avant tout un outil de prototypage, c'est pourquoi bon nombre de ses fonctionnalités sont axées sur l'interactivité et les effets plutôt que sur les images statiques. Cependant, il contient tout ce dont vous avez besoin pour créer superbes mises en page au pixel près, y compris l'intégration avec Photoshop et Sketch, et avec le module complémentaire gratuit Inspect, vous pouvez facilement transformer n'importe quelle conception en code de développeur. Et pour couronner le tout, il existe une version toujours gratuite.

Coût:

  • Version gratuite
  • 7,95 $ par mois (facturé annuellement)

Avantages : Sites Web pour créer des mises en page

  • Convient à l'ensemble du processus de conception, y compris aux prototypes interactifs
  • fonctionnalités avancées telles que l'animation et les effets interactifs
  • s'intègre à Photoshop et Sketch
  • version gratuite

Inconvénients:

  • la convivialité est un peu plus complexe qu'Adobe XD

Recommandé pour…

  • les personnes qui ont principalement besoin d'un outil de prototypage, mais avec des capacités de maquette

4. Modificateur de média. Sites Web pour créer des mises en page

Laissons de côté les mises en page de sites Web de niveau professionnel... loin de l'hôtel. Modificateur de média est à l’autre extrémité du spectre : très limité en fonctionnalités et en profondeur, mais extrêmement pratique. Tu peux maquettes à télécharger gratuitement directement depuis le site, mais pour supprimer le filigrane et obtenir des versions de haute qualité, vous devrez payer.

Mediamodifier est similaire à un éditeur de photos en ligne, mais avec des modèles d'applications et des mises en page de sites Web préchargés. Ils proposent également des milliers de modèles pour bien plus que de simples créations numériques : t-shirts, tasses à café, couvertures de livres etc. Tout ce que vous avez à faire est de trouver un modèle qui vous plaît, d'ajouter votre propre image et... eh bien, c'est tout ce que vous pouvez faire, vraiment. Il s'agit d'un site Web simple avec des mises en page lorsque vous avez besoin de quelque chose de rapide et facile, mais pas lorsque vous avez besoin d'impressionner quelqu'un avec des graphismes de haute qualité.

Coût:

  • Forfait gratuit
  • 9 $ par mois (facturé annuellement)

Avantages : Sites Web pour créer des mises en page

  • facile à utiliser
  • peut créer des mises en page en quelques secondes
  • de nombreux modèles parmi lesquels choisir

Inconvénients:

  • fonctionnalités nues
  • vous devez payer pour une résolution de haute qualité
  • il faut payer pour supprimer les filigranes

Recommandé pour…

  • quand tu as juste besoin de quelque chose de simple et rapide
  • vous avez déjà créé une image, mais vous devez la placer sur l'arrière-plan de votre téléphone/bureau
  • bonne sélection d'arrière-plans

5. MockFlow

Lorsque nous parlons de maquettes de sites Web adaptées à l’ensemble du processus de conception, nous ne parlons pas vraiment des maquettes. Flux fictif est l'un des outils de conception vraiment polyvalents qui vous mènera des wireframes aux prototypes en passant par les maquettes.

En plus des capacités de wireframing, MockFlow offre également une plus grande flexibilité avec des modules complémentaires supplémentaires dans MockStore. Vous y trouverez des « accessoires » tels que des packages d'interface utilisateur supplémentaires, des modèles de mise en page de sites Web supplémentaires et des fonctionnalités spéciales telles que des personnages d'utilisateurs, des systèmes de conception ou des traducteurs. MockFlow est également connu pour sa facilité de collaboration et de partage, ce qui en fait une excellente solution pour les équipes. Sites Web pour créer des mises en page

Coût : Sites Web pour créer des mises en page

  • Forfait gratuit
  • 14 $/mois (facturé annuellement) [Premium]
  • 30 $/mois (facturé annuellement) [TeamPack avec 3 utilisateurs]

Avantages:

  • excellentes capacités de modélisation filaire
  • MockStore fournit des fonctionnalités supplémentaires
  • Large sélection de packages et de modèles d'interface utilisateur via MockStore

Inconvénients:

  • Le plan premium coûte plus cher que les autres logiciels de mise en page, mais coûte moins cher

Recommandé pour…

  • les personnes qui ont besoin d'outils supplémentaires tels que des systèmes de conception ou des storyboards
  • grandes équipes qui ont besoin de fonctionnalités de collaboration avancées
  • projets simples et ponctuels pouvant bénéficier du plan gratuit

6. Oiseau moqueur. Sites Web pour créer des mises en page

Mockingbird est un bon compromis entre des fonctionnalités étendues et une convivialité simplifiée (bien qu’il soit considéré comme un outil haut de gamme). La fonctionnalité la plus attrayante est le simple éditeur WYSIWYG dans lequel il vous suffit de glisser et de déposer des éléments à l'emplacement souhaité. D'autres sites Web de maquettes de premier plan disposent d'éditeurs par glisser-déposer, mais l'interface utilisateur de Mockingbird est si simple et directe qu'elle s'adresse clairement aux débutants et aux novices.

Cependant, le prix n’est pas si avantageux. Avec un prix minimum de 11 $ par mois, c'est l'un des sites Web de mise en page les plus chers, même s'il n'offre rien. En revanche, c'est le même prix pour n'importe quel nombre d'employés, donc si vous disposez d'une équipe suffisamment nombreuse, vous pouvez justifier le coût. Sites Web pour créer des mises en page

Coût:

  • 11 $/mois (facturé annuellement) : 3 projets
  • 17 $ // mensuel (facturé annuellement) : 10 projets
  • 32 $/mois (facturé annuellement) : 25 projets
  • 68 $ // mensuel (facturé annuellement) : projets illimités

Avantages:

  • extrêmement confortable
  • Interface WYSIWYG
  • essai gratuit en ligne

Inconvénients : Sites de création de mises en page

  • cher
  • L'ensemble des fonctionnalités n'est pas aussi robuste que celui des autres sites Web de mise en page populaires

Recommandé pour…

  • les débutants intimidés par les interfaces plus complexes
  • les grandes équipes qui ne peuvent pas se permettre une adhésion individuelle à d'autres sites Web de maquette

7. MockupsJar. Sites Web pour créer des mises en page

MaquettesJar est le même site de mise en page gratuit que Mediamodifier : vous choisissez votre modèle et y superposez votre propre image. Comme Mediamodifier, ils proposent une sélection de photos d'archives allant des ordinateurs portables aux tasses et t-shirts, mais, en отличие от Mediamodifier, vous pouvez télécharger gratuitement la version haute qualité. Sites Web pour créer des mises en page

MockupsJar n'a peut-être pas autant de modèles de maquette de site Web que Mediamodifier, mais la possibilité de télécharger une image de haute qualité sans payer compense cela. Cependant, vous ne pouvez télécharger que 20 images haute résolution ; après cela, vous devrez soit le payer, soit le télécharger en basse résolution. La version gratuite contient également des publicités, mais dans l'ensemble, ce n'est pas trop mal pour une maquette de site Web gratuite.

Coût : Sites Web pour créer des mises en page

  • Forfait gratuit
  • 5 € / mois (payé mensuellement)

Avantages:

  • facile juste
  • le plan gratuit offre 20 images haute résolution
  • pas de filigrane

Inconvénients:

  • fonctionnalités nues
  • besoin de créer des images ailleurs

Recommandé pour…

  • les personnes qui aiment la plateforme Mediamodifier mais ne veulent pas payer pour supprimer les filigranes

8.Moqups. Sites Web pour créer des mises en page

moqups est un autre concepteur numérique polyvalent pour les maquettes, les prototypes et, bien sûr, les maquettes. Leur éditeur est une excellente combinaison de fonctionnalités avancées et de contrôles WYSIWYG, adapté aussi bien aux concepteurs débutants qu'expérimentés. Cependant, ils n'ont que deux plans tarifaires, en fonction du nombre d'utilisateurs dont vous disposez, donc les équipes de plus de trois devront payer un supplément. Sites Web pour créer des mises en page

Les utilisateurs louent la capacité de Moqups à créer des organigrammes, ce qui n'est pas vraiment utile pour les mises en page, mais est bon pour l'ensemble du processus de conception. Bien qu'une certaine convivialité puisse être délicate, il s'agit dans l'ensemble d'une alternative viable aux autres sites Web de mise en page générique, surtout si vous êtes également intéressé par les wireframes et les prototypes.

Coût:

  • 16 $/mois (facturé annuellement) [Pro - 3 éditeurs]
  • 49 $/mois (facturé annuellement) [Illimité - Éditeurs illimités]

Avantages : Sites Web pour créer des mises en page

  • outil bien équilibré pour concevoir des wireframes, des prototypes et des maquettes
  • Assez convivial pour les débutants, suffisamment avancé pour les experts
  • Excellentes fonctionnalités de planification telles que des organigrammes, des plans de site et des storyboards

Inconvénients:

  • du côté le plus cher

Recommandé pour…

  • les personnes qui donnent la priorité aux maquettes et aux prototypes au même niveau que les maquettes

9. Maquettes intelligentes. Sites Web pour créer des mises en page

maquettes intelligentes est dans la même catégorie que Mediamodifier et MockupsJar, mais avec une meilleure intégration. C'est un gros problème si vous avez pris une capture d'écran haute résolution de l'aperçu dans l'application Marvel et que vous souhaitez simplement la placer sur un exemple d'arrière-plan du bureau. Smartmockups a également plus de fonctionnalités de personnalisation que d'autres sites Web gratuits avec maquettes, comme changer les couleurs, mais cette fonctionnalité n'est disponible qu'avec un forfait payant. Sites Web pour créer des mises en page

Comme pour d’autres sites Web de maquettes gratuites, n’attendez pas grand-chose au-delà de la superposition de votre image sur l’arrière-plan du modèle. La version payante donne accès à plus de 6000 800 modèles d'images pour divers arrière-plans, notamment des T-shirts, des cartes de visite et des appareils numériques. Le forfait gratuit propose toujours environ XNUMX modèles de mise en page, mais vous devrez gérer les filigranes.

Coût:

  • Version gratuite
  • Dollars 9 par mois

Avantages : Sites Web pour créer des mises en page

  • s'intègre à Marvel App, Dropbox, Figma, Unsplash et Canva
  • le forfait payant vous permet de personnaliser l'image
  • rapide et facile

Inconvénients:

  • Le plan gratuit a des filigranes
  • besoin de créer des images ailleurs

Recommandé pour…

  • vous travaillez principalement dans Marvel App, Canva ou Figma

Pourquoi ne pas devenir professionnel ?

Comme nous l'avons dit plus haut, le seul but des maquettes est d'être belles. Si le succès de votre maquette dépend de beaucoup de choses (vous avez peut-être besoin de convaincre une partie prenante insatisfaite ou de proposer une idée pour obtenir davantage de financement), alors vous voulez absolument que votre maquette soit parfaite. Dans ce cas, pourquoi ne pas le confier à un professionnel. Sites Web pour créer des mises en page

Lorsque vous engagez un designer indépendant, vous confiez votre conception à un expert qui comprend les tenants et les aboutissants du design. Vous n'avez pas à vous soucier du prix des logiciels ou des courbes d'apprentissage, car le concepteur s'en chargera pour vous. Et grâce à notre communauté de designers du monde entier, vous êtes sûr de trouver concevoir avec ce stylecelui qu'il vous faut !

  «АЗБУКА»