Как рисовать сайт, который будет верстаться на bootstrap?

Question

[Владимир Соломыкин]

Заметил, что дизайны для обычных сайтов с фиксированным столбцом (960px, 1160px) плохо собираются на bootstrap и в адаптиве себя не совсем корректно ведут. Подскажите, пожалуйста - где можно ознакомиться с тонкостями разработки дизайна именно под бутстрап? Или где посмотреть и разобрать psd-шник для бутстрапа. (Да, гуглил) Заранее спасибо!

Comments

[xmoonlight]

"(Да, гуглил)" - скоро будет у всех спрашивающих, вместо "Заранее, Спасибо!" :)

[Владимир Соломыкин]

xmoonlight: Пардон((( Заранее спасибо!

Answer 1

[Андрей Хохлов]

Дизайнер, который хреначит кривоту без сетки "патамушта так вижу" - не дизайнер, а рисовальщик.
Да, могут быть исключения. Где-то можно местами отойти от сетки. Как правило в таких случаях видно - стоящая компромисса задумка, или чьи-то кривые руки.

Пользуйтесь, дорогие дизайнеры требованиями к макетам.

Собственно сетка это пожалуй единственное, что требуется от бутстрапа при вёрстке по макетам. И она кстати настраивается. А кто херачит целый бутстрап, тот бутстрап-программист.

Comments

[Владимир Соломыкин]

Прочел ваш пост на ГитХабе. Очень многосторонняя и интересная статья. Появилось несколько вопросов (по теме топика и не совсем). Готовы ответить? Например, почему вы настаиваете на "При передаче макетов в архиве использовать .zip формат"?

[Андрей Хохлов]

Владимир Соломыкин: задавайте
Zip потому, что открывается везде. Например чтобы открыть .rar на маке пришлось ставить отдельную программу.
Казалось бы - мелочь, но из мелочей и строится целое.

[Владимир Соломыкин]

Андрей Хохлов: Дальше: "Допустим только режим наложения normal". Разве не проще НЕ сводить (растрировать) слои, чтобы можно было внести некие корректировки "по месту"? Насколько я понимаю - любой верстальщик умеет сохранить для web то, что ему нужно. Так почему нельзя использовать другие режимы наложения?

[Андрей Хохлов]

Владимир Соломыкин: пытаюсь вспомнить реальный случай проблемы с режимом наложения и что-то с трудом. По-моему это был элемент, вроде сложной иконки, который менял свой цвет из-за режима наложения.
То есть я вижу в макете иконку, экспортирую - а она другого цвета. И дальше проблемы, она сложная (допустим с тенью, градиентом, несколькими цветами), просто-так мне Ее не удаётся перекрасить - да и не должен я на неё время тратить.
Ну а внутри экспортируемого целиком объекта - баннера например - можно делать что угодно.

Самый треш что я видел - то ли режим наложения, то ли просто прозрачность, была применена ко всему макету. Видимо заказчик сказал - хочу светлее. А дизайнер "сделяль".
Я беру цвет заголовка из свойства текстового блока - и вижу в вёрстке что он ощутимо так темнее. Не сразу до меня дошла вся глубина замысла...

[Владимир Соломыкин]

Андрей Хохлов: Думаю, это единичный случай. На мой взгляд в Вашей статье этот момент описан словами о состояниях элементов и уточнять на счет наложение - попросту запутывание читателя (как в моем случае). Вы можете что-то посоветовать почитать о mobile-first? Благодарю!

[Андрей Хохлов]

Владимир Соломыкин: судя по упоминаниям в статьях, подобных моей - не единичный) Спасибо за обратную связь, будет время раскрою подробнее этот пункт (да и в целом есть что дописать).
Конкретно по mobile-first не думаю, что буду лучше гугла, скину пару ссылок около темы из закладок, может быть что-то полезное найдете:
https://habrahabr.ru/post/269419/
frontender.info/building-a-better-responsive-website
www.html5rocks.com/en/mobile/responsivedesign
mediaqueri.es

[Владимир Соломыкин]

Андрей Хохлов: Благодарю!

Answer 2

[Денис Букреев]

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

Comments

[iBird Rose]

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

[Денис Букреев]

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

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

[iBird Rose]

Денис Букреев: если уметь пользоваться - все там удобно. вот https://themeforest.net/category/wordpress почти 90% шаблонов там на бутстрап. и ты кажется не правильно понимаешь как должна работать сетка. ее и не должны придерживаться все элементы на сайте. сам каркас сайта должен придерживаться сетки. чтобы все grid отрабатывали правильно при адаптиве.

[Arris]

Денис Букреев: идиотскую сетку бутстрапа можно сделать не в 12 колонок ,а в 24. Или в 36. или в 48. Правда это все равно надо учитывать при построении макета.

[Сергей]

Денис Букреев: Хороший дизайнер и на идиотской бутсраповской сетке сделает крутой дизайн

[vaux]

Сергей: тут проблема в том, что дизайн первичен, а верстка вторична. Почему дизайнер кроме решения проблем заказчика и пользователей должен подстраиваться под конкретный инструмент верстальщика? Инструмент верстки выбирается на основе дизайна, а не дизайн делается под бутстрап и т.д.

[Сергей]

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

[vaux]

Сергей: я никого не описывал. Я лишь написал, что дизайнер должен решать свои задачи, а верстальщик - свои. Меня, как дизайнера, вообще не волнует, чем будет пользоваться верстальщик при верстке макета. Верстальщик либо может сверстать, либо нет. Безусловно, я понимаю аспекты верстки, но требовать от дизайнера придерживаться какой-то определенной сетки - странно.

[Сергей]

vaux: Жаль мне тех, с кем вы работаете. Одного не волнует одно, другого другое. Так и делаются говнопроекты. Вы в команде никогда не работали? У вас слишком фрилансерское мышление когда "Я сделал и мне похер что будет дальше"

[vaux]

Сергей: ну а как еще-то? Абстракция - наше всё. Кстати, жалеть вот уж точно никого не надо. Как и фантазировать насчет моего мышления.

Answer 3

[iBird Rose]

первая ссылка
google.gik-team.com/?q=bootstrap+grid+psd

Answer 4

[xtala zen]

На самом деле бутстрап не прибит гвоздями к полу. Он легко настраивается под нужные размеры макета.На стадии скачивания можете кастомизировать пакет бутстрап под свои размеры очень легко. Подгонять макет под дефолтные размеры бутстрап не нужно и глупо.

Answer 5

[2pa]

Bootstrap, для верстальщиков, которые сами ничего не могут

Answer 6

[Владислав Старцев]

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

P.S.: Если верстальщик говорит, что макет не подходит для верстки используя Bootstrap, то либо пусть не использует Bootstrap, либо меняйте верстальщика, третьего не дано.

Answer 7

[Алексей]

По сетке Bootstrap рисовать, желательно для нескольких дисплеев. Даже на Хабре есть информация по макету.