Design + Développement. Web. Gunther Groenewege CFA - IGS

Dimension: px

Commencer à balayer dès la page:

Download "Design + Développement. Web. Gunther Groenewege CFA - IGS"

Jean-Bernard St-Amand
il y a 8 ans
Total affichages :

1 Design + Développement Web Gunther Groenewege CFA - IGS

2 Bonjour g-design.net //

3 Combien de temps prennent les tâches de CM au quotidien? 80% ou plus 20% ou moins 26% 24% 60% à 80% 16% 21% 13% 20% à 40% 40% à 60 %

5 Étudier le déroulement d'un projet web. Pouvoir conseiller et aider pendant la création d'un site Internet. Savoir mettre l'expérience utilisateur au centre des préoccupations.

6 Les fondements Expérience utilisateur Wireframes Introduction HTML & CSS

7 groenewege.com/cours/2015

8 Les fondements

9 Le Web réseau - protocoles - langages

10 L accès au web Le serveur web envoie la page web l internaute se connecte à internet et demande une adresse web Les serveurs DNS indiquent le numéro du serveur web

11 HTML & CSS <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <p>hello World</p> </body> </html> body { margin: 0; font-size: 16px; } p { color: #bada55 } a { text-decoration: none; }

12 La programmation côté serveur l internaute cherche le serveur consulte la base de données et les résultats sont ajoutés au HTML le navigateur affiche la page

13 Typologie des sites Web

14 Présence Campagne marketing Source de contenu Effectuer des tâches

15 Présence Campagne marketing site vitrine site événementiel site catalogue site institutionnel site e-commerce Source de contenu Effectuer des tâches blog réseau social application web

16 Design patterns

17 Les pages types La mise en page Les modules

18 Page d accueil

19 Résultats de recherche

20 Page de produit

21 Mise en page

22 Navigation

24 Le web mobile

25 1,2 milliard de personnes accèdent au web à partir d un appareil mobile 44% des français possèdent un smartphone Entre 15 et 20% du trafic internet est mobile

26 Un site mobile

27 Responsive web design

29 Un projet Web

30 Cascade vs Agile Brief Brief Recherche Découpage Design! Développement Validation finale

31 Découverte Expérience utilisateur + architecture d information Design + prototypes Développement Lancement et suivi

32 Le cahier des charges

33 Un cahier des charges est un document écrit, structuré, qui décrit de façon exhaustive les spécifications d un projet correspondant à un besoin. Un cahier des charges, outre les spécifications, peut aborder les modalités d exécution du projet ainsi que les objectifs à atteindre. Le cahier des charges est fourni par l émetteur du besoin, c est à dire le client.

34 Identité Qui êtes-vous? Décrivez votre société, les services et/ou produits que vous souhaitez présenter sur votre site Internet.

35 État des lieux S'agît-il d'une refonte ou d'un site existant? Quel contenu existe déjà?

36 Objectifs Pourquoi souhaitez-vous réaliser un site Internet? Quels sont vos objectifs pour le site par ordre d importance? Quels sont vos critères pour évaluer le succès du projet?

37 La cible A qui s adresse votre site? Décrivez le public de votre site de la manière la plus détaillée possible (tranche d âge, familiarité avec Internet, catégorie socio-professionnelle...)

38 Actions et fonctionnalités A votre avis, comment les visiteurs vont utiliser votre site Internet? Qu est-ce qu ils comptent trouver / faire sur ce site? Quelles fonctions souhaitez-vous voir apparaitre sur le site?

39 La concurrence Pourquoi un visiteur choisira votre site plutôt que celui du concurrent? Merci de décrire vos principaux concurrents et leur type de présence sur le Web.

40 Design Quand un internaute consulte pour la première fois le site, comment souhaitezvous qu il perçoive votre société? Pouvez-vous citer quelques exemples de sites dont vous aimez particulièrement le style graphique ou le mode de fonctionnement?

41 Technique Avez-vous des exigences sur les technologies à utiliser? Avez-vous déjà un nom de domaine et hébergement?

42 Planning Avez-vous une date de lancement en tête? Si oui, pourquoi cette date?

43 Budget Quel est le budget maximum à ne pas dépasser pour ce projet?

44 Dans le cas d'une refonte Quels sont les éléments qui fonctionnent bien et ceux qui doivent être améliorés? De quelle manière les nouveaux éléments doivent-ils aider à atteindre les objectifs du site ou les objectifs de vos visiteurs?

45 Pratique

46 Site éditorial Communauté en ligne

Documents pareils

10 points clés pour bien démarrer votre projet web

10 points clés pour bien démarrer votre projet web Un cahier des charges pour cerner votre projet Afin de vous aider dans la réflexion de votre futur site Internet, ADVEO a conçu une check-list avec les