Kritik: Tritium-Website-Design

9

Im Anschluss an diese Frage: Kritik: Tritium-Software-Logo-Design . Informationen zum Überprüfen des Website-Codes (Leistung, Fehler, verwandte Benutzererfahrung) finden Sie in der Schwesterfrage zu Code Review .

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

Speziell:

Ein Ziel der Website war es, es einfach zu halten. Habe ich das geschafft?
Ergänzen sich die Farben in meiner Palette?
- Hintergrund: #171d25
- Animiertes Atom: #333
- Logo: #f8bd24
- Link Text: #6e6e6e
- Markenkopfzeile, Hover-Link-Text, Schaltfläche: #78C40F
- Navbar: #000
- Hauptteil: #fff
Werden alle bisherigen Kritikpunkte in Bezug auf das Design korrekt umgesetzt? Bin ich über Bord gegangen?
- Implementierung des @ DA01-Logo-Designs ( Verwendung mit Genehmigung ).
- Hinzugefügt das Atom in den Hintergrund je ein von @ Yisela Vorschlag des , Animation mit freundlicher Genehmigung von @squeamishossifrage .
- Versucht, es einfach zu halten, basierend auf den zahlreichen anderen Vorschlägen.
Funktioniert meine Schriftauswahl gut mit dem restlichen Erscheinungsbild der Website?
Gibt es Designkonzepte, die ich übersehen und nicht implementiert habe?

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

website-design critique identity

— syb0rg
quelle

Ich denke die Farben sehen OK aus. Natürlich weiß ich nicht viel über den Hintergrund oder die Beratung des Designs, aber ich persönlich verwende das Eye Dropper- Plugin für Chrome zusammen mit Paletton.com. Es bietet Ihnen ein großes Maß an Flexibilität bei der Auswahl der richtigen Farben. Das Eye Dropper-Tool bietet Ihnen auch viele Optionen zum Deklarieren dieser Farbe in CSS / HTML.

— Argent Branding

Wenn Sie auf "Download-Seite besuchen" klicken, wird ein neuer Tab geöffnet, aber das habe ich nicht bemerkt, da ein Popup angezeigt wurde und ich dachte, das wäre alles, was passieren sollte ... Wenn der neue Tab geöffnet und in den Fokus gerückt wurde Benutzer würde es nicht verpassen. Die Verwendung von target = "_ blank" sollte den Trick tun ( siehe w3schools.com/html/html_links.asp ). Wenn Sie es auch wie einen normalen Link aussehen lassen (blau, unterstrichen oder ähnlich), gehen die Leute davon aus, dass es einen neuen Tab öffnet.

— Henrik Ekblom

1

Ich stimme der Kritik am Popup zu. Ich würde eine Schaltfläche im Popup hinzufügen, um darauf zu klicken, die dann zur Github-Seite weitergeht, anstatt zwei Dinge gleichzeitig zu öffnen. Wirklich tolle Arbeit auf der Seite übrigens.

— Hanna

Ich würde dem Popover, das angezeigt wird, wenn auf den Link " Download-Seite besuchen" geklickt wird, etwas mehr Abstand zwischen dem Rand und dem Text geben und wahrscheinlich auch die Größe und den Vorsprung der darin enthaltenen Kopie etwas verringern. Fügen Sie einen Ereignis-Listener hinzu, um Escape-Klicks zu registrieren und das Popover zu entfernen, während Sie gerade dabei sind. Popover, die nicht auf Escape-Klicks reagieren, sind für den Benutzer ärgerlich. :-)

— Janus Bahs Jacquet

1

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

Ich mag deine Farben. Alternativ können Sie ein dunkles Blau als Hintergrund verwenden. Dies 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 optimieren 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)

— analog-nico
quelle

1

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

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

Ich denke, dass die Wahl der Schriftart für technisch relevante Websites gut funktioniert. Ich würde wahrscheinlich das Serifengesicht für ein kostenloses serifenloses Gesicht verschrotten, aber das ist ein rein persönlicher Geschmack.

Außerdem habe ich festgestellt, dass in Bezug auf die Reaktionsfähigkeit ein Dropdown-Menü in Ihren Headern hilfreich sein kann, wenn es auf kleinen Bildschirmen (mobil) angezeigt wird. Da ich neu in der Codierungsseite des Grafikdesigns bin, danke ich Ihnen, dass Sie die Quelldateien aufgenommen haben. Ich werde es wahrscheinlich sezieren und einige der von Ihnen implementierten Header-Übergänge lernen.

— user3931564
quelle

0

Nicht gerade ein Designproblem, aber die Benutzerfreundlichkeit -
Die Website gibt an, dass es KOSTENLOS ist. Wenn Sie jedoch auf "SEITE HERUNTERLADEN" klicken, wird im Popup eine Spende angefordert. Was ist, wenn ich vor dem Testen der Software nicht spenden möchte? Es sollte eine andere Option wie "WEITER" oder "ABBRECHEN" geben, damit der Benutzer die Download-Seite tatsächlich besuchen und die Software herunterladen kann, wenn er nicht spendet.

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

— Sam
quelle

-2

Dafür werden Sie nicht den Designer des Jahres gewinnen. 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 als ein Senf auf Grau, wenn es in das Symbol der Browser-Registerkarte eingefügt wird. Wenn Sie ein Browser-Registerkartensymbol erstellen möchten, machen Sie es einfach dunkelgrau oder schwarz.

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

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

— Cakey
quelle