Тянем-потянем

Т я н е м – п о т я н е м

M A R T D E S I G N

Когда устройств на рынке много,А в сеть мы ходим через все,

Должно согласье в верстке между ними быть,Иначе выйдет только мука.

Однажды монитор, планшет и телефонС контентом сайт взялись отображать

И вместе трое стали открывать.Из браузеров лезут вон, а сайту все нет ходу!

Задача бы для них казалась и легка,Но с телефоном тут совсем беда:

Все наложилось, схлопнулось и грузиться так долго...Что делать с этим – не понять,

А делать надо, вашу мать!

08 /09 / 2013 / Студия МартДизайн®широта 54° 99’n / долгота 82° 90’e

ТЯНЕМ ПОТЯНЕМАдаптивный дизайн сайтов

martdesign.ru

Т я н е м – п о т я н е м

M A R T D E S I G N

Привет всем!

Антон ВасюнинКлиент – сайд разработчик

Веб – дизайнер

Максим Логунов

Т я н е м – п о т я н е м

M A R T D E S I G N

Разминка

Проверкана адаптивность

Т я н е м – п о т я н е м

M A R T D E S I G N

нетhttp://www.officeforlostobjects.com/http://stevenbanken.nl/index.htmlhttp://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/#abouthttp://www.kian.ru/http://revision.ru/http://prototypo.io/http://www.webdesignmagazine.ru/http://hverdagsreisen.no/en/kampanjen

Т я н е м – п о т я н е м

M A R T D E S I G N

Адаптивностьwtf?

Т я н е м – п о т я н е м

M A R T D E S I G N

Носитель / контент

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

2009 – 2013

Т я н е м – п о т я н е м

M A R T D E S I G N

История

Т я н е м – п о т я н е м

M A R T D E S I G N

1990-е

РезиноваяВерстка

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Safari

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

2010

In a galaxy far far away...

Т я н е м – п о т я н е м

M A R T D E S I G N

Итого

Т я н е м – п о т я н е м

M A R T D E S I G N

How?

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Сontentis a king

=

Т я н е м – п о т я н е м

M A R T D E S I G N

Отношения частей и целого

Формат и формаЦветовые сочетанияКомпозиционный связи

Т я н е м – п о т я н е м

M A R T D E S I G N

Форма / контрформа

Т я н е м – п о т я н е м

M A R T D E S I G N

R R

Форма / контрформа

Т я н е м – п о т я н е м

M A R T D E S I G N

R R

Форма / формат

Т я н е м – п о т я н е м

M A R T D E S I G N

Отношение цветов

Т я н е м – п о т я н е м

M A R T D E S I G N

R robert robert

R

Композиционные связи

Т я н е м – п о т я н е м

M A R T D E S I G N

R robert

Здрасте, заходите присаживайтесь

Здрасте, заходите присаживайтесьЗдрасте, заходите

присаживайтесь

R robert

R robertR

robert

Например

Здрасте, заходите присаживайтесь

Здрасте, заходите присаживайтесь

R robert

Здрасте, заходите присаживайтесь

http://liquidapsive.com/

http://ony.ru/workhttp://www.defringe.com/http://adayinbigdata.com/http://adrien-heury.net/designers-checklists/index.htmlhttp://www.behance.net/http://www.heikopaiko.com/http://inkandspindle.com/http://www.trask-industries.com/#/homehttp://www.mixd.co.uk/http://www.frankyrizardo.com/http://foodsense.is/http://www.designmadeingermany.de/magazin/5/http://www.fcinq.com/http://www.digitaria.com/http://www.themobileindex.com/

Т я н е м – п о т я н е м

M A R T D E S I G N

Links

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

How?

Т я н е м – п о т я н е м

M A R T D E S I G N

Дизайн – это проектированиесценариев взаимодействиятехническими и графическими средстваими.

Такой подход включает более широкоеи свободное понимание возможностей постановки задачи.

Т я н е м – п о т я н е м

M A R T D E S I G N

Самое важное в интерактивномдизайне находится между дизайн-объектом и пользователем –это опыт взаимодействияс услугой или товаром.

Чем проще и легчеэтот опыт возникает,тем правильнеевсе запилено.

Т я н е м – п о т я н е м

M A R T D E S I G N

Simple

Т я н е м – п о т я н е м

M A R T D E S I G N

Упрощение

http://www.reformat.no/heydays

http://2011.ampersandconf.com/

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Инструментыпроверки

Т я н е м – п о т я н е м

M A R T D E S I G N

ami.responsivedesign.is

deviceponsive.com

responsive.is

www.dimensionsapp.com

Т я н е м – п о т я н е м

M A R T D E S I G N

www.studiopress.com

quirktools.com

responsive.victorcoulon.fr

Т я н е м – п о т я н е м

M A R T D E S I G N

Т я н е м – п о т я н е м

M A R T D E S I G N

Repeat

Т я н е м – п о т я н е м

M A R T D E S I G N

1Адаптивный дизайн — это изменение структуры сайта под размеры экрана

Т я н е м – п о т я н е м

M A R T D E S I G N

2Адаптивный дизайн — развитие идей «резиновой вёрстки» и мобильных версий

Люди перемещаются между устройствами и никогда нельзя сказать, какую задачу они хотят выполнять на каком устройстве

Т я н е м – п о т я н е м

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

6Приложение не заменяет сайт, а сайт не заменяет приложение

Нельзя делать сайт под конкретный набор устройств, потому что завтра появятся новые устройства

Т я н е м – п о т я н е м

M A R T D E S I G N

7

Т я н е м – п о т я н е м

M A R T D E S I G N

И еще,кое – что важное

Т я н е м – п о т я н е м

M A R T D E S I G N

Дизайн – это умениескрыть дизайн

Т я н е м – п о т я н е м

M A R T D E S I G N

Спасибо

МоскваУЛИЦА ОРДЖОНИКИДЗЕ,ДОМ 11, СТРОЕНИЕ 11, ОФИС №511станция метро «Ленинский проспект»+7 (383) 2091920

НовосибирскПРОСПЕКТ К АРЛА МАРКСАДОМ 30, ОФИС №781станция метро «Студенческая»

martdesign.ru

@martdesignnews

martdesignstudio