Critica: progettazione del sito Web Tritium

9

In seguito a questa domanda: Critica: progettazione del logo del software Tritium . Per rivedere il codice del sito Web (prestazioni, bug, esperienza utente correlata), visitare la domanda sorella su Revisione del codice .

Sto cercando una recensione del design per il mio sito Web Tritium ( codice sorgente ).

In particolare:

Uno degli obiettivi del sito Web era quello di renderlo semplice. L'ho realizzato?
I colori nella mia tavolozza si completano a vicenda?
- Sfondo: #171d25
- Atomo animato: #333
- Logo: #f8bd24
- Link al testo: #6e6e6e
- Intestazione del marchio, testo al passaggio del mouse, pulsante: #78C40F
- Navbar: #000
- Corpo del testo: #fff
Tutte le critiche passate sono state implementate correttamente dal punto di vista del design? Sono andato in mare?
- Implementato il design del logo @ DA01 ( usato con permesso ).
- Aggiunto l'atomo sullo sfondo per uno dei suggerimenti di @ Yisela , animazione per gentile concessione di @squeamishossifrage .
- Ho cercato di renderlo semplice sulla base dei numerosi altri suggerimenti.
La mia scelta del carattere funziona bene con il resto dell'aspetto del sito Web?
Ci sono concetti di design che ho trascurato e che non ho implementato?

Sono ancora un po 'nuovo nel design del sito Web, quindi per favore sii severo quanto necessario con questo.

website-design critique identity

— syb0rg
fonte

Penso che i colori siano a posto. Ovviamente non so troppo sullo sfondo o sulla consultazione del design, ma uso personalmente il plug-in Eye Dropper per Chrome insieme a Paletton.com. Ti offre una vasta gamma di flessibilità nella scelta dei colori giusti. Lo strumento Contagocce ti offre anche molte opzioni per dichiarare quel colore in CSS / HTML.

— Argent branding

Facendo clic su "Visita la pagina di download" viene aperta una nuova scheda, ma non me ne sono accorta, perché è stato visualizzato un popup e ho pensato che fosse tutto ciò che doveva succedere ... Se la nuova scheda fosse aperta e messo a fuoco il l'utente non lo perderebbe. Usare target = "_ blank" dovrebbe fare il trucco (controlla w3schools.com/html/html_links.asp ). Se anche tu lo facessi sembrare un normale link (blu, sottolineato o simile) penso che la gente supporrà che si apre una nuova scheda.

— Henrik Ekblom,

1

Sono d'accordo con la critica sul pop-up. Aggiungerei un pulsante nel pop-up per fare clic che poi continuerà sulla pagina di github, anziché aprire due cose contemporaneamente. A proposito, davvero un ottimo lavoro sul sito.

— Hanna,

Vorrei dare il popover che appare quando si fa clic sul collegamento alla pagina di download di Visit un po 'più di riempimento tra il bordo e il testo, e probabilmente anche un po' più in basso la dimensione e la parte iniziale della copia. E aggiungi un listener di eventi per registrare i clic di escape per sbarazzarti anche del popover, mentre ci sei: i popover che non reagiscono ai clic di escape sono un fastidio per l'utente. :-)

— Janus Bahs Jacquet,

1

Grande design! Mi piace soprattutto l'animazione dell'atomo a destra.

Mi piacciono i tuoi colori. In alternativa è possibile utilizzare un blu scuro per lo sfondo. Questo dà alla pagina una profondità come il cielo blu notte:

Schermata della pagina con una tavolozza di colori alternativa

Ho usato Colorizr.js per giocare con la tua tavolozza di colori. Se desideri ottimizzare i tuoi colori, utilizza le seguenti impostazioni che si adattano alla tua pagina:

Impostazioni Colorizr.js

I colori vanno dall'alto verso il basso: rgb (25, 33, 44), rgb (14, 191, 14), rgb (212, 212, 212), rgb (26, 40, 60), rgb (26, 40, 60)

— analogico-nico
fonte

1

Penso che il design del sito web funzioni. Mi piacciono le tue transizioni per i link delle intestazioni. Comunicazione chiara e concisa.

La tavolozza dei colori mi ricorda un'azienda nutrizionale o simile.

Penso che la scelta del carattere funzioni bene per il sito Web relativo alla tecnologia. Probabilmente avrei raschiato la faccia serif per una faccia sans-serif gratuita, ma è un gusto puramente personale.

Inoltre, ho notato che in termini di reattività, un menu a discesa potrebbe essere utile nelle intestazioni quando visualizzato su schermi di piccole dimensioni (mobile). Dato che sono nuovo sul lato della codifica della progettazione grafica, ti ringrazio per aver incluso i file di origine. Probabilmente lo analizzerò e imparerò alcune delle transizioni di intestazione che hai implementato.

— user3931564
fonte

0

Non esattamente un problema di progettazione, ma sull'usabilità -
Il sito dice che è GRATUITO, ma quando si fa clic su 'VISITA SCARICA PAGINA' il pop-up chiede una donazione. Cosa succede se non desidero effettuare una donazione prima di provare il software? Dovrebbe esserci un'altra opzione come "CONTINUA" o "ANNULLA" in modo che l'utente possa effettivamente visitare la pagina di download e scaricare il software, se non effettua una donazione.

Quindi consiglierei di ridisegnare il layout del pop-up e di includere un altro pulsante come suggerito.

— Sam
fonte

-2

Non vincerai il designer dell'anno per quello. Ma meno c'è, meno c'è da non amare credo.

La tua versione gialla dell'icona ha ellissi più alte che larghe:

inserisci qui la descrizione dell'immagine

È strano e persino più strano come una senape su grigio quando viene messo nell'icona della scheda del browser. Se hai intenzione di creare un'icona della scheda del browser, rendila grigia o nera scura.

Sembra che ci sia solo una cosa da fare clic su "visita la pagina di download". Se questo è tutto ciò che hai, perché non è la pagina?

Chiede soldi ma il mio browser non dà altro. Forse lo fa nel tuo browser, ma io uso TorBrowser e dovresti farlo anche tu. L'NSA è malvagia. Ad ogni modo, per quello che vale, si apre una finestra di dialogo e non fa nulla.

— cakey
fonte