Pro Yearly is on sale from $80 to $50! »

Rest in PS: рабочий процесс современного веб-дизайнера

E13498af38db5a5ab97f89fdc500b5af?s=47 Ilya Pukhalski
October 20, 2013

Rest in PS: рабочий процесс современного веб-дизайнера

Еще год назад многие сомневались, что дизайн и прототипировние должно начинаться сразу в браузере. В текущих реалиях это фактически неоспоримо. Слайды на тему сложившегося современного подхода к веб-дизайну: опыт применения, способы, инструменты, трюки и проблемы подхода.

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

October 20, 2013
Tweet

Transcript

  1. REST IN Илья  Пухальский СОВРЕМЕННЫЙ ПОДХОД К ВЕБ-ДИЗАЙНУ

  2. @pukhalski 2 Илья Пухальский, EPAM Mobile Competency Center

  3. ВЕБ-ДИЗАЙНЕР

  4. "The different areas of web design include "web graphic design;

    interface design; "authoring, including standardized code "and proprietary software; user "experience design; and search engine "optimization." Wikipedia, October 2011 "
  5. None
  6. None
  7. None
  8. None
  9. styletil.es

  10. styletil.es

  11. Styleguide должен описывать не только статику, но и динамику

  12. ЧТО ПЛОХОГО В ?

  13. Фотошопить или не фотошопить? — Жесткие рамки ограниченные размером рабочей

    области — PSD статичен — Контент уходит на второй план — Проблемы со шрифтами — Не учитывает возможности браузера — Увеличение объема работы
  14. "Time is a key factor "in productivity" Melanie Lang

  15. Контент Скетчи Прототип Адаптация Полировка Поставка

  16. КОНТЕНТ

  17. Markdown

  18. iA Writer

  19. MD — Простой синтаксис — Переносимый — Легко конвертируемый в

    HTML/PDF/Word/... — Встроен во многие сервисы
  20. СКЕТЧИ

  21. None
  22. appsketchbook.com/products/responsive-design-sketchbook

  23. None
  24. ПРОТОТИПИРОВАНИЕ

  25. None
  26. divshot.com

  27. None
  28. None
  29. Трюки

  30. Быстрые иконки

  31. ☭

  32. .icon { display: inline-block; ! color: inherit; ! border: 0;

    ! background: none; ! font-weight: normal; ! font-style: normal; ! font-family: 'serif'; } .icon:before { ! display: block; ! margin: 0 auto; } .icon-heart:before { content: '\2665'; }
  33. unicode-table.com

  34. Быстрый SVG

  35. None
  36. None
  37. АДАПТАЦИЯ

  38. Сетки

  39. None
  40. Breakpoints

  41. Ориентированы на устройство

  42. /* Mobile styles go first, without media queries. */ @media

    only screen and (min-width: 321px) { /* Larger mobile styles (wider than 320 pixels) */ } @media only screen and (min-width: 600px) { /* Tablet styles (wider than 600 pixels) */ } @media only screen and (min-width: 1024px) { /* Large laptop styles (wider than 1024 pixels) */ } @media only screen and (min-width: 1140px) { /* Desktop styles (wider than 1140 pixels) */ }
  43. Ориентированы на дизайн

  44. @media only screen and (min-width: 1200px) { } @media only

    screen and (min-width: 960px) { } @media only screen and (min-width: 860px) { } @media only screen and (min-width: 740px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 340px) { }
  45. Тестирование на устройствах

  46. None
  47. None
  48. catapulty.com

  49. browserstack.com

  50. Трюки

  51. Постоянная поставка

  52. git checkout --orphan gh-pages git add . git commit -a

    -m "Pages: init" git push origin gh-pages
  53. None
  54. override.css

  55. header { ! text-align: center; } .navbar-header { ! width:

    100%; ! text-align: center; ! float: none; } .navbar-nav, .navbar-nav>li { ! float: none; } .navbar-nav>li { ! display: inline-block; }
  56. Модульный override.css

  57. override.*.less

  58. tin.cr

  59. ПОЛИРОВКА

  60. None
  61. None
  62. Тестирование на retina без retina — about:config — layout.css.devPixelsPerPx —

    изменить на 2, 4, 1.5 и т.д.
  63. ПОСТАВКА

  64. Стайлгайд

  65. stylifyme.com

  66. kaleistyleguide.com

  67. Части

  68. None
  69. None
  70. Контент Скетчи Прототип Адаптация Полировка Поставка

  71. stylifyme.com

  72. SO WOOOT?

  73. Пробуйте новое, находите то, что вам подходит, совершенствуйте свой процесс

  74. webplatformtools.org

  75. None
  76. Примеры — xframeworkjs.org — alignedcode.com — tap2help.org — designedinbrowser.com —

    ...
  77. designedinbrowser.com