Pourquoi les gens me disent-ils que mon site est horrible?

J'ai développé un site Web et je cherchais récemment un emploi. Pratiquement tous les intervieweurs, après y avoir jeté un rapide coup d'œil, m'ont dit que mon site était terriblement conçu (mais aimait le concept). Je devrais mentionner que je suis ingénieur logiciel, mais j'essaie vraiment de bien faire la conception. J'ai essayé de le repenser, mais je n'ai aucune idée de ce qu'il y a à changer.

Voici à quoi cela ressemble maintenant:

J'apprécierais vraiment tous les conseils spécifiques à mon site, ou sur la façon d'améliorer la conception d'un site en général (j'ai visité certains sites qui expliquent comment concevoir des sites, mais cela ne semble pas aider :)).

Edit 1 : Comme je l'ai dit, les gens ont tendance à en avoir une mauvaise impression juste en y jetant un œil, avant même que j'introduise la fonctionnalité. Cela me fait penser qu'il y a un problème avec les couleurs que j'ai choisies ou la disposition. Et je pensais qu'une conception de site spécifique peut être utile aux concepteurs, tout comme une histoire spécifique est éducative pour les étudiants en littérature, et des algorithmes spécifiques sont utiles pour les étudiants en logiciels. Merci.

Une note latérale: Fonctionnalité: si cela importe, voici ce que le site vise à accomplir (très brièvement): les utilisateurs peuvent ajouter des sujets et pour chaque sujet, ajouter des questions avec leurs réponses . Le site crée des "tests" et des "quiz" pour que les utilisateurs prennent et comparent leurs résultats

Edit 2 : Voici un autre écran d'impression:

Edit 3 : Juste pour être clair, aucune de ces captures d'écran n'est ma page de destination. Ce sont des pages de contenu spécifiques à un sujet.

Tout d'abord, je tiens à souligner que tout dans cette réponse est juste MHO, pas une vérité universelle;).

En tant qu'ingénieur logiciel, vous savez à quel point il est important dans chaque projet d'avoir une structure claire et bien définie - la commande. C'est à peu près la même chose pour les arts et le design «visuels». J'ai tendance à voir le design comme une «encapsulation visuelle». Le concepteur connaît la structure des informations qu'il souhaite transmettre à son public cible. Par exemple: il conçoit un livre. Il sait que ce livre est divisé en chapitres et chaque chapitre en sous-chapitres. Il sait que le sujet principal est annoté par quelques notes (notes de marge, notes de bas de page, sidenotes). Il doit maintenant utiliser son «arsenal» pour rendre cette structure «visible». Il peut utiliser une taille et une forme de police et remplir toutes les pages consécutives avec une goutte de glyphes, mais cela signifierait que le lecteur devrait tout lire, interpréter et comprendre pour connaître la structure de l'information contenue. Le concepteur peut également «suggérer» au lecteur l'importance / le niveau de diverses informations. L'une des astuces consiste à utiliser la taille de la police pour afficher la gradation des «données» présentées. Si cela est fait, le lecteur n'aura pas à lire (sans parler d'interpréter) le texte pour faire la différence entre le sujet principal et par exemple les notes de bas de page. L'importance et la «position» réciproque des informations sont «décrites» visuellement. Le lecteur est capable de «décapsuler» facilement les informations. On peut aussi le voir comme une sorte de processus de sérialisation / désérialisation se déroulant dans le domaine visuel (les informations abstraites sont coulées dans l'espace «visuel»). C'est une simplification énorme, mais je pense que pour les débutants, c'est assez bon. Si cela est fait, le lecteur n'aura pas à lire (sans parler d'interpréter) le texte pour faire la différence entre le sujet principal et par exemple les notes de bas de page. L'importance et la «position» réciproque des informations sont «décrites» visuellement. Le lecteur est capable de «décapsuler» facilement les informations. On peut aussi le voir comme une sorte de processus de sérialisation / désérialisation se déroulant dans le domaine visuel (les informations abstraites sont coulées dans l'espace «visuel»). C'est une simplification énorme, mais je pense que pour les débutants, c'est assez bon. Si cela est fait, le lecteur n'aura pas à lire (sans parler d'interpréter) le texte pour faire la différence entre le sujet principal et par exemple les notes de bas de page. L'importance et la «position» réciproque des informations sont «décrites» visuellement. Le lecteur est capable de «décapsuler» facilement les informations. On peut aussi le voir comme une sorte de processus de sérialisation / désérialisation se déroulant dans le domaine visuel (les informations abstraites sont coulées dans l'espace «visuel»). C'est une simplification énorme, mais je pense que pour les débutants, c'est assez bon. On peut aussi le voir comme une sorte de processus de sérialisation / désérialisation se déroulant dans le domaine visuel (les informations abstraites sont coulées dans l'espace «visuel»). C'est une simplification énorme, mais je pense que pour les débutants, c'est assez bon. On peut aussi le voir comme une sorte de processus de sérialisation / désérialisation se déroulant dans le domaine visuel (les informations abstraites sont coulées dans l'espace «visuel»). C'est une simplification énorme, mais je pense que pour les débutants, c'est assez bon.

Maintenant, en ce qui concerne votre conception. Personnellement, je ne sais pas par où commencer. Je dois tout lire, tout comprendre, y penser, puis remettre les choses dans l'ordre qui me semble juste. C'est beaucoup de travail pour moi en tant que lecteur. Il est difficile de définir ce qui est le plus et le moins important ici en un coup d'œil. Même quand je prendrai mon temps pour apprendre à connaître le contenu, il n'y a toujours pas beaucoup de «repères» visuels qui m'aident à trouver un moyen d'accéder à certaines données spécifiques. Pensez: lorsque vous laissez votre voiture sur le terrain, vous cherchez un «point de repère» pour vous aider à vous souveniroù se trouve votre voiture. Essayez de réfléchir un instant à la façon dont vous utilisez les sites Web, à la façon dont vous vous souvenez des options / liens que vous utilisez le plus souvent. N'est-ce pas que vous cherchez un lien comme un «deuxième carré à droite de ce logo rouge dans la partie supérieure du site»? Pas de lecture - juste se souvenir de l'image / de l'emplacement.

Je pense que le plus gros problème ici n'est pas la «laideur» - je pense que c'est le manque de gradation de l'importance. Essayez de «guider» le visiteur de votre site Web à travers vos données. Que voulez-vous qu'il voit en premier? Où partir de là? De cette façon, vous créez «un flux de lecture» / «un flux de travail». Vous induisez (incept peut-être?;)) Un chemin spécifique que vos lecteurs suivront. S'il y a quelques itinéraires, essayez de les rendre aussi séparés que possible (par exemple, un «chemin» à travers le menu - quelque chose comme une table des matières / un aperçu principal / une description de la structure, un «chemin» à travers le formulaire de connexion, etc. ). Je pense que si vous corrigez cela, votre conception s'améliorera certainement. Peut-être que ce ne sera pas «beau» tout de suite, mais au moins il sera plus accessible et compréhensible et par là, comme effet secondaire, plus esthétique.

J'espère que cela a du sens pour vous :).

Quelques choses que je remarque que je n'aime pas particulièrement sont:

• Cela ressemble plus à la partie "back-end" ou "admin" d'un site Web, en particulier une certaine forme de système de gestion de contenu, plutôt que le "front-end" ou ce que les gens voient. En particulier, PhpMyAdmin me vient à l'esprit.
• Incohérence dans les couleurs utilisées. Le logo (que je trouve un peu trop étroit) contient déjà des couleurs, donc ces couleurs peuvent être utilisées pour développer un schéma de couleurs pour le site. Ce schéma de couleurs doit s'appliquer à des éléments tels que les bandes des tableaux, la couleur des liens, etc.
• Il y a trop de visuels contrastés. Je préconise généralement plus de simplicité et de standardisation dans la conception. Cependant, dans cette capture d'écran, nous voyons:
  • La boîte "Tout" est une boîte à angle droit dur.
  • La navigation dans la barre latérale utilise des coins arrondis.
  • Les sous-thèmes utilisent un dégradé radial.
  • Aucune des cases n'a un "remplissage" suffisant: notez à quel point les mots dans les liens "sous-thèmes" apparaissent à l'étroit; ils auraient l'air beaucoup mieux s'il y avait de l'espace autour d'eux.

Ensuite, lisez attentivement la réponse de @thebodzio , car elle est très précise: un nouveau visiteur du site aurait du mal à savoir où chercher en premier, et c'est généralement un signe de "mauvaise" conception.

Il y a quelques bonnes réponses ici, je vais donc vous donner quelques exemples concrets. Pour moi, la structure de base de la page semble décente; comme d'autres l'ont dit, une mise en page à trois colonnes est un élément essentiel de la conception Web depuis des années. La plupart des problèmes concernent la conception graphique.

Cela dit, l'importance relative des "sous-thèmes" semble étrange:

• Le titre devrait-il être quelque chose comme "Sous-sujets"?

• Il est à droite et semble plus important que l'en-tête du sujet; peut-être pourriez-vous l'intégrer dans le corps du sujet principal pour le rendre plus subordonné?

• Le poids de la rubrique "Sous-sujets" la rend plus lourde (plus importante) que le fil d'Ariane du sujet.

Pour la conception graphique, vous pouvez vous interroger sur les principes de base de chaque élément de la page:

• Contraste : les éléments qui ne sont pas la même chose devraient être suffisamment différents pour que vos utilisateurs puissent les distinguer immédiatement.

• Répétition : les dessins ne sont bons que si les choses qui leur ressemblent y ressemblent. En d'autres termes, visez la cohérence. Cela peut prendre la forme de tous vos arrière-plans ayant la même saturation et la même luminosité, mais variant en teinte, ou en utilisant des dégradés sur toutes les rubriques (ou en n'utilisant aucun dégradé). Par exemple:

  • l'arrière-plan "Sub Topics" est le seul avec un dégradé (le bouton est une chose différente, donc avoir un dégradé le rend différent, ce qui met le contraste en jeu)

  • le point culminant de la navigation sur la gauche a des coins arrondis tandis que la plupart des autres éléments ont des coins carrés nets

  • la couleur des "Préférences de quiz" (mal orthographiée) n'apparaît pas dans le logo, ce que vous essayiez autrement avec vos couleurs; essayez d'obtenir la même teinte pour les éléments de la page que les couleurs du livre

(En fait, il existe un moyen facile de s'assurer que les couleurs vont de pair: commencez par une seule couleur, puis ne variez qu'une seule de teinte, de saturation ou de luminosité. Toutes les couleurs que vous générez par cette méthode devraient bien paraître ensemble.)

• Alignement : les alignements rendent les éléments connectés en un tout, plutôt que de paraître dispersés et incohérents. Par exemple:

  • la case "Se souvenir de moi" est plus basse que l'autre texte à côté

  • "Préférences de quiz" est plus à droite que le fil d'Ariane du sujet ci-dessus

  • les préférences sont centrées, tandis que la plupart des autres corps de texte sont alignés à gauche

• Proximité : rapprocher les objets les rend groupés dans l'esprit de l'utilisateur, bien que laisser trop peu d'espace autour des objets les rend exigus et difficiles à voir comme des éléments individuels. Par exemple:

  • il n'y a pas d'espace autour de vos chapitres ou des sous-sujets (à mon avis, c'est l'une des fonctionnalités les plus courantes qui me dit que la conception graphique n'a pas été entièrement développée)

  • l'espacement de vos paragraphes sous l'en-tête du corps principal est incohérent

Il y a beaucoup plus sur les principes de conception sur le Web, mais ce sont quatre des plus importants.

Je pense que le principal problème avec la conception de votre site n'est pas tant avec la conception graphique qu'avec la conception de l'interface utilisateur. Plus précisément, lorsque je regarde vos captures d'écran ci-dessus, la question que je me pose n'est pas " Cool, que dois-je essayer en premier? " Mais " Qu'est-ce que c'est que ça, et qu'est-ce que je suis censé en faire? "

C'est un problème courant avec les sites Web et autres interfaces utilisateur conçus par des ingénieurs (ou d'autres experts du domaine): ils savent déjà comment le système est censé être utilisé, donc pour eux, tout va bien tant que toutes les fonctionnalités dont ils ont besoin sont facilement accessibles . Hélas, cela conduit souvent à ce que toutes les fonctionnalités soient également visibles et accessibles, donnant au nouvel utilisateur très peu d'indices sur où commencer.

La conception graphique a un certain effet ici, dans la mesure où une mauvaise conception graphique peut rendre toute interface utilisateur déroutante, tandis que de bons graphiques peuvent améliorer l'interface utilisateur en clarifiant la signification et les relations des différents éléments de l'interface et en attirant l'œil de l'utilisateur sur les éléments les plus importants. Mais fondamentalement, le problème est davantage de savoir quoi présenter à l'utilisateur et comment le structurer que comment le rendre joli.

OK, soyons un peu plus précis. Mon premier conseil serait: simplifier! Vous voudrez peut-être vous inspirer de la conception originale de la première page de Google , qui comportait essentiellement trois éléments: le logo, la zone de recherche et deux boutons (et l'on pourrait soutenir que le deuxième bouton était un encombrement inutile). Oh, et quelques liens vers d'autres pages avec plus de choses - qui étaient clairement marquées comme étant d'importance secondaire en étant plus bas, dans une petite police et / ou en gris - et une notice de copyright, apparemment ajoutée comme un indice subtil à aux utilisateurs que la page s'est vraiment arrêtée là.

Ou jetez un coup d'œil à Doodle , une autre entreprise avec un nom sympa et un design de page d'accueil simple mais efficace. Pour plus de commodité, j'ai pris une capture d'écran de leur page d'accueil et ajouté des gribouillis rouges sur le dessus:

Doodle est un assez bon site pour comparer le vôtre, car leur site, comme le vôtre, est essentiellement un cadre pour permettre aux utilisateurs de concevoir leur propre contenu (quiz pour vous, horaires des événements pour eux) et inviter d'autres utilisateurs à interagir avec lui. La grande différence est que, contrairement à votre conception, les gens de Doodle consacrent beaucoup d'efforts à faciliter doucement leurs utilisateurs dans l'interface, au lieu de simplement les jeter dans le fond de la piscine et d'attendre qu'ils coulent ou nagent.

En regardant leur première page, surtout sans mes gribouillis, ce qui est évident, c'est le peu de choses - en particulier les choses non pertinentes - qu'il y a dessus. Bien sûr, il y a tout un tas de petites notes et de liens au bas de la page, mais c'est tout "en dessous du pli" et quelque chose que les nouveaux utilisateurs vont simplement ignorer. La deuxième chose la plus visible, en grosses lettres amicales là où l'utilisateur est susceptible de regarder en premier, est un texte de présentation de huit (!) Mots expliquant le sujet du site. La chose la plus visible est le grand graphique montrant, en images simples, les principales étapes du flux de travail, ce qui rend tout cela facile et invitant. Et juste entre eux se trouve un gros bouton invitant l'utilisateur à cliquer dessus et à commencer.

En fait, dans la partie supérieure de la page, il n'y a que quatre éléments cliquables (à l'exclusion du logo, qui est cliquable - comme les utilisateurs s'attendent à ce qu'il soit - mais vous ramène simplement à la page d'accueil): deux liens vers la première étape dans l'assistant de planification d'événements, un pour un exemple prédéfini pour les utilisateurs qui ne sont pas assez confiants pour sauter directement, et un lien discret dans le coin supérieur droit qui ouvre une boîte de dialogue de connexion pop-up pour les utilisateurs établis. C'est tout.

Alors qu'en est-il de votre site tel qu'il est? La première chose dans votre capture d'écran qui me semble être quelque chose qui pourrait valoir la peine d'être regardée sont les en-têtes verts, qui sont au moins courts, en gros caractères et au milieu de ce qui ressemble à la "zone de contenu". Hélas, il n'y a rien de très intéressant là-bas - la section "Informations sur le sujet" a juste quelques métadonnées triviales qui devraient être en petits caractères dans un coin, la section "Sous-sujets" a quelques liens (vers d'autres pages similaires?) Qui apparaissent pour les dupliquer dans le coin supérieur droit, et la section "Ressources" est tout simplement vide. Et d'ailleurs, même après avoir lu tout cela, je n'ai toujours aucune idée de ce qu'est le site ou de ce que je peux en faire.

Alors, que puis-je faire avec votre site? Eh bien, vous dites que je peux créer et répondre à des quiz, alors que diriez-vous de mettre sur la première page des liens / boutons de grande taille et attrayants qui disent " Faites un quiz " et " Créez un quiz "? (Le premier devrait être plus important, car un nouvel utilisateur est probablement plus susceptible de répondre à un quiz que d'en créer un, mais l'inclusion du second sur la première page permet au moins aux utilisateurs de savoir qu'ils peuvent le faire aussi.) En outre, un une brève explication - de quelques mots à un court paragraphe - sur le sujet de votre site serait également une bonne chose. (Cela pourrait également être un bon endroit pour clouer un lien "en savoir plus".)

Ou, en le regardant de l'autre côté, que pouvez-vous vous permettre de perdre de votre page actuelle? Eh bien, je dirais vraiment "la plupart", mais ce qui saute aux yeux (en plus du vidage de métadonnées) est le formulaire de connexion en haut. Bien sûr, il est bon de fournir aux utilisateurs établis un moyen facile de se connecter, mais cela ne signifie pas que vous devez réellement afficher le formulaire de connexion sur chaque page. Au lieu de cela, faites-le comme Doodle et ayez simplement un formulaire de connexion pop-up accessible via un lien. (Pour les utilisateurs dont JavaScript est désactivé, c'est une bonne idée d'avoir également une page de connexion distincte comme cible de secours pour le lien.)

Il y a aussi beaucoup d'autres choses que vous pourriez perdre: par exemple, en tant qu'utilisateur nouveau et non enregistré, pourquoi vois-je ce qui ressemble à un lien "supprimer"? Puis-je vraiment supprimer la page? Si oui, pourquoi ? Sinon, pourquoi le lien existe-t-il?

De même, la note "(703 questions disponibles)" est une distraction inutile où elle se trouve, car elle ressemble à un élément d'interface. Si vous souhaitez impressionner les visiteurs par la profondeur de votre site, mettez-le à sa place: dans un texte de présentation approprié et impressionnant dans la zone de contenu. (" Nous avons déjà 703 questions disponibles, et d'autres arrivent! ")

Enfin, je dois noter que tout est relatif. TV Tropes , par exemple, a une interface utilisateur horrible (un peu comme la vôtre, vraiment), mais cela n'a pas d'importance, car ils compensent avec des charges et des charges d'excellent et dense contenu interconnecté, de sorte que la plupart des nouveaux utilisateurs ont gagné '' t pas du tout à toucher à l'interface de navigation. En fait, c'est assez courant avec les sites wiki; Wikipedia n'est pas vraiment beaucoup mieux. Le hic, cependant, est que vous devez déjà avoir cette charge de contenu (ou une base d'utilisateurs engagée à le créer) avant que cet effet puisse commencer à fonctionner pour vous.

Votre "design" serait sympa ... en 1995. En fait c'est dépassé. C'est une conception que les ingénieurs proposent toujours :-) La chose la plus simple que vous puissiez faire est d'utiliser un framework css, c'est-à-dire Twitter Bootstrap , Zurb , peu importe . Le framework vous aide à vous protéger de votre propre "créativité" ;-)

Du point de vue de la mise en page, il n'y a vraiment rien de mal à votre site Web. C'est une disposition standard à 3 colonnes avec le logo en haut à gauche. Ce cadre général est utilisé depuis des lustres, et c'est parce qu'il fonctionne. La plupart des sites Web modernes utilisent encore des principes similaires, basés sur une poignée de mises en page communes, mais enfouis sous des graphiques beaucoup plus lisses. (Faites très attention aux gens qui critiquent en fonction de la modernité de quelque chose - ce n'est pas parce que quelques années se sont écoulées que la façon dont les humains prennent les informations est soudainement très différente.)

Certains pourraient se demander si les liens de navigation principaux devraient être sur le côté gauche ou en haut, mais ces différences ne font pas ou ne cassent pas un site.

Non, le problème n'est pas avec votre choix de positions des choses. C'est avec les graphiques, les choix de couleurs, le dimensionnement des choses, etc. Je différencie la disposition des termes , qui concerne le placement, la conception , qui concerne la sensation et l'apparence. Je ne sais pas si tout le monde utiliserait les termes exactement de la même manière que moi, cependant.

Cela dit, votre mise en page est très bien, mais votre conception est problématique, est malheureusement la situation la plus difficile à résoudre. Si votre mise en page posait problème, nous pourrions vous donner des conseils plus concrets, comme «déplacer vos champs de recherche ici» ou «y placer votre logo». La mise en page est vraiment l'implémentation de l' utilisabilité .

La conception, cependant, concerne la sensation et le style, ce qui est bien sûr beaucoup plus difficile à commenter. Bien que je puisse dire que vous avez simplement laissé beaucoup de choix de couleurs par défaut (l'arrière-plan est blanc, les liens sont bleus, très peu d'images d'interface), il est beaucoup plus difficile de dire quelles couleurs et graphiques devraient être là à la place . Cela dépend beaucoup du type de sensation que vous souhaitez. Des bleus et des gris ennuyeux et sûrs pour une sensation d'entreprise, des roses et des jaunes pour une sensation innocente et enfantine, des rouges et noirs chauds pour une sensation excitante de boîte de nuit ... Et même alors, le simple fait d'utiliser ces exemples de couleurs ne mènera pas nécessairement à la sent que je leur suis attaché. Le diable est dans les détails.

Il y a un certain chevauchement entre les problèmes de mise en page plus concrets et les problèmes de conception plus éthérés, tels que ce que dit le Bodzio dans sa réponse sur les différentes tailles de police pour les en-têtes et les notes de bas de page, etc., afin de souligner l'importance et d'aider à guider le visiteur du site à travers les informations que vous souhaitez qu'ils aient. Vous devez tenir compte de ses conseils.

Cependant, je crains que si votre objectif n'est pas de vous associer à un concepteur mais d'apprendre par vous-même à appliquer un design de site convaincant, vous n'obtenez pas simplement une réponse, vous êtes en voyage. Il y a à peu près autant de voies pour devenir un bon designer qu'il y a de designers, et des tonnes de ressources là-bas, donc les occasions d'apprendre ne manquent pas.

Pour trouver le chemin le plus court pour acquérir un certain sens du design pour ce site en particulier, je regarderais d'autres sites que vous aimez et d'autres sites qui offrent un service similaire à celui que vous créez, et commencer à comparer et à contraster ce que vous aimez et à propos ceux-ci et ce qui manque sur votre site.

Malheureusement, c'est à peu près aussi objectif que possible, et seulement le point le plus haut de la pointe de l'iceberg. J'espère cependant que ce que j'ai dit aide.

Voici pourquoi je pense que les gens réagissent négativement à votre site: cela soulève trop de questions!

Comme vous l'avez dit, avant d'introduire la fonctionnalité. Ce qui me dit que les gens ne comprennent pas de quoi il s'agit. Quelle devrait être la première question posée par le site. Parce que si c'est sur le web, vous ne pouvez pas vous tenir à côté d'eux et l'expliquer.

«Toutes les connaissances du monde» ne communique pas exactement ce que vous pouvez trouver sur le site (ou n'est pas très crédible d'ailleurs) ni pourquoi vous devez vous connecter. Ainsi, votre conception est mal perçue car elle ne permet pas de répondre à ces questions.

Donc, vous devez d'abord répondre "de quoi parle ce site?". Par exemple, avec un énoncé de mission. Cela peut être évident pour vous, mais pas pour tout le monde sur le Web. Quel est le but principal? Répondre à des quiz ou créer des quiz? Quelle est la première chose que vous voulez que les gens fassent? S'identifier? Répondre à un quiz? Créer une? Ce sont des choses auxquelles vous devez répondre si vous voulez que les gens restent sur votre page.

Ensuite, vous devez organiser vos informations. Qu'est-ce que le contenu, qu'est-ce que la méta (logo, navigation, connexion). Jetez un œil à stackexchange. Le contenu (clair) se distingue clairement du méta (foncé).

Regroupez les choses qui vont ensemble. Vous disposez d'un fil d'Ariane déconnecté de la navigation. Visuellement ainsi que la formulation. Je ne trouve pas "Tout" dans la navigation principale. Comment puis-je m'y rendre?

Pourquoi tout ça? Plus les gens comprennent rapidement les informations qui leur sont présentées, plus ils sont susceptibles de rester et d'interagir. S'ils sont confus et confrontés à des questions auxquelles ils ne peuvent pas répondre, ils réagiront négativement.

Parce que c'est le cas. C'était méchant, n'est-ce pas :) C'était juste une blague, ma meilleure réponse serait de travailler avec quelqu'un sur la partie design, si vous n'avez pas quelqu'un avec qui travailler, obtenez un pigiste, si cela ne fonctionne pas aussi recommencer à zéro, mais essayez de simplifier les choses et de laisser le contenu respirer ...

Quelques premiers conseils / conseils / recommandations: agrandissez les polices des balises h (titres) par rapport aux balises p, beaucoup plus grandes (quelque chose dans les plages de taille de police de titre 30-48 et paragraphe (11-max 13). Autorisez au moins Marges de 20 px ou remplissage entre les blocs de contenu (par exemple un fond maring: 20 px; car la barre de connexion lui permettrait d'être plus séparée et plus facile à lire.

Demandez à quelqu'un de vous créer un logo approprié, celui que vous avez maintenant n'est pas bon. Essayez différentes polices, peut-être une police sans empattement (comme Open Sans, gratuite sur les polices Google, ou .. juste Arial-Helvetica).

N'utilisez pas de dégradés si vous n'avez aucun sens de la couleur simplement parce que c'est cool ou simplement parce qu'elle vous semble meilleure, essayez de vous en tenir aux couleurs unies et peut-être à la fin, lorsque vous avez terminé, essayez de tester les dégradés uniquement sur CTA ( Appel à l'action) (sur les boutons par exemple).

Il y a beaucoup de choses que vous pouvez faire ... mais ces choses surviennent généralement avec le temps, vous obtenez un œil exercé en regardant beaucoup de superbes conceptions et en essayant de comprendre comment ce résultat a été produit ... la meilleure façon d'y parvenir est de essayez de recréer le même résultat vous-même, dans ce processus, vous acquerrez des connaissances et un aperçu de pourquoi et comment les choses sont faites / faites pour ressembler / interagir et faire l'expérience des interfaces utilisateur.

Recommandation de livre: Smashing Book [le premier et le deuxième livre] et le site Web:

http://smashingmagazine.com

et un autre: http://www.bamagazine.com/

Hou la la! Vous avez vraiment généré une réponse! Au moins, vous savez que votre design ne passe pas inaperçu;)

Voici la réponse courte à votre question: le site semble avoir été conçu par un ingénieur logiciel. C'est ce que vous faites et je suis sûr que vous le faites bien. Maintenant, vous avez besoin de quelqu'un qui conçoit l'interface utilisateur pour rendre votre idée accessible. Il n'y a aucun moyen de contourner cela. Vous n'allez pas apprendre le design en un week-end et résoudre le problème.

Trouvez un étudiant ou un jeune designer qui cherche à compléter son portfolio et à lui donner une certaine liberté. Vous voulez quelqu'un qui travaille est propre et épuré pour ce projet. Voyez si vous pouvez trouver un designer qui privilégie le minimalisme.

Je ne suis pas un designer professionnel, donc du point de vue d'un utilisateur et de l'expérience de navigation sur divers sites Web, puis-je signaler quelques points?

1. La couleur d'arrière-plan de la page est blanche, mais les en-têtes / surlignements de section sont dans des tons de jaune ou de blanc, vous pouvez essayer un peu de couleurs contrastées , vous pouvez concevoir le niveau de contraste pour correspondre à la hiérarchie de votre élément (plus d'en-tête de haut niveau = plus contraste) ou un schéma de couleurs de contenu d'en-tête fixe (par exemple, orange foncé comme dans la deuxième page du livre indiqué dans le logo pour l'en-tête, blanc pour le texte de l'en-tête et gris foncé pour le contenu du texte).
2. Trop d'espace libre dans votre page, l'espace libre est bon pour donner aux utilisateurs un endroit où respirer, mais trop d'espace libre fait ressembler votre page au back-office / sous-maintenance. Par exemple, la section "Sous-thèmes" du premier écran aurait pu s'étendre sur tout l'espace sous la section "Tout". Aussi pourquoi deux sous-rubriques redondantes ?
3. La distribution du contenu par l'OMI devrait relever d'une hiérarchie . Si vous prenez l'un des sites comme les pages de codes Google (qui ressemble beaucoup à votre site), Wikipedia ou ce site à titre d'exemple, ils dépensent tous une quantité importante d' espace pour l'en-tête du site , puis vient le contenu. De plus, de nos jours, de nombreuses pages utilisent une barre d'outils comme un en-tête qui a une couleur distincte, des menus généraux et le logo du site intégré, mais vous pouvez dire que votre logo est trop gros pour le faire.
   Prenez la section de sous-sujet dans la partie la plus à droite de la page, par exemple, ressemble-t-elle vraiment à une spécialisation plus poussée du contenu actuel? Ils ressemblent plutôt à des balises aléatoires ou à des sujets connexes . Vous pouvez refléter leur hiérarchie en faisant uncomme une structure arborescente comme dans diverses pages de documentation, cela rendrait également le fil d'Ariane inutile. De plus, l'OMI le bon endroit pour cet arbre (navigation) serait dans la barre latérale gauche et le reste des actions irait à la place du fil d'Ariane.
4. L'uniformité est aussi importante que la distribution. Vos boutons peuvent avoir différentes couleurs selon leur fonction / importance. Mais leur structure doit rester la même. Votre bouton «Connexion» est tranchant tandis que le «Répondez maintenant» est au coin arrondi. Vous voudrez peut-être vous débarrasser de l'une ou l'autre de ces approches.
5. Les liens et les actions ne sont pas identiques , vous devez également les nommer en conséquence. Comme le menu "Supprimer" à gauche reflète les éléments supprimés ou l'action de suppression, ne peut pas être dit. Donnez aux utilisateurs un bouton de suppression et un menu / onglet d'élément supprimé comme dans GMail.
6. Les polices sont très importantes pour refléter le but. Si vous créez une page d'art ou une famille d'empattements littéraires, c'est bon pour cela, mais pour créer un site d'apprentissage en ligne, vous devez choisir une police qui est confortable à suivre dans différentes tailles et qui a moins d'augmentation (comme les bords allongés), Sans est bon en cela. Wikipedia l'utilise par exemple. Le choix de la taille et du poids est également important. Lorsque les statistiques sont importantes (et changeantes), mettez les chiffres en gras (par exemple 703 questions disponibles). Comme vous l'avez fait pour choisir le nombre de questions dans le deuxième écran. Les italiques dans les en-têtes IMO ne sont pas beaux, pourquoi ne pas utiliser à la place des caractères gras?
7. Cela ressemble beaucoup à mon opinion personnelle, mais je pense que certains coins plus arrondis soulageraient les utilisateurs des sentiments de type boîte.

Je suis designer et développeur professionnel. Je pense que la chose la plus importante à faire avec un design est d'utiliser un programme graphique - tel que Fireworks - pour créer un design avant de l'implémenter. Cela facilite le changement et l'expérimentation. Issu d'un contexte de développement, je connais l'importance de cela.

Je ne sais pas pour quels postes vous postulez. Si vous postulez pour un poste en conception graphique, vous voudrez peut-être prendre un certain temps pour apprendre la conception graphique professionnelle. Si vous prenez une position de développement, il peut être judicieux de payer un peu à un designer professionnel pour faire un joli design, ou de faire une solution rapide au lieu de prendre des mois pour apprendre.

Si vous voulez faire une solution rapide, je vais essayer de donner quelques détails pour vous aider à démarrer. Les réponses ici sont bonnes - mais elles ne sont pas très spécifiques. J'essaierai.

Notez qu'une conception à largeur variable est toujours un peu plus délicate qu'une conception à largeur fixe. Je pense que vous avez raison de choisir un design à 3 colonnes. Le contenu est correct, le design n'est pas terrible (à mon avis).

Voici ce que je ferais (cela prendrait probablement moins d'une journée):

1. Commencez avec le logo. Il semble très occupé -> essayez de le simplifier. Utilisez des couleurs plus vives; le jaune est sale. Essayez une police plus simple.
   • Après avoir fait le logo, vous pouvez faire correspondre les couleurs du site
2. Tout ce qui concerne le site Web doit être "aéré". Alors, ne faites pas les choses à l'étroit.
   • la colonne de gauche devrait être beaucoup plus large. 1,5 fois sa largeur actuelle
   • le haut devrait avoir plus d'espacement autour des champs de connexion
   • la droite devrait avoir les sous-thèmes chacun sur une nouvelle ligne. Faites-les avoir un plus grand espacement autour d'eux afin qu'ils ne soient pas écrasés les uns dans les autres
   • le sous-tableau peut utiliser des tonnes de rembourrage supplémentaire sur les cellules, les divs de titre peuvent être remplis plus, etc.
3. Le contenu entier devrait couler au lieu d'être saccadé. Cela signifie aligner autant que possible, utiliser des polices uniformes et des tailles appropriées.
   • La colonne centrale "Toutes les connaissances dans le monde" semble hors de propos avec le reste du contenu. Faites-le flotter à gauche, supprimez le soulignement et assurez-vous qu'il est plus petit que le titre.
   • Le contenu de la page n'est pas aligné. Ce serait mieux si vous laissiez aligné le sous-contenu avec les sous-titres.
4. Les champs de connexion en haut peuvent être mieux réalisés.
   • Vous pouvez placer les étiquettes à l'intérieur des zones de saisie de texte (grisées). Cela le rendrait plus propre.
   • Vous pouvez réduire la taille de la case à cocher Se souvenir de moi. Ce n'est pas la caractéristique la plus importante, donc elle ne devrait pas être aussi grande que la partie importante.

Cela ne fera pas de votre site le site le plus génial sur Internet, mais il sera, espérons-le, suffisamment poli pour passer des inspections. :)

wow ... c'est assez mauvais lol.

Je ne pense pas que vous puissiez apprendre à repenser quelque chose en quelques suggestions si vous n'avez aucun sens du design, donc vraiment je pense que vous devriez demander à quelqu'un d'autre de faire la mise en page .. contactez un collège d'art local et voyez si un la classe en fera un exemple du monde réel.

Mais à défaut, voici mes quelques suggestions. L'index / la page de destination, malgré son nom, doit fonctionner davantage comme un panneau d'affichage ou une annonce de magazine. Il doit transmettre son message RAPIDEMENT, en quelques secondes. Notez que j'ai dit «message» et non information. Les informations doivent être présentes lorsque le spectateur les recherche, mais elles ne doivent pas toutes être présentées comme une table des matières légèrement brouillée.

Donc, en ce qui concerne le message ... la première chose à penser est à QUOI regardent-ils .. page Web, oui, mais page Web de quoi? Même en lisant vos catégories, ce n'est pas clair pour moi ce qu'est cette page.

Le «quoi» est-il sera véhiculé par la palette de couleurs, la disposition générale ainsi que les titres des titres.

Après avoir résolu la question de quoi s'agit-il, décidez d'abord ce que vous voulez qu'ils voient. Mon choix serait le logo de l'entraînement fait parfait et j'augmenterais la taille de cela et le sortirais de l'en-tête. Mais vous pouvez avoir des raisons de les faire se concentrer sur autre chose ou sur un appel à l'action.

Je suppose que votre chose la plus importante est "Toutes les connaissances dans le monde" parce que vous l'avez centrée (mauvaise idée) en italique (mauvaise idée!) Et lui avez donné beaucoup d'espace autour d'elle (bonne idée). Mais à l'exception de la les mots eux-mêmes ... ce n'est pas clair ce que c'est ou fait, essayez quelque chose de plus descriptif et moins maladroit.

Essayez de diviser la page de destination globale en 3 éléments de conception ET 3 niveaux d'importance de l'information. Demandez-vous quelle est la PREMIÈRE chose qu'ils devraient voir, LA PREMIÈRE chose qu'ils devraient faire? qu'est-ce que le deuxième, le troisième? et essayez de repenser en conséquence.

Utilisez moins de couleurs et donnez-leur du sens .. pourquoi 3 bleus différents et différents se sont répandus au hasard autour du texte ??? Utilisez plus de tailles de police (!), Encore une fois, cela est un bon début, la police LARGE pour le plus important, le moyen pour le secondaire, etc.

Ma dernière suggestion est de faire votre conception D'ABORD et bien avant d'écrire le code. Je suggère de commencer avec du PAPIER et des stylos ou un crayon pour bloquer une page ... juste des croquis rapides, n'écrivez PAS les mots réels lorsque vous faites cela, bloquez simplement les zones lorsque vous essayez de décider de la taille de la zone de contenu par rapport à l'en-tête , quelle est la taille de la barre latérale, etc.

Faites ensuite une conception plus finalisée dans un programme graphique. DÉPLACEZ les choses et expérimentez le placement. N'oubliez pas que vous concevez une page qui doit fonctionner comme une page de magazine. Faites faire une pause à votre spectateur, essayez de lui montrer ce que vous voulez qu'il voit, essayez de le conduire à faire ce que vous voulez qu'il fasse.

Et commencez à REGARDER et pour le design. Il suffit de regarder. n'évaluez pas le contenu, recherchez plutôt les messages véhiculés par les pages Web. Comment utilisent-ils l'espacement, la couleur, la taille de la police? Essayez d'imiter un bon design. bonne chance

et considérez la suggestion de l'école d'art. les programmes de conception graphique recherchent fréquemment des projets de re-conception du monde réel pour leurs étudiants.

Le principal problème que je glane de ce fil est que vous êtes plus intéressé à débattre et à défendre votre "design" que d'apprendre à créer quelque chose de séduisant. Typique d'un ingénieur logiciel. Vous pensez que vous pouvez décomposer la page en éléments de composant, tester et vérifier ces éléments, puis une fois que vous avez intégré les composants, vous pensez que les éléments doivent énumérer mathématiquement une bonne conception. Ensuite, vous pensez qu'en publiant cette question, vous pouvez à nouveau découper la page en composants et discuter des mérites de chacun et expliquer comment cela suit ce que le fournisseur de réponses a dit.

Jusqu'à ce que vous soyez prêt à accepter que vous sucez à UX, vous continuerez à avoir ce problème. Comme indiqué ci-dessus, la conception graphique est une question de toucher. La conception graphique n'est pas égale à la conception technique. Vous ne pouvez pas construire mathématiquement quelque chose, l'intégrer à d'autres choses "mathématiquement correctes" et vous attendre à un bon résultat. Vous ne serez jamais bon en UX (probablement) parce que vous ne regardez simplement pas le monde comme un designer le voit. Mais si vous arrêtez de mesurer votre page et de la comparer à autre chose - ouvrez-vous complètement à l'apprentissage en réalisant que vous ne savez rien de la conception graphique, alors vous pourriez commencer à l'obtenir ...