Titre professionnel – Designer Web mai 2019

Introduction

• le contexte ;
• la méthodologie.

Projet client : Pierre Schmoll

• élaboration du design graphique ;
• réalisation d'outils de communication numériques ;
• gestion et suivi du projet.

Mes autres travaux

• Le 87 dans l'assiette ;
• Portfolio ;
• La Botte à idées ;
• Autres réalisations.

Hello,

Contexte :

Formation BGE "Designer Web"

+

Stagiaire motivée

=

présentation d'un site web réalisé sous word press !

Oui, mais comment ?

Compétences clés référentiel

Organisation

Méthodologie

Pratique

Binôme : Sidonie Fanjeaux.

Durée du projet : 5 mois.

Nombre de lignes de code : 2000 environ.

Nombre de lignes effacées : incalculable.

Projet client réalisé dans le cadre de la formation BGE "Designer Web"

http://laetitia-he.bge-pedagogique.fr/wp/pierre-schmoll_wordpress/

1. Pierre Schmoll

2. Stratégie

3. Conception graphique

4. Intégration

5. Conclusion : la vie du projet

Pierre Schmoll : freelance en communication digitale depuis avril 2018 en Alsace.

Trois domaines d'activité :

1. Rédaction web

2. Community Management

3. Photo et vidéo

Rédaction de contenus personnalisés :

• articles de blog,
• fiches produits,
• newsletters/emailing,
• autres...

Présence sur événements avec matériel :

• appareil photo,
• caméra,
• casque de réalité augmentée.

Gestion de communautés multiples sur toutes les plateformes de communication et animation des différents réseaux sociaux.

Pourquoi un site web ?

Un site web qui le présente et le représente

+

Intégration d'un portfolio détaillant les réalisations passées

+

Trouver des partenariats et des contrats dans les domaines d'activité décrits

=

être visible

2. Stratégie

Comment traduire les besoins du client à travers son site web ?

• Concurrence

• Cibles

• Structuration

• Cahier des charges

• Keywords

• Référencement

Concurrence et cibles

Utilisateurs ciblés :

Tout sexe, tout âge, tout domaine. Start-up, petites et moyennes entreprises, associations, agences de communications, blogs.

Les attentes :

• rendre accessible le monde de la communication,

• offrir du conseil,

• rapidité d'exécution,

• plume originale,

• devis personnalisés.

Étude de marché

Trois sites ont été retenus :

• Aurélie Bernard : rédactrice web spécialiste SEO.

https://www.redaction-web-seo.fr/

• Bastien Péan : social manager et content strategist.

http://www.bastienpean.com/

• Damien Furst : freelance en marketing/communication.

http://damienfurst.com/

Keywords et référencement

Les mots clés que nous avons retenus après l'étude de marché :

3. Photo et vidéo

2. Community Management

1. Rédacteur web Strasbourg

photo

vidéo

reportage

vidéo reportage

reportage photo

cliché

digital

community manager

communication digitale

social media

réseaux sociaux

gestion réseaux sociaux

animation réseaux

rédacteur web

blogger

blog

emailing

rédacteur freelance

chroniqueur web

interview

newsletters

Proposition nom de domaine : redacteur-web-strasbourg.fr

Disponibilité : OK

Avis client : OK

Structuration et cahier des charges

Wireframes

Arborescence

Dossier de conception client

• rassemblement de tous les éléments dans un dossier cahier des charges pour validation client.

3. Conception graphique

Quel visage donné au projet de Pierre Schmoll ?

Proposition de maquette

Charte graphique

Mood board

Mood Board

Charte graphique

Maquette

http://laetitia-he.bge-pedagogique.fr/img/maquette-pierre-schmoll-lh.pdf

4. Intégration

Donner vie au projet

• Création d'un thème wordpress from scratch

• animer et rendre responsive le site web

• Intégration HTML/CSS

• Création d'un backoffice pour le client

Intégration HTML/CSS

Utilisation du logiciel Brackets et de l'extension Emmet.

Création d'un thème

Utilisation du logiciel FTP Filezilla et du CMS WordPress

Backoffice

Création de Custom Post Types et de champs ACF

http://laetitia-he.bge-pedagogique.fr/wp/pierre-schmoll_wordpress/wp-admin/post-new.php?post_type=references

Responsive et animation

La rencontre du modèle FlexBox et du javascript

http://laetitia-he.bge-pedagogique.fr/wp/pierre-schmoll_wordpress/

4. Conclusion

Quelles contraintes ?

La mise en place de la méthodologie

Maîtrise des langages informatiques

Quelles solutions ?

Une veille constante

Ne jamais oublier l'idée de départ

La vie du site

Le client a choisi le site de ma binôme. La production de ce dernier n'est pas terminée. Mais mon site est pratiquement finalisé si le client a besoin d'un site en urgence.

D'autres aventures...

La botte

à idées

Le 87 dans l'assiette

Autres réalisations

Portfolio

Le 87 dans l'assiette

Stage du 28/02/2019 au 02/05/2019.

Missions principales :

• refonte maquette du site existant ;
• création de supports de communication.

http://laetitia-he.bge-pedagogique.fr/passage-titre/87_dans_l_assiette/

Portfolio

Laëtitia Herbaut

Graphiste print & web

Création d'un site sous WordPress à partir du modèle HTML 5 Blank

http://laetitia-he.bge-pedagogique.fr/wp/portfolio_wordpress/

La botte à idées

Création d'entreprise

• création idendité visuelle ;
• maquette du site vitrine.

https://xd.adobe.com/view/0253846b-f2c3-4a8c-52f7-76007dc43da9-7462/screen/fe81c53f-1b39-49bf-be4a-6dffb7e52377/accueil?fullscreen

Autres réalisations

Logotype

Promotion événement

Logotype

Avatar personnel

http://laetitia-he.bge-pedagogique.fr/passage-titre/bebe_bientot/bebe-bientot-charte-web-blur.pdf

Pour la suite...

Merci !