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

Всем привет.

Недавно получил заказ на полный Интернет-ребрендинг одной компании. В числе всего прочего заказчик заказал отдельные шаблоны страниц под мобильные устройства. Я давно занимаюсь веб-дизайном и рекламой в Интернете, но как-то все складывалось, что 99% заказов не касались мобильных девайсов. 1% - это заказы макетов под конкретную ОС и конкретное разрешение экрана. Здесь же стоит задача создать типы страниц под все популярные мобильные устройства.

Погуглив, я нашел множество мобильных разрешений: 320х240, 320х480, 480х360, 480х800, 640х960 и пр. Возникает вопрос: как в дизайне строить работу? Надо ли подстраиваться под какое-то конкретное разрешение?

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

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

ga2team

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

заказчик заказал отдельные шаблоны страниц под мобильные устройства

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

alpet, а я о чем, что вы можете нарисовать макеты, но это не значит что оно будет соответствовать реальности
Цитата:

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

Тут не дизайнеров надо спрашивать, а верстальщиков что делают адаптивные дизайны..

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

Тут не дизайнеров надо спрашивать, а верстальщиков что делают адаптивные дизайны..

И пусть верстальщики от балды скрывают блоки, изменяют положение, размеры, шрифты?

alpet, адаптивный дизайн/верстка, уже довольного много на эту тему написано. Рекомендую на хабре поискать, там есть хорошие материалы.

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

byvaet, на размеры. На физические.

Вот ссылки, может помогут, хоть там не о сайтах, а о приложениях:
посилання
посилання

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

Вот ссылки, может помогут, хоть там не о сайтах, а о приложениях

Спасибо, изучу.

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

Рекомендую на хабре поискать

Там смотрел. Но там действительно про верстку написано. Возможно, мало искал, продолжу.

alpet, хм. Мне кажется что-то там таки было посилання

Это касается верстки, но это не часть верстки. Чтобы нарисовать адаптивный дизайн, нужно понимать как этот дизайн будет верстаться. И тут действует принцип - mobile first. Т.е начинаете с самого маленького разрешения.

Цитата ("art-apple"):

Это касается верстки, но это не часть верстки. Чтобы нарисовать адаптивный дизайн, нужно понимать как этот дизайн будет верстаться. И тут действует принцип - mobile first. Т.е начинаете с самого маленького разрешения.

Это настолько НЕ правильно, что даже не удержалась - прокомментирую.

Есть определенные сетки (Bootstrap, Skeleton и т.д.) Вы берете их и учитывая построение под будущий фреймворк начинаете отрисовку с САЙТА. Мобильная версия делается уже по мотивам и принципиально по другим правилам. Начинать с нее нельзя.

ТС, посмотрите Smashing Magazine на тему adaptive (responsive) design - там не очень много, но толково.

alpet, посилання вот все известные размеры
Сначала надо нарисовать основной дизайн сайта
Потом решить какие модули будут оставаться в мобильной версии. Все или нет.
Например, если в шапке идет графика, ее можно опустить в мобильной версии...
Если дизайн респонсивный, то элементы подстраиваются под любой экран, верстка в %
Меню обычно верхнее сворачивается. И все идет одно за другим.
Рисуется версия на самый большой экран, потом при необходимости на средний и маленький.
Максимум что может измениться - это колонки 1 или 2 и размеры...
Масштабирование...Учитывайте что кликают пальцем а не мышкой (почитайте по физическую область нажатия для пальца)...
Упростите дизайн, удалите не нужные градиенты и эффекты.
По факту - мне присылали инструкцию как-то и просили рисовать обычный дизайн на 960 пикселей, сказав что это вполне подойдет для верстки на мобильные устройства...

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

Есть определенные сетки (Bootstrap, Skeleton и т.д.) Вы берете их и учитывая построение под будущий фреймворк начинаете отрисовку с САЙТА. Мобильная версия делается уже по мотивам и принципиально по другим правилам. Начинать с нее нельзя.

Если вы имеете ввиду адаптивный дизайн, то:
Цитата ("Mariya_web"):

Это настолько НЕ правильно

Неоднократно и в разных источниках встречал рекомендации и даже правило mobile first. Мотив очень прост - при наименьшем размере экрана требуется показать только самое необходимое. А значит все остальное, дополнительное уже может появляться в больших размерах (или нет). А если мы сначала разработали на большой экран, ничем себя не стесняя, то в процессе сокращения будут возникать вопросы что убрать, что оставить, что главное и тут вот может начаться переосмысление и переработка уже полноразмерной версии. Преемственность же должна быть.

Bootstrap и тд - это фреймворки. Фреймворк не всегда нужен, адаптивные сайты начали делать еще до появления этих фреймворков. И поверьте вы можете на такие грабли наткнуться при разработке сайта с адаптивным дизайном, что придется все переделать, потому что нужно действовать по принципу mobile first. Так легче, поверьте.

Вывод один - чем проще, тем лучше. Ничего лишнего.

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

Неоднократно и в разных источниках встречал рекомендации и даже правило mobile first. Мотив очень прост - при наименьшем размере экрана требуется показать только самое необходимое. А значит все остальное, дополнительное уже может появляться в больших размерах (или нет). А если мы сначала разработали на большой экран, ничем себя не стесняя, то в процессе сокращения будут возникать вопросы что убрать, что оставить, что главное и тут вот может начаться переосмысление и переработка уже полноразмерной версии. Преемственность же должна быть.

Попробую пояснить: по требованиям ТЗ и т.д. разрабатывается полномасштабная версия. Далее идем с этим готовым макетом к разработчикам и заказчику и все вместе решаем что и как останется в мобильной версии. Делаем мобильную версию.
Все это делается по сеткам фреймворка, который был изначально определен для разработки. That's life.

Рекомендации - это хорошо, но у меня уже 6 полномасштабных проектов именно адаптивного дизайна и все они проходили и вполне успешно внедрялись именно таким макаром. Преемственность ВСЕГДА была от большего к меньшему, естественно с учетом специфики платформ (и необходимыми корректировками). Не соответствует классическим рекомендациям, но тем не менее прекрасно работает.
возможно, это связано с тем, что мобильная версия почти всегда шла как саппортивная и основные функции возлагались на Web, но для дизайнера всегда большее впереди. UX - проектировщики работают по-разному.

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

К сожалению или к счастью, при живом девелопменте классические рекомендации не работают. И кто бы что не говорил, но дизайн сейчас зависит напрямую от фреймворка и обще - теоретические рекомендацию могут касаться только общих моментов (эргономика элементов, преемственность нативных контролов и т.д.)
Это в том случае, если ТС нужен именно практический навык и подход. Нужны классические практики - тогда да mobile first, но готовьтесь к многочисленным переделкам.

Mariya_web, а рекомендуют, видимо, ребята которые никогда ничего не разрабатывали? Интересно.
Что-то мне подсказывает, что у них много больше, чем 6 проектов за плечами.

frig, Не совсем. Рекомендации как правило описывают общие случаи.
Даже если мы посмотрим на описание Best Practices на том же Bootstrap сайте - очень многие конкретные примеры описывают именно такой подход, который в моем предыдущем посте.
Классика идет, как правило, либо для редизайна и целенаправленного добавления мобильной версии к уже существующей, либо для тех случаев, когда мобильная версия является основной, например есть интересный сайт для вызова и отслеживания такси в Брюсселе. Они сразу ставили на мобильные устройства? но нативное приложение делать не хотели и для Web-версии делали только ознакомительный landing.
Для магазинов, сайтов-визиток, каталогов и прочих комплексных вещей идет Web First.

Ещё раз: все зависит от специфики. Рекомендации носят в основном общий характер.