Plus de 15 conseils de conception pour les développeurs en l’absence de votre concepteur

Parfois, vous devez concevoir quelque chose rapidement, et les designers sont partout. Dans ce cas, nous ne pouvons pas rester immobiles: Nous devons changer le design. Voici quelques conseils utiles de conception wordpress pour permettre à n’importe quel développeur de réussir, même si les délais sont serrés. Choisissez votre configuration avec sagesse si vous êtes occupé, vous trouverez un thème WordPress avec une mise en page par défaut et une page de présentation. Utilisez des constructeurs de visualisation comme elementor ou Beaver Builder pour organiser et modéliser rapidement les mises en page et ajouter des éléments préexistants. De cette façon, vous pouvez construire un site Web fonctionnel et le faire fonctionner en quelques heures. Oui, si vous n’êtes pas prudent, il peut sembler un peu générique, mais il fonctionne. Envisagez d’ajouter des dessins et des animations personnalisés pour la personnalisation.
C’est peut – être l’un des conseils les plus importants que n’importe qui peut vous donner. Les designers qui ont une vision esthétique et design deviennent parfois fous. Cependant, il est plus sûr de rester mince si vous êtes né sans la capacité de nommer 6 espèces de bleu. Essayez le design minimaliste avec des accents colorés et quelques animations subtiles. Exemples de conception minimaliste pour que le style minimaliste fonctionne, vous devriez vous concentrer davantage sur les détails. Heureusement, les détails dont je parle peuvent être stylisés avec quelque chose que vous connaissez mieux: le Code.
N’utilisez pas Photoshop ou illustrateur si vous savez que vous n’êtes pas bon à Photoshop depuis plus de 10 ans et que j’ai à peine eu un \
Cela vous aidera à concevoir plus rapidement et plus efficacement. Certaines personnes trouvent canva une solution très simple et intuitive.
Apprenez Sass ou moins et moins est le langage d’extension CSS. Ils ajoutent des caractéristiques et des capacités supplémentaires au CSS, comme les variables, les fonctions, la nidification, les opérations arithmétiques et le mélange. Pour plus de détails et de documentation, consultez leur site Web officiel. https:\/\/sass-lang.com\/ http:\/\/lesscss.org\/ Je sais que ce n’est pas vraiment ce que tu vas faire dans quelques jours, mais c’est un avenir à envisager. Une fois que vous avez appris l’une des extensions linguistiques, vous améliorerez et accélérerez considérablement votre flux de travail. Adapter le Code des autres à vos besoins il y a beaucoup de bonnes personnes qui partagent leur code gratuitement. Si vous êtes dans une crise de temps, modifier le design existant peut être la réponse à vos prières. Mon point de référence est le modèle de conception sur le codepen. Vous trouverez des boutons pré – codés, des accordéons, des curseurs, des mises en page, etc.
Si l’image SVG peut être un graphique vectoriel extensible, utilisez l’image SVG. Utilisez – les avec des logos, des icônes et d’autres graphiques sur votre site. Même si elles sont agrandies, elles ne perdent pas de masse. Notez toutes les fonctionnalités de SVG: les images SVG peuvent être créées et éditées à l’aide de n’importe quel éditeur de texte. Les images SVG peuvent être recherchées, indexées, indexées Soumettre aux scripts et aux tablettes les images SVG sont extensibles les images SVG peuvent être imprimées à n’importe quelle résolution de haute qualité les images SVG sont extensibles les graphiques SVG Si agrandir ou Redimensionner SVG est un fichier SVG standard ouvert est XML pur en utilisant les bibliothèques et les cadres JavaScript J’espère sincèrement que vous n’êtes pas l’un d’eux Les développeurs WordPress qui n’utilisent encore que PHP. Il y a une raison pour laquelle JavaScript est le langage de programmation de cette époque
– Non.
JavaScript est si populaire en partie parce qu’il a beaucoup de bibliothèques, de cadres et d’extensions open source. L’utilisation de ces ressources gratuites vous permettra de travailler plus rapidement, mieux et plus efficacement. Vous voulez savoir comment ajouter une bibliothèque à WordPress de la bonne façon? Heureusement, nous avons ce dont vous avez besoin: un tutoriel sur la façon de faire la queue pour JavaScript dans WordPress. Voici une liste des bibliothèques JS tierces déjà incluses dans WordPress. Vous pouvez les utiliser immédiatement sans faire la queue. Rachis JS codemmirror Cutter jquery jquery. Imagearea sélectionnez jquery. Jcrop jquery ui swfupload (obsolète) tinymce thickbox select 2 colors Select one Primary Color and one Secondary Color, which are very Matching each other. Utilisez des applications telles que la palette de matériaux et la calculatrice de couleurs pour vous aider dans cette tâche. Utilisez toujours des couleurs primaires et secondaires sur tous les éléments que vous voulez avoir un sens des couleurs. Pour l’arrière – plan de mise en page et le texte, ajoutez une couleur neutre à la palette en conséquence. N’ajoutez pas trop de couleurs au mélange. Gardez – le au minimum.
Sélectionnez deux polices Sélectionnez deux familles de polices complémentaires que vous utiliserez sur votre site Web. Les lignes sans serif conviennent mieux aux titres et aux titres que les lignes sans serif conviennent mieux au contenu du texte. J’ai écrit plus sur la sélection d’une paire de rôles et de palettes dans mon dernier article. Je suis désolé de vous dire que concevoir un logo n’est pas quelque chose que vous devriez faire seul. Le logo est l’élément visuel le plus important de toute entreprise. C’est le logo visuel de votre entreprise et vous voulez qu’il fonctionne correctement. Évitez d’utiliser le créateur de logo universel et payez le concepteur. Si nécessaire, engagez un pigiste. Si le problème est l’argent, essayez de trouver un étudiant en design qui est plein de nouvelles idées, mais qui pourrait être moins cher.
Choisissez des photos et des vidéos d’inventaire de haute qualité pour votre cl
Ente n’a pas fourni de photos pour le site? Peut – être, mais elles sont floues, pixelisées, effrayantes, n’est – ce pas? On y est tous allés. La solution la plus simple consiste à utiliser des images de stock de haute qualité. Il existe de nombreux stocks gratuits et de qualité. Mes favoris sont unsplash avec des photos d’inventaire gratuites et freepik avec toutes sortes de ressources. Les deux galeries de photos les plus populaires et probablement les plus importantes en stock libre sont: https:\/\/www.pexels.com\/ Et https:\/\/stocksnap.io\/ De nombreuses photos archivées de ces sites sont utilisées comme présentations dans les thèmes WordPress. Évitez d’utiliser les photos que vous voyez autour de vous parce que votre site Web semble très commun. Si vous recherchez des sites spécifiques qui ne sont pas trop \
Pour les photos et vidéos d’inventaire de qualité, votre première étape devrait être: https:\/\/www.shutterstock.com\/ Et https:\/\/www.gettyimages.com\/ Il vaut également la peine de visiter ce site allemand: https:\/\/www.photocase.com Ne soyez pas avare dans la recherche d’un comportement impeccable. Si vous trouvez une image ou une vidéo de stock de qualité parfaite, veuillez payer. Ça doit en valoir la peine. Vous pouvez utiliser les filtres d’images css pour améliorer encore vos photos d’inventaire et votre site WordPress. Optimiser les images n’oubliez pas d’optimiser les images pour le Web. Lorsque vous téléchargez une photo stock, redimensionnez – la à la taille que vous utiliserez avant de la télécharger sur WordPress. Pour d’autres Smush et Optimisations, je recommande d’utiliser le plug – in Smush.
Si vous utilisez Photoshop ou un outil similaire pour retoucher vos photos, assurez – vous d’utiliser l’option enregistrer comme Web. Enregistrer des photos et des images en plusieurs couleurs dans un fichier. Jpg et enregistrer le dessin au format PNG. Lors de l’enregistrement pour le Web
Armé avec beaucoup d’ennuis. Ne mélangez jamais les icônes de différents paquets: cela peut sembler non professionnel. Pour les points de style supplémentaires, considérez l’animation de l’icône SVG. La meilleure façon est d’utiliser snap, une bibliothèque JavaScript qui anime les dessins SVG. Si, pour une raison quelconque, vous ne voulez pas coder du tout, vous pouvez utiliser l’application svgator. Il s’agit d’une application payante qui est testée gratuitement pendant un mois et qui vaut la peine d’être essayée. Les détails déterminent le succès ou l’échec: pour rendre le style minimaliste attrayant, vous devez retrousser vos manches et faire plus de travail sur les détails importants. Tout cela peut être fait en Code. Pas tout noir et blanc, évitez le noir pur # 000 ou le blanc pur # FFF. Elles sont trop dures. Utilisez des variantes légèrement douces comme # efefef pour le blanc et # 181818 pour le noir. La limite est une tentative démodée d’utiliser l’attribut d’ombre de boîte CSS au lieu de la limite sur l’élément. Il rendra votre design plus élégant et plus mince. Dans certains dessins, les bords solides de 1 ou 2 pixels sont beaux et rétro. Cependant, n’utilisez pas de lignes pointillées ou de bords pointillés. Pour votre style

Les séparateurs sont souvent des éléments ennuyeux qui peuvent avoir un impact très positif si vous ajoutez du Code à eux. Elementor page Builder a également une fonctionnalité de séparation de style très intéressante. Les carrés sont ennuyeux. Ne fais pas semblant. Les formes irrégulières attirent plus d’attention. Utilisez – les modérément dans le CTA ou les boutons de haut niveau. Personnaliser le menu hamburger est essentiel pour les appareils mobiles, mais ils sont également beaux sur le grand écran. J’ai trouvé une belle sélection de menus de hamburgers sur codepen que je voulais partager avec vous. Si vous ne savez pas comment faire un menu hamburger, lisez les tutoriels dans cet article. Utilisez un gradient au lieu d’une seule couleur de fond parce que
N’essayez pas le gradient? Vous pouvez facilement créer votre propre Gradient en utilisant l’éditeur de gradient colorzilla, en copiant simplement le code CSS sur le site WordPress. Ne soyez pas fou du nombre de couleurs dans l’ombre, en prenant soin de ne pas entrer complètement en conflit avec les couleurs. Si vous éprouvez des difficultés à créer votre propre schéma de couleurs, ou si vous ne savez pas ce qui fonctionne bien, vous pouvez choisir d’utiliser la rampe par défaut gratuite. Les gradients peuvent également être utilisés comme superposition de photos de fond, d’icônes, de boutons et d’autres éléments de conception. C’est une technique très précise pour créer la cohérence. Si vous voulez écraser la rampe sur l’image de fond, ajoutez la rampe en utilisant l’attribut &: avant (SASS) et réduisez son opacité à 60 – 70%. Voilà ce qu’il en semble: rappelons – nous qu’il est toujours préférable d’engager des designers professionnels, mais que nous devons gérer au besoin! Si vous êtes pressé, choisissez votre configuration avec sagesse. Installez un thème minimaliste rapide et Importez votre présentation pour lui. Stylisez les détails pour rendre votre design plus professionnel et moins polyvalent. Profitez de vos forces (Code) dans la mesure du possible. Toujours sélectionner les combinaisons de couleurs testées, les images de haute qualité et les clips d’archive. N’oubliez pas d’utiliser le même auteur et le même paquet d’icônes de style général que votre site. Paiement du logo. Plus important encore, n’oubliez pas d’être cohérent et subtil avec votre design. Bonne conception de code! J’espère que ces conseils vous aideront quand vous en aurez besoin. Avez – vous d’autres suggestions à partager? Peut – être avez – vous une ou deux questions? La section commentaires ci – dessous vous appelle! Tags: designwordpress Developer tips Web Design Trends Web Design