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

1. По ту сторону дрибббла:
между дизайнерами и разработчиками
Евгений Беляев
@30PP0
Дизайнер, Mail.Ru

2. Макет (psd)

3. Реализованное
приложение

4. ?

5. Криворукие программисты!

6. Плохо составленная
спецификация дизайна (ТЗ)

7. Спецификация дизайна (ТЗ)
Metrics Fonts Res
- размеры - размеры - ресурсы графики
- отступы - начертания
- цвета эл-тов - цвета и PS-стили
- межстрочный
интервал

8. metrics fonts res
Пристальное внимание надо уделить
интеграции дизайна, т.к. именно это видит
на экране своего устройства конечный
пользователь продукта, а не макеты дизайнера

9. Мобильные платформы
Samsung Windows
Android iOS bada Phone

10. Android

11. Нельзя просто так взять и интегрировать ваш
дизайн приложения под андроид

12. Экран смартфона:
- разрешение плотность экрана
- диагональ dip (dots per inch)
Категории плотности экрана:
- ldpi (240x320)
- mdpi (320x480)
- hdpi (480x800)
- xhdpi (720x1280)
- xxhdpi (1080x1920)

13. Density-independent pixel (dp)
1 dp = 1 px для экранов с плотностью 160 dpi (mdpi)
- ldpi (0.75x)
- mdpi (x)
- hdpi (1.5x)
- xhdpi (2x)

14. metrics

15. Metrics

16. Metrics
xhdpi: 1 dp = 2 px
image size: 50%
1 dp = 1 px

17. PNG EXPRESS (pngexpress.com)

18. PNG EXPRESS
1. 2. 3.
1 dp = 1 px

19. PNG EXPRESS
1. 2. 3.
1 dp = 1 px

20. fonts

21. Fonts

22. Fonts
Scale-independent pixels (sp)
1 sp = 1 dp
SP учитывает настройки размера шрифта , которые
пользователь выбрал для операционной системы

23. PNG EXPRESS
1. 2. 3.
1 dp = 1 px

24. res

25. Res

26. Cut&Slice me (cutandslice.me)

27. Cut&Slice me
1. 2. 3. 4.
xhdpi

28. Res
button.png

29. Res
button.png button.9.png

30. Nine Patch Editor

31. Nine Patch Editor
“Тянется”
по горизотали
“Тянется”
по вертикали Контент
Контент

32. Теперь мы умеем интегрировать
дизайн под андроид!

33. iOS

34. Экран iPhone:
- Retina (iPhone 4, 5)
- не Retina (iPhone 3GS)

35. metrics

36. Metrics

37. Metrics
retina не retina
image size: 50%

38. PNG EXPRESS (pngexpress.com)

39. PNG EXPRESS
1. 2. 3.
не retina

40. fonts

41. Fonts

42. PNG EXPRESS
1. 2. 3.
не retina

43. res

44. Res
retina excel@2x.png
не retina excel.png

45. Cut&Slice me (cutandslice.me)

46. Cut&Slice me
1. 2. 3. 4.
retina

47. Samsung bada 2.0
Помним, скорбим...

48. Windows
Phone

49. Экран WP-устройств:
- WVGA 480x800 15:9
- WXGA 768x1280 15:9
- 720p 720x1280 16:9

50. metrics

51. Metrics

52. PNG EXPRESS
1. 2. 3.
WVGA

53. fonts

54. Fonts

55. PNG EXPRESS
1. 2. 3.
`
WVGA

56. res

57. Res

58. Cut&Slice me
1. 2. 3. 4.
WVGA

59. Metrics
WVGA (480x800) WXGA (768x1280)
image size: 160%

60. Cut&Slice me
1. 2. 3. 4.
WXGA

61. Спасибо за внимание!
Вопросы?
Евгений Беляев
@30PP0
Дизайнер, Mail.Ru