10 Design Commandments for Mobile App Developers

Editor's Notes

1. Developers. Emphasis.\n
2. \n
3. \n
4. \n
5. \n
6. \n
7. \n
8. \n
9. \n
10. \n
11. \n
12. \n
13. \n
14. \n
15. \n
16. \n
17. \n
18. \n
19. Flow. User Experience.\n
20. I remember about 2-3 weeks back, I was driving back home in my car from a late night party with two other friends – who were both from Advertising backgrounds. It was rather dark and we were barelling down MG Road to Gurgaon. The female friend in the back seat was in “high spirits” :p. Suddenly she jumped up and started pointing at the rear of a car ahead of us going ‘Look! Look! That car is smiling!”. Then she pointed to another car a few minutes later, ‘Look! That one is not too happy. But Its smirking!”. She was making out faces in the rear ends of the cars. The bright red brake lights were eyes and the boot lids were the mouth. And while I sat there shaking my head in amusement and bewilderment, I saw the other two agreeing with each other and seeing the same faces in every car ahead of us. As I squinted and struggled to see a face in what were just rear ends of cars to me. ‘I have done research on cars like this! Its called Non Verbal Communication’ she announced casually. The other two egged me on and described what to look for. And then I saw it. And in the next. Until I saw faces behind every car we overtook. Happy. Sad. Even a trollFace. I saw them all \n\nWe all percive design. But we need someone to describe it to be able to communicate\n
21. Whenever possible. Try and work with specialized Mobile App Designers instead of Visualizers. Visualizers are traditional, web and print guys. Mobile designers take care of minimum hit areas, multiple resolutions, file size etc.\n
22. Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
23. Svg -> scalabale vector graphic -> format of the future -> browsersa are beginning to support svg in html5\nPng -> highest quality , supports transparency\nGif – can contain frames, animations. Not used much now\nJpeg -> when u don’t need transparency n want to save size. Lossy compressions\nVectors -> stored as mathematical formulas, needs lots of CPU. Not good for animations\n
24. \n
25. \n
26. \n
27. \n
28. Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
29. \n
30. \n
31. \n
32. \n
33. \n
34. \n
35. \n
36. \n
37. \n
38. The user needs the perception of control at all times.The power to interrupt and/or abort anytime.\n
39. \n
40. \n
41. \n
42. Web n desktops traditionally -> 72 dpi\nIphone 4 -> 326 ppi . Android devices – 250-300 ppi. Ipad 132 ppi\n\nColor depth -> colr info per pixel\n
43. Eg. Fb in browser on android vs ios. Put thumb on screen while loading. Progress bar stops in iOS n UI responsiveness is max. HTC Desire HD sluggish UI update but progress bar went on. All this happens at a kernel level but key learning is : UI first. Update what u can.\n
44. \n
45. \n
46. \n
47. \n
48. Every framework might have its own.\n
49. Off screen objects/graphics are abstract concepts. But they come in handy sometimes to implent even simple things like flip screens or swipes.\n
50. Simple Send Backwards and Bring to Front becomes Z-Indexing in most frameworks. Objects have a Z-Index. The ones on the top of the stack have a higher Z-Index. And the ones below have lower Z-Indexes.\n\nSometimes Groups of objects can have complicated Layering structures. Watch out.\n
51. Groups let you modularize your design flexibly. Be careful. Some frameworks have Local Coordinate system within groups too. Much source of anguish.\n
52. \n
53. Just the basics!\nFrame is a state in an animation\nTimeline – collection of frames\n\n
54. Playhead – concept. The frame in the animation that is being displayed right now.\nFPS: frames per sec. higher fps, higher cpu.\nKeyframes – most modern softwares these days don’t need you to define every frame. Just defining the frames which have substantial change – keyframe. The software fills in the rest – tween\n
55. Motion tween. Shape tween.\n\nAnimator defines two keyframes and creates a tween. THe software fills in the intermediate transient frames.\n\n
56. Sprite sheets are 2D animations packed as multiple frames into a single texture image. This allows a much more efficient use of texture memory, which is highly limited on mobile devices, and also minimizes loading time.\n
57. \n
58. \n
59. This way you avoid png.\nDrop shadow: shade of light grey of the same text, 5 px down n right\nOutline: text of slightly large size at same location layered below\nGradient: \n
60. Image tiling saves precious file size.\n
61. \n
62. \n
63. \n
64. TG - Target audience. \nBe open to criticism.\nTalk less. Listen More.\nValue negative feedback. Don’t dig for validations.\n
65. \n
66. You never know where your idea goes if you listen to people. And you make less mistakes making assumptions about others.\n\n
67. Give examples about SayWhat app.\n
68. \n
69. \n
70. \n
71. \n
72. \n
73. \n
74. \n
75. \n
76. \n
77. \n
78. \n
79. \n
80. \n
81. \n
82. \n
83. \n
84. \n