Comment/Quand concevoir une interface?

Question

J'essaie de concevoir les interfaces de mes sites Web au tout début avant de coder. J'ai lu "Getting Real" par 37 signaux et ils recommandent de faire l'interface en premier, avant que tout code réel soit produit.

Qu'entend-on exactement par là? Est-ce que cela veut dire utiliser du HTML pur et du CSS pour concevoir le site et ajouter du php, de la logique js à la page après, ou est-ce que ça peut se répandre dans le php, js depuis le début?

Et si vous utilisez un framework, devrais-je configurer des contrôleurs vides qui appellent simplement les vues, ou les premières étapes devraient-elles être uniquement html, css?

En outre, que pensez-vous de la conception avant ou après? Je parle d'APRÈS J'ai tout esquissé avec un stylo et du papier .. Je suis uniquement à l'écoute des maquettes HTML. Et je ne suis pas sûr d'utiliser des outils supplémentaires que j'aurais besoin d'apprendre pour le faire

Answer 1

Je pense que la majorité de l'avantage de la conception de l'interface a été atteint une fois que vous avez terminé vos croquis papier. Fondamentalement, vous assurez simplement que vous avez un design dans votre tête et que votre processus de codage est quelque peu axé sur l'utilisateur final. Vous essayez également de ne pas perdre de temps en documentation inutile.

Obtenir le HTML en place (ou les squelettes des vues dans une application MVC) a du sens et c'est le sens principal de ce que 37signals dit. Je ne ferais certainement pas autre chose que cela qui va juste être jeté.

Je pense que si vous avez une conception correcte, il est sans importance si vous passez ensuite à l'écriture du code back-end après le code HTML ou si vous faites le CSS et JavaScript. Le CSS et le code ne devraient même pas avoir besoin de se connaître.

Faites tout ce qui vous stimule et vous motive. Faites tout ce que vous pensez plus profondément sur la façon dont l'application fonctionne réellement afin que vous puissiez attraper les failles dans votre pensée originale. J'aime coder avant CSS mais c'est juste moi. Vous trouverez peut-être important de faire avancer le CSS avant que l'application ne prenne forme dans votre tête.

Joel Spolsky aime Balsamiq comme outil de simulation. Je pense que 37signals utilise Draft (une application iPhone). J'utilise un Sharpie. La clé ne devient pas trop détaillée cependant.

Les opinions varient, mais je crois que JavaScript devrait venir en dernier.Je crois que la plupart des sites devraient être conçus de manière à ce qu'ils fonctionnent à 100% sans JavaScript et ensuite avoir JavaScript ajouté pour polonais.

En savoir plus sur Unobtrusive JavaScript

Alors (pour moi):

• croquis rapides et sales de vues
• Get code HTML en place
• Peut-être un peu de CSS de base pour la mise en page (ou plus si j'ai besoin d'impressionner quelqu'un tôt)
• Écrire la logique de base
• Ajouter support fo r Les services Web et les appels
AJaX
• Jolie tout avec CSS snazzy
• Ecrire un peu de JavaScript pour ajouter le grésillement

Answer 2

Obtenez un bloc de papier. Chaque page représente une page de votre site.

Esquissez l'interface. Quels contrôles vont sur chaque page? Quels contrôles sont les mêmes sur chaque page? Quelles formes sont là et sur quelles pages? Que se passe-t-il lorsque l'utilisateur clique sur l'élément x? Item y? Ceci vous aidera à consolider votre plan du contenu et du comportement de votre site.

Si vous commencez simplement à coder aveuglément, vous finirez avec des spaghettis brûlés.

Answer 3

Laissez-moi vous poser cette question. Peignez-vous une voiture avant ou après avoir fabriqué les pièces de travail? Peut-être que vous avez choisi quelle peinture mais finalement il ne peut pas continuer jusqu'à ce que la voiture soit finie. Peut-être n'êtes-vous pas d'accord avec cette analogie, mais je pense que le codage fera ressortir des problèmes qui ne peuvent être compris avant la conception d'un site. Code d'abord, conception deuxième.

Answer 4

L'interface utilisateur est ce que les utilisateurs du site verront. Avant de coder, vous commencez probablement avec quelques esquisses du site qui ne sont pas du code, pour identifier la navigation dans la page, le placement général du contenu et l'interaction avec le site. Mais plus tôt vous pouvez montrer et discuter d'une interface utilisateur fonctionnelle, plus il est facile pour les utilisateurs/clients d'avoir une idée du produit final. Donc passer rapidement au code HTML, CSS, JavaScript et des choses comme des images, pour identifier:

• Les données présentées sur la page (HTML)
• La représentation des données (CSS)
• L'interaction avec les données (JavaScript)

Cela permet de développer progressivement une interface utilisateur réelle que vous pouvez discuter avec le client. Cela les maintient impliqués dès le début du projet. Cela les oblige à penser au site et à prendre des décisions sur le contenu, l'apparence et l'interaction.

L'obtention d'un tel retour d'informations au début du projet réduit le risque de création d'un produit qui doit être modifié ultérieurement. Et apporter des changements au début du projet est plus facile/moins cher, puis plus tard dans le projet. Pendant le développement de l'interface utilisateur, vous pouvez déjà commencer à rechercher des structures de données, des composants logiciels et des intégrations avec d'autres systèmes pour piloter le site. Mais ce n'est pas ce qui intéresse les utilisateurs/clients, ils veulent voir et utiliser le produit.