Ca faisait un moment que ça me trottais... J'avais fermé mon site consacré au WebDesign, et au PHP (Lancement du mouvement PHP'Art) par manque de temps, de motivation et par une demande trop croissante de design "gratos"...
 
Je m'étais aussi dans le pari fou de création d'un CMS, mais mon hebergeur (une assoc bien connu) s'est fait piraté et à jeté l'éponge (A moitié)...  
 
C'est donc reparti. Dans un projet moins ambitieux, plus accessible en temps, et plus "design"...
 
Le but sera la réalisation d'un site contenant des ressources de design (tutoriaux, ressources, etc...). Donc j'inclus ça ici en WIP, car je part de zéro...
 
J'essaierais de montrer toutes les étapes graphiques ici. De la réalisation sous illustrator/photoshop, en passant par le decoupagedes images puis l'intégration WEB... Ca me permettra de montrer comment je bosse pour obtenir un site comme on peut le voir dans ma galerie (ICI)
 
Pour le moment : rien ! (j'l'ai dit, je part de zéro ) - A SUIVRE - (Ca viendra trés vite rassurez-vous)...

La premiére partie de conception s'effectue en local (c'est à dire sur mon disque dur.
 
Je procéde toujours de cette maniére. Je separe la partie qui sera sur site (dossier HTML) et les sources (Dossier SOURCES) (c'est a dire tous les fichiers de conception .psd, .ai, etc...). Comme je vais concevoir le design et la programmation PHP, j'utilise cette méthode.
 
J'ai aussi un logo. Je le mets donc de côté en format brut illustrator...
 

 
La suite, sera de definir une charte graphique, de penser les éléments de navigation avec les rubriques et de concevoir une maquette de la page d'accueil... Qui sera une page dynamique. A savoir une page unique qui sera visible sur toutes les pages du site...

J'ai déjaà une idée du style graphique que je vais concevoir : style clair, effets aqua. En wedesign il ne faut pas hésiter à s'inspirer de ce qui existe déjà... Comme au final j'aurai un contenu mixte (design et redactionnel) j'opte pour des fonds clair et des parties design colorés et gaies... Faisons le tour de ce qui existe déjà et qui pourrait être interessant (evidement, il ne s'agit pas de faire un fake ("copillage" de site))...
 
Je vais donc m'impregner de ce qui existe déjà dans le style que j'ai choisi. Comme dit plus haut je ne vais pas copier purement des design, mais trouver des idées interessantes là dedans et les adapter à ma "sauce".
 
Voici quelque chose d'interessant. C'est clair, lisible et chaleureux :
http://www.kloobik.com
 
Idem :
http://www.gab-design.com/
 
J'ai un imperatif, celui de limiter le nombre de teintes et créer une harmonie 2 ou 3 tons. C'est à dire qu'on va definir 2 ou 3 couleurs principale de tons qui s'integreront au design final.

Je vais à présent choisir mes teintes de couleurs. Pour celà, j'utilise la cercle chromatique WEB et j'utilise les couleurs analogiques pour choisir mes teintes (NB en faisant une rotation du rectangle on obtient une autre harmonie)
 
 
Voici donc mes principales teintes (utilisées pour le CSS, texte, design, etc)
 

Ca avance... Voici un petit screen sur le possible agencement global de design de l'accueil. J'ai plus ou moins en tête le projet final et on a ici un aperçu global... Cette image va surtout me servir à agencer et hermoniser l'ensemble final au niveau html. En effet, je vais en profiter pour me faire valider W3C au niveau HTML 4, CSS2. Donc la plupart des éléments visuels même s'il sont représentés ici sous forme de graphiques seront des styles CSS. L'avantage sera une compatibilité la plus étendue au niveau des navigateurs mais aussi un gain de chargement non négligeable...
 
-> aperçu

 
quelle limpidité !
 
Juste si je peux me permettre, bien qu'on n'a pas tout, je trouve la barre de menu un peu grosse.
 
Si je ne peux pas me permettre, oublies.

C'est pas qu'elle est grosse, mais elle apparaît pas en fait... Ce sera une simple ligne de texte en fait... Merci sinon
 
J'espére que ca fait pas trop brouillon comme WIP, car je montre qu'une synthése globale de la démarche. Ca paraît pas structuré, mais pour moi c'est cohérent. En plus je peux pas tout montrer ici, ca prendrait trop de place. Je montrerais juste l'essentiel

C'est très chouette Pyksel comme initiative de ta part  

on ne te vois plus trop toi.

 
Faut partager ! Je pense que c'est ça qui fait que les choses avancent... J'ai appris tout seul grâce à des gens qui ont partagés aussi. J'essaye de faire pareil maintenant

 
 
Après mon linchage, faut plus s'attendre à trop me voir    

Tu remarqueras que les "lincheurs" ne sont pas des personnes régulières.
 
Mais je comprends.
 
J'espère que tu changeras d'avis bientôt.

C'est pour ca que t'as changé d'image pseudo Spectro ? J'ai pas trop trouvé que tu te soit fait lynché... Parfois oui, mais c'était parfois constructif. Moi j'étais d'accord dans un sens mais par rapport au spam plutôt que la qualité... Enfin, c'est de l'histoire ancienne on va dire

Bon, ca commence à prendre forme.  
J'ai déjà les éléments de présentation global. Maintenant, avant d'aller plus loin dans la conception graphique pure (C'est à dire pour mettre une touche créative plus originale techniquement), je vais m'attacher à concevoir et penser au code.  
Je procéde toujours ainsi. En effet, un site ca peut être beau, mais si c'est pas fonctionnel, où alors trop tordu pour pouvoir le mettre en html, ce n'est pas la peine de continuer...
 
Je vais donc placer mes éléments de base et les meler avec les parties textes. Afin d'harmoniser l'ensemble. Evidement, j'ai sur papier mes rubriques de mon site. Il s'agit maintenant de se mettre dans la peau du visiteur, mais aussi penser webmaster. En d'autres termes, je vais "forcer" la lecture de certaine partie. Par exemple dans l'image du dessous on peut voir que l'inscription/login est coincée entre les news et une rubrique du site que sera annoncée graphiquement. Ceci n'a pas pour but de forcer la main, mais de rester cohérent sur la maniére dont fonctionnera le site. L'oeil humain a tendance face à une photo ou une image a regarder en haut à gauche puis il va en bas et remonte par la droite puis reviens au centre... C'est pour ca que la rubrique tuto est legérement en bas à droite, tout comme en peinture ou en photo, un sujet n'est jamais au centre (si si !)... Ainsi, je suis sûr que mes rubriques principales seront vues et seront attractives... Le reste, c'est le visiteurs qui decidera de rester ou non - A SUIVRE -
 

C'est parti pour le HTML ! -> http://www.pyksel.com
 
Tout ce que vous voyez à l'ecran est generé avec les styles CSS (hormis un tableau html de construction principal...)
 
On va tenter de rester dans la norme W3C en html et CSS2 et d'être compatible pour tous les navigateurs... (en cliquant sur les liens W3C les portions de codes utilisées sont visibles)
 
Donc pas vraiment de contenu, mais plutôt une demarche constructive cohérente. C'est quand on passera au PHP que les choses se compliqueront et seront beaucoup plus dynamique....
 
Merci de m'indiquer les erreurs d'affichages eventuelles et toutes criques ou suggestions sont les bienvenues...

Pas de problème pour moi (Firefox 0.8).
 
En tout cas, tu bosses bien !

Excellente idée !!!
 
Ca manquait des WIP web, et là c'est très bien expliqué, bien détaillé, et très didactique.  
 
Bonne initiative !  

merci La suite le plus vite possible...

Tu as des soucis* pour l'intégration ou tu prépares le terrain ?
 
Perso j'adore observer ce que devient une maquette une fois integrée  
 
 
EDIT: * Si oui, je peux aider  

un ptit à toi Spectro

 
Je pense m'en sortir Merci à toi pour ton attention
 
En fait je travaille de cette maniére car je fais design + programmation php/mysql... Donc je dois réflechir pour 2

 
Ok ok, je comprends    
 
J'ai hâte de voir la suite  

là, c'est CSS à fonds ! J'envoie une capture de comment on peut integrer CSS/html/PHP et design... A de suite...

Le CSS dans tout ses état !
 
Voici une petite capture d'écran du resultat sous ie en local...
C'est la partie edito qui nous interesse... En effet, il y a plus que du html là dessous... Comme dit plus haut, j'ai mon environnement visuel établie. La tâche consiste à présent à inclure du code php dynamique, du html et du CSS afin de rendre l'affichage clair et propre...
 
J'ai donc du php. Ce code génére lui même du html, donc j'en profite pour lui faire generer un affichage propre grâce au CSS...  
 
Schematisons le fonctionnement. Un edito sur mon site sera un texte. Il sera visible dans une durée assez longue, mais modifiable, suivant des événements qui feront que celui-ci changera. Je vais donc pouvoir le modifier en ligne sans avoir besoin de recréer du code et faire du FTP... J'ai aussi inclus une image à cette edito qui evidement sera lié au texte... La finesse veut que pour faire varier mon affichage, mon image sera tant tôt a droit ou a gauche du texte (merci php)... Certains auront remarqué que le texte semble entourer l'image... Là, pas de tableaux html imbriqué ou autre complication de code, j'utilise le CSS... Regardez le code source, vous verrez que l'image et l'edito sont sur la même ligne... J'ai poussé la finnesse dans le moindre details. Taille de l'image, cadrage du texte et justification de celui-ci. Ca ressemble plus à du texte papier que du texte web à présent...
 
- A suivre -

Et je reste dans la norme w3c css2... (cliquez sur le lien w3c)... pour html, pas encore, car le lien de mon wip clubic est erroné au niveau du code...
 
Edit : sur mon site evidement

Voilà, mise à jour du message précedent, mais sur site cette fois... ICI

J'ai ajouté pour que tout le monde puisse voir une partie de ce que donne l'administration de cette edito - Evidement, ca ne marchera plus une fois fini, il faudra avoir des droit d'administrateur pour celà. De plus en cliquant sur le lien d'edition, vous ne pourrez pas effectuer de modifications -(CF lien [EDITER] sur le site)...  
 
Je resume donc : J'ai defini mon design de base je suis en plein code php/html et CSS. J'interface ma gestion en ligne... (je précise que je code l'integralité du site sans utiliser d'application php existante... C'est donc de la full conception. Je précise aussi que je fais ca sur mon temps libre, donc c'est assez long
 
- A SUIVRE -

 
Excellent travail Pyksel !
 
Le "Les informations que vous trouverez actuellement n'ont aucune valeur informatives" m'a fait sourire Car le texte qu'on y trouve : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."        
 
Bon sinon ça m'intéresse beaucoup, car en fait j'ai déjà fait plusieurs sites, mais les CSS je maîtrise pas du tout. Au niveau des sites réalisés de mon côté, je suis le webmaster de DVDNet, vous connaissez peut-être, j'avais lancé ce site juste pour bosser un peu en ASP y'a trois ans et demi et puis ça a marché donc on a continué, mais je me suis un peu retiré de l'aventure il y a quelques mois, car cela demande un gros investissement de travail.

 
Vaut mieux preciser... Aprés je reçois des mails comme quoi le texte que j'écrit est incompréhensible (veridique)...
 
Sinon oui : le CSS c'est puissant, mais ca demande pas de connaissances extreme, mais plus de pratiques qu'autre chose

 
T'as qu'à leur dire que tu fais un site en latin ...

 
Tu crois ?
 
Sinon pas de bug ? C'est propre ?

c excellent! déjà que ça te prends du temps pour bosser, tu en accorde le double à tout expliquer...

 
Chez moi pas de Bug sur XP et MyIE2 ...

OK ! Merci à tous... Je vais essayer de créer la partie graphique (header) afin de rendre ca plus graphique que programmation dans ce wip

sympa ce WIP    
 
pourquoi tu n integrerais pas ton menu dans le bandeau que tu ferais en flash ?    
 
Se serait plus joli  

en effet tres sympa ce site
1 de + a metrte dans les lien sur mon site

 
Pourquoi pas... Bonne suggestion. J'y avais pansé mais pas encore decidé. Ce sera sobre evidement...

 
Merci J'oublierais pas les forumeurs non plus

Ca commence à s'affiner : VOIR. (cf lien tutoriaux)
 
La rubrique tutoriaux prend forme... Toujours pareil, même soucis de présentation par l'application de styles CSS. De plus cette page est generée par le php. C'est a dire que pour réaliser un tuto, je me facilite la vie du côté redactionnel. En d'autres termes, par le biais d'une interface d'administration, j'ai juste le texte à taper et une (ou plusieurs) image(s) à selectionner. Le PHP va me gerer l'affichage et la présentation. Je n'ai donc pas besoins de créer une nouvelle page que je devrais mettre en forme à chaque tutoriaux. De plus ceci à l'avantage de changer complétement la présentation de toutes les pages en n'en modifiant qu'une seule... - A SUIVRE -
 
PS : Si vous avez des critiques ou des suggestions n'hésitez surtout pas, ceci me permettra d'améliorer encore le truc.
PS 2 : Ceci n'est pas la présentation final. Pour vos avis, ne jugez que la partie tuto elle-même car l'imbriqcation de cette partie n'est pas finalisée