[Amateur] Jupload ~ Hébergeur d'images !

(reprise du message précédent)

Bien sûr que si le zéro faute existe, et même si on peut toujours optimiser, il faut se donner cet objectif. Ça s'appelle "être professionnel". Si on commence à compter les fautes et les bugs sur les deux mains en 10 secondes, rien que pour la home, c'est qu'il y a du pain sur la planche et que le site n'est pas prêt ou pas viable.

Sur la maquette actuelle, il y a 3 bugs/fautes corrigés. C'était le minimum obligatoire, mais il y a encore à faire : voir liste de mon précédent message. Allez jusqu'au bout, pour moi ce site n'est toujours pas calé en terme de présentation (je ne parle même pas de design là). Il y a des règles de mise en page qui ne sont pas respectées sur votre site, personne n'y échappe. Comme de hiérarchiser le contenu.
Ça ne demande pas forcément beaucoup de temps.

Par exemple ça part toujours en vrille pour les polices de caractère du menu. Elles doivent être corrigées maintenant, c'est quelques minutes. Le style kikoolol actuel ne s'accorde pas du tout avec le site. En plus c'est trop bold, illisible et ça bouffe le logo. Rien que ça, c'est une faute lourde.

La typo du footer est plus clean, mais celle du contenu est écrite plus petite !! Ça devrait être le contraire, c'est le contenu qui prime, pas les mentions légales. Pire, le texte "Choisissez un fichier" est écrit encore plus petit alors que c'est l'info qui prime !! C'est le monde à l'envers.
Vous devez être plus rigoureux, pro et exigeant dans la présentation. C'est là-dessus que le site sera jugé avant même que les gens l'utilisent. Un design pas assez soigné ou abouti amènera un taux de rebond important.

Sauter des lignes pour marquer les paragraphes, utiliser le bold par exemple pour le type de fichiers… Là le contenu d'information est un bloc compact avec rien qui ressort. On a pas envie de lire.

Dans le formulaire j'ai ça qui s'affiche : "Pour vous connecter, merci de changer de mot de passe ici"
Changer quoi ? Je ne suis pas inscrit. Là encore, c'est pas aboutit, pas soigné
De plus, la police tarabiscotée qui a été corrigée dans le footer n'a pas été corrigée dans le formulaire où elle est rikiki !! Ça fait pas sérieux du tout… relevez la barre !!!

Le titre "Information" ne me semble pas indispensable, il prend de la place et brouille le message, surtout en reprenant la police du logo, ça lutte avec celui-ci et ça le dévalorise. J'insiste : le logo est trop collé sur le bord du haut, c'est une faute en mise en page. Regardez sur n'importe quel site pro avec une vraie maquette, comme facebook par exemple, le logo texte n'est pas agglutiné sur le bord. Un logo doit respirer avec un espace minimal tout autour. Là encore (sauf exception) c'est impératif. Faites le !
La règle est souvent de prendre un repère dans le logo pour définir l'espace vide minimum autour de celui-ci.
Ex :
https://www.pfizer.fr/portals/0/standard/images/bloc-marque-espace-respiration-478x140.png

Au passage, regardez le design des sites sociaux comme facebook, twitter, Instagram… C'est très simple, aéré, bien structuré et on sent l'inspiration (partielle) du flat design. J'aime beaucoup la page d'accueil Instagram avec ce fond 1/3 gris bleu et 2/3 blanc, l'info est simple, les paragraphes marqués, les sauts de ligne, le logo bien placé, le bouton de connexion, la police de caractère ultra basique et efficace, les éléments structurés et hiérarchisés, optimisés, pro, avenant, moderne et très rassurant.
Votre design gagnerait à s'inscrire dans cette mouvance.

http://images.jupload.fr/1400002045.png

Pour ce qui est de la pérennité et de la sécurité des images. Ce sont vos clients qu'il faut rassurer. Pas moi.

Pour un restylage du design, vous pouvez vous donnez un peu de temps, mais là encore, en faisant simple, ça n'est pas forcément très long. Plutôt que de jouer en direct sur le site. Je vous conseillerai plutôt de poster vos templates test ici pour les mettre au point.
Modifié par spongebrain (13 May 2014 - 19:58)

Bonjour,

En regardant les templates flat design sur internet j'ai trouvé ceci:

http://www.jupload.fr/V2/

Cette template serait bien pour mon site ? Ou vaut mieux t-il que je m'en inspire ?

Salut,

C'est propre. Mais ça fait usine à gaz avec tous ces trucs encastrés. Rien n'est hiérarchisé, c'est le foutoir. Ça manque de style et de personnalité. Ça ne respire pas assez par manque de blanc. Le gros menu du header est laid et impersonnel. Sur cette maquette c'est trop plat (le flat design demande du style), vous pouvez avoir de légers dégradés comme sur l'exemple que j'avais joint) et la gamme couleur est trop "déjà vu". Ça sent la template à 100 mètres et ça ressemble plus à un tableau de bord personnel qu'à un site web. Limite, mauvaise caricature de flat design, donc peu pérenne.

Maintenant faut voir cette template appliquée avec les éléments de votre composition. Moins chargé ça ne peut être que mieux. Mais il y a trop de points à améliorer pour en faire une bonne template de départ. Les gros points faibe : le header bâclé et pas de blanc. Sauf design original et réussi, commencez par éliminer les templates qui n'ont pas de blanc dans leur maquette.

Plutôt qq chose de simple, léger et bien construit comme sur les sites des réseaux sociaux.

En attendant la suite !
Modifié par spongebrain (20 May 2014 - 18:11)

Bonjour,

C'est vrai que j'avais cette même impression de site compact de style usine à gaz, mais je pense plutôt m'inspirer de ce thème sans changer beaucoup de choses dans la disposition de mon site actuel.

Bof, bof, bof…

Je ne suis pas convaincu par le template plombant dont vous souhaitez vous inspirer (à ne surtout pas copier au pied de la lettre), le flat design dans ce style là, ça ne respire pas, c'est lourd et obsolète. Ou comment flinguer une mode en l'appliquant mal.

Si vous y tenez, mettez du blanc et ne soyez pas prisonnier des aplats (voir la capture ci-dessus qui s'en inspire seulement en partie). Même Microsoft qui ont lancé cette mode appliquent du blanc, du gris très clair, des dégradés/ombres dans leurs visuels. Les aplats de couleurs interviennent seulement en touches. C'est INDISPENSABLE pour obtenir une maquette aérée, vivante et ne pas se retrouver avec un design bouché et glacial.

http://www.microsoft.fr
http://office.microsoft.com/fr-FR?WT.mc_id=MSCOM_FR_FR_HP_DISCOVER_Office

Ajoutez une jolie photo conceptuelle qui représente votre activité pourrait humaniser votre site, aider les utilisateurs à se projeter. C'est souvent complémentaire du style flat design (un smartphone avec l'application, un utilisateur qui en fait l'usage… )
Dans ce style, pour à peine 10 euros vous avez des visuels très corrects sur les banques d'images spécialisés comme Fotolia.

http://fr.fotolia.com/

http://download.fotolia.com/Content/CompImage500/FotoliaComp_63225989_q7fSHiDlFb7ANdU2FKJV6cSOjCcKLxG1

http://download.fotolia.com/Content/CompImage500/FotoliaComp_62395030_PkRGOpNzyYiAYxOj9Pn3AntBU0lbWrmm

http://download.fotolia.com/Content/CompImage500/FotoliaComp_60302672_shBMPpedJAWLLeioPFWHvKOa5hzBXlmF

Ect.

Regardez aussi le design de ce forum qui utilise des aplats, mais avec modération et des dégradés subtils viennent donner du relief dans les boutons…

S vous appliquez le style du template que vous présentez ci-dessus sans vous en détacher, vous êtes sûr de vous planter, de produire une maquette indigeste. Le flat design pur est à réserver à des sites spécifiques (et encore… on a parfois l'impression de copiés/collés d'un site à l'autre).

Postez une capture d'écran (template photoshop) avant de l'appliquer sur votre site. Il serait dommage de changer 3 fois de design en peu de temps, les utilisateurs se sentiraient perdus.

Maintenant faut voir, mais trouver une bonne base peut demander un peu de temps.
Modifié par spongebrain (21 May 2014 - 02:11)

Bonjour,

Je vais voir tout cela, je pense que le principal travail sera sur la bar du haut, je posterai une template ici

En flat design mon site ressemblerai à ça:

http://www.jupload.fr/miroir/

Je n'aime pas trop et même en m'inspirant je n'arrive pas à trouver les bonne couleurs.

Re,

Une image valant parfois mieux qu'un long discours, voici ma préconisation pour optimiser et simplifier votre dernier template.

J'ai simplifié la maquette, apporté du blanc pour la légèreté et équilibrer les couleurs. Le header est plus haut pour laisser respirer le logo. Les pictos sociaux sont positionnés dans la maquette, ronds pour coller au style du logo (facile à trouver sur le web). Le formulaire est simplifié. La composition d'ensemble est recadrée, la publicité mieux intégrée. Plus d'arrondis dans les blocs gris. Le lien contact passe dans le footer. Les liens actifs passent en bleu en hover, le même bleu que le fond du champ de texte "choisir un fichier". Le menu du header ne change pas en hover, c'est plus simple et élégant (tout au plus un léger décalage comme le bouton "Envoyer" de ce forum ?). Le sous titre "Information" est supprimé, car inutile.

Le dégradé du fond va du gris (le même que celui du contenu, RVB : 218/218/218 - #dadada) vers le blanc, ainsi les blocs de contenus se fondent sur le fond dans le haut de la maquette. La taille des polices pour les sous titres est hiérarchisée et simplifiée. Une seule police de caractère, Arial, sauf pour le logo qui du coup est plus visible et valorisé (attention à la teinte du "J' " en bleu sur bleu, peut être que ça peut être optimisé). Le "J' " du logo est corrigé sur le fond gris, vous devez n'avoir qu'un logo toujours identique, c'est obligatoire pour faire pro. Le dégradé bleu du header est à peine plus foncé pour faire ressortir le bleu cyan du logo (à optimiser ?). Les textes blancs sur fond bleu ont un très très léger ombrage décalé pour donner un peu de relief.
Un titre est ajouté au paragraphes : "Uploadez vos images en toute simplicité". Le texte de contenu est repositionné. Les interlignes et les espaces inter paragraphes sont accentués, les puces reprennent les rondeurs et les couleurs des boutons, les types de fichiers passent en gras pour donner du relief. Le footer est centré sur toute la largeur du site.

Attention, c'est encore bourré de fautes d'orthographe !! Ex : "…sont hébergés (sans e) en France !". Ça la fout mal pour un site qui se veut français. Aussi en typographie française il y a joujours une espace avant un deux point ( : ).

Les détails doivent être soignés pour faire plus propre et pro. C'est souvent dans les détails qu'on apprécie le sérieux d'un site.

Peut être ajouter une baseline avec le logo ? Auquel cas la hauteur du header pourrait un peu être accentuée ?

Une version avec des photos ou un visuel pourrait être envisagée ?

http://images.jupload.fr/1400712925.jpg

Pour voir à l'échelle 1 clic droit vers un autre onglet.

Qu'en pensez-vous ?
Modifié par spongebrain (22 May 2014 - 07:16)

Bonjour,

Le design que vous avez créez reflète bien le flat design, j'aime et je pense avec votre accord l'appliquer sur mon site.
Vous avez corriger vous même tous les points que vous me reprochiez et je vous en remercie

Serait t-il possible d'obtenir le code svp si vous êtes d'accord ?
Modifié par Benjiii91 (22 May 2014 - 13:02)

Salut,

Bien sûr que vous pouvez l'utiliser, non seulement vous avez ma permission et c'est cadeau (vous économisez 1000€).

j'espère que cela aura l'effet escompté sur votre site, le look de l'interface a un impact important et c'est le but. D'autre alsanautes peuvent aussi apporter leur avis ou leurs critiques.

Si vous êtes d'accord, pourrai-je le présenter dans mes travaux en tant que relifting express d'un site web (usage perso uniquement) ? Auquel cas je vous enverrai un message en privé pour échanger nos identités.

Pour le code, j'ai suivi la procédure classique pour toute conception d'un site web, il s'agit d'une maquette réalisée 100% sur Photoshop. C'est pourquoi j'ai décrit les points 1 par 1 pour vous aider. Vous avez donc déjà tous les éléments. Il faut ensuite prendre la mesure de chaque point et l'appliquer selon la maquette, ce qui demande un travail d'intégration. Là on ne touche qu'aux CSS donc ça reste "simple", ou abordable pour un intégrateur moyen. Si vous avez des difficultés, n'hésitez pas à en faire part ici. Attention, pour que la maquette soit efficace, il faut se caler au millimètre et rester fidèle au niveau des couleurs et tailles de caractère. C'est pourquoi j'ai fait le template à l'échelle 1 pour que vous puissiez prendre les bons repères.

Pour les pictos ronds Twitter et Facebook, c'est facile à trouver sur google et autorisé.
http://www.viewon.fr/public/img/picto_facebook.png
https://www.utbm.fr/sites/default/files/gestionFichiers/docs/picto_twitter_utbm.jpg
Etc.
(À recaler au niveau des couleurs et des dégradés.)

Des petites adaptations peuvent venir par la suite (couleurs, titres, argumentaire… ). Par exemple à la place de "Connexion", on peut avoir "Espace membre", on peut avoir une phrase qui explique qu'on peut télécharger ses images pour les communiquer sur le web en introduction de l'argumentaire, on peut aussi intégrer un visuel explicite… Mais la maquette de base est là et il faut commencer par ça.

Il y a un peu de photoshop à faire (logo PNG blanc et gris… ) mais c'est très limité. C'est pourquoi j'ai noté les références couleurs. Les dégradés peuvent être obtenus en css ou en image de fond (bande de 1 pixel de large). N'hésitez pas à utiliser la pipette pour vous repérer dans les couleurs et si la différence est minime entre deux éléments choisissez une seule couleur.
Le texte est dans différents gris faciles à retrouver (palette web 256 couleurs). Les différentes tailles de caractère sont limitées, 2 principalement : les titres et le menu + le contenu. Quelques petites variantes dans les formulaires.

Voilà, si vous avez un doute, des questions, posez les ici. Chacun pouvant apporter sa pierre à l'édifice.
A plus.
Modifié par spongebrain (22 May 2014 - 14:55)

Ah oui je vois le genre, c'est que moi je ne fait jamais de maquette sur photoshop mais désormais j'y songerai ^^

Merci pour tous ses conseils, je vais d'abord essayer d'intégrer le design de base, en espérant qu'il sera aussi parfait que sur l'image, avant de mettre le nouveau design en ligne je posterai une maquette ici je pense.

Eh bien sur vous avez mon accord pour le présenter dans vos travaux

C'est la procédure suivie par toutes les agences, studios, freelances… Un template de site web est dans 99% des cas fait sur photoshop, la question ne se pose même pas. Faire un template en HTML c'est comme faire de l'escalade en fauteuil roulant, aucune souplesse… J'ai été très surpris que vous demandiez le code (à éviter en milieu pro ). Ensuite vient l'intégration et le développement. Imaginez quand une agence propose 5 variantes de sites à un client, s'il fallait réaliser les sites et payer une équipe (directeur artistique, graphiste, intégrateur, développeur, chef de projet… ), il faudrait payer des fortunes avant même d'avoir vendu un site, ou pas.

Et même si le client accepte de payer la réalisation complète des propositions de sites, ça chiffre immédiatement avec 4 zéros. Et en plus ça explose les délais et occupe des développeurs déjà difficiles à trouver à travailler peu être pour rien. La plupart des design conçus en agences sont maquettés par des graphistes qui ne touchent jamais au code. Le HTML et les CSS ne sont pas des langages de conception et de création, mais des langages d'intégration.

Connaître les bases de Photoshop est chaudement recommandé pour un intégrateur s'il ne travaille pas dans une grosse structure avec les graphistes qui lui préparent tous les fichiers. D'ailleurs dans les formations de développeur web et intégrateur, Photoshop et aussi Illustrator font partie du programme. C'est la base. Tout comme c'est la base pour un graphiste de connaître les rudiments de l'intégration pour savoir ce qu'il lui est possible de faire techniquement.

Merci pour votre accord.
Modifié par spongebrain (22 May 2014 - 22:20)

Rapidement pour revenir sur votre message perso, il vaut mieux poster ici où il y a plein de gens bien plus compétents que moi en intégration. Concernant votre difficulté à faire le bon dégradé en CSS qui pose problème pour l'effet fondu au bon endroit avec les blocs gris j'ai trouvé ça :

http://css.mammouthland.net/css3/degrades-sans-image.php

Si vous n'y arrivez pas (il faut optimiser pour les versions anciennes d'explorer), je vous ai joint le fichier pour la solution classique de l'image de fond en répétition. C'est old school mais ça a fait ses preuves et on peut avoir un dégradé complexe qui passe sur tous les navigateurs. Même si ici, je ne vois pas la difficulté.

Il s'agit d'une image de 1px de large et 700px de haut. En CSS il suffit d'appliquer une répétition horizontale, sans répétition verticale, l'image ultra légère (4ko) appliquera le dégradé instantanément.

Attention, l'image de dégradé jointe commence en haut du body, sous le fond bleu du header donc pour couvrir jusqu'à 700 pixels plus bas. En dessous de ces 700 pixels c'est le fond blanc du body.

http://images.jupload.fr/1400790866.png

Si, si, l'image est bien là. Elle est à peine visible et difficile à attraper avec la souris. Elle est prête à être appliquée en fond du body.

body {
background-color: white;
background-image: url(images/degrade.png);
background-repeat: repeat-x;
}

Si vous placez les blocs gris comme sur le template, le fondu devrait fonctionner. Les blocs gris des contenus doivent toucher le header. C'est du calage au pixel près.
Modifié par spongebrain (22 May 2014 - 23:09)

Bonsoir,

La template commence à ressembler à l'image, mais il y a quelques défauts.
La police Arial pour les titres fait plus gros que sur l'image, même en réduisant la taille.
Y a t-il d'autre police utilisées ?

De votre point de vue la template réalisé est-elle bien ? (http://jupload.fr/v2/)

J'en ai profité pour adapter quelques retouche de votre image sur le site actuel, et j'ai fait un mini sondage autour de moi et certain préfère celle actuel et d'autre la nouvelle.
Je ne sais donc pas laquelle choisir, du coup j'ai deux solutions:

- Faire un sondage sur le site pour choisir la meilleure template
ou
- Dans le profil pouvoir changer de template

Merci pour votre aide

Bonsoir,

Ça avance même si de nombreux points sont encore en travaux.

Pour la police de caractère (soyez 100% Arial, sauf le logo), on peut la régler très précisément en indiquant le dimensions en pixels.
Attention, certaines polices sont trop bold sur le template en travaux (Uloader vos images… / Connexion / menu). Vous devez pouvoir régler la graisse de la police en indiquent la bonne dans les CSS.
Le "J'upload ici ! " doit reprendre le logo pour un rendu plus soigné et affirmer la marque.
La teinte des bleus est différente d'un élément à l'autre (Uploadez vos images / Puces / boutons… ). Il faut qu'on ait une même teinte de bleu sur tout le site. Vous pouvez utiliser la pipette sur mon template, à optimiser. Si l'intensité peut varier notamment au niveau des dégradés, la teinte elle doit rester unie (là on a des bleus qui tirent sur le cyan, d'autres sur le rouge, ça donne une impression de site peu soigné, donc peu sérieux). La gestion des couleurs c'est très important !

Dans la phrase "Nous acceptons les formats(mettez une espace ici): .jpg .jpeg .gif .png .bmp .tiff et .svg", "et" doit rester en regular. Vous devez ajouter une espace avant les deux points ( : ). Cela a déjà été indiqué précédemment.

Le filet horizontal inutile en bas du bloc du contenu doit être supprimé.

Votre logo a un effet de détourage gris, le logo doit être rendu plus clean et optimisé pour le header et la version pour le téléchargement.

Les puces sont trop grosses, ce n'est pas joli. Essayez de rester fidèle au pixel près, sinon mon template sera contre productif et le résultat aléatoire, voir décevant.
Certaines couleurs sont à caler (le texte du footer est trop foncé. Le bleu en hover dans le footer n'est pas bon non plus, il a l'air un peu trop rouge.
Osez le bleu dans le formulaire qui doit se caler sur la largeur de la pub.
Certains textes de contenu sont trop gros (dessous du formulaire… ).
Le bouton "Partager" doit être en Arial. C'est dévalorisant pour le logo d'avoir sa police de caractère sur les boutons. Ça ne passe pas avec cette police très marquée.
Le header n'est pas assez haut (repérez vous sur mon template). Le "J' " du logo ne ressort pas assez (je l'ai rendu un peu plus cyan et clair sur mon template, utilisez l'outil luminosité/contraste et teinte saturation dans photoshop). Sur mon template, le dégradé de bleu est un poil plus foncé dans le haut, ça aide à faire ressortir le J du logo.

L'interlignage des paragraphes du contenu est un peu trop serré.

Les pictos sociaux sont trop gros, ils ne doivent pas trop capter l'attention comparé au logo et réduire leur taille ne réduira pas leur efficacité (là encore voir mon template). Vous pouvez les faire un poil plus gros que sur mon template, mais pas à ce point. Les tailles et proportions sont très importantes pour garder un équilibre et une bonne hiérarchisation du contenu. Aussi déclinez votre nouveau design pour les sites twitter et facebook (travail à venir). Le picto twitter est un poil trop vert (à corriger dans teinte/saturation dans photoshop), vous pouvez vous aider en regardant la teinte du bleu twitter sur leur site.

Pour le fond bravo ! Ce coup-ci ça marche bien et le fondu avec les blocs gris est impec.

J'ai grossi un poil le formulaire de téléchargement (choisissez un fichier… ), à peine avec un peu plus de bleu sur la droite. Sur mon mac, l'arrondi du bouton n'est pas calé sur celui du champ du formulaire. A optimiser ?



Pour revenir sur votre idée d'un sondage ou d'une étude, ça n'apportera rien. Pour que ça soit efficace il faut le faire sérieusement sur des panels représentatifs et dans certaines conditions, en étudiant les questions et réalisé par un tiers pour ne pas impacter les réponses.
De plus beaucoup de gens vont choisir en fonction de leur humeur du moment ou de leurs goûts personnels. Un sondage n'apportera pas de réponse spécifique concernant l'optimisation du design. Les "j'aime / j'aime pas" sont peu constructifs et peuvent induire en erreur.
Si vous y tenez faites un sondage à partir de 2 captures d'écran identiques (cadrage… ) et avec des questions orientées ergonomie et lisibilité. Mais ça ne vaudra pas l'avis de pros.
J'ai appris parfois à mes dépens que des avis de personnes qui n'y connaissent rien peuvent vous induire en erreur. Les gens vont vous donner de mauvais conseils pour de mauvaises raisons, qu'ils croient bonnes. Alors qu'un pro ira droit au but et sera capable d'analyse.

Affinez votre jugement et assumez vos choix. Ne demandez conseil qu'à des personnes choisies pour leurs compétences dans un domaine.

Terminez votre template et faites un sondage si vous y tenez, mais je ne vois pas l'intérêt. Là il ne s'agit pas du choix entre 2 templates, mais de l'optimisation d'un template défectueux, sombre, plombant, avec de nombreuses fautes de graphisme et de typo (et d'orthographe), pour coller aux codes de lisibilité, de clarté et d'ergonomie plus conformes à ce qu'on trouve sur les designs actuels de sites similaires et qui ont fait leurs preuves.

Ceci dit, vous avez bien avancé dans votre maquette. De plus la déclinaison pour les autres pages ne devrait pas poser de difficultés si vous appliquez à la lettre les codes de la home. Je suis persuadé que vous aller y arriver.

Le but est d'obtenir un design propre, lisible, simple et efficace pour faire pro et donner envie aux internautes d'utiliser votre service. Ce qui ne serait déjà pas si mal.
En attendant la suite !
Modifié par spongebrain (26 May 2014 - 12:50)

Bonjour,

S'il s'agit bien de ce lien : http://jupload.fr/v2/
De nombreux points mentionnés dans mon dernier message n'ont pas été appliqués et d'autre erreurs se sont ajoutées (détourage sale des images (puces… ). À relire point par point donc, et à appliquer.

Bonjour,

Ceci n'a rien a voir avec la template actuel, mais voici une template réalisé sous photoshop pour l'espace admin. Est-ce assez flat design ?

http://images.jupload.fr/1401477464.png

Salut,
Le skeuomorphisme est plutôt à l'opposé du flat design. Pour le reste c'est une mise en page pratique, il n'y a pas de design à proprement parler.