“Lillicon: using transient widgets to create scale variations of icons” by Bernstein and Li

Good icons are legible, and legible icons are scale-dependent. Experienced icon designers use a set of common strategies to create legible scale variations of icons, but executing those strategies with current tools can be challenging. In part, this is because many apparent objects, like hairlines formed by negative space, are not explicitly represented as objects in vector drawings. We present transient widgets as a mechanism for selecting and manipulating apparent objects that is independent of the underlying drawing representation. We implement transient widgets using a constraint-based editing framework; demonstrate their utility for performing the kinds of edits most common when producing scale variations of icons; and report qualitative feedback on the system from professional icon designers.

1. Asente, P., Schuster, M., and Pettit, T. 2007. Dynamic planar map illustration. ACM Trans. Graph. 26, 3 (July). Google ScholarDigital Library
2. Baudelaire, P., and Gangnet, M. 1989. Planar maps: An interaction paradigm for graphic design. SIGCHI Bull. 20, SI (Mar.), 313–318. Google ScholarDigital Library
3. Botsch, M., and Sorkine, O. 2008. On linear variational surface deformation methods. IEEE Transactions on Visualization and Computer Graphics 14, 1 (Jan.), 213–230. Google ScholarDigital Library
4. Dalstein, B., Ronfard, R., and van de Panne, M. 2014. Vector graphics complexes. ACM Trans. Graph. 33, 4 (July), 133:1–133:12. Google ScholarDigital Library
5. Gal, R., Sorkine, O., Mitra, N. J., and Cohen-Or, D. 2009. iwires: An analyze-and-edit approach to shape manipulation. ACM Trans. Graph. 28, 3 (July), 33:1–33:10. Google ScholarDigital Library
6. Gleicher, M., and Witkin, A. 1991. Differential manipulation. In Proceedings of Graphics Interface ’91, 61–67.Google Scholar
7. Gleicher, M., and Witkin, A. 1991. Snap together mathematics. In Advances in Object-Oriented Graphics I, E. Blake and P. Wisskirchen, Eds., EurographicSeminars. Springer Berlin Heidelberg, 21–34.Google Scholar
8. Gleicher, M. 1992. Briar: A constraint-based drawing program. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, ACM, New York, NY, USA, CHI ’92, 661–662. Google ScholarDigital Library
9. Gleicher, M. 1994. A Differential Approach to Graphical Interaction. PhD thesis, Carnegie Mellon University. Google ScholarDigital Library
10. Harrison, C., Hsieh, G., Willis, K. D., Forlizzi, J., and Hudson, S. E. 2011. Kineticons: Using iconographic motion in graphical user interface design. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, ACM, New York, NY, USA, CHI ’11, 1999–2008. Google ScholarDigital Library
11. Hersch, R. D., and Betrisey, C. 1991. Model-based matching and hinting of fonts. SIGGRAPH Comput. Graph. 25, 4 (July), 71–80. Google ScholarDigital Library
12. Hsu, S. C., and Lee, I. H. H. 1994. Drawing and animation using skeletal strokes. In Proceedings of the 21st Annual Conference on Computer Graphics and Interactive Techniques, ACM, New York, NY, USA, SIGGRAPH ’94, 109–118. Google ScholarDigital Library
13. Hsu, S. C., Lee, I. H. H., and Wiseman, N. E. 1993. Skeletal strokes. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology, ACM, New York, NY, USA, UIST ’93, 197–206. Google ScholarDigital Library
14. Huang, Q.-x., Mech, R., and Carr, N. A. 2009. Optimizing structure preserving embedded deformation for resizing images and vector art. Computer Graphics Forum 28, 7, 1887–1896.Google ScholarCross Ref
15. Iconic. http://useiconic.com/. Accessed: 2015-01-12.Google Scholar
16. iOS human interface guidelines. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html. Accessed: 2015-01-12.Google Scholar
17. Kopf, J., Shamir, A., and Peers, P. 2013. Content-adaptive image downscaling. ACM Trans. Graph. 32, 6 (Nov.), 173:1–173:8. Google ScholarDigital Library
18. Kraevoy, V., Sheffer, A., Shamir, A., and Cohen-Or, D. 2008. Non-homogeneous resizing of complex models. ACM Trans. Graph. 27, 5 (Dec.), 111:1–111:9. Google ScholarDigital Library
19. Lewis, J. P., Rosenholtz, R., Fong, N., and Neumann, U. 2004. Visualids: Automatic distinctive icons for desktop interfaces. ACM Trans. Graph. 23, 3 (Aug.), 416–423. Google ScholarDigital Library
20. Li, Y., Wu, X., Chrysathou, Y., Sharf, A., Cohen-Or, D., and Mitra, N. J. 2011. Globfit: Consistently fitting primitives by discovering global relations. ACM Trans. Graph. 30, 4 (July), 52:1–52:12. Google ScholarDigital Library
21. Rubinstein, M., Gutierrez, D., Sorkine, O., and Shamir, A. 2010. A comparative study of image retargeting. ACM Trans. Graph. 29, 6 (Dec.), 160:1–160:10. Google ScholarDigital Library
22. Saund, E., and Moran, T. P. 1994. A perceptually-supported sketch editor. In Proceedings of the 7th Annual ACM Symposium on User Interface Software and Technology, ACM, New York, NY, USA, UIST ’94, 175–184. Google ScholarDigital Library
23. Saund, E., Fleet, D., Larner, D., and Mahoney, J. 2003. Perceptually-supported image editing of text and graphics. In Proceedings of the 16th Annual ACM Symposium on User Interface Software and Technology, ACM, New York, NY, USA, UIST ’03, 183–192. Google ScholarDigital Library
24. Setlur, V., and Mackinlay, J. D. 2014. Automatic generation of semantic icon encodings for visualizations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, ACM, New York, NY, USA, CHI ’14, 541–550. Google ScholarDigital Library
25. Setlur, V., Xu, Y., Chen, X., and Gooch, B. 2005. Retargeting vector animation for small displays. In Proceedings of the 4th International Conference on Mobile and Ubiquitous Multimedia, ACM, New York, NY, USA, MUM ’05, 69–77. Google ScholarDigital Library
26. Shamir, A. 2003. Constraint-based approach for automatic hinting of digital typefaces. ACM Trans. Graph. 22, 2 (Apr.), 131–151. Google ScholarDigital Library
27. Shewchuk, J. R. 1996. Triangle: Engineering a 2d quality mesh generator and delaunay triangulator. In Selected papers from the Workshop on Applied Computational Geormetry, Towards Geometric Engineering, Springer-Verlag, London, UK, UK, FCRC ’96/WACG ’96, 203–222. Google ScholarDigital Library
28. Sutherland, I. E. 1964. Sketch pad a man-machine graphical communication system. In Proceedings of the SHARE Design Automation Workshop, ACM, New York, NY, USA, DAC ’64, 6.329–6.346. Google ScholarDigital Library
29. Xu, P., Fu, H., Au, O. K.-C., and Tai, C.-L. 2012. Lazy selection: A scribble-based tool for smart shape elements selection. ACM Trans. Graph. 31, 6 (Nov.), 142:1–142:9. Google ScholarDigital Library
30. Zongker, D. E., Wade, G., and Salesin, D. H. 2000. Example-based hinting of true type fonts. In Proceedings of the 27th Annual Conference on Computer Graphics and Interactive Techniques, ACM Press/Addison-Wesley Publishing Co., New York, NY, USA, SIGGRAPH ’00, 411–416. Google ScholarDigital Library