Méthodologie de sographik pour la création d'un site drupal

1. MÉTHODOLOGIE DE TRAVAIL
CRÉATION DE SITE WEB

2. 1.LE CONTENU EST ROI
CRÉATION DE L’ARBORESCENCE
- Penser l’architecture pour vos visiteurs
- Choisir les bons mots
- Catégoriser
- Structurer
- Hiérarchiser
- Ne pas oublier les contraintes du web
L’arborescence va nous permettre de
visualiser schématiquement les diffé-
rentes pages du site et les principaux
liens qui les unissent
A validation de l’arborescence, on peut passer à l’étape suivante...

3. 2.STRUCTURE DES PAGES PRINCIPALES
TYPES DE CONTENU / AUTRES PAGES...
A PARTIR DU CONTENU :
- Lister les pages principales
- Lister les types de contenus du site : décrire les champs de chaque type de contenu
- Lister les types de page views (type d’affichage : grid, slideshow, block...)
SPÉCIFICATIONS TECHNIQUES :
- Lister les fonctionnalités du site
- Décrire les scenarii de navigation
A partir de toutes ces informations validées, nous pourrons passer au prototypage...

4. 3.RESPONSIVE WEBDESIGN
PROTOTYPAGE HTML + CSS
RESPONSIVE WEBDESIGN = MOBILE FIRST
- Il faut toujours penser d’abord à la navigation
sur smartphone !
- Nous déclinerons tous les types de pages principales
dans un prototype du site en html et css à partir du
framework bootstrap.
- Ainsi, nous verrons comment se comportent tous nos
gabarits de pages sur les différents supports de navigation
- A cette étape, nous pourrons donc tester la navigation
complète du site et choisir les détails du parcours utilisa-
teur jusqu’à satisfaction.
Une fois le prototypage validé, nous pouvons créer les maquettes graphiques...

5. 4.MAQUETTES GRAPHIQUES
CRÉATION DU WEBDESIGN
En s’appuyant sur les prototypes de pages validés :
PAGE D’ACCUEIL
Nous proposerons dans un premier temps une maquette
graphique de la page d’accueil.
Cette maquette pourra être retravaillée si nécessaire. Elle
sera le point de départ pour définir l’ambiance graphique du
site.
AUTRES PAGES PRINCIPALES DU SITE
A validation du webdesign de la page d’accueil,
nous déclinerons certaines pages principales du site.
LA PAGE «GÉNÉRALISTE»
Cette page sera un répertoire de tous les outils graphiques
nécessaires pour la déclinaison du site : boutons, champs
de formulaires, liens, h1, h2, h3, h4, citations...
Lorsque les maquettes graphiques sont validées, l’intégration peut débuter...

6. 5.L’INTÉGRATION
LE THÈME DRUPAL
Cette étape débutera une fois que le développement du site
aura bien avancé...
NOTRE STARTERTHEME :
- Création d’un sous-thème Bootstrap
- Création des variables bootstrap
- Création des feuilles de styles
...etc
COMPATIBILITÉ
Le site sera compatible dernières versions des navigateurs
courants (IE, Firefox, Chrome, Safari) et N-1.
Pour les autres versions de navigateurs, nous assurerons
uniquement la bonne lecture, en appliquant une dégrada-
tion «élégante».
Fin de projet !