Kritik: Design der Tritium-Website

Im Anschluss an diese Frage: Kritik: Tritium-Software-Logo-Design . Zur Überprüfung des Website-Codes (Leistung, Fehler, zugehörige Benutzererfahrung) besuchen Sie bitte die Schwesterfrage zur Codeüberprüfung .


Ich suche eine Überprüfung des Designs für meine Tritium-Website ( Quellcode ).

Geben Sie hier die Bildbeschreibung ein

Speziell:

Ich bin noch etwas neu im Website-Design, also seien Sie bitte so hart wie nötig damit.

Ich finde die Farben sehen OK aus. Natürlich weiß ich nicht allzu viel über den Hintergrund oder die Beratung des Designs, aber ich persönlich verwende das Eye Dropper- Plug-in für Chrome zusammen mit Paletton.com. Es gibt Ihnen eine große Flexibilität bei der Auswahl der richtigen Farben. Das Eye Dropper-Tool bietet Ihnen auch viele Optionen zum Deklarieren dieser Farbe in CSS/HTML.
Beim Klicken auf "Downloadseite besuchen" wird ein neuer Tab geöffnet, aber das habe ich nicht bemerkt, weil ein Popup auftauchte und ich dachte, das war alles, was passieren sollte ... Wenn der neue Tab geöffnet und der Fokus gesetzt wurde Benutzer würde es nicht vermissen. Die Verwendung von target="_blank" sollte ausreichen (sehen Sie sich w3schools.com/html/html_links.asp an ). Wenn Sie es auch wie einen gewöhnlichen Link aussehen lassen (blau, unterstrichen oder ähnlich), werden die Leute wahrscheinlich annehmen, dass es einen neuen Tab öffnet.
Ich schließe mich der Kritik am Pop-up an. Ich würde eine Schaltfläche im Popup hinzufügen, auf die geklickt werden kann, die dann zur Github-Seite weitergeht, anstatt zwei Dinge gleichzeitig zu öffnen. Übrigens wirklich tolle Arbeit auf der Seite.
Ich würde dem Popover, das erscheint, wenn auf den Link „Downloadseite besuchen“ geklickt wird, etwas mehr Abstand zwischen Rand und Text geben und wahrscheinlich auch die Größe und den Zeilenabstand der darin enthaltenen Kopie etwas verringern. Und fügen Sie einen Ereignis-Listener hinzu, um Escape-Klicks zu registrieren, um das Popover auch loszuwerden, wenn Sie schon dabei sind – Popovers, die nicht auf Escape-Klicks reagieren, sind ein Ärgernis für den Benutzer. :-)

Antworten (4)

Großartiges Design! Besonders gut gefällt mir die Atomanimation rechts.

Ich mag deine Farben. Alternativ können Sie für den Hintergrund ein dunkles Blau verwenden. Das verleiht der Seite eine Tiefe wie der nachtblaue Himmel:

Screenshot der Seite mit alternativer Farbpalette

Ich habe Colorizr.js verwendet , um mit Ihrer Farbpalette zu spielen. Wenn Sie Ihre Farben feinabstimmen möchten, verwenden Sie die folgenden Einstellungen, die zu Ihrer Seite passen:

Colorizr.js-Einstellungen

Die Farben sind von oben nach unten: rgb(25, 33, 44), rgb(14, 191, 14), rgb(212, 212, 212), rgb(26, 40, 60), rgb(26, 40, 60)

Ich denke, das Website-Design funktioniert. Ich mag deine Übergänge für die Header-Links. Klare und prägnante Kommunikation.

Farbpalette erinnert mich an ein Ernährungsunternehmen oder ähnliches.

Ich denke, die Schriftartauswahl funktioniert gut für technikbezogene Websites. Ich würde wahrscheinlich das Serifengesicht für ein kostenloses serifenloses Gesicht verschrotten, aber das ist rein persönlicher Geschmack.

Außerdem ist mir aufgefallen, dass in Bezug auf die Reaktionsfähigkeit ein Dropdown-Menü in Ihren Kopfzeilen nützlich sein könnte, wenn es auf kleinen Bildschirmen (mobil) angezeigt wird. Da ich neu auf der Programmierseite des Grafikdesigns bin, danke ich Ihnen für die Bereitstellung der Quelldateien. Ich werde es wahrscheinlich analysieren und einige der Header-Übergänge lernen, die Sie implementiert haben.

Nicht gerade ein Designproblem, aber die Benutzerfreundlichkeit -
Die Website sagt, dass es KOSTENLOS ist, aber wenn Sie auf "DOWNLOAD-SEITE BESUCHEN" klicken, bittet das Popup um eine Spende. Was ist, wenn ich nicht spenden möchte, bevor ich die Software ausprobiert habe? Es sollte eine weitere Option wie „WEITER“ oder „ABBRECHEN“ geben, damit der Benutzer tatsächlich die Download-Seite besuchen und die Software herunterladen kann, wenn er/sie nicht spendet.

Daher würde ich empfehlen, das Layout des Popups neu zu gestalten und wie vorgeschlagen eine weitere Schaltfläche einzufügen.

Den Designer des Jahres gewinnt man dafür nicht. Aber je weniger es gibt, desto weniger gibt es zu mögen, denke ich.

Ihre gelbe Version des Symbols hat Ellipsen, die größer als breit sind:

Geben Sie hier die Bildbeschreibung ein

Es sieht seltsam aus und ist noch seltsamer wie ein Senf auf Grau, wenn es in das Browser-Tab-Symbol eingefügt wird. Wenn Sie ein Browser-Tab-Symbol erstellen möchten, machen Sie es einfach dunkelgrau oder schwarz.

Es scheint, als gäbe es nur eine Sache, auf die man klicken muss, nämlich "Download-Seite besuchen". Wenn das alles ist, was Sie haben, warum ist es dann nicht die Seite?

Es fragt nach Geld, aber mein Browser gibt nichts anderes. Vielleicht funktioniert es in Ihrem Browser, aber ich benutze TorBrowser und Sie alle sollten es auch tun. Die NSA ist böse. Wie auch immer, für das, was es wert ist, öffnet es nur einen Dialog und tut nichts.