Med dagens nuvarande designtrender anser jag att uppmärksamhet på detaljer är kanske den viktigaste delen av en design, vare sig den är webb eller utskrift.
I den här artikeln kommer jag att visa några exempel på mönster på webben som saknar den lilla detalj som skulle göra webbplatserna till en mycket trevligare plats att utforska.
varning
? Jag säger inte alls att jag är perfekt?Jag måste påpeka att jag inte kritiserar någonting någon har gjort tidigare, jag berättar bara vad jag skulle göra för att göra designen mer detaljerad och en bättre upplevelse för användaren när de använder webbplatsen. Jag säger inte alls att jag är perfekt, jag lär mig fortfarande och dessa tekniker kanske inte ens är de absoluta bästa korrigeringar, men lite beröring här eller där visar att du har gjort ansträngningar för att göra webbplatsen så bra som du tror att det kan vara!
Till exempel:
Kommentarer avsnittet Dribbble har inte en maximal bredd så att du kan manipulera utseendet på webbplatsen utan problem. Jag vet att det bara är en liten detalj, men jag tror att uppmärksamhet på detaljer är den viktigaste aspekten av designen.
Gilla artikeln? Var noga med att prenumerera på vårt RSS-flöde och följ oss på Twitter för att hålla dig uppdaterat om det senaste innehållet.
Textområden
Textområden var det första inslaget som fick mitt öga och gav mig en idé att skriva det här inlägget så jag börjar här.
Detta exempel är något ironiskt som det kommer från den populära designdelning webbplats, Dribbble.
Om du går på spelarens skott på webbplatsen ser du en kommentarfält längst ner. Nu eftersom jag är lite av en fiddler, spelar jag alltid med element på webbplatser när jag först upptäcker dem och jag märkte att jag kunde bryta? den här:
Fixen
Med textarea element, den bästa praxisen är att använda min / max-bredd & min / max-höjd. Koden som för närvarande används är:
Jag skulle konvertera detta till:
Den här koden håller sedan bredden på kommentarfältet fast vid 424px hela tiden men tillåter användaren att öka höjden på lådan beroende på hur mycket de skriver in där.
Tack till Chris Allwood som ledde mig till "Textarea Tricks" inlägg av Chris Coyier av CSS Tricks på textarea element på de olika sakerna du kan göra för att manipulera det.
Hover & Active States on Links
Höger och aktiva stater är förmodligen den enklaste bit av detalj och funktionalitet som du kan lägga till i en design.
När det gäller länkar ändrar designers vanligtvis färgen på svävaren, lägger till en understruken eller gör den djärv. Att använda dessa enkla tekniker kommer att vara en bra passform för vissa konstruktioner men det finns några andra detaljer som jag inte tycker brukar vara tillräckligt ofta.
Fixen
Indrag från vänster:
Lägga till en bakgrund:
Tryck ner på klicka:
Bonus Tips
Alla detaljer som jag nämnde ovan kan göras någonsin så lite trevligare med användningen av CSS3-övergångar. Jag använder ofta följande kod för att animera effekten något vilket är en trevlig detalj:
Det finns ett antal olika variabler som du kan använda, det här är bara den huvudsakliga egenskapen jag använder regelbundet. NetTuts + har en bra artikel om grundläggande CSS3-övergångar som är mycket användbar.
Om du verkligen vill gå hela hogen, rekommenderar jag att du kolla Dan Edens Animate.css. Jag använde den på Cardinal Menswear och tycker att det är en stor skillnad i upplevelsen när man tittar på webbplatsen.
Se upp för negativa stater
När designers använder negativa sväva och aktiva stater.
Harry Roberts från CSS Wizardry skrev en artikel om negativa hovers 2011 som fick mig att tänka på några av de detaljer som jag hade sökt på webbplatser jag tidigare har arbetat med. Jag insåg att jag var skyldig i att skapa en: länk med en understrukning och sedan vidare: svävar jag skulle ta bort den understruken och efter att ha läst Harrys artikel så visade det mig att detta kan vara förvirrande för en besökare.
Text & bildval Färg
Trots att det här är en mycket liten detalj är det super lätt att göra så jag tror alltid att det visar designern bryr sig när han / hon lägger till denna bit kod för de personer som kommer att märka och uppskatta det.
Fixen
Slutsats
Jag hoppas att du har lärt mig ett knep eller två från den här artikeln, jag kommer verkligen att hålla ögonen på nya, små detaljer som jag kan tillämpa på mina mönster i framtiden.
Har du några tips eller tricks som du tycker jag har missat eller borde överväga att använda? Vi lär oss alltid som designers och jag tycker att det är viktigt att hålla varandra på tårna så att användarna på våra webbplatser får bästa möjliga upplevelse!
Vänligen, lämna en kommentar nedan med några förslag till koduttag som du har använt i dina mönster.