Création ou refonte d’un site Internet

Les 4 étapes clés incontournables !

Projet

vignette-projet-webmaster-tuto

> Cahier des charges
> Définir les objectifs
> Cérer la stratégie
> Audit web marketing
> Planning du projet
> Suivi du plan (Gantt)

Conception

vignette-architecture-webmaster-tuto

> Taxonomie
> Architecturer l’info
> Prototyper le projet
> Designer la maquette
> Intégration htm5 css3
> Intégration Mobile

Développement

vignette-conception-webmaster-tuto

> Etude et analyse
> Conception UML
> Modélisation BDD
> Choix Technologiques
> Codage infomatique
> Tests unitaires débugs

Production

vignette-production-webmaster-tuto

> Optimisation contenus
> Référencement SEO
> Intégration e-Mailing
> Réseaux Sociaux
> Supports eBook vidéos
> Maintenance du site

Projet

vignette-projet-webmaster-tuto

Prototyper

vignette-architecture-webmaster-tuto

Développement

vignette-conception-webmaster-tuto

Production

vignette-production-webmaster-tuto

Préparez votre projet en amont

Permet de maîtrisez son coût et son délais de livraison

flèche suivez le guide

I – Préparer votre projet et vos contenus

> Comment faire ? Est-ce bien utile ?

  1. Quelque soit votre projet, autant démarrer du pied avec une bonne organisation. Pour travailler de façon efficace aussi bien pour vous que pour le prestataire à qui vous confiez votre projet, il faut vous organiser dès le début et préparez, classer correctement tous les éléments et contenus de votre projet (cahier des charges qui décrit votre projet, contenus textes, photos, illustrations, logos, videos, fichiers PDF, PPS et autres.. URL).
    Cela paraît évident et pourtant bien trop de personnes négligent ce critère de base incontournable et indispensable qui aura des répercutions sur l’ensemble du projet. Ils partent dans tous les sens ou fournissent beaucoup d’éléments totalement désorganisés voir incomplets.
  2. Ensuite répondre à ces questions élémentaires :
  3. * Quel est le type de site que vous souhaitez réaliser ? – vitrine – catalogue – e-commerce – blog professionnel ? * Quel est l’objectif ? * A qui s’adressera t’il ? * Avez-vous réalisé un audit de vos concurrents locaux, même minime ? * Avez-vous définit un budget ?, etc ..
  4. Rédiger un cahier des charges même de 2-3 pages sera précieux.
    Il présentera votre projet et vos attentes. Plus il sera précis, mieux ce sera.(voici un guide pertinant et très instructif qui vous y aidera – PDF ).
    Prendre en compte ces critères dès le début permet de réduire les coûts et délais de réalisation causés par de nombreuses modifications durant le développement du projet.
    De plus, si vous répondez « oui » à ces critères, il sera possible d’avoir une vue globale et technique pour vous donner une estimation de délais et de coût de réalisation de votre projet.
le cahier des charges du projet

Les bases de votre projet

flèche étape 2
écran la stratégie du projet

La stratégie

II – Réflexion avant l’action

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?

Pour viser juste il faut être « bien armé » : très bien organisé, rigoureux et ne pas vouloir aller plus vite que la musique ..
Mais prendre en compte également un certain nombre de paramètres. Il est donc important de réaliser (si votre budget le permet) une étude concurrentielle pour vous donner les meilleures chances de réussite en vous différenciant de vos concurrents, autant graphiquement qu’en proposant un concept original et des fonctionnalités uniques.
Cette mini étude de marché sera bénéfique en de nombreux points. Connaître son marché, sa cible et vos concurrents sont de vrais atouts stratégiques.
Par contre, si vous souhaitez créer votre projet « à la va vite » sans réflexions en amont dès l’étape 1, ce serait une (grosse) erreur qui aura des conséquences par la suite.
« On récolte ce que l’on sème..» À méditer..

flèche étape 3

III – Architecturer l’information du site

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?

C’est l’ergonomie générale de votre site.
Appelée aussi UX Design pour User eXpérience (expérience utilisateur).
C’est agencer les différents blocs d’informations que vous souhaitez mettre en avant sur votre site.
Cette organisation est cruciale car c’est aussi grâce à elle que vos visiteurs auront envie de rester sur votre site et consulter vos informations, et bien sûr revenir de temps en temps.
Dans le pire des cas, si votre ergonomie est un foutoir, il y a des grandes chances que vos visiteurs ne reviennent pas .. 🙁
Donc prendre son temps là aussi est important à cette étape autant que le Design graphique qui est l’étape suivante.

écran le prototypage du projet

Le prototypage

flèche étape 4
écran le design du site web

Le design web

IV – La création graphique du site

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?
La conception du design graphique est au site web ce que la décoration intérieure et extérieure est à une maison.
Elle représente votre «identité», l’image de votre entreprise !
Etape très très importante, car c’est la première chose que vos visiteurs auront sous les yeux …
Donc autant réussir à séduire vos visiteurs et qu’ils se sentent à l’aise en venant sur votre site. Ne pas rater cette première étape est incontournable !
(Je design sur Mac OSX avec Affinity Photos / Designer et Photoshop, Illustrator, InDesign de la suite Adobe Master Collection CC / CS5/6 et Sketch pour le design d’interfaces d’applications mobiles).
flèche étape 5

V – L’intégration Responsive web design

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?

C’est l’ergonomie générale de votre site. Appelée aussi UX Design pour User eXpérience (expérience utilisateur). C’est agencer les différents blocs d’informations que vous souhaitez mettre en avant sur votre site.

Cette organisation est cruciale car c’est aussi grâce à elle que vos visiteurs auront envie de rester sur votre site et consulter vos informations, et bien sûr revenir de temps en temps.

Dans le pire des cas, si votre ergonomie est un foutoir, il y a des grandes chances que vos visiteurs ne reviennent pas .. 🙁
Donc prendre son temps là aussi est important à cette étape autant que le Design graphique qui est l’étape suivante.

écran responsive design compatible tout écrans

Intégration Responsive Web Design
(Html5-Ccc3 Javascript)

flèche étape 6
écran de conception et modélisation du projet

La conception / modélisation

VI – Analyses et conception

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?
C’est l’une des 4 parties la plus importante et délicate de votre projet car c’est ici que l’informaticien ou le développeur web va analyser avec précision la demande que vous aurez exprimé dans le cahier des charges.

En général il utilisera le langage UML pour modéliser et concevoir le projet grâce à des diagrammes qui pourront être compris par tous !
C’est beau l’informatique 🙂 !

On pourra également lire les spécifications fonctionnelles et règles de gestions que le projet devra respecter.
* Analyse du cahier des charges techniques / * Diagrammes de l’application, des Cas d’Utilisations, de Séquences, de Classes et modélisation de la base de données de votre site.
Au final, c’est le coeur de votre site web, comme un moteur l’est pour une voiture.

flèche étape 7

VII – Le Codage informatique du site

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?

Le codage est le développement informatique des fonctionnalités de votre site web, appelée aussi « développement », qui est divisée en deux parties.

  1. Le Front-office : partie publique, ce que voient les visiteurs sur votre site (partie publique).
  2. Le Back-office : partie privée invisible de vos visiteurs, seulement par vous, qui vous pemettra de le mettre à jour.

Suivants les projets, j’utilise les outils suivants qui me permettent de réduire les coûts et les délais de réalisation sans faire de compromis sur qualité et la sécurité professionnelle du site.

  • Fait « main » de A à Z sans CMS ni Framework mais architecturé en MVC.
  • L’incontournable CMS : WordPress
  • Le très rapide Framework PHP MVC : CodeIgniter

Actuellement en veille de technos (Mai/juin) sur l’utilisation du tout neuf et très prometteur outils de création de sites web le framework PHP MVC Laravel.
Le but de la pratique est de porter mon site actuel sur cet outils très plébicité actuellement qui vitamine PHP (Front et Back-Office).

Suivra pour Juin la connaissance du solide et performant CakePHP puis du très populaire Symfony, utilisé par de très nombreuses sociétés dans le monde tout comme, son concurrent direct Zend Framework, tous deux destinés aux moyens et gros projets.

écran le développement informatique code du site

Le Développement web

flèche étape 8
écran tests unitaires et débuguage du code

Les test unitaires et validations

VIII – La Méthode Agile / Scrum

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?
La méthode Agile n’est en vérité pas une seule méthode mais des méthodes Agiles. Elles s’appliquent à divers types de projets.
Les deux méthodes Agiles les plus connues en France sont :
la méthode Scrum (1996) et la méthode XP, pour Extreme programming (1999).
Scrum dans la méthode agile ce sont 4 valeurs fondamentales  : L’équipe , l’application, la collaboration, l’acceptation du changement.
Agile, c’est une approche un peu plus “japonaise” du besoin. Dans un monde occidental, on cherche à produire avant de se préoccuper de le vendre.
L’approche japonaise et de produire un produit correspondant aux besoins et au prix du marché !
flèche étape 9

IX – L’optimisation et la Production

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?
L’optimisation du référencement se fera également avant la mise en ligne effective du site pour plusieurs raisons :

Analyse des meilleurs mots clés avec Google Analytics et Google Adwords et corrections des titres sous-titres et contenus des articles en fonction de ces informations.

C’est pour cela que la plupart du temps vous entendrez que le référencement se prend en compte avant même de designer graphiquement un site web.

écran optimisation production

L’optimisation pour la production

flèche étape 10
écran les services web marketing et seo

Le référencement SEO

X – Les services web marketing

> Mais comment faire ? à quoi ça sert ? est-ce bien utile ?
L’optimisation du référencement se fera également avant la mise en ligne effective du site pour plusieurs raisons, mais entre autres :
– Analyse des meilleurs mots clés avec Google Analytics et Adwords.
– Corrections des titres sous-titres et contenus des articles en fonction de ces résultats donneront tout le potentiel pour être mieux positionné dans les résultats d’une recherche sur Google.

C’est pour cela que la plupart du temps vous entendrez que le référencement se prend en compte avant même de designer graphiquement ou coder un site web. Cette étape est en lien direct avec l’étape 2 (citée plus haut) : la stratégie de contenu web et mobile.