Aperçu des sections

  • Présentation

    Tout replier Tout déplier

    Bien que le maquettage soit plutôt un travail de graphiste, ils peux arriver en tant que développeur que vous soyez emmener à réaliser quelques maquettes. En tant que développeur, vos maquettes seront bien souvent plutôt orienté sur du fonctionnel, et moins sur l'esthétique. Voici quelques outils qui vous permettent de réaliser des maquettes et des prototypes.

    Vous trouverez sur ces pages des liens vers des outils de maquettage :


    Vous avez l'embarras du choix : à vous de choisir votre outils favoris !



  • Papier / crayon : la méthode simple et efficace

    Exemple de maquette d'une page produit d'un site e-commerce :


  • Balsamiq : wireframes

    Le site : https://balsamiq.com/

    Plutôt orienté wireframe, donc UX


  • Figma

    Le site : https://www.figma.com/

    Met l'accent sur le travail collaboratif (un peu comme sur Drive)


  • Layoutit : maquettes pour Bootstrap



    Voici un outils qui risque de plaire à nombreux d'entre vous : Layoutit. C'est un service en ligne qui vous permet de créer votre front-end à la souris en mode "maquette", puis de télécharger l'équivalence en code HTML "Bootstrapisé". 

    Même si ce genre d'outils peuvent paraître miraculeux (aléluïa), je vous conseil tout de même de ne pas trop vous engouffrer dans la brèche. On est là pour coder les choses de manière précises et consciencieuse. De plus ce genre d'outils vont souvent être payant, et vous n'êtes pas sur à 100% de la qualité du code qui est généré. Et comment ferez-vous si demain le site ferme ou bien devient 100% payant ? Donc à utiliser avec modération.

    Un bon point, c'est que ça peut vous emmener à découvrir des composants ou des éléments de Bootstrap de manière un peu plus fun que la doc officielle. Vous pouvez aussi vous en servir pour maquetter votre site, avant de commencer à le coder (choix des éléments, de la disposition, des couleurs, etc...).

    J'ai vu que ce site propose aussi de personnaliser le système de grille, ce qui peut être très utile si la disposition basique ne vous convient pas. Je vous laisse découvrir tout ça.