Как дизайнеру делать адаптивные сайты?

Question

[Александр Камолов]

-Как делать адаптивный дизайн непосредственно самому дизайнеру?
-Каким образом подстраивается сайт под разрешение экрана?
-Нужно ли делать дизайн под несколько разрешений экрана или это работа верстальщика/программиста?
По адаптивному дизайну поисковики выдают в основном как это в коде делается или в вёрстке.

Answer 1

[Александр Вульф]

В идеале делается так:
1 дизайн, который сможет тянуться на любую ширину. Включается, если ширина > 1920px.
1 дизайн для широких экранов 1024 <= x <= 1920, где x - ширина экрана.
1 дизайн для мелких экранов 512 <= x < 1024 (часто опускают)
1 для планшетов
1 для телефонов

Обычно, это одинаковые дизайны, только чуть подправленные. Но у каждого есть свои наработки и идеи по реализации адаптивного дизайна.

Comments

[Сергей]

для мелких экранов и планшетов это одно и тоже уже -) даже некоторые телефоны под мелкие экраны попадают.

[Lex Fradski]

UDAV99: ни в коем случае. Есть tap, а есть click. Это два абсолютно разных сценария.

[Александр Вульф]

Lex Fradski дело говорит :)

[Nashev]

Не забываем ещё версию для печати!

Answer 2

[Сергей Варначев]

Макетов делается столько, сколько нужно в зависимости от каждого конкретного дизайна (дизайнера) и ТЗ.
Каждый дополнительный макет +/- разрешении создается в случае, когда элементы UI, сетка и т.п. выходит за рамки простого "растягивания" и таким образом поведение элементов на странице невозможно "предугадать" на этапе версте. Поэтому скорее всего fron-end разработчик создаст простые правила по которым ваш дизайна будет просто растягиваться в нужном диапазоне.
Поэтому например, если будущий сайт должен "хорошо смотреться" в диапазоне разрешений от 320 до 1920px и нет строгих требований к его адаптивности (прим. ниже 960px у нас сенсоры, и UI должен быть соответствующим), дизайнер в праве сам решать на каком разрешении понадобиться новый макет, когда кнопка 200x20px, превратится в 200x40px или когда исчезнут дополнительные иконки иллюстрирующие пункты меню и останутся только заголовки.

Comments

[Сергей Варначев]

upd: но обычно дизайнер, который делает множество "промежуточных" макетов вскоре задумывается о том, что не плохо бы самому научиться верстать с 1го своего макета, так как уже имеет представление о его адаптивных особенностях и совсем не хочется создавать кучу по сути дублирующих копий.

[Rodiosha]

А под ретину как-то специально нужно увеличенные картинки?

Answer 3

[igrokodin]

Думаю, что сущность веб-дизайнера с каждым днем все больше и больше склоняется к специалисту по интерфейсам. Т.е. дизайн веб сайта зачастую - это просто интерфейс, который уже лучше не рисовать в фотошопе, но использовать другие инструменты.

Comments

[Александр Камолов]

Какие?

[ppskmg]

Александр Камолов: bohemiancoding.com/sketch яркий тому пример ps очень классный инструмент после пары месяцев работы в скетче фотошоп для дизайна макетов уж очень не приспособлен ) минусы: только под мак и приходится макеты со скетча в фотошоп переносить для верстальщика (примерно 40 минут на лендинг в 10 экранов)

Answer 4

[Лучник *range attack +10*]

1. Узнаете размеры и поведение сетки, которую использует верстальщик. Например, какая на каком разрешении дисплея ширина одной колонки.
   
2. Делаете несколько соответствующих шаблонов в фотошопе, расставив направляющие и настроив сетку в фотошопе.
   
3. Разрабатывате дизайн, придерживаясь размеров сетки.
   

Comments

[Сергей Варначев]

Если только у верстальщик уже есть сетка и вы с ним в принципе как-то взаимодействуете. А если это фриланс, от дизайнера нужен только макет который он "в живую" возможно никогда не увидит.

[Артем Поклад]

Не с той стороны зашли батенька.
Сетку бутстрапа раскладываем на этапе дизайна и верстальщика тычем в нее нужным местом.