Embed Size (px)
DESCRIPTION
Зачем нужен адаптивный дизайн сайтов.
Citation preview
Т я н е м – п о т я н е м
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
