Maison >interface Web >tutoriel CSS >Trois outils de conception « non IA » pour créer des pages de destination aimant les humains
Il y a environ une semaine, j'ai dû créer une page de destination pour mon cours gratuit de cryptographie destiné aux développeurs Web. En commençant à le construire, j'ai collecté quelques outils en cours de route.
Ces outils m'ont énormément aidé à rendre la page de destination bien plus belle que ce que j'ai pu construire.
Ces outils m'ont laissé réfléchir : pourquoi diable je ne les connaissais pas plus tôt !
Juste pour être clair : Je ne suis du tout lié commercialement à aucun de ces outils. Je les ai juste adorés et je sais que vous aussi. C'est pourquoi je le partage avec vous les gars.
Tous les outils mentionnés dans cette liste sont entièrement gratuits, sans publicité et sans paywall. C’est en fait de l’or gratuit, je dirais.
Ce site Web possède une énorme collection de graphiques et d’icônes vectorielles SVG. J'adore leur design simple et sans publicité. Il n'y a pas de paywall. Tous les graphiques SVG sont totalement gratuits. Vous pouvez utiliser ces SVG comme icônes ou dans d’autres graphiques.
Ce site Web dispose également d'un éditeur SVG. J'ai trouvé cela très utile pour changer la couleur du SVG pour qu'elle corresponde à la palette de couleurs de ma page de destination.
C'est un outil de dessin extrêmement populaire. Le moment éclair pour moi a été la découverte des bibliothèques Excalidraw. La bibliothèque excalidraw contient des graphiques prédéfinis par la communauté. Cela permet de créer rapidement des graphiques et des diagrammes sympas.
Par exemple, j'ai utilisé des graphiques prédéfinis de la bibliothèque excalidraw pour créer le graphique ci-dessous pour la page de destination de mon cours. Et il m'a fallu environ 10 minutes pour tout faire. Sans les bibliothèques excalidraw, son exécution aurait pris beaucoup de temps.
C'est un outil tellement bien conçu. Il vous permet de créer des designs SVG. Vous pouvez également utiliser ces designs comme arrière-plan dans certaines parties de votre page de destination ou à l'intérieur de votre produit.
J'ai utilisé cet outil pour créer un arrière-plan pour la section des travaux antérieurs de ma page de destination :
Cet outil contient de nombreux graphiques SVG dessinés à la main qui peuvent être utilisés pour mettre en évidence des parties de titres dans vos pages de destination. Ces graphiques dessinés à la main sont si agréables que vous trouverez leur utilité dans diverses situations.
J'ai téléchargé une fusée dessinée à la main sur ce site et je l'ai mise dans la section À propos de ma page de destination :
Je me suis toujours demandé d'où venaient ces arrière-plans à motifs SVG. Quand j’ai trouvé Hero Patterns, mec, j’ai été abasourdi.
Les modèles de héros ont de nombreux motifs d'arrière-plan SVG. Le site Web vous permet de choisir les bonnes couleurs et il vous suffit ensuite de copier et coller un extrait CSS.
J'ai utilisé cet outil pour créer une sorte d'arrière-plan sur papier millimétré pour la section du programme de la page de destination de mon cours :
Les trois derniers outils que j'ai trouvés dans la documentation ShipFast de Marc Lou. C'est un créateur de produits inspirant !
Vous devriez me suivre sur Twitter. J'essaie d'y mettre des trucs utiles. Et je respecterai votre temps.
Merci d'avoir lu !
-vkweb
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!