1. Т я н е м – п о т я н е м
M A R T D E S I G N
Когда устройств на рынке много,
А в сеть мы ходим через все,
Должно согласье в верстке между ними быть,
Иначе выйдет только мука.
Однажды монитор, планшет и телефон
С контентом сайт взялись отображать
И вместе трое стали открывать.
Из браузеров лезут вон, а сайту все нет ходу!
Задача бы для них казалась и легка,
Но с телефоном тут совсем беда:
Все наложилось, схлопнулось и грузиться так долго...
Что делать с этим – не понять,
А делать надо, вашу мать!
3. Т я н е м – п о т я н е м
M A R T D E S I G N
Привет всем!
Антон Васюнин
Клиент – сайд разработчик
Веб – дизайнер
Максим Логунов
4. Т я н е м – п о т я н е м
M A R T D E S I G N
Разминка
5. Проверка
на адаптивность
Т я н е м – п о т я н е м
M A R T D E S I G N
нет
http://www.officeforlostobjects.com/
http://stevenbanken.nl/index.html
http://www.noringa.ru/
http://www.weylandindustries.com/
http://www.pasman-clinic.ru/
http://lenta.ru/
http://barpeoples.ru/
http://www.friends-bar.ru/
http://www.ikea.com/ru/ru/
http://loftstudio8.ru/
https://www.smsfinance.ru/
http://nsk.2gis.ru/
http://esquire.ru/
http://www.newyorker.com/
почти
http://www.notcot.org/
http://www.knoll.com/
http://www.aquascutum.co.uk/
http://www.lookatme.ru/
http://harmstuff.ru/
http://www.apple.com/ru/
http://2xelliott.co.uk/
да
http://letsyep.com/ru/
http://shindokho.kr/
http://interiordesignmagazine.tumblr.com/
http://enfuzed.com/
http://baguera.eu/clutches/
https://www.opendesk.cc/
http://thexx.info/news/
http://company.alawar.ru/#about
http://www.kian.ru/
http://revision.ru/
http://prototypo.io/
http://www.webdesignmagazine.ru/
http://hverdagsreisen.no/en/kampanjen
6. Т я н е м – п о т я н е м
M A R T D E S I G N
Адаптивность
wtf?
7. Т я н е м – п о т я н е м
M A R T D E S I G N
Носитель /
контент
26. Т я н е м – п о т я н е м
M A R T D E S I G N
Сontent
is a king
=
27. Т я н е м – п о т я н е м
M A R T D E S I G N
Отношения частей
и целого
Формат и форма
Цветовые сочетания
Композиционный связи
28. Т я н е м – п о т я н е м
M A R T D E S I G N
Форма / контрформа
29. Т я н е м – п о т я н е м
M A R T D E S I G N
R R
Форма / контрформа
30. Т я н е м – п о т я н е м
M A R T D E S I G N
R R
Форма / формат
31. Т я н е м – п о т я н е м
M A R T D E S I G N
Отношение цветов
32. Т я н е м – п о т я н е м
M A R T D E S I G N
Rrobert
robert
R
Композиционные связи
33. Т я н е м – п о т я н е м
M A R T D E S I G N
Rrobert
Здрасте, заходите
присаживайтесь
Здрасте, заходите
присаживайтесьЗдрасте, заходите
присаживайтесь
Rrobert
Rrobert
Rrobert
Например
Здрасте, заходите
присаживайтесь
Здрасте, заходите
присаживайтесь
Rrobert
Здрасте, заходите
присаживайтесь
39. Т я н е м – п о т я н е м
M A R T D E S I G N
How?
40. Т я н е м – п о т я н е м
M A R T D E S I G N
Дизайн – это проектирование
сценариев взаимодействия
техническими и графическими
средстваими.
Такой подход включает более широкое
и свободное понимание возможностей
постановки задачи.
41. Т я н е м – п о т я н е м
M A R T D E S I G N
Самое важное в интерактивном
дизайне находится между
дизайн-объектом
и пользователем –
это опыт взаимодействия
с услугой или товаром.
Чем проще и легче
этот опыт возникает,
тем правильнее
все запилено.
42. Т я н е м – п о т я н е м
M A R T D E S I G N
Simple
43. Т я н е м – п о т я н е м
M A R T D E S I G N
Упрощение
http://www.reformat.no/heydays
http://2011.ampersandconf.com/
46. Т я н е м – п о т я н е м
M A R T D E S I G N
Инструменты
проверки
47. Т я н е м – п о т я н е м
M A R T D E S I G N
ami.responsivedesign.is
deviceponsive.com
responsive.is
www.dimensionsapp.com
48. Т я н е м – п о т я н е м
M A R T D E S I G N
www.studiopress.com
quirktools.com
responsive.victorcoulon.fr
49. Т я н е м – п о т я н е м
M A R T D E S I G N
Т я н е м – п о т я н е м
M A R T D E S I G N
Repeat
50. Т я н е м – п о т я н е м
M A R T D E S I G N
1
Адаптивный дизайн —
это изменение структуры
сайта под размеры экрана
51. Т я н е м – п о т я н е м
M A R T D E S I G N
2
Адаптивный дизайн —
развитие идей
«резиновой вёрстки»
и мобильных версий
52. Люди перемещаются между
устройствами и никогда
нельзя сказать, какую
задачу они хотят выполнять
на каком устройстве
Т я н е м – п о т я н е м
M A R T D E S I G N
3
55. Т я н е м – п о т я н е м
M A R T D E S I G N
6
Приложение не заменяет
сайт, а сайт не заменяет
приложение
56. Нельзя делать сайт
под конкретный набор
устройств, потому
что завтра появятся
новые устройства
Т я н е м – п о т я н е м
M A R T D E S I G N
7
57. Т я н е м – п о т я н е м
M A R T D E S I G N
И еще,
кое – что важное
58. Т я н е м – п о т я н е м
M A R T D E S I G N
Дизайн – это умение
скрыть дизайн
59. Т я н е м – п о т я н е м
M A R T D E S I G N
Спасибо
60. Москва
УЛИЦА ОРДЖОНИКИДЗЕ,
ДОМ 11, СТРОЕНИЕ 11, ОФИС №
511
станция метро «Ленинский проспект»
+7 (383) 2091920
Новосибирск
ПРОСПЕКТ КАРЛА МАРКСА
ДОМ 30, ОФИС №
781
станция метро «Студенческая»
martdesign.ru
@martdesignnews
martdesignstudio