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

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

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 "
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. СКЕТЧИ
22. appsketchbook.com/products/responsive-design-sketchbook
24. ПРОТОТИПИРОВАНИЕ
26. divshot.com
29. Трюки
30. Быстрые иконки
31. ☭
32. ☭
33. .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'; }
34. unicode-table.com
35. Быстрый SVG
38. АДАПТАЦИЯ
39. Сетки
41. Breakpoints
42. Ориентированы на устройство
43. /* 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) */ }
44. Ориентированы на дизайн
45. @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) { }
46. Тестирование на устройствах
49. catapulty.com
50. browserstack.com
51. Трюки
52. Постоянная поставка
53. git checkout --orphan gh-pages git add . git commit -a -m "Pages: init" git push origin gh-pages
55. override.css
56. 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; }
57. Модульный override.css
58. override.*.less
59. tin.cr
60. ПОЛИРОВКА
63. Тестирование на retina без retina — about:config — layout.css.devPixelsPerPx — изменить на 2, 4, 1.5 и т.д.
64. ПОСТАВКА
65. Стайлгайд
66. stylifyme.com
67. kaleistyleguide.com
68. Части
71. Контент Скетчи Прототип Адаптация Полировка Поставка
72. stylifyme.com
73. SO WOOOT?
74. Пробуйте новое, находите то, что вам подходит, совершенствуйте свой процесс
75. webplatformtools.org
77. Примеры — xframeworkjs.org — alignedcode.com — tap2help.org — designedinbrowser.com — ...
78. designedinbrowser.com