Outils et ressources de design pour founders

Dans cet article, je regroupe l’ensemble des ressources et outils qui ont été citées tout au long de la série d’articles Design pour founders. Les ressources et outils sont classés par thèmes. Cliquez simplement sur le nom de l’outil (ou de la ressource) pour y accéder.

Voir le programme complet

Bonne découverte, et amusez-vous bien !

Pour cette première partie, nous parlerons des applications pour les tâches générales, la typographie, la couleur et les tests d’utilisabilité.

Outils et ressources de design : général

Canva

Canva est un outil de design extrêmement simple et gratuit pour les petites entreprises et les particuliers. Il rend le design accessible aux non-designers et pousse sérieusement la vision sur l’enseignement des bases du design.

Outils ressources design : canva

Si vous avez simplement un blog et que vous n’avez pas besoin de toutes les fonctionnalités de design d’interface utilisateur sophistiquées, Canva est parfait pour vous. Quoi qu’il en soit, je vous recommande de consulter leur école de design.

Sketch App

Tout le monde s’émerveille du nouveau venu, l’application Sketch. Pour beaucoup, il a déjà remplacé Adobe Illustrator et Photoshop, et il est parfait pour le design d’interfaces. Il vous permet de réutiliser des styles et des éléments tout en vous permettant de rester organisé et cohérent avec vos créations.

WebFlow

Outils ressources design : webflow
Page d’accueil de Webflow

WebFlow est presque trop beau pour être vrai. Pour une somme mensuelle minime, ils vous permettent de concevoir et de créer des sites web, le tout sans coder ! J’ai fait le point sur les meilleurs constructeurs de sites web. Si vous souhaitez créer une page de destination rapide pour tester vos idées ou commencer à vendre dès que possible, cliquez ici pour la consulter.

Outils et ressources de design : typographie

typography

TypeGenius

Cet outil vous aide à trouver la combinaison de polices parfaite. Vous choisissez la police de base, et les outils suggèrent une bonne police de correspondance.

TypeWolf

Vous permet de parcourir les polices « à l’état sauvage » et de choisir parmi les recommandations du site. Utile aussi comme ressource pour en apprendre plus sur la typographie.

Typ.io

Concept similaire ; vous permet de filtrer les sites web en fonction des polices utilisées. Utile pour copier certaines des idées de polices.

Wordmark

Petit outil intéressant qui vous permet de tester les polices installées sur votre propre ordinateur. Particulièrement utile pour le design de logos basés sur du texte.

Readable Plugin

Cette extension JQuery marque de manière pratique les 45ème et 75ème caractères de chaque balise de paragraphe lorsqu’il est activé afin que vos sauts de ligne se situent quelque part entre ces deux chiffres, standard de lisibilité optimale.

Couleurs

Coolors

App qui génère de superbes combinaisons de couleurs gratuitement. La plupart sont assez compliquées à 5 couleurs, donc je vous recommande de n’en choisir que deux ou trois parmi les nuances suggérées.

Color Hunt

Une collection régulièrement mise à jour de superbes combinaisons de couleurs (et de leurs codes HEX) que vous pouvez utiliser dans vos projets.

Brand Colors

Outils ressources design : brand colors

Des palettes de couleurs de marques populaires rassemblées et répertoriées à un endroit. Super pour puiser de l’inspiration.

Blend

Application utile pour générer des dégradés CSS sans trop de soucis.

Cymbolism

Ressource issue du crowd sur la signification des couleurs.

Outils et ressources de design : utilisabilité

utilisabilité

Peek User Testing

Ces personnes vous donneront une vidéo gratuite de 5 minutes montrant une personne utilisant votre site web ou votre application et l’évaluant.

Five seconds test

Ils disent que vous avez 5 secondes pour convaincre un visiteur de rester sur votre site. Ce site web vous permettra de tester vos créations sur de vraies personnes.

Inspectlet

Un outil qui s’est révélé extrêmement utile sur les sites Web ThemeBro et Design for Founders. Il vous permet de voir exactement ce que vos visiteurs font sur votre site, sur quoi ils cliquent et pourquoi ils quittent le site. Presque comme se tenir derrière une personne qui utilise votre application ou votre site web.

De nouveaux outils et ressources : freebies et prototypage. Parce qu’en design il est inutile de ré-inventer la roue, une série de lien vers des outils et des répertoires de ressources pour les créatifs, incluant des bibliothèques de photos gratuites et libres de droits.

Toutes les applications de prototypage proposées ici sont sur le modèle freemium. Donc, vous pourrez commencer gratuitement ! 😉

Pexels

Ce site vous permet de rechercher parmi des tonnes de photos gratuites. C’est inestimable lorsque vous avez un petit budget mais que vous avez besoin de photos de haute qualité. Si vous avez besoin de plus de sources (plus de 60 !), Consultez ce post populaire sur Design for Founders.

Pikwizard

Pikwizard est une plateforme avec plus de 100.000 images complètement gratuites sur le site, plus de 20.000 d’entre elles leur sont exclusives. Il y a également de nouvelles images qui sont ajoutées à leur librairie au quotidien et leur but ultime est d’obtenir plus d’un million d’images.

MakerBook

Répertoire sélectionné de ressources gratuites pour les créatifs. Ici, vous trouverez Google Fonts, Vecteezy et une tonne d’autres sites utiles qui ne figurent pas sur cette liste.

IconMonstr

Outils ressources design : iconmonstr

Actuellement, mon jeu d’icônes préféré. Il a un caractère et une icône pour pratiquement tout ce que vous pouvez penser. Trois autres jeux gratuits que je recommande sont Flat Icon, Font Awesome et Entypo.

Icon Store

Plus de 100 icônes de haute qualité et gratuites. Il vous permet de filtrer, ce qui en fait une excellente ressource pour le processus de création de logo décrit dans ce livre. Un projet similaire est Icon Finder.

The Pattern Library

Une collection de motifs gratuits, sans faille, fous, parfois drôles, et toujours impressionnants, présentés dans un format intéressant de site web.

Subtle Patterns

Un grand ensemble de textures subtiles uniques qui ne manqueront pas d’ajouter une étincelle supplémentaire à vos créations.

subtle patterns toptal

AniCollection

Une grande collection de différentes animations que vous pouvez utiliser sur le web.

Prototypage

PopApp

Prototype on Paper vous permet de dessiner des wireframe sur du papier, de les numériser avec votre smartphone et de les assembler dans une application fonctionnelle à utiliser pour valider votre idée ou les tests d’utilisabilité.

Pixate

Pixate est un outil gratuit qui vous permet de créer des prototypes interactifs pour vos appareils mobiles avec des transitions et des fonctionnalités de niveau natif. C’est l’outil idéal pour vous aider à développer vos idées sans savoir coder. Des applications similaires sont Marvel et UXPin légèrement plus avancé.

Invision App

https://www.youtube.com/watch?v=YXNk4gQCPSY

Invision est une application très populaire pour les startups axées sur le design, et ce pour une bonne raison. En plus de permettre à leurs utilisateurs de créer des maquettes interactives et de générer du code à partir de designs, ils fournissent également une plateforme complète pour la communication en équipe et vous permettent même de conserver vos ressources (telles que les guides de style) à la fois et au même endroit.

Screensiz.es

Ce site web répertorie toutes les tailles d’écran et résolutions courantes, vous permettant de choisir la taille sur laquelle baser vos designs.

Après les images et icones et les applications de prototypage, nous vous proposons des ressources pour l’inspiration, les conversions et le branding.

Outils et ressources de design : inspiration

Little Big Details

Super blog Tumblr qui organise les petits détails qui rendent les interfaces géniales. Je vous recommande vivement d’y jeter un coup d’œil de temps en temps.

Land Book

Si vous ne savez pas comment créer cette nouvelle page de destination pour votre produit, jetez un œil à quelques exemples ici. N’oubliez pas que tous ne sont pas basés sur la science de la conversion. Sites similaires : LandingFolio et Lapa Ninja

App Animations

Screencasts réels des animations d’applications mobiles. Ça vaut la peine de checker.

Which Test Won

Un site web avec une énorme bibliothèque de tests A/B et leurs résultats. Ce n’est pas gratuit, mais ils offrent un essai gratuit.

SixUX

Une collection de superbes transitions et animations de six secondes.

Really Good Emails

Outils ressources design : inspiration pour le design d'email

L’endroit à découvrir lorsque vous êtes à court d’idées sur le design de votre prochaine newsletter.

Empty States

Dans de nombreuses applications, un « état vide » sans données est ce que les utilisateurs rencontrent juste après leur inscription. Voici de l’inspiration pour le concevoir correctement.

Use Panda

Use Panda est un excellent outil d’agrégation des meilleures plateformes de design. Egalement disponible pour iOS et en tant qu’extension Chrome. Il manque cependant une source, et c’est Sidebar.io.

Conversions

Unbounce

Outils ressources design : unbounce - constructeur de landing page

Unbounce est une plateforme populaire pour la création rapide de pages de destination et leur test A/B. Si vous souhaitez effectuer des tests, essayez cet outil. Il va certainement vous faire récupérer votre investissement.

A/B See

Si vous recherchez un plugin WordPress simple et gratuit pour effectuer des tests A/B minimalistes, consultez A/B See. Je l’utilise sur mes sites web et cela a été utile – voici le tutoriel sur la façon de le configurer.

Visual Website Optimizer

Cette société propose plusieurs outils pour augmenter vos conversions. C’est probablement exagéré pour une jeune entreprise en démarrage, mais très judicieux une fois que vous commencez à générer des revenus.

Ils offrent également une tonne d’outils gratuits utiles, tels que A/B Test Duration Calculator et A/B Test Significance Calculator.

Google Website Optimizer

Partie de Google Analytics, l’Optimiseur de Site est un excellent moyen de tester gratuitement votre site web.

Outils et ressources de design : design d’identité

GraphicSprings Logo Generator

Outils ressources design : Graphics Spring - générateur de logo

Je ne vous recommande pas de laisser un générateur de logo automatique créer toute votre identité de marque ; vous feriez mieux de créer la vôtre avec le processus décrit dans ce livre. Toutefois, si vous recherchez simplement quelque chose à afficher sur votre page de destination, consultez GraphicSprings ou l’un des outils décrits ici.

Frame

Il existe de nombreux outils comme celui-ci en ligne, mais aucun n’est gratuit. Si vous ne connaissez pas bien Photoshop, utilisez Frame pour créer des maquettes de produits de qualité réaliste.

Ceacle

Outils ressources design : ceacle

L’objectif de Ceacle est d’aider les travailleurs créatifs à exprimer leur créativité. Ainsi, ils conçoivent un ensemble de produits et de services pour atteindre cet objectif.

Des services similaires sont Pixelbuddha et Mockup Zone.

Voir le programme complet