Дизайн под мобильные устройства

frig, art-apple,
А можно, кстати посмотреть на те рекомендации, которые вы приводите в пример? Очень большое подозрение, что они не для дизайнеров, а для разработчиков и архитекторов.
А в данном случае в первом посте я вижу четкий вопрос: под какое разрешение рисовать?
Ответ: рисуется общий mobile breakpoint - 768 по ширине и резиновый по высоте.

Он легче всего превращается как в 970, так и в 480.

Общие рекомендации: иконки в svg, шрифты из Web - подключаемых, общие контроллы (кнопки, чекбоксы) задавать простыми геометрическими примитивамы (можно не в 1 слой), с тем, чтобы их потом можно было реализовать средствами CSS более-менее адекватно.

Если у вас Mac, то обратите внимание на Sketch 3 (ссылка) потрясающая программа, которая позволяет легко создавать интерфейсы и экспортировать затем CSS стили элементов напрямую из макета.

Mariya_web, мне кажется я понимаю о чем речь. Полноразмерная версия считается основной, а все остальные урезанными и второстепенными. Если так подходить, то я согласен, что можно разработать основную, а потом обрезать ее чтобы влазила в экран.
А вот если исходить из того, что доля мобильного трафика непрерывно растет и я считаю (несмотря на то, что у меня и смартфона то нет), что в будущем она превысит объемы трафика со стационарных устройств - все версии должны быть одинаково функциональны и должны позволять в полной мере использовать все функции и это должно быть удобно. Ведь значительная часть посетителей никогда не увидят ваш ресурс с большого экрана. И дело не в типе сайта, человек может использовать интернет в подавляющем количестве случаев с мобильного устройства и точно также посещать магазин или визитку.

Mariya_web, Классический подход как раз таки у вас. Mobile first появился не сразу, а с опытом попадания на грабли. Никто никого не заставляет идти по этому принципу, однако он лучше работает. Вы делаете своим "макаром" и делайте дальше, не нужно твердить что это правильно.
У меня более 6 проектов с адаптивным дизайном за плечами и я с вами не согласен. Вам так удобнее, мне удобнее наоборот.

frig,
Это не к дизайну подход, а скорее к проектированию и архитектуре. ТС и мой ответ касаются дизайна То бишь графики.
Даже просто логически: с точки зрения дизайна, мобильная версия всегда урезанная, но ведь нужно иметь что урезать, не так ли? И вот тут в дело вступает уже interaction, то есть разные интересные анимации элементов, переходов, взаимодействия блоков и т.д.

Тогда надо разобраться что мы вкладываем в понятие дизайна
Если речь о раскраске прототипов, которые разработаны под каждый размер, то можно об адаптивности и не говорить вообще.

frig, Роман, если честно никогда не рисовала мобильные версии, за полной ненадобностью)
Все решалось версткой и стилями. Если я сайт делаю, то ничего не рисую кроме логотипа и отдельных элементов. Все в голове и в стилях...
Я часто недоумеваю зачем рисовать 20 страниц дизайна, если все можно решить 2-мя и набором стилей...

Дизайн и первичная верстка под все устройства и размеры это не так уж и ново и сложно. Вы уточняйте у заказчика, будут ли ресурсы у компании на поддержку всего этого. Очень часто оказывается, что на мобильную версию забивают через несколько пачек правок, и там все рассыпается.

Цитата ("frig"):

Тогда надо разобраться что мы вкладываем в понятие дизайна
Если речь о раскраске прототипов, которые разработаны под каждый размер, то можно об адаптивности и не говорить вообще.

В дизайн входит "визуальное оформление функций", собственно как и всегда.
Именно поэтому (особенно когда речь о полном ребрендинге, как в нашем случае) начинают с разработки общей стилистики и визуального концепта. И вот тут логичнее будет начать с большего.
Поскольку UX - ы (ну или сам дизайнер) должны заранее утвердить варфеймы или прототипы будущего дизайна, то в конечном счете это именно раскраска прототипов и их финальная подгонка под сетку будущего фреймворка

Думаю, уместно, чтобы в этой теме хоть один из отписавшися профи перешёл к конкретике.

К примеру, стоит задача. Разработать адаптивный (в том числе респонсивный) дизайн компании (включая мобильные платформы). Конкретный реализованный пример.
Обычно кто сколько макетов рисует, в каком разрешении и т.д.?

Полагаю, тогда данная тема приобретёт практическую полезность, а не общие теоретические рассуждения.

Oraculum, Я впроде конкретно сказала - не рисую - всегда решаю версткой

Mariya_web, Роман процитировал мои мысли, полностью поддерживаю.

Oraculum,
Согласна.

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

Предусмотреть: как версию для старых мониторов 1024 (px) (Скандинавы - ретрограды, ничего не поделаешь) разрешением (не планшет - там другая эргономика) так и современную полноэкранную вресию 1600 (1920) и т.д.
Версия для планшетов - классика: 1024 и Retina 2048 (статические картинки сразу закладывались под оба разрешения отдельно)
Смартфоны: поскольку, сразу определили, что в основе Bootstrap 2, то взяли 960 пикселей.

Что получилось: ссылка (сейчас в разработке)


Самое сложное: это был Web разумеется, потому если посмотреть на Web - версию, то на стартовой странице есть плавающая часть для широкоформатных мониторов, на которой горячие предложения (барышня на фоне). Эта часть на маленьких мониторах пропадает и информация выводится в качестве java - tooltips при наведении на товары в витрине (блок с фото справа, который кстати тоже просчитан по сетка как в ширину, так и в высоту каждого блока, потому все красиво перестраивается).
Для внутренних страниц выпадающее меню раскрывалось либо поверх основного контента страницы, либо на свободном участке, заполненным фотографией фоном. Часть с каталогом по сути плавающая, в рамках сетки Bootstrap (думала поседею, пока придумаю и просчитаю)

Для планшетов (не путать с 1024 для Web - это были разные брейкпоинты): перерабатывалась навигация главного меню, чтобы быть ближе к нативному управлению для планшетов и хорошо отображалось на планшетах с разными платформами и разрешениями. Уходит боковое меню.

Для телефонов - ну тут классика.

Для всех разрешений предварительно разрабатывались (мной) и утверждались прототипы м предварительными промерами и описанием логики.

В моем случае, очевидно, что начать с мобильного приложения было нельзя. И дизайну тут было - завались. Во всех смыслах, причем.

art-apple, frig, А можно примеры ваших работ?

Цитата ("AlexsimA"):

Oraculum, Я впроде конкретно сказала - не рисую - всегда решаю версткой

Ваш случай отдельный. Вы предоставляете весь комплекс услуг под ключ, насколько я знаю. Разрабатываете всё сами с нуля исходя из своих позиций.
Я же говорил о случае связки. Дизайнер -> Верстальщик -> Программер. То есть каждый делает свою работу.

То есть стоит конкретная задача от заказчика перед дизайнером. Нарисовать адаптивный дизайн, который он (клиент) сможет передать в разработку верстальщикам и программистам.
Что-то я сильно сомневаюсь, что заказчика устроит ответ дизайнера. Я вам нарисую веб-версию (один макет) и дам стили, а всё остальное вы делайте сами, как вам нравится.

Oraculum, Ну так да - когда не я верстаю и одеваю приходится все рисовать)
Хотя я знаю, что обошлась бы малой кровью, но что поделаешь)
на 960 тогда для адаптивной верстки и все - остальное словами)

Цитата ("frig"):

Оффтопик

Цитата ("Mariya_web"):

art-apple, frig, А можно примеры ваших работ?

Ага, особенно мои

Ну рекомендации вы даете на правах человека с опытом live - development. Не обязательно ваш дизайн. Понятно, что не ваша специализация. Можно внедрение. Я так понимаю, что разработчик более -менее в курсе как делался дизайн для сайта.

Цитата ("AlexsimA"):

Oraculum, Ну так да - когда не я верстаю и одеваю приходится все рисовать)
Хотя я знаю, что обошлась бы малой кровью, но что поделаешь)
на 960 тогда для адаптивной верстки и все - остальное словами)

А на чем верстаете?

Цитата ("Oraculum"):

То есть стоит конкретная задача от заказчика перед дизайнером. Нарисовать адаптивный дизайн, который он (клиент) сможет передать в разработку верстальщикам и программистам.

Вот это самое сложное.
Им потом будут нужны (при реально серьезных разработках) не только и не столько исходники и нарезка (кстати её сейчас можно сделать автоматически и по сути дизайн должен делаться так, чтобы её минимизировать, а максимум элементов внедрять программно), а так называемые Red Lines, то есть правила формирования интерфейса (минимальный шаг отсутпов, расстояния между элементами и внутри составных элементов и т.д.), поскольку правила таких интерфейсов они не в абсолютном, а в относительном позиционировании.

Всем давшим конкретные советы и ссылки - спасибо. Тему закрываю, далее началось обсуждение не по теме.