Comment devenir un bon éditeur web ?

Vous voulez savoir comment concevoir votre tout premier site ? Ou en avez-vous déjà conçu quelques-uns, et maintenant vous souhaitez transformer vos compétences en profession ? Le but de l’article est de vous guider dans la bonne direction Nous avons un article vraiment long pour vous qui est le plus susceptible d’être lu tous vraiment seulement par ceux qui sont sérieux au sujet de la conception web. D’autres peuvent se rendre compte que le travail du webdesigner n’est pas si simple. Nous apportons une véritable base pour ce que le bon concepteur web devrait être capable de faire et comment il devrait progresser dans l’apprentissage.

Nous sommes conscients que, bien sûr, tout ce dont vous avez besoin ne peut pas discuter dans un seul article : de la compétence, de l’outil et de la technologie que vous aurez besoin d’acquérir pour devenir raisonnablement par un designer compétent. Il faudra des mois pour les apprendre, et des années pour les contrôler vraiment magistralement… c’est vrai. Il n’y a effectivement pas de moyen plus rapide. Parmi les aspects les plus drôles du travail du webdesigner Cependant, il appartient que vous apprenez encore quelque chose et que vous évoluez.

A lire en complément : Comment regrouper toutes les photos ?

Parmi nous, les concepteurs : avez-vous déjà dit à quelqu’un « Je conçois des sites », puis ressenti un coup de fouet d’horreur rafraîchissant quand ils lui ont répondu : « Mais c’est génial ! Pouvez-vous m’apprendre ça ? Il est souvent difficile d’expliquer à quel point la conception du travail prend. Beaucoup de gens supposent que vous cliquez simplement sur quelque chose quelque part et que vous le faites glisser sur l’écran, peut-être en quelque sorte similaire à PowerPoint. Je donne ce conseil gratuitement : choisir PowerPoint pour exporter des « sites Web » n’a pas aidé. C’est pourquoi nous sommes ici pour donner une véritable mesure à cette fausse opinion. La prochaine fois que quelqu’un vous demande comment les sites Web sont censés concevoir, publiez-les ici.

Mesdames et messieurs, bienvenue dans le guide web, vous pouvez dire à l’école primaire, où vous commencez par le web design. Prenez la souris, embrassez le clavier, cet article ne sera pas court. Le café n’est pas obligatoire, mais il fait chaud recommande.

A découvrir également : L'impact des backlinks sur le référencement organique : tout ce que vous devez savoir

Pour qui est cet article ?

L’ article est destiné à tous ceux qui veulent commencer à concevoir des sites dans le navigateur. Aussi aux personnes qui veulent commencer à concevoir des sites. Nous supposons que le lecteur n’a aucune formation formelle en design, ne peut pas coder et n’a même pas d’expérience dans l’industrie du design web.

Quant aux « exigences minimales »… la barre est assez basse. Si vous connaissez les dossiers et les fichiers texte, vous pouvez commencer.

Il va commencer facilement et rapidement, mais construire un bon site est complètement à propos de quelque chose d’autre. Vous devrez maîtriser beaucoup de compétences. Vous devez en apprendre assez sur la théorie des couleurs. Vous devez savoir comment les êtres humains interagissent avec les sites, et pourquoi ils le font de cette façon et non autrement. Vous devez apprendre les bases des langages de codage, à savoir HTML et CSS.

Ensuite, vous voudrez peut-être apprendre quelque chose des bases de la programmation en JavaScript et voir comment avec son aide manipuler des parties du web. Enfin, nous avons des systèmes pour la gestion de contenu, l’optimisation des moteurs de recherche, le marketing.

Et bien sûr et surtout, vous devez avoir un bon contenu pour le web. Pourquoi est-ce que tu suirais tout ça ? J’allais dire que tu pourrais embaucher un pro. Mais vous voulez y entrer parce que vous aimez apprendre de nouvelles choses. Vous êtes fasciné par Internet et son énorme potentiel. Vous aurez besoin de beaucoup de temps libre. Vous n’avez pas besoin d’être des experts en tout. Aucun des professionnels n’est comme ça. Certains sont des spécialistes dans un domaine. D’autres savent quelque chose de tout.

Bienvenue, nouveaux arrivants, dans le monde merveilleux du web design. Soyez prêt à foirer beaucoup de choses, mais n’oubliez pas de vous amuser !

Comment utiliser ce guide ?

Lisez juste assez pour commencer. Faites votre premier site, sera probablement assez boiteux. Revenez ici et lisez le prochain morceau. Améliorez le web. Répétez tout.

Vous ne voulez probablement pas lire tout ce dont vous avez besoin à la fois, vous n’avez vraiment pas à le faire. Il y a beaucoup de sources externes que l’on devrait lire, beaucoup de concepts à partir desquels casser la tête. Même moi, je n’ai pas tout lu dans un trou. Vous n’êtes pas non plus susceptible de le faire. Mais c’est bien.

Nous concevons dans le navigateur

Vous avez peut-être déjà regardé autour d’Internet et remarqué que beaucoup de gens conçoivent initialement des sites dans les éditeurs d’images. Ils ne code les dessins qu’après, ou quelqu’un d’autre le fait pour eux. L’outil le plus commun de ce type est Photoshop, mais les gens utilisent d’autres programmes, y compris Sketch, GIMP, Inkscape et Illustrator.

Les sites devraient se concevoir dans un navigateur… parce que les gens ne naviguent pas sur le Web dans Photoshop

Lorsque vous regardez autour du Web, vous trouverez des articles de blog dans les fils de forum débattant quels avantages et problèmes sont intrinsèquement associés lorsque vous concevez des sites dans un outil ou un autre. C’est une bonne chose. Je n’arrête pas de dire que les gens devraient utiliser l’outil qui leur convient le mieux. Je soutiens également qu’il y a une exception à cette règle. Je crois que les sites devraient se concevoir eux-mêmes dans un navigateur — idéalement plusieurs navigateurs — parce que les gens ne naviguent pas sur le Web dans Photoshop.

En outre, le flux de travaux, ou flux de travail basé sur un navigateur, apporte plusieurs avantages supplémentaires :

Vous voyez exactement quoi et comment cela fonctionne

Les prototypes préliminaires (soi-disant maquettes) n’expriment pas très bien les parties interactives ou les parties animées du web au niveau hi-fi. Avec la conception basée sur un navigateur, vous pouvez voir exactement comment fonctionne un design donné.

En particulier, cela est vrai quand il s’agit de design réactif. (Pour les non-initiés : la conception réactive est lorsque vous créez une conception Web qui change et s’adapte à différentes tailles d’écran. Cela signifie que le même site aura l’air, et probablement fonctionnera, quelque peu différent sur les téléphones, les tablettes et les ordinateurs de bureau.)

Avez-vous déjà essayé de faire au moins trois maquettes hi-fi mise en page de chaque page du site ? Ce n’est pas confortable. Beaucoup mieux est de faire « tout à la fois ».

La conception basée sur un navigateur fera de vous un meilleur concepteur

Lorsque vous faites tout le travail de conception préliminaire ailleurs, comme Photoshop, les choses se dépassent facilement : les interfaces commencent à être surremplies, et les concepteurs vont comme des merveilles après des graphismes dérangés. Sur toutes les textures faites de peau réelle ! ( Cette tendance, heureusement, s’est estompée ces dernières années.) Cela n’a pas à se produire comme ça, mais ça arrive souvent. Et pire encore si la personne qui conçoit le site n’est pas la même personne qui codera le site.

Concevoir dans le navigateur va probablement changer votre approche de l’esthétique et des questions visuelles. Ils vous obligeront également à en savoir plus sur le HTML. Vous en apprendrez également beaucoup plus sur le fonctionnement des navigateurs individuels. Vous pouvez dire que plus vous vous salir les mains avec du code, mieux vous comprendrez comment les sites fonctionnent. Cela seul ne vous fera pas devenir un designer incroyable, mais ce sera un bon début.

Circuits pensés dont vous aurez besoin

Avant même d’ouvrir un éditeur de texte et de commencer à écrire quelque chose, vous devez bien comprendre quelques principes de base. Les gens qui conçoivent dans un éditeur d’images peuvent concevoir le site comme ceci :

1. S’ ils sont clairvoyants, ils dessineront quelques idées sur papier d’abord. Puis ils ouvrent Photoshop. En tant qu’amateur, j’ai toujours commencé avec la deuxième étape — ne répétez pas les mêmes erreurs après moi.
2. Ils mettront tout leur cœur, leur âme, leur sang, leur sueur et leurs larmes dans leurs meilleures idées. Ces idées façonneront le design complet et beau de la page d’accueil (probablement). Ensuite, en supposant qu’ils aient un patron ou un client l’exigeant, peut-être qu’ils mettront rapidement en place quelques choix de concepteurs ou de mise en page supplémentaires.
3. Le client, pour des raisons seulement qu’il connaît, choisira presque inévitablement l’un des concepts de « qualité inférieure ». Mais même s’il ne s’agit pas d’un « défaut client », il peut être très, très difficile de revenir en arrière et de modifier les conceptions que vous avez déjà décrites en détail, ou « terminées ».

Cette approche ne fera aucun bien à personne. Par conséquent, la première chose que vous devriez inculter en vous-même est :

Tout est itératif

Toutes les parties de la conception, littéralement, doivent être soumises à d’éventuels changements. Rien n’est sacré. Si quelque chose ne fonctionne pas, ou ne rentre pas dans le reste de la conception, il doit disparaître, ou au moins changer. Même après que vous avez le site « fait » et que vous l’avez déjà lancé, vous pouvez remarquer quelques défauts à la beauté, ou décider de le diriger en quelque sorte différemment. Le web lui-même est modifiable et continue de changer dynamiquement. Bien que je ne crois pas vraiment aux changements faits juste pour faire une différence, vous devez être prêt à changer quoi que ce soit si nécessaire.

Il ne s’agit pas de construire un site, de l’exposer, puis de le laisser seul. Les sites sont comme des enfants à certains égards, sauf qu’ils ne grandissent jamais et ne quittent jamais la maison. Vous devez toujours prendre soin d’eux, les mettre à jour et les entretenir.

Lorsque vous le faites correctement, vous verrez un rendement fantastique sur votre investissement.

Ne jamais cesser d’apprendre

Le moment où les concepteurs cessent d’apprendre une nouvelle chose sur le web design est exactement le moment où ils se résignent à aller avec le temps, alias étant pertinent. L’internet est une question de pertinence. Je veux dire c’est assez sérieux. Si le site semble trop démodé, il y a de fortes chances que de nombreux visiteurs ne le regardent pas pendant un certain temps, regardez ceci ou cela pour voir si vous avez quelque chose à leur offrir. Tout est à propos de la façon dont vous les impressionnez.

Il n’est pas nécessaire de refaire le design tous les six mois, mais vous devriez toujours lire de nouvelles choses, découvrir de nouvelles idoles de concepteurs et parler à d’autres designers. Comme tout médecin, avocat ou autre professionnel, vous devez suivre les derniers développements.

Il ne s’agit pas seulement de toutes ces nouvelles tendances de créateurs. De nouvelles applications, technologies et astuces qui facilitent la vie et le travail sont également en train d’émerger. Tu te souviens de ce que j’ai dit, que ce serait un beau destin, ou un long et difficile voyage ? Oui. C’est une partie d’elle.

Le contenu compte le plus

Nous avons déjà ont peut-être traité du fait que si vous créez un site Web, vous ne devriez jamais aller directement dans la création de graphiques. La première étape ne devrait pas être de sauter dans un design, jamais et dans tout. La première étape de la conception d’un site est de s’assurer que vous disposez du contenu approprié du site. Cela signifie texte, photos, coordonnées, lieu de travail. Vous avez besoin d’abord du contenu. Sans discussion.

La première étape dans la conception d’un site est… contenu web… Vous avez besoin d’abord du contenu. Sans discussion.

Vous avez probablement vu des gens remplir leurs dessins avec des textes de remplissage appelés « Lorem ipsum ». Vous le connaissez peut-être sous le titre « Texte latin » ou « texte grec », bien qu’il ait très peu à voir avec ces deux discours. Il s’agit juste d’un texte de remplissage fourni pour montrer à quoi ressemblera le design lorsqu’il est rempli de contenu réel. Évitez-le si vous le pouvez. Je crois que les concepteurs devrait essayer d’utiliser le contenu réel sur le site autant que possible. Ils devraient également le faire dans leurs croquis numériques du web (appelés filaires).

Cette pratique fournit une bien meilleure idée de l’espace dont vous aurez besoin pour le contenu, et permet également d’éviter beaucoup de bogues et de tracas qui pourraient survenir ultérieurement.

La règle qui doit encore être gardée à l’esprit est : le contenu ne doit pas être produit de sorte qu’il tombe comme un dessin drapé. Le design doit être fait de telle sorte qu’il tombe comme un contenu drapé. Une fois qu’il est dit à haute voix une fois, il semble évident. Il m’a fallu des années pour le comprendre. Et je ne suis pas seul dedans.

Corollaire : la typographie en principe est la conception web

À moins que le site en cours de construction ne soit complètement spécifique, c’est-à-dire le tout sur les images, la vidéo ou l’audio, il y aura beaucoup de texte dedans. Il est possible qu’il y ait beaucoup de texte même s’il s’agit de l’un des cas particuliers mentionnés. Texte commentaires, descriptions de texte, révisions de texte, arguments de texte sur le contenu. Internet est surtout du texte.

Un texte qui a l’air vraiment bon vous donne beaucoup d’avance.

Il semble donc justifié d’affirmer que la discipline de concepteur esthétique la plus importante à maîtriser est la typographie. Si les gens parviennent à lire votre contenu, vous vous en sortirez. Ne vous méprenez pas, toutes les disciplines du design sont importantes ; commencez par la typographie cependant.

Vous affichez le Web différemment des utilisateurs

Vous devez continuer à réaliser que les gens naviguent sur le Web avec toutes sortes d’appareils et dans toutes sortes d’environnements. Vous devez en tenir compte à partir de différents points de vue.

Certaines personnes ont des écrans plus petits, beaucoup plus petits. Tu te souviens de ce que j’ai écrit sur le design responsive ? C’est ici qu’il entre dans l’événement. Le web que vous créez devra s’adapter aux écrans larges de trois à 40 pouces. Ce n’est pas facile, mais ça paie. Cela paie parce que si plus de gens peuvent réellement utiliser le site, ils sont plus susceptibles d’acheter ce que vous vendez.

D’ autres, à leur tour, voient dans un éclairage différent de vous, leurs écrans peut-être mat. Ou les manquer là-bas, ou les manquer. Cela signifie que le design a besoin de contraste, beaucoup de contraste. Des nuances de couleur subtiles étonnantes et des ombres parfaites ne signifient rien du tout pour beaucoup d’utilisateurs.

Certaines personnes utilisent des écrans tactiles. Habituellement, ce sont les mêmes qui utilisent de petits écrans. En outre, vous devez compter sur cela et vous assurer que les liens et les boutons peuvent être facilement sélectionnés en appuyant sur votre doigt. Lorsque vous testez les conceptions sur vos propres appareils mobiles, vous pouvez rencontrer d’autres difficultés d’utilisation que vous devrez affronter.

Puis il y a les faibles et les aveugles. Ensuite, il y a des gens qui utiliser d’autres navigateurs. Personnes utilisant des navigateurs à base de texte. Et je pourrais continuer et encore. Quand je résume ceci : les expériences des utilisateurs individuels sur le web ont tendance à être différentes, parfois très différentes. Ne l’oublie jamais.

Tu vends quelque chose !

En conclusion, n’oubliez pas que vous concevez pour la vente. Mais oui, tu vends quelque chose. Même si peut-être vous bloguez sur vos expériences personnelles, vous êtes toujours en train de vous vendre. Vous vendez votre expérience, probablement basée sur la prémisse, qu’ils seront quelque chose d’intéressant pour le lecteur, ou qu’ils auront une certaine valeur pour eux. Avec un blog, peut-être cela signifie simplement s’assurer que les gens trouvent facilement et rapidement les publications qui les intéressent. Pour un site Web de quelque brochure publicitaire, cela peut signifier que la conception de chaque page doit être fait pour mieux construire l’excellence du produit ou du service, alors que dans le même temps une telle chose doit être donné acheter vraiment facilement.

Inclure ce facteur dans tout ce qui constitue le Web, y compris le contenu et la mise en page réelle du site. Les gens doivent voir ce que vous vendez, et ils doivent être convaincus qu’ils le veulent. Dis-leur vite. Vous devez leur montrer qu’ils peuvent facilement agir en fonction de ce que vous vendez. Si vous êtes blogueur, l’action peut être qu’ils s’abonnent à votre blog. Si vous vendez un produit ou un service, il s’agit d’une action de vous payer pour ledit produit ou service.

Compétences dont vous aurez besoin

Pour ce faire professionnellement, vous aurez besoin d’une variété de compétences différentes. Ici, nous avons l’intention de nous concentrer sur les compétences requises lors de la conception et de la création d’un site Web. Au fil du temps, bien sûr, vous aurez également besoin de compétences en affaires et en communication. Lorsque vous êtes prêt à tout savoir à ce sujet, consultez ici la catégorie WDD Les affaires.

Pour l’instant, commençons avec les premières choses que vous devez savoir.

Conception de l’expérience utilisateur

La conception de l’expérience utilisateur, l’expérience utilisateur (ou UX) dans ce contexte signifie que vous devez tout savoir sur la façon dont la plupart des utilisateurs utilisent les sites et traduire ces connaissances en une excellente conception de site. C’est un processus, c’est une philosophie, et beaucoup de travail. Sachez que vous utilisez apparemment des sites différemment de la plupart des gens. Ce qui est logique pour vous n’a peut-être pas de sens pour vos utilisateurs. Les concepteurs Web à tous les niveaux de compétences l’oublient de temps en temps, attention à cela.

Il y a, bien sûr, des ressources qui peuvent vous aider dans les débuts, comme une vue d’ensemble de Qu’est-ce que la conception de l’expérience utilisateur ? Cet article exhaustif de Smashing Magazine couvre les bases du design UX et inclut une liste copieuse de liens vers d’autres sources. Quand tu auras fini avec lui, tu seras sûr de lire l’article UI versus UX, quelle est la différence entre eux ? , qui a été écrit par Dain Miller. (Parfois, vous verrez que les termes « conception de l’interface utilisateur » (« conception de l’interface utilisateur, conception de l’interface utilisateur ») et conception de l’expérience utilisateur (« conception UX ») sont confus, et les gens discuteront ensuite de ces concepts feront une impression erronée.)

Maintenant aussi, le moment est venu d’apprendre quelque chose sur le wireframing, ou les croquis du web. C’est un processus au cours duquel vous esquissez des esquisses de quelques idées et idées très basiques relatives à la mise en page sur papier. Stylo et feuille de papier ou un programme de dessin sur une tablette sont des outils idéaux pour créer des concepts rapides, grossièrement esquissés, avec lesquels vous continuerez à travailler.

Plus tard, vous pouvez produire une version plus détaillée de la mise en page dans une application de bureau ou tablette. Ce processus est, dès le début, un élément essentiel pour décider comment le web fonctionnera.

Rapide L’introduction aux concepts de base de la création d’esquisses Web peut être trouvée dans Comment rationaliser le processus de développement à l’aide de croquis Web. Pour lire une introduction plus complète, essayez le Web Sketch Creation Guide for Beginners, il inclut également une longue liste d’autres ressources.

Les compétences esthétiques

Quelqu’ un pourrait soutenir que nous devrions apprendre les conceptions à coder d’abord, et seulement ensuite prendre soin de les rendre jolis. Peut-être que c’est vrai. Étant donné les objectifs que cet article est destiné à servir, cependant, je voulais discuter d’abord de la théorie, puis des compétences pratiques.

L’ esthétique est une affaire délicate. Ce qui peut frapper certaines personnes comme un grand schéma de couleurs peut frapper d’autres comme totalement excentrique. Les polices qui ressemblent à des « vraies » peuvent rendre vos partenaires commerciaux totalement impossible. Cela semble être très, très subjectif.

Pourtant, il y a une science sur la façon de produire les choses, qui ont l’air bien. Peut-être qu’il vous semble que ce n’est pas une science exacte. Mais connaissant les règles de base, vous avez déjà surmonté de nombreuses difficultés que vous pourriez rencontrer autrement. Semblable à toute autre discipline créative, la première étape consiste à connaître les règles. Ensuite, vous apprenez comment ces règles peuvent être enfreintes de manière créative sans casser votre site.

Typographie

Tu te souviens encore quand j’ai dit que tu devrais commencer la typographie ? Je plaisantais pas. Internet est textuel. Ce sont des mots. Ces mots devraient paraître incroyables. La typographie ne se limite pas à choisir la bonne police. La typographie est une question de convivialité. Par exemple, vous devez choisir les tailles de police et les types de police correctement pour rendre le texte bien lisible pour la plupart des utilisateurs sur la plupart des écrans. Vous devez définir les bonnes tailles pour les en-têtes et les légendes afin de créer une hiérarchie visuelle. Vous devez vous assurer que le texte compréhensible pour autant de gens que possible.

Le livre Practical Typography de Butterick va certainement aider avec cela. Tout est dedans : d’excellentes explications des concepts typographiques, des règles typographiques, de superbes démos, l’un des meilleurs titres britanniques que j’ai jamais entendus. Tu devrais lire tout le livre, tout. Vous pouvez lire en ligne, gratuitement, ou commander une copie physique. Fais-le. Et même si vous n’avez pas surmonté les difficultés liées à la conception du premier site, les conseils donnés dans le livre amélioreront l’apparence de chaque document que vous produirez.

Si vous ne voulez pas être avec l’ensemble du livre, essayez sa version courte, Typographie en dix minutes. Vous pouvez le gérer, comme l’indique le lien, littéralement en moins de dix minutes, tout en apprenant le plus essentiel que vous devez savoir.

Après avoir maîtrisé les règles de la typographie, vous avez peut-être déjà l’appétit de choisir certaines polices pour le projet. Beaucoup d’entre eux peuvent être trouvés fourni gratuitement, alors s’occuper d’eux. Beaucoup de gens, y compris moi, choisissent les polices des polices Web de Google. Les polices de Google vous permettent d’ « insérer » directement les polices pour une utilisation sur le web, ce qui est pratique. Mieux encore, certains grands designers ont compilé des listes de combinaisons de polices pour que vous puissiez les essayer :

• Les cinq principales combinaisons de polices recommandées par Google
• Huit combinaisons de polices Google
• Dix combinaisons de polices web Google plus sensationnelles, essayez-les aujourd’hui
• Dix autres grandes combinaisons de polices Google à copier

Pour créer les propres polices appariées de Google, essayez le combinateur de polices Web. Il s’agit d’un outil qui vous permet de visualiser rapidement les combinaisons de polices sélectionnées sous forme d’aperçu. Si vous avez besoin d’un outil de planification typographique plus avancé, essayez le site Typecast. A un plan fourni gratuitement, qui sera jeter à la plupart des concepteurs novices. Si vous commencez à travailler avec d’autres personnes et que vous devez vraiment leur donner une approche d’édition pour la planification des polices, il certifie, laissez-les payer pour cela. Typecast permet également d’accéder aux polices payantes qui ne sont pas dans la bibliothèque Google Fonts.

Un autre endroit où chercher certaines polices est le site Web Font Squirrel. « Font Squirrel » dispose d’une vaste bibliothèque de polices gratuites à utiliser sur les sites. Contrairement à Google, cependant, les intégrer n’est pas aussi pratique. Tu dois le faire toi-même. Pour apprendre à le faire, voici un excellent guide. Avant d’y aller, peut-être que ce serait une bonne idée de sauter dans l’article un morceau en avant et d’apprendre quelque chose des bases du HTML et du CSS d’abord.

Théorie des couleurs

La théorie des couleurs n’est pas de foirer les noms de couleurs apprises. Donc, si le client demande fuchsia, mais en fait souhaite brillamment Pink, tu sais où tu es. (