conception de l'interface utilisateur Web
Je suis assez à l'aise avec le développement du Web (par exemple, en utilisant Java spring mvc, ou grails), mais je ne sais vraiment pas par où commencer en ce qui concerne l'interface utilisateur côté client (comme dans concevoir des pages qui ont l’air bien). OK, je sais qu’il existe du CSS et que je peux faire à peu près n'importe quoi, et que je connais les frameworks CSS comme Blueprint.
Mais comment les concepteurs front-end conçoivent-ils réellement les pages? Est-ce qu'ils utilisent un éditeur WYSIWYG? Est-ce qu'ils codent le tout dans vim et s'appuient sur leurs compétences magiques en CSS? Est-ce qu'ils utilisent quelque chose comme Photoshop pour visualiser la page, puis la traduire en HTML + CSS?
J'espère avoir un aperçu de la façon dont les développeurs professionnels le font réellement, par opposition à "Allez trouver un site que vous aimez, cliquez sur Afficher la source, copiez ce que vous aimez, répétez"; ou "Allez sur www.freecsstemplates.com et téléchargez un modèle, copiez-le dans le répertoire css". À moins que IS ne soit pas triste à la manière des développeurs professionnels.
MODIFIER:
Espérons que cela ne soit pas fermé. Ce que je demande, c’est: est-il normal que les gens codent simplement dans le bloc-notes ou vim ou autre, et appliquent simplement les connaissances css. Est-ce la façon dont les concepteurs front-end travaillent généralement dans l'industrie. C'est la façon dont j'imagine l'approcher. Ou font-ils autre chose? Je voudrais m'améliorer, mais j'aimerais connaître vaguement la bonne approche.
Vous soulevez une bonne question. Il y a un mélange de termes (concepteur front-end, développeur front-end, qui ne sont très souvent pas identiques), ce qui m'a apporté une réponse un peu moins concise que celle que vous préféreriez peut-être (désolée).
Séparer les termes pourrait éclaircir un peu la réponse, car je les considère comme étant tout à fait séparés et nécessitant une expertise qui ne se chevauche pas et qui souvent ne sont pas exercées par la même personne, car les deux domaines nécessitent des années d'expérience pour acquérir une expertise.
Pour mémoire, je suis un développeur front-end et personne, dans leur esprit, ne veut que je conçoive leur site Web. Ma responsabilité est PHP/HTML, CSS et JavaScript. Je ne crée pas les fichiers Photoshop; ils me sont remis pour couper en HTML/CSS.
Les concepteurs de sites Web sont généralement responsables de la transformation des exigences et de la personnalisation d'un client en une présentation graphique (la plupart du temps, un PSD Photoshop). Ils sont souvent formellement formés à la conception (ligne, couleur, forme). Je pense que la compréhension des principes de conception est probablement plus important que de choisir un logiciel dans ce domaine et serait le premier endroit à commencer si vous ne l’avez pas déjà fait. Puisque vous dites: "Je ne sais vraiment pas par où commencer en ce qui concerne l'interface utilisateur côté client (comme dans la conception de pages qui ont l'air bien)", je pense que ce serait le premier point de départ logique pour acquérir des compétences dans ce domaine.
En termes de flux de travail/d’outils, les concepteurs utilisent généralement des logiciels tels que Balsamiq Mockups ou Keynote ( http://keynotekungfu.com/ ) pour générer d’abord des maquettes afin que les clients puissent approuver une interface utilisateur/une présentation sans s'embourber. choix de couleurs ou de textures. Il peut s’agir de croquis très rapides destinés à éclairer la conception ou de structures filaires très complexes (livrables séparément en soi), qui tracent méticuleusement le flux, la mise en page et les fonctionnalités de la page.
Les concepteurs ont également recours à des techniques telles que des panneaux d'ambiance ou des mosaïques de conception pour capturer l'image de marque et l'apparence d'un site avant de s'engager dans une conception à part entière. Une fois que le client a choisi une palette, une interface utilisateur et une disposition pour le site, le concepteur utilise ensuite Photoshop, ou moins souvent, Fireworks ou un autre programme graphique, pour créer une conception complète.
Dans la majorité des magasins et dans l'expérience de la plupart des pigistes professionnels que je connais, le développeur front-end (qui est généralement, mais pas toujours, une personne différente) prend ensuite le fichier PSD terminé et le découpe en HTML/CSS fonctionnel. Quel outil utilisé est une question de préférence personnelle ainsi qu'un sujet de débat animé. J'aime Coda. D'autres, comme TextMate ou TextWrangler. Peu de gens dans les deux professions que je connaisse utilisent des ordinateurs personnels. C'est un monde Mac. Les PC sont pour les costumes, mec.
Mon propre flux de travail en tant que développeur front-end inclut:
- Outils de développement de Firebug et Chrome pour le développement CSS.
- Coda pour la création de HTML/CSS/JavaScript/PHP. Il s'agit d'un IDE très léger, comprenant un éditeur CSS, la complétion de code et la coloration syntaxique de tous les éléments ci-dessus.
- Photoshop pour couper le PSD en HTML.
- Le module complémentaire de Firefox, MeasureIt, permettant de prendre des mesures en pixels dans le navigateur.
- L'add-on Firefox de Pixel Parfait pour créer des correspondances exactes en pixels des fichiers PSD livrés (les concepteurs seront ravis de vous voir respecter leurs dessins originaux).
- windows VM à tester dans IE. J'utilise VMWare Fusion, qui est généralement bon, mais il nécessite beaucoup de processeurs, mais il y a aussi Wine, qui est gratuit et d'autres bons choix.
- l'add-on Web Developer Toolbar de Firefox pour diverses tâches (vérification de l'aspect d'un site avec JavaScript désactivé, thématisation dans la sortie de la feuille de style d'impression, vérification de l'accessibilité, affichage de la structure sémantique d'un site, etc.).
- Firefox add-on ColorZilla pour surveiller la couleur, récupérer les codes hexadécimaux des sites (très, très utile)
J'ai également utilisé la vue iPad/iPhone de Safari pour tester le site à l'aide d'un agent d'utilisateur mobile.
Ce sont quelques-uns des outils que j'utilise au moins. Je serais intéressé par d'autres techniques.
Personne n'a mentionné la première étape la plus importante (en ce qui me concerne) - un crayon et du papier
Notez plusieurs idées pour les mises en page individuelles et la structure générale du site. Cela vous fera gagner beaucoup de temps une fois que vous commencerez à coder avec Photoshop ou HTML/CSS.
Pour le prototypage initial, ce qui est le plus rapide est le meilleur. Vous pouvez utiliser crayon et papier, Photoshop, PowerPoint, etc. Vous souhaitez simplement jeter des idées et voir ce qui est le plus attrayant. Vous pouvez également utiliser l'application Prototypage sur papier pour créer des croquis papier interactifs.
Pour le développement actuel, j'aime bien Adobe Dreamweaver , car il combine à la fois un éditeur de code et un éditeur WYSIWYG. Le principal avantage est qu'il donne des aperçus instantanés de votre travail sur plusieurs navigateurs et appareils mobiles, ce qui permet de gagner beaucoup de temps. J'utilise également Notepad ++ et vim en tant qu'éditeurs légers.
Il n'y a pas de ne solution pour tous dans la conception et le développement Web front-end, différents projets de sites Web nécessitant des approches différentes. Par exemple, certaines personnes utilisent JavaScript pour permettre la visualisation des appareils mobiles, tandis que d'autres implémentent des requêtes multimédia CSS3 pour atteindre le même objectif.
Personnellement, je crée des plans pour des sites Web en utilisant un logiciel de conception graphique (comme le populaire Photoshop), bien que ce soit uniquement pour moi (ou mon client) d’obtenir un aperçu du code HTML CSS et du code d’arrière-plan. I Utilisez un programme de validation pour vérifier le code HTML CSS et JavaScript, le cas échéant.
Mon conseil serait de prendre parfois le temps de trouver l’ensemble d’outils qui convient à vos spécifications de conception, en tenant compte de la convivialité, de la compatibilité du navigateur et des appareils (et/ou de la visibilité).
J'utilise d'abord Photoshop pour visualiser. Tranche les images que je ne peux pas dupliquer avec CSS. Lancez n'importe quel éditeur de texte et code. Balise HTML en premier. CSS second et Javacript (si nécessaire) en dernier.
Chaque "gros" changement CSS que je fais, je vais sauvegarder et actualiser le navigateur.
Kevin,
Chaque concepteur a son propre ensemble de compétences et ses propres préférences. C'est pourquoi, bien qu'il existe des outils "populaires" tels que Photoshop, il n'y a pas une seule façon de les utiliser et il n'y a pas de méthode de travail ni de flux de travail définis.
En fin de compte, vous travaillez avec les forces que vous pourriez avoir et faites tout ce qui est nécessaire pour atténuer les faiblesses.
J'utilise personnellement les outils de développement Firebug et Chrome pour tester et déboguer, je code CSS sur TextMate (mais j'essaye de Visualizer) et je reconnais une faiblesse actuelle de la conception graphique (c'est-à-dire la création d'images de mon cru). Je complète ceci en lisant des articles Internet chaque fois que je rencontre un obstacle, et petit à petit, vous apprenez les subtilités du CSS - même si en théorie il ne devrait pas y en avoir autant, vous découvrirez bientôt que le CSS est chargé avec des bizarreries largement dues différences entre les navigateurs (et au sein de ceux-ci, principalement les nombreuses variations d’IE).