3246 sujets

Critiques de vos sites: code et design

[demo]Css3ui, interface wysiwyg pour vos navigateur

Présentation

Css3ui est plug-in WYWISYG , vous permettant de modifier vos feuilles de styles directement depuis votre navigateur.

A ce jour CSS permet de réaliser des effets de style de plus en plus avancés. Mais le revers de la médaille et que ces effets deviennent de plus en plus compliquer à écrire et à maintenir.

Je développe css3ui depuis maintenant 3 ans. Alors oui, c'est long trois ans. Mais je ne suis pas un professionnel du WEB . Je fais cela sur mon temps perso. A l'origine je suis menuisier bois. Evidemment rien à voir avec la programmation. Mais je suis depuis toujours passionné par l'informatique. J'ai eu la chance dans mon parcours professionnel de travailler en tant qu'assembleur et technicien SAV pour une société de vente en ligne de matériel informatique. Et voilà quelques années que je me suis lancé dans la programmation WEB pour mon plaisir personnel.

Css3ui est l'aboutissement de toutes ces années à apprendre grâce aux tutoriels que l'on peut trouver sur le net.

Plug-in en cours de développement. Compatible Chrome/firefox .IE ne prenant pas en charge les input de type color. Le reste du plug-in fonctionnant normalement avec ce navigateur.

Css3ui prend en charge les différentes propriétés css de base. Ainsi que les propriétés css3 suivantes:

Box-shadow
Multi-box-shadow
Text-shadow
Multi-Text-shadow
Gradient
Flex-box
Colonne
Border-sizing
Border-Radius
Custom-border-radius
Transition
Animation
Transform(scal, rotate, skew,translate)
Background-image
Filtre(HUE,grayscale,blur,contrast...)
Clip-path -webkit only
Shape-outside -webkit only
Unicode. Détournement de la fonction content permettant d'insérer des caractères Unicode ? ? ?

A venir....

Border-image
Key-frames
Multi-background
Media-queries
Attribut !important
Definir une valeur avec la methode calc. ex width : calc(100% - 16px).
Générateur de grille.

La demo

La démo vous permet de tester le potentiel de Css3ui. Avec la version complète vous pouvez créer/éditer/sauvegarder une infinité de design pour vos projets web.

La démo est disponible à l'adresse suivante.

www.css3ui.com
Modifié par Stéphanie W. (08 Jan 2016 - 19:27)
Bientot 200 vues et 0 com' ?
Vous pouvez laisser votre avis je suis ouvert au critique Smiley lol
Modifié par raficraft (09 Jan 2016 - 10:03)
raficraft a écrit :
L'url fonctionne trés bien.

Euh... Si j'écris que l'url ne fonctionne pas c'est bien parce-qu'en cliquant dessus j'obtiens une erreur 404. Actuellement elle semble de nouveau accessible, soit par action de ta part, soit par chance. Merci en tout cas d'éviter les commentaires lapidaires du style ci-dessus. Les intervenants sur le forum savent comment fonctionne un lien hypertexte.
En quoi mon commentaire est lapidaire ?

Ou est ce que je remets en doute l'intelligence de qui que ce soit ?

Cette semaine une étude à été publié. Expliquant que finir un message par un point indiquer une forme d'agressivité. Ce qui avait pas manqué de me faire rire. Et tu confirme le truc, ce qui me fait rire pour le coup, de moi même.

Surement aurais-je du finir par trois petit point comme dans ton com'

Bon on est pas partit sur de bonne base , point d'arrogance de colère ou de vindicte dans mes expressions. Je publie mon projet sur le forum pour avoir vos avis. Ayant la tête dans le guidon, il y as des tonnes de test que je ne peux pas faire. Dans mon environnement tout fonctionne parfaitement bien. C'est pour cela que j'ai besoin des retours que peuvent me fournir la multitude que représente la population d'un forum.

Sur ce ...

Smiley cligne
Bon, faut que je t'explique deux choses...
D'une part l'extension que tu présentes m'intéressait a priori. D'autre part, lorsque j'ai cliqué sur le lien, ça a tout simplement foiré, comme je l'ai indiqué.
J'ai donc signalé que l'url ne fonctionnait pas. J'aurais pu écrire effectivement : "Cher Monsieur, je constate avec effroi que le lien hypertexte que vous mentionnez ne semble pas fonctionner. Vous serait-il agréable de bien vouloir m'informer en retour de sa prochaine disponibilité. Vous en remerciant par avance, etc."
Ceci dit, me répondre : "L'url fonctionne très bien" sans plus s'interroger sur le fait qu'elle ait pu être momentanément inaccessible est, je le confirme, lapidaire. Si tu considères ne pas devoir tenir compte des anomalies lorsqu'elles te sont signalées et simplement répondre : "Circulez, y a rien à. Voir", pourquoi pas.
Par contre, je constate que tu râles de voir le compteur de visites s'incrémenter sans avis en retour sur l'extension que tu nous propose.
Dommage car ton développement m'intéressait... Pas sûr que je prenne le temps d'aller plus loin.
Bon on vas faire dans le détail, j'ai vu ton com'. J'ai donc tester de mon coté sur plusieurs support. Et donc je suis bien m'interroger sur le comment c'est possible , alors que j'ai jamais eu de problème auparavant. Et qu'as première vu y'en avait pas, j'ai rien modifier sur la version en ligne du site depuis des semaines.

Mon premier commentaire était simplement pour informer quiconque viendrait sur le topic que tout fonctionne. Et surement pas de dire "circulez y'as rien à voir". Ce n'était pas qu'une réponse à ton égard.

Je t'accorde que le second commentaire peut paraître inconvenant. C'est plus lier à mon envie d'avoir des retour qu'une intention d’êtres désagréables.

Mon troisième commentaire est pour exprimer mon incompréhension, j'ai bien tenter un peu d'ironie.
Apparemment ça marche pas.

Et en plus je ne râles pas de quoi que ce soit. Tain' on pas inventer les smileys pour rien .

Smiley lol <--- si ça signifie que je gueule c'est qu'il y à un problème.

Et là vache! Tu extrapoles à fond quatre petit mot, pour pas grand chose.

-> Je lapide
-> Je prends les modos pour des crétins
-> Et je ne me pose pas de question ?

Avec quatre petit mot tu me fait passer pour le dernier des co**ards ou le premier, enfin bref ...

Toutefois je suis content que ça t’intéresse tout autant que ton avis sur le logiciel m’intéresse.
Modifié par raficraft (10 Jan 2016 - 21:25)
Effectivement, le sujet m'intéresse et je suis persuadé, comme tu l'indiques par ailleurs qu'il y a un fort investissement en réflexion et développement de ta part en amont.
S'agissant de l'url inactive, ce qui me fait réagir c'est de ne pas envisager qu'à un instant T elle puisse avoir été inaccessible. Ce peut être un défaut momentané de l'hébergeur ou toute autre raison technique. A minima, la réponse habituelle consiste à dire qu'on va vérifier et fournir en retour une explication, ou non, sur ce qui s'est passé.
Côté humour sur la présence ou non d'un point en fin de réponse et l'analyse que certaines études veulent en faire, je me borne à appliquer les règles de typologie française qui prévoient qu'une phrase se termine systématiquement par un point. On peut trouver ce mode de fonctionnement hilarant mais ce genre de règle a ses avantages.
Concernant ton extension, pour revenir au sujet initial, je suis toujours preneur lorsque quelqu'un tente une nouvelle approche dans le domaine HTML /CSS. Etant actuellement en congés et naviguant sur un portable, le contexte ne se prête pas vraiment à un test poussé. Je verrai donc à mon retour mi janvier ce qu'il en est.
Bonjour,
a écrit :
L'url fonctionne très bien.

J'ai constaté le même souci d'url il y a quelques jours, tu l'as donc édité (comme ce qui est d'ailleurs indiqué sous ton premier message, les heures correspondent bien à une heure ultérieure au post de sepecat), est-ce si grave de le reconnaître ? Passons.

La première chose que je vois en arrivant sur ton site, c'est le menu qui déborde de la page, tu as sans doute une résolution d’écran plus petite (ordinateur portable probablement) qui fait que ce comportement du menu a échappé à ta vigilance.
upload/50556-capte.png

Côté responsive, ce n'est pas encore ça:
upload/50556-cappp.png

J'ai relevé plusieurs fautes d'orthographe, notamment
"L'interface WYSIWYG ce décompose en 4 fenêtreS : ",
"Soit l'ont créé",
"Pouvoir directement tracER",
etc.

Concernant les fonctionnalités que tu as développées, le concept me paraît intéressant mais n'oublie pas que si tu proposes une UI, il te faut penser l'UX (expérience utilisateur, utilisabilité).

Ici je trouve que cela manque de repères et je pense que peu de personnes feront l'effort de trier l'information dans le pavé que tu as rédigé, normalement un outil bien pensé est intuitif et au moins 50% de ses fonctionnalités doivent être intégrées rapidement par l'utilisateur.

Là j'ai du lutter pour comprendre le fonctionnement et faire des aller-venus entre l'outil et la présentation, pour au final ne pas réussir à exploiter et comprendre ses tenants et aboutissants.

Je pense que ton projet mériterait la rédaction d'une documentation, ou d'un tutoriel pas à pas, mais pas un long texte que personne n'a envie de lire (par fainéantise certainement, mais tu dois prendre en compte que les développeurs le sont Smiley smile ).

Enfin, même si le fond est plus important que la forme, il ne faut pas pour autant négliger cette dernière, je trouve que le site est visuellement très basique et mériterait au minima une touche de couleurs (tu peux par exemple faire ressortir les titres).

L'espacement en largeur que tu proposes est très réduit, ce qui donne la sensation que le contenu est comprimé. Les ombres sont beaucoup trop accentuées, ce qui fait "kitch" et non-maitrisé au rendu.
Modifié par ohweb (11 Jan 2016 - 10:26)
Bonjour Raficraft,

Tout d'abord bravo pour le travail réalisé ! On voit que l'auteur de cet outil n'a pas eu peur de mettre les mains dans le cambouis et le résultat est déjà très encourageant.

Pour ma part, je me cantonnerai à l'interface et au design.
La présentation est voulu sobre et claire, ce qui est un bon point. Toutefois je constate des anomalies d'affichage évidentes sur mon navigateur (Chrome/OS X). Les titres sont écrits trop gros et débordent de l'espace qui leur est réservé :

http://img15.hostingpics.net/pics/350576Capturedecran20160111a094505.png

D'entrée, il manque un semblant de charte, une couleur, un petit style sobre et élégant qui permet de vous différencier en terme de présentation. Soyez plus communiquant, en utilisant les ressorts de la pub et de la promo pour présenter ce que vous faites. Principalement sur la home : un joli visuel efficace, un nom présenté dans un style "logo" (compact et sobre), une accroche didactique, un call to action, 5 lignes max dans le header, le texte de suite seulement au scroll…
Ensuite pour les pages suivantes, vous pouvez rester plus sobre. Inutile de charger la mule. Smiley murf

Aussi, alors que l'on parle d'interface WYSIWYG, la moindre des choses serait de donner l'exemple. Là on tombe sur une page avec beaucoup de texte, très hermétique et confus pour le néophyte.
Afin de facilité l'accès à votre outil et d'aborder les choses de façon plus sexy, visuelle et didactique, présenter une capture de l'outil/de la fonction sur la landing page aurait été la moindre des chose. Il faut vraiment mettre sous le nez des utilisateurs ce dont on parle. Par exemple les sites d'applications et outils web affichent presque tous un mockup qui présente leur outil en fonction, dès la home (sur un aplat de couleur par exemple). Là ça manque.

En terme d'ergonomie, certains effets pourraient simplifier et fluidifier la navigation, comme un «call to action» qui incite à cliquer ou réaliser une tâche (par exemple un joli bouton flat qui produit un effet wouah ! Ensuite vous pouvez développer sur les différentes fonctions, sans vous/nous perdre. Concrètement, en lisant votre site en diagonale (c'est ce que vous obtiendrez de mieux de la plupart des lecteurs), j'ai trop d'infos d'un seul coup, c'est trop fragmenté et confus. Total, je ne comprends pas bien ce que vous proposez. Ne perdez pas de vue qu'une partie importante de vos lecteurs ne seront pas des développeurs aguerris et qu'il faut rester simple et accessible. Sans quoi, vous risquez de passer à côté de votre cible.

http://img15.hostingpics.net/pics/802514Capturedecran20160111a094525.png

À vous de trouver la bonne interface en vous inspirant des sites d'apps pour voir comment ils communiquent avec leurs lecteurs. Les grosses apps ont des sites très efficaces et instructifs qui ont souvent été testés en terme d'ergonomie. Tirez-en profit ! Smiley cligne

Exemples :
Snapchat propose une animation très efficace sur un device, sur fond couleur. Résultat garanti !
https://www.snapchat.com/download

En plus classique et moins sexy, WhatsApp en fait de même en structurant sa mise en page (header, mise en situation/animation, accroche efficace, logo et menu sobre, call to action (boutons), texte explicatif au scroll sur fond clair…
https://www.whatsapp.com/?l=fr

Le header est complètement à revoir, ou plutôt à faire. Là entre le titre avec les lettres espacées, le halo rouge et le menu qui ne donne aucune information, c'est pas très funky… Évitez les ombres noires trop marquées et systématiques. Si les ombres sont de retour, elles doivent rester subtiles. La colonne de contenu est trop étroite sur mon moniteur de bureau. Les images dépassent de façon assez lourde sur la page «Exemples». Il faut optimiser l'adaptation de la maquette en fonction des supports, le responsive n'est plus une option.

Aussi, j'ai un problème avec la page «Exemples». Si vous nous montrez des cas concrets de border-radius, transform ou colonnes, quel rapport avec votre outil ?? C'est pas du tout didactique. Ce quiest intéressant, c'est en quoi votre solution facilite la réalisation de tels effets. Pas de nous montrer des pseudo-exemples qui en fait n'expliquent pas ce que vous présentez.

Attention de rester sobre et élégant. Inutile de nous coller des images ou exemples de 3 mètres de large dans un graphisme douteux ou lourdingue, comme dans le cas ci-dessous (less is more) :

http://img15.hostingpics.net/pics/540995Capturedecran20160111a102616.png

Là pour le coup, on se la prend bien dans la gueule la jolie caisse et les effets d'ombres. Plus gros c'était pas possible ? Smiley lol
Inutile d'alourdir votre page, placez des titres discrets et réalisez les démos sur des images ou des textes plus sobres.

Ne nous inondez pas sous des tonnes de textes, soyez plus synthétique et allez à l'essentiel. Pour les explications secondaires, un lien interne, externe ou un pop in peuvent faire l'affaire. Inutile de nous expliquer ce qu'est le WYSIWYG, montrez-le ! La home doit rester visuelle et en lisant l'accroche on doit comprendre de quoi il s'agit. Il reste tout à faire à ce niveau.

Attention de soigner la typographie française, elle vous le rendra bien. Par exemple en oubliant pas les accents sur les majuscules ou pire, sur les minuscules (ex. : Développement, créer… ). Là ça donne l'impression de quelque chose de pas du tout abouti. Le diable est dans les détails… Smiley diablo

+ 1 pour l'orthographe. Une seule faute c'est déjà gênant, alors si le site en compte d'avantage, ça peut discréditer tout votre travail. Faites vous relire. Smiley cligne

Voilou pour moi, un peu dans le désordre et avec pas mal d'oublis. Plus vous serez clair et didactique, plus les lecteurs deviendront des utilisateurs.

En attendant la suite, encore bravo pour le travail déjà accompli et pour celui qui reste à faire. Smiley smile

P.S. : Oups, grilled par Ohweb ! Je note que nos retours se rejoignent sur pas mal de points. Smiley cligne
Modifié par spongebrain (11 Jan 2016 - 11:10)
Sepetac, je suis content qu'on arrive à un apaisement, j'attends ton analyse avec impatience.

Pour l'erreur d'url au final je ne comprends ce qu'il c'est passé, surtout que le site à une page pour les erreurs 404. Était-ce la page du site ou une la page du navigateur?

Je sais qui si l'on ne mets pas les www devant l'adresse on tombe sur la page de mon fournisseur de domaine.

css3ui.com


J'ai pu lire vos commentaires ce midi. Je précise, en cinq minutes sur le vieux P4 de la commande numérique de l'atelier.

Et je vous remercie vous avez donné à manger à mon cerveau tout l'après midi. Smiley lol


Ohweb, la timeline que tu pointes est exact, mais les actes qui en découlent ne sont pas juste.
J'ai déjà posté la même présentation sur un le forum d'openClassRoom, je te laisse jouer au jeux des 7 erreurs pour voir ce que j'ai modifier dans cette timeline . Smiley smile .
Je ne mets pas le lien je te laisse cherche si tu en a vraiment envie.

Effectivement je n'avait pas vu que lors du resize du navigateur le menu partait dans les choux. Pour le coup j'aurait pu le voir, je travaille en dual screen. Un écran 23" avec une résolution de 1920 * 1080 et un autre écran de 21" dont j'ai enlever le pied et qu j'ai mis à la vertical. Justement pour effectuer ce type de contrôle.

Pour les faute d’orthographes, personnellement j'ai perdu le fil en ce2 (A les années 80 !!! Smiley lol ), avec les complèment d'objets directs/indirects. Mais je me relis je passe mes textes au correcteur. Je lis les correction , essaye de voir/comprendre mes erreurs.

J'ai doit faire autant de debug sur mon texte écrit, que je fais de veille sur le code du logiciel.

Pour l' UX, c'est justement là ou j'ai besoin de vous. Malgré tout ,Je ne suis pas l'utilisateur final et du coup il reste des choses que je ne peux percevoir. Ou alors avec un temps de retard et il y à des features que j'arrive encore à faire à la main.

Import d'une feuille de style dans un autre projet ?

Quelle bonne idée! Mais je n'ai pas le temps. J'ai déjà une tonne de fonctionnalités à stabiliser et une liste de debug longue comme le bras. Mais ce n'est pas grave un tour dans Phpmyadmin, deux requêtes SQL sur les ID uniques et les foreign keys et le tour est joué. Temps d'action 5mn.

La fonctionnalité d'import me demanderait plus de temps de développement. Et au final elle s'ajoute à la liste des choses à faire.

Une doc ? J'avais un système dans les premières versions, qui plaçait un point d'interrogation au niveau de chaque input et qui donnait des infos sur la propriété concernée. Mais au final je me suis rendu que je recopiai la doc CSS, et que au total avec plus de 100 propriétés distincte ça me faisait une charge de travail trop importante.

Une doc sur l'UI elle même, j'y réfléchis . Je pense que le format vidéo serait plus approprié. J'ai déjà fait quelque test (rush, montage, compression ect..). Et le constat c'est que pour une bonne vidéo, il me faut avant tout un script. Quelque de chose de simple mais structuré.

Pour la forme je suis d'accord, mon travail me satisfait pas totalement. Mais il fallait que je publie quelque chose en ligne. Pour pouvoir en parler correctement, cela c'est fait plus dans le flux , pour me faire un test réelle du logiciel. Et voir les retour sur ce dernier.

Le tutoriel c'est une bonne idée. Je réfléchis à la forme que cela pourrait prendre. Une page blanche avec un élément dans lequel il serait marquer "Zone de test". La DIV suivrait le scroll le long du tutoriel.Et le tuto expliquerait comment modifier cette élément avec l'interface.

Pour la fainéantise je suis d'accord , y'as des tas de texte qu'on lit en diagonale. Je n'ai pas encore intégreé les concepts de la presse papier. Qui arrive à te coller un article très long. Le tout enrobé d'image, de légende, de punchline qui peut à elles seuls peuvent te fournir plus de 50% de l'information sans que tu lise l'article. Ou encore les sites qui restent sobres en information et en design. Et qui ne déroulent de l'information supplémentaire que si l’utilisateur interagi avec la page. Surement le "call to action" dont parle spongebrain.


Pour la charte graphique, c'est simplement que je cherchais à rester minimaliste dans la forme et dans le même temps, j'avais lu un article sur l'idée de styliser son site en monochrome en premier lieu. Travailler uniqument les contrastes. C'est plus simple que de choisir des styles trop hype/flashy qui peuvent fatiguer la vue.


En plus cela avait du sens vis-à-vis du logiciel qui permet de travailler sur un premier projet de design. L'on ne créait que des styles basiques et on place sa structure
.Ensuite on duplique le projet et on peut ce lâcher en terme de design sans risquer de corrompre le css de base. Et on peut dupliquer à l'infini.

Pour l'inspiration j'avais vu ça :

https://prepros.io/

Pour le fond c'est sûr y'as des choses à revoir, je crois que les text-shadow sont un peu le summum. Smiley lol .

Dans un premier temps je ne destine pas forcément le site à un lectorat neophyte, il me sert seulement pour présenter/discuter du projet et je ne l'adresse pour l'instant que sur les forums spécialisés en développement , celui-ci est le troisième. Il fallait que je sorte quelque de concret , que cela ne reste pas que sur mon poste. Maintenant je peux prendre du recul et avec vos conseils, vos encouragements cela m'aident vraiment, et j’écoute chacun de vos conseils avec attention.

Je suis en train de refondre le site dans son ensemble plus simple, plus clair. Reste à enregistrer un vidéo de la version complète pour présenter le projet dans sa totalité. Cela m’éviteras bien du texte à écrire et placeras un "call to action" dans la page d’accueil . Dis moi, spongebrain si j'ai bien compris la leçon. Smiley smile

Au final ce qui me manque le plus à ce jour c'est du temps et encore du temps. J'aimerais vraiment pouvoir sortir une V1 du logiciel. Et d'essayer d'en tirer une partit financière qui me permettrait de faire la bascule avec mon job. Pour au final pouvoir acheter ce temps et développer mon logiciel pour qu'un jour je puisse développer css4ui puis css5ui ect ...

Ou alors trouver un job en tant que développeur , qui me plongerait dans le bain. Je suis sur que cela m'enrichirait rapidement et me permettrai de vivre, manger, penser développement.
Modifié par raficraft (11 Jan 2016 - 23:01)
raficraft a écrit :
Pour l'inspiration j'avais vu ça :

https://prepros.io/


Bingo ! Smiley lol

Une mise en page claire et fonctionnelle, de la couleur, un petit logo qui fait le job (dont on retrouve la couleur dans la capture), un menu discret et efficace, aucun gros bloc de texte confus et assommant que personne ne lira, une capture d'écran didactique, des call to actions (boutons… ), quelques pictos qui surplombent des textes ultra condensés, une structuration de la mise en page par thèmes qui se révèle au scroll (couleurs… ), quelques micro animations pour réveiller le tout, un vrai ton dans le discours avec une intro, le produit, une conclusion, un footer très light où se trouvent les réseaux sociaux, une seule police de caractère moderne et élégante avec un jeu dans les tailles et les graisses très typo, pas de faute d'orthographe (bon, moi et l'anglais… ), pas de bug énorme dans le responsive, une harmonie dans la mise en page, une réflexion sur l'ergonomie et l'esthétique indispensable pour l'expérience utilisateur, une réalisation pro et soignée.

C'est dans le même esprit que les exemples que je vous ai linké. Moderne, sobre et efficace.

Ça a l'air simple vu comme ça, sauf que ça demande de réelles compétences en design, typo… Ne prenez pas toutes les observations au pied de la lettre, mais esayez de donnez de la cohérence et de la fluidité à l'ensemble. Faites des shémas sur papier avant de refondre votre mise en page, limitez le contenu texte au strict minimum et faite-le lire à des néophytes (ou des designers Smiley lol ). S'ils ne comprennent pas tout, c'est que vous devez recommencer. Structurez vos blocs textes, vos titres et vos chapos, associez leur des pictos qui aident à trouver la bonne info. Pratiquement personne ne lit l'intégralité des textes lors d'une première approche, vous devez donc vous adapter alors que pour le moment c'est tout le contraire comme cela a déjà été mentionné ici.
Actuellement, il faut s'arracher les cheveux de la tête pour essayer de comprendre la moitié de votre idée. Pour l'autre moitié, le peu de lecteurs qui restent finissent par cliquer sur le bouton de fermeture de la fenêtre.

Attention au piège qui consiste à croire qu'on pourra y arriver tout seul. Seul, vous foncerez dans le mur. Sauf pour des pros aguerris et multi-casquettes, c'est mission impossible. Demandez donc conseil autour de vous (à des gens compétents de préférence, sélectionnez les conseils), avancez pas à pas sans mettre la charrue avant les boeufs (ce que vous avez fait ici en intégrant un site sans design et sans structure). Idem pour les fautes d'orthographe, les correcteurs ne trouvent que la moitié des fautes, parfois ils en ajoutent. Une relecture par quelqu'un de compétent en orthographe, grammaire et typographie… un rédacteur professionnel ou un enseignant en lettre par exemple.

Que ce soit pour l'orthographe ou le design, l'ergonomie, une seule faute peut ruiner le site. Vous devez donc avoir une approche méthodique et irréprochable sur ces points si vous voulez que votre site sorte de la catégorie «bidouille». Vous pouvez le faire ! Smiley smile

Là il y a des signes de bonnes intentions comme la volonté de faire un design sobre. C'est une bonne chose. Mais pour que le rendu soit vraiement efficace, il ne suffit pas de mettre un fond blanc et pas d'image. La sobriété doit se faire au service de l'interface. Surtout ne pas sacrifier l'expérience utilisateur sur l'autel du vide et du fond blanc, et en tartinant du texte illisible pour «compenser» l'absence de simplicité.

Décollez-vous les yeux de vos lignes de code ! C'est contre productif et vous empêche de cerner les grandes lignes. Le code ne doit arriver qu'à la fin, quand le site est terminé. Même si l'amélioration reste continue…
Pensez «moins mais avec la meilleure exécution, la meilleure ergonomie», plutôt que «moins c'est mieux». (Dieter Rams) Smiley smile
Modifié par spongebrain (12 Jan 2016 - 10:13)
Salut à tous,

Je viens de finir le nouveau design du site.
Pour le moment le tout tien sur un onepage.

J'ai ajouté les propriétés CSS suivantes :

-word-wrap
-white-space
-gradiant-radial
-gradiant-ellipse

Un select pour la propriété FLEX qui permet de placer les valeurs initial/normal/auto/none. Rendant son usage plus simple.

J'ai aussi incorporé des placeholders dans chaque champ de saisie de la démo, qui indique l'unité par défaut.

La grande nouveauté du site , c'est le style switcher. Il vous permet de charger trois styles différents. Basic/Monochrome/reset.

Les trois designs ont entièrement réalisé avec Css3UI. Et vous pouvez utiliser la démo dans les trois styles et "peindre" la version monochrome par exemple.

En ce qui concerne le rédactionnelle, tout ce qui n'est pas dit à l'écrit sera expliqué dans la vidéo à venir. Histoire de ne pas avoir de tartine de texte à corriger . Smiley lol

Normalement le site fonctionne bien de manière responsive(merci les flex-box Smiley biggrin ), mais il est complètement pété sous IE, faut que je me penche sur son cas.
Bonjour,

On voit que vous avez essayé de simplifier la présentation, de la rendre plus visuelle et didactique, notamment avec la vidéo à venir.

Cependant, attention à la présentation et au style ! Là on voit que vous vous êtes lâché !!! Mais beaucoup trop et sans avoir pensé au design ! Smiley lol
Restez simple et surtout sobre. Les trucs bleus autour de la vidéo, les grosses ombres très marquées, les gros textes dans une police banale écrits de travers et avec des effets d'ombres, les couleurs sales et sans cohérence… C'est très très lourd et ne donne pas l'impression d'un site sexy et moderne. 9 personnes sur 10 vont quitter le site dans les 2 secondes.

La police serif pauvre doit être remplacée par quelque chose de plus web. Là ça donne l'impression d'un manque de soin.
Pas fan des paragraphes avec la couleur des lignes alternées en bleu et marron.

Évitez les effets démodés, comme les pictos sociaux qui se soulèvent en hover. Surtout que vous leur avez appliqué un effet glossy démodé et que certains pictos ne sont plus d'actualité (pour Twitter, il faut utiliser l'oiseau en forme de virgule). Ce genre d'erreur peut laisser croire qu'il s'agit d'un vieux site pas vraiment mis à jour.
Idem pour les pictos CSS, HTML… très chargés. Faites simple. Pourquoi n'utiliseriez vous pas les icônes originaux ?

Je n'aime pas ce fond gris en béton, c'est plombant.
Le bloc «Activer / désactiver la démo» est complètement à revoir. Au niveau des couleurs (le dégradé ocre verdâtre apparait caca d'oie sur mon moniteur). Définissez une palette simple et fraîche pour tous le site et gardez là. Les ombres sous les textes et les blocs sont ultra lourdes et font sales. Redonnez de la fraîcheur et de la propreté dans le design. On passe d'un site blanc pas assez explicite à une débauche d'effets. Du coup, on en oublie le contenu.

Le bas des blocs de contenu en arrondi, j'aime pas du tout. C'est gratuit et n'apporte aucun style. Faites simple, avec une police bien déclinée (tailles, graisses, couleurs dans les gros titres… ), peu de couleurs, un fond blanc de préférence ou clair (sauf éventuellement dans le header). Pour le graphisme, tenez-vous en à l'interface de votre outil. Là, trop d'effets tuent l'effet.

Oubliez les effets de filets un peu partout. Ça n'apporte rien et fait vielle présentation Powerpoint.

Dans le footer, j'aime bien le symbole avec la main. En revanche, pour le bloc «Voir la feuille de style…», pas de filet, pas d'ombre sale, aérez l'interligne, choisissez une couleur moins agressive (qui peut rester vive et fraîche si vous aimez).

D'une façon générale, oubliez les ombres qui n'apportent rien. Éventuellement sur un élément à mettre en relief et de façon moins appuyée.

Gardez un blanc tournant constant et confortable autour de vos paragraphes (pas trop près des bords).
Pas de lettrines en couleur (style 2).

Le machin carré (pictos sociaux et Css3 ui…) qui reste fixé est très gênant. Au scroll, le texte se place en dessous ! Je ne comprends pas à quoi ça sert jusqu'à ce que je clique sur un carré qui change les feuilles de style. Il est mal amené et mal présenté. On ne sait pas ce que c'est alors que c'est un élément clé du site ! Lui coller les pictos sociaux est dévalorisant et prête à confusion. Chaque chose à sa place. Les pictos sociaux en haut ou en bas en petit et la palette CSS doivent rester dissociés.
Là si vous voulez apporter des réponses en terme de style et d'ergonomie, vous devez commencer par donner l'exemple ! Tout ça sent le design fait à la va vite et peut donner envie de fermer la page.
La version du site en blanc est plus light mais souffre du même manque de soin que la première version CSS, avec ces gros blocs de textes en Times de travers et avec des reliefs/ombres lourds. La police ne change pas. Dommage ?
En même temps, à chacun son job. C'est pourquoi, plutôt que de vous aventurer dans des effets douteux, je vous conseille de faire dans la simplicité. Vous aurez moins de risque de vous planter.

Globalement, vous êtes un peu tombé dans tous les pièges que vous tendent les feuilles de style. Si les mettre en application est une chose, leur donner de la cohérence en est une autre. On voit que le design n'a pas été travaillé et du coup, ça part un peu en sucettes.

Pour avancer, inspirez-vous de ce qui se fait chez les autres, de préférence du côté des entreprises connues qui ont testé et validé leur design. Regardez par exemple les sites qui ont été cités (bien plus sobres et modernes). Vous pouvez potasser les tendances (en lien dans ma signature). Vous pouvez aussi télécharger le PDF en fin d'article, avec des conseils en style, typo, couleurs…
Oubliez le code un moment et essayez de définir des règles simples dans votre charte graphique : interface graphique, polices, couleurs, pictos.
Si vraiment vous n'y arrivez pas, inspirez-vous d'un modèle. Sans recopier platement.

Pour la structure du site en une page, je pense que c'est une très bonne idée. En corrigeant les effets kikoolol, avec une belle palette (2 couleurs maxi + blanc) et avec une typo sobre et moderne, ça devrait pouvoir avancer dans le bon sens.

En attendant la suite ? Smiley smile
Modifié par spongebrain (21 Jan 2016 - 15:13)
En tout cas merci pour tous ces conseils argumenter cela m'aide vraiment.
Effectivement ce second design à été fait vite. Uploadé à 2h du mat' avec les yeux mi-clos.

Mon erreur. Vouloir trop en faire. Chaque effet "kikoolol" était dans ma démarche fait, pour dire :

Woauh! Regarder tout les styles originaux que j'arrive à coder avec mon logiciel. Sauf que le message ne passe pas. Les effets c'est CSS3. Ce n'est pas grâce à mon logiciel que CSS3 arrive à faire des dégradés radial.
Mon logiciel ne sert qu'à faciliter sa mise en oeuvre. Première erreur de com' et en plus un visiteur ne peux comprendre la démarche.

Le problème quand l'on code seul. C'est que l'on as beau ce faire des séances de brainstorming. "On storm, on storm" dans tous les sens et une fois les pieds sur terre. On est évidement d'accord avec soi même. Et en plus on as légèrement le tournis. Smiley confus . Sans contradiction argumenter , c'est vraiment difficile de ne pas ce planter.

J'ai donc suivi votre conseil. J'ai pris le temps ce week-end de me sortir la tête du code.
De plus je viens de finir d'écrire le script de ma vidéo, ce qui m'as permit de recentrer ma communication, pour ne pas partir dans tous les sens.

Ma première erreur suite au premier post. Cela as été de me dire.

Ok mon design est trop sobre et le contenue indigeste.
Je vais donc rendre le contenue sobre et faire claquer un beau design.

Au final mon contenue fut trop pauvre (un new user, sans la vidéo est paumé) et mon design trop chargé.

J'aime à me dire que j'ai vomis deux fois. Smiley biggol Donc ça c'est fait!! Trop de truc fait avec le cœur et pas assez avec la tête.

Ma deuxième erreur. Prendre conscience qu'il me faut une vidéo pour expliquer clairement l'usage du logiciel.
Et ne pas la faire, j'ai eu le malheur de céder à l'urgence (refaire le site), et je ne me suis pas attaché à ce qui fut important. La vidéo.


Et un site tout blanc avec la vidéo , et quelque élément HTML pour tester la démo aurait suffit.

Donc voilà ou j'en suis. Bon j'avoue j'ai réécrit le design du site. Je ne pouvait laisser un design aussi criard en ligne. Je n'ai garder que l'essentielle. Cela fait encore brouillon . Mais je me prépare pour enregistrer mes rush. Et je recalibrerait mon design et ma com' autour de la vidéo de présentation.

La suite ? Pour bientôt . Smiley smile
Bonjour,
Ne pas se laisser gagner par le découragement... On respire un bon coup et ça devrait pouvoir repartir sur de bonnes bases.
Après avoir fait un petit tour sur ta nouvelle version du site, voici mes quelques observation en précisant que je commente sur le fond et non sur la forme, les améliorations en terme de design ayant été bien explicitées par les précédents intervenants.
En premier lieu, je pense que tu devrais bien réfléchir au contenu du site avant de travailler sur sa présentation. A priori la partie technique (tes outils CSS) est là et il te faut les mettre en avant en précisant très clairement : Ce que ça fait, comment ça le fait et, éventuellement, à quel prix tu mettras l'outil à disposition des personnes intéressées.
J'ai tout d'abord pensé que tu avais développé une extension Firefox ou autre, avant de réaliser que ce n'était pas le cas (sauf erreur de ma part).
Il n'y a aucun problème à mettre en ligne un site décrivant un outil ou un logiciel encore en cours de développement, sous réserve que le site dédié à cet outil précise très clairement (à mon sens dès le début de la page d'accueil) :
- ce qu'est l'outil
- son stade de développement
- la feuille de route
- les fonctionnalités incomplètes ou à venir
- etc.
Développant un générateur HTML, je suis dans la même situation que toi sur ce point. Mon outil est très, très loin d'être finalisé mais j'ai tout de même choisi de mettre en ligne un site (cf. profil) permettant d'obtenir des informations actualisées au fur et à mesure de l'avancement du projet.
La mise en forme du site niveau CSS est extrêmement minimaliste, car l'essentiel pour l'instant est bien le contenu rédactionnel du site, son côté informatif, plutôt qu'un effet tendance ou mode.
A priori ton développement semble intéressant et intéresser si je lis bien les commentaires, aussi me paraît-il utile de ne pas mettre la charrue avant les bœufs et de soigner ce fameux contenu (vidéo, démo, description, orthographe, etc.).
Le design et la mise en forme me paraissent devoir venir en suivant, attendu la masse de boulot qui t'attend pour rédiger, corriger ce fameux contenu.
Bon courage en tout cas, car il semble y avoir un réel potentiel derrière (à voir pour "en vivre" toutefois...) et il serait dommage de perdre des internautes potentiellement intéressés, au seul motif qu'ils ont trouvé le site un peu "fouillis" en le parcourant.
Voili, voilou... Ma petite contribution.
Modifié par sepecat (26 Jan 2016 - 19:47)
Modérateur
Bonjour Radicraft,

Pour éclairer la situation concernant l'url qui ne fonctionnait pas, tu as mal utilisé le BBCode (tag Lien) du forum, comme dans ton message du 11 Jan 2016, 22:56:14. Tes liens pointent vers http://.

Sans que tu le remarques, une modératrice avait édité ton premier message pour corriger ton lien afin qu'il devienne cliquable. C'est d'ailleurs écrit en bas de ton premier message (Modifié par Stéphanie W. (08 Jan 2016 - 19:27))

Au final, au moment où sepecat a cliqué sur le lien, il ne fonctionnait effectivement pas. Mais comme Stéphanie a corrigé la situation quelques temps après, tu ne pouvais pas comprendre de quoi sepecat parlait.

Bref, il n'y avait aucun problème avec ton hébergeur ou ton site. C'était seulement un problème avec ton BBCode sur le forum.
Tony Monast a écrit :
Bonjour Radicraft,

Pour éclairer la situation concernant l'url qui ne fonctionnait pas, tu as mal utilisé le BBCode (tag Lien) du forum, comme dans ton message du 11 Jan 2016, 22:56:14. Tes liens pointent vers http://.

Sans que tu le remarques, une modératrice avait édité ton premier message pour corriger ton lien afin qu'il devienne cliquable. C'est d'ailleurs écrit en bas de ton premier message (Modifié par Stéphanie W. (08 Jan 2016 - 19:27))

Au final, au moment où sepecat a cliqué sur le lien, il ne fonctionnait effectivement pas. Mais comme Stéphanie a corrigé la situation quelques temps après, tu ne pouvais pas comprendre de quoi sepecat parlait.

Bref, il n'y avait aucun problème avec ton hébergeur ou ton site. C'était seulement un problème avec ton BBCode sur le forum.


Merci pour ces précisons.
Arggh!! Comme quoi , j'avais bien fait une bêtise Smiley murf .
Je n'avais pas vu non plus que le sujet avait été modéré . C'est écrit tout petit gris sur gris.

"J'ai tout d'abord pensé que tu avais développé une extension Firefox ou autre, avant de réaliser que ce n'était pas le cas (sauf erreur de ma part).
"

Plugin,appWeb,logiWeb,programme .
Je ne sais pas encore comment le définir. Dans mes contenus, je me suis aperçu que je n'utilisais jamais le même terme.
La version complète est empacté dans un seul dossier , que tu colles dans les sites installés dans ton répertoire 'www'. Quelque paramètres d'installation (repertoire ROOT / connexion etc...). Et tout fonctionne. Bon faut quand même faire une installation de la BDD. Mais bon, avec phpmyadmin c'est vite fait.

"En premier lieu, je pense que tu devrais bien réfléchir au contenu du site avant de travailler sur sa présentation.
"

Je suis d’accord. J'ai toujours fui un petit peu ce coté là du projet. Je me suis créer des fichiers TXT brut, pour me sortir la tête du code et penser rédactionnelle. C'est le point d'entrer de ma communication. Après il faut que j'arrive à bien ordonner les différents propos et c'est en voyant ton site et le "plan du site", que cela as fait tilt.

La page index et sa ramification et enfin les feuilles situées sur les noeud puis en bout de branche.
Etant menuisier cette image de l'arbre me plait beaucoup, on la retrouve dans tous les langages.

En vivre ? En soit ce serait le rêve absolue. A la base ce que j'aime, c'est apprendre . Comme cela n'avais pas d’intérêt financier. Je n'arrivais pas à mettre en pratique ce que j'apprenais. Et c'est dans se cheminement d’apprentissage (html->css->php->SQL->Jquery) qu'est né ce concept .En gros pour moi c'est une mise en pratique de ce que j'apprends.


J'utilise mon programme pour moi perso, par ce que j'aime dessiner, j'aime le design et CSS est le point jonction entre moi et les languages informatique. C'est super-intéressant de faire du webdesign, mais CSS est chiant à écrire à la main. Et je prends un vrai plaisir à utiliser mon programme pour styliser en CSS.

En vivre ça signifie le vendre , on passe du cœur à la tête et la perception du concept devient différente.

Et quand on passe à une opération commerciale, on doit fournir à ses clients un produit sans dysfonctionnement. A part en accès anticipé, mais ça c'est la magie du développement

J'ai beau y réfléchir et je ne vois que de multiples solutions:

De base, une étiquette un prix. Un produit finalisé et sans bug...
Accès anticipé . Avec un prix raisonnable pour un produit en béta
Kickstarter, le mot magique. Mais il me semble que ce soit plus "envisageable" si j'avais une présentation en anglais/français et quelque contact au State. Smiley cligne Mais pour le moment vu mon niveau d'anglais écrit...
Reste la formation de création d'entreprise avec le CCI, cela permet de s'installer dans une vrai dynamique d'entrepreneur, mais pour y avoir accès cela m'oblige à passer par pole emploie , devenir "chomeur" pour pouvoir la financer.

Et je compte bien que 2016 soir plus que le centenaire de la relativité générale, mais que ce soit aussi l'année ou j'aurait trouverais les leviers nécessaire, pour que je mon temps d'ouvrier intérimaire ce transforme en temps que je consacrerait au développement. Aujourd'hui le temps est vraiment ce qui me freine le plus, et cela empiète trop sur mon temps perso (vie de famille).

Voilà je me suis fixé un cap pour cette année.


"Il faut toujours viser la lune, car même en cas d’échec on atterrit dans les étoiles".
Oscar wild
Modifié par raficraft (29 Jan 2016 - 18:37)
Sujet clos
Aller à