Какой ширины делать исходник psd для дизайна сайта?

Question

[Валентина]

Приветствую!
Сравнительно недавно занимаюсь веб дизайном. Очень много информации, но четкого ответа не нашла.
Дизайн сайта интересует больше для просмотра на мониторе. Какой шириной создавать psd?
Пользуюсь 960 grid экшеном в фотошопе, получаются сайты при просмотре на мониторе узкие, как сделать чтобы они были на всю ширину монитора?

Answer 1

[Максим]

Универсальный вариант - адаптивный дизайн. Но это сложнее.
Выбирайте на основании целевой аудитории.
Т.е. даже если не брать смартфоны - есть множество планшетов и нетбуков. И в зависимости от аудитории нужно примерно представлять как сайт будут использовать.

А вообще вопрос очень философский.

Comments

[Валентина]

Если рисовать адаптивный дизайн, я какой должна макет создать шириной?

[Максим]

Валентина: вы должны нарисовать отдельные версии дизайна под разные разрешения и при этом помнить что верстка на это дело будет одна.
Ну, можно к примеру 3 - 480 в ширину (мобильные), 800 (планшеты), 1200 (пк). Чисто навскидку, погуглите лучше, я сам не дизайнер).
А так же нужно понимать что при макет 480 будет виден при расширении 0 - 799
макет 800 будет актуален для расширения 800 - 1199
макет 1200 для 1200 и до бесконечности

В общем я бы очень советовал пока читать только теорию, и рисовать статичные макеты (или резиновые), адаптив, раз такие вопросы возникают, ещё рано)

[Валентина]

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

[Максим]

Валентина: www.abookapart.com/products/responsive-web-design

Answer 2

[Danil Namaste]

Рисовать под "резиновую" верстку, а не фикс

Comments

[Валентина]

Теперь понимаю, что под "резиновую" верстку надо рисовать, но не знаю как начать. Какой шириной мне надо создавать файл в PSD?

А как вообще правильно делать, когда под "резиновую" верстку рисуют: сначала отрисовать макет для телефона, а потом для комьютера? Два макета делается или сразу только один для компьютера?

[Danil Namaste]

Фиксированная: .wrapper{width:900px};
Резиновая: .wrapper{width:90%}
Адаптивная:
media (max-width: 1220px) {
.wrapper { width: 380px; }
}

media (max-width: 900px) {
.wrapper { width: 325px; }
}

[Валентина]

Данил Загорский: Вы очень здорово написали, в ближайшие дни начну изучать вертску. Но пока я не совсем поняла ваш ответ. Было бы очень мило с вашей стороны пояснить для меня)

[Алим Алибаев]

Валентина: Адаптивный макет рисуется так - сначала нарисуйте под десктоп, потом планшет + нетбук, дальше под мобайл.

[Danil Namaste]

Валентина: width - это ширина.
Когда делаете макет резиновым, то нужно учесть что она будет в %, а не "px".
То есть, логично что блоки сайта должны быть нарисованы в расчете на этот факт (изменения ширины сайта)

[Валентина]

Данил Загорский: теперь стало понятнее, спасибо. А если мне нарисовать НЕ адаптивный, то какой ширины сделать psd макет?
раньше я делала 1024 рх, и контентная часть была 960 рх. Какие сейчас стандарты? А то, когда сверстали мой макет, очень много пустого места получилось по бокам на мониторе. Я что-то не так делаю?

[Валентина]

Алим Алибаев: А я начала для смартфона отрисовывать, значит все надо делать с точностью да наоборот?

[Алим Алибаев]

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

[Валентина]

Алим Алибаев: Вот мне так объяснили, что надо сначала под телефон нарисовать. У меня возникли сомнения. Поэтому и спрашиваю. Вообще наверное, самый главный вопрос каким делать исходник по ширине для обычного сайта, чтобы он не смотрелся, как форум, вконтакте. Не был полосой в 960 рх. А был на весь экран?

[Danil Namaste]

Валентина: у меня вконтакте на ноуте 791px :Р

[Валентина]

Данил Загорский: Это да, я для сравнения просто привела)

[Алим Алибаев]

Валентина: Всё зависит от вёрстки

[Валентина]

Алим Алибаев: Я честно пока что в верстке 0, только учусь. Поэтому не знаю, как определить эту зависимость.

[Алим Алибаев]

Научитесь вёрстке, потом уже будете рисовать и верстать сами. Потом поймёте.

[Валентина]

Алим Алибаев: Я вашим советом воспользуюсь в самое ближайшее время. А вот макет надо уже нарисовать сейчас. Поиски в инете пока не дали мне толкового ответа(