Concevoir dans le navigateur me faisait peur. Non pas parce que cela semblait difficile mais parce que je pensais que je finirais avec un design composé de beaucoup de petites boîtes, quelque chose de tellement générique et fade que je finirais par le refaire dans Photoshop.
Cette peur s'est avérée totalement injustifiée. Non seulement mes conceptions sont devenues plus ciblées, mais je les ai aussi complétées plus rapidement et j'ai impliqué les clients plus tôt dans le processus grâce à l'interaction et à la discussion.
Le design est design. Peu importe si cela est fait dans un logiciel ou écrit dans le code. Concevoir dans le navigateur n'est pas plus difficile que de concevoir dans Photoshop. Comme tout outil, vous devez l'utiliser pour l'apprendre et éventuellement le maîtriser.
Le design est un processus itératif, plus difficile à travailler pour les clients. Il est parfois difficile pour les clients d’imaginer exactement ce que vous décrivez; la conception dans le navigateur peut les impliquer tout au long du processus plutôt que la phase de conception.
Essentiellement, les phases de conception et de développement fusionnent et si vous êtes naturellement doué en matière de conception et de développement frontal, vous devrez concevoir dans le navigateur comme un canard prend l'eau.
L'un des principaux avantages de la conception dans le navigateur est que nous pouvons concevoir en fonction d'attentes réalistes. Parfois, la conception de logiciels peut créer des problèmes imprévus pour le développement frontal. Les éléments d'interface utilisateur peuvent être conçus de manière capricieuse ou peut-être n'ont-ils aucun sens, il est difficile d'expliquer à un client pourquoi vous avez changé quelque chose, non parce qu'il l'a compris approuvé. La conception dans le navigateur se prête à l'idée de simplicité.
Avant même de penser à la conception, je dois avoir un plan. Ce n'est pas parce que j'utilise un outil différent que mon processus change. J'aime avoir un plan assez solide avant de commencer à concevoir et j'ai besoin de savoir ce que je conçois, pourquoi je conçois, pour qui je conçois, les antécédents du client et toutes les informations de service ou de produit que je devrais me concentrer sur.
Après avoir déterminé ces choses, j'aurai une meilleure idée de ce qu'est le produit ou de ce que fait le client, combien de temps il le fait, ce qui le distingue de ses concurrents, qui est son utilisateur les objectifs du site vont être.
Personnellement, j'aime avoir la documentation de tout. En général, j'ai de la documentation pour la carte du site, le contenu, les appels à l'action et l'architecture du site. Au moment où je commence à concevoir, je devrais avoir une stratégie claire pour la conception et tout le contenu aurait dû être collecté.
Esquisse est la clé si je veux concevoir quelque chose dans le navigateur. Je peux rogner les zones de contenu avec un crayon et du papier, obtenir un retour d'informations et parcourir rapidement les bases de ma conception.
Je dessine en me basant sur le plan que j'ai décrit ci-dessus et je m'assure de disposer de tous les domaines de contenu et d'appels à l'action. Les croquis doivent être rapides, ne passez pas beaucoup de temps à perfectionner quoi que ce soit. Cela devrait être assez solide pour montrer à un client, mais assez négligent pour que vous puissiez les terminer en moins d'une heure.
Ensuite, j'aime prototyper le site à partir de mes esquisses en HTML et CSS. Le prototype est composé de nombreuses cases grises avec du texte et des images pour les espaces réservés. Les cases grises servent de conteneurs pour le contenu lorsque je commence à concevoir. Le plus grand avantage du prototypage avec le code est que le client peut interagir avec le prototype et voir comment l’architecture du site fonctionne, si quelque chose est arrêté ou si les besoins sont affinés, nous pouvons le gérer dès le lancement.
Avant que nous puissions commencer à concevoir, nous avons besoin d'une sorte de style pour baser notre conception. Nous devons déterminer les couleurs et les polices que nous utiliserons avec les textures et les motifs potentiels. C'est là que les tuiles de style entrent en jeu.
Carreaux de style ont été créés par Samantha Warren et je les utilise depuis un certain temps maintenant. Ils aident les clients à consulter un guide de style précoce et très simple avec lequel nous pouvons commencer à concevoir. J'aime créer plusieurs d'entre eux pour voir lequel le client préfère de cette façon, je peux le réduire à un. Je trouve que ceux-ci sont également très importants dans le processus d’approbation et permettent d’éviter un rejet catégorique.
Maintenant, nous sommes prêts à commencer à concevoir. Si vous avez l'habitude de concevoir dans un logiciel comme Photoshop ou Sketch, ce n'est pas très différent. En utilisant notre fichier prototype, nous commençons à ajouter du contenu simulé dans notre balisage. À ce stade, nous savons exactement ce qui se passe dans chaque section de contenu du balisage et la grille a déjà été définie pour ne pas prendre autant de temps.
Maintenant, je vais commencer à superposer des styles sur mon contenu. Je vais ajouter des styles de base pour la couleur, la typographie et la mise en page. Une fois les styles de base terminés, je vais m'en aller et les regarder. J'aime à faire des captures d'écran de certaines parties du dessin pour y faire référence plus tard.
Une fois que je suis satisfait de la couche de base, j'aime prendre des notes sur ce qu'il faut affiner. Sur la base de ces notes, je vais probablement utiliser Photoshop ou Esquisser pour ajouter de la texture ou n'importe quoi avec une sensation tangible. Photoshop et Sketch sont d'excellents outils pour affiner rapidement les éléments complexes de l'interface utilisateur.
La raison pour laquelle je le fais est que je veux que ma base de code soit légère et propre et que plus vous codez, commentez et supprimez, plus votre base de code devient instable et gonflée.
Si vous deviez concevoir dans le navigateur à partir de zéro à chaque fois, les choses peuvent sembler prendre une éternité mais si vous commencez à partir d'une base personnalisée, d'un framework, vous pouvez éliminer toutes les étapes répétitives. Pour commencer, j'ai une version personnalisée de Initialiser que j'utilise avec une grille réactive personnalisée construite dans Sass (http://sass-lang.com/). L'utilisation d'un framework personnalisé me donne une longueur d'avance pour le prototypage et le design.
Avoir une bibliothèque de modèles d'interface utilisateur courants est également un excellent moyen de créer un prototype rapide et rend la conception dans le navigateur plus efficace. j'utilise Texte sublime à coder et une chose que j'ai appris à tirer profit est les extraits personnalisés que vous pouvez créer. J'ai ajouté plusieurs variantes de navigation, de listes, de barres latérales et d'autres éléments communs à ma liste d'extraits pour que je puisse les placer rapidement dans mon balisage avec une action simple. J'utilise aussi des comptes sur Codepen et JSFiddle pour enregistrer des motifs. Dan Cederholm a créé un grand thème WordPress pour stocker les motifs communs appelés Des poires . Il utilise des messages pour stocker le code que vous pouvez modifier en direct dans le front-end pour tester et prévisualiser les modifications.
L'application pratique et pratique vous aidera à mieux concevoir dans le navigateur. Il y a des chances que si vous effectuez un développement frontal, vous avez déjà un framework de base à partir duquel vous pouvez déjà utiliser certains modèles.
Maintenant, tout ce que vous avez à faire est de commencer à concevoir dans le navigateur et, à terme, vous aurez un workflow efficace et adapté à votre processus. Avec la pratique, vous ne serez plus rapide.