Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наш Telegram-канал