Dois-je me standardiser au norme de web-design ?

Règle de conception générale du site web

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour,

J’espère que ma question soit dans la bonne catégorie. Mon message n’est pas un problème technique HTML/CSS, ni d’une règle CSS mais de la conception générale du site web, le rendu visuelle. J’ai posté sur un autre forum où j’étais déjà inscrit mais je n’ai pas eu la popularité escomptée.

J’ai le site suivant :

Ecran tout en haut
image.png
image.png

(Petite explication sur le fonctionnement : Lorsque l’écran est tout en haut mes éléments n’apparaissent pas. Ils attendent que l’écran passe dessus pour les animer en javascript, je me suis inspiré de stackoverflow pour faire cette animation).

Ecran tout en bas -> Animation activée
image.png
image.png

Mon problème :

Je souhaite votre avis parce que je ne souhaite pas d’un web design qui fait système D mais plus un web design qui fait confiance que bricolé à la main. Je pensais m’orienter vers un thème similaire à la mode d’aujourd’hui.

Lors de la réalisation je pensais faire un bandeau de 900px de hauteur, puis passer sur un background blanc. Finalement j’ai gardé mon background en noise et marron/beige. A vrai dire, le fond marron m’arrange pour mes miniatures car correspond au fond de mon application :

image.png
image.png

Je ne veux pas ressembler à ce genre de site qui ont un site de couleur et qui rend mal. (EDIT : correction du lien, ce n’était pas le bon).


Je vous remercie,

43.

NB : Une édition full md comme github. :o C’est marrant de voir ces expressions en orange plutôt que dégarnie et jaune.

"Votre image est trop lourde (1155.060546875 Kio). La taille maximum est de 1024.0 Kio !" —-> C’est plus que précis!

"Votre image est trop lourde (1025.9794921875 Kio). La taille maximum est de 1024.0 Kio !" —-> Il m’en veut, je vous dis.

EDIT : Simplification du message.

Édité par QuaranteTrois

+0 -0

Cette réponse a aidé l’auteur du sujet

C’est rigolo. Mais c’est vrai que le design fait un peu débrouille. Celui de StackOverFlow m’inspire plus confiance ¯\_(ツ)_/¯

ache.one                 🦹         👾                                🦊

+1 -0
Auteur du sujet

C’est rigolo. Mais c’est vrai que le design fait un peu débrouille. Celui de StackOverFlow m’inspire plus confiance ¯\_(ツ)_/¯

ache

Il ne manquerait plus qu’on qualifie mon chat de mignon. :pirate:


amael : Mais elle est orange


Je me suis mis au boulot ce soir, j’ai réprimé toute ma créativité, et j’ai suivi la norme, et voilà le résultat :

image.png
image.png
image.png
image.png

Avez-vous des suggestions sur ce que je peux améliorer d’autre ou comment ? En espérant que mon problème non-technique ait ça place ici. C’est assez compliqué d’avoir du recule sur son propre travail.

Édité par QuaranteTrois

+0 -0

Cette réponse a aidé l’auteur du sujet

Du coup, oui c’est plus dans le moule ^^"

Tu n’étais pas obliger de mettre un fond blanc. M’enfin tu fais ce que tu veux. Ça m’inspire beaucoup plus confiance. Je ne comprend pas bien l’intégration de la barre « Nom de la chaîne » Twitter.
Il y a deux #2. Pour finir, c’est bizarre le cadre violet ainsi que le lien « Signalez un bug »

ache.one                 🦹         👾                                🦊

+0 -0
Auteur du sujet

Tu n’étais pas obliger de mettre un fond blanc.

Ça ne me plait pas trop en marron, à moins que j’intègre une autre couleur à la place du noir :

https://screenshots.firefox.com/0b00la3vuZIpwxNT/liremonch.at

image.png
image.png

Je ne comprend pas bien l’intégration de la barre « Nom de la chaîne » Twitter.

Comment ça ? Sur la deuxième capture d’écran c’est un problème de Firefox car elle est fixé en haut de l’écran.

Ou c’est le fait qu’il manque une séparation ?


Il y a deux #2.

Oh ! J’ai oublié de changer.

Pour finir, c’est bizarre le cadre violet

ache

Je vais remplacer le bouton "Accéder au chat" par le contenu du cadre, ça évitera un doublon.

le lien « Signalez un bug »

En effet, ça casse la grille CSS. je vais voir le rendu si je le centre ou non.

Édité par QuaranteTrois

+0 -0

Cette réponse a aidé l’auteur du sujet

Il y a 3 types de designers

  • ceux qui suivent aveuglément (la majorité)
  • ceux qui innove (et qui sont en avance sur tout le monde , souvent trop)
  • ceux qui restent bloqué à un moment donnée

Ne reste pas bloqué, cela rend aigri… :)

Perso, j’adore la partie haute de ton nouveau modèle. J’aurai préféré que la totalité de ta page reste sombre et pas marron/sale.

Dans le style novateur et sombre, j’aime bien

https://dribbble.com/uixninja

+0 -0

Cette réponse a aidé l’auteur du sujet

Perso, j’adore la partie haute de ton nouveau modèle. J’aurai préféré que la totalité de ta page reste sombre et pas marron/sale.

De même pour moi.

ache.one                 🦹         👾                                🦊

+0 -0
Auteur du sujet

Le spoiler était simplement un aperçu de l’idée d’un fond non blanc, je ne l’ai pas mis à mon site ici l’« actuel ». Un fond noir demande de refaire tout le site. :/

J’ai fais une autre maquette :

Final prochaine version
image.png
image.png

Je mettrais bientôt cette nouvelle version en prod.


Mon problème qui me pousse à suivre la norme, c’est que j’ai un manque de visibilité et une faible utilisation de mon application chat. Je voulais donc essayer de gagner un maximum de point pour me faire connaître. Vous savez : Les 30 premières secondes.

+0 -0

Cette réponse a aidé l’auteur du sujet

perso, les polices ne me choquent pas du tout.

voici un design que je trouve intéressant et dont tu pourrais facilement t’inspirer. https://www.nativescript.org/

perso, je laisserai la partie haute comme tu la réalisée. Puis en dessous, je ferrais un encart sur les 2/3 de la page avec les 5 points (un peu comme la section "Why you need NativeScript ", un icone simple, une phrase simple) et sur le 1/3 restant une copie d’écran (ou mieux un dessin) qui va mettre en valeur une de tes 5 cartes.

en clair toutes les 10 secondes, le dessin change et la carte correspondante est mise en avant par une couleur plus soutenue.

quand on clique sur une carte, on ouvre une page, section dédié, un modal, … avec plus d’informations et le dessin/copie d’écran en plus grand.

+1 -0
Auteur du sujet

J’aime beaucoup l’idée ! En plus elle arrive au bon moment, je prévoyais de réorganiser mes arguments car je programme une "vraie" nouvelle fonctionnalité qui va mettre ces arguments au second rang.

+0 -0
Auteur du sujet

Je n’ai pas fini de développer mes nouvelles fonctionnalités. J’attends donc un peu avant de refaire de zéro le design de ma page pour partir sur une maquette similaire à la proposition de Leeroy.

En attendant j’ai fais ceci :

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte