Il y a eu cette division non écrite entre les concepteurs et les développeurs aussi longtemps que nous avons créé des sites Web. Les gens qui font bien paraître les choses par rapport à ceux qui font que ça marche. Ces jours sont finis.
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 aiderons 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.)
Interfaces utilisateur et design
La colonne vertébrale derrière chaque site Web est une chaîne de 1 et de 0. Ce n'est pas très excitant quand il s'agit de concevoir. Mais l'interface actuelle et la connexion avec un utilisateur est.
Chaque petit détail inclut des éléments de design que quelqu'un est supposé utiliser, des boutons aux éléments de navigation, en passant par les formulaires, le visionnage d'une vidéo ou l'achat d'une paire de chaussures. Le but est de créer quelque chose qui a l’air agréable, engageant et facile à utiliser. C'est là que le design et le développement se rencontrent.
Mots à connaître:
- Ajax: L'utilisation de JavaScript et de XML asynchrones crée une expérience interactive dans laquelle de nouvelles informations peuvent être renseignées du côté utilisateur d'un site Web sans actualisation. Un exemple courant est le chargement continu de publications lorsqu'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, l'interface de programmation d'applications permet à différents sites Web ou logiciels de "parler". les uns aux autres et travaillent ensemble. Pensez-y comme un ensemble virtuel de blocs de construction.
- CSS: Les feuilles de style en cascade constituent la colonne vertébrale du langage utilisé pour styliser les sites Web et afficher les éléments HTML de manière visuelle.
- Requête média: Un élément CSS qui crée des règles spécifiques pour certains périphériques en ce qui concerne le rendu des éléments visuels. (C'est la magie qui fait que la même photo soit rendue avec un aspect et un rognage sur un site de bureau et une autre manière sur un appareil mobile.)
- Conception Web réactive (RWD): Technique de conception Web utilisant une grille flexible, des images, des supports et du texte, de sorte qu'un seul site Web s'adapte à plusieurs tailles de périphériques. (C'est sans doute l'un des facteurs les plus importants de la conception Web à l'heure actuelle.)
- UI: L'interface utilisateur regroupe tout ce que l'utilisateur voit et interagit dans une conception. Cela peut aller de la manière dont ils utilisent le site Web et l'appareil, en passant par chaque élément de l'écran.
- UX: L'expérience utilisateur correspond à ce que chaque utilisateur retire des interactions avec le site. Cela tend à être exprimé comme un lien affectif et se rapporte à la valeur globale perçue.
Penser en questions
«Chacune de ces interactions doit avoir l’impression d’être 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 à interagir avec une autre partie du site. Que vous jouiez à un jeu, lisiez un article ou achetiez un cadeau, chaque action vous mènerait à autre chose. Mais comment y arrivez-vous?
C'est là qu'interviennent les questions. Si vous posez des questions dans le processus de conception, vous pouvez établir des liens entre les actions, créant ainsi une conception plus transparente avec un flux logique.
?Bien dit? par Nicole Fenton et Kate Kiefer Lee est un manuel de rédaction 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 du 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? Comment ça se comporte?
- Quel est le format final?
- Existe-t-il des contraintes techniques ou des limites de caractère?
Fenton a écrit encore plus sur d'autres questions que les sites Web? tout le temps. Nous parlons des détails personnels qui aident les utilisateurs à identifier les sites avec lesquels ils interagissent. "Chacune de ces interactions doit ressembler à une conversation entre deux personnes qui se font confiance et méritent la confiance l'une de l'autre," elle écrit.
Certaines de ces questions incluent:
- 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-utilisateur et a un impact considérable sur la conception. Pensez-y de la façon suivante: si un utilisateur refuse de vous indiquer son emplacement, la conception et l'interface utilisateur ne seront pas efficaces si elles sont basées sur la géolocalisation. la conception doit approcher l'utilisateur d'une autre manière.
Pensez à la simplicité et à la direction
Lorsque les sites Web se rassemblent, tout a tendance à tomber quelque part sur une carte. Vous pouvez tracer le parcours d'une interaction utilisateur à une autre. (Ce qui est excellent pour les penseurs visuels.) Alors réfléchissez 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 lire; 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 réfléchissez à la méthodologie d’un développeur, vous devez développer certaines compétences en matière de codage. Cela ne veut pas dire que vous devez être un maître codeur, mais vous devez le comprendre suffisamment pour effectuer des modifications simples et parler de manière cohérente aux autres concepteurs et développeurs. (De plus, vous pouvez vraiment créer des effets sympas, tels que ceux ci-dessus.)
Personnellement, j'ai commencé avec un peu de HTML avec un but. J'ai fait une liste de choses que je voulais savoir faire et je les ai apprises de l'intérieur (c'est-à-direcomment 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 dans un sélecteur de couleur.) Il existe de nombreux outils disponibles dans les cours en ligne et les tutoriels pour 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:
- Tuts +
- Code Académie
- École de code
- Académie Khan
Conclusion
L'apprentissage du développement Web ne consiste pas seulement à apprendre les frameworks et le code. Il s'agit du processus de pensée. Les concepteurs peuvent penser comme des développeurs avant de créer un site Web performant. Vous devez juste être ouvert à l'idée.
Comprendre que certains processus de pensée sont similaires - solutions de pensée et de pondération visuelles, ainsi que de résultats - font partie de tout projet de conception ou de développement. Nous sommes tous des concepteurs / développeurs sur le marché actuel.
Source de l'image: Marjan Krebelj.