Les 5 meilleurs outils pour un design réactif
Permettez-moi de commencer par dire ceci, je n'inclurai aucun outil de conception par pointer-cliquer dans cette liste (pensez à Adobe Edge Reflow). La raison est assez simple, je crois qu'ils sont mauvais pour tout le monde; designers, clients, codeurs ... tout le monde souffre.
Il ne s'agit pas de la qualité du code généré par ces programmes. Ce n'est pas parce que cela rend le design "trop facile". C'est parce que, quelle que soit la qualité de ces programmes, ils limiteront toujours les utilisateurs.
Ils seront limités, même pas par ce que le programme peut accomplir, mais par ce qu’ils pensent pouvoir accomplir. S'ils y réfléchissent, l'utilisateur moyen le comparera probablement à des outils tels que PowerPoint et / ou un nombre quelconque de programmes de conception d'impression, retombant une fois de plus dans les anciennes mentalités. C'est là que réside le problème. Les outils de publication Web visuelle essaieront toujours d'appliquer les anciens processus aux nouvelles technologies.
Un flux de travail véritablement orienté Web est celui qui englobe les concepts et technologies sous-jacents sur lesquels le Web est construit. Bien sûr, vous pouvez utiliser n'importe quel nombre d’outils visuels pour créer des sites Web qui répondent aux besoins techniques, mais vous n’avez pas compris le problème.
Il ne s'agit pas d'une disposition adaptable. Il s'agit de rendre l'information accessible au plus grand nombre. Il y a certaines choses qu'un programme comme Edge Reflow ne peut tout simplement pas faire. En bref, vous devez écrire du code.
Par conséquent, les meilleurs outils pour vous aider à concevoir de manière réactive sont les outils qui vous aident à comprendre et à utiliser les technologies Web, à planifier votre site Web de manière plus efficace et à tester / présenter vos conceptions réactives aux clients dans leur contexte.
Commençons par l'évidence:
1) votre navigateur
Non, je ne plaisante pas. C'est littéralement l'outil le plus important que vous avez, car il vous montre exactement à quoi ressemble votre site Web dans vos conditions spécifiques.
Il y a eu beaucoup de débats sur la question de savoir si la conception dans le navigateur est préférable à la conception dans un éditeur d'images comme Photoshop ou GIMP. Permettez-moi de résoudre cela pour vous ...
Les utilisateurs de votre site Web vont-ils naviguer dans Photoshop? Les éditeurs d'images peuvent faire de jolies images, ne pas émuler des expériences réelles. Utilisez des éditeurs d'images pour éditer des images. Utilisez votre navigateur pour concevoir des sites Web.
Il est temps de sortir nos clients des maquettes hyper détaillées auxquelles ils sont habitués. Au fur et à mesure que le Web change et que nos processus deviennent plus fluides et itératifs, nous devons avancer.
Installez au moins un navigateur avec chaque moteur de rendu majeur et obtenez des extensions de développeur. Habituez-vous à regarder votre code source de la manière dont votre navigateur le voit, car vous allez être là un moment.
2) l'application de dessin de Google Drive
Techniquement, à peu près tous les éditeurs d'images vectoriels peuvent faire le travail lors du cadrage de vos sites Web et de vos applications. J'ai tendance à filer d'abord la version de bureau de mon site, à créer une copie du fichier, à redimensionner le canevas et à partir de là. L'utilisation de vecteurs facilite le redimensionnement et la réorganisation rapides de vos éléments alors que vous en êtes encore au stade de la planification.
Je préfère l'application de dessin sur Google Drive pour quelques raisons:
Fonctionnalités de partage et de collaboration: Google communique mieux que quasiment tout le monde. Avec des commentaires en contexte, l'édition simultanée et l'intégration au Hangout, je suis amoureux.
Guides automatiques: dans chaque document de dessin, des guides sont automatiquement créés en fonction des dimensions de chaque objet que vous placez dans le document. Cela facilite la représentation d'éléments de taille constante dans le document, ce qui est idéal pour les concepteurs obsédés par la grille comme moi.
Comme je partage ces images filaires avec les clients, cette cohérence professionnelle est un gros avantage. Et pourtant, je ne suis pas contraint à ces guides. Je le vois comme une bonne alternative aux applications de maquette qui tentent de vous contraindre à une grille.
Oh, et c'est gratuit. Ai-je besoin d'en dire plus?
3) Prototypes de style
Basé sur des tuiles de style, Prototypes de style sont un produit livrable dans le navigateur conçu pour vous aider à donner à vos clients une idée de la façon dont la typographie, la couleur et les éléments d’interface utilisateur de leur site Web apparaîtront. Comme il est destiné à être affiché dans le navigateur, il y aura moins d’incohérences une fois le site Web créé.
De plus, je dirais que Style Prototypes pourrait aider nos clients à séparer mentalement les concepts d'UX et d'esthétique. Et vraiment, tout ce qui aide nos clients à mieux comprendre le processus de conception Web ne peut être qu'une bonne chose.
4) Responsinateur
Responsable est un outil simple qui montre votre site Web à différentes tailles. Il imite, de manière très simple, plusieurs tailles et contextes de périphériques différents. Cet outil n'est pas à votre avantage. Vous voulez voir à quoi ressemble votre site Web avec des tailles plus petites? Redimensionnez la fenêtre de votre navigateur. Mieux encore, procurez-vous des appareils mobiles réels et effectuez des tests réels.
Cette application Web est la mieux utilisée pour montrer à vos clients une approximation rapide de ce à quoi leur site Web ressemblera dans des contextes autres qu'un écran de bureau ou d'ordinateur portable.
Encore une fois, il existe de nombreux outils qui pourraient faire le même travail que le Responsinator, et tout aussi efficacement, je suppose. J'ai choisi celui-ci car il présente plusieurs silhouettes de périphériques les unes après les autres, pour une lecture facile.
5) Adobe Edge Inspect
Maintenant celui-ci est pour vous. Si vous avez un laboratoire de test mobile (et le plus tôt possible, mieux c'est) Bord Inspect synchronisera tous vos appareils pour afficher la même page à la fois. Actualisez la page sur un périphérique et actualisez-les tous.
Contrairement aux autres sur cette liste, celle-ci n'est pas gratuite. Cependant, si vous pouvez vous permettre d'acheter suffisamment d'appareils mobiles pour obtenir une solution comme celle-ci, cela en vaut probablement la peine.
Conclusion
Comme toujours, votre cerveau est votre atout le plus important. Ces outils, et d'autres similaires, ne peuvent que vous aider. Je les ai choisis car ils remplissent des fonctions très spécifiques qui m'aident à concevoir des sites réactifs. Ils ne limitent pas ce que je peux faire.
Les meilleurs outils sont vraiment ceux qui restent à l'écart.
Utilisez-vous ces outils? Quels sont vos 5 meilleurs outils pour un design réactif? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image d'outils via Shutterstock.