Comment réussir la conception d'un site web professionnel ?

Les étapes clés d'un blog, d'un site web vitrine
ou e-commerce réussi et visible sur Google !


Projet

flèche gise horizontale
polygone Le Projet

> Cahier des charges
> Définir la stratégie
> Planning du projet
> Audit e-marketing


flèche verticale grise

Architecture

flèche gise horizontale
polygone L'architecture

> Taxonomie
> Architecturer l'information
> Prototyper le projet
> Designer la charte graphique
> Intégration HTML5 - CSS3
> Intégration Mobile

flèche verticale grise

Conception

flèche gise horizontale
polygone la conception

> Etude et analyse
> Conception UML
> Modélisation BD données
> Choix Technologiques
> Codage de l'appication web
> Tests unitaire et débogages

flèche verticale grise

Optimisation

flèche horizontale transparente
polygone L'optimisation

> Optimisation des pages
> Référencement SEO
> Intégration d'outils e-Mailing
> Présences sur les Réseaux Sociaux
> Support d'utilisation PDF / Vidéos
> Maintenance du site

flèche verticale transparente

remonter haut de page Remonter

Stratégie


cercle graphique la stratégie web

Définir et mettre en oeuvre la stratégie correspondante pour atteindre les objectifs du projet.

Design


cercle graphique le Design web

Concevoir la charte graphique, design du site, d'après le prototypage et effectuer son intégration { HTML Responsive } Mobile first oblige !

Codage


cercle graphique Développement web

Le Codage c'est le développement informatique pur de l'application web ou du module à concevoir avec un Framework, avec ou sans CMS (à la main).

Production


cercle graphique la production web

Optimisation du référencement mots clés, titres, contenus, Standards du W3C, Services e-Marketing

remonter haut de page Remonter


Vous avez un projet de création ou refonte de site web ?

et voulez atteindre vos objectifs en réduisant les coûts ?



Suivez le guide

Le projet


écran Le Projet

I - Préparer les bases de votre projet.

> Pourquoi ?, comment faire ? à quoi ça sert ?

1 - La Base de votre site c'est vos contenus (textes, photos, illustrations, logos, videos, fichiers PDF, PPS et autres.. URL ) sans cela à quoi bon créer un site web avec du vide ? Il apparaît donc évident qu'ils doivent tous être prêts ou en phase de l'être ou mieux : être tous classés dans des dossiers nommés aux rubriques de votre futur site web, pour une organisation optimale !
2 - Ensuite répondre à ces questions élémentaires :
* 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 ..
3 - 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.

remonter haut de page Remonter

étape 2

II - Réflexion avant l’action

> Pourquoi ?, comment faire ? à quoi ça sert ?

Pour viser juste il faut être bien armé :-) ..
Mais prendre en compte également un certain nombres 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 conncurrents, autant graphiquement qu'en propsant un concept original et des fonctionalités uniques.
Cette mini étude de marché sera bénéfique en de nobreux 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 qu’on sème..» A méditer..

La stratégie


écran La stratégie

remonter haut de page Remonter

étape 3




écran Le prototypage

Le prototypage

III - Architecturer l’information du site

> Pourquoi ?, comment faire ? à quoi ça sert ?

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.


remonter haut de page Remonter

étape 4

IV - La création graphique du site

> Pourquoi ?, comment faire ? à quoi ça sert ?

La conception du design graphique est au site web ce que la décoration intérieur et extérieur 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 réalise cette prestation sur Photoshop et autres logiciels de la suite Adobe Master Collection CS5/6 sur un iMac 24’’).




écran Le design web

Le design web


remonter haut de page Remonter

étape 5




écran l'intégration HTML5

HMTL5-CSS3 / jQuery
Responsif Adaptatif

V - L’intégration HTML pour tous les écrans !

> Pourquoi ?, comment faire ? à quoi ça sert ?

C'est l'intégration du design graphique des pages de votre site réalisé dans un logiciel comme Photoshop pour en faire les pages web (HTML) de votre site.
Et autant faire les choses bien jusqu'au bout en intégrant la technique du Responsive Design qui permet d'adapter le site à tous les médias qui le consulteront comme les Smartphones, tablettes, ordinateurs portables.
C'est une réelle valeur ajoutée pour vos visiteurs croyez-moi ! C'était la grosse tendance de 2013 qui devient aujourd'hui un standard.
Lorsqu'on sait que les connexions internet ont explosés grâce aux mobiles en 2013 innutile de s'étonner de l'importance d'avoir un site Responsive Design aujourd'hui, car l'avenir c'est le mobile, pas un ordinateur de bureau.

Jugez par vous-même avec votre smartphone ou votre tablette !
ou réduisez la fenêtre de votre navigateur et vous verrez que même très petite le site sera entièrement lisible et navigable dans son intégralité !


remonter haut de page Remonter

étape 6

VI - Analyses et conception

> Pourquoi ?, comment faire ? à quoi ça sert ?

C'est LA partie 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 comprits par des alergiques à l'informatique ! 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 une moteur l'est pour un voiture.




écran Conception/modélisation

Conception / modélisation


remonter haut de page Remonter

étape 7




écran Le Développement web'

Le Développement web

VII - Le Codage informatique du site

> Pourquoi ?, comment faire ? à quoi ça sert ?

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.


remonter haut de page Remonter

étape 8

VIII - La Méthode Agile / Scrum

> Pourquoi ?, comment faire ? à quoi ça sert ?

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é !




Ecran La Méthode Agile / Srum

Tests unitaires validations


remonter haut de page Remonter

étape 9




écran l'intégration HTML5

Le référencement naturel SEO

IX - L’optimisation et la Production

> Pourquoi ?, comment faire ? à quoi ça sert ?

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 Adwords et corrections des titres sous titre et contenus de 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.


remonter haut de page Remonter

étape 10

X - Les services web marketing

> Pourquoi ?, comment faire ? à quoi ça sert ?

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 Adwords.
Corrections des titres sous titre et contenus de articles en fonction de ces résultats donneront tout le potentiel pour être mieux positionné sur le PageRank de 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.




Ecran Le référencement SEO

Le Digital Marketing


remonter haut de page Remonter

Multimédia animations Flash


écran multimédia et animations Flash

> Animations Flash pour sites web.
> Création originale de A à Z d'un CD-Rom interactif multimédia (technologie Flash 5 en 2005).
Voir le CD-ROM Interactif multimédia "Jouable", ma 1re création conçu pour CABINES (2005).

> Modélisation et animations sur 3DS Max avec montage vidéo sur Première.
Voir le film MP4 Final de ma 1re création sur 3DS MAX et Première (2005).

remonter haut de page Remonter