Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

No description
by

Hakkou Amal

on 7 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of

La Structure de la page web
LE GABARIT:
Définition :
La charte graphique est un document de travail qui contient l'ensemble des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité visuelle d'une organisation, d'un projet, d'une entreprise.
Les 3 régles de la charte graphique
Accessibilité
Lisibilité
Ergonomie

Les couleurs :
Plaire est une
affaire de goût
, et votre site internet ne pourra pas plaire à tout le monde. L’important est de vous
assurer que votre choix colorimétrique est lisible, pour cela, vous pouvez consulter des sites spécialisés de la
couleur et accords chromatiques :
> www.morecrayons.com/palettes/webSmart/colorcube.php : palette couleurs…
> www.pourpre.com : perception des couleurs, nuanciers…


Les couleurs doivent être au service de la lisibilité et de la convivialité.
Le Bandeau
Il comportera le logo,la baseline ou slogan, et l'objet de votre site.On peut aussi y trouver les menus rapides (Aide, Plan, contact...), les menus de navigation du site ..

un bandeau trop chargé ou comportant trop d'animations fait fuir l'internaute.
Une image trop lourde ralentit l'ouverture des pages.
Les menus
Les menus commun se placent généralement en haut à gauche car c'est le seul endroit toujours visible peut importe la
résolution de votre écran.

La clarté des mots et l'espacement entre les rubriques est un point essentiel à l'ergonomie de la navigation.

un sous-menu maximum pour chaque rubrique.
Attention au choix du déroulement des sous-menus, ils sont parfois mal gérés par certains navigateurs.
La Charte Graphique

But et Intérêts
de la charte graphique
La création de la Matrice graphique
Charte graphique internet = règles (accessibilité, lisibilité, ergonomie) + identité graphique
UNIVERSITE HASSAN II MOHAMMEDIA-CASABLANCA
FACULTE DES SCIENCES JURIDIQUES, ECONOMIQUES
ET SOCIALES

Réalisé par :

HAKKOU Amal
SADI MOHAMED
SMOUNI HAMZA
MELLOULI ANAS

Sous l'encadrement :
Mr CHARANI Ettaibi

Pour donner à l’utilisateur des repères au sein d’un site et
faciliter sa visite, il est impératif de développer une cohérence
pour l’ensemble de vos pages. Lors de la conception du site
web, il faut établir (ou faire établir) une sorte de guide à
l’attention des personnes qui vont le réaliser, voire l’alimenter
ou le modifier : la charte graphique.

Plan :
Définition de la charte graphique
But et Intérêts de la charte graphique
Les 3 régles de la charte graphique
La création de la Matrice graphique
La Structure de la page
Conclusion
conserver une cohérence graphique dans les réalisations graphiques d'une même organisation, projet ou entreprise
L'intérêt est double :

L'identité graphique reste intacte quelles que soient les réalisations graphiques

La charte graphique permet au récepteur d'identifier facilement l'émetteur


L'identité graphique
L'identité graphique doit prendre en considération :
- la sémantique des couleurs
- le vécu collectif
- l'imaginaire populaire
c'est le format de votre site

actuellement, le standard est de 960px de largeur car la majorité de nos écrans sont des 21 pouces soit 1024 px de large.

le téléchargement de vos pages doit s'effectuer rapidement pour ne pas perdre les internautes. Essayez de respecter le poids de 60ko / page.
Conteneur global aligné à gauche,
largeur fixe 750px,
en-tête, contenu et pied de page.

Menu vertical à gauche,
simulation de colonnes de même hauteur grâce à la technique des colonnes factices
En-tête, corps et pied de page séparés,
menu vertical à gauche,
colonnes factices,
largeur fixe 750px

colonnes factices,
colonnes latérales positionnées en float
Exemple :
Bandeau du site web de notre université
Les menus rapide
Entre 3 et 5 maximum, au delà ils n'ont plus d'intérêt et entraînent une confusion.

Des pictos peuvent être utilisés mais soyez prudent quant à leur compréhension.

placer les "menus rapides" dans le bandeau, si le fond le permet, ou en haut à droite de votre page.
Page Contenu
Il est important de faire des pages concises qui évitent de longues barres de défilement. elle constituent généralement à 90% l'essentiel de votre site web .

- Contenu

- Polices

- Titres


- Images

- Les liens
Ligne = 100 caractères
Paragraphes = 3000 caractères
Cependant, si vous voulez des textes plus longs, entre 3 000 et 10 000 caractères, pensez à faire des renvois réguliers
vers le haut de page grâce aux ancres.
quelques polices de caractère compatibles aux différents navigateurs : Times New Roman, Arial, Courier,
Helvetica, Georgia, Verdana …
pour une personne qui ne dispose pas d'une vision d'ensemble de la page, le fait qu'un texte soit plus grandou plus petit qu'un autre, centré sur la page ou de couleur différente, ne l'aide malheureusement pas à comprendre sa fonction réelle dans le contenu.
trop de textes ou trop de mots colorisés annulent l'objectif du départ, à savoir permettre de mettre en évidence la hiérarchisation du contenu ou l'importance de certains passages.
- elles doivent être clairement séparées du texte et avoir préalablement été enregistrées en format web.

utilisez une couleur pour les faire ressortir.
au survol, privilégiez le changement de couleur ou le soulignement.
Le Pied de page
c'est la derniére étape de la conception de la page web consiste à mettre en place le bas de la page ,ou apparaîtront les liens secondaires , les mention légales, technologies utilisées (licences libres Creative commons, standard w3C...)
Conclusion
N'oubliez pas que la charte graphique, c'est l'art et la manière de rendre votre site internet ergonomique, facile et
agréable à consulter.
Exemple récapitulatif
Netaya : le portail des
Nouvelle technologies
Full transcript