Refonte appropriée du site Web - algorithme étape par étape, questions de base et nuances

Le design est un travail créatif, il n'est donc pas toujours possible de prédire le résultat du travail et ne peut pas toujours nous convenir. Par conséquent, l'essentiel est d'élaborer un savoir traditionnel compétent et compréhensible.

Internet change littéralement chaque jour, il est donc toujours nécessaire de surveiller la pertinence et la commodité de vos ressources Internet. Les technologies qui étaient populaires il y a 5 ans aujourd'hui peuvent perdre complètement leur pertinence et votre site peut (et sera) gênant pour vos visiteurs et clients, respectivement, vous perdrez chaque jour des bénéfices potentiels. En vertu de quoi, chacun des entrepreneurs se posera tôt ou tard la question de la refonte de sa boutique en ligne ou de son site de service.

Problèmes clés lors de la modification de la conception d'un site

Avant de commencer tout travail, vous devez clairement comprendre si vous avez besoin d'une refonte du site Web.
Je recommande de répondre aux questions suivantes:

1. La conversion est-elle en baisse? Le temps sur le site tombe-t-il, les conversions chutent-elles? * Voir toutes ces informations dans la métrique.
2. Votre boutique en ligne a-t-elle l'air moderne? * Parcourez tous vos concurrents pour les besoins de base, comparez leur conception avec la vôtre, la convivialité, les filtres de produits, divers blocs, etc.
3. Votre site a-t-il une version mobile ou un design réactif? * Je pense que vous connaissez la réponse à cette question, sinon, allez sur webmaster.yandex.ru, la section "Diagnostics" - "Site Diagnostics" du rapport contiendra des recommandations sur la version mobile.

Sur cela, tous les points principaux que vous devez comprendre finissent, nous nous tournons vers les principaux enjeux et problèmes lors de la refonte du site.

Comment changer la conception du site et ne pas perdre de position?

Si votre boutique en ligne a de bonnes positions dans la région, bien sûr, personne ne veut les perdre, je vous recommande donc de suivre attentivement les principales recommandations suivantes lors de la refonte du site:

• Premièrement, nous ne changeons jamais la structure du site, c'est-à-dire qu'après avoir changé la conception, vos pages doivent avoir les mêmes URL, c'est très important (une refonte signifie simplement changer l'apparence et pas plus). Si les adresses de page changent, cela entraînera une réindexation, 404 erreurs (s'il n'y a pas de redirection 301), la répartition du poids statique sur les pages sera complètement différente, tout cela entraînera un changement de position inévitable. * Si des travaux à grande échelle sur le site sont prévus, y compris un changement de structure, alors cette procédure est effectuée avant la refonte.

• Ne changez pas le moteur du site. Lors du changement du CMS, le code entier de votre boutique en ligne sera nouveau, ce qui nécessitera à nouveau une réindexation complète de votre site, qui se reflétera à son tour dans les positions.

• Je recommande de se souvenir de toutes les balises html de base. Il ne s'agit pas seulement des en-têtes H1-H6, mais aussi des balises de conception b, i, ul, etc. Je recommande de les laisser où ils étaient (nous incluons cela dans l'énoncé des travaux lors de la mise en page). Toutes ces balises affectent la pertinence de la page aux demandes à un degré ou un autre, et nous ne voulons pas gâcher la position de notre site, il est donc fortement conseillé de laisser ces points tels quels.

• Moments avec de nouveaux blocs. Par exemple, prenez la page de catégorie de produit, dans le nouveau design, nous avons un bloc avec les actualités du magasin, un exemple:

Tout cela est bien, mais il vaut la peine de comprendre que ce sont tous des liens internes qui véhiculent leur poids, c'est-à-dire que nous avons ajouté 6-7 (selon le nombre d'articles dans le carrousel) des liens vers des articles (que nous n'avons pas besoin de promouvoir) ) De plus, ce bloc ajoute du contenu non pertinent à notre page, ce qui n'est pas bon.

Il peut y avoir beaucoup de ces «nouveaux» blocs, donc je recommande de mettre certains d'entre eux dans les balises noindex et les liens dans l'attribut nofollow, cela protégera votre site des changements dans la recherche. Nous faisons de même avec tous les blocs similaires.

Après un certain temps (1-2) semaines, je recommande de commencer à supprimer progressivement les balises et de regarder la position du site. Cela nous donnera l'occasion de "faire reculer les changements" lors du changement de position dans une direction indésirable.

• Un peu de pertinence. Encore une fois, prenez la page de catégorie de produit qui affiche le blog du produit. Il peut y avoir une situation où auparavant, chacune des cartes de produit présentait certaines caractéristiques (prix, article, couleur, taille, etc.), mais dans la nouvelle version, le concepteur n'aimait pas son apparence et supprimait la sortie des caractéristiques des cartes. Cela peut et affectera la position du site, à la fois de la pertinence du contenu (car une partie du contenu disparaîtra) et du côté du comportement des utilisateurs, il convient de s'en souvenir.

Pour résumer toutes les principales recommandations:

1. Ne changez pas la structure, ne changez pas l'url;
2. Ne changez pas le CMS;
3. Changements minimum dans les balises de mise en page principales qui affectent la pertinence (H1-H6, b, i, etc.);
4. Nous nous assurons que toutes les informations qui étaient précédemment affichées restent sur le site (si vous en avez besoin, vous pouvez voir la métrique - cliquez sur la carte, des vidéos des actions de l'utilisateur, etc.).
5. Si nous ajoutons beaucoup de nouveaux blocs, une nouvelle fonctionnalité qui utilise beaucoup de contenu, je recommande de les fermer de l'index (nous protégeant ainsi des questions inutiles). Ensuite, retirez progressivement le noindex et surveillez les positions (il est possible de tout retourner).
6. Mécanique similaire avec de nouveaux blocs dans lesquels il y aura beaucoup de liens, je recommande également de fermer les liens dans les attributs nofollow (tout en préservant nos positions), puis nous les supprimons progressivement, nous regardons les résultats de la suppression de position.

Après toutes ces actions, nous comprendrons pourquoi nous avons besoin d'une refonte et comment le faire correctement afin de ne pas gâcher ce qui a été acquis par notre travail et notre temps. Vous pouvez passer à l'étape suivante.

Préparation d'un prototype pour la conception future du site Web

Il s'agit de la partie la plus importante et la plus importante de notre travail, car le prototype est le savoir-faire principal et principal, que nous enverrons à notre concepteur.

Les pensées et les vôtres du designer ne coïncideront jamais, le designer pensera une chose, vous êtes différent, c'est loin du fait que vous trouverez vraiment un professionnel qui pourra vous conseiller quelque chose, malheureusement, par expérience, le designer fera juste le travail sur la tâche technique et pas une seule étape côté, faites comme il se sent à l'aise et comment il l'aime davantage. En conséquence, nous obtenons un design médiocre qui, lors du remplissage du contenu, la mise en page disparaîtra, car le concepteur n'y a pas réfléchi, il peut ne pas y avoir d'effets de guidage, et en effet, nous ne pouvons pas obtenir ce que nous voulions.

Par conséquent, la chose la plus importante est de former une tâche technique compétente, après quoi ni vous ni le concepteur n'auront de questions et nous obtiendrons ce que nous voulons.

Choisir un programme prototype

À ce jour, il existe de nombreux programmes et services similaires, je ne recommande donc pas de vous concentrer sur cela, prenez simplement celui qui est gratuit et dans lequel nous sommes à l'aise de travailler:

1. Gliffy

Il existe une version gratuite, vous pouvez l'utiliser.

2) Axure

Programme simple et pratique.

3) Oiseau moqueur

Il existe une version gratuite, vous pouvez exporter dans n'importe quel format, une interface très simple et intuitive, vous n'avez rien à télécharger. Nous allons l'utiliser.

Préparation du prototype

1) On retrouve tous nos concurrents

* Nous ne prenons pas seulement le top 5, car ces magasins peuvent avoir un classement différent des moteurs de recherche (tops de niche) et certains points (blocs, fonctionnalités, etc.) que nous décidons d'en retirer peuvent ne pas améliorer la situation pour nous, mais peut empirer.

Nous trouvons 20-30 sites (nous prenons différentes régions) que nous avons aimés et les analysons attentivement. Nous prenons de tout le monde la meilleure solution de tel ou tel bloc, que ce soit un filtre de produit, un bloc de produits recommandés, des astuces, etc. Il vaut la peine de faire attention à tout où se trouve le lien, quel bouton, etc.

2) Nous écrivons tous les blocs

Que nous voulons utiliser sur notre site Web. Nous choisissons le meilleur bloc pour la mise en œuvre, nous n'avons pas besoin d'inventer nous-mêmes des proportions, où sera la photo, où sera le texte et où est le bouton, nous prenons simplement la meilleure solution de tel ou tel bloc des concurrents.

3) Nous sélectionnons tous les éléments du site

À ce stade, vous devez décider de ce que sera l'en-tête, du menu principal, du sous-sol, etc.

* Tous les concurrents que nous avons choisis ont de bonnes positions dans le PS, respectivement, et leurs conceptions seront également bonnes, vous n'avez pas besoin de penser que nous proposerons nous-mêmes une meilleure solution ou plus encore notre concepteur, nous avons déjà des versions éprouvées de telle ou telle fonctionnalité, nous prenons simplement utilisez-le avec nous.

4) Décidez du style et de la palette de couleurs

Le choix d'une palette de couleurs et d'un style n'est pas assez simple. De plus, je vous recommande de ne pas vous fier à l'opinion de votre designer, il ne sait pas ce que vous voulez, vous devez donc traiter ce problème à ce stade.

Pour ce faire, je vous recommande de faire attention aux sites indépendants sur lesquels nous commanderons notre design. Il existe de nombreux sites similaires, voici les plus populaires:

• Kwork.ru ;
• Fl.ru ;
• Weblancer.net ;
• et d'autres.

Nous sélectionnons une ressource, allons dans la section "Conception" et allons aux interprètes, regardons leur portfolio. Il y a beaucoup de designers, il y a beaucoup d'œuvres présentées dans leur portefeuille, nous pouvons donc facilement choisir un design que nous aimons à la fois en termes de style d'exécution et de schéma de couleurs. Après avoir choisi, enregistrez votre travail choisi.

À ce stade, nous avons tout ce dont nous avons besoin pour créer un prototype de haute qualité et réfléchi et, par conséquent, nos savoirs traditionnels.

Rendre un prototype de site

Nous nous sommes installés sur le service Mockingbird , nous allons donc sur, enregistrer et commencer notre travail.

Nous devons dessiner clairement toutes nos futures pages d'accueil, catégorie de produit, carte de produit, catégorie d'actualités, actualités, contacts, ainsi que tous les formulaires.

À l'étape précédente, nous avons sélectionné tous les blocs que nous voulons voir dans la conception future, choisi la façon dont l'en-tête du site, le menu, etc., y seront situés. Par conséquent, nous devons seulement transférer tout cela vers le prototype. Dans le prototype, il est nécessaire de refléter pleinement tous les éléments, tous les blocs du site, cela donnera au concepteur une compréhension de ce dont nous avons besoin et il n'aura pas à réfléchir longtemps sur comment et quoi dessiner, car en fait tout est déjà dessiné, il ne peut ajouter que des graphiques.

En option, vous pouvez tout modifier dans Photoshop pour que tous les éléments soient encore plus visuels.

À la sortie, nous avons quelque chose comme ceci:

Nous avons également rendu tous les formulaires, onglets du prototype:



Après avoir créé un prototype à part entière de la future conception, nous procédons à la préparation des termes de référence; nous devons décrire en détail tous les points présentés dans le prototype.

Nous écrivons une description détaillée du prototype

C'est également un moment très crucial, car si nous oublions quelque chose et que nous ne serons pas dans la conception.

• Nous discutons du format du design
• Spécifiez l'image du portfolio (que nous avons précédemment sélectionnée). Nous écrivons que nous voulons un design dans un style et une palette de couleurs similaires. Nous indiquons que des boutons, des cadres, etc. peuvent être tirés de cette conception.
• Les boutons, liens et autres éléments doivent avoir des effets de survol et d'activité.
• Attachez les polices que vous utilisez au dessin (certaines typographes en ont besoin)
• Ensuite, nous indiquons tous les points qui, à notre avis, devraient être clarifiés. Par exemple, nous voulons qu'après avoir pointé la carte du produit, le bouton "Ajouter au panier" s'affiche, nous décrivons tous ces moments.

* Ces problèmes et nuances peuvent être décrits sur le prototype lui-même, par exemple:


Nous procédons directement à la sélection et à la commande du design.

Choix de l'artiste, ordre de conception

Il existe deux options pour commander un dessin:

1) Contacter le studio ou les sites de design
Je pense que cette option n'est pas la meilleure, tout d'abord, le prix sera beaucoup plus élevé, si nous nous tournons vers un pigiste, nous devrons également dépenser non seulement beaucoup d'argent, mais aussi du temps. Il convient de noter que cette option ne différera pas toujours en termes de qualité et de respect des délais.

2) Contactez un pigiste via des sites populaires
Cette option est idéale pour nous. Depuis, l'objectif principal de la préparation d'un prototype détaillé et des savoirs traditionnels n'était pas seulement d'obtenir exactement la conception dont nous avons besoin, mais aussi un moyen d'économiser notre argent. Après tout, il ne reste plus au designer qu'à ajouter des graphismes à notre prototype, en fait nous avons déjà dessiné l'ensemble du «design», l'artiste n'a pas besoin de penser à quoi et à quoi devrait ressembler, tout est déjà dessiné, le style et la palette de couleurs sont fournis.

Comme je l'ai écrit ci-dessus, il existe une vaste sélection de lieux avec frisers et ils sont tous bons à leur manière. Mais nous choisirons le service Kwork.ru, car nous avons besoin d'une qualité décente pour un montant suffisant, et comme je l'ai écrit ci-dessus, nous n'avons pas besoin d'un professionnel pour 100 000, nous avons besoin de graphiques pour notre prototype. De plus, voici un système de paiement très simple et sécurisé, nous n'avons pas besoin de payer directement le pigiste, tous les paiements sont effectués via le service lui-même. Si la conception fournie n'est pas conforme à l'énoncé des travaux, vous pouvez facilement retourner les fonds.

Tout d'abord, inscrivez-vous et allez dans la section design. Je recommande de ne pas perdre votre temps sur un long choix de concepteurs, parcourant des centaines de portefeuilles et ainsi de suite, ouvrez le top 20-30 et envoyez nos savoirs traditionnels à tout le monde, spécifiez le prix et les conditions.

Après cela, tous ceux qui sont intéressés à terminer votre mission vous proposeront leurs conditions sur la base desquelles nous pourrons faire notre choix. Tout est assez simple et transparent.

* Il convient de rappeler que tout ce que nous attendons de la conception a déjà été écrit par nous dans l'énoncé des travaux, il est donc préférable de privilégier l'aspect financier du problème, car le résultat de cela ne changera pas réellement.

En conséquence, nous avons un design entièrement fini, simple et moderne:
Vous pouvez vous familiariser pleinement avec le projet sur tkspecodegda.ru

Tous les faits saillants:

1. Il est nécessaire de déterminer clairement si nous avons besoin d'une refonte du site Web;
2. Nous sélectionnons les meilleurs concurrents, en fonction de leurs sites, de leurs fonctionnalités, nous choisissons tout le meilleur;
3. Sur la base des informations préparées, nous réalisons un prototype de haute qualité de chacune des pages;
4. Choisissez un site qui nous convient complètement en couleur et en style;
5. Nous faisons une note explicative, tz au prototype;
6. Nous commandons la conception sur les échanges indépendants populaires;
7. Nous obtenons le design fini que nous voulions, dont nous avons besoin, pour un prix adéquat;
8. Nous nous tournons vers la compilation des spécifications techniques de mise en page et d'étirement, la recherche de l'artiste.

Certaines nuances de la disposition des commandes, ainsi que la version mobile du site, seront décrites dans le prochain article.