Comme bons nombre d’amis le savent déjà (particulièrement ceux qui me suivent sur Pownce), je travaille sur une nouvelle version de mon blog… J’entends par là, un nouveau thème WordPress, réalisé par mes soins de A à Z.
La structure de base est déjà en place - en version papier - et cela va faire presque deux ou trois semaines que j’essaie de la faire passer en “numérique“.
Seulement voilà, à chaque fois que j’ouvre Photoshop pour avancer sur la maquette, je bloque après 5-10 minutes d’essais ! Et ça, ça m’énerve ! Grrrrrrrr !
Morale à zéro, inspiration à moins dix degrés, je me suis dit qu’il valait mieux que je passe directement du côté XHTML/CSS, au moins pour faire une version 0.1 qui sera mise en ligne et peaufinée progressivement … Et on verra comment ça va s’améliorer avec le temps !
Et là j’ai une question destinée à ceux d’entres vous qui font dans le WebDesign. J’aimerais bien savoir comment vous procédez pour relooker votre site/blog. Est-ce que vous commencer par mettre les idées sur papier, et après (c’est à dire après avoir régler tous les détails) vous concrétisez sur le logiciel ? Ou bien vous faites du “eXtreme designing” (oui j’invente des termes maintenant >_< ) : un peu de design, et beaucoup d’essais XHTML/CSS ?
PS :
Remarquez là, que je ne fais pas de distinction entre WebDesigneur et Intégrateur XTML/CSS .. Et donc je suppose que c’est la même personne qui fait le design et l’intégration du site ou du blog.
2:10 pm
13/04/08
Je fais mon croquis sur papier avec les couleurs etc… Je met aussi les grandes lignes du code html qui sera utilisé pour savoir ou se placera le tout. Par la suite je réalisé toutes les images qui seront nécessaire avec photoshop et j’intègre le tout et fait parfois une retouche ou l’autre.
Bon courage pour ton thème
2:19 pm
13/04/08
I’d love to use your first theme… and now i’m adding your blog to my friend blog to keep in touch
Good luck buddy!
7:34 pm
13/04/08
@Jeremy : Sur papier avec couleurs ? ça doit pas être facile
Comme je l’ai dit sur le billet, j’ai déjà la structure et la forme finale, et il manque encore des détails de fonds que je peine à trouver …
Je ne sais pas quand l’inspiration reviendra, du coup je pense que passer à l’intégration de l’existant est ce que j’ai de mieux … Enfin, je l’espère
@ahmed : I don’t know if I’ll release this attempt as a public WordPress theme… But I’ll certainly come with a couple of other themes Inchallah !
Thank you .. I added your blog to my list
7:37 pm
13/04/08
je pense que la meilleur façons d’aborder la chose est de commerce par faire des croquis pas trop détailler puis au fur et a mesure entré dans les détails du code html mais toujours sur papier. Aprés personnellement je passe a la machine et j’utilise fireworks pour réaliser le design.
Pour ce qui concerne le manque d’inspiration, fait autre chose que le design (pour ma part je code “action, javascript, …”) pour sortir de cette idée “réalisé le bon design” ca va venir tout seul comme a chaque fois, sinon tu peut toujours visiter les galeries css disponibles en ligne, c’est une vrai source d’inspiration.
j’utilise pas la plate-forme wordpress pour mon blog(j’ai déveloper mon propre cms), mais ce qui é bien avec wordpresse c que tu te focalise beacoup plus sur le coté design . Si tu utilise Dreamweaver pour créer le template de wordpress il exist cette extension (TAGStention) (http://solutoire.com/tagstention/) ça peu toujours t’être utile.
bon courage.
7:45 pm
13/04/08
Ca reste un croquis mais ca me permet de vrmt avoir une idée et je le retouche en chemin et une fois que j’en suis satisfait et que je vois vrmt ce que ca va donner, je me met vrmt au travail.
Bon courage
7:48 pm
13/04/08
@achraf : C’est vrai qu’il faut s’éloigner de cette idée de vouloir réaliser le “design parfait” … ça mène tout droit vers la spirale interminable d’insatisfaction
Sinon, je n’aime pas et n’utilise jamais Dreamweaver … Je préfère de loin un éditeur de texte (généralement Notepad++ ou Gedit si je suis sous Linux)
Pour les tags WordPress pas de prob, je suis à deux pas de les apprendre toutes par coeur
7:53 pm
13/04/08
@Ahmed: Thank you and i wish you good luck with your themes, i’m having a problem integrating wordpress themes to blogger, and this is just bug me out…
how easy and simple going templates are such relief…:lol:
Well, you don’t like having a bad template among your friends the bloggers do you?
Hello From beni mellal by the way!!!
7:54 pm
13/04/08
@Jeremy : Bon courage à toi également, vu que toi aussi tu te travailles sur une nouvelle version de ton blog
7:55 pm
13/04/08
@Ahmed : I really want to release something with a clear and W3C complient code .. And I feel like my first attempt won’t be that way
8:01 pm
13/04/08
@Ahmed: Well, never think that every start should be “that’s it” bingo! you need to release at least one or two and let people try it, and then you’ll find out how good or bad it is, by getting a very sincere feedback from bloggers… and this is how we actually learn… by sharing and getting feedback:)
I don’t know you that much, but i think you can do it, but don’t do it on the expanse of other crucial things.
8:15 pm
13/04/08
@Ahmed : yeah sure ! You’re right !
Well, actually I have a lot of things to do during the week and I’m working on my theme exclusively on weekends … That’s what it take me so long
But I’ll do my best ! Yep !
10:32 pm
13/04/08
Je me pose la même question ; Comment Réalisez-Vous votre design ?
je l’ai fait dans ma tête , il y a plus d’un mois , sinon je suis toujours en stand by
J’essayerai la feuille…puis la mise en pratique des Webdesign-Tuto si j’y comprends quelque chose !
P.s : si tu connais des Tuto pour Ultime Débutant…
6:08 am
14/04/08
Je fais le cadrage sur le papier, c’est à dire le positionnement des blocs.
J’affiche dans photoshop des images qui me plaisent et que je vais utiliser pour le graphisme.
Je crée du texte, et je fais d’abord ma page html, en “brut”, sans feuille de style, mais avec les zones, les conteneurs, etc… et un exemple de chaque type de texte.
Je monte mon css “from scratch” en faisant les graphiques en parallèle.
Une fois que ça marche bien, y compris sur IE6 et 7, je sépare entre les éléments répétitifs (includes) et le texte, et je nettoie tout.
9:42 am
14/04/08
@Bélier : Pour les tutos, il y en a énormément sur le net, il suffit de rechercher ^^
Sérieusement, je ne peux que te conseiller l’excellent http://www.pixel2life.com, sur lequel j’ai fait mes premiers pas de graphiste
Il y a aussi Del.icio.us si tu veux des résultats plus pertinents que google
@Marie-Aude : Démarche complète et compacte
Mais je doute qu’elle soit optimale pour des maquettes complexes
3:09 pm
14/04/08
En tout cas ce n’est pas une méthode adaptée au travail en groupe
Avec le temps je me suis développé mes propres framework, ce qui permet quand même de faire des choses relativement “lourdes” en un temps raisonnable.
J’aime bien le site que tu as donné… mis dans mon aggrégateur
4:34 pm
14/04/08
Je commence par créer 2 à 3 croquis (du même modèle) sur papier, et ensuite je passe sur photoshop cs3. Une fois la maquette réalisée à 100%, je passe au découpage et intégration sous Dreamweaver. Ben après l’étape finale, la programmation en pur et dure.
Take a look over here : Deviant art
j’ai suivi les même étapes pour réaliser cette page d’accueil : Capital Engineering
4:37 pm
14/04/08
Je me suis trompé dans le nom de mon blog ..je le corrige : http://www.capital.net.ma/blog/ ” j’ai mi une virgule à la place d’un point dans mon ancien post.
6:16 pm
14/04/08
C’est clair que l’inspiration pour avoir le design idéal pour un site est très délicate.
De mon côté, je fais plusieurs maquettes sur papier (brainstorming :D)
Et quand je lance Photoshop, j’essaye de prendre les meilleurs idées de chaque maquette pour en faire une finale. Biensur il faut sûrement avoir l’avis de plusieurs de ses proches pour se décider
En passant, je te félicite pour ton blog
8:31 pm
14/04/08
@Marie-Aude : En parlant de framework, j’essaie depuis quelques temps de tester quelques frameworks CSS disponibles sur le net (Blueprint notamment) … mais c’est vraiment pénible pour moi de devoir “m’adapter” à une façon de coder prédéfinie ^^ … Surement parce que je suis une tête de mule
@Issam : Une vraie mine ce Deviant Art !
Félicitations pour votre site .. Bien fait (même si je suis sceptique vis à vis du Flash ^^ )
@SimoX : Merci !
T’as raison pour l’avis des proches.. ça justifie en fait, cet article ^^
La prochaine fois, je poste là où j’en suis avec la maquette
4:32 pm
18/04/08
En premier je fait une maquette sur papier. Je fais une estimation des mesures pour avoir un ordre d’idée de la structure.
Puis je refais la maquette sur papier à la règle au propre.
Ensuite ne possédant pas Photoshop, je conçois mes templates directement en XHTML -CSS.
J’ai souvent vu les gens faire ceci avec un PSD, mais je n’y vois pas l’intérêt…
4:40 pm
18/04/08
Et donc je suppose que c’est la même personne qui fait le design et l’intégration du site ou du blog.
Yop pour ma part c’est le cas. De plus c’est surement la phase la plus facile mais paradoxalement les détails à régler sont les plus délicats…
9:24 am
19/04/08
dhoko : l’utilisation de photoshop, fireworks ou the gimp pour faire une maquette peut s’avérer utile lorsqu’on a des éléments graphique complexes. Genre un header avec plein d’effets dessus …
Après, comme tu dis, il est tout à fait possible de réaliser un design sans utiliser de logiciels d’imagerie !