Quelles sont les étapes de la conception d'un site Web?

Appel à tous les concepteurs Web :)

Je commence à créer un site Web pour une petite entreprise dans ma ville natale et ce sera mon premier véritable projet. J'ai fait des sites dans le passé, ce que j'ai fait pour les loisirs. Je parle couramment HTML et CSS. J'ai les exigences des clients et ce qu'il veut sur le site Web, etc. Je suis bloqué sur les étapes à suivre après avoir finalisé les exigences. J'ai effectué des recherches sur le Web et je n'ai rien trouvé de pertinent pour mes questions car les informations sont obsolètes.

Mes questions sont:

Qu'est-ce qu'un workflow de concepteurs Web en 2014? (Parce que tout change si vite) Est-ce que je crée des wireframes du site puis les conçois dans photoshop et puis code les designs?

Je veux juste savoir comment fonctionnent les processus de "conception", comme les étapes à suivre pour créer le site Web.

Merci d'avance.

Découverte et portée

Asseyez-vous avec le client pour déterminer les objectifs, le but et les besoins. Vous devriez avoir rédigé un devis du site proposé et également discuter du délai d'exécution. Assurez-vous d'avoir écrit tout ce que vous ne pouvez pas fournir. Vous devez comprendre comment le site sera structuré. Tels que responsive, tablette et téléphone uniquement, ordinateur de bureau uniquement, ordinateur de bureau et tablette uniquement. Vous devez déterminer si la conception est une cible de conception à phases multiples, par exemple le client voudra publier une version de bureau et souhaitera une application mobile complète plus tard.

Cartographie de contenu

J'espère que vous avez reçu tout le contenu souhaité pour le site. Vous devez cartographier le site et ses fonctionnalités. Décidez comment l'évolutivité est pour les modifications futures, décidez comment le code peut être structuré si c'est pour un CMS ou une application.

Exemple:

Maquette

Après avoir terminé votre "arbre" ou "carte" avec l'approbation du client, je travaillerais sur un croquis manuel ou un outil de maquette. Il y a beaucoup de questions sur ce sujet si vous effectuez une recherche en haut à droite

Exemple:

Carreau de style

La conception dans Photoshop pour la conception Web va à l'encontre du but de l'âge d'aujourd'hui. Je ne connais pas beaucoup de gens qui utilisent encore Photoshop, car le temps qu'il vous faut pour créer un bouton de fantaisie, vous auriez pu passer le même temps et codé dans le navigateur. Si je dois utiliser une application conformément à une demande spéciale, je la déploierai dans Illustrator ou InDesign. Je conseillerais de migrer pour concevoir une tuile de style telle que:

Dans le but de la tuile, vous ne donnez pas un design à un client et ne vous mettez pas dans le coin "cela ne ressemble pas au design que vous m'avez donné". De plus, si vous planifiez un site, il n'y a aucune raison de passer du temps à le présenter dans Photoshop pour la réactivité, car vous passerez beaucoup de temps à concevoir pour certains appareils, etc. etc. Si vous devez concevoir le site complet, je le ferais considérez Illustrator, comme indiqué, pour son SVG et sa capacité à exporter des éléments pour votre site par rapport à Photoshop. Dans une certaine mesure, vous pouvez même utiliser InDesign pour formater le contenu, mais je n'utiliserais Photoshop que pour la manipulation d'images et si je le fais, je roulerais probablement avec ImageMagick. Je prends la tuile de style un niveau plus loin que les autres et le code en une seule page, j'ai donc éliminé une tâche préliminaire de mon maître.css fichier.

Wireframe

Je préfère déployer la conception dans le navigateur si vous ne l'avez pas remarqué. Aujourd'hui, je peux utiliser Illustrator pour une esquisse du site ou une maquette du site, mais je déploie généralement un .cssfichier de modèle par défaut avec pas plus de 6 couleurs dans une échelle de gris et je code tout pour la structure du site, car la plupart des gens ne peuvent pas acquérir une compréhension de la conception et vouloir quelque chose à jouer. Je vais parfois de l'avant et le fais en PHP car il est plus facile à déployer pour un CMS. Je développerai ensuite un sous-domaine simple avec les polices FOURNIES du client de manière noir et blanc afin que l'ensemble des fonctionnalités du site soient présentes et qu'elles puissent les parcourir. Puisque je n'ai pas passé le temps à ajouter tout le contenu ou les couleurs (parce que j'utilise une référence de texte factice: "Alternative à Lorem Ipsum (texte factice) pour les sites Web") Je peux facilement modifier toutes les modifications présentes si elles n'aiment pas un certain élément basé sur un appareil.

Coloriser et contenu

Une fois que le client a signé la structure du site et les fonctionnalités, je rédigerai le reste du CSS et ajouterai les animations demandées ou les spécificités JavaScript. Étant donné que la vignette de style est approuvée et que si je l'ai développée correctement, je peux simplement copier le CSS et être défini.

Debug, Debug, Debug

La dernière étape avant la signature du client est le débogage et assurez-vous que mon code est solide et sans erreur. Si tout est correct, je devrais avoir une libération en douceur. Cette étape comprend également la mise à disposition des tests et des tests de charge, si c'est ce que vous avez proposé et proposé. Personnellement, je suis fermement convaincu que tout concepteur devrait être conscient de ce qu'il développe, tout comme vous le feriez, espérons-le, en matière de conception d'impression. Si le client ne peut pas se permettre un véritable fournisseur d'hébergement, cela pourrait limiter les performances du site et tout ce qu'il dira, c'est votre faute et vous avez fait quelque chose de mal.

Formation

J'enchéris généralement dans ma formation brève / devis sur les sites CMS. Certains utilisateurs n'ont aucune idée de ce qu'ils font.Je vais donc enchérir un après-midi avec une heure de rembourrage pour les questions après pour vous assurer de passer en revue quoi que ce soit ou de vous assurer qu'ils utilisent ma conception au maximum.

Quelques autres sujets qui peuvent vous aider puisque vous posez une question de base:

• Quelle est la différence entre les wireframes et les maquettes?
• Comment présenter des maquettes de conception web à un client?
• Quelles sont les bonnes pratiques de "maquette" dans la conception Web?

Je suis également designer web qui vient de débuter dans le domaine. J'ai fait quelques projets maintenant, cependant. Pour moi, mon flux de travail se déroule comme suit:

1. Réunion initiale de conception et de développement
   C'est à ce moment que je recueille toutes les informations pertinentes, y compris la date d'achèvement prévue, fais une liste des éléments nécessaires de mon client, etc.
   
2. PhotoShop Mockups
   À ce moment, je trouve un ou deux ou trois modèles qui conviennent à mon client et je crée des maquettes dans Photoshop en utilisant leur marque, leurs couleurs, leurs styles, etc. Je les envoie et je discute de ce qui devrait être changé / conservé sur chacun , puis laissez le client décider du design qu'il préfère.
   REMARQUE: Si vous utilisez WordPress pour continuer, vous pouvez aller sur http://themeforest.comet découvrez des tonnes de thèmes. De là, vous pouvez prendre des captures d'écran et faire vos maquettes, puis vous pouvez également fournir une démo en direct (sans les personnalisations du client, évidemment). Si votre client aime l'une de ces maquettes, vous achetez alors le thème et pouvez le modifier comme vous le souhaitez. C'est ce que j'ai tendance à faire. Je n'utilise jamais un thème (ou quoi que ce soit d'autre d'ailleurs) sans donner le crédit / paiement / etc. approprié. au créateur d'origine. :)
   
3. Développement
   Ensuite, je commence enfin à développer le site dans un environnement de développement (PAS le site Web en direct du client, mais un sous-domaine si possible - IE dev.clienturl.com) J'envoie des mises à jour à mon client chaque fois que j'ai l'impression qu'une page se rapproche pour terminer, de cette façon s'il y a des problèmes, nous pouvons les résoudre immédiatement.
4. SUIVRE TOUJOURS
   Même après que le site Web de votre client a été mis en ligne et qu'il semble satisfait et n'a pas demandé de modifications supplémentaires, assurez-vous de faire un suivi. Assurez-vous simplement que tout fonctionne comme il se doit, selon leurs attentes. Je recommande également de rédiger un petit sondage pour que chaque client termine une fois le site Web mis en ligne pendant environ une semaine. Vous pouvez utiliser les commentaires d'ici comme témoignages sur votre site Web.

Si vous avez besoin d'aide, contactez-moi via mon site Web. J'ai des tonnes de ressources que je peux partager avec vous pour des choses comme les contrats, les enquêtes de post-production, les questionnaires initiaux, etc. http://anchorsawaydesigns.com/

essayez d'obtenir autant d'informations que possible dès le départ, puis suivez une approche par étapes quelque chose de similaire à ci-dessous. Essayez de tenir votre client informé autant que possible, car vous ne voudrez pas développer quelque chose isolément pour découvrir plus tard qu'il ne répond pas à leurs attentes. Si vous investissez dans un bon outil de wireframing (j'utilise du balsamiq), alors la moitié du travail est faite pour vous.

1. Rassemblement des exigences
2. Wireframing
3. Maquettes de conception
4. Conception finalisée
5. Développement
6. Hébergement

Bonne chance.

Salut mec c'est sympa vous commencez un nouveau projet.

Étapes pour votre besoin:

1. vous décidez d'abord quelle technologie vous souhaitez utiliser pour votre projet, je veux dire le défilement d'une seule page, plusieurs pages, etc.

2. Ensuite, préparez en conséquence un croquis pour votre mise en page et votre flux de travail.

3. Maintenant, commencez à concevoir votre mise en page dans l'outil que vous aimez avec Photoshop, mais vous pouvez utiliser votre goût.

4. Après cela, il est bon que vous montriez votre disposition au client pour tout changement, par exemple. couleur, polices, etc. pour que vous puissiez le faire ne fait pas mal à la tête au moment de html.

5. Maintenant, après confirmation des clients. Il est temps de commencer à coder avec Html et Css.

6. Après cela, il est temps de le transmettre au développeur pour le codage de base du langage supplémentaire, c'est-à-dire PHP, .Net etc.

Prendre plaisir............

Dans l'industrie Web, pour rationaliser votre processus de développement, la conception est terminée et avant que la conception finale ne soit présentée pour être développée ou testée, d'autres étapes intermédiaires sont impliquées:

Étape 1: Obtenir l'inspiration:

Si vous observez continuellement ce que font d'autres concepteurs ou sites pour leurs wireframes, vous aurez lentement une idée dans votre esprit de la façon dont un wireframe aide à organiser les informations pour l'écran.

et pour cela, vous pouvez utiliser l'outil filaire "Wirify", ajoutez simplement le gros lien à votre signet et accédez à n'importe quel site Web souhaité, cliquez sur le signet, vous verrez le site Web se transformer en filaire.

Étape 2: Concevoir votre processus:

Différents concepteurs abordent le wireframing et sa traduction en visuels ou en code de différentes manières,

Ici, ce n'est pas seulement le concepteur de choisir le chemin à suivre, parfois les clients préfèrent faire directement des maquettes, et certains préfèrent plus systématique,

Esquisse => Filaire => Maquette => Code

Étape 3: Esquisse:

Maintenant, lorsque vous êtes inspiré, avez des idées approximatives et une planification d'approche, il est toujours bon de commencer par dessiner, peu importe à quel point vous maîtrisez votre souris / stylet ou tout ce que vous utilisez, ils ne peuvent pas battre le papier, le crayon à simplicité.

Le dessin à la main sur papier est toujours un bon point de départ pour tout designer. Il fournit un moyen rapide et facile de se concentrer et de s'organiser. Si vous êtes très précis dans l'esquisse, vous pouvez même l'utiliser comme fil de fer final.

Étape 4: Wireframing:

La création d'un filaire est l'une des premières étapes à suivre avant de concevoir.

Un filaire vous aide à organiser et à simplifier les éléments et le contenu d' un site Web et est un outil essentiel dans le processus de développement.

Un filaire est essentiellement une représentation visuelle de la disposition du contenu dans une conception .

Comme la fondation d'un bâtiment, il doit être fondamentalement solide avant de décider de lui donner une couche de peinture coûteuse.

Choisissez vos outils

Voici la liste de Mashable de 10 outils de wireframing gratuits pour les concepteurs

Définition d'une grille

Les grilles sont très nécessaires pour réaliser une conception symétrique et parallèle.

chaque fois que vous regardez un site Web bien conçu, vous constaterez que son contenu commence à un point spécifique du corps et se termine à un, ceux-ci sont gérés à l'aide de grilles.

Déterminer la disposition avec des boîtes

Définir la hiérarchie des informations avec la typographie

Ce qu'il faut éviter pendant le wireframing:

• Il se passe trop de choses sur la page.
• Accent sur la couleur et le design
• Trop de détails

La création d'une structure filaire donne au client, au développeur et au concepteur l'occasion de jeter un regard critique sur la structure du site Web et leur permet d'effectuer facilement des révisions dès le début du processus.

Le wireframing présente les principaux avantages suivants:

Étape 5: maquettes / visuel:

Le Wireframe final peut maintenant être converti en maquettes finales ou visuelles:

Certains outils courants pour Mockuos sont Adobe Photoshop, Corel Draw et Sketch très nouveau mais déjà populaire, etc.

Hiérarchie de l'information

Vous devrez peut-être considérer ce qui doit être mis en surbrillance et ce que doivent être les informations latérales, et le schéma de couleurs, le repositionnement et la typographie sont ainsi décidés.

Typographie

Choisissez une typographie visuellement attrayante et lisible pour le site Web avec la bonne combinaison d'alternatives. La taille de la police, le poids et les couleurs jouent un rôle crucial dans la lisibilité.

Schémas de couleurs

Un schéma de couleurs représentant l'identité de la marque et les couleurs psychologiques comme le rouge pour le danger, le vert pour le succès, etc.

Étape 6: Prototypes :

Un prototype est un échantillon, un modèle ou une version précoce d'un produit conçu pour tester un concept ou un processus ou pour agir comme une chose à reproduire ou à apprendre.

Les structures filaires gèrent la structure, les maquettes gèrent les visuels et les prototypes gèrent la convivialité (dans les produits Web / d'application).

Un prototype de produit est fabriqué, puis il est testé et le POC (Prof of concept) est fait, nous pouvons maintenant passer au produit réel (évidemment s'il n'y a pas de changement nécessaire)

Lien vers l'article original avec des images et d'autres liens