This is­sue’s panel of ex­perts

Wel­come to that bit of the mag where we learn more about the fea­tured writ­ers and con­trib­u­tors…

Web Designer - - Meta Contributors -

Steven Roberts

Steven is a dig­i­tal cre­ative from Stock­ton-on-tees. He is cur­rently lead­ing UX, De­sign and Fron­tend at Asem­blr.com. Steven has spo­ken at con­fer­ences about CSS an­i­ma­tion this year, so for this is­sue we have got­ten him to share some of his ex­ten­sive knowl­edge with a host of tips and tech­niques.

“While it may seem a lim­ited/lesser tool when it comes to an­i­ma­tion, CSS is ac­tu­ally re­ally pow­er­ful and is ca­pa­ble of pro­duc­ing beau­ti­fully smooth 60fps an­i­ma­tions ”

While it may seem lim­ited or a lesser tool when it comes to an­i­ma­tion, CSS is ac­tu­ally a re­ally pow­er­ful tool and is ca­pa­ble of pro­duc­ing beau­ti­fully smooth 60fps an­i­ma­tions Steven Roberts, Head of UX, Asem­blr.com @match­box­hero10 code­pen.io/match­box­hero

Where to use an­i­ma­tions

An­i­ma­tions can be­come as im­por­tant to your brand as your pri­mary colour or logo. ---------------------------------------------------------------

an­i­mate in­ter­ac­tions for Bet­ter un­der­stand­ing

Sud­den changes to the state of your ap­pli­ca­tion or web­site can be jar­ring and can eas­ily cause con­fu­sion. An­i­mat­ing in­ter­ac­tions is a great way to help the user un­der­stand the change of state. ---------------------------------------------------------------

De­light your users With mem­o­rable ex­pe­ri­ences

An­i­ma­tion can be used to pro­vide de­light­ful ex­pe­ri­ences. You don’t need to go over­board – some­thing small and sub­tle can cre­ate a mem­o­rable ex­pe­ri­ence, which can keep users coming back. ---------------------------------------------------------------

in­form users With Progress in­di­ca­tors

Progress in­di­ca­tors should be an­i­mated to in­form the user that the sys­tem is still re­spond­ing. Users have come to ex­pect im­me­di­ate feed­back; when sub­mit­ting data or load­ing con­tent, a sim­ple spin­ner can be enough to keep their at­ten­tion. ---------------------------------------------------------------

use Per­cent­ages to rep­re­sent Progress

Per­cent­ages when used to rep­re­sent progress are a great place to use an­i­ma­tion. Watch­ing a bar or shape fill up is re­ward­ing; vis­ually rep­re­sent­ing a user’s goal can sub­tly en­cour­age them to com­plete it. ---------------------------------------------------------------

Don’t an­i­mate ev­ery­thing, it’s not needed

It’s im­por­tant to know how and when to use an­i­ma­tion. You don’t want to an­i­mate all the things and cre­ate the mess that Geoc­i­ties or Mys­pace be­came. An­i­ma­tion should be used spar­ingly. ---------------------------------------------------------------

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.