J’ai toujours une appréhension lorsque je dois créer un mock-up pour mettre en scène un site Web ou appli mobile. Je classe ce type d’activité dans la même catégorie que l’épluchage d’ananas 🍍 avec un combo mangoustan (je n’ai pas d’emoji mangoustan). C’est chiant à éplucher mais c’est super bon.

C’est la même chose pour le design d’interfaces. Le mock-up n’est pas la partie la plus intéressant du quotidien d’un designer. Mais il faut parfois que ça brille pour rendre le produit plus savoureux. C’est la principale raison d’être du mock-up d’iPhone ou de MacBook. Un écrin qui permettra de faire ressortir un détail d’interaction ou de mettre en scène votre création dans un contexte d’usage précis.

Creation avec mockuuups studio

Comment créer un mockup en moins d’une seconde

Comme d’habitude, j’essaie d’écarter de mon chemin toutes les tâches répétitives et ennuyantes. J’ai donc cherché une alternative au smart object de Photoshop. Et j’ai croisé le chemin de la team de Mockuuups.

Ils ont créé Mockuuups Studio, une application gratuite pour MacOS et Windows qui vous permet de créer de belles mises en scène pour vos maquettes. Peu importe si vous êtes designer ou non, l’App a été créée pour faciliter au maximum la création d’un mock-up.

RT pour tenter de gagner 5 licences premium Mockuuups Studio compatibles #sketch & #Photoshop. https://t.co/xAOqyG0bQL T. au sort le 31/01. pic.twitter.com/bLOtu3X5xN

— MagazineDuWebdesign (@MagDuWebdesign) 23 janvier 2017

D’un simple glisser-déposer, Mockuuups Studio s’occupe d’insérer votre design dans plusieurs centaines de devices au choix. Et visualisez instantanément le résultat :

Import du mock up en glisser deposer

Vous avez la possibilité d’insérer directement dans l’application vos créations au format PNG, JPEG, Photoshop et Sketch.

J’ai testé l’application ce weekend. La fluidité et la qualité du rendu est tout simplement splendide. Les templates de mock-up peuvent être exportés en différentes tailles dont la plus grande fait 2600px de largeur. Une belle qualité par rapport à d’autres outils de création de mock-up en ligne.

Deux raisons d’utiliser Mockuuups Studio

L’objectif principal de l’outil est de rendre accessible et facile à utiliser différents types de mock-up. Vous pouvez insérer n’importe quel contenu visuel dans des scènes photo-réalistes.

Un mock-up sans Photoshop, ni les compétences d’un designer. Quelques exemples d’utilisation :

• Prévisualisation d’une application dans un Apps store ;
• Contenus pour une campagne publicitaire ou des posts social media ;
• Assets pour un dossier de presse ;
• Article de blog.

Vous êtes libre de choisir les catégories de devices et de scènes qui vous plaisent via un système de filtres. C’est comme ça que vous obtenez un accès gratuit aux derniers mockups de smartphone et de note books.

Categories

C’est l’un des avantages de l’application : un accès à des contenus de haute qualité à partir d’un seul endroit. Il n’est donc plus nécessaire d’avoir une douzaine de maquettes PSD / Sketch sur votre disque dur et de les parcourir à chaque fois que vous voulez produire un mock-up.

La dernière raison qui m’a incité à vous parler de cet outil est le fait qu’il évite de solliciter un designer pour la création d’un mockup. Par exemple, un product manager pourra mettre à jour les visuels de son application sur un store en pleine autonomie. Cela libère ainsi les designers pour faire des choses plus importantes (et intéressantes) qu’un mock-up.

C’est vraiment gratuit ?

Oui, ce n’est pas une blague ! Des centaines de templates sont accessibles via Mockuuups Studio.

Une version premium est disponible pour avoir accès à des mises à jour mensuelles des devices et des mises en scènes personnalisées. Et le plus qui fait gagner du temps : une intégration directe au sein de l’écosystème de Sketch et Photoshop.

RT pour tenter de gagner 5 licences premium Mockuuups Studio compatibles #sketch & #Photoshop. https://t.co/xAOqyG0bQL T. au sort le 31/01. pic.twitter.com/bLOtu3X5xN

— MagazineDuWebdesign (@MagDuWebdesign) 23 janvier 2017

Penses-y pour la prochaine update de votre site portfolio ou pour la présentation client de la semaine prochaine.

Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :

Avez-vous des commentaires, des questions, de l’amour ou de la haine ? Envoyer tout ça à : [email protected].

Prenez soin de vous. A bientôt — @guillaumpalayer.

Accédez au meilleur des interfaces directement depuis votre boîte mail

Si vous n’aimez pas les emails, accédez au meilleur des interfaces sur Twitter.