Designers not only utilize optical tricks for creating readable and well-balanced fonts, but it’s also helpful for designers, who craft user-computer interaction.

1. www.tmasolutions.com
Optical Effects in
User Interfaces

2. Table of Contents
I. Measured and optical size
II. Alignment of different shapes
III. Optical corner rounding
2

3. I. Measured and
optical size
3

4. I. Measured and optical size
4

5. I. Measured and optical size
5

6. I. Measured and optical size
6

7. I. Measured and optical size
7

8. I. Measured and optical size
8

9. I. Measured and optical size
9

10. I. Measured and optical size
10

11. I. Measured and optical size
11

12. I. Measured and optical size
12
Your message Your message

13. I. Measured and optical size
13
Your message Your message

14. I. Measured and optical size
14
Things to remember:
• Optical weight: how human eyes perceive the size and
significance of an object
• Circles, diamonds, triangles, and other non-square shapes need
to be higher and wider
• Areas for icons should have some space reserved for optical
balancing

15. II. Alignment of
different shapes
15

16. 16
II. Alignment of different shapes

17. 17
II. Alignment of different shapes

18. 18
II. Alignment of different shapes

19. 19
II. Alignment of different shapes

20. 20
II. Alignment of different shapes

21. 21
II. Alignment of different shapes

22. 22
II. Alignment of different shapes

23. 23
II. Alignment of different shapes
Send

24. 24
II. Alignment of different shapes
Send

25. 25
II. Alignment of different shapes

26. 26
II. Alignment of different shapes

27. 27
II. Alignment of different shapes

28. 28
II. Alignment of different shapes

29. 29
II. Alignment of different shapes

30. 30
II. Alignment of different shapes

31. 31
II. Alignment of different shapes

32. 32
II. Alignment of different shapes

33. 33
II. Alignment of different shapes

34. 34
II. Alignment of different shapes

35. 35
II. Alignment of different shapes

36. 36
II. Alignment of different shapes

37. 37
II. Alignment of different shapes
Things to remember:
• Shapes with sharp edges should be larger or longer
• Cap-height alignment is an effective method of positioning
button names on button backgrounds
• Encircle the triangular icon and align the circle with the button
background.

38. III. Optical
corner rounding
38

39. III. Optical corner rounding
39

40. III. Optical corner rounding
40

41. III. Optical corner rounding
41

42. III. Optical corner rounding
42

43. III. Optical corner rounding
43

44. III. Optical corner rounding
44

45. III. Optical corner rounding
45

46. III. Optical corner rounding
46

47. III. Optical corner rounding
47

48. III. Optical corner rounding
48

49. III. Optical corner rounding
49

50. III. Optical corner rounding
50

51. III. Optical corner rounding
51

52. III. Optical corner rounding
52

53. III. Optical corner rounding
53
Things to remember:
• Geometrically rounded corners look artificial
• Optically correct corner rounding needs special formulas or
manual adjustment of a shape

54. THANK YOU!
+ 1 802-735-1392
+ 61 414-734-277
+81 3-6432-4994
www.tmasolutions.com
NorthAmerica number:
Australia number:
Japan number:
Website:
+84 8 3997-8000 Ext: 5639
+84 908-676-212
+84 8 3990-3303
sales@tmasolutions.com
Tel:
Mobile:
Fax:
Email: