Designazione di pulsanti puliti dal design piatto in modo da mostrare convenienza e un aspetto "ben progettato"

Ho iniziato di recente un piccolo framework CSS. ( http://mincss.com se qualcuno è interessato) Ho rapidamente eliminato un progetto iniziale per alcuni pulsanti. Dopo aver chiesto feedback su UX StackExchange (e ricevuto molti feedback positivi), mi è stato consigliato di venire qui per ulteriori consigli su come migliorarli.

Questo è quello che sembrano adesso, dopo il feedback di UXStackExchange. Ho rimosso il bordo nero, aggiunto un'ombra "3px" e rimosso il bisello 1px:

Vado per un look dal design piatto.

Ho 3 domande rimanenti:

• Questi pulsanti mostrano abbastanza convenienza? (Questo sembra essere un problema con il design piatto)
• Consiglieresti di aggiungere una piccola sfumatura?
• Sembrano ben progettati? (soggettivo lo so, ma non riesco a pensare a un modo migliore per chiedere questo)

Sarò lieto di accogliere (e probabilmente userò) qualsiasi feedback su questi pulsanti.

Penso che un gradiente molto sottile migliorerà sicuramente l'estetica dei pulsanti. Poiché lo stile "Metro" di Windows 8 è un grande sostenitore di questo stile, lo userò come esempio:

A prima vista le "piastrelle" sembrano essere di un colore piatto, ma se guardi da vicino c'è una leggera pendenza che va da sinistra a destra. È più evidente su alcuni rispetto ad altri, ma tutti lo hanno. Come diceva Yisela, vuoi che questo gradiente sia appena percettibile, quasi inconscio.

Come hai già detto, quando si progettano pulsanti piatti è necessario tenere d'occhio un paio di cose. Il primo è, direi: sembra un pulsante?

Questo non è necessariamente qualcosa che dipende solo dal pulsante, ma dal resto degli elementi dell'interfaccia utente. Se stai usando pulsanti piatti, ti suggerirei di evitare forme / stili simili ovunque. Devi mantenere un vocabolario visivo in modo che le persone possano riconoscere immediatamente questi elementi come pulsanti e non qualcos'altro.

Le ombre sono buone per questo, perché danno un'impressione di volume. Pertanto, sono più facili da vedere. Inoltre, siamo abituati ai pulsanti che hanno quell'effetto. Considererei comunque l'uso di un colore simile al colore del pulsante. Ad esempio, invece di utilizzare il nero per il pulsante rosso, utilizzare un rosso con un'opacità del 50%. Un'altra opzione per rendere più evidenti i pulsanti è l'aggiunta di un'icona (bianca, fissa).

Starei molto attento alle pendenze . Non perché sono cattivi, ma perché nell'attuale tendenza piatta super semplice, non si adattano così bene. Soprattutto se i colori o le sfumature che usi sono molto diversi. Una piccola pendenza può sembrare davvero bella, ma deve essere minuscola, appena percettibile.

In breve, mi piace il loro aspetto. Vorrei solo cambiare il colore dell'ombra in qualcosa di più chiaro, e forse renderei più chiaro anche il testo in primo piano, probabilmente il bianco. Il carattere è carino e stai usando una buona imbottitura, quindi un bel lavoro! Vedo che li stai usando nel sito, ma sotto di essi hai una serie di notifiche in colori pastello che in realtà sembrano un po 'simili. Riconsidererei il loro stile, in quanto possono essere un po 'confusi, e proverei a usare gli stessi colori in tutto il sito (tutti i pastelli o tutti i contrasti).

Mentre posso rispettare la creazione di pulsanti così minimali, devi davvero considerare se / come possono essere applicati sul Web su siti Web diversi, mentre stai creando un framework. Se stai fornendo pulsanti devi assicurarti di fornire praticamente tutto ciò che qualcuno potrebbe usare come tabelle, moduli, ecc. (Sono sicuro che stai ancora lavorando).

Dai un'occhiata a Bootstrap se non l'hai già fatto. Bootstrap è un framework CSS meravigliosamente semplice e pulito che può essere facilmente adattato o integrato in un altro sito Web e potrebbe darti alcune idee.

Ora, per quanto riguarda questi pulsanti effettivi, giocherei con un bordo, poiché questo aiuta a incapsulare il componente e un bordo è abbastanza comune per molti pulsanti. Ho controllato il sito Web e mi piacciono gli stati hover / click e penso che tu abbia fatto bene con quelli.

Se vuoi introdurre gradienti, sii coerente e assicurati di usarli anche su altri elementi, altrimenti avrai profondità in competizione che ti distrarranno.

I pulsanti hanno un bell'aspetto, tuttavia il tipo di pulsanti che mostrano convenienza e sensazione nello stile piatto generale è una volta in cui la parte in ombra è posizionata è una piccola striscia nella parte inferiore dell'elemento principale (pulsante) ed è principalmente una tonalità più scura del colore pulsante.