FullCSSDesign explication
Par Cba • 18/06/2009 • Categorie: DéveloppementRappels des règles :
Le but du concours est simple, la création du design d’une page web sans utilisation d’images ni de JavaScript et respectant les normes du W3C
Tout d’abord l’idée générale est d’avoir une interface ultrasimple sans trop de chose. Ici j’ai orienté le design vers les jeunes de 10 / 14 ans. Un langage direct avec le tutoiement. Le choix des couleurs à été effectué sur un des très nombreux sites de création de palette. Ces couleur ne sont pas parfaite car pour la cible que je désire cibler le bleu et notamment le bleu clair est trop neutre. Il aurait fallut une couleur plus criarde. Mais ceci est facilement modifiable à l’aide de la feuille de style. Voila ce que cela donne :
Le menu de gauche est un menu ultra simple permettant la recherche et l’ajout d’ami. L’idée ici est de juste mettre le stricte nécessaire à la navigation : Pas trop de lien Pas trop d’option. La plus part du temps ça complexifie l’ergonomie pour pas forcément une forte plus-value.
La gestion du profile : Édition de ces informations, accès à la messagerie interne au site, bannir ou bloquer des utilisateurs sera réalisé à l’aide du menu en haut à droite. Plus discret, il reste accessible tous le temps sans venir brouiller l’information principale.
Et enfin il existe une zone centrale permettant de partager ce qu’on désire :
![]() |
Elle se compose en trois parties. La première partie est composé par un bouton cible qui sera implémenté en flash. Ce bouton autorisera différente chose. On pourra réaliser des drags and drops dessus pour partager ce qu’on désire ou alors en cliquant dessus cela ouvrira une interface permettant de copier-coller à objet à partager (par exemple une image sur une autre page web) ou encore de parcourir les dossiers de sont PC pour trouver un fichier. Ensuite, on décrit rapidement ce qu’on partage et enfin un bouton pour envoyer tout ceci aux serveurs.
Un certain nombre de tooltips on été insérer un peu partout pour améliorer l’ergonomie.
La dernière partie est composée de l’ensemble des objets partagés soit par soi-même ou pas ces amis. Il permet d’avoir des informations sur ces amis et une previews des commentaires.
Techniquement la page est conforme aux normes W3C. Cependant, la feuille de style ne l’est pas pour des raisons esthétiques évidentes tel les que les bordures arrondis.
Enfin, un effort particulier à été apporté à la barre des titres. Sur cette barre se trouve de multiples effets tels que : le fait d’avoir deux couleurs, les dégradées et les étoiles. Bien sur cela fonctionne avec autant de div qu’il y a d’étoile ou de dégradée.
Voila les idées principales de ce design. Il est évident qu’il n’est pas parfait.
et si vous l’aimez bien vous pouvez aller sur http://www.fullcsscontest.com pour votez pour moi.
Déception, je n’arrive que 5 ème de ce concours. Arfff Bon tanpis




[...] Article désuet consulté : http://www.c-ba.org/2009/06/18/fullcssdesign-explication/ [...]