@7080

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

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

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

Можете посоветовать ресурсы, видео и/или статьи, где мой вопрос описан максимально подробно и по делу? Спасибо.
  • Вопрос задан
  • 516 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега Вёрстка
frontend developer
Просто приведу один пример из текущей работы по верстке:

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

672b9c730c92a976556174.png

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

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

Вот еще.

672ba75fc4f41293352686.png

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

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

672ba79ddf4f8143572666.png

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

Но ведь эти тексты будут потом заполнятся в админке. Они могут меняться. И скорее всего а админке будет простое однострочное текстовое поле для заголовка. Тут хз как делать кастомные отступы на рандомной строке.
Ответ написан
Get-Web
@Get-Web
Front-End Developer
Докину своих замечаний:

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

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

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

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

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

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

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

Вот еще классические страдания для верстки. Темы такие все время закрывают, так как они якобы решены, но по факту те решения не покрывают и половины возможных кейсов, например, когда фон будет не одноцветный в один тон, то больше половины решений отпадают. И часто для простоты задают вопросы не описывая реальный кейс, а потом удивляются, почему не получается
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
Если дизайнер дизайнерит в фигме - то не надо давать имена экспортируемым сущностям (например иконки) с использованием запрещенных в именах файлов символов. Причем на всей иерархии (хз, почему так), иначе при экспорте они будут заворачиваться в zip
Ответ написан
Комментировать
@koder_1
Битрикс программист
Частые ошибки дизайнера
- не дорисованы формы обратной связи и попап окна. Кнопка типа Заказать звонок есть, а самой формы нет
- не дорисованы функциональные элементы, например, у иконок в шапке корзина, избранное не отрисован вариант, когда в корзине что-то есть или список отзывов есть, а формы, чтоб добавить отзыв нет. Решением было бы обдумать путь клиента например, от выбора варианта товара до оформления заказа - какие кнопки он будет кликать.
- должна быть возможность у всех текстов посмотреть параметры шрифта и отступы
- частая ошибка - объединять все в один слой, тогда нет возможности вырезать картинку отдельно, фон отдельно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы