Design & Développement Web

ARBORESCENCE. Accueil. Présentation. Type de produits. Catégorie 1. Produit 1. Produit 2. Produit 3. Catégorie 2. Produit 1. Produit 2. Produit 3. Services.
3MB taille 23 téléchargements 161 vues
Marketing Digital– Partie I Leçon Pré-enregistrée

Design & Développement Web

Présenté par :

Diane DUPEYRAT

Au sommaire Qu’est-ce qu’Internet Fonctionnement site web

HTML ET CSS Editeur de texte Mettre un site en ligne

Qu’est-ce qu’Internet ? DÉFINITIONS Internet Est un réseau mondial de télécommunication reliant entre eux des ordinateurs ou des réseaux locaux et permettant l'acheminement de données numérisées de toutes sortes (messages électroniques, textes, images, sons, etc.).

Le Web (World Wide Web) Est un système « hypertexte » public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur Internet, des pages accessibles sur différents sites. L’image de la toile d’araignée vient des « hyperliens » qui lient les pages web entre elles

Fonctionnement d’un site web Un site Web est composé de différents langages informatiques qui sont incontournables et universels aujourd'hui. Ils sont à la base même du Web.

Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991 …

Les navigateurs Web que vous connaissez tous sont des programmes qui permettent de décrypter ces langages et de faire apparaître son contenu à l’écran.

Fonctionnement d’un site web HTML & CSS HTML (HyperText Markup Language) Est apparu en 1991 lors du lancement du Web Son rôle est de créer et gérer le contenu. Le HTML définit le « fond » ou contenu de votre page.

CSS (Cascading Style Sheets, aussi appelées Feuilles de style) Est apparu en 1996 et vient compléter le HTML. Son rôle est de gérer l'organisation des éléments sur votre page, l'apparence celle-ci. Le CSS définit la « forme » et permet d'arranger le contenu.

Fonctionnement d’un site web 5 ÉTAPES D’UN PROJET WEB

01 ANALYSE

03 MISE EN ŒUVRE

02

CONCEPTION

05 REALISATION

04

DESIGN

Les étapes d’un projet web

PHASE 1 ANALYSE

Les étapes d’un projet web 1. OBJECTIFS DE VOTRE SITE À quoi votre site Web servira-t-il? À faire la promotion de votre entreprise À acquérir de nouveaux clients par l'entreprise de votre site Internet À faciliter votre travail, en faisant visiter des lieux ou en montrant un catalogue de produits, par exemple À recruter du personnel À diffuser de l'information générale

À faire un concours, une promotion…

Les étapes d’un projet web 2. CIBLE Est-ce un site Internet B2C ou B2B ? Vous pouvez aussi identifier des catégories d'internautes cibles (classes d'âge, catégories professionnelles etc.) Dans quelle région (local, national, international) ?

Souhaitez-vous communiquer avec : Des clients potentiels ? Des fournisseurs ? Les membres d'une association ? De futurs employés ?

Les étapes d’un projet web 3. ANALYSE DE SON MARCHÉ

L'analyse de son marché sur Internet est une étape importante Analyse de la concurrence : votre marché est-il peu ou très concurrentiel ?

Analyse du trafic : Estimation du volume de recherches …

Les étapes d’un projet web Budget

4. DÉFINIR UN BUDGET

Comme pour la création d'entreprise, la création d'un site Internet nécessite de mettre en place un business plan. Même un "petit site" a un coût et il vaut mieux l'anticiper. Identifier le budget que vous souhaitez allouer à votre site Internet, vous pouvez ensuite le décomposer en : Coûts de création du site Internet (développement) = un coût fixe Coûts d'hébergement (coûts mensuels ou annuels) Coûts de maintenance et mise à jour (si vous passez par une agence web ou cabinet de référencement) = coûts mensuels

Coûts de référencement (si vous passez par une agence web ou cabinet de référencement) = coûts annuels ou mensuels Coûts de promotion de votre site web

Les étapes d’un projet web

PHASE 2 Mise en oeuvre

Les étapes d’un projet web 1.LE KIT DU DÉVELOPPEUR Créer son site sur son ordinateur : Un ordinateur à jour Navigateur – Chrome, Firefox, IE, Safari.. Logiciel (creation de site web) Une connexion Internet

Un nom de domaine (www.domaine.com) Un serveur pour stocker vos fichiers sur Internet

Un logiciel pour envoyer vos fichiers sur le serveur Du temps et (un peu) d’argent

Les étapes d’un projet web 2.NOM DE DOMAINE Cherchez “nom de domaine” sur Google Godaddy.com Gandi.net OVH.com Register.com Environ 12 euros par an Achetez un “.com”(Mondial) ou “.pays” (National)

Achetez votre nom complet

Les étapes d’un projet web 3.HÉBERGEMENT (SERVEUR)

Chosissez un hébergeur Godaddy.com Gandi.net OVH.com

Les prix varient selon vos besoins (min 2euro/mois) Adresse email

Les étapes d’un projet web 4.LOGICIEL FTP Upload de fichier Programmes Cyberduck FileZila Identifiants serveur Ordinateur à gauche, serveur à droite Gardez un dossier de sauvegarde, et téléchargez celui en ligne avant d’uploader quoi que ce soit

Les étapes d’un projet web 5.LOGICIEL DÉVELOPPEMENT WEB Quel logiciel utiliser ? Il existe de nombreux logiciels dédiés à la création de sites web. MAIS vous pouvez utiliser un logiciel que vous connaissez tous : BLOC NOTE (photo)

Il y a cependant des logiciels plus puissants aujourd'hui, qu’on classe en deux catégories : Les WYSIWYG : Programmes qui se veulent très faciles d'emploi, ils permettent de créer des sites web sans apprendre de langage particulier (Mozilla Composer, Microsoft Expression Web, Dreamweaver) Les éditeurs de texte : Programmes dédiés à l'écriture de code. On peut en général les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les créateurs de sites web (Notepad++) !

Les étapes d’un projet web

PHASE 3 Conception

Les étapes d’un projet web 1.ARBORESCENCE

Produit 1 Catégorie 1

Produit 2

Présentation

Produit 3 Type de produits Accueil

Produit 1 Services Catégorie 2

Produit 2

Contact Produit 3

Les étapes d’un projet web

Les étapes d’un projet web

PHASE 4 Réalisation

Les étapes d’un projet web RÉALISATION

• HyperText Markup Language • contenu du site..

• Une personne à une tête • Une personne à un corps • Une personne à des pieds


Les étapes d’un projet web

PHASE 5 Design

Les étapes d’un projet web Responsive Web Design

• Une navigation simple • Un design pour nos gros pouces • Convertir les visiteurs en clients • Faites en sorte qu’on puisse vous trouver • CSS3, bootstrap, foundation, templates

Les étapes d’un projet web • Les types de fichier d’images • Où trouver les images • Utiliser des logiciels d’imagerie • Propriétés à respecter • Quelles dimensions d’image? • Optimisation – poids, aperçu, exportation • Ajouter du texte • Baguette magique, fond transparent • Coloriage, recadrage, rotation, etc.

Les étapes d’un projet web SUIVI

Les types de fichiers

• GIF (.gif) • Jpeg (.jpg) • Png (.png) • SVG (.svg)

Les étapes d’un projet web Des images gratuites

unsplash

Les étapes d’un projet web Les logiciels d’image

Les étapes d’un projet web Adobe Fireworks

Les étapes d’un projet web Couleurs & Tests • Appel à l'action (Call-to-action) • Contraste avec l’arrière pan • Couleurs vives • Orange • Rouge • Vert • Bleu • Violet • Rose • A/B Test

Les étapes d’un projet web Palette de couleur (Color Palette)

Les étapes d’un projet web Call-to-action

Les étapes d’un projet web Call-to-action

Les étapes d’un projet web • Gifs Animés • Adobe Flash

• Jquery • HTM5, CSS3

Les étapes d’un projet web HMTL – Bon et mauvais design

Les étapes d’un projet web HMTL – Bon et mauvais design

Les étapes d’un projet web HMTL – Bon et mauvais design

Les étapes d’un projet web HMTL – Bon et mauvais design

Cas d’école : mauvais design ne veut pas dire pas de trafic !!! - Craiglist - Koreus - Reddit …

Récapitulatif • • • • • • • • • • • •

Responsive Web Design – créé pour les pouces Les types de fichier – .gif .jpg .png .svg Ne vous faites pas poursuivre – achetez des images légalement Logiciel d’image – il en existe beaucoup, choisissez-en un! Outils et Paramètres– principales fenêtres flottantes Optimiser une image – aperçu, optimisation, exportation Modifier une image – baguette magique, remplissage, recadrage, rotation Couleurs & A/B Testing– gardez ce qui marche le mieux Flash vs JQuery – fait pour tous les supports, et pour le futur Partie visible – attention à ce qu’on ne voit pas Reciblage de vos pubs – reciblage est bon pour le CPC Travailler avec un web designer – regardez leur portfolio

Fonctionnement d’un site web PHASE IL EST VRAI QUE … 5 : SUIVI

Logiciel de creation de site web

Fonctionnement d’un site web PHASE IL EST VRAI QUE … 5 : SUIVI

Adobe Dreamweaver

Fonctionnement d’un site web PHASE IL EST VRAI QUE … 5 : SUIVI

Travailler avec des développeurs

• Connaissez vos objectifs à atteindre • Pensez S.M.A.R.T. : PLANIFIEZ • Faites une réunion avant de commencer • Fixez un délai et des étapes intermédiaires • Faites une réunion chaque semaine • Restez réaliste • C’est vous qui payez, c’est vous qui choisissez

Fonctionnement d’un site web PPC PUBLICITE IL EST– VRAI QUE …AU PAIEMENT PAR CLIC

Récapitulatif

• • • • • • • • • • • • • •

Pensez SMART avant de commencer – planifier puis construire Structure de base des fichiers – dossier images et fichiers .html HTML – introduction Codez votre site Code source – accessible sur tous les sites Lien hypertexte – entre vos pages et vers d’autres sites Intégrer des images – sur votre page web Les tags HTML importants – utilisés le plus souvent WYSIWYG / CMS – voir votre page directement Mettre votre site en ligne – Ordinateur, serveur, nom de domaine Nom de domaine – www.domaine.com Hébergeur web – la où mon site réside Logiciel FTP – Mettre mon site sur le web Travailler avec des développeurs – objectifs clairs, réunions

Contact Contactez-nous à tout moment

shawacademyFR

@shawacademyfr

[email protected]

FR : +33 1 73 44 33 09 CAN : +1 647 958 0168