Kommunauty
Connexion
Inscription

[WIP] Quelques petites créations


SiMax Messages : 7572

Très sympa, j'aime beaucoup les champs avec juste une ligne en-dessous. Tu pourrais peut être retravailler le titre du formulaire et la ligne avec les conditions, non ?

mardi 14 mai 2013

Cr0wn Messages : 49

Merci j'aime beaucoup aussi

J'ai essayé de modifier un peu ça, comme tu le suggères, mais je n'arrive pas à avoir quelque chose de plus « joli » et ergonomique en même temps.. Tu as quelques idées ?

mardi 14 mai 2013

SiMax Messages : 7572

Peut être rajouter une ligne entre le titre et la description, augmenter les marges haut/bas et/ou mettre le texte de description en gras. Parce que là il y a un problème de mise en avant : on a l'impression que tout est sur le même plan dans la page.

Pourquoi pas sinon mettre le titre et la description au dessus du cadre blanc et réserver le cadre blanc au formulaire lui-même.

Et je viens de le remarquer mais je préfère quand les boutons de validation sont à droite.

mardi 14 mai 2013

Cr0wn Messages : 49

Merci de tes propositions J'en prendrai compte et je te montrerai un peu ce que j'ai fait !

« Prend soins de tes tulipes ! »

mardi 14 mai 2013

SiMax Messages : 7572

Ca fait plaisir la p'tite famille là. Que la graine de sésame soit avec toi

mardi 14 mai 2013

Lucas Messages : 830

Yo ! Bon, j'ai peu de temps pour faire une remarque constructive, mais quelques observations :

Bon, contrairement à SiMax, je suis pas sûr que faire des inputs avec uniquement un bord ce soit une judicieuse idée. C'est beaucoup trop différent (même si je prône l'innovation, faut pas croire hein) des conventions, et à moins que l'utilisateur passe la souris dessus, il est difficile de savoir que c'est une zone de texte (si si, même avec l'icône).

Ensuite, tu devrais vraiment faire gaffe à faire des marges régulières, parce que ça saute aux yeux et ça donne une structure bancale. Par exemple, en haut et en bas du bloc d'envoi de l'avatar, l'espace est différent (de environ 30px en haut contre 20 et quelques en bas), et par exemple le même espace de chaque côté de la séparation horizontale.

Sinon, le bloc de l'avatar je le verrai plutôt carré en ce qui me concerne, et après (même si fantaisie), plutôt que de laisser le texte en gris une fois l'avatar glissé-déposé, tu mettes uniquementle loader aligné verticalement, avec en dessous un lien pour annuler par exemple.

Et je te déconseille les titres en nuances de gris (genre dans le bloc de l'avatar, ou même les icônes de crayon), parce qu'il faut du contraste.

Mais sinon, j'aime bien la disposition, c'est simple mais c'est cool. mais simple.

Bonne chance l'ami !

mardi 14 mai 2013

Cr0wn Messages : 49

Re !

J'ai essayé de prendre en compte vos suggestions, surtout les tiennes Lucas après avoir vu tes réalisations

Sinon, je reviens pour vous questionner sur une point précis.

Ci-dessous, la page d'accueil d'un mini réseau social sur un projet « site, communautaire, prépa HEC, écoles de commerces, etc. ». Comme vous le voyez, le formulaire d'ajout d'une nouvelle publication n'est pas très très bien pensée on pourrait faire mieux (quant à la timeline, je n'ai pas envie de la changer ).

Lorsque je clique sur les différents « Message », « Photo », « Fichier » et « Sondage », un formulaire différent apparaît puisque les informations à envoyer sont différentes.

Bref, je pensais à modifier ce petit formulaire et sa mise en page pour que ça ressemble justement aux différents éléments de la timeline, et que ça soit tout en haut de la timeline en en faisant partie. Ainsi, à gauche de ce mini-formulaire, on aurait, comme pour les autres éléments, un background en cercle coloré qui représente le type de publication. De cette façon, lorsque je clique, le background change (passant du vert pour « statut » au orange pour « photo », etc.).

Et au final, j'ai aussi pensé à une sorte d'insertion LIVE en glissé (un peu comme ici) à la timeline avec une animation jQuery et un peu d'Ajax.

Qu'en pensez-vous ? Attention, vos avis sont extrêmement précieux !

dimanche 26 mai 2013 (Dernière édition dimanche 26 mai 2013)

Notorius Messages : 589

J'applaudis la perf' c'est du beau boulot, le design est bien intégré et vraiment soigné. Par contre comme disait Lucas ça manque peut être légèrement de contraste au niveau du header. Les nuances de bleu ont tendance à se mélanger avec le blanc pour donner quelque chose qui manque un peu de lisibilité.

Le design fait très Facebook like d'ailleurs, mais comme tu parlais de réseau social étudiant je suppose que c'est voulu

mercredi 29 mai 2013

Lucas Messages : 830
Cr0wn :

J'ai essayé de prendre en compte vos suggestions, surtout les tiennes Lucas après avoir vu tes réalisations

Je sais pas si c'est de l'ironie ou un vrai compliment, mais attention hein, surtout ne prend pas mes productions comme exemple, c'est tout caca aussi, sans originalité ni cohérence toussa.

Sinon, voyons ensemble ce qui ne va pas sur ton formulaire, et pour ça, rien de mieux que d'analyser ce que font les grands (parce que bien qu'en étant des putes niveau vie privée, ils gèrent pas mal niveau design).

Bon, évidemment, Facebook.

Déjà, tu peux constater que le champ de texte est réduit niveau largeur, et globalement, sur un site web, des contenus pas très larges c'est plus facile à lire. Bon. Ensuite, on voit les options globales en haut, ça tu le fais bien. Mais les options non-actives (ici l'ajout de photos) n'est pas en gris mais en une couleur particulière, qui sur tous le site rappelle les liens. Elle est significative de ce sur quoi on peut cocher, du coup on comprend tout de suite que c'est une option.

Sur ton design, rien ne différencie un lien d'un texte normal, et ça, c'est mal.

Aussi, ton bouton Publier est à perpet'. Tu peux le mettre à droite, et c'est même souvent le cas sur les formulaires de ce type, mais à côté, au même niveau, je te le déconseille fortement. Parce que la souris se déplace plus horizontalement, c'est caca. C'est bien plus agréable de descendre la souris. Voilà voilà, ça c'est mon ressenti d'utilisateur .

Bon après tu peux mettre les bords du champ de texte plus sombres, histoire qu'ils délimitent bien la zone, à voir.

Donc on a fait le tour pour Facebook, après ya les petites options en bas, on s'en fout, ça nous sera pas vraiment utile pour ton cas.

Maintenant, Google Plus. Alors oui, Google+ c'est tout mort, personne, même si c'est plutôt intuitif, souple et rapide.

  • Alors là aussi, tu peux le voir, les sections sont organisées verticalement : D'abord le champ de texte (bonne idée), après les types de pièces jointes (plus adapté à tes besoins je pense, puisque chacune de ces options est accompagnée d'un texte), et d'une zone en bas d'envoi.
  • Bon la zone d'envoi, tu peux constater qu'elle est à gauche, ça marche aussi, quand c'est bien fait moi j'aime bien. Seul reproche : Elle est décalée par rapport aux champs du formulaire, et ça s'est moyen, je l'aurai bien vu au même niveau que les champs.
  • Des icônes. Comme sur Facebook, les options sont caractérisées par des icônes. Alors bon, je suis vraiment pas fan des icônes monochromatiques, mais là comme chacune a une couleur propre qui rappelle les différents services, ça marche niquel.

Hihihiii, j'ai pas trop le temps d'étaler les observations, mais je crois que t'as déjà pas mal de matière, pour l'instant je suis resté ciblé uniquement sur le form. Bon courage gars !

jeudi 30 mai 2013

Greenz Messages : 163

C'est sympa sa me rappel les début de facebook avant qu'ils fassent trop de bullshit =)

samedi 8 juin 2013

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !