Warum sagen mir die Leute immer wieder, dass meine Website schrecklich aussieht?

Ich habe eine Website entwickelt und vor kurzem nach einem Job gesucht. Praktisch alle Interviewer sagten mir nach einem kurzen Blick, dass meine Website schrecklich gestaltet war (aber das Konzept gefiel). Ich sollte erwähnen, dass ich ein Software-Ingenieur bin, aber ich versuche wirklich, das Design-Teil auch richtig zu machen. Ich habe versucht, es neu zu gestalten, habe aber keine Ahnung, was sich ändern soll.

So sieht es jetzt aus:

Ich würde mich sehr über Tipps für meine Website oder darüber freuen, wie das Design einer Website im Allgemeinen verbessert werden kann (ich habe einige Websites besucht, auf denen erklärt wird, wie Websites gestaltet werden, aber das scheint nicht zu helfen :)).

Edit 1 : Wie gesagt, die Leute haben oft einen schlechten Eindruck davon, wenn sie es sich ansehen, noch bevor ich die Funktionalität einführe. Das lässt mich denken, dass etwas mit den von mir ausgewählten Farben oder dem Layout nicht stimmt. Und ich dachte, ein bestimmtes Site-Design kann für Designer da draußen hilfreich sein, genau wie eine bestimmte Geschichte für Literaturstudenten lehrreich ist und bestimmte Algorithmen für Software-Studenten hilfreich sind. Vielen Dank.

Eine Randnotiz: Funktionalität: Wenn es darauf ankommt, möchte die Site Folgendes erreichen (sehr kurz): Benutzer können Themen hinzufügen und für jedes Thema Fragen zusammen mit ihren Antworten hinzufügen . Die Site erstellt "Tests" und "Quiz", damit Benutzer ihre Ergebnisse abrufen und vergleichen können

Bearbeiten 2 : Hier ist ein weiterer Druckbildschirm:

Bearbeiten 3 : Nur um klar zu sein, keiner dieser Screenshots ist meine Zielseite. Sie sind themenspezifische Inhaltsseiten.

Zunächst möchte ich betonen, dass alles in dieser Antwort nur MHO ist, keine universelle Wahrheit;).

Als Softwareentwickler wissen Sie, wie wichtig es in jedem Projekt ist, eine klare und klar definierte Struktur zu haben - die Reihenfolge. Ähnliches gilt für „visuelle“ Kunst und Design. Ich neige dazu, Design als „visuelle Kapselung“ zu betrachten. Der Designer kennt die Struktur der Informationen, die er an seine Zielgruppe weitergeben möchte. Zum Beispiel: Er entwirft ein Buch. Er weiß, dass dieses Buch in Kapitel und jedes Kapitel in Unterkapitel unterteilt ist. Er weiß, dass die Hauptsache durch einige Notizen (Randnotizen, Fußnoten, Nebenbemerkungen) kommentiert wird. Jetzt muss er sein „Arsenal“ verwenden, um diese Struktur „sichtbar“ zu machen. Er kann eine Schriftgröße und -form verwenden und alle aufeinander folgenden Seiten mit einem Glyphenklumpen füllen. Dies würde jedoch bedeuten, dass der Leser alles lesen, interpretieren und verstehen müsste, um die enthaltene Informationsstruktur zu kennen. Der Designer kann dem Leser auch die Wichtigkeit / Ebene verschiedener Informationen „vorschlagen“. Einer der Tricks besteht darin, die Schriftgröße zu verwenden, um die Abstufung der dargestellten „Daten“ anzuzeigen. In diesem Fall muss der Leser keinen Text lesen (geschweige denn interpretieren), um zwischen Hauptthema und z. B. Fußnoten zu unterscheiden. Die Wichtigkeit und wechselseitige „Position“ von Informationen wird visuell „beschrieben“. Der Leser kann Informationen leicht „entkapseln“. Man kann es auch als eine Art Serialisierungs- / Deserialisierungsprozess betrachten, der im visuellen Bereich stattfindet (abstrakte Informationen werden in den „visuellen“ Raum umgewandelt). Das ist eine einfache Vereinfachung, aber ich denke, für den Anfang ist es gut genug. In diesem Fall muss der Leser keinen Text lesen (geschweige denn interpretieren), um zwischen Hauptthema und z. B. Fußnoten zu unterscheiden. Die Wichtigkeit und wechselseitige „Position“ von Informationen wird visuell „beschrieben“. Der Leser kann Informationen leicht „entkapseln“. Man kann es auch als eine Art Serialisierungs- / Deserialisierungsprozess betrachten, der im visuellen Bereich stattfindet (abstrakte Informationen werden in den „visuellen“ Raum umgewandelt). Das ist eine einfache Vereinfachung, aber ich denke, für den Anfang ist es gut genug. In diesem Fall muss der Leser keinen Text lesen (geschweige denn interpretieren), um zwischen Hauptthema und z. B. Fußnoten zu unterscheiden. Die Wichtigkeit und wechselseitige „Position“ von Informationen wird visuell „beschrieben“. Der Leser kann Informationen leicht „entkapseln“. Man kann es auch als eine Art Serialisierungs- / Deserialisierungsprozess betrachten, der im visuellen Bereich stattfindet (abstrakte Informationen werden in den „visuellen“ Raum umgewandelt). Das ist eine einfache Vereinfachung, aber ich denke, für den Anfang ist es gut genug. Man kann es auch als eine Art Serialisierungs- / Deserialisierungsprozess betrachten, der im visuellen Bereich stattfindet (abstrakte Informationen werden in den „visuellen“ Raum umgewandelt). Das ist eine einfache Vereinfachung, aber ich denke, für den Anfang ist es gut genug. Man kann es auch als eine Art Serialisierungs- / Deserialisierungsprozess betrachten, der im visuellen Bereich stattfindet (abstrakte Informationen werden in den „visuellen“ Raum umgewandelt). Das ist eine einfache Vereinfachung, aber ich denke, für den Anfang ist es gut genug.

Nun zu Ihrem Design. Ich persönlich weiß nicht, wo ich anfangen soll, es mir anzusehen. Ich muss alles lesen, alles verstehen, darüber nachdenken und dann die Dinge wieder in die Reihenfolge bringen, die ich für richtig halte. Das ist viel Arbeit für mich als Leser. Es ist schwer zu definieren, was hier auf einen Blick am wichtigsten und was am wenigsten wichtig ist. Selbst wenn ich mir Zeit nehme, um den Inhalt kennenzulernen, gibt es nicht viele visuelle „Orientierungspunkte“, die mir helfen, einen Weg zu bestimmten Daten zu finden. Denken Sie: Wenn Sie Ihr Auto auf dem Parkplatz stehen lassen, suchen Sie nach einem „Wahrzeichen“, an das Sie sich erinnern könnenwo dein Auto ist. Denken Sie einen Moment darüber nach, wie Sie Websites verwenden und wie Sie sich daran erinnern können, wo sich die Optionen / Links befinden, die Sie am häufigsten verwenden. Suchen Sie nicht nach einem Link als „zweites Quadrat rechts von diesem roten Logo im oberen Teil der Website“? Kein Lesen - nur Bild / Ort merken.

Ich denke, das größte Problem hier ist nicht die „Hässlichkeit“ - ich denke, es ist der Mangel an Wichtigkeitsabstufung. Versuchen Sie, Ihren Website-Besucher durch Ihre Daten zu führen. Was soll er zuerst sehen? Wohin von dort? Auf diese Weise erstellen Sie einen "Readflow" / "Workflow". Sie induzieren (incept vielleicht ?;)) Einen bestimmten Weg, dem Ihre Leser folgen werden. Wenn es mehrere Routen gibt, versuchen Sie, sie so getrennt wie möglich zu gestalten (z. B. einen „Pfad“ durch das Menü - so etwas wie ein Inhaltsverzeichnis / Hauptübersicht / Strukturbeschreibung, einen „Pfad“ durch das Anmeldeformular usw. ). Ich denke, wenn Sie dies beheben, wird sich Ihr Design definitiv verbessern. Vielleicht wird es nicht sofort „schön“, aber zumindest ist es zugänglicher und verständlicher und dadurch als Nebeneffekt ästhetisch ansprechender.

Ich hoffe das macht für dich Sinn :).

Einige Dinge, die mir nicht besonders gefallen, sind:

• Dies ähnelt eher dem "Back-End" - oder "Admin" -Teil einer Website, insbesondere einer Art Content-Management-System, als dem "Front-End" oder dem, was die Leute sehen. Insbesondere PhpMyAdmin fällt mir ein.
• Inkonsistenz der verwendeten Farben. Das Logo (das meiner Meinung nach etwas zu eng ist) enthält bereits einige Farben, sodass diese Farben verwendet werden können, um ein Farbschema für die Site zu entwickeln. Dieses Farbschema sollte für Dinge wie die Streifenbildung für die Tabellen, die Farbe für Links usw. gelten.
• Es gibt zu viele kontrastierende Grafiken. Normalerweise befürworte ich mehr Einfachheit und Standardisierung im Design. In diesem Screenshot sehen wir jedoch:
  • Die Box "Everything" ist eine harte, rechtwinklige Box.
  • Die Navigation in der Seitenleiste verwendet abgerundete Ecken.
  • Das Unterthema verwendet einen radialen Gradienten.
  • Keines der Felder hat eine ausreichende "Auffüllung": Beachten Sie, wie eng die Wörter in den "Unterthemen" -Links erscheinen. Sie würden viel besser aussehen, wenn um sie herum etwas Platz wäre.

Lesen Sie dann auf jeden Fall die Antwort von @thebodzio sorgfältig durch , da sie sehr genau ist: Ein neuer Besucher der Website würde Schwierigkeiten haben, zuerst zu wissen, wo er suchen muss, und das ist im Allgemeinen ein Zeichen für "schlechtes" Design.

Hier gibt es einige gute Antworten, daher möchte ich einige konkrete Beispiele nennen. Für mich sieht die Grundstruktur der Seite anständig aus; Wie andere bereits gesagt haben, ist ein dreispaltiges Layout seit Jahren ein fester Bestandteil des Webdesigns. Die meisten Probleme liegen im Grafikdesign.

Trotzdem scheint die relative Bedeutung von "Unterthemen" seltsam:

• Sollte der Titel so etwas wie "Unterthemen" sein?

• Es ist rechts und sieht wichtiger aus als die Themenüberschrift. Vielleicht könnten Sie es in den Hauptthemakörper aufnehmen, damit es sich untergeordneter anfühlt?

• Das Gewicht der Überschrift "Unterthemen" lässt sie schwerer (wichtiger) erscheinen als das Thema Brotkrumen.

Für das Grafikdesign können Sie sich nach den Grundprinzipien für jedes Element der Seite fragen:

• Kontrast : Elemente, die nicht dasselbe sind, sollten so unterschiedlich aussehen, dass Ihre Benutzer sie sofort voneinander unterscheiden können.

• Wiederholung : Designs nur gut aussehen , wenn die Dinge , die sind gleich aussehen wie sie. Mit anderen Worten, streben Sie nach Konsistenz. Dies kann in Form aller Hintergründe geschehen, die dieselbe Sättigung und Helligkeit aufweisen, jedoch einen unterschiedlichen Farbton aufweisen oder Farbverläufe für alle Überschriften verwenden (oder keine Farbverläufe verwenden). Zum Beispiel:

  • Der Hintergrund "Unterthemen" ist der einzige mit einem Farbverlauf (die Schaltfläche ist etwas anderes, sodass ein Farbverlauf anders aussieht und den Kontrast ins Spiel bringt).

  • Das Navigationshighlight links hat abgerundete Ecken, während die meisten anderen Elemente scharfe quadratische Ecken haben

  • Die Farbe für "Quizeinstellungen" (falsch geschrieben) wird nicht im Logo angezeigt, für das Sie ansonsten Ihre Farben ausprobiert haben. Versuchen Sie, für Seitenelemente den gleichen Farbton wie für die Farben im Buch zu erhalten

(Tatsächlich gibt es eine einfache Möglichkeit, um sicherzustellen, dass die Farben zusammenpassen: Beginnen Sie mit einer einzelnen Farbe und variieren Sie dann nur einen Farbton, eine Sättigung oder eine Helligkeit. Alle Farben, die Sie mit dieser Methode erzeugen, sollten zusammen gut aussehen.)

• Ausrichtung : Durch Ausrichtung werden die Elemente zu einem Ganzen verbunden, anstatt verstreut und inkohärent auszusehen. Zum Beispiel:

  • Das Feld "Erinnere dich an mich" ist niedriger als der andere Text daneben

  • "Quizeinstellungen" befindet sich weiter rechts als das Thema Brotkrumen oben

  • Die Einstellungen sind zentriert, während die meisten anderen Textkörper linksbündig sind

• Nähe : Wenn Sie Objekte näher zusammenbringen, werden sie im Kopf Ihres Benutzers gruppiert. Wenn Sie jedoch zu wenig Platz um Objekte lassen, sind sie eng und als einzelne Objekte schwer zu erkennen. Zum Beispiel:

  • Es gibt keinen Platz um Ihre Themenbrotkrumen oder Unterthemen (meiner Meinung nach ist dies eine der häufigsten Funktionen, die mir sagen, dass das Grafikdesign noch nicht vollständig entwickelt wurde).

  • Der Abstand Ihrer Absätze unter der Überschrift des Hauptteils ist inkonsistent

Es gibt viel mehr über Designprinzipien im Web, aber dies sind vier der wichtigsten.

Ich denke, das Hauptproblem beim Design Ihrer Website liegt weniger im Grafikdesign als im Design der Benutzeroberfläche . Wenn ich mir Ihre Screenshots oben ansehe, ist die Frage, die ich mir stelle, nicht " Cool, was soll ich zuerst versuchen? ", Sondern " Was zum Teufel ist das und was soll ich damit machen? "

Dies ist ein häufiges Problem bei Websites und anderen Benutzeroberflächen, die von Ingenieuren (oder anderen Domain-Experten) entwickelt wurden: Sie wissen bereits, wie das System verwendet werden soll. Für sie ist also alles in Ordnung, solange alle benötigten Funktionen bequem zugänglich sind . Leider führt dies häufig dazu, dass alle Funktionen gleichermaßen auffällig und zugänglich sind, sodass der neue Benutzer nur sehr wenige Hinweise darauf hat, wo er anfangen soll.

Grafikdesign hat hier einige Auswirkungen, da schlechtes Grafikdesign jede Benutzeroberfläche verwirrend machen kann, während gute Grafiken die Benutzeroberfläche verbessern können, indem sie die Bedeutung und die Beziehungen verschiedener Oberflächenelemente klar machen und den Blick des Benutzers auf die wichtigsten Elemente lenken. Grundsätzlich geht es jedoch mehr darum, was dem Benutzer präsentiert und strukturiert werden soll, als darum, wie es schön aussehen soll.

OK, lassen Sie uns etwas genauer werden. Mein erster Ratschlag wäre: Vereinfachen! Vielleicht möchten Sie sich von Googles ursprünglichem Design der Startseite inspirieren lassen , das im Wesentlichen drei Elemente enthielt: das Logo, das Suchfeld und zwei Schaltflächen (und man könnte argumentieren, dass die zweite Schaltfläche unnötige Unordnung war). Oh, und ein paar Links zu anderen Seiten mit mehr Material - die eindeutig als zweitrangig gekennzeichnet waren, indem sie weiter unten in einer kleinen Schrift und / oder in Grau angezeigt wurden - und ein Copyright-Hinweis, der anscheinend als subtiler Hinweis hinzugefügt wurde Benutzer, dass die Seite wirklich dort endete.

Oder werfen Sie einen Blick auf Doodle , ein anderes Unternehmen mit einem guten Namen und einem einfachen, aber effektiven Design der Titelseite. Der Einfachheit halber habe ich einen Screenshot der Titelseite gemacht und oben einige rote Kritzeleien hinzugefügt:

Doodle ist eine ziemlich gute Website, mit der Sie Ihre vergleichen können, da ihre Website wie Ihre im Grunde genommen ein Framework ist, mit dem Benutzer ihre eigenen Inhalte entwerfen können (Quiz für Sie, Veranstaltungspläne für sie) und andere Benutzer zur Interaktion mit ihnen einladen können. Der große Unterschied besteht darin, dass die Doodle-Leute im Gegensatz zu Ihrem Design viel Mühe darauf verwenden, ihre Benutzer sanft in die Benutzeroberfläche zu locken, anstatt sie einfach in das tiefe Ende des Pools zu werfen und darauf zu warten, dass sie sinken oder schwimmen.

Wenn man sich die Titelseite ansieht, besonders ohne meine Kritzeleien, ist das Offensichtliche daran, wie wenig Zeug - besonders irrelevantes Zeug - darauf ist. Sicher, es gibt eine ganze Reihe kleiner Notizen und Links am Ende der Seite, aber das ist alles "unter der Falte" und etwas, das neue Benutzer einfach ignorieren werden. Das zweitwichtigste, in großen, freundlichen Buchstaben, genau dort, wo der Benutzer wahrscheinlich zuerst hinschaut, ist ein Klappentext mit acht (!) Wörtern, der erklärt, worum es auf der Website geht. Die meisten sichtbar , was ist die große Grafik zeigt, in einfachen Bildern, die wichtigsten Schritte des Workflows, es ist alles einfach aussehen und einladend zu machen. Und genau dazwischen befindet sich eine große Schaltfläche, die den Benutzer einlädt, darauf zu klicken und loszulegen.

Tatsächlich gibt es im oberen Teil der Seite nur vier anklickbare Dinge (mit Ausnahme des Logos, das anklickbar ist - wie Benutzer es erwarten -, aber Sie einfach zurück zur Startseite führt): zwei Links zum ersten Schritt Im Ereignisplanungsassistenten ein Beispiel für Benutzer, die nicht sicher genug sind, um direkt einzuspringen, und ein unauffälliger Link in der oberen rechten Ecke, der ein Popup-Anmeldedialogfeld für etablierte Benutzer öffnet. Das ist alles.

Was ist also mit Ihrer Website? Das erste, was in Ihrem Screenshot für mich als etwas herausspringt, das möglicherweise einen Blick wert sein könnte , sind die grünen Überschriften, die zumindest kurz sind, in großer Schrift und in der Mitte dessen, was wie der "Inhaltsbereich" aussieht. Leider gibt es dort nicht viel Interessantes - der Abschnitt "Themeninformationen" enthält nur einige triviale Metadaten, die in einer Ecke klein gedruckt sein sollten, der Abschnitt "Unterthemen" enthält einige Links (zu anderen ähnlichen Seiten?), Die angezeigt werden Um diese in der oberen rechten Ecke zu duplizieren, ist der Abschnitt "Ressourcen" einfach leer. Und außerdem habe ich auch nach dem Lesen noch keine Ahnung, worum es auf der Website geht oder was ich damit machen kann.

Also, was kann ich tun , mit Ihrer Website? Nun, Sie sagen, dass ich Quiz erstellen und durchführen kann. Wie wäre es also, wenn Sie auf der Startseite einige große und attraktiv aussehende Links / Schaltflächen mit den Worten " Quiz machen " und " Quiz erstellen " platzieren? (Ersteres sollte wichtiger sein, da ein neuer Benutzer vermutlich eher ein Quiz als ein Quiz erstellt. Wenn Sie jedoch das zweite Quiz auf der Startseite einfügen, werden die Benutzer zumindest darüber informiert, dass sie dies auch können.) Außerdem a Eine kurze Erklärung - von ein paar Worten bis zu einem kurzen Absatz -, worum es auf Ihrer Website geht, wäre auch gut. (Das könnte auch ein guter Ort sein, um einen "read more" -Link anzuheften.)

Oder was können Sie es sich leisten, von Ihrer aktuellen Seite zu verlieren, wenn Sie es von der anderen Seite betrachten? Nun, ich würde wirklich "das meiste davon" sagen, aber das Offensichtliche, das (neben dem Metadaten-Dump) aufspringt, ist das Anmeldeformular oben. Sicher, es ist gut, etablierten Benutzern eine einfache Möglichkeit zum Anmelden zu bieten, aber das bedeutet nicht, dass Sie das Anmeldeformular auf jeder Seite anzeigen müssen. Machen Sie es stattdessen so wie Doodle und haben Sie einfach ein Popup-Anmeldeformular, auf das Sie über einen Link zugreifen können. (Für Benutzer mit deaktiviertem JavaScript empfiehlt es sich, eine separate Anmeldeseite als Fallback-Ziel für den Link zu verwenden.)

Es gibt noch eine Reihe anderer Dinge, die Sie verlieren könnten: Warum sehe ich beispielsweise als neuer und nicht registrierter Benutzer, was wie ein "Löschen" -Link aussieht? Kann ich die Seite wirklich löschen? Wenn ja, warum ? Wenn nicht, warum ist der Link dort?

In ähnlicher Weise ist die Notiz "(703 Verfügbare Fragen)" eine sinnlose Ablenkung, da sie wie ein Schnittstellenelement aussieht. Wenn Sie Besucher mit der Tiefe Ihrer Website beeindrucken möchten, platzieren Sie diese dort, wo sie hingehört: in einem geeigneten, beeindruckend aussehenden Klappentext im Inhaltsbereich. (" Wir haben bereits 703 Fragen und weitere kommen! ")

Abschließend sollte ich beachten, dass alles relativ ist. TV Tropes hat zum Beispiel eine schreckliche Benutzeroberfläche (ähnlich wie Ihre), aber das spielt keine Rolle, weil sie dies mit einer Menge exzellenter und dicht miteinander verbundener Inhalte wieder wettmachen, so dass die meisten neuen Benutzer gewinnen. ' Sie müssen die Navigationsoberfläche überhaupt nicht berühren. Eigentlich ist das bei Wiki-Sites ziemlich häufig. Wikipedia ist nicht wirklich viel besser. Der Haken ist jedoch, dass Sie bereits über diese Menge an Inhalten (oder eine Benutzerbasis, die für deren Erstellung verpflichtet ist) verfügen müssen , bevor dieser Effekt für Sie arbeiten kann.

Ihr "Design" wäre schön ... im Jahr 1995. Tatsächlich ist es veraltet. Es ist ein Design, das sich Ingenieure immer einfallen lassen :-) Das Einfachste, was Sie tun können, ist , ein CSS- Framework zu verwenden, z. B. Twitter Bootstrap , Zurb , was auch immer . Framework hilft dir, dich vor deiner eigenen "Kreativität" zu schützen ;-)

Aus Layout-Sicht ist an Ihrer Website nichts wirklich falsch. Es ist ein 3-Spalten-Standardlayout mit dem Logo oben links. Dieses allgemeine Framework wird seit Ewigkeiten verwendet, und das liegt daran, dass es funktioniert. Die meisten modernen Websites verwenden immer noch ähnliche Prinzipien, die auf einer Handvoll gängiger Layouts basieren, aber unter viel schlankeren Grafiken vergraben sind. (Seien Sie sehr vorsichtig mit Menschen, die kritisieren, wie modern etwas ist - nur weil ein paar Jahre vergangen sind, heißt das nicht, dass die Art und Weise, wie Menschen Informationen aufnehmen, plötzlich völlig anders ist.)

Einige streiten sich vielleicht darüber, ob sich die Hauptnavigationslinks auf der linken Seite oder oben befinden sollten oder nicht, aber diese Unterschiede machen oder brechen eine Site nicht.

Nein, das Problem liegt nicht in Ihrer Wahl der Positionen der Dinge. Es ist mit den Grafiken, Farbauswahl, Größe der Dinge und so weiter. Ich unterscheide die Begriffe Layout , bei denen es um Platzierung geht, das Design , bei dem es um Gefühl und Aussehen geht. Ich bin mir jedoch nicht sicher, ob jeder die Begriffe genauso verwenden würde wie ich.

Ihr Layout ist zwar im Wesentlichen in Ordnung, aber Ihr Design ist problematisch, leider ist die Situation schwieriger zu lösen. Wenn Ihr Layout das Problem wäre, könnten wir konkretere Ratschläge geben, z. B. "Verschieben Sie Ihre Suchfelder hierher" oder "Platzieren Sie Ihr Logo dort". Layout ist wirklich die Implementierung von Usability .

Bei dem Design geht es jedoch um Gefühl und Stil, was natürlich viel schwieriger zu kommentieren ist. Obwohl ich sagen kann, dass Sie einfach viele der Farboptionen als Standard festgelegt haben (der Hintergrund ist weiß, die Links sind blau, sehr wenige Schnittstellenbilder), ist es viel schwieriger zu sagen, welche Farben und Grafiken stattdessen vorhanden sein sollten . Es hängt sehr davon ab, welche Art von Gefühl Sie wollen. Langweilige und sichere Blau- und Grautöne für ein Unternehmensgefühl, Rosa und Gelb für ein unschuldiges und kindliches Gefühl, heiße Rot- und Schwarztöne für ein aufregendes Nachtclubgefühl ... Und selbst dann führt die Verwendung dieser Beispielfarben nicht unbedingt zum Ich fühle mich an sie gebunden. Der Teufel steckt im Detail.

Es gibt einige Überschneidungen zwischen den konkreteren Layoutproblemen und den ätherischeren Designproblemen, wie z. B. dem, was thebodzio in seiner Antwort über unterschiedliche Schriftgrößen für Überschriften und Fußnoten usw. sagt , um die Wichtigkeit hervorzuheben und den Besucher der Website anzuleiten durch die Informationen, die sie haben sollen. Sie sollten seinen / ihren Rat befolgen.

Ich befürchte jedoch, dass Sie sich nicht nur auf eine Reise einlassen, wenn Sie nicht mit einem Designer zusammenarbeiten, sondern selbst lernen möchten, wie man ein überzeugendes Website-Design anwendet. Es gibt ungefähr so ​​viele Wege, um ein guter Designer zu werden, wie es Designer gibt, und jede Menge Ressourcen, so dass es nicht an Möglichkeiten mangelt, etwas zu lernen.

Um den kürzesten Weg zu finden, um einen Sinn für Design für diese eine bestimmte Site zu erlangen, würde ich mir andere Sites ansehen, die Ihnen gefallen, und andere Sites, die einen ähnlichen Service bieten wie die, die Sie erstellen, und anfangen, zu vergleichen und zu kontrastieren, was Sie mögen und worüber diese und was auf Ihrer Website fehlt.

Leider ist das so objektiv wie möglich und nur der oberste Punkt der Spitze des Eisbergs. Hoffe, dass etwas von dem, was ich gesagt habe, hilft.

Deshalb denke ich, dass die Leute negativ auf Ihre Website reagieren: Es wirft zu viele Fragen auf!

Wie Sie sagten, bevor Sie die Funktionalität einführen. Was mir sagt, dass die Leute nicht verstehen, worum es geht. Welches sollte die erste beantwortete Frage von der Website sein. Denn wenn es im Web ist, können Sie nicht neben ihnen stehen und es erklären.

"All das Wissen der Welt" kommuniziert nicht genau, was Sie auf der Website finden können (oder was in dieser Angelegenheit nicht sehr glaubwürdig ist) oder warum Sie sich anmelden sollten. Ihr Design wird also schlecht wahrgenommen, weil es die Beantwortung dieser Fragen nicht unterstützt.

Zunächst müssen Sie also antworten: "Worum geht es auf dieser Website?". ZB mit einem Leitbild. Es könnte für Sie offensichtlich sein, aber nicht für alle anderen im Web. Was ist der Hauptzweck? Quizes nehmen oder Quizes erstellen? Was möchten Sie als Erstes tun? Einloggen? Ein Quiz beantworten? Erstelle einen? Dies sind Dinge, die Sie beantworten sollten, wenn Sie möchten, dass Personen auf Ihrer Seite bleiben.

Dann sollten Sie Ihre Informationen organisieren. Was ist Inhalt, was ist Meta (Logo, Navigation, Login). Schauen Sie sich Stackexchange an. Inhalt (hell) unterscheidet sich deutlich von Meta (dunkel).

Gruppieren Sie die Dinge, die zusammen gehören. Sie haben Brotkrumen, die von der Navigation getrennt sind. Optisch sowie formuliert. Ich finde "Alles" nicht in der Hauptnavigation. Wie komme ich dort hin?

Warum das alles? Je schneller die Menschen die ihnen präsentierten Informationen verstehen, desto wahrscheinlicher ist es, dass sie bleiben und interagieren. Wenn sie verwirrt sind und mit Fragen konfrontiert werden, die sie nicht beantworten können, reagieren sie negativ.

Weil es so ist. Das war gemein, nicht wahr :) Es war nur ein Witz, meine beste Antwort wäre, mit jemandem im Designbereich zusammenzuarbeiten, wenn Sie nicht jemanden haben, mit dem Sie arbeiten können, einen Freiberufler zu finden, wenn das nicht funktioniert Fangen Sie auch einfach wieder von vorne an, aber versuchen Sie, die Dinge einfacher zu halten und den Inhalt atmen zu lassen ...

Einige Tipps / Ratschläge / Empfehlungen für den ersten Blick: Machen Sie die Schriftarten h-Tags (Titel) größer als die p-Tags, viel größer (etwas in den Bereichen Schriftgröße 30-48 und Absatz (11-max 13)). Lassen Sie mindestens zu 20-px-Ränder oder Auffüllen zwischen Inhaltsblöcken (z. B. ein Maring-Bottom: 20px; die Anmeldeleiste würde es ermöglichen, sie separater und einfacher zu lesen.

Lassen Sie sich von jemandem ein richtiges Logo entwerfen. Das, das Sie jetzt haben, ist ... nicht gut. Probieren Sie verschiedene Schriftarten aus, möglicherweise eine serifenlose Schriftart (wie Open Sans, kostenlos für Google-Schriftarten oder nur Arial-Helvetica).

Verwenden Sie keine Farbverläufe, wenn Sie keinen Sinn für Farbe haben, nur weil sie cool sind oder weil sie für Sie besser aussehen. Versuchen Sie, sich an einfache Farben zu halten, und versuchen Sie am Ende, wenn Sie fertig sind, mit Farbverläufen nur auf CTA zu experimentieren ( Handlungsaufforderung) (zum Beispiel auf den Schaltflächen).

Es gibt eine Menge, die Sie tun können ... aber diese Dinge kommen normalerweise mit der Zeit. Sie erhalten ein geschultes Auge, wenn Sie sich viele großartige Designs ansehen und versuchen zu verstehen, wie dieses Ergebnis erzielt wurde ... der beste Weg dazu ist Versuchen Sie, das gleiche Ergebnis selbst wiederherzustellen. In diesem Prozess erhalten Sie einige Kenntnisse und Einblicke, warum und wie Dinge getan / gemacht werden, um Benutzeroberflächen zu sehen / zu interagieren und zu erleben.

Buchempfehlung: Smashing Book [das erste und das zweite Buch] und die Website:

http://smashingmagazine.com

und noch eine: http://www.bamagazine.com/

Wow! Sie haben wirklich eine Antwort generiert! Zumindest weißt du, dass dein Design nicht unbemerkt bleibt;)

Hier ist die kurze Antwort auf Ihre Frage: Die Site scheint von einem Softwareentwickler entworfen worden zu sein. Das ist was du tust und ich bin sicher du machst es gut. Jetzt brauchen Sie jemanden, der UI-Design macht, um Ihre Idee zugänglich zu machen. Daran führt kein Weg vorbei. Sie werden an einem Wochenende kein Design lernen und das Problem beheben.

Finden Sie einen Studenten oder jungen Designer, der sein Portfolio ausfüllen und ihm etwas Freiheit geben möchte. Sie möchten jemanden, dessen Arbeit für dieses Projekt sauber und ordentlich ist. Finden Sie heraus, ob Sie einen Designer finden, der Minimalismus bevorzugt.

Ich bin kein professioneller Designer. Darf ich aus Sicht eines Benutzers und aus der Erfahrung beim Surfen auf verschiedenen Websites auf einige Dinge hinweisen?

1. Die Hintergrundfarbe der Seite ist weiß, aber die Abschnittsüberschriften / -highlights sind in Gelb- oder Weißtönen gehalten. Sie können ein wenig Kontrastfarben ausprobieren und die Kontraststufe so gestalten , dass sie Ihrer Elementhierarchie entspricht (höhere Überschriften = mehr Kontrast) oder ein festes Farbschema für Kopfzeileninhalte (z. B. tiefes Orange wie auf der zweiten Seite des Buches, das im Logo für Kopfzeilen angezeigt wird, Weiß für Kopfzeilentext und Dunkelgrau für Inhaltstext).
2. Zu viel freier Speicherplatz auf Ihrer Seite, freier Speicherplatz ist gut, um Benutzern einen Platz zum Atmen zu geben, aber zu viel freier Speicherplatz lässt Ihre Seite wie Backoffice / unter Wartung aussehen. Beispielsweise könnte der Abschnitt "Unterthemen" im ersten Bildschirm den gesamten Bereich unter "Alles" überspannt haben. Warum auch zwei redundante Unterthemen?
3. Die IMO-Verteilung von Inhalten sollte unter eine Hierarchie fallen . Wenn Sie eine der Websites wie Google-Codepages (die Ihrer Website sehr ähnlich sehen), Wikipedia oder diese Website als Beispiel nehmen, verbrauchen alle viel Platz für den Website-Header , dann kommt der Inhalt. Auch heutzutage verwenden viele Seiten eine Symbolleiste wie eine Kopfzeile mit einer bestimmten Farbe, allgemeinen Menüs und dem darin eingebetteten Site-Logo. Sie können jedoch sagen, dass Ihr Logo zu groß ist, um dies zu tun.
   Nehmen Sie zum Beispiel den Abschnitt zum Unterthema ganz rechts auf der Seite. Sehen sie wirklich nach einer weiteren Spezialisierung des aktuellen Inhalts aus? Sie sehen eher wie zufällige Tags oder verwandte Themen aus. Sie können ihre Hierarchie widerspiegeln, indem Sie aEine baumartige Struktur wie auf verschiedenen Dokumentationsseiten würde auch die Brotkrumen unnötig machen. Auch IMO wäre der richtige Ort für diesen Baum (Navigation) in der linken Seitenleiste und der Rest der Aktionen würde anstelle von Brotkrumen stattfinden.
4. Gleichmäßigkeit ist ebenso wichtig wie Verteilung. Ihre Schaltflächen können je nach Zweck / Wichtigkeit unterschiedliche Farben haben. Ihre Struktur sollte jedoch gleich bleiben. Ihr "Login" -Button ist scharfkantig, während das "Jetzt Quiz machen" abgerundet ist. Möglicherweise möchten Sie einen dieser Ansätze loswerden.
5. Links und Aktionen sind nicht gleich , Sie sollten sie auch entsprechend benennen. Wie das Menü "Löschen" links gelöschte Elemente oder die Löschaktion widerspiegelt, kann nicht gesagt werden. Geben Sie den Benutzern wie in GMail eine Schaltfläche zum Löschen und ein Menü / eine Registerkarte für gelöschte Elemente.
6. Schriftarten sind sehr wichtig, um den Zweck widerzuspiegeln. Wenn Sie eine Kunstseite oder eine Literaturserifenfamilie erstellen, ist dies gut, aber um eine E-Learning-Site zu erstellen, müssen Sie eine Schriftart auswählen, die in verschiedenen Größen bequem zu folgen ist und weniger Vergrößerungen aufweist (wie längliche Kanten). Sans ist gut darin. Wikipedia benutzt es zum Beispiel. Die Wahl der Größe und des Gewichts ist ebenfalls wichtig. Wenn Statistiken wichtig sind (und sich ändern), sind die Zahlen fett gedruckt (z. B. 703 verfügbare Fragen). Wie Sie es getan haben, um die Anzahl der Fragen im zweiten Bildschirm auszuwählen. Kursivschrift in Überschriften IMO sieht nicht gut aus. Warum nicht stattdessen Fettdruck verwenden?
7. Dies ist sehr ähnlich wie meine persönliche Meinung , aber ich denke , dass einige mehr abgerundeten Ecken Benutzer aus dem kastenartigen Gefühl lindern würden.

Ich bin ein professioneller Designer und Entwickler. Ich denke, das Wichtigste bei einem Design ist, ein Grafikprogramm wie Fireworks zu verwenden, um ein Design zu erstellen, bevor Sie es implementieren. Das macht es einfacher, Dinge zu ändern und einfach zu experimentieren. Ich komme aus der Entwicklung und weiß, wie wichtig das ist.

Ich weiß nicht, für welche Stellen Sie sich bewerben. Wenn Sie sich für eine Stelle als Grafikdesigner bewerben, sollten Sie sich etwas Zeit nehmen, um professionelles Grafikdesign zu erlernen. Wenn Sie eine Entwicklungsposition einnehmen, kann es sinnvoll sein, einen professionellen Designer ein wenig zu bezahlen, um ein schönes Design zu erstellen, oder eine schnelle Lösung zu finden, anstatt Monate zum Lernen zu benötigen.

Wenn Sie eine schnelle Lösung finden möchten, werde ich versuchen, einige Details anzugeben, um Ihnen den Einstieg zu erleichtern. Die Antworten hier sind gut - aber sie sind nicht sehr spezifisch. Ich werde es versuchen.

Beachten Sie, dass ein Design mit variabler Breite immer etwas schwieriger ist als ein Design mit fester Breite. Ich denke, Sie haben Recht, ein 3-Spalten-Design zu wählen. Der Inhalt ist korrekt, das Design ist nicht so toll (meiner Meinung nach).

Folgendes würde ich tun (es würde wahrscheinlich weniger als einen Tag dauern):

1. Beginnen Sie mit dem Logo. Es sieht sehr beschäftigt aus -> versuchen Sie es einfacher zu machen. Verwenden Sie lebendigere Farben. Das Gelb sieht schmutzig aus. Versuchen Sie es mit einer einfacheren Schriftart.
   • Nachdem Sie das Logo erstellt haben, können Sie die Site-Farben darauf abstimmen
2. Alles an der Website sollte "luftig" sein. Also mach die Dinge nicht eng.
   • Die linke Spalte sollte viel breiter sein. 1,5-fache aktuelle Breite
   • Die Oberseite sollte mehr Abstand um die Anmeldefelder haben
   • Das rechte sollte die Unterthemen jeweils in einer neuen Zeile haben. Stellen Sie sicher, dass sie einen größeren Abstand haben, damit sie nicht ineinander gequetscht werden
   • Die Untertabelle kann Tonnen mehr Auffüllung für Zellen verwenden, die Titel-Divs können mehr aufgefüllt werden usw.
3. Der gesamte Inhalt sollte fließen, anstatt abgehackt zu sein. Dies bedeutet, dass Sie so viel wie möglich ausrichten, einheitliche Schriftarten und die richtigen Größen verwenden.
   • Die mittlere Spalte "Alles Wissen in der Welt" sieht mit dem Rest des Inhalts fehl am Platz aus. Vielleicht schweben Sie es nach links, entfernen Sie die Unterstreichung und machen Sie es sicher kleiner als der Titel.
   • Der Seiteninhalt ist nicht ausgerichtet. Es würde besser aussehen, wenn Sie den Unterinhalt linksbündig mit den Untertiteln ausrichten würden.
4. Die Anmeldefelder oben können besser gemacht werden.
   • Sie können die Beschriftungen in die Texteingabefelder einfügen (ausgegraut). Das würde es sauberer machen.
   • Sie könnten das Kontrollkästchen / die Schriftart für mich viel kleiner machen. Es ist nicht das wichtigste Merkmal, daher sollte es nicht so groß sein wie das wichtige Teil.

Dies wird Ihre Site nicht zur großartigsten Site im Internet machen, aber es wird sie hoffentlich genug polieren, um Inspektionen zu bestehen. :) :)

wow ... das ist ziemlich schlimm lol.

Ich glaube nicht, dass Sie in ein paar Vorschlägen lernen können, etwas neu zu gestalten, wenn Sie keinen Sinn für Design haben. Ich denke also, Sie sollten jemanden dazu bringen, das Layout zu erstellen. Wenden Sie sich an eine lokale Kunsthochschule und sehen Sie, ob a Klasse wird es als ein reales Beispiel nehmen.

Andernfalls sind hier meine wenigen Vorschläge. Die Index- / Zielseite muss trotz ihres Namens eher wie eine Werbetafel oder eine Zeitschriftenanzeige funktionieren. Es muss seine Botschaft SCHNELL in wenigen Sekunden übermitteln. Beachten Sie, dass ich "Nachricht" sagte, keine Informationen. Die Informationen müssen vorhanden sein, wenn der Betrachter danach sucht, aber es muss nicht alles wie ein leicht durcheinandergebrachtes Inhaltsverzeichnis angelegt sein.

Also, was die Nachricht betrifft ... als erstes muss man sich überlegen, WAS sie sich ansehen. Webseite, ja, aber Webseite von was? Selbst wenn ich Ihre Kategorien lese, ist mir nicht klar, was diese Seite ist.

Das "Was" wird durch Farbschema, Gesamtlayout sowie Überschriften vermittelt.

Nachdem Sie die Frage gelöst haben, entscheiden Sie, was sie zuerst sehen sollen. Meine Wahl wäre das Practice make Perfect-Logo, und ich würde es vergrößern und aus dem Header entfernen. Aber Sie können Gründe haben, sich auf etwas anderes oder einen Aufruf zum Handeln zu konzentrieren.

Ich vermute, dass Ihr wichtigstes Ding "Alles Wissen in der Welt" ist, weil Sie es zentriert haben (schlechte Idee), es kursiv gemacht haben (schlechte Idee!) Und ihm viel Platz um sich herum gegeben haben (gute Idee) Wörter selbst ... es ist nicht klar, was das IST oder tut, versuchen Sie etwas Beschreibenderes und weniger doof.

Versuchen Sie, die gesamte Zielseite in 3 Designelemente UND 3 Ebenen von Informationsbedeutung zu unterteilen. Fragen Sie sich, was das ERSTE ist, was sie sehen sollten, das ERSTE, was sie tun sollten? Was ist der zweite, dritte? und versuchen Sie entsprechend neu zu gestalten.

Verwenden Sie weniger Farben und lassen Sie sie sinnvoll sein. Warum werden 3 verschiedene zusammenstoßende Blautöne zufällig über den Text gestreut? Verwenden Sie mehr Schriftgrößen (!). Das Aufteilen in 3s ist ein guter Anfang. GROSSE Schrift für die wichtigsten, mittlere für sekundäre usw.

Mein letzter Vorschlag ist, Ihr Design ZUERST und lange vor dem Schreiben des Codes zu erstellen. Ich schlage vor, mit PAPIER und Kugelschreibern oder Bleistift zu beginnen, um eine Seite auszublenden. Nur kurze Skizzen. Schreiben Sie dabei NICHT die tatsächlichen Wörter. Blockieren Sie einfach Bereiche, während Sie versuchen zu entscheiden, wie groß der Inhaltsbereich gegenüber der Kopfzeile sein soll , wie groß ist die Seitenleiste und so weiter.

Dann machen Sie ein endgültigeres Design in einem Grafikprogramm. Bewegen Sie die Dinge und experimentieren Sie mit der Platzierung. Denken Sie daran, dass Sie eine Seite entwerfen, die wie eine Magazinseite funktionieren muss. Lassen Sie Ihren Betrachter innehalten, zeigen Sie ihm, was er sehen soll, und führen Sie ihn dazu, das zu tun, was er tun soll.

Und fangen Sie an, nach Design zu suchen. Schau einfach. Bewerten Sie den Inhalt nicht, sondern suchen Sie nach den Nachrichten, die von Webseiten übermittelt werden. Wie verwenden sie Abstand, Farbe, Schriftgröße? Versuchen Sie, gutes Design zu emulieren. Viel Glück

und betrachten Sie den Vorschlag der Kunstschule. Grafikdesign-Programme suchen häufig nach realen Re-Design-Projekten für ihre Schüler.

Das Hauptproblem, das ich aus diesem Thread erhalte, ist, dass Sie mehr daran interessiert sind, Ihr "Design" zu diskutieren und zu verteidigen, als daran, zu lernen, wie man etwas schafft, das ansprechend ist. Typisch für einen Softwareentwickler. Sie denken, Sie können die Seite in Komponentenelemente aufteilen, diese Elemente testen und überprüfen. Sobald Sie die Komponenten integriert haben, glauben Sie, dass die Elemente ein gutes Design mathematisch aufzählen sollten. Dann denken Sie, dass Sie durch das Posten dieser Frage die Seite erneut in Komponenten zerlegen und die Vorzüge der einzelnen diskutieren und argumentieren können, wie sie dem folgen, was der Antwortanbieter gesagt hat.

Bis Sie bereit sind zu akzeptieren, dass Sie an UX saugen, werden Sie dieses Problem weiterhin haben. Wie oben erwähnt, geht es beim Grafikdesign um das Gefühl. Grafikdesign ist nicht gleich Engineering-Design. Sie können etwas nicht mathematisch konstruieren, es in andere "mathematisch korrekte" Dinge integrieren und ein gutes Ergebnis erwarten. Sie werden (wahrscheinlich) nie gut in UX sein, weil Sie die Welt einfach nicht so sehen, wie ein Designer sie sieht. Aber wenn Sie aufhören, Ihre Seite zu messen und mit etwas anderem zu vergleichen - öffnen Sie sich ganz dem Lernen, dass Sie nichts über Grafikdesign wissen, dann bekommen Sie es vielleicht ...