Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Почему веб-дизайнер должен понимать верстку?

  • Вещает
  • Опубликовано:
  • Изменено:
Почему веб-дизайнер должен понимать верстку? 🤔

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

Дисклеймер: статья содержит мат. Не нравится – идите нахуй.

* в дальнейшем, под словом дизайнер имеется ввиду веб-дизайнер, UI/UX дизайнер, дизайнер интерфейсов. Не надо втирать что существуют дизайнеры архитектуры, одежды и прочей хуеты. Я знаю.

Выкинь мольберт нахуй 👨‍🎨

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

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

Дизайнер – технолог

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

Сетка и с чем её едят

Сетка нужна для того чтобы блоки были адекватно расположены на странице и нормально адаптировались под различные размеры. Дизайнер должен понимать то, что верстальщик должен адаптировать макет не под 2-3 экрана, а под основных 12-15 экранов, число которых в реальных условиях легко растет в разы.
Идеал сетки – 12 колонок.
Ибо делится на 2, 3, 4 и 6. Можно, конечно, использовать и кастомные величины, но слишком ситуативно.

Блоки и элементы

Дизайнер должен понимать то, что «чуть-чуть» изменить отображение блоков на странице может критически сказаться на верстке и верстальщик может потерять огромное количество времени на правки. Также, дизайнер должен понимать что такое поток блоков. Он должен всегда иметь ввиду возможность переполнение блока или элемента текстом/другим элементом. Это пиздецки важно с точки зрения технической реализации макета в вёрстке.

Например. Дизайнер запилил кнопку «Пройти регистрацию и купить товар», но не учёл того, что на экранах поменьше кнопка раздувается в два ряда и выглядит уебищно. Проеб.

Стайлгайд и компоненты

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

Создал стайлгайд — используй его. Нет ничего хуже, чем обнаружить «новую» кнопку, атипичную модульную сетку или «уникальный» размер шрифта. Хочешь создать новый блок (который нельзя собрать из уже имеющихся) — начни со стайлгайда. «Думай компонентами», не плоди огород сущностей (размеры шрифтов и отступов, цвета, типы обводки и пр.) без надобности.

Стайлгайд — это отдельный макет. Это не текстовая инструкция как включать/выключать видимость слоёв, варианты композиции слоёв. Это не артборд, включённый в какой-либо макет.

Немного о состояниях:

  • Для ссылок нужны состояния: «обычная», «наведение», «нажатие» (последние два могут совпадать). Для навигационных ссылок можем добавить состояние «находимся на этой странице». Для контентных ссылок — состояние «ссылка посещалась».
  • Для кнопок нужны состояния: «обычная», «наведение», «нажатие», «заблокированная». Иногда ещё нужно состояние «идёт процесс».
  • Для текстовых полей форм нужны состояния: «обычное», «в фокусе», «заблокированная». Нет смысла прорисовывать состояние «нажатие» и «наведение».
  • Для флажков (чекбоксов) и радиокнопок нужны состояния: «отмечено», «не отмечено», «заблокирован». Не нужно прорисовывать состояние «нажатие» и «наведение».
  • Для типографики нужно показать, как минимум, следующее: заголовок 1, параграф, заголовок 2, параграф, заголовок 3, параграф, заголовок 4, параграф, параграф, маркированный список, параграф, нумерованный список, блочная цитата, параграф, таблица, параграф. Верстальщику важно увидеть все вертикальные расстояния (для этого и нужно чередование параграфами и два параграфа подряд).

Также, стоит учитывать то, что:

  • В вэбе нету адекватного адаптивного переноса текста;
  • Размер шрифта должен быть в пикселях. Другие значения могут отличаться в конвертации;
  • Символ валюты надо брать с юникод-символов либо делать svg-графикой, а не делать отрицательный кёрнингом с дефисом;
  • КАПСОВЫЙ ТЕКСТ не надо писать вручную, а использовать свойство «All Caps»;
  • Заголовок не должен быть в одном блоке с текстом. Это разные элементы.
  • И множество других особенностей… (возможно дополнение)

Часть информации нагло взял с хорошего топика на гитхабе чтобы сэкономить свое время. Больше полезные лайфхаков и мыслей по взаимодействию веб-дизайна и верстки можешь найти здесь – github.com/nicothin/web-design

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!