Прорисовка дизайна сайта — с чего начать?

Question

[Илья Савельев]

Привет.

Вопрос в заголовке немного странный, поэтому конкретизирую - к примеру, есть задача сделать адаптивный лэндинг (только дизайн).

Если смотреть "на перед" (с точки зрения FrontEnd'a) выбор CSS-фреймворка лежит на мне как на дизайнере (в случае если заказчик дуб дубом и не предоставил никакие данные касаемо этого момента)?

Вот я отрисовал прототип лэндинга, все ок, утверждено, теперь я открываю фотошоп/скетч и...какую, к примеру, grid system мне выбирать и т.д.

Просто у каждого CSS-фреймворка свои библиотеки, компоненты, виджеты и т.д...мне же нужно ориентироваться на какие-то паттерны при реализации дизайна. Или же мне вообще срать на все это и делать в стиле "я дизайнер - я творю, а как это сверстают меня не волнует?" :)

Поделитесь опытом, может какими-то устоявшимися тенденциями в этом плане, у кого какие мысли?

Answer 1

[Ivan Bogachev]

выбор CSS-фреймворка лежит на мне как на дизайнере... Просто у каждого CSS-фреймворка свои библиотеки, компоненты, виджеты и т.д...

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

Или же мне вообще срать на все это и делать в стиле "я дизайнер - я творю, а как это сверстают меня не волнует?"

Вы - дизайнер (я надеюсь, что хороший, или по крайней мере стремитесь им стать). Соответственно вы лучше остальных членов команды понимаете как что должно выглядеть. Если вы на макете одинаковые элементы делаете одинаковыми, а не "на глазок, плюс-минус пара пикселей" с требованием верстать pixel-perfect, и к этому прикладываете стайлгайд - все будет хорошо. Вообще стайлгайд - очень полезная вещь, особенно в долгоживущих проектах. И плюсик в карму дизайнеру. Главное - не зазнавайтесь: если хороший верстальщик говорит, что вы где-то что-то ляпнули - проверьте, может и правда ляпнули. Если вы единственный дизайнер на проекте - вас кроме верстальщика проверять обычно некому.

Answer 2

[iBird Rose]

тебе как дизайнеру не нужно заботиться о фреймворках, компонентах, библиотеках и т.д.
тебе только нужно выбрать сетку и придерживаться ее. (причем даже выбрав сетку того же бутсрапа - тебе не обязательно придерживаться ширины 1200px. ты можешь изменить ширину на 1400px к примеру.) любой фреймворк кастомизируется. и фронтедер уже сам сделает как нужно.

Comments

[iBird Rose]

Рафаэль ™: если дизайне рисует дизайн без сетки в 2017 году - я бы его даже дизайнером назвать постеснялся бы.

[Илья Савельев]

Рафаэль ™: как минимум в каждом дизайне должна быть сетка

Answer 3

[devstudent]

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

Answer 4

[GreatRash]

Чот вы сделали всё шиворот-навыворот. Надо сперва выбрать грид, а потом рисовать. А вы сперва нарисовали картинку, а теперь пытаетесь натянуть сову на глобус.

Comments

[Илья Савельев]

А вы невнимательно читаете. Картинку еще никто не рисовал. Я сделал набросок прототипа, теперь этот прототип буду UI'ть => сейчас идет выбор грида.

[GreatRash]

Как вы умудрились сделать прототип без грида?

[Илья Савельев]

GreatRash: кстати, к вопросу о прототипах - тут, пожалуй, целое пространство для творчества и дискуссий. Если конкретно брать в моем случае - то у меня прототипом является набросок местоположения основных блоков в том же Balsamiq или Sketch. Это тот же wireframe по сути, но приведенный в более перевариваемую для заказчика форму с минимальной передачей желаемой типографики и цвета.

Согласен, у кого-то прототипом является то, что уже можно пощупать и покликать в том же Invision или Marvel, к примеру. И тут без грида не обойтись (если это нормальный полноценный прототип с элементами UI).

Так что в моем случае на данном этапе мне грид не нужен :)

[GreatRash]

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

P. S. Я уж не говорю о понимании ширин колонок, их поведения на различных девайсах... Вы адаптивный макет строите или где?

[Илья Савельев]

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

Не будем дискуссировать, это не форум. Я понял, что вы - большой молодец :)