Flux de travail de conception Web sans Photoshop
On parle de plus en plus de concepteurs de sites Web qui s'éloignent de l'idée de passer un temps incroyable au fil de fer, puis de concevoir dans Photoshop et je voulais obtenir l'opinion de tout le monde à ce sujet et s'il existe un moyen meilleur et plus efficace de concevoir des sites Web en particulier à la lumière du responsive devenant toujours plus la norme quotidienne?
Pour ma part, je passe encore beaucoup de temps dans Photoshop, mais j'aimerais savoir s'il existe un meilleur moyen?
MODIFIER:
En vous écoutant tous, je trouve également d'autres sources. Voici pour commencer quelque chose de CSS Tricks sur le flux de travail de conception Web moderne
http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
J'ai commencé par faire du développement frontal et je me suis spécialisé dans l'UX, j'ai donc passé beaucoup de temps à faire la routine Photoshop/Illustrator to Browser.
Quand j'ai rejoint l'équipe dans laquelle je suis maintenant, j'ai dû m'adapter à un environnement Agile et j'ai réussi à trouver un équilibre qui fonctionne bien. Attention, dans la petite équipe sur laquelle je travaille, je fais partie de ces types de `` licornes '' qui font du développement, de la conception et de l'UX frontaux - donc mes méthodes peuvent ne pas fonctionner dans toutes les situations.
Nous avons beaucoup de tableaux blancs dans notre espace, donc pendant la première itération des projets, je passe mon temps à déterminer la stratégie et le but du projet, puis je plonge directement dans des croquis rapides et sales des options de flux et de disposition sur le tableau blanc .
Une fois que j'ai reçu les commentaires des autres personnes de mon équipe pour ce qui est le plus logique, je passe au wireframing et montre le concept au client. Je nettoie le flux là où il est nécessaire en fonction de ces commentaires, et je commence le prototypage (si le concept doit être testé avant le développement) ou je plonge directement dans le développement.
Ce que j'ai trouvé au cours de cette routine, c'est que l'image de marque et tout `` design '' nécessaire se produisent naturellement en fonction des fonctionnalités et de l'architecture de l'application ou du site Web. Au cours des itérations ultérieures, si une conception supplémentaire est nécessaire, elle tend à être complémentaire de la fonctionnalité. Ce que j'aime à ce sujet (et ce que j'ai trouvé des clients aiment à ce sujet), c'est le travail de conception pour accentuer la fonctionnalité, au lieu de la convivialité d'avoir à contourner la conception.
J'ai entendu et eu cette conversation aussi. À mon avis, les gens abandonnent le wireframing et la conception dans Photoshop ou tout autre outil car avec RWD nous ne concevons plus pour une largeur fixe. Certaines personnes s'éloignent également parce qu'elles pensent que créer des maquettes, puis concevoir puis développer semble lourd. Alors qu'est-ce que tu fais? La réponse que j'entends le plus est "dans la conception du navigateur". Je n'y ai pas beaucoup réfléchi, mais pour moi, cela ressemble à une conception à la volée pendant le développement. Cela me semble étrange, car ne devriez-vous pas avoir une idée de base en premier? Quelques premiers croquis? Quelques wireframes pour voir où tout ira? ... Et nous revenons à la création de maquettes et à la conception. Peut-être que les outils de conception réactifs sont la réponse, comme Adobe Edge Reflow. Je ne l'ai pas encore essayé et je suis réticent à le faire, car j'ai l'habitude de mon propre workflow.
Le fait est que je n'ai pas encore vu de bonnes implémentations d'outils de conception dans le navigateur et de conception réactive. Je pense toujours que la création de wireframes et la création de dessins pour représenter différentes fenêtres sont toujours la meilleure solution.
J'ai tendance à utiliser Sketch ou Omnigraffle pour le wireframing de base (je suis un architecte UX) et j'atelier la logique réactive avec le designer/dev frontal, annoter la logique spécifique sur les wireframes (la plupart est assez basique mais j'aime pour signaler des éléments spécifiques qui nécessitent une logique complexe, comme une page de résultats de recherche d'emploi avec des filtres), puis je remets mes wireframes et les instructions de style/création du directeur artistique au front-end pour construire un prototype réactif.
J'essaie de garder la lumière filaire pour que le développeur puisse avoir plus d'heures pour expérimenter différentes mises en page et j'ai donc quelques heures pour la surveillance/la rétroaction.
S'il s'agit d'un client qui nécessite une surveillance complète via des PSD et/ou des wireframes signés, j'explique généralement qu'ils demandent une quantité considérable de travaux préparatoires et que cela nécessitera plus de temps et d'argent, ou qu'ils peuvent avoir des PSD indicatifs de tailles d'écran particulières (ordinateur de bureau, tablette et mobile, généralement) et que nous allons construire une logique réactive pour les étapes intermédiaires (et ils peuvent le signer lors de la phase de construction).
J'expérimente cette approche sur le workflow de conception filaire: faites tout dans Adobe Illustrator. Cette approche nécessite un certain temps initial pour configurer les choses, mais plus tard, vous obtenez beaucoup plus rapidement que dans Photoshop. Étapes de base:
1) Wireframe dans Illustrator. Même s'il ne s'agit pas d'un outil de maquette spécialisé, il peut en devenir un. Vous devez créer une bibliothèque personnalisée de symboles vectoriels représentant les éléments d'interface utilisateur les plus courants (vous pouvez importer ces symboles à partir d'autres sources/logiciels de maquette). Une fois que vous avez créé une bibliothèque décente, vous pouvez parfaitement filaire dans Illustrator.
2) Concevoir dans Illustrator. Une fois votre maquette terminée, vous concevez votre site Web entièrement dans Illustrator, en travaillant directement sur votre maquette! Vos symboles vectoriels sont déjà là, vous ne devez les améliorer qu'en ajoutant des styles graphiques personnalisés et en ajoutant des détails. Cela vous fait gagner du temps par rapport au flux de travail Photoshop, où vous devez recréer votre structure de maquette à partir de zéro.
3) Exporter l'interface utilisateur en SVG depuis Illustrator. Ceci est la partie sympa, puisque vous concevez vos éléments en vecteur, vous pouvez exporter vos graphiques en SVG, cela vous aide beaucoup lors de la conception de mises en page réactives, car SVG peut être adapté à toutes les tailles dont vos appareils ont besoin.
Quelques considérations:
- Les graphiques vectoriels Illustrator vous font paraître "plus propre", ce qui est la dernière tendance (regardez Google et Apple UIs)
- Après un peu de pratique avec Illustrator, vous pouvez atteindre la même liberté de conception que dans Photoshop
- tout faire dans un logiciel et réutiliser votre bibliothèque de symboles vectoriels et de styles graphiques accélère le flux de production pour les futurs projets
J'espère que cela vous donnera de nouvelles idées.
Je suis une personne UX qui fait un peu de design web sur le côté.
En termes de workflows sans Photoshop - eh bien j'ai créé plusieurs sites en utilisant des outils standard de wireframing/prototypage puis je les ai mis en œuvre par un designer utilisant HTML/CSS. Mes wireframes sont devenus de plus en plus "mid fidelity" - c'est-à-dire avec des couleurs et des polices mais pas au pixel près.
Photoshop est une étape utile pour avoir une idée du fonctionnement des couleurs et des polices mais, une fois que vous avez une bonne compréhension, cela est possible dans une certaine mesure en utilisant du code. Il est possible d'utiliser moins Photoshop en essayant simplement des idées limitées.
J'utilisais aussi Photoshop il y a des années et je pense que c'est trop compliqué pour les trucs Web et pas assez réactif. Si vous éditez une photo ou concevez quelque chose de très difficile et complexe, j'utiliserais PS.
Je ne fais plus souvent de trame métallique et je ne pense pas que ce soit nécessaire pour une bonne interface utilisateur, mais beaucoup de mes collègues le font (principalement sur papier ) parce qu'ils l'aiment tout simplement et peut appliquer des modifications plus facilement après avoir reçu les commentaires du client.
Maintenant, j'utilise Sketch (application Mac) pour les logos, la conception Web et les applications mobiles, ce qui m'a vraiment fait économiser beaucoup de temps. Une fois la conception de l'application terminée, je la convertis manuellement en CSS3/HTML sans aucune image. J'ai essayé beaucoup d'outils et je trouve que c'est le meilleur.
Ce n'est que sur une interface utilisateur très complexe que je fais du fil de fer.
Cependant, en ce qui concerne le wireframing/web-design & co outils comme Sketch sont la voie à suivre.
@Paul, je dois être d'accord. Le wireframing, la conception PS puis le développement peuvent être superposés mais MAIS cela fonctionne et généralement nous comprenons tous le processus. Comme tout système, ce n'est aussi efficace que les gens qui le font fonctionner.
La conception dans le navigateur IMO n'est utile que pour les sites Web/applications plus simples car les modifications ne sont pas trop difficiles à effectuer - mais cela nécessiterait encore une certaine forme de planification, par exemple filaire/uidesign/scamp.
J'ai récemment travaillé sur une application qui nécessitait une réflexion et une conception UX lourdes dans un navigateur n'aurait jamais pu fonctionner, car 70% du travail était une réflexion/découverte. Cela a été suivi par des wireframes/scénarios qui ont été discutés avec le client sur une base quotidienne (agile). Au fur et à mesure que des sections du filaire étaient signées, l'interface utilisateur commençait et au fur et à mesure que l'interface était signée, le développeur a commencé et ainsi de suite ...
Tout dépend du client, du type de projet et de la ressource. Je pense que la conception dans un navigateur a sa place, mais il s'agit d'utiliser les bons outils pour le travail.
PhotoShop ne peut pas répondre. En fait, il n'a jamais pu faire "le navigateur Web". C'est juste que la réactivité a finalement permis à beaucoup de gens de conserver les fichiers PSD de leurs mains froides. :)
PhotoShop est excellent pour faire une jolie image et parfois c'est le but d'un projet: la rendre jolie.
Mais généralement, l'objectif est beaucoup plus large que cela ... cela implique de créer des choses que PhotoShop ne peut tout simplement pas faire très bien ... la conception d'interaction ... la conception de contenu ... le prototypage ... les variations de l'appareil ... la réactivité .. tests utilisateur, etc.
Il n'y a pas de meilleur moyen, car tout dépendra des opinions, des préférences et des spécificités d'un client et d'un projet en particulier. Mais quelques techniques à explorer:
prototypage interactif: cela peut être sur papier ou à l'aide d'un outil comme Axure. L'avantage est que vous vous concentrez davantage sur le flux, la fonctionnalité et l'interaction au début.
prototypage dans le navigateur: C'est idéal, à mon humble avis, car vous travaillez sur le support approprié dès le premier jour. Cela fait souvent partie du développement Agile.
les deux ci-dessus: Ma préférence. Prototypez rapidement et légèrement, mais entrez dans le code DÈS QUE POSSIBLE.