Il existe de nombreux domaines liés au design dans l'industrie informatique. Les plus courants d’entre eux sont les designers, cachés derrière les acronymes UX et UI. Eh bien, certaines personnes parviennent même à inclure des développeurs front-end en tant que concepteurs. Essayons de comprendre qui sont les concepteurs dans le monde informatique, quelle est la différence entre UI et UX et quelle est la relation entre les ingénieurs front-end et la conception.
Créateurs
Développer l'interface d'applications, de sites Web ou de jeux est un processus assez complexe et nécessite l'application de connaissances provenant de différents domaines : l'ingénierie, la psychologie et le design. Les concepteurs d'interface utilisateur (en anglais - User Interface ou UI) se concentrent sur la manière dont les fonctionnalités du site sont affichées (recherche, onglets, menus) et sur les détails de l'interaction entre le client et l'interface.
L'objectif d'un concepteur d'interface utilisateur est de concevoir un produit moderne et esthétiquement acceptable . UX signifie User Experience, ce qui signifie « expérience utilisateur ». Un concepteur UX se concentre davantage sur la convivialité et la compréhension de l’interface par l’utilisateur potentiel. Un tel spécialiste mènera souvent des recherches et des enquêtes qui constitueront la base de la création d’un concept de conception, et testera également les concepts pendant et après le développement. Il se concentre généralement sur la structure, le contenu, la navigation et la manière dont l'utilisateur interagit avec ces éléments.
Il produit des plans de site, des prototypes, qui constituent la structure de base lors de la création de logiciels.
L'objectif du travail d'un concepteur UX est que l'utilisateur obtienne rapidement et sans douleur du site ce pour quoi il est venu ici . Or, il est aujourd’hui très courant de voir ces deux spécialisations écrites avec une barre oblique. C'est-à-dire que les tâches des deux directions sont effectuées par un seul spécialiste. Un concepteur UX/UI conçoit l'interaction de l'utilisateur avec l'interface, décide exactement de ce qu'il doit faire et est responsable de l'apparence de cette interface.
Ce qu'un concepteur UX/UI doit savoir
-
Editeur graphique . Les outils les plus populaires sur le marché sont Adobe Photoshop, Adobe Illustrator, ainsi que Sketch, Figma. Choisissez un éditeur qui vous convient et essayez d'abord de dessiner des captures d'écran d'un site Web ou d'une application, en les modernisant un peu.
Guide d'esquisse
-
Outils de prototypage (Mockplus, Axure) . Un outil de prototypage est le lien entre une idée et sa mise en œuvre. Peu importe l'outil que vous utilisez. Vous pouvez en essayer plusieurs et choisir celui qui convient à votre style et à vos préférences.
-
Psychologie des utilisateurs. Déjà au stade de la conception, vous devez vous demander s'il sera pratique pour vous ou pour quelqu'un d'autre d'utiliser cette interface. Mettez-vous à la place du client, établissez un lien fort avec lui et soyez à l'écoute de ses besoins. Après tout, un produit connaîtra du succès s’il existe une demande.
Psychologie du design : 8 principes psychologiques qui seront utiles lors de la conception
-
Vous aurez également besoin de connaissances en théorie des couleurs . Nous savons certaines choses depuis l'enfance, notamment ceux qui sont allés dans une école d'art. Il existe cependant certaines spécificités concernant le travail des designers. Les connaissances de base peuvent être obtenues à partir de livres ou d'articles sur Internet.
Théorie des couleurs pour les designers, partie 1 : Signification des couleurs
Comment utiliser les couleurs dans la conception de l'interface utilisateur
-
Il est conseillé d'avoir une compréhension de la typographie , un moyen de combiner du texte et des éléments visuels.
25 règles de typographie pour les designers débutants
Typographie sur le web
-
Composition et convivialité du site.
La composition dans la conception Web, ou ce sur quoi les didacticiels Photoshop restent silencieux
-
Selon les spécificités du travail, vous aurez peut-être besoin d'une compréhension du HTML et du CSS ou de (certains) langages de programmation (des liens vers des ressources se trouvent ci-dessous, dans la section « Ce qu'un développeur front-end doit savoir »).
Développeur frontal
La tâche principale d'un développeur front-end est de développer la partie client de l'interface.
Autrement dit, un tel spécialiste « revitalise » ce que les concepteurs ont conçu. Il est responsable du fonctionnement et du fonctionnement de l’interface et moins du contenu visuel. Un développeur front-end a souvent besoin de trouver une bonne solution pour l'interface utilisateur pendant sa phase de développement, c'est pourquoi il collabore souvent avec un concepteur UX/UI. Le code écrit par le développeur front-end s'exécute dans le navigateur de l'utilisateur (comme on dit, « côté client »). En outre, l’une des tâches les plus importantes consiste à garantir que le site ou l’application Web se présente de la même manière sur toutes les plateformes et tous les navigateurs.
Ce qu'un développeur front-end doit savoir
En règle générale, le front-end repose sur trois piliers : le langage de balisage des pages HTML, les feuilles de style CSS et le langage de programmation JavaScript. De plus, le développeur front-end doit comprendre les principes de fonctionnement du protocole HTTP, des serveurs et des navigateurs, ainsi que les fonctionnalités d'affichage de l'interface sur les différents appareils actuellement sur le marché. Les outils et méthodes de création d'interfaces Web évoluent et changent constamment, le développeur doit donc constamment surveiller cela.
HTML et CSS (mise en page)
Il s’agit de l’agencement, des briques mêmes à partir desquelles le site est construit. Le langage de balisage HTML dicte l'organisation du site, son contenu et toutes les interactions entre eux. Il permet de désigner le haut de la page, le bas, les blocs latéraux avec le contenu, les titres, l'affichage du texte et les éléments multimédias. Les feuilles de style CSS sont utilisées pour décorer les éléments HTML. Ils déterminent exactement comment chaque élément graphique situé sur la page est affiché. Grâce aux dernières versions de HTML5 et CSS3, vous pouvez placer des composants vidéo et audio sur une page, créer des images et des animations 2D et même écrire des jeux simples. Il n'est pas nécessaire d'essayer de mémoriser toutes les balises et tous les styles à la fois. Il sera utile d’apprendre les bases et de les mettre en pratique immédiatement. Un très bon site où vous pouvez apprendre les bases du HTML et du CSS est W3School. Mais seulement si vous avez au moins des connaissances de base en anglais.
En outre, le développeur front-end doit comprendre le développement multi-navigateurs et multiplateformes, ainsi que la mise en page adaptative et réactive.
Amorcer
C'est un framework pour HTML, CSS et JavaScript. C'est-à-dire certains modèles à partir desquels, comme ceux d'un constructeur, vous pouvez assembler des sites beaucoup plus rapidement que sans eux. Mais bien sûr, vous devez le personnaliser vous-même en fonction de vos besoins. Si vous connaissez l'anglais, nous vous recommandons le site
getbootstrap et le même
w3schools .
Javascript
Javascript est au cœur du développement front-end. Il s’agit du premier et du plus répandu langage de programmation d’interface. Cela peut ajouter de nombreuses fonctionnalités au site. À un niveau basique, ce langage vous permet d'ajouter des éléments interactifs à une page. Il est utilisé pour créer des cartes mises à jour en temps réel, des jeux et des films interactifs en ligne. Dans nos cours JavaRush senior, nous apprenons un peu de JavaScript. Vous pouvez également l'étudier dans la même
W3School ou en savoir plus en russe sur le site
javascript.ru .
jQuery
jQuery est une bibliothèque Javascript qui contient des plugins et des extensions qui peuvent rendre le développement encore plus facile et plus rapide. Au lieu d'écrire du code à partir de zéro, les bibliothèques vous permettent d'ajouter des composants prêts à l'emploi, qui peuvent ensuite être personnalisés pour un projet spécifique. Vous pouvez utiliser les fonctions de remplissage automatique des formulaires de recherche, de réorganisation et de redimensionnement de la grille et de réglage des comptes à rebours.
Cours pratique sur jQuery à w3school
Cadres Javascript
Il existe différents types de frameworks, mais vous pouvez en choisir un qui vous convient. Les plus connus sont Angular, Backbone, Ember et React. Ils représentent une structure prête à l'emploi pour le code. Ils contribuent à accélérer le développement. Et en combinaison avec des bibliothèques, ils peuvent minimiser le développement d’un site Web ou d’une application à partir de zéro.
Revue des 5 frameworks et bibliothèques JavaScript les plus populaires de 2017
Système de contrôle de version Git
Les systèmes de contrôle de version peuvent suivre les modifications apportées au code au fil du temps. Ils permettent également de revenir à une version précédente du projet. Git est le système de contrôle de version le plus utilisé. Savoir travailler avec Git est une compétence importante pour tout développeur.
Tutoriel Git en russe
Brèves conclusions
UI signifie User Interface, ce qui signifie « interface utilisateur ». Autrement dit,
l'UI Designer est principalement responsable de la manière dont le produit est présenté à l'utilisateur. Il développe des boutons, des icônes, sélectionne les polices et prépare une mise en page. UX signifie Expérience Utilisateur. Ainsi,
un concepteur UX conçoit la conception d'un site Web, d'une application - ou de quoi que ce soit - de manière à ce que l'utilisateur soit à l'aise et comprenne ce qui se passe, et qu'il puisse obtenir ce dont il a besoin sur le site avec un minimum d'effort. Très souvent, les deux types de travaux sont réalisés par un seul homme-orchestre : un concepteur UI/UX. Le développeur Front-end anime le travail des designers en y introduisant de la dynamique : les boutons commencent à être enfoncés et l'image commence à changer. Il doit connaître les langages de programmation, assaisonnés de frameworks, de préprocesseurs et de bibliothèques.
GO TO FULL VERSION