[Avis] CreALX

psykoko · 2 Décembre 2010

Bonjour à tous,

Je viens vous demander un avis sur le design du site suivant : www.crealx.com
Je recherche vos avis sur :
1- La forme : logo, design, interaction, etc...
2- Le fond : est-ce suffisamment clair, que manque-t-il, etc...

Merci beaucoup pour vos retours !

passion · 2 Décembre 2010

perso, je trouve qu'il n'a aucune identité.
En arrivant dessus, on ne sait pas quoi va traiter ton site !

Et tu as ceci :

Code:

</head>
<br/>
<body>

le <br /> n'a pas sa place

psykoko · 2 Décembre 2010

Ok pour le <br/>...
Pour l'identité, je comprends ce que tu veux dire : il n'y a aucun visuel relatif au webdesign, c'est ça?
Ou est ce qu'un sous titre au logo serait plus parlant?

reglisse · 2 Décembre 2010

Si j'ai bien compris c'eSt un site de webdesigner et tu demandes de l'aide pour le design du site !!! Moi je suis vraiment pas un pro du graphisme comme beaucoup ici on est pas tous webdesigner alors je vais m'astenir de conseils

psykoko · 2 Décembre 2010

Ce que je recherche ce sont des avis d'utilisateur du web

C'est plus dans ce sens... Savoir ce qu'un utilisateur pense d'un site.
A force d'avoir la tête dedans, on n'a plus le recul nécessaire... Donc c'est juste des avis, de quidam, pro ou pas, dans le milieu ou pas, qu'importe !

smorge · 2 Décembre 2010

Salut,
sur la forme, ce qui me heurte c'est la typographie serif de tes h1, comme l'esprit du site se veut plutôt moderne ça détonne un peu je trouve

psykoko · 2 Décembre 2010

Mmm... Century Gothic te botte pas

Plutôt une Verdana classique?

smorge · 2 Décembre 2010

Je pense que c'est bien de mettre un police différente sur les titres, mais sur un site plutôt moderne deux sans-serif s'intégrent mieux (mon avis) Sinon bien sûr que j'adore la century

psykoko · 2 Décembre 2010

Ah

Je suis rassuré... Bon, je vais chercher une sans serif plutot sympa et pas trop originale

Merci !

smorge · 2 Décembre 2010

Bah tu sais, à moins d'embarquer la fonte le choix est plutôt limité pour être sûr que l'internaute lambda l'aura à coup sûr sur son pc...

psykoko · 2 Décembre 2010

Moauis, j'ai mis un trebuchet, et sinon, un verdana... et au pire une famille sans-serif

C'est mieux?

spout · 2 Décembre 2010

- 10 tags <h1> :roll:
- Il y a 13 warnings de validation

psykoko · 2 Décembre 2010

Ah !!!!! Merci, je me suis mélangé les pinceaux dans mes H

Voilà qui est mieux ! Pour la validation... chacun pense ce qu'il veut, mais je développe en fonction des standards, mais parfois... :evil:

SpeedAirMan · 3 Décembre 2010

Design pas mal, j'aime bien.

... maintenant passons aux critiques :twisted:

Ton site ne s'affiche pas totalement sur les écrans ayant une résolution de 1024px de largeur.

OMG → portfolio, les captures d'écran sont réduites via HTML ! 8O
Très très mauvaise pratique ;-)
(tes visiteurs chargent l'image complète / grand format même s'ils ne regardent que la miniature, ET, le navigateur doit redimensionner l'image "artificiellement", ce qui nécessite + de ressources)

Attention à la lisibilité / au contraste. Le bloc vert = niquel, mais le bloc fuschia ou bleu par exemple, c'est déjà plus difficile à lire. Peut être choisir une couleur de texte différente ?

Les liens sont mieux reconnaissables s'ils sont soulignés (règle de base en ergonomie web / utilisabilité).
D'ailleurs, ce type de navigation n'est vraiment pas... disons, efficace (j'imagine - voire je suis sûr). C'est peu commun d'avoir les liens de navigation principale mis un peu partout comme ça, et en bas.

Pas de possibilité d'utiliser la touche "Retour" car mauvaise utilisation de JavaScript. Il y'a des scripts pour corriger ça ;-) (ex: http://benalman.com/projects/jquery-bbq-plugin/ )

Perso, j'utilise énormément le bouton de la mollette de la souris pour naviguer : un clic sur celle ci sur un lien ouvre la nouvelle page dans un nouvel onglet. Si j'ouvre la page "qui suis-je" dans un nouvel onglet, je perds totalement la navigation. Après je fais quoi ? Je pars ?

<img src='../_media/_img/logo.png' style='width:350px;' alt='creALX logo'>

Ai-je bien vu ? Du CSS "inline" plutôt que dans ta feuille de style ? DOOOOH
;-)

je développe en fonction des standards

Ah ? :mrgreen:

Code:

<table align=center>
<tr><td width=60><img src='../_media/_img/php-logo.png' alt='Logo PHP'></td><td width=60><img src='../_media/_img/ajax-logo.png' alt='Logo Ajax'></td><td width=60><img src='../_media/_img/jquery-logo.png' alt='Logo Jquery'></td><td width=60><img src='../_media/_img/mysql-logo.png' alt='Logo MySQL'></td></tr>
<tr><td>Php</td><td>Ajax</td><td>Jquery</td><td>MySQL</td></tr>
</table>

Ce sont bien des données non-tabulaires avec un markup de tableau ? :mrgreen:
;-)

D'ailleurs, à ce propos : utilise <label for="id"... pour ton formulaire (la sémantique sera meilleure, et, tes visiteurs trouveront leur curseur directement dans le champ quand ils cliqueront sur le libellé).

Encore à propos du formulaire : bouton + gros !! (je te suggère de rajouter du padding top & bottom).
Rajoute également cursor:hand;cursor

ointer; dans ton style pour le bouton (ça devrait être par défaut ça...).

"Votre projet en quelques lignes."
Fais en sorte que ça disparaisse quand on clique dessus (ça évitera au visiteur de l'effacer lui même) - via JavaScript.

Code:

<br><br>

Ce n'est pas correct d'un point de vue sémantique/syntaxe ou je ne sais quoi d'autre.
Si tu veux de l'espace, utilise les CSS !
margin-bottom:20px par exemple.

Code:

<div class="clear"></div>

Balise vide ?! Pas correct non plus (disons que ça ne pose aucun souci, mais que ce n'est pas la bonne méthode).
Y'a d'autres solutions pour "clear". Je te suggère celle ci : http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidde ... mystified/
Sinon, "overflow:hidden" fait parfois l'affaire.

Code:

<div class="footer_left">
...
<div class="footer_right">

Pourquoi faire appel à une class plutôt qu'à un id ? Il n'y a pourtant qu'un seul "footer_left" et un seul "footer_right" ?
id est + performant (plus rapide à trouver).

Code:

<div class="jaune">
<h2>portfolio</h2>
Vous trouverez ici quelques unes de mes réalisations.
</div>

Texte sans markup. J'aurai mis une balise de paragraphe personnellement (tu peux le styliser comme tu le souhaites ensuite).

Code:

<a href="#two"><img src="../_media/_img/pencil.png" alt="portfolio"> portfolio</a>

A mon sens, mauvaise façon de faire.
Tu ne devrais pas mettre l'image dans la partie HTML, mais l'afficher via background css. Tu rajoute un padding-left:24px par exemple, et voilà !

Code:

<form action="link" method="post" enctype="text/plain"></form>

???!

En présentant un site où tu proposes la création de sites internet sur un forum où on croise une grande quantité de spécialistes du web, faut s'attendre à ce que les membres regardent dans les détails ;-)

En espérant que mes commentaires te seront utiles (il n'y a rien de méchant dedans ;-) ).

psykoko · 3 Décembre 2010

Eh bien voici une critique des plus constructives ! J'attends, justement, des critiques comme celle ci !
Je vais regarder tout ça à tête reposée. Sans vouloir me justifier, j'ai jeter les bases d'un design, puis j'ai brodé autour... en trichant parfois avec les standards et en faisant du 'rapide'

Je suis en train de le peaufiner, et j'avais déjà identifié quelques une de tes remarques !
Un grand merci ! je Reco !

SpeedAirMan · 3 Décembre 2010

Merci pour la reco' :mrgreen:
Tant mieux si c'est utile ;-)

psykoko · 3 Décembre 2010

Et est ce mieux maintenant?
Je n'ai pas encore retouché les screenshot des sites(oui, c'est horrible, je sais...)... mais ça ne saurait tarder

SpeedAirMan · 3 Décembre 2010

Y'a du mieux :mrgreen:

Tout n'est pas encore parfait cependant (oui, la perfection n'existe pas, et oui : je suis vachement tatillon quand même).

Tes URLs contiennent des caractères bizarres... crealx.com/#url=%23one → à corriger.

J'ai vu que tu as modifié le menu. Y'a du mieux :mrgreen:
... mais pourquoi t'obstines-tu à le mettre en bas ? Ne penses-tu pas qu'en haut, à droite du logo, au dessus de la partie contenu principal, ce serait mieux ? Moi si :mrgreen:

Ton site n'est toujours pas totalement visible en 1024px de largeur.
En 1024x768, ton menu n'est pas toujours visible (ça dépend si l'internaute a des barres d'outils installées par exemple).
Et en 1024x600 (résolution des NetBook style eeePC par exemple), le menu ne se voit pas du tout...

Je continue également de dire que tes icônes sont mal intégrées (via CSS l'effet serait bien mieux je pense : les icônes ne seraient pas soulignées par exemple, pourtant elles seraient cliquables).
+ d'espace entre les items du menu ferait mieux je pense.

A propos d'icônes : c'est une bonne chose d'avoir rajouté des icônes pour illustrer tes titres / sections → J'aime.

Le formulaire : tu as suivi mon conseil pour le texte présent dans le champ / textarea, il disparait désormais lorsque l'on clique dessus. Cependant tu peux faire en sorte (toujours via JavaScript) qu'il réapparaisse si le champ est laissé vide et que le curseur n'est plus à l'intérieur (il y'a un exemple "live" de ce dont je suis en train de parler sur WRI même, ici, en haut de la page, juste en dessous du titre du sujet : le formulaire/champ de recherche).

J'aime moyennement la couleur du bouton au survol de la souris. Peut être que qq chose de + subtile aurait suffit (genre : foncer la couleur du texte et de la bordure).

Logo : il n'est pas cliquable (et ça, c'est une erreur - je comprend pas pourquoi je l'ai pas remarqué direct 8O haha ). Les internautes sont habitués à cliquer sur le logo qui, par convention, est (quasiment) toujours placé en haut à gauche.

Bon... au boulot ;-)

psykoko · 3 Décembre 2010

Mais il veut me faire bosser le week end

Les drôles de symboles, c'est pour gérer la touche retour arrière, comme tu le voulais

Je regarde le reste... ralalala !

SpeedAirMan · 3 Décembre 2010

Les drôles de symboles, c'est pour gérer la touche retour arrière, comme tu le voulais

Oui, mais il y'a un bug apparemment : il y'a un # (hash) en trop, transformé en %23 dans l'URL.

Ce ne sont que des suggestions d'améliorations, à toi de juger si ça en vaut la peine ou pas ;-)
Bon courage !

psykoko · 6 Décembre 2010

Tes URLs contiennent des caractères bizarres... crealx.com/#url=%23one → à corriger.

C'est réglé

... mais pourquoi t'obstines-tu à le mettre en bas ? Ne penses-tu pas qu'en haut, à droite du logo, au dessus de la partie contenu principal, ce serait mieux ? Moi si :mrgreen:

Effectivement, c'est mieux comme ça maintenant, j'approuve

Je continue également de dire que tes icônes sont mal intégrées (via CSS l'effet serait bien mieux je pense : les icônes ne seraient pas soulignées par exemple, pourtant elles seraient cliquables).
+ d'espace entre les items du menu ferait mieux je pense.

J'ai bien intégré l'icône dans le css... mais j'avais fait une boulette... voilà qui est mieux !

Le formulaire : tu as suivi mon conseil pour le texte présent dans le champ / textarea, il disparait désormais lorsque l'on clique dessus. Cependant tu peux faire en sorte (toujours via JavaScript) qu'il réapparaisse si le champ est laissé vide et que le curseur n'est plus à l'intérieur (il y'a un exemple "live" de ce dont je suis en train de parler sur WRI même, ici, en haut de la page, juste en dessous du titre du sujet : le formulaire/champ de recherche).

Un petit onBlur et c'est parti

J'aime moyennement la couleur du bouton au survol de la souris. Peut être que qq chose de + subtile aurait suffit (genre : foncer la couleur du texte et de la bordure).

Effectivement, c'était plutôt flashy

Voilà qui est plus sobre !

Logo : il n'est pas cliquable (et ça, c'est une erreur - je comprend pas pourquoi je l'ai pas remarqué direct 8O haha ). Les internautes sont habitués à cliquer sur le logo qui, par convention, est (quasiment) toujours placé en haut à gauche.

It's done, c'était un oubli ! Pas bien !

Dans tous les cas un grand merci. J'avais l'impression que WRI était devenu moins populaire, moins pointu... Et ce sont des rencontres comme celles-ci qui me rassurent

SpeedAirMan · 6 Décembre 2010

héhé, merci, ça me flatte et me touche

Reste
- le design pas entièrement visible en 1024px
- les images rétrécies artificiellement

Concernant les icônes du menu, perso j'aurai fait autrement je pense (afin que l'icône, elle aussi, soit cliquable).

Bon boulot ;-)

psykoko · 6 Décembre 2010

Pour les images pas réduites, je m'en occupe...
Pour le design pas visible en 1024px

Il faut que je regarde.

J'ai rajouté des petits textes dans le footer. Qu'en dites vous ? (les liens ne sont pas actifs pour l'instant...)

psykoko · 6 Décembre 2010

Ouf !
Voilà tout terminé

J'attends vos avis sur le texte dans le footer...

SpeedAirMan · 8 Décembre 2010

Reste le problème de la largeur : tes clients / prospects n'accèderont pas toujours à ton site avec un écran supérieur à 1024px de large ;-)

Sinon : j'aime bien !
Beau boulot encore une fois ;-)

Les liens du footer ne fonctionnent pas effectivement.

Peut être qu'il y'a d'autres images qui seraient + harmonieuses pour parler de PHP, MySQL, jQuery etc. ?
Autre chose : te voilà maintenant avec "beaucoup" de contenu ! Le tout sur une seule et unique page. Trop de contenu pour une seule page si tu veux mon avis. Tu pourrais gagner en référencement si tu créais des pages différentes / indépendantes pour chaque section.

CF formulaire : "Exemples de siteS" ;-) (manque un "s")

psykoko · 8 Décembre 2010

Pour la largeur... effectivement, à revoir.
Pour les images des techno, je vais en créer moi même, mais il me faut un peu de temps, pour harmoniser tout ça.

Concernant le nombre de page, oui, tu as parfaitement raison, je vais découper tout ça en plusieurs pages, je gagnerais en référencement et en linking interne, c'est certains !
Encore une fois merci pour tous tes conseils !!!

psykoko · 29 Décembre 2010

Bonjour à tous,

Je viens de finaliser tout le site, en changeant le système, rajoutant des pages, etc.
Qu'en dites vous?

pinrolland · 29 Décembre 2010

bonsoir psycho !! koko pardon !
je te dis que ce que j'aime pas ...
-trop large ton site
-tes questions "lire la suite". la suite il faut la lire au dessus. c'est pas naturel. j'aurais mis les questions au dessus des réponses !!
- la différence de taille entre la police des questions (fond noir) et la police des réponses (font couleur) est trop importante.