apprendre rapidement a utiliser adobe photoshop par la pratique. devenez web-designer ! tutorial photoshop, exercice, formation, webdesign, skins, textures, infographie, pixel.


 ACCUEIL   PORTFOLIO   LOGICIELS   TUTORIELS   DOSSIERS 

Infographie

Photos gratuites sur le web

Dans cette article, un comparatif de 14 sites de photos hautes résolution libre de droits et une sélection de 284 liens vers d'autres sites de photos.

Les métiers et les écoles

Cette article vous propose un tour d'horizon des métiers et des écoles de l'art graphique par la description de chaque métier, les cursus scolaires possibles, les adresses des écoles et les sites internet des centres de formation en france, belgique et suisse.

logos : 1ere approche

Ces petites choses sont extrêmement répandues, où que vous soyiez, vous ne pouvez pas leur échapper. Elles sont partout. Pourtant, elles sont loin d'être d'origine spontanée, entendez par là qu'elles sont le fruit de semaines de travail...

Autres

droits d'auteur

Il est tout à fait légitime de vouloir ne pas être copié. Rien n'est plus désagréable à un créateur de site internet qui passe du temps et souvent de l'argent à la construction de son oeuvre de se voir copié. les " pilleurs " sévissant sur le Net sont nombreux et à surveiller.

Création de sites

Conception d'un site

Ce premier article du grand dossier sur la création d'un site web n’est pas une méthodologie globale sur la conception d'un site internet mais plutôt une des multiples façons d’aboutir a un site cohérent.

La mise en page

2eme article du dossier : création d'un site web sur le positionnement des éléments dans une page qui ne ce fait pas n’importe comment. 2 principes sont à respecter : le sens de la lecture et l’importance visuelle des éléments.

L'identité graphique

la sémantique des couleurs et le choix du style des éléments de la charte graphique ne peut pas être choisi aux hazard. Il y a plusieurs règles à respecter concernent le choix de l’identité graphique d’un site surtout si c’est un site d’entreprise.

Annonces Google

La mise en page

2eme article du dossier : création d'un site web sur le positionnement des éléments dans une page qui ne ce fait pas n’importe comment. 2 principes sont à respecter : le sens de la lecture et l’importance visuelle des éléments.

Abonnement

Identification Abonné :

Votre Email :
Votre Mot de Passe :
Se souvenir de moi
login

déterminer les zones de travail


Penser a l’évolution du site

Voici le moment pour nous de diviser notre écran en zone de travail. J’entend par la de positionner les différents éléments d’une page : titre ou logo du site, encarts spéciaux (bannière, nouveauté du site,…), navigation (rubriques et sous-rubriques) et pour finir le contenu. Mais avant de déterminer ces zones, garder toujours a l’esprit que si votre site doit évoluer : une nouvelle rubrique va peut être voir le jour dans 6 mois,… alors il faut évitez le piège d’une mise en page trop « coincé » qui ne vous permettra pas de faire évoluer votre site sans avoir a le repenser entièrement.


Dans le sens de la lecture et du plus important au moins important

le positionnement des éléments dans une page ne ce fait pas n’importe comment. Il y a deux grands principes a respecter si possible : le sens de la lecture et l’importance que vous voulez donner a votre éléments.
En ce qui concerne le sens de la lecture, il faut éviter le plus possible d’inverser l’arborescence du site par rapport a ce fameux sens de lecture. Par exemple : ne pas placer les grandes rubriques du site en bas de l’écran et les sous-rubriques de cette même rubrique en haut. Le sens de la lecture est inversé et l’internaute novice sera par ce fait un peu perdu. Il en va de même avec les rubriques a droite et les chapitres a gauches.


Voici quelques exemples de ce qu’il ne faut pas faire ou du moins éviter.



et voila des exemples de mise en page qui respectent le sens de la lecture.

Au niveau de l’importance de l’élément, il sera déterminé par son emplacement dans la mise en page d’une part et la taille de celui-ci d’autre part et parfois même pas ça couleur.


Dans l’exemple ci-contre, dite moi dans l’ordre ce que vous avez lu ?

Quelques cobayes :

Bluebear : "lu" , "premier", "rub2"
Analyse : lu est plus petit que premier mais il ce trouve au centre de la mise en page. L’œil a donc était attiré du centre vers les bords. La visualisation du texte rub2 montre que le sujet est un habitué d’internet. Après avoir fait la première lecture, il a essayé de ce repérer dans la navigation.

fred^cdx : "premier", ensuite "logo"
Analyse : lecture de l’élément le plus gros de la page puis l’œil ce redirige dans le sens de lecture avec le logo, l’élément le plus en haut a gauche de la mise en page (anecdote : fred à cru que la couleur de fond du logo était violet au premier coup d’œil)

Arthur_AW : "logo", "lu", "premier", "ici"
Analyse : un exemple assez intéressant d’une lecture en diagonale du haut gauche vers le bas droit de la mise en page. Effectivement, la plus part des personnes habituer a lire ont cette méthode de lecture rapide.

Lordk : "en premier", "qu'avez vous lu" ("que + c gros + c lisible ou peut être que ce qui est au centre est lu en premier aussi")

Willbe : "premier", "lu", "qu'avez-vous", "en" ("plus c gros et plus on lis en premier")

Kenet : "premier" ("clair que le premier truc que j'ai lu, c'est premier")

Alors, et vous ? (n’hésitez pas a ajouter votre expérience dans les commentaires)


Uniformiser la navigation

La chose a éviter également, c’est de changer dans chaque branche d’arborescence la navigation de place : une fois en haut en longueur, une fois a droite en hauteur,… un bon moyen de décourager vos visiteurs novices a l’internet. Vous pouvez tout de même envisager la possibilité de modifier votre navigation entre la page d’accueil et le reste du site si toutefois vous créez une page bien spécifique en page de démarrage : solution retenu pour notre exemple :

Mise en page de la page d’accueil

Mise en page interne du site.

A visiter :
http://cerig.efpg.inpg.fr/ICG/Actualites/Nouvelles/Annee00/Cadres.htm
Bon usage des cadres (Frames)

préparer les gabarits
Après avoir « gribouillé » votre mise en page sur papier, créer sous votre logiciel de dessin habituel les gabarits de mise en page a l’échelle (n’oubliez jamais que votre zone de mise en page pour une résolution d’écran de 800 par 600 pixels par exemple ne fera jamais 800x600 a cause du cadre du navigateur internet). Ces zones sont provisoires et pourrons être retaillées pendant la création de l'identité graphique, néanmoins, elles vous aiderons a la conception de celle-ci ainsi qu’au moment de l’intégration HTML, surtout si vous optez pour un site avec frames. Dans ce cas, les zones doivent être rectangulaires et alignées.


écrit par Jérôme Boulinguez (2000-2005). tous droits réservés.

Commentaires des visiteurs
Ajouter un commentaire
Copyright Jérome Boulinguez 1995/2007
Tous les éléments de ce site sont la propriété de leurs auteurs respectifs.
Toutes reproductions, distributions, commercialisations, copies sous quelques formes que ce soit est strictement interdit sous peine de poursuites.


point de croix .  broderie .  cross stitch .  broderie prenom .  broderie portrait .  pochoir .  pochoir personalisé .  stickers .  scrapbooking .  pochoirs à imprimer .  loisir créatif .  templates .  lifting .  cadeaux personnalisés .  pop art .  warhol .  warhol .  pop art .  affiches .  journal de naissance .  prénom .  étiquettes personnalisées .  parchemin personnalisé .  parchemin .  pagerank .  calendrier .  avatar .  faire-part .  collections .  mariage .  telephone portable .  tableau prénom .  fausse couverture people .  fausse couverture de magazine .  fausse couverture de journal .  calligraphie prenom .  t-shirt personnalisé .  géo-localisation .  fausse affiche .  affiche humour .  marque-pages .  plaque de rue .  roman photo .  cadre photo .  faux papiers .  dés photos .  pêle mêle .  pancarte de porte .  pour les nuls .  carte de membre .  scrapbooking .  acrostiche .  graffiti .  invitation a imprimer .  tapis de souris personnalise .  mug personnalisé .  mug photo .  grille point de croix gratuite .