Codage pour le non-codeur: les concepteurs peuvent penser comme les développeurs

Il y a eu ce fossé non écrit entre les concepteurs et les développeurs depuis que nous créons des sites Web. Les gens qui font bien paraître les choses par rapport aux gens qui font que ça marche Ces jours sont révolus.

Chaque concepteur doit apprendre comment fonctionne le développement dans le paysage numérique. Et chaque développeur doit comprendre les théories de conception de base. Ici, nous allons aider les concepteurs à mieux comprendre le langage des développeurs, une compétence essentielle sur le marché actuel. (En prime, tous les exemples de conception sont créés à l'aide de frameworks CSS.)

Explorez Envato Elements

Interfaces utilisateur et conception

L'épine dorsale derrière chaque site Web est une chaîne de 1 et de 0. Ce n'est pas très excitant en matière de design. Mais l'interface réelle et la connexion avec un utilisateur le sont.

Chaque petit détail comprend des éléments de conception avec lesquels quelqu'un est censé s'engager, des boutons aux éléments de navigation, en passant par les formulaires, en regardant une vidéo ou en achetant une paire de chaussures. Le but est de créer quelque chose de joli, engageant et facile à utiliser. C'est là que la conception et le développement se rencontrent.

Mots à connaître:

• Ajax: L' utilisation de JavaScript et XML asynchrones crée une expérience interactive où de nouvelles informations peuvent se remplir sur le côté utilisateur d'un site Web sans actualisation. Un exemple courant est le chargement continu de publications pendant qu'un utilisateur fait défiler une page Twitter.
• API: en fournissant des spécifications pour les routines, les données, les classes d'objets et les variables, et l'interface de programmation d'application permet à différents sites Web ou logiciels de «communiquer» entre eux et de travailler ensemble. Considérez-le comme un ensemble virtuel de blocs de construction.
• CSS: Les feuilles de style en cascade sont l'épine dorsale du langage utilisé pour styliser les sites Web et afficher visuellement les éléments HTML.
• Requête multimédia: élément CSS qui crée des règles spécifiques pour certains appareils en ce qui concerne le rendu des visuels. (C'est la magie qui permet de rendre la même photo avec un rapport d'aspect et un recadrage sur un site de bureau et d'une autre manière sur un appareil mobile.)
• Responsive web design (RWD): technique de conception Web qui utilise une grille flexible et des images, des supports et du texte afin qu'un site Web unique s'adapte à plusieurs tailles d'appareils. (C'est sans doute l'un des facteurs les plus importants de la conception Web en ce moment.)
• UI: L'interface utilisateur est tout ce que l'utilisateur voit et interagit avec dans une conception. Cela peut être tout, de la façon dont ils utilisent le site Web et l'appareil à chaque élément individuel de l'écran.
• UX: L'expérience utilisateur est ce que chaque utilisateur individuel retire des interactions avec le site. Cela a tendance à être exprimé comme un lien émotionnel et se rapporte à la valeur globale perçue.

Réfléchissez aux questions

"Chacune de ces interactions devrait ressembler à une conversation entre deux personnes qui se font confiance et méritent la confiance de l'autre."

Chaque partie d'un site Web demande aux utilisateurs de s'engager ou de continuer à s'engager avec une autre partie du site. Que vous jouiez à un jeu, lisez un article ou achetiez un cadeau, chaque action vous mène à autre chose. Mais comment y arriver?

C'est là que les questions se posent. Si vous posez des questions dans le processus de conception, vous pouvez créer des liens entre les actions, créant une conception plus transparente avec un flux logique.

«Nicely Said» de Nicole Fenton et Kate Kiefer Lee est un manuel d'écriture pour le web. Il fournit également un cadre de questions qui fonctionne pour chaque partie de l'expérience de conception Web.

Questions à poser en cours de route (et bien d'autres dans le guide de ressources du livre):

• Comment les gens utilisent-ils ce contenu ou cette fonctionnalité maintenant?
• Qui parle ici?
• Quels problèmes essayons-nous de résoudre?
• Comment ce contenu sert-il nos objectifs? Quel est son but?
• Quelles sont les fonctionnalités du site Web? Comment se comporte-t-il?
• Quel est le format final?
• Y a-t-il des contraintes techniques ou des limites de caractère?

Fenton a écrit encore plus sur d'autres questions que les sites Web «posent» tout le temps. Nous parlons des détails personnels qui aident les utilisateurs à se rapporter aux sites avec lesquels ils interagissent. «Chacune de ces interactions devrait ressembler à une conversation entre deux personnes qui se font confiance et méritent la confiance de l'autre», écrit-elle.

Certaines de ces questions comprennent:

• Comment pouvons-nous vous aider?
• Où es-tu actuellement?
• Êtes-vous prêt à payer pour cela?

La réponse à ces questions établit la nature de la relation interface-utilisateur et a un impact considérable sur la conception. Pensez-y de cette façon: si un utilisateur n'est pas disposé à vous indiquer sa position, la conception et l'interface utilisateur ne seront pas efficaces si elles sont basées sur la géolocalisation; la conception doit aborder l'utilisateur d'une autre manière.

Pensez à la simplicité et à la direction

Lorsque les sites Web se réunissent, tout a tendance à tomber quelque part sur une carte. Vous pouvez tracer le cours d'une interaction utilisateur à l'autre. (Ce qui est idéal pour les penseurs visuels.) Alors, pensez au processus de conception / développement en termes de A contre B: Quelle est la prochaine étape, A ou B?

Chaque élément doit avoir un objectif simple, facile à définir et à décrire. (Cliquez pour jouer; cliquez pour faire défiler.) Si vous ne pouvez pas le rendre compréhensible dans une phrase, vous voudrez peut-être repenser la stratégie de conception.

Apprenez le code

Maintenant que vous pensez aux choses dans la méthodologie d'un développeur, vous devez sortir et développer certaines compétences en codage. Cela ne veut pas dire que vous devez être un codeur maître, mais vous devez le comprendre suffisamment pour apporter des modifications simples et parler aux autres concepteurs et développeurs de manière cohérente. (De plus, vous pouvez vraiment créer des effets sympas, tels que ceux ci-dessus.)

Personnellement, j'ai commencé avec un peu de HTML à dessein. J'ai fait une liste de choses que je voulais savoir comment faire et les ai apprises de l'intérieur (c'est-à-dire comment changer la couleur d'un élément de site en utilisant une valeur HEX dans le CSS plutôt que de cliquer sur une case sur un sélecteur de couleur.) sont de nombreux outils disponibles à partir des cours en ligne et des tutoriels à la formation en personne dans votre région. Tout ce que vous avez à faire est de vous inscrire et de commencer.

Quatre excellentes ressources de développement de code:

1. Tuts +
2. CodeAcademy
3. École de code
4. Académie Khan

Conclusion

Apprendre le développement Web, ce n'est pas seulement apprendre les frameworks et le code. Il s'agit du processus de pensée. Les concepteurs peuvent penser comme les développeurs en route vers la création d'un site Web réussi. Il suffit d'être ouvert à l'idée.

Comprendre que certains processus de pensée sont similaires - la pensée visuelle et les solutions et les résultats de la pondération - font partie de tout projet de conception ou de développement. Nous sommes tous concepteurs / développeurs sur le marché actuel.

Source de l'image: Marjan Krebelj.