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.
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
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!
@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
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.
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
@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
@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!!!
@Jeremy : Bon courage à toi également, vu que toi aussi tu te travailles sur une nouvelle version de ton blog
@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
@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.
@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 !
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…
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.
@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
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
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
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.
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
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
@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
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…
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…
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 !
Il est peut-être un peu tard pour répondre mais bon !
Je débute dans le monde du Webdesining (je n’en fais que depuis 2 ans et j’apprends toute seule, pendant mon temps libre (restreint par mes cours car je suis encore étudiante XD))… Mais lorsque j’ai un projet en tête… J’y suis à fond ! Je me suis achetée un GROS calepin duquel je peux arracher autant de pages que je veux…
Je commence par dessiner les différentes parties au stylo… Avec des indications au crayon (ça fait comme ton image d’illustration, là !
)…
Ensuite, je surfe sur le net (surtout sur mes sites préférés) et j’observe… Les dernières tendances, les “trucs” de la semaine passée mais qui m’ont marquée… J’ajoute ces petites idées sur mon calepin et je choisis les couleurs. Là , j’ouvre Photoshop et je dessins (au U) les blocs phares de mon site, avec des couleurs arbitraires pour différencier chaque partie.
Je pars de nouveau naviguer sur la toile afin de chercher des images. Non pas à utiliser (ou, si c’est permis, pourquoi pas ?) mais pour m’en inspirer. Les couleurs, l’impression que ça dégage, le “style” du créateur, etc… Et là , normalement, ça vient tout seul sur ToShop… ! Je code et je lance… Et je recorrige au fil des jours les bugs ou les erreurs de codes… ^_^
Voici ma méthode à moi et elle marche à chaque fois… (hamdoullah, les pannes d’inspi’ sont rares pour ma part grâce – notamment – à cette phase “recherche d’image”…
)
Donc, voilà ! Très beau design WordPress, j’aime beaucoup (d’ailleurs, je compte m’essayer au WP bientôt… J’aurai peut-être besoin de tuyaux !
) et très bon site ! Je m’abonne direct au RSS ! ^_^
Bises et bonne continuation,
Chaimae
Il n’est jamais trop tard pour laisser un message ou un commentaire sur ce blog
Et en te lisant, je dirais que tu suis la démarche parfaite pour réaliser un bon design solide et bien construit !
Et si c’est que du self-apprentissage comme tu le dis, ehhh bien .. Je peux dire que tu est sur la bonne voie
Merci de ton passage, ça fait vraiment plaisir !
Tout le plaisir est pour moi ^_^
Un énorme merci !
Je préfère toujours créer un gabarit le plus proche du design final avant de commencer, mais c’est pas forcément le cas à chaque fois.
1) D’abord je commence par faire un distribution du menu.
2) Je décide de la structure du gabarit, par défaut j’opte pour des gabarits en trois blocs horizontaux (header, body, footer), mais ça change selon le concept.
3) Je visite des galeries CSS/XHTML pour inspiration, je dis bien inspiration
4) Je travaille ma maquette en PSD, je donne de l’importance aux zones graphiques (logo, fonds, icônes…), pour les textes, les formes, les bordures… c’est mieux de le faire directement en CSS.
5) Certe, une page HTML n’est pas toujours 100% identiques au PSD, il y’a donc des va et vient entre le Ps et l’éditeur.
6) La finalisation, ça je pense que c’est pareille pour tout le monde, surtout pour contourner aux emmerdement d’un certain IE6