Bonjour, Habr! Je vous présente la traduction de l'article
"Comment concevoir et coder un site Web personnel" par Ryan Smith.
De nombreux développeurs pensent qu'être un bon designer est une capacité innée, que la créativité est ce avec quoi vous êtes né tout de suite. En fait, le design est une compétence qui peut être maîtrisée, comme n'importe quelle autre. Pour créer un beau site, il ne faut pas naître artiste, il suffit de pratiquer, de bien s'entraîner. Cet article explique comment pratiquer la conception tout au long du processus de création d'un site Web personnel à partir de zéro et de le transformer en code.
Pourquoi vous concevoir?
Pourquoi concevoir un site vous-même si vous pouvez utiliser une bibliothèque d'interface utilisateur telle que Bootstrap ou un modèle standard encore meilleur? Vous trouverez ci-dessous certains des avantages de l'auto-conception de votre site.
1. Démarquez-vous de la masse totale- De nombreux blogs de développeurs utilisent des modèles similaires, et il est facile de remarquer qu'il ne s'agit pas d'une conception personnalisée, ni de la conception d'un auteur. Si le but d'un site personnel est de démontrer ses capacités, l'utilisation d'un modèle peut détourner l'attention de cet objectif et gâcher l'impression.
2. Pratiquez vos compétences- Le développement vous aidera à mettre en pratique des algorithmes, des principes de développement, des outils, HTML et CSS. Il vous sera plus pratique de développer des interfaces utilisateur et de les afficher sur Internet.
3. Amélioration des performances des applications- Vos sites Web seront légers et fonctionneront mieux avec des CSS personnalisés. Si vous devez inclure une bibliothèque ou un modèle d'interface utilisateur, il peut contenir une grande quantité de code couvrant divers paramètres possibles que vous n'utilisez pas. Si du code inutilisé est envoyé à l'utilisateur, cela affectera négativement les performances de votre site.
4. Développer des compétences professionnelles- En tant que développeur Web, vous n'aurez peut-être pas à implémenter l'intégralité de la conception du site à partir de zéro, mais vous devriez être en mesure de créer une interface décente qui correspond aux conceptions existantes. Être un «développeur complet» signifie souvent connaître le langage interne ou le framework JavaScript tout en étant capable de travailler avec le design, HTML et CSS. En fin de compte, le travail est terminé, mais le résultat peut ne pas être esthétique, et peut ne pas être compatible avec d'autres applications ou peut ne pas être disponible sur certains appareils. Les développeurs complets devraient avoir des connaissances de base en conception et être en mesure d'éduquer l'utilisateur.
5. Ça peut être amusant- Créer ce dont vous êtes fier est une expérience enrichissante. Ce sera amusant si vous trouvez suffisamment de temps pour vous entraîner. Il n'est pas nécessaire d'être un artiste pour en être satisfait.
Pour commencer à développer votre site, suivez les étapes pas à pas. Il est difficile de visualiser une conception à partir d'un éditeur de code, donc je recommande d'abord de travailler dans un outil de conception visuelle, puis de traduire le résultat en code. Au début, il est plus facile de se concentrer sur la conception afin que vous puissiez la voir et faire des ajustements, sans avoir à réécrire le code.
Création d'un modèle filaire
La première étape consiste à créer un cadre approximatif pour le site. La création d'un filaire permet de déterminer la structure de la page avant d'ajouter une conception visuelle et du contenu. Un filaire n'a pas besoin d'être beau, il doit se concentrer sur la mise en page du contenu. Vous pouvez le dessiner à la main ou utiliser les principales fonctions de l'outil de développement. Pour créer un filaire (prototype), je présente le design comme une série de rectangles. Les éléments de page Web sont des blocs rectangulaires construits de haut en bas. Commencez par les rectangles, pour cela, vous n'aurez certainement pas besoin de talents artistiques.
Structure du site Web
Les éléments que vous ajoutez au filaire dépendent de vous. Vous pouvez ajouter une barre de navigation, un titre, des articles de blog et un pied de page. Pour commencer, vous n'aurez peut-être pas besoin de tous ces éléments, vous pouvez les laisser basiques et les ajouter plus tard. Décidez ce que vous souhaitez inclure et ajoutez ces sections à votre filaire. Si vous rencontrez des problèmes avec cette étape, vous pouvez parcourir un site Web similaire, copier la structure du contenu et le modifier en fonction de vos demandes.
Le cadre n'a pas besoin d'être parfait. Dès que la structure de votre site vous convient, vous pouvez passer à la conception visuelle.
Appliquer la conception visuelle
Vous pouvez utiliser un outil de développement gratuit, tel que l'éditeur graphique Figma, pour convertir un filaire approximatif en une structure. Si vous n'avez jamais utilisé de programme de développement, cela peut prendre un certain temps pour s'y habituer, mais vous n'avez pas besoin d'être un expert en la matière. Pour commencer, les fonctions de base, telles que l'ajout de rectangles, le redimensionnement et la définition des propriétés, sont suffisantes.
Mise en œuvre de la mise en page
Pour commencer, créez un canevas vide qui affiche une page de navigateur vierge. Ajoutez votre filaire à l'outil de développement en créant des conteneurs pour votre contenu. Je recommande de commencer par les options en noir et blanc afin que vous puissiez vous concentrer sur les mises en page. Ajustez la disposition de sorte que les éléments soient de la taille appropriée, alignés et qu'il y ait de l'espace libre entre eux.
Ajout de partitions et de stockage
Une fois que vous le faites ressembler à un site Web, rendez-le plus beau. Imitez les styles d'autres sites Web pour comprendre pourquoi les éléments sont attrayants.
À ce stade, considérez la forme, la taille, les bordures et les ombres. Mettez à jour progressivement les principaux rectangles selon le style dont vous avez besoin.
Mise à jour graphique
Les polices et la distance entre elles sont d'une grande importance pour donner au design un aspect impeccable. Même une conception simple peut être de haute qualité si les graphiques sont bien exécutés. Encore une fois, vous pouvez copier un autre site Web ou rechercher des polices et des ressources graphiques à ajouter à votre conception.
Ajouter de la couleur
Ajoutez ensuite de la couleur au site. Donnez une touche spéciale à votre site Web en créant votre propre marque. Réfléchissez à la façon dont vous souhaitez que le site atteigne le lecteur. Si vous voulez qu'il soit propre et minimaliste, choisissez des couleurs qui ne sont pas trop lumineuses, assurez-vous que les dégradés sont à peine visibles et choisissez des polices faciles à lire. Si vous voulez qu'il soit drôle, sélectionnez des couleurs vives, utilisez des dégradés lumineux, appliquez des textures d'arrière-plan, utilisez des éléments arrondis et sélectionnez les polices qui ressortent.
L'ajout de couleur peut sembler intimidant, mais vous n'avez pas besoin de connaître la théorie de la couleur pour cela. Si votre design a commencé en noir et blanc, vous pouvez choisir une couleur pour accentuer les éléments pour donner un peu de vie au design. Si vous voulez aller plus loin, je vous recommande de choisir une ou deux couleurs qui vous plaisent, puis d'utiliser les différentes options d'éclairage pour cette couleur. Cela aide à créer un thème de connexion, n'étant pas un expert dans ce domaine. Lorsque vous choisissez une couleur d'arrière-plan et un premier plan, vous devez garder à l'esprit la lisibilité lorsque vous vérifiez le contraste des couleurs.
Un exemple consiste à définir un bleu foncé pour l'arrière-plan, puis à utiliser une version plus claire du même bleu pour le texte. Pour les couleurs de fond blanc, vous pouvez utiliser du bleu moyen pour les en-têtes.
Une fois que vous avez ajouté la couleur, passez en revue la conception globale et apportez des modifications.
Clarification
Lors du développement, vous devez prendre du recul, du recul et de l'abstrait afin de regarder votre projet dans son ensemble et de l'affiner. Critiquez votre projet en décrivant ce que vous voyez en termes simples, puis traduisez-le en un problème technique qui doit être résolu.
- Ça a l'air à l'étroit?- Augmenter les retraits et les marges
- Est-ce difficile de lire le texte?- Choisissez une police plus nette ou augmentez sa taille
- Augmentez le contraste des couleurs entre l'arrière-plan et le premier plan
- Est-il difficile d'analyser le contenu?- Ajouter des en-têtes avec une police plus grande
- Ajoutez plus d'espacement entre les titres et les paragraphes
- Semble-t-il négligent ou incohérent?- Alignez les éléments en ligne droite horizontalement et verticalement. La définition de guides dans un programme de développement peut aider à garantir que les éléments sont correctement alignés.
- Ajustez le rembourrage et les marges pour maintenir une distance verticale constante.
- Rendez le texte cohérent en définissant la police et la taille de la police pour les en-têtes et les paragraphes. Évitez trop d'options de texte.
- Assurez-vous que toutes les couleurs correspondent à votre palette de couleurs.
Une fois la conception terminée, vous pouvez commencer à la traduire en code.
Création de structure HTML
- Placez tous les éléments HTML sur la page jusqu'à ce que vous craigniez d'ajouter du CSS.
- Cela vous permettra de voir le flux naturel du document HTML et du modèle de framework. La création d'une structure de page en HTML facilitera la compréhension de ce que vous devez ajouter au CSS afin de positionner et de styliser vos éléments de conception.
- Après avoir créé le HTML, accédez à la mise en page et au style à l'aide de CSS.
Stylisez-le avec CSS
Étant donné que les documents HTML sont ajoutés de haut en bas, vous pouvez commencer par le haut du document et travailler vers le bas. En utilisant le design que vous avez créé, essayez de le copier le plus près possible en HTML et CSS.
N'oubliez pas que cela ne doit pas être sur le principe du "tout ou rien", vous pouvez implémenter les parties nécessaires à la version initiale du site. Pour mon site, je n'avais besoin que d'une introduction, de liens et d'un moyen de publier des blogs, c'est donc tout ce que j'ai commencé à implémenter. Si vous n'êtes pas prêt à implémenter une section, vous pouvez la supprimer jusqu'à ce que vous soyez prêt.
Disposition des sections et des éléments
Je recommande de se concentrer sur la disposition des éléments et de préserver les aspects esthétiques à une date ultérieure. Si vous organisez et stylisez des éléments en même temps, cela peut entraîner des allers-retours, ce qui peut ralentir votre progression. Un exemple est la disposition de la barre de navigation lorsque vous essayez de définir le type et la taille des polices. Vous pouvez avoir tout arrangé de manière pratique, mais le réglage de la police réinitialisera tout. Cela peut vous faire redimensionner la barre de navigation pour l'adapter à nouveau. Mais que faire si la barre de navigation est maintenant trop haute? Vous pouvez changer cela plusieurs fois, ce qui peut conduire au chagrin. Au lieu de cela, je recommande de se concentrer principalement sur la disposition des éléments et d'essayer de les faire fonctionner avec différentes tailles de contenu. Cela peut nécessiter une méthode d'essai et d'erreur en CSS, mais pour vous assurer que vos éléments sont suffisamment larges pour y ajouter facilement du contenu.
Lorsque je transforme la mise en page en un design à part entière, je préfère penser aux lignes horizontales qui coupent le design en sections de haut en bas. La barre de navigation en haut peut être la première pièce. Vous pouvez uniquement vous concentrer sur le HTML et le CSS nécessaires à la navigation, sans vous soucier des sections ci-dessous. À l'intérieur de la barre de navigation, des fragments verticaux peuvent être divisés en éléments qui composent la navigation. Concentrez-vous sur l'élément situé dans le coin le plus à gauche, puis suivez à droite. Lorsque la barre de navigation est installée, passez à la section en dessous.
Ajoutez des styles visuels.
Stylisez les éléments en fonction de votre conception et ajoutez les mêmes faces de police, tailles de police, poids de police, couleurs et images. Lors de la publication du résultat de conception sur Internet, un ajustement peut être nécessaire, car la visualisation dans le navigateur et dans différents navigateurs peut différer.
Rendez-le réactif
Rendez-le réactif pour que les utilisateurs sur des écrans de différentes tailles puissent facilement visualiser le contenu. Rendre un site Web réactif ne sera pas nécessairement difficile. Il n'a pas besoin de déplacer des éléments ou d'avoir un menu uniquement pour les appareils mobiles. Un moyen facile de rendre un design de base réactif consiste à avoir un point d'arrêt lorsque les éléments commencent à recadrer ou à rétrécir, à créer une pile et à les faire sur toute la largeur de la page.
Lorsque votre projet est mis en œuvre, vous avez terminé! Vous pouvez maintenant décider ce que vous voulez en faire.
Prochaines étapes
- Maintenant que le site est conçu et codé, vous pouvez ajouter du contenu et le publier.
- Vous pouvez continuer à l'utiliser comme projet de formation en créant un module interne ou en ajoutant une conception à un module externe.
- Continuez à vous entraîner, à vous améliorer. Un développement confortable peut prendre un certain temps. J'espère que ce guide est un pas dans la bonne direction.
Conclusion
- La conception du site lui-même vous aidera à développer vos compétences en conception et à vous démarquer des autres.
- Créez un filaire pour structurer le contenu et les fonctionnalités.
- Transformez votre filaire en conception visuelle avec un outil de conception. Laissez-vous inspirer par le design que vous aimez.
- Codez les structures de page HTML pour comprendre ce que CSS doit être appliqué pour transformer ces éléments.
- Stylisez vos pages CSS pour qu'elles correspondent à votre conception.
- Faites-le passer au niveau supérieur en le déployant, en l'utilisant comme projet pratique ou en continuant d'améliorer la conception.