Mise en ligne de mon portfolio

Bonsoir,

Tout d'abord, désolé pour cette réponse tardive, mais le temps me manque ces temps-ci, c’est l’été, mais pas les vacances pour tout le monde!
Je prends bien en compte les dernières remarques faites sur le logo, et avec un peu de recul je suis d’accord sur le fait que celui proposé n’était pas efficace. Je ne vais pas reprendre les points à tenir compte pour la création d’un logo, car ils ont été très bien expliqués dans la dernière réponse, mais sachez qu’ils m'ont été très utiles. Ces dernier temps j’ai appliqué les différentes remarques sur un nouvel opus, les points qui m’ont bien aidé, sont en premier lieu le fait que le logo doit être efficace sur 1 cm ², et justifié tous les traits. J’ai terminé un logo que je vais garder pour moi pour le moment. Je le présenterai en même temps que la prochaine maquette du site en expliquant son concept et ses détails...

Pour en revenir sur le site, je suis aussi d’accord sur le fait que celui-ci n’a ni queue ni tête, et je dois admettre que la dernière mise à jour que j’ai faite a été motivée par le souhait d’appliquer un plug-in menu sur lequel j’avais flashé… Cela a eu pour effet de casser l’harmonie visuelle du site dans son ensemble.
Aujourd’hui, je travaille sur une nouvelle version du site que je prépare soigneusement en suivant les nombreux conseils reçus ici et là. Dans l’ordre, j’ai commencé par retravailler tous mes contenus, en premier les pages à afficher, puis, je termine d’affiner les contenus en fonction des messages que je veux faire passer et des objectifs de référencement que je me suis fixés ? Pour cela, je retravaille les titres , sous titres, les textes, les images, les meta....
Après une fois les contenus et les pages déterminés, je me suis créé un zoning, définissant l’emplacement de chacun des contenus sur les différentes pages.
Et pour terminer, je travaillerai sur le travail des détails visuels de ma maquette tout en pensant aux différents effets et animations que j’appliquerai lors du codage.
J’ai encore pas mal de boulot, et je pense terminer ma maquette en PSD d’ici quelques semaines, j’espère avoir assez de temps pour mettre la mise à jour en ligne mi-aout.
Une nouvelle foi, merci à tous pour vos conseils et commentaires très constructifs et sans langue de bois.
Bonne soirée et à bientôt

salut!

Niveau charte graphique... J'adore! Ton logo est simple et efficace. J'aime l’ajout de la texture en background qui donne beaucoup de profondeur.

Rapidement niveau code:
Pourquoi avoir mis le titre de ton site dans un p? Faut mettre en h1!
une div vide pour mettre ton logo c'est pas génial. Faudrait le mettre directement dans le html. Et pour ce qui est de faire le changement de couleur au survol, c'est très facile à faire en js.
Je trouve dommage qu'il n'y ais plus de menu lorsque l'on sort de la page principale, ce qui nous oblige à toujours revenir en arrière pour changer de section. C'est pas très pratique.
Ton menu, il aurait été plus standard d'utilisé une liste ul li plutôt qu'une div contenant des a.

En fait je voit qu'il y aurait beaucoup de chose à corrigé niveau code... en ce moment t'as la divite...

Merci pour les compliments ! Concernant le code, je vais faire quelques corrections, notamment pour le h1 de l’accueil, au sujet de la divite, et bien je vais consulter…
Pour le logo, ce n’est pas simplement un changement de couleur il y a aussi une petite ombre, vous me répondrez qu’on peut aussi le faire en CSS bon je vais voir, par contre le changement de couleur en JS, je ne connaissais pas. Si tu peux partager le lien vers un plugin…
Pour le menu, je te l’accorde concernant le choix des balises, je ne suis pas dans les règles de l’art, concernant l’ergonomie de celui-ci, je ne l’ai pas assez mis en évidence, il y a un bouton en haut de page pour le faire réapparaitre.
Quand je retravaillerai sur le code je pense mettre ce bouton dans une div

position:fixed

et

top :0

, afin qu’elle reste accessible en permanence sur la page. Par contre je le désactiverai pour les résolutions < 768px.

rastaf86 a écrit :
Pour le logo, ce n’est pas simplement un changement de couleur il y a aussi une petite ombre, vous me répondrez qu’on peut aussi le faire en CSS bon je vais voir, par contre le changement de couleur en JS, je ne connaissais pas. Si tu peux partager le lien vers un plugin…

Le problème c'est que ici tu utilise une balise vide pour faire afficher une image, alors que tu devrais la mettre en clair dans le html. Tu peux faire le changement d'image à une autre à l'aide de js.
Moi j'utilise ce code (il est sûrement perfectible, je ne suis pas une experte en js)

$(function(){
	$("div#logo").hover(function(){
    		$("div#logo img").attr("src","tonLogo-over.png");
	},function(){
    		$("div#logo img").attr("src","tonLogo.png");
	});
});

et une idée comme ça... ton logo est très simple tu pourrais le mettre das une police d'icônes (iconMoon). Du coup plus besoin d'images! Et tu pourra gérer les changements de couleurs et ombrage seulement avec css.

Je prends bonne note ! Merci pour les infos

Bonjour,

Repassant par ce sujet pour récupérer un lien, je découvre votre site sur fond de vieille nappe marron et franchement, je ne suis pas fan du tout.

Il n'y a rien et les éléments ne sont même pas bien balancés et équilibrés. De l'amateurisme à la limite du ringard. C'est pas moderne, triste et tout de traviole… très loin de ce que vous êtes capables de faire, et vous l'avez prouvé.
J'ai l'impression que vous voulez travailler trop vite sans réfléchir à un concept et à un style réel. Si au lieu de refaire 10 fois un site à la ramasse vous aviez mis à profit ce temps pour réellement étudier les tendances et vous inscrire dans un style, vous auriez un très joli site à l'heure actuelle.

Re,

C'est toujours "mieux" que le site précédent avec le fond de nappe marron, mais ça reste une template fait rapidement sans originalité, sans idée, et pas spécialement tendance, moderne ou créative. Des div avec des fonds, des couleurs et un travail de typo et mise en page bâclé. Point. En plus tout ce marron… Mais bon, quel intérêt d'améliorer cette template basée sur du vide et un travail fait à la va vite ? Aucun travail ou réflexion propre au graphisme. Pour un Graphiste, ça ne passe pas.

Le site d'un graphiste un minimum crédible, qui est une vitrine de son savoir faire, doit avoir une touche d'originalité et être irréprochable en terme de typo, de charte, d'équilibre de masses et des couleurs. C'est la base et c'est tout sauf facile.

Achetez un livre avec les règles de bases en typo, c'est indispensable. Tous les graphistes doivent le posséder.
http://www.amazon.fr/Lexique-r%C3%A8gles-typographiques-lImprimerie-Nationale/dp/2743304820/ref=sr_1_2?s=books&ie=UTF8&qid=1379939580&sr=1-2&keywords=typographie

La version actuelle de votre site pourra dépanner un temps en attendant mieux, mais si vous voulez en finir avec les templates sans intérêt à la "1&1", vous devrez vous imprégner des tendances actuelles (déjà dit), trouver une réelle idée qui n'a pas été piquée sur le web et sortir un site sympa à votre sauce, qui vous permettra de démarcher plus facilement les clients.

Les tendances sont diverses, à chacun de s'inspirer de ce qui lui parle (sans copier comme un veau). Quelques unes ci-dessous :

• La tendance "flat design", le rouleau compresseur sur les OS et sur le web.
http://line25.com/articles/20-stylish-examples-of-flat-illustrations-in-web-design
http://www.fostr.com/

• La tendance "metro design" issue du style Microsoft en mosaïque.
http://www.diesel.com/
http://www.lacoste.com/

• La tendance "minimal design", ou quand moins c'est plus.
http://cargocollective.com/
http://almasty.com/
http://www.holyokehirsch.com/
http://www.secretlyswedish.com/
http://minimalist.co/ (utilisation d'une template existante)

• La tendance "cartoon design".
http://captaindash.com/
http://www.cyclemon.com/
http://boy-coy.com/

• La tendance "one page scroll".
http://www.kinetic.com.sg/
http://www.apple.com/iphone-5c/
(nombreux exemples dans tous les styles)

• Le style tumbl.
http://visualgraphc.com/
http://jvnk.tumblr.com/
http://www.siggieggertsson.com/

Etc.

Aucun de ces sites n'a été fait à la va vite (certains ont été créés par des équipes en agences, d'autres par un graphiste seul). Beaucoup de temps, de réflexion, d'ébauches, d'exigence, de travail, de graphisme, d'illustrations, avant même de passer à l'intégration qui doit arriver tout à la fin, quand le site est fait. L'intégration, c'est de l'exé. Ce n'est pas à ce stade qu'il faut réfléchir sur le design. Sauf à pondre de la div sans intérêt, en long, en large et en travers (vous avez déjà utilisé toutes les options).

Tous ces styles ayant des bases communes, comme les notions de modernité, de fraîcheur, de mise en page soignée, de règles de typos respectées à la lettre, d'évolutivité, d'efficacité. Le soin apporté à la typographie et à la mise en page est capital quel que soit le style. C'est 50% du design, et c'est un point faible des portfolios que vous présentez, où on a du mal à cerner une charte, ou bien bâclée (même les pictos twitter et facebook doivent être utilisés selon certaines règles) et bourrée de fautes de typos.
À chaque fois, il faut une idée forte et capitaliser sur celle-ci. Cela ne peut se faire en 3 jours comme on bâcle le site d'un commerçant en copiant vaguement une template bateau.
Il faut beaucoup se documenter, et avec le recul, murir une idée, en dessiner les bases sur papier, savoir vers où on veut aller, et enfin faire une première template, même grossière sur photoshop. Ne jamais intégrer quoi que ce soit même si la technique doit être prise en considération dans l'idée initiale.

Voilà, prenez votre temps. J'espère juste que votre prochaine template ne sera pas une énième resucée ou pastiche de ce qui vous sera tombé sous la main aux hasard du web, mais le fruit d'une réelle réflexion, avec un style moderne, ciselé, qui s'inscrit dans les tendances ci-dessus (j'en ai oublié…), ou autres. Et sans fautes de typos.

Voilà. Bon courage pour la suite.
Modifié par spongebrain (23 Sep 2013 - 15:21)

Bonjour, bonjour !
Et voilà ce n’est pas encore le beaujolais, mais c’est le dernier cru ! Ça m’a pris du temps, ça m’a fait chauffer mon ptit cerveau, mais voilà, c’est terminé, et je suis heureux de vous l'annoncer !
Je suis repartis de zero et j’ai quasiment tout refait. Les textes, le site-map, l’apparence… etc, je vous laisse découvrir www.infographiste-poitiers.fr
Voilà comme d’hab., c’est à vous de me dire ce que vous en pensez, j’ai essayé cependant de m’appuyer sur les commentaires constructifs que j’ai reçus jusque-là. Il ne faut pas se leurrer, il y aura toujours quelque chose à redire, mais c’est le jeu.
Merci encore à tous pour vos commentaires pertinents qui m’ont permis de me remettre en question d’aller plus loin et de creuser sur des points sur lesquels j’ai à progresser, la typo, les logos et bien d’autres thème encore.
N’hésitez pas à donner votre avis, à commenter.
A bientôt (pour une future maj, mais pas pour tout de suite je pense ), c’est à vous de juger maintenant.

Hello rastaf,

Quelques remarques sur le design, l'experience et pas mal sur le contenu:

Design / expérience:

- avant tout: les fonts, trop de custom font tuent la lisibilité. Restons classiques: custom font pour les titres, regular font pour le contenu, parce que là, personnellement je trouve ça désagréable à lire.

- le menu: le texte se décale de gauche à droite, l'icone de haut en bas, en plus de donner le mal de mer , l'icone se superpose au texte au début ce qui est un peu cra-cra

- niveau "the devil is in details": dans la partie travaux, quand on survol une création le curseur est celui par défaut vu que ce n'est qu'un span, l'overlay s'applique, le curseur reste celui de defaut, ce n'est que quand il sera bougé par l'utilisateur qu'il prendra la forme de pointer.
Il faudrait qu'il soit pointer dès le début: d'ailleurs il faudrait que ce soit un lien dès le début: et le fallback en cas de JS désactivé on en fait quoi ??

- il faudrait que le lien "x fermer" soit en haut, et non tout en bas de l'article. D'autant plus que lorsqu'on clique hors de l'élément il ne se ferme pas (par contre il se ferme quand on clique à l'intérieur, un peu étrange)

- enfin je ne vois pas l'utilité d'utiliser une icone dans le menu uniquement pour l'accueil, autant écrire "accueil", ça sera homogène avec le reste du menu, non?
Du coup ça attire plus l'attention que ça ne devrait, car la page d'accueil n'est pas celle sur laquelle tu veux que tes visiteurs aillent. Et puis icone + icone au survol, ca commence a faire beaucoup.

____

Niveau contenu il ya beaucoup plus à dire:

D'une manière générale: trop de blabla.

- Introduction: tu fais de la production web et tu adores ce que tu fais. C'est bien mais c'est bateau, tout le monde dit la même chose, en quoi ça donne envie au visiteur de prendre le temps de cliquer sur "travaux"? Je te lis un excellent article récemment publié sur freelanceswitch.

a écrit :
If you’re a solo freelancer, you’re in the business of selling yourself, right?
Wrong.
You’re in the business of providing some form of value to your clients. A client doesn’t hire you solely because they like your friendly personality, or because you seem to have been working in this field for many years.

http://freelanceswitch.com/industry-tips/design-to-attract-leads/

Ton objectif n'est-il pas d'amener ton visiteur à voir tes travaux pour montrer de quoi tu es capable?
Autant lui faciliter la tache et les lui montrer dès la premiere page (au lieu d'un fond d'ecran de clavier)?
Sinon, il faut vraiment bien travailler la phrase d'accroche pour l'amener a avoir envie d'y jeter un oeil.

- Travaux: Quand je clique sur la réalisation, déjà j'aimerais avoir le détail à lire en plus grand que cette petite colonne, mais surtout, si je clique c'est que je veux voir le détail de cette réalisation, et les liens que j'attend y trouver sont vers cette réalisation, pas vers d'autres parties de ton site, j'ai bien compris que tu faisais du site vitrine, du blog, du flyer etc etc...).
Quand un éventuel client clique sur le detail d'une réalisation, ce n'est pas pour connaitre l'histoire de celle-ci et si le commanditaire était un mec sympa, il veut voir si le résultat pourrait coller avec ce qu'il veut faire. Eet il ne veut pas lire: il veut avant tout voir

- Remerciements: il faut que tu décides à qui est destiné ce folio.
C'est beau de rendre à César ce qui appartient à César, mais si c'est professionnel pour des clients, alors tu te dois d'être professionnel, tu ne peux pas laisser entendre que ce site, qui est ta vitrine, à été monté à l'aide de tutoriaux et d'aide en ligne parce que tu n'étais pas capable de le faire seul. Tu ruines toute ta crédibilité avec cette page.

Evidemment il ne s'agit pas de mentir sur tes competences (ne jamais faire ça), mais quand un client te confie un projet, il le confie a toi, pas a la communauté d'alsacreations, comment tu le gères derriere, c'est ta tambouille.
(De toute façon, je te rassure, personne ne fait un site seul de A à Z, même avec un paquet d'expérience, on fini toujours par googler et avoir l'aide d'autres personnes d'une façon ou d'une autre, on ne va donc pas lister tout les sites qui nous ont inspirés, les articles qui nous ont aidés, les formations par lesquelles nous sommes passés et nos parents d'avoir toujours cru en nous ).

Reste classique sur les crédits avec les photos, les icones, le CMS, et met les moins en avant. Il est plus important pour ton visiteur de lire ton "a propos" et tes tarifs que les crédits et mentions legales du site.

- Infos tarifs: Si on clique ici c'est qu'on veut une réponse, pas un cours qui aurait plus sa place comme article de blog. Ou tu affiches clairement tes tarifs à l'heure / jour / semaine, ou tu proposes des packages, au pire des cas juste une explication que tu évalues tout types de budget avec une demande un devis, car la tu vas decevoir à 90% tes visiteurs.

- A propos: aaah enfin j'apprend quelles technologies tu utilises: "HTML v5, CSS, SCSS, PHP, JavaScript, jQuery Framework et CMS : Wordpress, PrestaShop, Joomla, Twitter Bootsrap, Foundation, CakePHP": c'est ce que je cherchais depuis le début
Beaucoup de potentiels clients n'ont pas besoin d'être "éduqués", ils savent ce qu'ils veulent, beaucoup d'ailleurs ont déjà quelque chose en ligne et cherchent quelqu'un pour de la maintenance ou amélioration, ils savent donc les skills qui seront requis.
Tu viens de fermer la porte à tous ces clients là en "cachant" tes skills au fin fond d'un paté de texte dans une page que peu de gens cliquent
Sinon pareil que pour les tarifs niveau cours theoriques, si on arrive sur ton site parce qu'on cherche un graphiste freelance, c'est qu'on a une petite idée de ce qu'est le graphisme et de ce qu'est le freelance.


Maintenant j'aime beaucoup l'originalité du site, ca change des memes themes qu'on voit partout, y'a une vraie identité et un bon potentiel.
Je pense que la ou le bas blesse c'est parce que tu n'as pas bien défini ta niche ,du coup ton contenu part un peu tout azimut.

J'espère que ma franchise ne sera pas mal perçue et qu'elle te sera utile. Bon courage à toi

Bonjour à tous,

ça faisait longtemps! mais voici une bonne refonte de mon thème sur mon site infographiste-poitiers.fr.

Ma motivation première était le référencement de certaines parties, et l'accessibilité de celles-ci par les visiteurs.

J'en ai profité pour appliquer le framwork CSS foundation, qui permet de construire très simplement des systèmes de grille responsive.

N'hésitez pas à donner votre avis.

Merci d'avance et à bientôt
Modifié par rastaf86 (28 Feb 2014 - 11:53)

Bonjour ,

je viens de réaliser une mise à jour de mon site.
Il y a quelques mois je l'avais passé sous cakePHP, et cette fois si j'ai gardé ma structure sous Cake mais j'ai changé le design.
Je suis intéressé par vos avis, et notamment sur la navigation que j'ai souhaitée ultra simple. Le point sur lequel je me pose encore des questions c'est si je dois rajouter un bouton supplémentaire sur la page d'article ou de présentation d'un projet...

Accueil->portfolio->projet
Accueil->blog->article

Merci d'avance pour vos réponses