Bonjour,

Je viens vous présenter mon Template HTML, que j'ai nommé HEAVEN (un peu prétentieux :) ).

Pour tout vous dire, je compte le vendre sur themeforest une fois que je l'aurai totalement fini.
Le site est a la base du bootstrap, que je modifie complètement pour donner un autre style tout en gardant la facilité de bootstrap et l'aspect responsive.

J'ai donc besoin de vos avis sur mon site, a propos du design et aussi de l'anglais (sur les quelques phrases qu'il y a).

Lien vers mon thème: http://demo.flatea.com/heaven/1.1/

Vos avis ? :D

10 réponses


J'adore ! Si ce n'est quelques points, libre à toi de les changer :

  • les outlines noirs sur les input

  • Peut être une police un peu plus "grasse" ?

Dans l'ensemble c'est très chouette.

Je note quelques petits points à retravailler selon moi :

Premier point : l'ensemble des couleurs qui ne me plait pas trop personnellement.
J'aurais choisis des couleurs un peu plus pastel pour certaines, un peu plus vive pour d'autres.
Exemple, à la place du rouge #e74c3c, j'aurais pris plutôt un #F55858
A la place du vert #2ecc71, j'aurais pris un #69CC93.
A la place du bleu nuit #34495e, j'aurais pris un bleu nuit plus sombre #263544.
A la place du jaune actuel, prendre un #F5D946 et mettre la typo en noir.
....

Deuxième point : petit problème de hover sur l'image dans le carroussel.
Il y une petite saccade au bout d'une petite seconde, je te laisse hover l'image et regarder ça de toi même.

Troisième point : les icônes (horloge, dictionnaire, télé etc), ce serait le top si c'était du full css. Ca demande du gros taf mais ça permettrait de ne pas pixeliser et de ne pas charger des images en png.

Et un mini quatrième point : pouvoir avoir le focus sur l'input quand on clique sur l'icône à gauche de celui-ci.

Sinon ce que j'adore :

  • les animations de la div parente des icônes de partage sur le survol des images dans la partie recent work
  • le fait que ce soit un template responsive (et donc le menu pour les mobiles etc)
  • le formulaire de contact, simple mais efficace
  • la partie portfolio qui est top !
  • la partie blog, par révolutionnaire mais on reconnait que c'est un blog
  • le grid layout
  • les animations CSS
  • le placeholder pour < IE9
  • le mixtup
  • les responsive video

Great work !

Jices
Auteur

@Benjamin Derepas

  • outlines sur les inputs
    En effet, avec un peu de recul sa rend pas terrible.
    Je vais voir ce que je peux faire :)
  • police plus grasse
    En fait, je galère totalement a trouver une police adapté.. si t'a un coup de pouce a donner, n'hésite pas :)

@Pewel-OutOfNutella

  • Premier point
    Oui les couleurs ne sont pas top, et je suis vraiment mauvais pour ça.
    Les couleurs que tu me propose sont pas mal, je vais les changer pour la prochaine version.

  • Deuxième point
    Tu parle de la petite fenêtre chrome, dans le 2eme slider ?
    Car je remarque pas de saccades pour ma part ..

  • Troisième point
    En full css ?
    Beaucoup de travail, surtout si je veux faire la trentaine d'icones..

  • Quatrième point
    Oui pourquoi pas, ca doit se faire en jQuery :)

@taskone

  • Dropdown
    En effet je changerai ca

  • Footer
    Oui tu as raison, je changerai ça aussi.

Merci à vous trois, je prévois une nouvelle version avec ces changements et quelques autres pour dans plusieurs jours.
N'hésitez pas à donner encore vos avis, remarques, etc.. :)

C'est vraiment pas mal du tout. Les choix des couleurs sont un peu ... difficiles, mais les goûts et les couleurs (justement), chacun et libre d'apprécier.

En revanche, le fonctionnel est niquel, on voit que tout a été pensé, testé, donc c'est vraiment un bon point.

Quelques ralentissements cependant sur certaines animations (caroussel, notamment celui que l'on voit sur la home).

Comme le disais taskone, effectivement le menu devrait s'ouvrir au survol, question d'habitude, mais il doit aussi pouvoir s'ouvrir et se fixer au clic, pour ceux qui ont l'autre habitude. Y a moyen de gérer ça avec un peu de JS.

Niveau remarques réelles, il y a deux choses qui me gênent profondément :

  • la police Dolce Vita : elle fait tellement cheap, tellement années 2000, que l'on ne voit que ça alors que tout le reste du template est magnifique ! Ca agresse les yeux en fait.
  • le header en fixed : ok il y a un bouton back to top qui est fixed au bas de l'écran, mais perso j'ai besoin des deux, là encore question d'habitude j'imagine, mais niveau UI c'est comme ça que je le vois : j'ai finis de lire la page, je sais que j'ai besoin du header pour naviguer, je veux l'avoir immédiatement sous les yeux et sous la souris, pas être obligé de faire un clic pour y accéder.

En dehors de ça, c'est vraiment du beau travail ! ;)

Jices
Auteur

@Brandon

Merci :)

@Pakito

  • Je changerai les couleurs :)

  • Bizarre, mon carousel chez moi est vraiment fluide..

  • Oui les menus s'ouvriront au :hover

  • Dac, je changerai aussi cette police :p

  • C'est prévu :D

Merci pour vos retours :)

J'aime beaucoup aussi. Je ne vais pas encore passer en revu les +/- parce que je n'apporterai rien de nouveau par rapport aux précédents commentaires, mais c'est du super boulot.

Par contre l'anglais est effectivement a revoir par certains endroits. Je ne vais pas être exhaustif mais:

/index.html:

  • Spread the world -> Spread the word

  • All you need is everywhere -> pas sur de ce que tu veux dire

  • Put a link to the video, for the mobile -> pas sur de ce que tu veux dire

  • Nowadays, mobile represents 15% of all internet traffic, that's why they should not especially forget -> Nowadays, mobile devices account for 15% of all internet traffic, which is why they should not be forgotten

  • Code is very simple to understand, and it's composed in blocks that you can easily move or remove -> The code is very easy to understand, and is composed of blocks that you can easily add or remove

/uielements.html

  • X is the number of input which textarea need to be the same height -> X is the number of stacked inputs that the textarea must be the same height of.

  • Tabs, Pills & Accordion -> Tabs, Pills & Accordions (d'une facon générale, certains titres sont au pluriels alors que d'autres sont au singulier)

/extra-features.html

  • HEAVEN comes with a few of little JS scripts. -> HEAVEN comes with some small JS scripts.

  • prevent link with empty anchor href="#" to redirect to top -> prevent links with empty anchor href="#" from redirecting to the top

  • smooth scroll to anchor if the link have the smooth class (or parent) -> smooth scroll to anchor if the link has the smooth class (or parent)

  • The canvas menu is generated automatically -> The canvas menu is automatically generated

  • And on top of that, mmenu support second level dropdown and fixed navbar. What else ? -> And on top of that, mmenu supports second level dropdown and fixed navbar. What else? (What else ? -> probablement pas le message que tu veux faire passer. Egalement: en anglais, pas d'espace entre un mot et la point d'interrogation qui le suit)

  • by automatically putting the placeholder text in the input and remove it when user click in the input. -> by automatically putting the placeholder text in the input and removing it when the user clicks in the input.

Il y a des passages en anglais qui sont clairement différents des autres (probablement pas de ton cru), tels que:
"animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness."
Si tu piques ca sur un site web, fais gaffe que tu ais le droit !

Bref, pas mal de choses (il y en a d'autres ... mais j'ai déjà vu largement pire :) ).

Jices
Auteur

Spread the world => je veux dire un truc du genre "Dit le au monde entier"

Merci pour les corrections, ça fera plus professionnel déjà :)

Pour les passages que j'ai repris, effectivement je vais les mettre en citation + source.

World = monde
Word = mot

"Spread the word" est une expression correcte, qui veut dire: "faites circuler l'info"
"Tell the world" pourrait etre une alternative tout aussi légitime si tu veux absolument mettre le mot "world", et qui voudrait donc dire "Dites au monde entier"

Mais le mixe des deux ne va pas du tout :) (litéralement ca voudrait dire un truc du genre: "étale le monde")

Jices
Auteur

Ah voila, "tell the word" est ce que je cherchais.

Blague à part, c'est bien "tell the world" que je voulais dire, merci à toi !

Très très beau template. J'adore, continuez comme ça.