Comment créer un site Web attrayant même si vous ne pouvez pas concevoir

Cela vous semble-t-il familier - vous avez une idée géniale, vous construisez cette idée, vous commencez à regarder le résultat final et vous pensez... Cela a l'air terrible.

Et le pire, c'est que vous ne savez pas comment y remédier. Nous sommes des développeurs après tout, pas des designers.

Heureusement, vous n'avez pas besoin d'être un designer extraordinaire. Il vous suffit d'être ingénieux et de comprendre quelques conseils de conception simples. Internet regorge d'outils et de ressources gratuits pour compléter votre manque de compétences en conception.

Je vais vous montrer comment tirer parti de ces ressources pour créer quelque chose dont vous pouvez être fier.

Ce guide couvrira les outils, les techniques et les ressources que j'utilise pour concevoir des sites Web. Ce n'est pas la fin, mais c'est une excellente ligne directrice pour les personnes qui ont du mal avec le design. Nous allons créer une application appelée DesignDo. Ce sera une collection de conseils et de ressources de conception (donc méta!). Tout ce que nous utilisons sera 100% gratuit. Pour rester concentré sur le sujet de cet article, nous n'utiliserons pas de framework frontal. Juste du HTML statique.

Planification

Utiliser un framework CSS

Avez-vous déjà joué au bowling avec quelqu'un qui est nul dans ce domaine ? Ils ont mis ces pare-chocs dans la voie pour ne pas pouvoir lancer une boule de caniveau ? Le framework CSS est votre pare-chocs. Il est presque impossible de lancer une "boule de gouttière" avec eux. Ils vous donneront un excellent point de départ et fourniront également des contraintes dont un développeur qui a du mal avec la conception a besoin.

Je recommanderais Tailwind CSS. Il utilise des classes qui sont des abstractions de propriétés CSS. Il sert de roue d'entraînement pour apprendre le CSS et il est facile de créer de superbes sites avec. Lisez la documentation ici .

De plus, si vous n'utilisez pas un framework frontal comme React ou Vue, je suggérerais d'utiliser alpine js. Il est idéal pour les modifications simples de l'interface utilisateur, telles que la transformation de votre navigation en un menu hamburger sur les appareils mobiles.

Couleurs

Rester simple.

Utilisez un fond blanc et du texte noir ou gris foncé. Si vous avez du texte noir dans une zone avec une couleur d'arrière-plan plus foncée, comme un bouton, changez-le en blanc.

1 couleur primaire pour votre logo et vos boutons d'appel à l'action. Utilisez-le avec parcimonie pour les éléments que vous souhaitez « démarquer » dans votre conception.

Les couleurs secondaires doivent être de couleur claire pour faire ressortir les cartes du fond blanc. Le moyen le plus simple consiste à utiliser simplement différents gris clairs pour cela. Ils vont avec tout.

Déterminez la personnalité de votre site

Chaque site a une personnalité. Ils peuvent être sérieux et professionnels. Ils peuvent aussi être amusants et légers. Déterminez ce que vous voulez que la personnalité de votre site soit. Cela déterminera quelques propriétés CSS que vous utiliserez. Comprendre ? Bien.

Maintenant, si vous avez choisi serious , je vous suggère d'utiliser :

• Police : utilisez la police CSS tailwind par défaut. Vous n'aurez rien à configurer.
• Rayon de la bordure : N'utilisez pas le rayon de la bordure. Les boutons carrés et les boîtes dégagent des vibrations sérieuses.
• Couleur : Pour votre couleur primaire, les bleus foncés, les verts, les gris et les violets sont tous d'excellents choix.

Si vous avez choisi fun , je vous suggère d'utiliser :

• Police : Tailwind par défaut ou Outfit
• Rayon de bordure : utilisez un rayon de bordure moyen à grand. Choisissez 1 cependant. Ne mélangez pas différentes tailles de rayon de bordure. Gardez-le cohérent.
• Couleur : Pour votre couleur primaire, vous avez beaucoup d'options. Je suggérerais une couleur vibrante plus claire cependant.

Trouvez l'inspiration

Très bien, vous avez donc une idée de la personnalité que prendra votre site. Maintenant, allez chercher de l'inspiration pour stimuler votre créativité. NE PAS COPIER le design de quelqu'un sur le T ou son code. Utilisez-le comme étoile du nord.

Sites d'inspiration pour la conception Web

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

Mes choix

DesignDo sera un site ludique/créatif. J'utiliserai la police tailwind par défaut et un grand rayon de bordure sur les boutons et les cartes. J'utiliserai également le violet clair comme couleur primaire.

Je vais utiliser ce modèle de site Web comme source d'inspiration...

Il a une belle section de héros où je peux mettre une copie de ce qu'est mon site et une liste verticale, dont j'aurai besoin pour répertorier mes conseils et ressources de conception.

Travaillez plus intelligemment, pas plus dur

Une partie de l'amélioration du développement et de la conception consiste à avaler votre ego. Vous n'êtes pas un meilleur développeur parce que vous construisez tout à partir de zéro. Vous n'êtes qu'un développeur lent. Il en va de même pour la construction de votre site.

Trouver des composants ou des thèmes gratuits

Je ne commence jamais mon HTML à partir de zéro. Je commence toujours avec des composants pré-construits et je pars de là.

Allaient utiliser une excellente option gratuite, Wicked Blocks .

En utilisant mon site d'inspiration pour me guider, j'ai choisi les blocs suivants à utiliser.

Mon en-tête

héros

Ci-dessous le contenu du pli :

Bas de page

Assemblez vos blocs en HTML

Avant de commencer à personnaliser notre site, rassemblons nos blocs en HTML.

C'est un bon début mais il nous reste du travail avant que DesignDo soit là où nous le voulons.

Logo

Encore une fois, restez simple !

J'utilise généralement un logo textuel pour mes sites. Le nom de mon site est DesignDo, c'est donc ce que sera mon logo. J'utiliserai généralement la couleur primaire comme arrière-plan et j'utiliserai du texte blanc ou noir. La couleur du texte est une question de lisibilité. Donc, si le texte blanc est difficile à lire par-dessus votre couleur primaire, utilisez du texte noir et vice versa.

Vous pouvez créer votre logo en écrivant du code HTML ou en utilisant un éditeur d'images.

Si vous décidez d'utiliser un éditeur d'images, je vous recommande Photopea .

C'est une contrefaçon de Photoshop, c'est gratuit et c'est incroyable ! Vous pouvez également télécharger vos propres polices pour le texte.

Pour le logo DesignDo, je vais simplement utiliser le nom comme texte avec une police en gras supplémentaire. Le fond sera ma couleur primaire.

J'ajoute également une légère rotation au logo pour lui donner un peu plus de caractère. (Ne faites pas cela si vous optez pour une conception plus sérieuse.

Liens de navigation

Il ne devrait pas y avoir grand-chose à faire avec les liens de navigation. Assurez-vous que le texte est gris ou noir. Si vous souhaitez ajouter des icônes avec le texte, vous le pouvez. Heroicons est une excellente bibliothèque d'icônes gratuite que j'utilise tout le temps. Je suggérerais d'utiliser ceci si vous créez un site plus sérieux.

Vous pouvez également utiliser Heroicons pour un site amusant/créatif. J'aime aussi utiliser des emojis pour les icônes si la personnalité de mon site est amusante et créative.

Pour DesignDo, je n'ai qu'un seul lien de navigation et j'utiliserai l'emoji de feu pour y apporter plus d'attention.

héros

Parce que nous avons utilisé Wickedblocks pour nous donner une longueur d'avance, la section des héros n'a pas grand-chose à faire pour nous.

Nous avons juste besoin de mettre à jour du texte. Lorsque vous traitez avec de grandes balises de titre comme la nôtre, structurez-les de manière à ce que la première ligne soit plus longue que la seconde. C'est plus attrayant pour les yeux.

Nous devons également mettre à jour la couleur de notre bouton M'avertir à notre couleur principale

Contenu

Encore une fois, nous ne sommes pas loin de la façon dont nous voulons que notre contenu ci-dessous apparaisse.

Je ne sens pas les icônes. Ils ne vont pas avec la personnalité du site. Je vais donc faire appel à Heroicons pour obtenir quelque chose de plus conforme à notre thème.

C'est mieux! Je vais laisser l'arrière-plan des icônes seul car il est gris clair et contraste agréablement avec notre icône sombre et notre arrière-plan blanc. Il est également arrondi afin de suivre notre thème des grands rayons de bordure.

Le "titre court" est un H2 mais il utilise les mêmes styles que sa description ci-dessous. Nous voulons que le titre du conseil se démarque et attire l'attention du lecteur. Je vais augmenter légèrement sa taille et son poids de police (nous ne voulons pas qu'il soit plus grand que la balise H1 au-dessus).

Enfin, nous mettrons à jour le texte à l'emporte-pièce provenant des méchants blocs avec nos propres conseils de conception !

Sommaire

Beaucoup de gens défendent l'utilisation de leur propre CSS fait à la main et utilisent des outils de conception comme Figma pour créer des maquettes. Je suis d'accord, ce sont deux choses formidables. Mais la vérité est qu'en tant que développeur, je n'ai pas le temps de devenir un expert de Figma ou d'écrire ma propre bibliothèque CSS personnalisée que je peux transporter d'un projet à l'autre.

Mais je peux être ingénieux et utiliser des outils et des ressources gratuits sur Internet pour créer de beaux designs à un rythme rapide.

Si vous souhaitez consulter le projet que j'ai créé dans cet article, suivez ces liens :

Vous pouvez trouver DesignDo ici .

Le dépôt de ce projet est ici .

Si cet article vous a plu, n'hésitez pas à rejoindre ma newsletter @ https://thefreelancedev.com

Également publié ici .