Quel processus suit la construction d'un site Web professionnel?

Question

J'ai cherché pendant un certain temps, mais je ne trouve rien lié à Google ou ici. Moi et quelques amis discutaient du démarrage d'une entreprise, alors je me dis qu'il serait peut-être bon de faire un projet pilote rapide pour voir si nous pouvons travailler ensemble. Nous avons un designer qui peut faire du HTML, CSS et Flash, aime faire de l'art, mais n'aime pas faire HTML et CSS ... Et 2 programmeurs qui sont prêts à faire n'importe quoi. Du point de vue d'un constructeur de site expérimenté, ma question est la suivante: quelles étapes faisons-nous dans l'ordre chronologique pour gérer correctement un site Web? Est-ce que le concepteur conçoit l'apparence du site, alors les programmeurs comblent les lacunes avec la fonctionnalité? Ou est-ce que les programmeurs créent une "maquette" du site avec la plupart des fonctionnalités, alors le concepteur l'épice? Ou s'agit-il plutôt d'un processus de va-et-vient? Je veux juste savoir comment un professionnel le gère normalement.

Mise à jour: Une récapitulation de certaines notes de chaque publication.

Étape 1: Définir les exigences. Que va faire votre site/application?

Étape 2: Cas d'utilisation. Qui utilisera l'application, et que vont-ils en faire? Cela ne doit pas être fait avec un tas de diagrammes UML fous, il suffit d'utiliser toutes les aides visuelles que vous pensez fonctionner le mieux pour vous. Recherchez un fournisseur de CMS, un fournisseur de recherche ou les deux. En planifiant, peut-être faire une analyse de la concurrence, et voir comment ceux dans des domaines similaires ont fait le leur.

Étape 3: Preuve de concept visuel. Ceci est fait par votre concepteur, PAS vos programmeurs ... Les programmeurs sont notoirement mauvais à l'interface utilisateur. Utilisez un programme d'image comme Photoshop, pas un éditeur HTML. Laissez-le fluide et simple au premier abord. Sélectionnez le thème en trois couleurs pour le site (deux primaires et un accent.) Obtenez une idée de la façon dont vous voulez disposer les choses, en gardant à l'esprit le CMS choisi et/ou la fonctionnalité de recherche. Focus dur sur la convivialité, ajouter pizzaz plus tard. Transformez le concept créé en maquettes JPEG ou créez un site intermédiaire pour permettre au client d'afficher le travail. Un site intermédiaire permettra de tester les versions futures avant de les mettre en production. Étape 4: Une fois que votre concepteur a conçu le site, demandez à votre développeur HTML/CSS de le transformer en balisage. Il/elle devrait tirer pour la conformité XHTML et tester sur autant de navigateurs principaux que vous le pouvez. C'est aussi un bon moment pour mettre en place des systèmes de gestion de version/bug/tracking, pour suivre les changements, les bugs et les retours d'expérience.

Étape 5: Demandez à vos programmeurs de commencer à transformer vos exigences en logiciel. Cela peut et doit être fait en parallèle avec l'étape 4, il n'y a aucune raison pour laquelle ils ne peuvent pas coder les pièces principales et écrire des tests pendant que l'interface utilisateur est conçue et développée.

Étape 6: Regroupez le design de l'interface utilisateur final avec le code. Test, Test, Test !!

Étape 7: affichez le résultat final sur le client et obtenez la signature du client.

Étape 8: Déployer le site en production.

rincer, répéter ...

Answer 1

Étape 1: Définir les exigences. Que va faire votre site/application?

Étape 2: cas d'utilisation. Qui utilisera l'application, et que vont-ils en faire? Cela ne doit pas être fait avec un tas de diagrammes UML fous, il suffit d'utiliser toutes les aides visuelles que vous pensez fonctionner le mieux pour vous.

Étape 3: Preuve de concept visuel. Ceci est fait par votre concepteur, PAS vos programmeurs. Utilisez un programme d'image comme Photoshop, pas un éditeur HTML. Laissez-le fluide et simple au premier abord. Sélectionnez le thème en trois couleurs pour le site (deux primaires et un accent.) Obtenez une idée de la façon dont vous voulez mettre les choses. Focus dur sur la convivialité, ajouter pizzaz plus tard.

Étape 4: Une fois que le concepteur a été conçu par vos concepteurs, demandez à votre développeur HTML/CSS de le transformer en balisage. Il/elle devrait tirer pour la conformité XHTML et tester sur autant de navigateurs principaux que vous le pouvez.

Étape 5: Demandez à vos programmeurs de commencer à transformer vos exigences en logiciel. Cela peut et doit être fait en parallèle avec l'étape 4, il n'y a aucune raison pour laquelle ils ne peuvent pas coder les pièces principales et écrire des tests pendant que l'interface utilisateur est conçue et développée.

Étape 6: Regroupez le design de l'interface utilisateur final avec le code. Test, Test, Test !!

rincer, répéter ...

Answer 2

Dans un premier temps, je vous conseille de faire un peu d'avance la conception en utilisant une approche telle que paper prototyping, pour verrouiller ce que vous voulez que votre site web faire, et à peu près comment vous voulez qu'il ressemble.

Ensuite, lire sur le Agile approach au développement de logiciels et de voir si vous aimez le son de ce qu'il suggère. Il a tendance à mieux fonctionner avec des équipes plus petites et motivées.

Calculez le montant minimum de fonctionnalité, vous pouvez créer que vous pouvez livrer un produit de sorte que vous pouvez obtenir les commentaires des utilisateurs dès que possible. Ensuite, attendez-vous à ajouter itérativement fonctionnalité au produit au fil du temps.

Answer 3

Il n'y a pas une façon universelle. Chaque magasin le fait différemment. D'où un avertissement: des généralisations grossières suivent.

développement Web se compose généralement de cycles de libération beaucoup plus courtes, car il est si simple de pousser un communiqué, par rapport aux logiciels côté client. Ainsi, les méthodes les plus «agiles» sont plus fréquemment utilisées que les modèles «cascade» rencontrés dans le développement de logiciels clients.

Answer 4

1. Calculez ce que, exactement, vous construisez. Prenez soin de tous les aspects légaux (par exemple, quelle entité commerciale vous allez former, comment chaque membre de l'équipe sera-t-il rémunéré pour son travail, y aura-t-il des avantages pour la santé, etc.)?
2. Maquettes. Je suggère que les concepteurs fassent les maquettes puisque les programmeurs sont notoirement mauvais à la conception de l'interface utilisateur.
3. Mettre en place une sorte de système de suivi des bogues/gestion de cas afin que vous ayez un endroit centralisé pour toutes vos demandes de fonctionnalités et rapports de bogues.
4. Commencer le codage. Une fois que vous avez une version simple de votre application, demandez à des gens de la tester pour vous assurer que vous êtes sur la bonne voie.
5. ???
6. Profit!

Answer 5

Le Web Style Guide fournit un aperçu assez détaillé du processus.

Answer 6

Juste pour donner quelque chose de l'autre côté de la pièce. Là où je travaille, nous travaillons depuis quelques années à la refonte du site internet de l'entreprise. Voici quelques faits saillants du processus:

1. Identifiez les fournisseurs pour les diverses fonctions qui seront nécessaires. Dans ce cas, cela signifiait trouver un fournisseur de système de gestion de contenu ainsi qu'un fournisseur de recherche.

2. Obtenez un nouveau design pour le site qui peut être appliqué à ce qui a été sélectionné dans la première étape. En utilisant des intégrateurs de systèmes et des développeurs internes, commencez à créer certaines fonctionnalités pour le site et prenez le logiciel flexible et personnalisable en 1 et le rendre utile pour l'organisation. Notez que c'est là que quelques années ont été consacrées à ce travail et que certaines décisions d'affaires ont été corrigées. Libérez un site de prévisualisation pour vérifier la fonctionnalité et corriger les bogues, ajoutez des améliorations si nécessaire.

Notez que dans votre cas, vous ne pouvez pas avoir le même budget, mais il y a différents cadres des CMS pour sélectionner ainsi que combien l'intégration vous voulez avoir pour le site? Doit-il parler à une demi-douzaine de systèmes différents? Dans le cas que j'ai mentionné ci-dessus, il y a des intégrations CRM, des intégrations ESB, des intégrations de recherche et des intégrations de traduction pour donner quelques exemples d'où les choses devaient être correctement câblées.

---

En réponse au commentaire, assurez-vous et le client savoir ce que l'on entend par « simple » comme s'il y a une fonctionnalité e-commerce, des forums, ou la personnalisation ce sont des exemples où il peut être important de sachez ce dont vous avez besoin maintenant et ayez une idée de ce dont vous aurez besoin à l'avenir, car il y a probablement beaucoup de choses que les clients peuvent vouloir, mais vous devez trouver certains détails à l'avenir. Par exemple, certaines personnes peuvent penser que Google est simple, et du point de vue de l'utilisateur final, combien d'ordinateurs Google gère-t-il le nombre d'applications différentes qui effectuent le traitement 24h/24 et 7j/7? Un peu, j'imagine. Simple est bon, mais parfois faire quelque chose d'aspect simple peut être incroyablement difficile à faire.

Answer 7

Vous devez mélanger et faire correspondre les listes fournies ici pour vos besoins.

Je veux juste vous assurer que vous savez une chose ...

Les clients sont « Stoopid » en matière de conception de sites Web.

Vous aurez à griffer, gratter, glisser, gnash, déchirure et dépêtrer toutes les exigences de leurs petites âmes naïves. Si vous ne le faites pas? Devinez qui est responsable?

La route que vous regardez maintenant est une route difficile remplie de compétition, de stress et de risque. Cela demande de l'endurance, de la foi, de la patience et la capacité de manger du ramen 5 jours sur 7.

Answer 8

Ajouter (ou répéter) la liste de Dave Swersky.

1. exigences des clients Gather

2. Faites une analyse de la concurrence. Rassembler captures d'écran de sites concurrents.

3. Construire un sitemap/wireframe - Qu'est-ce que la structure/le contenu du site?

4. Obtenez des concepteurs pour créer des maquettes JPG. Ils peuvent utiliser les captures d'écran pour "l'inspiration"

5. obtenir les commentaires de clients basés sur

   de JPEG

6. Créer le HTML mockups de

   de JPEG

7. recueillir les commentaires des clients. Retour à l'étape 4 si nécessaire

8. Mettre en œuvre HTML en utilisant la technologie de choix

9. test unitaire du site

10. UAT et obtenir se déconnecter.

11. Déployer pour vivre

commentaires des clients

est essentiel, ils devraient participer à toutes les étapes afin d'assurer une mise en œuvre réussie.

Hope this helps

Answer 9

Outre les étapes décrites dans d'autres réponses, je rajouterais ceci (à quelque part ajouté à la fin du "cycle"):

x. Une fois que vous disposez d'une solution plus ou moins complète, configurez un site intermédiaire.

y. Obtenez que le client se déconnecte du site de transfert.

z. Déployer sur le site de production.

Célébrez! Mais pas trop dur, il y aura presque toujours quelques itérations de changements, parce que les utilisateurs savent rarement exactement ce qu'ils veulent vraiment la première fois.

Alors, quand (pas si), le client demande des changements, vous pouvez travailler sur les changements et les promouvoir sur le site de transit d'abord! Ceci est important parce que a) cela donne aux clients une chance de prévisualiser les changements avant que le monde entier les voit b) si l'intégrité des données sur le site de production est importante, vous pouvez espérer éliminer les problèmes sur le site de transit avant qu'ils n'affectent la production Les données.