Share
Ci sono mille modi per progettare e creare pulsanti oggi e hai solo bisogno di dedicare un po 'di tempo a guardare attraverso il lavoro sul dribbble per avere un'idea di loro. Gran parte di questi esempi sono esattamente gli stessi, ma occasionalmente ci sono pochi che sentono di aver avuto un po 'più di cura e attenzione nel loro fare.
Sfruttando le meravigliose nuove proprietà CSS3, possiamo creare alcuni stili di pulsanti incredibilmente eleganti ed eleganti senza il minimo di un'immagine e avere stili di fallback perfettamente adeguati per i browser più vecchi. Potresti voler creare i tuoi pulsanti direttamente in CSS, o ti piacerebbe dirigersi verso il tuo strumento di layout preferito, ma è importante pensare attentamente a come il design del tuo pulsante vive nel contesto.
È fin troppo facile raggiungere semplicemente un "UI Elements PSD" pre-progettato che qualche anima generosa ha condiviso gratuitamente (e senza dubbio contiene pulsanti ispirati ad Apple). Ma perché non prendersi un momento per valutare se lo stile di un pulsante è appropriato nel contesto del progetto e considerare se c'è spazio per creare qualcosa di un po 'più originale?
Riciclare i pulsanti di qualcun altro va bene, fa risparmiare tempo, ma non c'è nulla di male nel prendere un momento per capire il design e la composizione dei pulsanti (o di qualcun altro) in un piccolo dettaglio. Come sono progettati? Si adattano all'interfaccia / contesto / marchio? C'è un'opportunità per creare qualcosa di unico? I miei pulsanti sono abbastanza prominenti? Ho bisogno di pulsanti primari, secondari, terziari? Differiscono sostanzialmente l'uno dall'altro? Sembrano chiari ?! (Perché no, tutti noi vogliamo disegnare cose interessanti ?!).
Ecco dieci cose semplici e veloci a cui penso sempre quando si progettano i pulsanti. Non ho intenzione di condividere idee su come utilizzare gli effetti di livello in Photoshop ma alcuni principi di progettazione semplici e generali che possono richiedere molto tempo nell'ottimizzare il design dei pulsanti e di altre UI in generale.
È importante che i tuoi pulsanti corrispondano al loro stile contestuale. Ciò potrebbe significare adattarsi con una tavolozza di colori, uno stile grafico o prendere il comando da qualche forma di linee guida o logo del marchio. Forse ci sono alcune forme importanti, trame o stili di design che puoi raccogliere. Forse un logo ha un aspetto circolare e puoi captarlo nei tuoi pulsanti o in altri potenziali inviti all'azione.
Se un'interfaccia utilizza prevalentemente il colore piatto, forse i grandi pulsanti lucidi simili a quelli di Apple non sono la soluzione giusta. Se puoi, cogli l'opportunità di sperimentare l'estensione del marchio all'interfaccia utilizzando le forme, gli effetti, il colore o altre forme di abbellimento appropriate.
Seguendo da sopra, fermati un attimo prima di aprire "UI Elements PSD". È facile da raggiungere per gradazioni, ombre, smussature, ecc. Ma concediti un momento per pensare se è la scelta giusta non solo per abbinare un marchio ma anche l'interfaccia in cui i pulsanti siedono e se hanno bisogno di sentirsi eccessivamente "bottonati".
I pulsanti potrebbero dover sembrare particolarmente a forma di bottone all'interno di un'app e su dispositivi mobili, ad esempio, ma con i siti web forse c'è spazio per fare qualcosa di diverso con i pulsanti o le chiamate all'azione.
Con così tanti design dell'interfaccia ispirati allo stile di Apple OS, in particolare in molti elementi PSI dell'interfaccia utente, i pulsanti possono essere un po 'persi tra gli altri elementi che vengono utilizzati nell'interfaccia utente, diluendo la loro potenza potenzialmente importante. Prova a usare il colore, la dimensione, lo spazio bianco o la tipografia per assicurarti che i pulsanti abbiano il peso visivo di cui hanno bisogno per distinguersi dal resto dell'interfaccia.
In seguito a quanto sopra, se ci sono molti altri elementi dell'interfaccia utente con angoli arrotondati nel tuo progetto, prendi in considerazione l'uso di pulsanti circolari o forse qualche altro cambiamento di forma. Questo potrebbe darti un tocco in più di contrasto che garantisce che le tue importanti chiamate all'azione abbiano l'importanza di cui possono aver bisogno.
Se ti stai sforzando per uno stile ispirato al sistema operativo o stai lavorando con elementi PSD preimpostati, è probabile che gli elementi dell'interfaccia utente siano prevalentemente di forma rettangolare con angoli arrotondati. Prendi in considerazione la possibilità di ridurre il livello di abbellimento su elementi che possono permettersi di sentirsi meno "arruffati".
Ad esempio, menu di selezione personalizzati, controlli segmentati, trigger di menu personalizzati possono essere tutti le stesse forme di angoli arrotondati ma usare meno ombre, bordi, smussi, gradiente o altri effetti può aiutare a ridurre la loro ricchezza e, a sua volta, promuovere gli stili dei pulsanti.
La maggior parte dei pulsanti che vediamo là fuori ha qualche forma di bordo o tratto su di essi. In parole povere, se il tuo pulsante è più scuro dello sfondo su cui si trova, usa un tratto scuro del colore generale del pulsante. Se il contrario è vero, allora prendi un colpo che è una tonalità più scura del colore dello sfondo. Se ti infili con la prima e la usi su uno sfondo più scuro, trovo che può rendere i bordi dei pulsanti un po '"sporchi". L'utilizzo di quest'ultimo può anche aiutare a rendere il tuo pulsante davvero pop. Considero questo un principio di progettazione generale quando si tratta di tratti / bordi nel web design.
Nel corso degli anni ho sempre giurato sulla mia "Legge dell'Ombra". La "Legge delle Ombre" afferma che le ombre cadenti funzionano meglio quando un elemento è più chiaro del suo sfondo. Se un elemento è più scuro del suo sfondo, le ombre di rilascio dovrebbero essere usate in modo molto sottile. Analogamente ai tratti e ai bordi di corrispondenza colori, ritengo che questo sia un principio generale di progettazione applicabile a tutti gli elementi dell'interfaccia utente.
Oltre ad essere un altro piccolo dettaglio che può ulteriormente differenziare i tuoi pulsanti da elementi dell'interfaccia utente simili, l'uso di elementi iconici semplici come le frecce può dare un senso di azione e una piccola disponibilità in merito a ciò che accade quando un utente fa clic.
Ad esempio, una freccia che punta a destra dopo il testo su un pulsante può dare all'utente la sensazione di andare avanti o uscire dalla pagina. Una freccia rivolta verso il basso potrebbe suggerire che alcuni contenuti verranno progressivamente divulgati di seguito, o forse verrà aperta una sorta di menu.
Se stai progettando un'interfaccia in cui sono presenti molte azioni e funzionalità in mostra, potrebbe essere importante stabilire un linguaggio visivo con i pulsanti stabilendo primari, secondari, terziari e potenzialmente più stili.
Prendi in considerazione la possibilità di riservare il colore più forte e più audace per i pulsanti principali e di ridurre progressivamente la forza o la saturazione riducendo l'importanza. Oltre al colore e all'ombra, puoi ridurre le dimensioni, gli spazi bianchi, le dimensioni del testo e il livello di abbellimento per ridurre ulteriormente il peso visivo dei pulsanti non primari.
Questo non è un gioco da ragazzi, ma spesso è considerato qualcosa verso la fine del processo di progettazione. Lavorare sempre attraverso gli stati fondamentali richiesti per i pulsanti per garantire all'utente un feedback sufficiente nel proprio contesto. Gli utenti probabilmente avranno un modello mentale di come un pulsante funziona nel mondo reale mentre lo usano attraverso i suoi vari stati. Alcune semplici modifiche CSS con ombre, bordi e sfumature e simili possono dare all'utente un feedback semplice e un tocco di piacere per gli occhi!
Come designer, avrai tutti il tuo processo personale. Scommetterò un sacco di tempo che può comportare lo spostamento della testa dallo schermo, inclinandola leggermente, strizzando gli occhi e dicendo "Sì, è giusto!". Questo fa parte del divertimento del progettare, naturalmente, i designer di talento tendono a farlo bene, ma penso che sia sempre utile eseguire un po 'di commenti interni, interrogare e ragionare sulle decisioni di progettazione che stai prendendo.
Non c'è nulla di male nel riutilizzare o appoggiarsi a stili e elementi dell'interfaccia utente pre-progettati, possono ovviamente risparmiare un sacco di tempo. Potrebbe anche accadere che qualcuno abbia realizzato pixel perfettamente esattamente quello che stavi cercando e lo stia offrendo gratuitamente. Tuttavia, non penso che ci sia alcun danno nell'avere una comprensione più profonda del processo di progettazione e di creazione di ciò che stai creando e nell'informare le tue decisioni sul design in futuro.
Accentsconagua