Votre note au 1er coup d'oeil ?





Salut à tous, je me suis mis récement à réaliser la future version de mon portfolio en full responsive.
Je me suis basé sur HTML5 pour réaliser la structure (avec les attributs role pour ARIA), ce qui est relativement nouveau pour moi.

L'idée était d'aérer le contenu afin de faciliter la lecture donc j'avais pensé à quelque chose d'un peu plus minimaliste (moins sombre que la version actuelle) et moins contraigant au niveau de l'accessibilité sur les différents navigateurs.

L'intégration de la structure du site étant terminée, il ne me reste plus qu'à réaliser la feuille de style dédiée à l'impression et à rédiger tout le contenu textuel.

Bref, avant la mise en production finale, j'aurais aimé avoir vos retours sur le sujet afin de proposer un portfolio le plus complet (et accessible) possible Smiley ravi

Voici l'adresse temporaire de cette nouvelle version: -----

Comment trouvez-vous l'ensemble ??
Modifié par LuciferX (06 Aug 2013 - 16:12)
Modérateur
'lut

Alors de manière générale les couleurs sont agréables et bien gérées, le texte bien aéré et lisible, et l'aspect pro et efficace. Après ça fait très «webdesign standard» déjà vu moult fois, mais c'est plus une appréciation personnelle, et en aucun cas une erreur.

Maintenant que j'ai abordé le positif de manière brève, je vais m'étaler sur le négatif ^^. Plus sérieusement, vu l'étiquette Smiley pro je vais gratter les détails pouvant améliorer.

Mise en page et microtypo

En parcourant les pages, je suis vite tombé sur un point qui me dérangeait, qui n'allait pas, j'ai vite trouvé la raison. Rien ne tient précisément, et pour cause: chaque élément possède ses propres alignement, avec un gros manque de continuité. Voici une petite image pour s'en rendre compte:
upload/32231-lignesforc.jpg
Autant un décrochement de temps un temps peut permettre de donner de la vie à une grille très stricte, autant là il y en a tellement que je suspecte qu'il n'y a soit pas de grilles, soit qu'elle n'est pas vraiment utilisée.

Cette image montre encore un détail problématique: deux textes de contenu côte à côte avec des tailles différentes. Dans cette situation, ça n'apporte pas vraiment de hiérarchie, c'est juste dérangeant et maladroit.
Pour le reste des problèmes typo, ça n'est pas jugeable, ce qui m'amène au problème suivant:

Dolor sit amet

Le Lorem Ipsum, notre meilleur ami ou plutôt notre meilleur ennemi. Je constate que tu l'utilise à outrance dans tes projets, cependant cela pose de ombreux problèmes:
1) On ne le lit pas, donc difficile de se rendre compte de la lisibilité, de la hiérarchie et des enchaînements logiques. (Qu'est ce que je regarde en premier? Notre oeil n'est pas attiré par un texte qu'on ne peux pas lire, du moins il ne s'y attarde pas…)
2) Ce n'est pas du faux-texte, mais du faux latin, ça n'a pas le gris typographique du français et bien de ses aspects visuels
3) On se facilite en coupant où on veut, on oublie facilement de gérer titres courts/titres longs. On oublie de créer un visuel s'adaptant à toutes sortes de situations, ce qui peut par la suite nous forcer à adapter le contenu (croiser les flux)
4) On oublie les variation dans le contenu: titres, liens, chiffres, noms, citations, mis en évidence, etc. qui changeront beaucoup l'aspect. (Sérieux, j'ai reçu des maquettes ou le graphiste n'avait pas mis un seul lien dans les contenus, aucune idée de leur visuels…)

Alors comment régler ce problème:
1) Solution court terme: Je ceux respecter mon délais tendu: je copie colle vite-fait des paragraphes de Wikipedia pour servir de faux-contenu.
2) Je récupère des articles existant, images, titres et contenus que je me force à intégrer tels quels à mon design, ce qui met en lumière pleins de problèmes. On peut se constituer un bibliothèque à réutiliser dans tous les projets, surtout garder les articles qui ont posé problèmes…

Communication

En arrivant sur le site, la première chose que je vois est un gros visuel d'un site sur halo. Ma première impression fut: «encore un site d'un ado qui se croit webdesigner». C'est une première impression, mais suivant la clientèle que tu cible, ce n'est pas forcément un bon message. Après le visuel correspond bien au sujet et c'est plutôt bien foutu comme réalisation, alors je comprend que ce soit mis en avant. Mais à côté de «l'artisan du Teck» et «HMS bausystem» on est vraiment dans un autre registre de clientèle… Je ne dis bien entendu pas qu'il faut l'enlever, mais sa mise en évidence à cet endroit à réfléchir.
Tes slides en page principale devraient selon moi être cliquable. J'ai par exemple été intéressé de voir ton projet "LES ESPACES HALO" et j'ai cherché s'il y avait un lien dans le slide. Au final, il faut aller sur le portfolio et le trouver dans la liste.
kustolovic a écrit :
'lut
Alors de manière générale les couleurs sont agréables et bien gérées, le texte bien aéré et lisible, et l'aspect pro et efficace. Après ça fait très «webdesign standard» déjà vu moult fois, mais c'est plus une appréciation personnelle, et en aucun cas une erreur.
Merci, j'ai effectivement cherché cet effet «webdesign standard» car je voulais un design simple et plaisant (tous les clients ne sont pas toujours fan de designs trop chargé )et je voulais une vitesse de chargement au top.

Me lançant pour la première fois dans le responsive, je ne voulais pas non plus faire trop compliqué.

kustolovic a écrit :
Maintenant que j'ai abordé le positif de manière brève, je vais m'étaler sur le négatif ^^. Plus sérieusement, vu l'étiquette Smiley pro je vais gratter les détails pouvant améliorer.
Merci, toute remarque constructive est la bienvenue Smiley jap

kustolovic a écrit :

Mise en page et microtypo

En parcourant les pages, je suis vite tombé sur un point qui me dérangeait, qui n'allait pas, j'ai vite trouvé la raison. Rien ne tient précisément, et pour cause: chaque élément possède ses propres alignement, avec un gros manque de continuité. Voici une petite image pour s'en rendre compte:
upload/32231-lignesforc.jpg
Autant un décrochement de temps un temps peut permettre de donner de la vie à une grille très stricte, autant là il y en a tellement que je suspecte qu'il n'y a soit pas de grilles, soit qu'elle n'est pas vraiment utilisée.

Cette image montre encore un détail problématique: deux textes de contenu côte à côte avec des tailles différentes. Dans cette situation, ça n'apporte pas vraiment de hiérarchie, c'est juste dérangeant et maladroit.

A la base, je me suis basé sur une grille (960.gs) pour réaliser le web design sur Photoshop, mais pas pour l'intégration.
Le contenu ayant tellement évolué (plein d'idées ont fusées alors que le dévelloppement était déjà en cours) que je me suis effectivement un poil éloigné de l'alignement d'origine.

En fait, j'avais pensé à 2 affichages:
- un avec une zone de contenu à gauche et une sidebar à droite
- et une autre couvrant toute la zone

Mais effectivement il faudrait peut-être mieux présenter le contenu de droite sur l'accueil ...où peut-être le supprimer (est-ce si dérangeant ?), toi-même, tu le présenterais comment ?

kustolovic a écrit :

Pour le reste des problèmes typo, ça n'est pas jugeable, ce qui m'amène au problème suivant:

Dolor sit amet

Le Lorem Ipsum, notre meilleur ami ou plutôt notre meilleur ennemi. Je constate que tu l'utilise à outrance dans tes projets, cependant cela pose de ombreux problèmes:
1) On ne le lit pas, donc difficile de se rendre compte de la lisibilité, de la hiérarchie et des enchaînements logiques. (Qu'est ce que je regarde en premier? Notre oeil n'est pas attiré par un texte qu'on ne peux pas lire, du moins il ne s'y attarde pas…)
2) Ce n'est pas du faux-texte, mais du faux latin, ça n'a pas le gris typographique du français et bien de ses aspects visuels
3) On se facilite en coupant où on veut, on oublie facilement de gérer titres courts/titres longs. On oublie de créer un visuel s'adaptant à toutes sortes de situations, ce qui peut par la suite nous forcer à adapter le contenu (croiser les flux)
4) On oublie les variation dans le contenu: titres, liens, chiffres, noms, citations, mis en évidence, etc. qui changeront beaucoup l'aspect. (Sérieux, j'ai reçu des maquettes ou le graphiste n'avait pas mis un seul lien dans les contenus, aucune idée de leur visuels…)

Alors comment régler ce problème:
1) Solution court terme: Je ceux respecter mon délais tendu: je copie colle vite-fait des paragraphes de Wikipedia pour servir de faux-contenu.
2) Je récupère des articles existant, images, titres et contenus que je me force à intégrer tels quels à mon design, ce qui met en lumière pleins de problèmes. On peut se constituer un bibliothèque à réutiliser dans tous les projets, surtout garder les articles qui ont posé problèmes…

Oui, je vois bien ce que tu veux dire, mais comme précisé dans mon 1er post:
LuciferX a écrit :
L'intégration de la structure du site étant terminée, il ne me reste plus qu'à réaliser la feuille de style dédiée à l'impression et à rédiger tout le contenu textuel.
, du coup je paufinerai encore le projet d'ici là Smiley cligne

Sinon, pour me faire une idée de la mise en forme (lorsque je réalise la structure), j'utilise aussi http://www.fillerati.com/ (ou aussi du lorem ipsum, ca dépend de mon humeur en fait) pour le texte et http://lorempixel.com/ pour les images

kustolovic a écrit :

Communication

En arrivant sur le site, la première chose que je vois est un gros visuel d'un site sur halo. Ma première impression fut: «encore un site d'un ado qui se croit webdesigner». C'est une première impression, mais suivant la clientèle que tu cible, ce n'est pas forcément un bon message. Après le visuel correspond bien au sujet et c'est plutôt bien foutu comme réalisation, alors je comprend que ce soit mis en avant. Mais à côté de «l'artisan du Teck» et «HMS bausystem» on est vraiment dans un autre registre de clientèle… Je ne dis bien entendu pas qu'il faut l'enlever, mais sa mise en évidence à cet endroit à réfléchir.

Les espaces Halo est en fait un projet personnel mais étant donné qu'il s'agit d'un travail au même titre que les autres (quoique, celui-la est vachement poussé), je pensais qu'il aurait été dommage de ne pas le mettre en avant.

Mais je vais aussi voir de ce coté-là quels visuels sont plus adéquats à mettre en avant.

Apoooo a écrit :
j'ai cherché s'il y avait un lien dans le slide. Au final, il faut aller sur le portfolio et le trouver dans la liste.

Effectivement, je vais corriger ca de ce pas Smiley biggrin
Modifié par LuciferX (28 Sep 2012 - 12:58)
Au passage, je ne sais pas qui à voté que le travail était médiocre, mais si il pouvait développer, ca serait bien aussi Smiley rolleyes
Alors, mes critiques à moi, porteront plus au niveau du code.

Première chose, la meta keywords. Elle est obsolète, son utilisation est très peu utile.

Les balises vides, c'est bof bof..

Certaines de tes div pourraient être remplacées par des balises section, je pense notamment à cette partie du code :


<div class="centre">
<section>
<article class="bloc_ico bicojn">
<header>
<div class="ctrimg ico1"></div>
<h3>Web Design</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="web-design.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicobl">
<header>
<div class="ctrimg ico2"></div>
<h3>Photographie</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="photographie.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicorg">
<header>
<div class="ctrimg ico3"></div>
<h3>Intégration Web</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="integration-web.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicovr">
<header>
<div class="ctrimg ico4"></div>
<h3>Référencement</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="referencement.html">Lire la suite</a>
</section>
</article>
</section>
</div>


Certaines de tes class sont inutiles.

Ton logo aurait pu être placer d'une autre manière qu'avec des position. Je pense aussi que tu dois revoir quelques petits trucs au niveau des placements en CSS. Trop de margin.
Un retour en haut serait le bienvenu ! Voilà.

PS : La vitesse d'un site n'est pas évaluée à partir de son design. Tu aurais pu également éditer ton message au lieu d'en mettre un autre à la suite. Voilà tout pour la page accueil ! Je verrais les autres pages plus tard.
Modifié par Knozelfhoegtj (28 Sep 2012 - 16:07)
J'allais faire la même remarque qu'au dessus, tu peux je pense te passer de certaines div et remplacer par des balises html5 adéquates (comme shella) Smiley cligne oui bon ok c'est vendredÿ
Design sympa, joli site.

Les couleurs des blocs de la home sont, en revanche, trop flashy par rapport à l'ambiance générale.
Bonjour,

En voyant les images de ton slider, je les ai d'abord prises pour des pubs (surtout que l'image du site Les espaces Halo, wouaw !). Un petit titre du genre "mes réalisations" ne serait peut-être pas de trop.

Les flèches de défilement du slider devraient peut-être être visibles en permanence et non seulement au survol. Tu t'adresses à un public qui n'est pas composé que de familiers du web.

Les lignes de tes deux colonnes "Bienvenue" et "Besoin d'un site web ?" ne sont pas alignées verticalement et ont des caractères de taille différente. Pas bon.

Tes titres "Bienvenue" et "Besoin d'un site web ?" sont en retrait à gauche par rapport aux paragraphes suivants. C'est pas très heureux et ça ajoute à l'incohérence des textes de ces deux colonnes.

Sur les autres pages, tes titres sont en retrait à gauche par rapport à tous les éléments de la colonne de texte. L'effet n'est pas très heureux. Il vaudrait mieux mettre le texte en retrait à droite. De toute façon, n'importe comment, ce retrait n'est esthétique que quand il y a plusieurs titres dans une colonne de texte.

Je ne vois pas pourquoi tu insistes sur le fait que tes maquettes sont créées sous Photoshop. Ça ne m'apparaît pas très "innovant" (je ne trouve pas le terme adéquat). De plus en plus de concepteurs web conçoivent directement la maquette dans le navigateur, ça va beaucoup plus vite.

Attention à l'orthographe :
a écrit :
Et bien sur, vous aimeriez un site ayant une apparence soigné et abordable à un prix attractif !

Et bien sûr, vous aimeriez un site ayant une apparence soignée et abordable à un prix attractif !

Tu as des phrases qui ne sont pas très correctes au niveau grammatical ou au niveau du sens :
a écrit :
Les maquettes créées sous Photoshop sauront respecter et s'adapter à la charte graphique de votre société.

Le "à" de "s'adapter à" vaut également pour "respecter" : on ne respecte pas "à" quelque chose, on respecte quelque chose, tu dois revoir ta formulation ; de plus, en disant que tes maquettes sauront respecter la charte graphique ou s'y adapter, tu dis à peu près la même chose.
a écrit :
Et bien sûr, vous aimeriez un site ayant une apparence soignée et abordable à un prix attractif !

Qu'est-ce qu'une apparence abordable ?

Sur ta page "Profil", tu sembles avoir du texte justifié sous le titre "À propos" et du texte aligné à gauche sous le titre "Mon statut juridique", et sur ta page "Services", tu as des paragraphes de moins d'une ligne et de deux lignes non complètes qui apparaissent de ce fait être alignés à gauche et non justifiés. Avec une grande proportion de paragraphes de moins de deux lignes complètes, il est préférable de mettre l'ensemble du texte en alignement à gauche, sinon l'ensemble donne l'impression d'un mélange de paragraphes justifiés et de paragraphes alignés à gauche.

Enfin, je partage les avis précédent sur l'emploi de faux texte. Ça ne permet pas de prévoir l'apparence du texte final. Or, par exemple, sur la page d'accueil de ton site actuel, tu as d'énorme blancs dans tes textes justifié en trois colonnes.

Ces blancs assez inévitables avec une justification étroite peuvent être évités avec la déclaration CSS hyphens: auto, avec préfixes navigateurs, mais ça ne marche que dans les dernières versions de ceux-ci, et encore, pas de tous.

Sinon, graphiquement, ça me paraît simple et beau, et bien codé en plus, mais, bon, les détails dans un éventuel autre post (et il est plus facile de s'étendre sur les défauts que sur les qualités).
Modifié par thierry (28 Sep 2012 - 21:12)
Clair | propre | net le trio gagnant.
Un peu beaucoup de couleurs mais perso j'aime bien.

Les polices des titres sont sympas. Le logo casse pas des briques mais au moins il y en a un et puis tout est clean.

En revanche, mais c'est du détail,
a écrit :
A propos

Praesent fringilla, eros et tristique tempus, libero metus porttitor velit, at ultrices eros dolor placerat nunc. Fusce ac egestas ante.


Kezako ? Tu veux nous apprendre le Lorem Ipsum? Smiley lol (je rigole, j'ai capté que ce n'était pas terminé)

Plus sérieusement :
La taille de police du texte "besoin d'un site web" est plus petite que celle du texte de "bienvenue", je ne sais pas si c'est voulu mais ce n'est pas très heureux.

Ton formulaire laisse passer plein de chose comme un numéro de tél impossible avec des lettres, ce qui peut se résoudre facilement en PHP et déjà un peu avec le input type="tel".

Look this : http://www.alsacreations.com/tuto/lire/1403-formulaire-html5-type-tel.html

Bref, j'aime beaucoup mais tu peux améliorer à mon sens ces petits détails.
Knozelfhoegtj a écrit :
Alors, mes critiques à moi, porteront plus au niveau du code.

Première chose, la meta keywords. Elle est obsolète, son utilisation est très peu utile.
Pour Google, oui mais pas forcément pour les autres moteurs de recherches et annuaires.

Knozelfhoegtj a écrit :

Les balises vides, c'est bof bof..
Tu parles de quoi exactement ?

Knozelfhoegtj a écrit :

Certaines de tes div pourraient être remplacées par des balises section, je pense notamment à cette partie du code :


<div class="centre">
<section>
<article class="bloc_ico bicojn">
<header>
<div class="ctrimg ico1"></div>
<h3>Web Design</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="web-design.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicobl">
<header>
<div class="ctrimg ico2"></div>
<h3>Photographie</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="photographie.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicorg">
<header>
<div class="ctrimg ico3"></div>
<h3>Intégration Web</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="integration-web.html">Lire la suite</a>
</section>
</article>
<article class="bloc_ico bicovr">
<header>
<div class="ctrimg ico4"></div>
<h3>Référencement</h3>
</header>
<section class="sec_ico">
<p>Vestibulum sit amet neque eu neque suscipit consequat quis vel risus vestibulum.</p>
</section>
<section class="sec_ico_lien">
<a href="referencement.html">Lire la suite</a>
</section>
</article>
</section>
</div>


SuperMerguez a écrit :
J'allais faire la même remarque qu'au dessus, tu peux je pense te passer de certaines div et remplacer par des balises html5 adéquates (comme shella) Smiley cligne oui bon ok c'est vendredÿ
N'étant pas pas vraiment familiarisé avec le HTML5 (j'avais un peu peur d'en faire trop), je vous avouerai que de ce coté là j'ai encore beaucoup à apprendre. Smiley confused

Knozelfhoegtj a écrit :

Certaines de tes class sont inutiles.
Tu veux parler de quelles classes, car j'ai du en créer certaines afin de mieux cibler les éléments pour le responsive design.

Knozelfhoegtj a écrit :

Ton logo aurait pu être placer d'une autre manière qu'avec des position. Je pense aussi que tu dois revoir quelques petits trucs au niveau des placements en CSS. Trop de margin.
Un retour en haut serait le bienvenu ! Voilà.
Pour le logo, est-ce que ca pose un réel problème ?
Pas faux pour les css, je vais tacher d'alléger au maximum l'ensemble.
Pour le retour en haut, je vais voir ce que je peux faire.

Knozelfhoegtj a écrit :

PS : La vitesse d'un site n'est pas évaluée à partir de son design.
Non, mais avec un design plus chargé, la vitesse de connexion pourrait s'en ressentir sur mobiles avec le chargement des images (puisque le site est responsive), du coup je ne voulais pas trop surcharger l'ensemble.

Knozelfhoegtj a écrit :
Tu aurais pu également éditer ton message au lieu d'en mettre un autre à la suite. Voilà tout pour la page accueil ! Je verrais les autres pages plus tard.
C'est pas faut, je dois t'avouer que je n'ai pas fait attention, mais promis, je ferai gaffe la prochaine fois Smiley langue


jb_gfx a écrit :
Design sympa, joli site.

Les couleurs des blocs de la home sont, en revanche, trop flashy par rapport à l'ambiance générale.
Exact, un ami vient aussi de me faire la réflexion la dessus, je vais essayer de trouver des couleurs collant plus avec le thème utilise.

thierry a écrit :
Bonjour,
En voyant les images de ton slider, je les ai d'abord prises pour des pubs (surtout que l'image du site Les espaces Halo, wouaw !). Un petit titre du genre "mes réalisations" ne serait peut-être pas de trop.
Bonne idée, du coup l'info n'en sera que plus pertinente.

thierry a écrit :
(surtout que l'image du site Les espaces Halo, wouaw !)
Merci Smiley ravi

thierry a écrit :
Bonjour,
Les flèches de défilement du slider devraient peut-être être visibles en permanence et non seulement au survol. Tu t'adresses à un public qui n'est pas composé que de familiers du web.
Oui, mais non j'ai envie de dire sur ce coup là Smiley lol , le slider prenant une place importante au sein du template il y a quand même peu de chance qu'un visiteur ne le survole pas avec sa souris, de plus, il tourne automatiquement et n'est jamais qu'une preview de ce que l'on peut retrouver dans mes références.
Après, c'est un choix personnel, mais est-ce un mauvais choix ?

thierry a écrit :

Les lignes de tes deux colonnes "Bienvenue" et "Besoin d'un site web ?" ne sont pas alignées verticalement et ont des caractères de taille différente. Pas bon.
Ca titillait aussi kustolovic, c'est donc un point que je vais améliorer.

thierry a écrit :

Tes titres "Bienvenue" et "Besoin d'un site web ?" sont en retrait à gauche par rapport aux paragraphes suivants. C'est pas très heureux et ça ajoute à l'incohérence des textes de ces deux colonnes.
C'était un effet voulu mais effectivement, après réflexion, peut-être pas la meilleure idée Smiley decu

thierry a écrit :

Sur les autres pages, tes titres sont en retrait à gauche par rapport à tous les éléments de la colonne de texte. L'effet n'est pas très heureux. Il vaudrait mieux mettre le texte en retrait à droite. De toute façon, n'importe comment, ce retrait n'est esthétique que quand il y a plusieurs titres dans une colonne de texte.
Dacodac, en fait, je ne voulais pas donner un aspect trop carré avec l'alignement de mes textes, mais comme je viens de le dire je vais modifier ca sur l'acceil et harmoniser le tout sur les autres pages.

thierry a écrit :

Je ne vois pas pourquoi tu insistes sur le fait que tes maquettes sont créées sous Photoshop. Ça ne m'apparaît pas très "innovant" (je ne trouve pas le terme adéquat). De plus en plus de concepteurs web conçoivent directement la maquette dans le navigateur, ça va beaucoup plus vite.
Je voulais juste dire que j'avais utilisé un système de grille uniquement au moment de la conception du design avant de le coder afin de mieux percevoir le rendu final.
Après j'ai toujours travaillé comme ca, mais je te rassure le design de base était assez somaire et me permettait surtout de visualiser l'allignement des eléments à l'aide des grilles.
Ca dépend aussi du travail réalisé, il m'arrive des fois de travailler en temps que webdesigner pour un ami et dans ce cas je ne vais pas réaliser son travail à sa place.
Bref, ta remarque est pertinente mais je pense que ca dépend en fait de la finalité du projet.
D'ailleurs, en général pour des projets professionnels, le client veut souvent faire des changements sur le design que je lui propose et j'ai bien plus facile (et ca va aussi plus vite) de faire des modifs dans Photoshop plutôt que de devoir ré-adapter un projet démarré car il arrive parfois que les demandes soient un peu farfelues.
Et puis entre le webdesign et l'intégration, je ne suis pas soumis au même précompte professionnel et charges salariales, ce qui me permet de travailler le pour le webdesign au forfait alors que pour l'intégration je travaille à l'heure.


thierry a écrit :

Attention à l'orthographe :
Et bien sur, vous aimeriez un site ayant une apparence soigné et abordable à un prix attractif !

Et bien sûr, vous aimeriez un site ayant une apparence soignée et abordable à un prix attractif !
Merci, je n'y avait pas fait attention, je vais être plus vigileant car si il y en a sur l'accueil, il y en a peut-être ailleurs Smiley hum

thierry a écrit :

Tu as des phrases qui ne sont pas très correctes au niveau grammatical ou au niveau du sens :

Les maquettes créées sous Photoshop sauront respecter et s'adapter à la charte graphique de votre société.

Le "à" de "s'adapter à" vaut également pour "respecter" : on ne respecte pas "à" quelque chose, on respecte quelque chose, tu dois revoir ta formulation ; de plus, en disant que tes maquettes sauront respecter la charte graphique ou s'y adapter, tu dis à peu près la même chose.
Zut, je pensais que ma formulation était bonne, et en plus effectivement je me répète, bref va falloir que je réalise un vrai travail de fond pour mettre en forme le contenu textuel !

thierry a écrit :

Et bien sûr, vous aimeriez un site ayant une apparence soignée et abordable à un prix attractif !

Qu'est-ce qu'une apparence abordable ?
Une apparence correspondant aux besoins du client Smiley biglove

thierry a écrit :

Sur ta page "Profil", tu sembles avoir du texte justifié sous le titre "À propos" et du texte aligné à gauche sous le titre "Mon statut juridique", et sur ta page "Services", tu as des paragraphes de moins d'une ligne et de deux lignes non complètes qui apparaissent de ce fait être alignés à gauche et non justifiés. Avec une grande proportion de paragraphes de moins de deux lignes complètes, il est préférable de mettre l'ensemble du texte en alignement à gauche, sinon l'ensemble donne l'impression d'un mélange de paragraphes justifiés et de paragraphes alignés à gauche.
C'est vrai que le rendu n'est effectivement pas au top, je vais essayer de corriger ca.
Modifié par LuciferX (29 Sep 2012 - 17:05)
thierry a écrit :

Enfin, je partage les avis précédent sur l'emploi de faux texte. Ça ne permet pas de prévoir l'apparence du texte final. Or, par exemple, sur la page d'accueil de ton site actuel, tu as d'énorme blancs dans tes textes justifié en trois colonnes.
Au vu de tous les points soulevés dans ce post, j'ai l'impression qu'avant de rédiger tout le texte, j'ai encore pas mal de boulot devant moi, donc pour l'instant ce point là attendra !

thierry a écrit :

Ces blancs assez inévitables avec une justification étroite peuvent être évités avec la déclaration CSS hyphens: auto, avec préfixes navigateurs, mais ça ne marche que dans les dernières versions de ceux-ci, et encore, pas de tous.
N'étant implanté que dans peu de navigateurs, je m'en passerai sur ce projet, mais merci quand même pour l'info, je ne connaissai pas cette déclaration.

thierry a écrit :

Sinon, graphiquement, ça me paraît simple et beau, et bien codé en plus
jmlapam a écrit :
Clair | propre | net le trio gagnant.
Un peu beaucoup de couleurs mais perso j'aime bien.

Les polices des titres sont sympas. Le logo casse pas des briques mais au moins il y en a un et puis tout est clean.
Merci à vous 2, c'était l'effet recherché !

thierry a écrit :

et il est plus facile de s'étendre sur les défauts que sur les qualités).
En même temps, c'est pour ca que j'ai créé ce topic. Smiley biggrin

jmlapam a écrit :
Plus sérieusement :
La taille de police du texte "besoin d'un site web" est plus petite que celle du texte de "bienvenue", je ne sais pas si c'est voulu mais ce n'est pas très heureux.
En fait si, le texte que j'ai placé étant trop gros pour tenir dnas la zone sans créer un vide sous la présentation, c'est une solution que j'avais retenu, mais comme la police des titres de ces catégorie pèche aussi, c'est donc un point que je DOIS améliorer !

jmlapam a écrit :

Ton formulaire laisse passer plein de chose comme un numéro de tél impossible avec des lettres, ce qui peut se résoudre facilement en PHP et déjà un peu avec le input type="tel".

Look this : http://www.alsacreations.com/tuto/lire/1403-formulaire-html5-type-tel.html

Bref, j'aime beaucoup mais tu peux améliorer à mon sens ces petits détails.
En fait c'est fait exprès car je préfère laisser au visiteur le choix de m'envoyer un numéro sous la forme de 04/12.34.56 (la plupart du temps, ils l'écrivent de cette façon) plutôt que 04123456, mais ca ne m'a jamais posé de problèmes jusqu'ici.


Merci à tous pour vos retours, ca va en faire des points à corriger Smiley murf
Modifié par LuciferX (28 Sep 2012 - 23:21)
a écrit :

Exact, un ami vient aussi de me faire la réflexion la dessus, je vais essayer de trouver des couleurs collant plus avec le thème utilise.


Tu peux garder les mêmes couleurs et juste baisser la saturation.
Modérateur
jb_gfx a écrit :

Exact, un ami vient aussi de me faire la réflexion la dessus, je vais essayer de trouver des couleurs collant plus avec le thème utilise.


Tu peux garder les mêmes couleurs et juste baisser la saturation.
Quand j’exprimais mon avis personnel sur le design «classique», je ne parlais pas forcéement de faire un design plus chargé (je suis pas fan du tout de ça), mais plutôt quelque chose de moins «standard». Dans ce point de vue, les quatre couleurs flashy, j'ai adoré sur ton site, c'est actuellement le point qui donne de la vie et de la personnalité à ton site. Je dis pas d'en mettre partout bien au contraire, mais j'aime bien ctte petite touche hors du «standard».

Pour macritique sur le "halo site" j'ai hésité, s'une part je suis pas fan de ce genre de design chargé, mais en même temps la réalisation est vraiment bien foutue, léchée, et colle au style/public cible. Ce qui en fait un de tes meilleurs travaux de ton portfolio. À relativiser donc ^^

a écrit :

Mais effectivement il faudrait peut-être mieux présenter le contenu de droite sur l'accueil ...où peut-être le supprimer (est-ce si dérangeant ?), toi-même, tu le présenterais comment ?

Régler un peu les alignements (verticaux et horizontaux), mettre la même taille de police. Après je ne pense pas que d'avoir 2 colonnes est dérangeant.

a écrit :
Au vu de tous les points soulevés dans ce post, j'ai l'impression qu'avant de rédiger tout le texte, j'ai encore pas mal de boulot devant moi, donc pour l'instant ce point là attendra !

N'éxagerons pas, ce site est nettement au-dessus du précédent, et les points relevés sont plutôt des détails. La base est très bien. Et puis comme dit avant, le Lorem Ipsum n'aide pas, puisque tu fais toi-même textes&design, je te conseillerais de rédiger les textes, puis de corriger les détails (Autant le faire sur la version finale).

a écrit :

En fait c'est fait exprès car je préfère laisser au visiteur le choix de m'envoyer un numéro sous la forme de 04/12.34.56 (la plupart du temps, ils l'écrivent de cette façon) plutôt que 04123456, mais ca ne m'a jamais posé de problèmes jusqu'ici.

D'autant plus que tu ne gères pas une énorme bdd avec + de 1000 enregistrement par jour, et un système qui introduit automatiquement le numéro dans les téléphones…
kustolovic a écrit :
Tu peux garder les mêmes couleurs et juste baisser la saturation.
J'ai modifié les couleurs vers un coté plus pastel, comment trouvez-vous le rendu ?

kustolovic a écrit :
Régler un peu les alignements (verticaux et horizontaux), mettre la même taille de police. Après je ne pense pas que d'avoir 2 colonnes est dérangeant.
Voila, j'ai remodelé l'ensemble et étoffé le texte de gauche pour que tout "tienne" au même niveau.

kustolovic a écrit :
N'éxagerons pas, ce site est nettement au-dessus du précédent, et les points relevés sont plutôt des détails. La base est très bien. Et puis comme dit avant, le Lorem Ipsum n'aide pas, puisque tu fais toi-même textes&design, je te conseillerais de rédiger les textes, puis de corriger les détails (Autant le faire sur la version finale).
La struture étant établie, je vais d'abord régler les petits détails soulevé dans ce topic puis je m'attaquerai sérieusement au texte.

thierry a écrit :

Sur ta page "Profil", tu sembles avoir du texte justifié sous le titre "À propos" et du texte aligné à gauche sous le titre "Mon statut juridique", et sur ta page "Services", tu as des paragraphes de moins d'une ligne et de deux lignes non complètes qui apparaissent de ce fait être alignés à gauche et non justifiés. Avec une grande proportion de paragraphes de moins de deux lignes complètes, il est préférable de mettre l'ensemble du texte en alignement à gauche, sinon l'ensemble donne l'impression d'un mélange de paragraphes justifiés et de paragraphes alignés à gauche.
J'ai modifié la page, du coup, le rendu me semble plus acceptable.

thierry a écrit :
Bonjour,
En voyant les images de ton slider, je les ai d'abord prises pour des pubs (surtout que l'image du site Les espaces Halo, wouaw !). Un petit titre du genre "mes réalisations" ne serait peut-être pas de trop.
J'ai rajouté un ruban sur le slider, maintenant c'est plus clair Smiley ravi

thierry a écrit :

Les lignes de tes deux colonnes "Bienvenue" et "Besoin d'un site web ?" ne sont pas alignées verticalement et ont des caractères de taille différente. Pas bon.
thierry a écrit :

Tes titres "Bienvenue" et "Besoin d'un site web ?" sont en retrait à gauche par rapport aux paragraphes suivants. C'est pas très heureux et ça ajoute à l'incohérence des textes de ces deux colonnes.
C'est aussi corrigé !
Modifié par LuciferX (29 Sep 2012 - 16:23)
a écrit :
Première chose, la meta keywords. Elle est obsolète, son utilisation est très peu utile.

Pour Google, oui mais pas forcément pour les autres moteurs de recherches et annuaires.

+1 : c'est vrai pour Google, mais pas nécessairement pour les autres moteurs de recherche, on l'oublie trop souvent.
a écrit :
Tu peux garder les mêmes couleurs et juste baisser la saturation.

Pas d'accord du tout. J'aime les couleurs vives et saturées. Garde-les comme ça.
thierry a écrit :
+1 : c'est vrai pour Google, mais pas nécessairement pour les autres moteurs de recherche, on l'oublie trop souvent.
Dans mon cas, c'est clair que ce n'est pas la meta la plus importante, mais dans le cas où tu afficherais de la pub provenant de Google Adsense sur un site, cela permet aussi de mieux cibler le type de pub à diffuser en rapport avec le dit contenu de cette meta... et donc d'harmoniser ta page entre les pubs et le contenu Smiley biggrin

Alors oui Google n'utilise plus cette meta pour les recherches sur son moteur, mais bien pour d'autres services.
 
Modifié par LuciferX (29 Sep 2012 - 16:56)
Salut tout le monde, j'ai enfin réussi à trouver un peu de temps libre pour finaliser mon portfolio.

Bref, l'ayant mis en ligne ce week-end, je reviens vers vous pour avoir l'avis des meilleurs quand aux optimisations possibles (contenu rédactionnel, code, ...) Smiley ravi

Et voici l'adresse

Merci