Интеграция дизайна

37,321 views

Published on

Презентация с Dribbble Meetup 2013

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
37,321
On SlideShare
0
From Embeds
0
Number of Embeds
34,329
Actions
Shares
0
Downloads
61
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Интеграция дизайна

  1. 1. По ту сторону дрибббла:между дизайнерами и разработчикамиЕвгений Беляев@30PP0Дизайнер, Mail.Ru
  2. 2. Макет (psd)
  3. 3. Реализованное приложение
  4. 4. ?
  5. 5. Криворукие программисты!
  6. 6. Плохо составленнаяспецификация дизайна (ТЗ)
  7. 7. Спецификация дизайна (ТЗ) Metrics Fonts Res- размеры - размеры - ресурсы графики- отступы - начертания- цвета эл-тов - цвета и PS-стили - межстрочный интервал
  8. 8. metrics fonts resПристальное внимание надо уделитьинтеграции дизайна, т.к. именно это видитна экране своего устройства конечныйпользователь продукта, а не макеты дизайнера
  9. 9. Мобильные платформы Samsung WindowsAndroid iOS bada Phone
  10. 10. Android
  11. 11. Нельзя просто так взять и интегрировать вашдизайн приложения под андроид
  12. 12. Экран смартфона:- разрешение плотность экрана- диагональ dip (dots per inch)Категории плотности экрана:- ldpi (240x320)- mdpi (320x480)- hdpi (480x800)- xhdpi (720x1280)- xxhdpi (1080x1920)
  13. 13. Density-independent pixel (dp)1 dp = 1 px для экранов с плотностью 160 dpi (mdpi)- ldpi (0.75x)- mdpi (x)- hdpi (1.5x)- xhdpi (2x)
  14. 14. metrics
  15. 15. Metrics
  16. 16. Metrics xhdpi: 1 dp = 2 px image size: 50% 1 dp = 1 px
  17. 17. PNG EXPRESS (pngexpress.com)
  18. 18. PNG EXPRESS1. 2. 3.1 dp = 1 px
  19. 19. PNG EXPRESS1. 2. 3.1 dp = 1 px
  20. 20. fonts
  21. 21. Fonts
  22. 22. FontsScale-independent pixels (sp) 1 sp = 1 dpSP учитывает настройки размера шрифта , которыепользователь выбрал для операционной системы
  23. 23. PNG EXPRESS1. 2. 3.1 dp = 1 px
  24. 24. res
  25. 25. Res
  26. 26. Cut&Slice me (cutandslice.me)
  27. 27. Cut&Slice me1. 2. 3. 4.xhdpi
  28. 28. Res button.png
  29. 29. Res button.png button.9.png
  30. 30. Nine Patch Editor
  31. 31. Nine Patch Editor “Тянется” по горизотали “Тянется” по вертикали Контент Контент
  32. 32. Теперь мы умеем интегрировать дизайн под андроид!
  33. 33. iOS
  34. 34. Экран iPhone:- Retina (iPhone 4, 5)- не Retina (iPhone 3GS)
  35. 35. metrics
  36. 36. Metrics
  37. 37. Metrics retina не retina image size: 50%
  38. 38. PNG EXPRESS (pngexpress.com)
  39. 39. PNG EXPRESS1. 2. 3.не retina
  40. 40. fonts
  41. 41. Fonts
  42. 42. PNG EXPRESS1. 2. 3.не retina
  43. 43. res
  44. 44. Res retina excel@2x.png не retina excel.png
  45. 45. Cut&Slice me (cutandslice.me)
  46. 46. Cut&Slice me1. 2. 3. 4.retina
  47. 47. Samsung bada 2.0 Помним, скорбим...
  48. 48. WindowsPhone
  49. 49. Экран WP-устройств:- WVGA 480x800 15:9- WXGA 768x1280 15:9- 720p 720x1280 16:9
  50. 50. metrics
  51. 51. Metrics
  52. 52. PNG EXPRESS1. 2. 3.WVGA
  53. 53. fonts
  54. 54. Fonts
  55. 55. PNG EXPRESS1. 2. 3. `WVGA
  56. 56. res
  57. 57. Res
  58. 58. Cut&Slice me1. 2. 3. 4.WVGA
  59. 59. Metrics WVGA (480x800) WXGA (768x1280) image size: 160%
  60. 60. Cut&Slice me1. 2. 3. 4.WXGA
  61. 61. Спасибо за внимание!Вопросы?Евгений Беляев@30PP0Дизайнер, Mail.Ru

×