Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive icons

723 views

Published on

Slides prepared for 9th Usability Meetup in Linz.

Short overview about responsive icons.

Pros and Cons

Published in: Design
  • Be the first to comment

Responsive icons

  1. 1. Responsive Icons ‣ What, why and how … ‣ Pros and Cons … ! ‣ Presentation for 9th Usability Meetup in Linz - 2014/09/15 UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
  2. 2. Responsive Icons in brief … 2
  3. 3. 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. UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 3
  4. 4. 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 UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 4
  5. 5. How it works … http://www.responsiveicons.co.uk UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 5
  6. 6. How it works … ◣CSS based: Responsive Iconography http://cikonss.zzapwebdesign.com UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 6
  7. 7. How it works … ◣SVG and Javascript: Responsive SVG 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: thomas.grill@uxfocus.at 7
  8. 8. 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 UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 8
  9. 9. Smart Icons ◣Iconic (KickStarter project) https://useiconic.com - Joe Harrison [Waybury] ◣SVG based - dynamic smart, contextual icons ◣ UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 9
  10. 10. 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 UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 10
  11. 11. 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 UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at 11

×