Responsive icons
11
Click here to load reader
description
Slides prepared for 9th Usability Meetup in Linz. Short overview about responsive icons. Pros and Cons
Transcript of Responsive icons
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Responsive Icons‣What, why and how …
‣ Pros and Cons … !
‣ Presentation for 9th Usability Meetup in Linz - 2014/09/15
in brief …
Responsive Icons
2
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Responsive Icons
Responsive icons are scalable iconography prototypes that allow to display different sizes of the same icons on discrete devices such as laptop, Smart phone and tablet.
3
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Why …
The concept interrogates the varying complexity of symbols used on devices, and aims to find the perfect balance of simplicity in relation to screen size.” – Joe Harrison
4
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
How it works …
5
http://www.responsiveicons.co.uk
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
How it works …
◣CSS based: Responsive Iconography
6
http://cikonss.zzapwebdesign.com
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
How it works …
◣SVG and Javascript: Responsive SVG
7
http://tutsplus.github.io/Responsive-Iconography/responsive-svg/index.html
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Responsive Icons
◣Drawbacks ◣Risk of confusing users by presenting significantly different icons
across experiences
◣Increased amount of work for icon designers due to the need to design multiple versions of each icon
◣Potential for abuse and increase in page size
◣Benefits ◣More fine-grained control for designers over icons at different sizes
◣Icons optimized for different grid sizes on different devices such as Android, Windows Phone, and iOS
◣Aesthetic consistency of icons at different sizes through visual rather than mathematical scaling
8
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Smart Icons
◣Iconic (KickStarter project) https://useiconic.com - Joe Harrison [Waybury] ◣SVG based - dynamic smart, contextual icons ◣
9
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Responsive Icons
◣Open Discussion ◣Icons should ◣be clear and easy to perceive ◣intuitive ◣transport consistent meaning
◣Why do we need responsive icons thus? ◣Effects on UX ◣Responsive Icons in ◣Web pages / Web apps / Native Apps ◣Other applications
10
UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: [email protected]
Responsive Icons
◣Links ◣http://knowkalpesh.in/index.php/blog/responsive-
icons-breaking-territory-of-iconography#.VBVA4Evzqcc ◣https://useiconic.com/ ◣http://blog.iconfinder.com/do-we-really-need-
responsive-icons/ ◣http://thenounproject.com/term/responsive-design/
18986/ ◣http://cikonss.zzapwebdesign.com
11
