Comment commencez-vous habituellement lors de la conception d'un site Web?
Dans le passé, j'avais déjà codé HTML, CSS et PHP, mais je n'ai jamais travaillé que sur des choses déjà terminées et je n'ai jamais démarré un site Web à partir de zéro. Cependant, j’ai récemment acheté un domaine et des hébergements à bon marché, et j’espère améliorer mes compétences en HTML, CSS et Javascript afin que je puisse devenir un peu plus commercialisable en tant que développeur/webmaster.
En règle générale, quel processus utilisez-vous pour démarrer un site Web? Est-ce que vous dessinez la mise en page sur du papier et ensuite faites le code? Ou commencez-vous simplement à coder et à ajuster la sortie à votre convenance?
Mon processus ressemble généralement à ceci:
1. Caractéristiques. Avec un crayon et du papier, établissez les caractéristiques/pages distinctes qui composeront le site. Cela nous amène à la question générale - construisez-vous un site simple d’informations et de graphiques pour votre mère? une solution de commerce électronique pour une petite entreprise? un blog/galerie pour un ami photographe? Votre réponse déterminera beaucoup le chemin de construction que vous devrez suivre. Cette étape peut également impliquer des discussions approfondies avec un client ou celui qui conduit le bateau (si ce n'est pas vous).
2. Filaire. Avec toutes les fonctionnalités nécessaires, établissez une structure en fil de fer. Soit sur papier, soit avec un outil tel que Fireworks qui vous permettra d’intégrer des fonctionnalités de navigation très simples. Si vous travaillez avec un CMS tel que Wordpress, comment votre contenu statique sera-t-il géré? Cela pourrait également être un bon moment pour commencer à réfléchir à la structure des fichiers. Si votre projet nécessite une base de données personnalisée, le moment est également venu de planifier sa conception et sa mise en œuvre. Il s'agit d'une étape critique, car une planification intelligente évitera beaucoup de retours en arrière et de retravaillements, au cas où des erreurs se produiraient ou si le projet se glissait.
. Technologie. Une fois la phase de planification relativement élaborée, choisissez vos technologies. Est-ce que vous faites html directement? un php cms dans un environnement de lampe? .net mvc vitrine? Ces questions peuvent influer sur l’environnement d’hébergement requis, ainsi que sur les coûts d’exploitation. Si vous faites une vitrine, la sécurité est une préoccupation majeure ici (conformité aux normes SSL et PCI, par exemple). Assurez-vous de disposer d'un environnement de test performant (localhost ou autre).
4. Conception/Mise en page. Lorsque votre liste de fonctionnalités et votre structure filaire sont assez bien définies, vous pouvez commencer à réfléchir à la conception du site. Savoir ce qui va remplir les pages est, de toute évidence, une condition préalable. J'aime travailler dans photoshop et faire un usage intensif des dossiers en tant qu'analogues de votre structure de balisage. Je vais jusqu'à les nommer avec les identifiants de balisage et css prévus. Bien que ce soit probablement sage de faire des dessins libres avant d’être vraiment détaillés. J'ai tendance à utiliser des fichiers de "mise en page" dont je vais extraire des éléments et les placer dans des fichiers "de processus" - des fichiers que j'utilise pour générer des graphiques de production.
5. Balisage/CSS. Une fois que vous avez créé un design assez épuré (étant donné que cela passera certainement à la vitesse de rotation lorsque vous passerez en mode de production), vous pouvez commencer à écrire des balises. J'aime généralement avoir une mise en page standard qui s'adapte à tout le contenu du site. Donc - propre et flexible devrait être le point clé ici. Le balisage de mise en page devrait être assez complet avant de commencer à écrire du CSS, mais je trouve qu’ils font beaucoup pour s’informer. Vous ferez également beaucoup d’optimisation SEO à cette étape (nommer correctement les images ou les balises A, les méta-informations, les doctypes, etc.). Soyez minutieux.
5.1 Gestion de thèmes. Si vous travaillez avec un CMS et que votre conception sera utilisée en tant que thème personnalisé, recherchez des didacticiels expliquant comment faire exactement cela pour votre application envisagée. Franchement, cela peut être intimidant;) Je construirai toujours une disposition de balisage statique avec du CSS assez complet avant de la découper en éléments de thème.
6. Comportement. Lorsque votre balisage et vos CSS semblent assez complets, et que votre thème est peut-être en place, vous pouvez commencer à développer des comportements (survols, etc.). Un code javascript discret est important, sauf si vous utilisez des fonctionnalités qui en ont absolument besoin (un fichier ajax lourd). galerie, ou contenu flash piloté par les données). La règle générale est la suivante: si une personne visite votre site avec le javascript désactivé, que vont-ils voir? Je supprime parfois des éléments statiques et les remplace par des versions interactives au moment de l'exécution.
7. Conten. Sauf si la conception dépend du contenu (les images sont parfois du contenu, par exemple) = J'utilise généralement du texte/des graphiques fictifs jusqu'à ce que la conception et le comportement soient bien établis. Évitez de travailler plus d'une fois. Si vous remplissez les données du produit, une vérification minutieuse des erreurs et des tests seront nécessaires.
À ce stade, il semble toujours y avoir une période de retouche, de réparation et de polissage. Mais, en gros, il est temps de le faire vivre. Ensuite, allez prendre une collation.
Hmmm. Je suppose que c'est plus que juste "comment commencer". Mais peut-être que ça aide quand même. Bonne chance!
Lors de la conception d'un site Web, je commence par demander pourquoi?
La première partie de mon flux de travail demande POURQUOI? Si je travaille avec un client, je dois m'assurer qu'il a une vision clairement définie de ce qu'il souhaite que le site Web réalise.
1. Le pourquoi des questions.
Parlez-moi un peu de vous et de la raison pour laquelle vous le faites.
Qui sont les clients? Quel est leur besoin/douleur spécifique? Veuillez être en mesure de me fournir - avec quelques exemples spécifiques de différents types de clients, ce dont ils ont besoin, ce que le site Web fera pour eux.
Parlez-moi de l'entreprise. Qu'est-ce que tu fais exactement?
Qu'est-ce qui te rend meilleur que le prochain?
Si vous recherchiez le service fourni par votre entreprise, que saisiriez-vous dans Google pour le trouver?
Si vous construisez vous-même le site, vous devez déjà savoir quelles sont ces réponses.
Si vous déterminez, sur la base des réponses aux questions ci-dessus, que ces personnes sont sérieuses et ont réellement une bonne idée. Continuez ensuite (rappelez-vous que vous n'êtes pas encore payé, mais vous feriez mieux de vous débarrasser de leurs chaussettes si vous voulez qu'ils vous engagent.)
2. La recherche.
Passez du temps à faire des recherches sur le client et son entreprise. Découvrez leurs succès passés et les problèmes rencontrés. Êtes-vous le 3ème développeur qu'ils ont embauché? Qu'est-il arrivé aux 2 autres gars?
Découvrez ce dont le client a besoin. Pour qui construirez-vous ce site? Le client est-il un ancien combattant de 60 ans à la retraite ou un enfant de 16 ans au visage de bouton qui joue Farmville sur Facebook toute la journée?.
Découvrez qui sont les concurrents. Ils pourraient même pas savoir. Faites une analyse concurrentielle de 5 à 10 concurrents et découvrez qui est le cul qui doit faire rentrer les Serps. C'est à ce stade que vous devez savoir quelles sont les cibles clés de Word. Plus tard et tu échoues déjà.
2b La proposition
Soufflez-les avec votre connaissance de leurs affaires et proposez un accord/proposition de site Web et soyez prêt avec votre contrat une fois qu'ils sont d'accord. Obtenez le contrat signé et un acompte de 50% puis passez à l'étape 3.
3. La mission - en avoir un
Il y a un thème commun ici: dans tous ces cas, la mission ne porte pas sur le produit en tant que tel. La mission est "juste" quelque chose qui, si vous êtes vraiment sérieux, exige que le produit devienne absolument incroyable, alors vous le réalisez. Si vous préférez: ces missions sont la solution, pourquoi avons-nous simplement ajouté cette nouvelle fonctionnalité? Non, quelle nouvelle fonctionnalité ajoutons-nous? -- Benjamin Pollack.
Le calendrier doit être établi pour que chacun puisse mettre ses attentes en perspective.
4. Le flux de travail
C’est là que la plupart des gens commencent. Je vais donc expliquer mon processus, mais vous devrez décider quel flux de travail convient le mieux à votre situation, votre équipe, votre client, etc.
Pour moi Le contenu vient en premier. Je m'assure que le client en a la majorité avant l'écriture du code. Nous ne parlons pas de la version finale de l'épreuve, mais plus ou moins des mots de texte qui figureront sur les pages. Si une équipe marketing est impliquée, cela peut prendre un certain temps.
Vous devriez déjà avoir une idée de ce à quoi le site ressemblera. Vous devriez avoir le contenu. Vous devez maintenant travailler sur les principes de mise en page et de conception générale qui permettront d'atteindre l'objectif que vous avez défini à l'étape 3.
Je déteste les wireframes mais je comprends qu'ils sont nécessaires. Ce n'est pas parce que vous savez à quoi ressemble le site que votre client pourrait ne pas l'être. Ceci est pour votre protection et les clients. Lorsque tout le monde est heureux, faites-le signer sur quelque chose qui dit "C'est ce que nous vous payons pour construire".
Développement frontend et interface utilisateur - HTML, CSS et CONCEPTION DANS LE NAVIGATEUR, technique Hardboiled d'Andy Clarke. J'en ai assez de perdre autant de temps dans Photoshop quand je sais que je peux démontrer une maquette plus réaliste plus rapide qui me donne également une longueur d'avance sur le développement.
4b. La base de code
Vous pouvez enfin vous amuser. Pour vous et vos clients, configurez les avantages VERSION CONTROL avant de commencer. Depuis que vous faites le contrôle de version, vous devriez aller de l'avant et configurer BUG TRACKING pendant que vous y êtes.
4c. Copier l'édition
Rappelez-vous le contenu que nous avons? C'est maintenant qu'il doit être modifié. Je crains, alors j'essaie d'engager quelqu'un d'autre ou de m'assurer que beaucoup de gens le lisent. Vérifiez et assurez-vous que les mots clés dont nous avons parlé à l'étape 2 sont optimisés pour le référencement. Si notre contenu est génial et concerne en fait ces mots clés, cela devrait venir naturellement.
5. Tests bêta et d'interface utilisateur
Faites asseoir de vrais êtres humains respirants devant votre site et commencez à les utiliser. J'aime enrôler ma mère qui appelle parfois et veut savoir pourquoi son imprimante ne veut pas imprimer (La fiche maman, elle doit être branchée en premier). Ce type d’utilisateur doit pouvoir naviguer sur votre site, sauf s’il utilise bien sûr l’enfant de 16 ans, exemple ci-dessus.
6. Plan de maintenance et de référencement
Assurez-vous que tout le monde sait qui est chargé de combattre les bêtes de serveur.
Dans un mois, reportez-vous à l'analyse de la concurrence que nous avons effectuée et comparez notre site à ceux que nous avons analysés. Utilisez ces données pour créer votre plan de référencement et NON, je ne parle pas de = huile de serpent, SEO si génial) et vos balises de titre correspondent au corps du texte. Le référencement est un processus long sauf si votre débordement de pile et que vous avez une armée de 14,1 millions d'utilisateurs pour générer un contenu de qualité pour vous.
Il existe une grande différence entre un contenu de qualité et ce que vous trouvez sur "le site avec trait d'union", que je ne lierai pas. (Pour éviter que le jus sans suivi ne coule sur eux).
7. Lancement
Tout fonctionne? La mission de construire de la génialité a été réalisée? Ayez un plan de lancement et exécutez-le.
Si vous avez tout fait correctement aux étapes 1 à 6 de votre lancement sera un jeu d'enfant pas de grève tu pourrais vous aurez des problèmes. Juste être prêt pour eux et réparer les erreurs.
Envoyez la facture, rincez et répétez.
J'aime commencer par <!DOCTYPE html>
Sérieusement si ... premières priorités:
- Découvrez ce que le client veut. Dessinez un croquis pour la mise en page de base, créez un jeu de couleurs, etc.
- Réalisez une maquette de base de la navigation et de la présentation (statique) et travaillez avec le client pour l'affiner.
- Production réelle. Obtenez le contenu CMS et/ou statique en place. Confirmez à nouveau avec le client pour vous assurer qu'il correspond à ce qu'il cherche et qu'il peut gérer le CMS/que le CMS peut répondre à ses besoins.
- Affinez et répétez 3 jusqu'à ce que le client soit satisfait.
- ????
- Profit!
La plupart des réponses vont déjà en profondeur, laissez-moi juste ajouter que vous devez utiliser un framework ou des modèles pour ne pas perdre de temps à réécrire les bases.
Il existe de nombreux PHP framework disponibles ( Kohana est mon préféré) ou beaucoup de personnes utilisent Wordpress comme base. Vous pouvez aussi utiliser un framework CSS, là encore il y en a beaucoup, l'un des plus populaires est le 960 grid system
Lors de la conception d'un site Web, comment commencez-vous habituellement?
Comme vous, j’ai trouvé le besoin de me promouvoir en tant que développeur/concepteur Web il ya quelques années. J'ai trouvé mon point de départ pour comprendre dans mon esprit les informations, l'image et le message que je souhaite offrir aux visiteurs de mon site Web? et ce que je voulais que l'utilisateur accomplisse/fasse en visitant mon site Web .
Une fois que j'ai acquis cette compréhension, le processus de conception est devenu beaucoup plus clair. Cela m'a permis d'écrire les éléments de ma page d'accueil et des pages suivantes qui communiqueraient ces éléments.
Par exemple, je tenais beaucoup à ce que mon CV soit facilement trouvable et téléchargeable. Ainsi, lors de la conception de mon site, je me suis assuré que les informations concernant mon CV et où il pouvait être trouvé étaient facilement disponibles.
La morale de l'histoire est d'être pertinent. Tout sur votre site Web devrait servir à quelque chose, sinon son bruit inutile.
Tout d'abord, je dessinais la mise en page de base et la concevais sur papier avant de commencer le codage. Après avoir terminé la conception de base sur papier, il est facile de la coder de manière modulaire.Offcourse php & css serait le meilleur moyen de la personnaliser.
J'aime toujours commencer par créer une maquette en utilisant une sorte de logiciel Photoshop afin qu'il puisse incorporer toutes les images de votre site.