Si vous avez déjà essayé votre design web et que vous n'êtes pas vraiment un artiste, alors vous savez que la partie non-programmée de l'équation peut être un peu difficile.
Pour certaines personnes, comme certains membres de ma famille qui sont trop bon marché pour acheter un logiciel de création d'images, la difficulté se présente quand ils veulent créer des logos ou des arrière-plans sur mesure. Pour certains programmeurs, le problème vient quand le code CSS est nécessaire, et ils ne sont pas tout à fait au courant des dernières normes CSS.
Vous pouvez passer beaucoup de temps à vous tenir au courant des dernières tendances et normes en matière de conception de sites Web. Avec l'avènement de tant d'outils de conception Web WYSIWYG, la création de sites Web relève plus du domaine des non-programmeurs que des programmeurs de nos jours. Le problème avec cela est que quand il s'agit de peaufiner un design pour faire ce que vous voulez vraiment qu'il fasse, vous devez retourner à un programmeur, il n'y a pas moyen de contourner le problème.
Heureusement, il y a beaucoup de ressources qui peuvent vous aider avant d'aller chercher un programmeur à l'aide. Ici à MUO, nous aimons le web design et couvrons souvent le sujet, comme la critique de Ann's Firebug Guide de l'amateur pour personnaliser la conception de site Web avec FireBug Guide d'amateur pour personnaliser la conception de site Web avec FireBug Lire la suite, ma critique Kompozer ou la liste des grands blogs à suivre 6 meilleurs blogs de conception de sites Web à suivre 6 meilleurs blogs de conception de sites Web à suivre Lire la suite.
Un site particulier qui fournit toute une liste d'outils de conception de sites Web vraiment utiles que tout le monde peut utiliser est Mudcu.be.
Mudcu.be Outils de conception de sites Web
Mudcu.be est ce que j'appellerais une boîte à outils d'outils de base pour un concepteur web travaillant sur un très petit budget (ou pas de budget). Les outils que vous trouverez sur ce site sont très axés sur les graphiques, et la conception ou la coordination des couleurs de votre site Web. En fin de compte, les couleurs sont vraiment ce qui peut faire ou défaire un design, donc ce sont des outils importants à avoir à portée de main.
Si vous faites partie de ces gens qui n'ont pas assez d'argent pour se procurer de la peinture de qualité ou un logiciel de création d'images, ou peut-être que vous voyagez avec un petit ordinateur portable ou un netbook. Un outil sur Mudcu.be qui peut aider est le Sketchpad.
L'outil Sketchpad vous permet de créer une image dans un outil Web qui n'est pas sans rappeler Windows Paint. Cependant, après avoir utilisé Sketchpad pendant un moment, j'ai vraiment eu l'impression que c'était beaucoup plus facile à utiliser et beaucoup plus flexible que Windows Paint. Lorsque vous avez terminé, cliquez simplement sur l'image du petit disque en haut, et vous pouvez enregistrer l'image que vous venez de créer sur votre ordinateur. C'est si facile.
Maintenant, à mon avis, les outils les plus cool que Michael Deal offre sur son site sont la sélection COLRD des outils de dégradés de couleurs. Il s'agit d'une série d'outils de palette de couleurs qui vous permettent d'ajuster soigneusement les éléments de couleur pour obtenir la nuance exacte de la couleur dont vous avez besoin. Vous ajustez la teinte, la saturation et la luminance, et ajustez les niveaux de rouge, vert et bleu, et vous pouvez simplement choisir dans la boîte de couleurs similaires à partir de la droite si vous le souhaitez. Lorsque vous avez terminé, le code de couleur de l'ombre que vous avez créée est affiché juste au-dessus des curseurs.
La série d'outils COLRD comprend des applications Web similaires à celle ci-dessus. Le menu "Créer" vous permet de choisir parmi l'outil Couleur ci-dessus, ou vous pouvez aller avec Palette, Gradient ou Image DNA.
Les autres outils sont explicites, mais Image DNA vaut vraiment la peine d'être mentionné. Avec cet outil, vous pouvez ouvrir n'importe quelle image que vous avez sur votre ordinateur, puis utiliser l'outil pour identifier les couleurs dans la photo.
La beauté d'un outil comme celui-ci est que si vous prévoyez d'utiliser certaines images sur votre page Web, cette application Web vous permet d'identifier les couleurs que vous pouvez utiliser sur votre page Web qui correspondent parfaitement aux couleurs dominantes de votre photo. Cela peut aider les concepteurs de sites Web amateurs à surmonter le problème très courant de la collision des couleurs sur une page Web - transformer ce qui pourrait être un design décent en un site Web atroce.
Parlant de sites Web atroces, de nos jours, pourquoi diable les gens ont-ils encore des antécédents désagréables qui semblent provenir directement des années 1990? Une fois que vous avez les couleurs et les images de votre site Web triées avec les outils ci-dessus, vous pouvez passer au générateur d'arrière-plan.
Cette application web vous permettra de choisir parmi une longue liste de "textures" pour votre arrière-plan. Certains d'entre eux peuvent sembler ringards si vous ne disposez pas correctement, mais beaucoup d'entre eux semblent très bien si vous utilisez les sélections de dégradé pour affiner la nuance de couleur de sorte qu'il semble bien avec vos images et les couleurs du site. Une fois que vous avez terminé, cliquez simplement sur le bouton "Générer CSS", et le code CSS est généré pour vous. Cela ne devient pas beaucoup plus facile que ça.
L'outil est même livré avec une fonction «simulateur», où vous pouvez tester l'arrière-plan sur votre page Web avant de l'implémenter. Voici à quoi ça ressemble quand je lance le simulateur sur Google.com.
Michael aime la couleur, et aucun outil ne le montre plus que sa sphère de couleur. La façon dont il le décrit sur le site, la sphère de couleur est censée vous permettre de «visualiser les harmonies de couleurs» en utilisant les formules qu'il a imaginées. C'est en fait assez impressionnant parce qu'il vous permet de commencer avec une certaine sélection de couleur, disons rouge - et ensuite il décompose votre couleur de choix en un dégradé d'autres couleurs qui coulent en "harmonie". Ce sont les couleurs que vous voudriez coller sur votre site Web pour s'assurer que toutes les couleurs fonctionnent bien ensemble
Je ne fais que jouer avec la Color Sphere pendant un moment, mais je dois dire que même si je ne connais pas les formules qu'il utilise, les choix de couleurs fonctionnent vraiment bien ensemble.
Une autre des applications de Michael qui mérite d'être mentionnée est en fait une offre Appspot appelée Daltonize. C'est un outil vraiment impressionnant qui vous permet d'identifier le type de daltonisme que vous avez, puis d'utiliser cette sélection pour permettre à votre navigateur de vous afficher des pages Web dans un format qui tient compte de votre daltonisme.
Après avoir installé le signet dans votre navigateur, en suivant les instructions, vous verrez une icône de globe dans votre barre d'outils (au moins dans Chrome). Daltonize paramètres vous permettra d'identifier les déficiences de la vision des couleurs à chaque fois que vous ouvrez le navigateur, et vous pouvez également changer la sélection du type daltonisme à tout moment.
Voici à quoi ressemble la page résultante lorsque vous utilisez le filtre de daltonisme. Si vous n'êtes pas daltonien, alors l'image ci-dessous montrera mon blog, qui a normalement une teinte orange pour les côtés de l'en-tête et la couleur de l'icône, comme une couleur pourpre éclatante. On dirait qu'il a également teinté certaines images sur le site. Outil très impressionnant!
Ce n'est pas une liste de tous les outils de conception disponibles sur Mudcu.be, donc si la couleur est votre truc, ou si vous cherchez des moyens de mieux intégrer la couleur dans votre design web, ce site est une visite incontournable.
Avez-vous déjà lutté avec les couleurs dans vos efforts de conception Web? Quels outils ou techniques utilisez-vous pour faire correspondre les choses? Partagez vos pensées et vos idées dans la section des commentaires ci-dessous!
Crédit d'image: web design Via Shutterstock