Con le attuali tendenze del design di oggi, ritengo che l'attenzione ai dettagli sia forse la parte più importante di qualsiasi progetto, sia esso web o stampato.
In questo articolo, mostrerò alcuni esempi di design sul web che mancano di quel minimo dettaglio che renderebbe i siti Web un luogo molto più piacevole da esplorare.
disconoscimento
? In nessun modo sto dicendo che sono perfetto?Devo sottolineare che non sto criticando nulla di ciò che qualcuno ha fatto in passato, sto solo dicendo cosa farei per rendere il design più dettagliato e un'esperienza migliore per l'utente quando usa il sito. In nessun modo sto dicendo che sono perfetto, sto ancora imparando e queste tecniche potrebbero non essere nemmeno le migliori correzioni in assoluto, ma pochi tocchi qui o là mostreranno che hai fatto lo sforzo di rendere il sito buono come pensi che potrebbe essere!
Per esempio:
La sezione commenti di Dribbble non ha una larghezza massima, quindi puoi manipolare l'aspetto del sito web senza problemi. So che è solo un piccolo dettaglio, ma penso che l'attenzione al dettaglio sia l'aspetto più importante del design.
Ti piace l'articolo? Assicurati di iscriverti al nostro feed RSS e seguici su Twitter per rimanere aggiornato sui contenuti recenti.
Aree di testo
Le aree di testo sono state il primo elemento che ha attirato la mia attenzione e mi hanno dato l'idea di scrivere questo post, quindi inizierò qui.
Questo esempio è alquanto ironico in quanto deriva dal famoso sito di condivisione del design, Dribbble.
Se vai sul tiro di qualsiasi giocatore sul sito vedrai una casella di commento in basso. Ora, dato che sono un po 'un violinista, gioco sempre con elementi sui siti web quando li scopro per la prima volta e ho notato che potevo? questo:
La correzione
Con il textarea elemento, la migliore pratica è da usare min / max-width & min / max-height. Il codice attualmente in uso è:
Lo convertirò in:
Questo codice mantiene quindi la larghezza della casella di commento fissata a 424px in ogni momento, ma consente all'utente di aumentare l'altezza della scatola a seconda di quanto scrivono lì.
Grazie a Chris Allwood che mi ha indirizzato al post di "Textarea Tricks" di Chris Coyier di CSS Tricks on the textarea elemento sulle diverse cose che puoi fare per manipolarlo.
Hover e stati attivi sui collegamenti
Il passaggio del mouse e gli stati attivi sono probabilmente il più semplice dettaglio e funzionalità che è possibile aggiungere a un progetto.
Quando si tratta di collegamenti, i designer di solito cambiano il colore al passaggio del mouse, aggiungono una sottolineatura o la rendono in grassetto. L'utilizzo di queste semplici tecniche sarà adatto per alcuni progetti, ma ci sono un paio di altri dettagli che non penso vengano usati abbastanza spesso.
La correzione
Rientro da sinistra:
Aggiungere uno sfondo:
Premere sul clic:
Suggerimento bonus
Tutti i dettagli che ho citato sopra possono essere resi sempre leggermente più piacevoli con l'uso delle transizioni CSS3. Uso spesso il seguente codice per animare leggermente l'effetto, che è un piacevole dettaglio:
Ci sono un certo numero di variabili diverse che puoi usare, questa è solo la proprietà principale che uso regolarmente. NetTuts + ha un buon articolo sulle fondamentali transizioni CSS3 che è molto utile.
Se vuoi davvero fare tutto il resto, ti consiglio di dare un'occhiata a Animate.css di Dan Eden. L'ho usato su Cardinal Menswear e penso che faccia una grande differenza per l'esperienza di visualizzazione del sito.
Attenzione per gli stati negativi
Quando i designer usano il negativo librarsi e attivo stati.
Nel 2011 Harry Roberts of CSS Wizardry ha scritto un articolo su aleggi negativi che mi ha fatto riflettere su alcuni dettagli che avevo applicato ai siti su cui ho lavorato in passato. Mi resi conto che ero colpevole di creare un link: con una sottolineatura e poi su: al passaggio del mouse avrei rimosso quella sottolineatura e dopo aver letto l'articolo di Harry mi venne in mente che questo poteva essere fonte di confusione per un visitatore.
Testo e selezione colore
Anche se questo è un dettaglio molto piccolo, è super facile da fare quindi penso sempre che il designer si preoccupa quando aggiunge questo pezzetto di codice per le persone che lo noteranno e lo apprezzeranno.
La correzione
Conclusione
Spero che tu abbia imparato un trucco o due da questo articolo, certamente terrò d'occhio nuovi, piccoli dettagli che posso applicare ai miei progetti in futuro.
Hai qualche consiglio o suggerimento che pensi di aver perso o che dovresti prendere in considerazione? Stiamo sempre imparando come designer e penso che sia importante tenersi sempre ai nostri piedi in modo che gli utenti dei nostri siti Web ottengano la migliore esperienza possibile!
Per favore, lascia un commento qui sotto con qualsiasi suggerimento per frammenti di codice che hai usato nei tuoi progetti.