Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

Question

[7080]

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

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

Можете посоветовать ресурсы, видео и/или статьи, где мой вопрос описан максимально подробно и по делу? Спасибо.

Comments

[Ankhena]

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

Можете посоветовать ресурсы, видео и/или статьи, где мой вопрос описан максимально подробно и по делу?

Я частенько за завтраком слушаю разные дизайнерские блоги. В частности, Алексея Бычкова, у него специфическая манера изложения, кому-то нравится, кому-то нет. Но мне нравится смысл его речей и забота о том, чтобы верстальщик не проклял дизайнера. И это как бальзам на мою душу верстальщицы.
https://vk.com/alexeybychkov
Попадется кто-то ещё с аналогичными материалами, поделитесь, пожалуйста.

Понимать возможные размеры экранов

Тут всё просто с ответом: любые :)
Но это не просто для дизайнера.
Раньше рисовали либо десктоп либо три размера.
Но между 320 и 768 или 768 и 1440 (не говоря уж про 1920) огромная пропасть и куча блоков там не смотрятся. И выходит, что вы отдаете отображение на этих промежутках на волю верстальщику. Хорошо, если у него есть вменяемое чувство прекрасного.
Поэтому сейчас рисуют по 5-6 размеров.
При этом делают это так, чтобы верстальщику было понятно что делать и дальше, на 1920+. Куда тянуть фоны и где и из чего их раздобывать.

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

Верстальщику важно понимать "что хотел сказать дизайнер" - откуда и по какой логике что берется.

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

Также мы будем благодарны за здоровые названия слоев. В идеале, чтобы их можно было использовать при экспорте (но это скорее налаживается при длительном сотрудничестве). Или хотя бы просто понятные, при просмотре дерева.

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

И ещё куча нюансов, про которые прямо сейчас не вспомнились или кажутся совсем банальными.

[Сергей delphinpro]

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

Также делайте палитру цветов. Давайте цветам имена.
Верстальщик создаст эту палитру в таблице стилей. Посмотрит в макете название цвета и без копирования просто использует нужный по названию.

Answer 1

[Сергей delphinpro]

Просто приведу один пример из текущей работы по верстке:

Лень дизайнера:



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

-----------------

Вот еще.



Казалось бы,обычный заголовок с красной строкой. Заверстаю с помощью text-indent.

А хрен там не валялся. Потому что дальше такое:



Круто смотрится. Наверное. И я даже это заверстаю при желании.

Но ведь эти тексты будут потом заполнятся в админке. Они могут меняться. И скорее всего а админке будет простое однострочное текстовое поле для заголовка. Тут хз как делать кастомные отступы на рандомной строке.

Comments

[historydev]

Это экономия заказчика, а не вина бездарного дизайнера)

[Виталий Першин]

historydev, А откуда заказчику знать, что в этом месте ему что-то сэкономили? Вполне возможно что сэкономили на нем...

[historydev]

Виталий Першин, Ему по сути плевать, ведь не ему с результатами возиться - главное подешевле и побыстрее.

[Виталий Першин]

historydev, Так какие претензии к заказчику? Я такое видел и от дизайнеров, которые за маленький лендинг берут от 1000$

[historydev]

Виталий Першин,

Я такое видел и от дизайнеров, которые за маленький лендинг берут от 1000$

Во времена Adobe Photoshop CS3?

Так какие претензии к заказчику?

Такие)

[Виталий Першин]

historydev,

Во времена Adobe Photoshop CS3?

Да хоть и фотошоп, в чем разница?

Такие)

Это разве заказчик сделал? Как он может проконтролировать то в чем не разбирается? Ценой? Ему за любую цену сделают так же.

[historydev]

Виталий Першин, Покажи мне инвестора, который будет инвестировать в дело, в котором не разобрался. - это идиот, а не инвестор

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

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

Да хоть и фотошоп, в чем разница?

jquery и react, в чём разница?
пхп и с++, в чём разница?

[Виталий Першин]

historydev, ОМГ, какой же ты высокомерный, мне тебя даже жалко.

Answer 2

[Виталий Першин]

Докину своих замечаний:

- Всегда делайте макета для FullHD эакрана в 1920px, даже если у вас контент на 1000px, не надо делать макета шириной 1200px, а потому удивляться, что шапка, которая тянется на весь экрана внезапно, увеличилась в размерах на FullHD и потеряла в качестве.

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

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

- Если вам нужен какой-то более-менее стандартный шрифт используйте Google Fonts, это проверенные шрифты, которые гарантированно работают как надо. А использование каких-то аналогов с глубин интернета это, во-первых, может быть не совсем законно, так как шрифт может быть платным и это надо учитывать. Кроме того, если в дизайне вы используете допустим только ttf, то для web это все надо конвертировать в другие форматы, что может принести проблемы и как итог в верстке шрифт выглядит совсем иначе.

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

хочу знать, где верстальщик ленится

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

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

Comments

[Сергей delphinpro]

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

В продолжение: иногда сложная картинка состоит из нескольких векторов. Казалось бы - объедини их в одну группу, чтобы можно было экспортировать в единый файл.Так ведь нет, бывает, что элементы картинки никак не объединены, или еще хуже, вообще в разных местах (в дереве объектов). Такое встречается редко, видимо, совсем у зеленых, но бывает.

[Виталий Першин]

Сергей delphinpro,

Такое встречается редко, видимо, совсем у зеленых, но бывает.

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

[szQocks]

Виталий Першин, а как верстать макет 1920 если например сидеть с ноутбука, который 1600+ максимум ?

через скролл или через медиа или масштабирование или через выставление брейкпоинтов в браузере для просмотра на 1920 ? это конечно такое себе

[Сергей delphinpro]

szQocks, никак. если профессионально занимаешься этим,то придется разорится на фуулхд моник.

[szQocks]

Сергей delphinpro, у меня вот есть дизайнер, я её попросил мне делать 1600 слой страниц, почему 1600, это потому что я проанализировал мониторы большинство и сделал вывод что если в принципе делать для 1600, то большинство верстальщиков кто увидят этот макет сможет его сверстать, получается я начинаю с десктопа, потом через медиа на 1920 верстаю и через медиа на всё остальное. Получается 1600 это в моём понимании - макс десктоп, и тут под 1920 подправить чутка делов

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

в общем как бы там не было, делать макеты 1920 - с этим я вообще не соглашусь

зато вот это хорошее замечание

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

UPD: не 1600, а 1440

[Виталий Першин]

szQocks,

а как верстать макет 1920 если например сидеть с ноутбука, который 1600+ максимум ?

А как верстать 1920px если работать с телефона или планшета? Это рофл такой? Это твой инструмент он у тебя либо есть, либо иди займись чем-то более продуктивным.

в общем как бы там не было, делать макеты 1920 - с этим я вообще не соглашусь

А нет, не рофл. Это стандарт, который ты обязан делать, знать как это делать и иметь соответствующий инструмент.

у меня вот есть дизайнер, я её попросил мне делать 1600 слой страниц,

ну это рука-лицо

Получается 1600 это в моём понимании - макс десктоп, и тут под 1920 подправить чутка делов

У меня нет слов. Главное, что и итоговая работа какая бы они не была, будет в твоем понимании прекрасна. Соболезную.

скорее всего у Виталия свой моник, поэтому он советует сразу делать фуллхд

Скорее всего у Виталия не один моник и не один телефон, еще и виртуальные ОС с их браузерами, чтобы не кормить заказчиков выдуманными стандартами.

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

То есть если ты еще и жанглировать умеешь, то можешь свои стандарты придумывать?

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

и тут под 1920 подправить чутка делов

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

[szQocks]

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

а потому удивляться, что шапка, которая тянется на весь экрана внезапно, увеличилась в размерах на FullHD и потеряла в качестве.

о чём тут ещё можно говорить, профессионал

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

[szQocks]

Виталий Першин,

представим что тебе дали макет под fullhd 1920

как ты будешь делать верстку для десктопа ? через медиа и уменьшать значения верно ?
получается если идти от fullhd в низ и подправлять через медиа - это для тебя норма

а если сверстать сначала десктоп а потом через медиа идти в верх, увеличивать значения для fullhd - это для тебя уже не норма ? ты что на приколе ?

[Виталий Першин]

szQocks, Я верстаю Mobile First, даже если мне дадут только fullHD без мобильных экранов. Но если я начну объяснять почему, у тебя скорее всего голова взорвется.

а если сверстать сначала десктоп а потом через медиа идти в верх, увеличивать значения для fullhd - это для тебя уже не норма ? ты что на приколе ?

Desktop это и есть FullHD, а то что ты себе придумал, это ты себе придумал.

увеличивать значения для fullhd - это для тебя уже не норма ?

Да. Потому что главное правило убрать всегда проще чем добавить. Отрезать проще, чем пришить обратно. Если у тебя чего-то нет, а именно 320px, ты должен будешь их где-то найти. Если там будет твое лицо на всю ширину экрана, тебе придется его растянуть от края до края на 320px (только давай не будем перечислять варианты), если бы дизайнер сразу нарисовал базовый размер, ты бы без проблем обрезал его по краям или просто уменьшил, ничего не выдумывая и не теряя в качестве. Ты вбил себе какую-то странную мысль, но то что от неё больше вреда чем пользы тебе не доходит.

[szQocks]

Виталий Першин, альтернатива для тех у кого нет монитора фуллхд, это полезный инструмент - но обязательный ли он - нет, с чего ты взял что он обязательный - я не знаю, видимо у вас там стандарты такие, и идти в 2 направления, не сказал бы что это ппц какая-то трагедия

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

где чё я порчу ?)

Получается ты подстраиваешься исключительно под свой монитор и при этом дизайнеров подбиваешь под это. Так в чем я не прав?

не под себя, а под большинство мониторов

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

Так может прислушаешься к тем, кто смог заработать на те инструменты, которые нужны в его работе?

вот так гордость, нафиг тебе монитор фуллхд если ты верстаешь мобайл фирст

[hint000]

Виталий Першин,

Я верстаю Mobile First, даже если мне дадут только fullHD без мобильных экранов. Но если я начну объяснять почему, у тебя скорее всего голова взорвется.

Прикол в том, что я вообще никогда не занимался вёрсткой, но я вас понимаю, хоть и без верстальщических нюансов, а с общеинженерной точки зрения. И поддерживаю. Как инженер и админ тоже стараюсь действовать подобным образом. Строить универсальные решения. Оставлять задел на непредвиденные хотелки. Оставлять резерв на форс-мажор, на ошибки коллег и на ошибки свои собственные. Насчёт последнего есть любимая цитата:
epizodyspace.ru/bibl/tehnika_-_molodyoji/1985/12/p...

Я не компьютер, а человек, и мне свойственно делать ошибки. Поэтому я не могу выбрать путь, на котором обязан действовать безошибочно. Если, конечно, у меня есть выбор. Нет, я предпочту вариант, который оставляет мне право на ошибку и одновременно возможность ее исправить.

[Виталий Першин]

szQocks,

не под себя, а под большинство мониторов

Тем временем статистика даже не слышала про твое выдуманное разрешение

это полезный инструмент - но обязательный ли он - нет

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

в общем как бы там не было, делать макеты 1920 - с этим я вообще не соглашусь

нафиг тебе монитор фуллхд если ты верстаешь мобайл фирст

Рука-лицо x2

[szQocks]

Виталий Першин, просто даже если посмотреть на эту статистику, могу смело сказать что это полная чушь

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

[szQocks]

Виталий Першин, ну 1600 я реально загнул, 1440, там слой просто 1600 в фигме

получается тупо для десктопа делать для 1440, но это не отменяет тот факт что все макеты не нужно делать для 1920, в целом я лишь чутка размеры не те написал

[Ankhena]

szQocks, не делать 1920 потому что у какого-то конкретного верстальщика моник 1600?
Т.е. разрабатывать дизайн исходя не из целевой аудитории, а моника верстальщика?
Сильная логика. Вы чего?
Ладно бы ещё исходя из характеристик устройства клиента, ведь это он деньги платит и заказывает музыку.

Но даже если у верстальщика есть 1920, то он всё равно должен верстать так, чтобы и стареньких смартфонах в 300px и на 4к и на 8к всё выглядело нормально. Правда, и дизайнер должен постараться учесть разнообразные размеры вьюпортов.

Современные качественные дизайнеры рисуют по 5-6 размеров.

[szQocks]

Ankhena,

не делать 1920 потому что у какого-то конкретного верстальщика моник 1600?

делать 1920 потому что у како-то конкретного верстальщика моник 1920 ?
Т.е. разрабатывать дизайн исходя не из целевой аудитории, а моника верстальщика?
Сильная логика. Вы чего?

Современные качественные дизайнеры рисуют по 5-6 размеров

везде всё индивидуально, если ваша компания в которой вы работаете выдала вам моник - то это не значит то у всех так, и если у вас там бывает так что делают аж 5-6 размеров, поверьте вам крупно повезло

[szQocks]

Ankhena, о чём вообще можно с вами спорить, если у вас у обоих акцент на верстку, что у Виталия, что у вас. Вы конечно можете сказать купи монитор, вопрос - нахер он мне сдался если я регулярно ей не занимаюсь ? я без монитора могу сверстать, и более удобно будет если начать с HD потом в 2 направления.

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

Вообще вы как из олдов должны больше всех понимать что раньше так и верстали, без fullhd монитора. В 2 направления, вверх и в низ, да даже и сейчас так верстают, вы что думаете я один такой перец ? не смешите

[Ankhena]

szQocks, угу и повезло плиточнику, у которого есть плиткорез. А иначе будем класть только целыми. Или наломаем как получится.

делать 1920 потому что у како-то конкретного верстальщика моник 1920 ?

Да наплевать какой моник у верстальщика. Хоть вообще без него, вслепую.

если у вас там бывает так что делают аж 5-6 размеров

Качественные дизайнеры да, делают именно так.
А тема как раз об этом.

поверьте вам крупно повезло

Верю. Только к везению это не имеет никакого отношения.

[Ankhena]

szQocks,

о чём вообще можно с вами спорить, если у вас у обоих акцент на верстку,

Не надо со мной спорить. Вопрос прочитайте. Спрашивают как делать качественно и на что обратить внимание, а вы пишете, что сойдет и тяп ляп.

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

Всё верно. И с "каким есть" моником и из картинок в jpg и из сомнительных psd. Так у нас и не возникает вопроса, как имея 1600 верстать на 1920+. И для этого не нужно просить рисовать убогий дизайн.

нахер он мне сдался если я регулярно ей не занимаюсь

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

[szQocks]

Ankhena, с чего вы взяли что делая макет 1440, а не 1920 = не качество ? Если я куплю монитор, буду профи ?) фак логик

[Ankhena]

szQocks,

с чего вы взяли что делая макет 1440, а не 1920 = не качество ?

Медленно: качественный дизайн тот, в котором продумано отображение на разных размерах вьюпортов и эта информация донесена до верстальщика. А не только 1440 или только 1920.

Если я куплю монитор, буду профи ?)

Вряд ли.
Извините. Вы сами напросились. Я честно старалась избежать этого.

фак логик

Теперь уж действительно :)

Answer 3

[Антон Антон]

Если дизайнер дизайнерит в фигме - то не надо давать имена экспортируемым сущностям (например иконки) с использованием запрещенных в именах файлов символов. Причем на всей иерархии (хз, почему так), иначе при экспорте они будут заворачиваться в zip

Answer 4

[koder_1]

Частые ошибки дизайнера
- не дорисованы формы обратной связи и попап окна. Кнопка типа Заказать звонок есть, а самой формы нет
- не дорисованы функциональные элементы, например, у иконок в шапке корзина, избранное не отрисован вариант, когда в корзине что-то есть или список отзывов есть, а формы, чтоб добавить отзыв нет. Решением было бы обдумать путь клиента например, от выбора варианта товара до оформления заказа - какие кнопки он будет кликать.
- должна быть возможность у всех текстов посмотреть параметры шрифта и отступы
- частая ошибка - объединять все в один слой, тогда нет возможности вырезать картинку отдельно, фон отдельно