Bonjour à tous !

Je me présente, Léo nouveau membre du forum, mais lecteur depuis un moment déjà Smiley smile
Jeune diplômé d'un BTS Communication visuel GEP, je cherche à m'installer en tant que designer graphique indépendant sur Strasbourg.

Bref, je viens surtout vous présenter mon site qui me servira de portfolio pour démarcher mes futurs clients et leurs présenter mes travaux, mes prestations, etc. Il s'agit d'un template WordPress codé par mes soins (nommé Wundergrid) et que j'ai voulu responsive. Pour se faire je suis parti de zéro, et utilisant Sass et Compass. J'ai appris HTML, CSS et quelques bonnes bases de PHP pour l'occasion.

Il s'agit de mon premier projet web, je vous demande donc d'être critiques et de me dire franchement ce que vous en pensez tant au niveau technique qu'esthétique. N’hésitez pas à me faire part de vos remarques sur d'éventuels bugs, erreurs de conception, etc.

Lien : http://www.leop.fr/

Mille merci !
Léo
Bonjour,
Niveau design c'est très bien, j'aime beaucoup tes illustrations.

Par contre niveau code.... ouf! Rien que sur la page d'Accueil:

<div class="post-content">
					<h3>Bonjour</h3>
						<h5>Je suis designer graphique indépendant.</h5>

				<ul>
					<li><h4>Pourquoi choisir un designer freelance plutôt qu'une agence de communication&#8239;?</h4></li>
					<li>
						<h5>La réactivité</h5>
							<p>Pas besoin de réunir toute une équipe pour valider chaque étape de la conception, je peux vous répondre immédiatement au téléphone ou par mail.</p>
					</li>
					<li>
						<h5>Le prix</h5>
							<p>Cette structure indépendante fonctionne avec peu de frais tout en offrant un travail professionnel de qualité. Par conséquent mes tarifs seront forcément moins élevés que ceux d'une agence. Il faut savoir que les agences elles-mêmes passent par des freelance pour répondre à leurs commandes.</p>
					</li>
					<li>
						<h5>La proximité</h5>
							<p>Un interlocuteur unique, gérant toute les étapes de la conception à la réalisation.</p>
					</li>
				</ul>
		</div>

Ta hiérarchie de titre n'est pas bonne, tu dois commencé par h1 puis h2, ainsi de suite.
Les liste non-ordonné ne serve pas à mettre du texte comme tu le fais. Comme le non le dit, elles servent pour des listes.

Du coup tu aurais pu utiliser les liste non-ordonné pour ta barre de menu au lieu d'une série de div qui contient un a ...

Bref, je te conseil vivement de revoir tes bases, parce que là ça va pas du tout.
Tu as raison ça fait (gros) désordre Smiley ohwell
Je vais revoir ça tout de suite (et en profiter pour revoir mes bases également).

Merci Julie pour ta franchise Smiley smile
Modifié par Leo-p (10 Sep 2014 - 17:33)
Bonjour,

De bonnes choses dans les réalisations, mais un site qui peut vous décrédibiliser sur certains aspects. Peut-être supprimer ou complètement reformuler certains points.

Je placerais le footer en bas, par exemple sur la home. Pour éviter l'effet "site optimisé uniquement pour les écrans 1024x768".

Les illustrations sont très sympas, elles manquent cependant un peu d'unité au niveau des tailles et des fonds (un coup rond, un coup sans… ).

Pas fan des rectangles arrondis en bas pour les liens sociaux, juste placer le texte et le centrer, ou bien les pictos.

Ce bleu microsoft et ce gris vert s'accordent modérément avec le orange. Je prendrais un gris plus neutre, sans le bleu. Le "Bonjour" en bleu ne me semble pas indispensable. Votre texte de présentation est terriblement scolaire « JE SUIS LÉO… ». À reformuler de façon plus "enlevée" en vous faisant aider.

Dans les réalisations il y a vraiment des choses sympas ! Franchement, ça suffirait presque à faire votre site. Le reste ne me convainc pas réellement qui vient presque casser votre travail.
De nombreux sites de graphistes se résument à un portfolio, quelques références, compétences et outils utilisés. Ce qui peut tenir en une page et en quelques lignes.

Il manque une grille dans votre site, les éléments se calent parfois de façon inappropriée, ce qui peut nuire à la composition d'ensemble.

La page des prestations me gêne. Elle ressemble à un fourre tout digne d'un imprimeur, pas d'un graphiste. Un graphiste travaille sur tout types de supports imprimés et/ou écrans. Là pour le coup, ça fait très amateur, genre qui ne maîtrise pas et qui nous fait une liste de courses. Même les agences de com sont souvent spécialisées, là vous vous présentez comme quelqu'un qui sait "tout" faire et du coup c'est votre crédibilité qui est mise en doute.
Les commentaires à côté des pictos sont plus scolaires les uns que les autres. On sent que vous vous êtes forcé et les textes sont creux et/ou superficiels. Par exemple pour "Catalogue" : « Organisez clairement des informations complexes. Cet outil de communication performant et complet vous permettra d’augmenter vos ventes. »
Quelle définition limitée et rabougrie d'un catalogue ! C'est dans le cahier des charges qu'on décide de la définition de ce que sera le catalogue. Là vous nous faites un lexique limité, indigeste et rigide. Et surtout vous ne parlez pas de vos compétences techniques, graphiques, conceptuelles, de coaching… De votre expertise réelle (sans quoi il vaut mieux ne rien mettre).

Il faut revoir vos classique et essayer de comprendre comment travaillent les professionnels, quelles sont les bases de la communication (branding, marketing, design… ). Allez voir dans les agences, observez les sites d'agences inscrites à l'AACC pour comprendre et analyser leur langage et leurs codes de communication. Observez les sites de graphistes confirmés…

En fait, à vouloir trop argumenter et rassurer, fautes d'arguments professionnels convaincants, vous obtenez l'effet inverse.

C'est vraiment dommage, car le portfolio et les illustrations sont vraiment sympas et prouvent de réelles qualités. Mais c'est mal amené, façon imprimeur qui n'a pas les codes ni la connaissance de ce qu'est la communication. Hors un graphiste doit obligatoirement se positionner dans un univers communicationnel. Sauf pour faire de l'éxé.

Trouvez un fil conducteur rédactionnel et conceptuel autour duquel s'articulerait votre portfolio, votre communication… Inutile de faire compliqué. Un Graphiste n'est pas un rédacteur.

Par exemple là, quand j'arrive sur la home, j'ai un picto".P" sans nom ni fonction, une mise en page scolaire pas très engageante, une colonne Morris vide, pas de concept, des arguments de solderie en liquidation, une pseudo "structure" bidon et un style qui part dans différentes directions au fil des pages… Ça fait beaucoup. Smiley sweatdrop

Pour conclure, je dirais que votre site montre des qualités indéniables, mais que sur les points énumérés ci-dessus il y a un gros travail de documentation, d'analyse à faire. Ce travail se fait en général en apprenant et en travaillant aux côtés de professionnels.
Donc à vous de faire vos choix en fonction de vos objectifs. Pour le moment votre site peut faire mouche pour un imprimeur avec des tarifs cassés. Pour une agence ou un client de type PME avec un vrai chef de projet, je pense que vous vous présentez de façon trop infographiste (exécutant) et/ou débutant.
Pour le conseil et l'expertise, d'autres sites de graphistes peuvent sembler plus convaincants.

Voilà pour moi. Désolé si mon avis peut paraître tranché.
Ceci dit et pour relativiser, on excusera certaines maladresses de la part d'un junior, mais bon si on peut les éviter…
En tout cas, vu votre portfolio, je ne peux que vous encourager ! Sachant que la concurrence est rude, un travail chez un employeur serait peut être préférable. Smiley cligne
En attendant la suite ? Smiley smile
Bonjour,

Vos remarques me paraissent très pertinentes, elles mettent en lumières de nombreux aspects que j'avais négligés ! Quelque part je me doutais un peu que mes textes étaient un peu à côté de la plaque Smiley ohwell

Je suis déjà en train de travailler à améliorer ces points. Je pense supprimer certaines pages, produire des textes plus crédible/vivant pour me présenter et mettre en valeurs mes compétences. J'envisage aussi la possibilité d'un travail chez un employeur, ce qui pourrait être judicieux pour commencer. Enfin voila je suis sur le coups. Je vais bien bien revoir mes classiques, observer la concurrence, analyser son langage et j'espère bien m'améliorer Smiley cligne

Merci d'avoir pris le temps d'analyser mon site, vos critiques me sont très précieuses, merci également pour vos encouragements Smiley smile
Bientôt la suite !
Merci pour votre réponse très pro. Smiley cligne

Je préfère déjà cette version. Cependant, il manque le nom et la fonction (sans quoi on peut penser que vous n'assumez pas, là on dirait une marque de fringues). C'est la base pour rassurer les recruteurs/prospects, en faisant attention de ne pas coller le logo sur les bords comme actuellement (c'est la base pour un logo).

Pour présenter les travaux, le terme "portfolio" est plus élégant. Certains clients sont bizarrement présentés. Par exemple "Psychologue" ou "pédicure", ce ne sont pas des noms de clients. Les citer comme références ou bien mettre la description (cartes… ). En faisant attention de respecter la même logique pour tout le portfolio.

Il manque un texte de présentation qui permette de vous positionner. Parlez compétences, graphisme, outils, expertise, domaines de prédilection… Une photo même pour donner de la chair à l'auteur.

Il faut rééquilibrer le positionnement des boutons et textes en haut. Le placement actuel semble arbitraire et bancal. Pourquoi pas à gauche ?

Toujours pas fan de ce bleu, il perturbe l'équilibre des couleurs, surtout des vignettes.

Quand on clique sur les boutons thématiques (Affiche… ) on ne peut plus revenir à la présentation générale sauf en cliquant sur le logo.

En attendant la suite ? Smiley smile
Modifié par spongebrain (18 Sep 2014 - 21:02)
Ah ouais! C'est beaucoup mieux niveau code!

Concernant le nouveau design, j'ai pas trop aimé arrivé directement dans tes travaux, c'est trop direct il manque une présentation, là on se demande où on est tombé, si on a sauté une page, etc. En fait je me demande si dans ton cas, vue le peu de page, s'il serait pas plus pertinent de faire un site de type "one page" ?
Je trouve aussi que l'idée du site "one page" est excellente, j'ai donc fait ça Smiley smile
J'ai ajouté mon nom et ma fonction et décollé le logo du bord (et en effet c'est tout de suite plus claire et plus propre). J'ai refondu également un peu mes textes, je pense mettre une photo ou une illustration dans la partie "à propos".

Encore merci à vous deux pour vos judicieux conseils Smiley smile
Franchement, de mon propre avis à moi même qui est le mien : c'est beaucoup mieux !! Smiley lol

Une bonne idée que de faire le site en monopage, en plus ça permet de placer la jolie illustration avec le bureau.

J'aime le prénom et le nom qui tout de suite installent le site. On sait chez qui on est ! Smiley cligne

Au registre des critiques il manque un blanc tournant à tout le site (en fait ici, les marges de gauche et de droite doivent être plus marquées). C'est non seulement tendance mais c'est une des bases de la mise en page pour que celle-ci respire, soit plus esthétique et plus agréable à lire. En impression, coller les textes sur les bords est une faute et là il est inscrit que vous êtes un graphiste print ("Graphiste" pourrait mieux convenir si vous avez quelques bases en web, ce qui semble bien être le cas). De plus le blanc tournant rapprochera le texte de gauche de l'illustration, là on a beaucoup de blanc au milieu alors que les éléments sont collés sur les bords.

Quand je clique sur une rubrique du portfolio, par exemple "Illustration", j'ai l'impression de me retrouver sur une page spécifique. Il faut que seuls les vignettes changent, pas le reste de la mise en page. Idem quand on clique/zoom sur une vignette. Sinon l'effet n'est pas agréable et on casse l'idée d'un design monopage. Au pire si cela n'est pas possible, supprimer les sous rubriques ? À vous de voir.

Pour le menu du haut, je renverrais les liens vers des ancres en gardant le menu du haut fixe pour ne pas casser le style monopage ? Là sur le coup j'ai cru changer de page…
Avez-vous pensé à un scroll fluide en jQuery ? Allez voir ici si cela vous intéresse :
http://www.blog.niums.com/jquery-defilement-fluide-scroll-vers-une-id-une-ancre/
Démonstration :
http://www.blog.niums.com/test/jquery/scrollto.html

Je n'ai testé que sur mon mac de bureau (chrome). À voir sur tablette…

Voilà pour le moment, une jolie évolution en tout cas que je préfère largement au site initialement présenté.
En attendant la suite ? Smiley smile
Modifié par spongebrain (29 Sep 2014 - 12:58)
Bonjour bonjour Smiley smile
Désolé pour cette absence un peu longue, voici donc les nouvelles :

Le blanc tournant c'est évident ! Pourquoi n'y ai-je pas pensé plus tôt ?! C'est tout de suite plus léger.
Très bonne idée le smooth-scroll en Jquery, j'ai trouvé ça parfait alors je l'ai adopté Smiley smile
Pour les filtres de catégories, j'ai aussi géré la chose à l'aide de Jquery (je commence à découvrir toutes les possibilités qu'apporte cette lib si pratique). On ne se retrouve donc plus sur une page spécifique.

Pour l'instant, j'ai choisi de laisser les articles s'ouvrir dans une nouvelle page (avec possibilité de retour vers le portfolio). Est-ce vraiment dérangeant pour l'UX ?
Techniquement je ne voyais pas comment faire pour qu'ils s'ouvrent dans la page principale sans utiliser une iframe (et ce n'est pas génial les iframes, n'est-ce pas ?! Je veux dire au niveau SEO par exemple, ou encore par rapport aux standards web ?).

Pour le menu fixe j'hésite vraiment, peut être seulement pour la version desktop alors (ça me gène un peu ce style de menu appliqués sur de si petits écrans, ils mangent le peu d'espace disponible et c'est frustrant Smiley ohwell ).

Pour finir je suis très content de l'évolution dont à bénéficier mon site grâce à vous, encore merci pour votre patience, votre suivi et votre aide précieuse Smiley smile
Modifié par Leo-p (08 Oct 2014 - 18:50)
De rien. Smiley cligne

Pour peaufiner, et histoire de chicaner…
Enlever les soulignés dans certains liens ? Décoller la baseline sous le nom ? Accentuer l'espace vertical entre le portfolio et l'à propos ? Donner une touche plus "flat" aux boutons et champs de textes encadrés (aplats en couleur) ? Tester des boutons sans coins arrondis ? Accentuer encore un peu le blanc tournant latéral ? Décoller le footer du bas de la fenêtre et lui donner plus de hauteur ? Impacter d'avantage la fonction "Graphiste… " en grossissant la taille ? Styliser et faire apparaître les flèches "up" uniquement si nécessaire ? Décoller les titres du haut quand je clique sur le menu (il faut qu'on ai un peut de blanc, jouer sur les margin ou padding) ? Unifier les interlignes différents d'un paragraphe à l'autre ?…