Почему дизайнер должен верстать сам, и как делать это быстро
Веб-дизайн — это уже давно не картинки в фотошопе. Понимание HTML и CSS встречается в каждой вакансии как и знание английского.
Верстальщики не нужны
С основания Студии мы задумывались, как оптимизировать дизайн-процессы и обойтись без верстальщика. Первые два месяца собирали сайты на Visual Composer для WordPress. Использовать сырой плагин с drag-and-drop интерфейсом было примерно как в выражении: «Мыши плакали, кололись, но продолжали грызть кактус».
Всё же этот вариант был лучше, чем искать верстальщика — клиенты не могли ждать, а денег на лишнюю зарплату не было. После нескольких проектов мы поняли, что так продолжаться не может, и стали искать новый инструмент. И нашли Webflow.
Новый визуальный редактор стал основным инструментом дизайна в Студии. Он помог нам навсегда избавиться от бутылочного горлышка «дизайнер — верстальщик» и в разы ускорить разработку. Качество проектов значительно повысилось, потому что дизайнер полностью контролирует вёрстку.
Первый iPhone и новые стандарты
В 2007 году с появлением iPhone начался подъем мобильного трафика, контента и стандартизации. Создавались новые фреймворки с готовыми шаблонами для сайтов. Фреймворки оказали большое влияние на развитие веб-технологий: с помощью одной из самых популярных библиотек Bootstrap сделано более 15% всех сайтов.
Главный недостаток фреймворков в том, что дизайнеры не могут влезть в код и поменять всё сами, как они хотят. Приходится дёргать верстальщика, потом разработчика — и так по кругу. В итоге потеряно куча времени.
Страшно осознавать, что студии до сих пор держат верстальщиков в штате. Мы пришли к тому, что поменяли верстальщика на визуальный конструктор. Сэкономленные деньги потратили на курс по HTML и CSS для дизайнера и повысили ему зарплату, чтобы он контролировал вёрстку.
Без кода и никакого мошенничества
С появлением визуальных конструкторов само понятие вёрстка используется всё реже. Сейчас уже никто не открывает Dreamweaver или Muse и не верстает присланный в фотошопе макет. Код ушёл на второй план. Дизайнер может собрать простой сайт за пару часов.
Если сравнивать, то новичок в Webflow будет выигрывать у верстальщика в скорости работы. Вместо того, чтобы писать несколько строчек кода, сохранять и обновлять браузер, достаточно перетащить нужный блок, все изменения видны в риалтайме.
Создатели Webflow считают, что работа дизайнера должна быть завязана в первую очередь на визуальных задачах.
Один из главных плюсов — все проекты изначально адаптивны. Если верстальщик адаптирует сначала под планшеты, затем под горизонтальную и вертикальную ориентацию телефона, то проект в Webflow автоматически создаётся адаптивным. Достаточно отрегулировать размеры и параметры, чтобы всё выглядело хорошо.
Создатели Webflow взяли за основу популярный фреймворк Bootstrap. Получился достаточно мощный инструмент, чтобы стать опорой большого продукта, и универсальный, чтобы решать более мелкие задачи.
Ещё 5 аргументов в пользу Webflow
Легко создавать интеракции. Если опять сравнивать с верстальщиком, то на такую анимацию у него ушло бы гораздо больше времени, когда в Webflow это можно сделать за пару часов.
Символы. Компоненты, которые требуется использовать в проекте повторно, можно превратить в символы. Тогда изменение любого экземпляра приведёт к изменению других. Поменяли хедер на главной — он поменяется на других страницах. Это похоже на символы в Sketch.
Шаблоны. Для продукта или типовых проектов можно создать единый шаблон. Шрифтовые стили, иконки, цвета и другие элементы гайдлайна будут всегда доступны.
Версионность и бэкапы. После каждого изменения проект автосохраняется, а после каждого 20-го автосохранения создаётся бэкап. Если зачем-то нужно посмотреть, как выглядел ваш дизайн три дня назад, — открывайте и смотрите.
Фидбэк. У Webflow отличное комьюнити. На форуме можно обсудить фишки и проблемы с другими дизайнерами или создателями сервиса. Полезная штука — вишлист, где пользователи пишут, чего им не хватает в Webflow. Топики поднимаются народным голосованием, а создатели меняют статус желанной фичи на «планируется» или «в разработке».
Недостатки тоже есть, куда без них
Webflow работает только в браузере и только с интернетом. По личному опыту могу сказать, что бывали моменты, когда интернета нет, а работать надо.
При создании страниц с большим количеством компонентов и интеракций сервис всё-таки не выдерживает и начинает жрать оперативную память, как бешеный. На моей памяти такое случалось только в паре проектов, но осадок остался.
Стандартные элементы вроде контейнера и колонок не поддаются кастомизации. Можно сверстать всё самому из пустых блоков, но это вёрстка на костылях, и разработчику такое не понравится.
Недостатки есть, но они не перевешивают главные преимущества: скорость, удобный интерфейс и практически безграничные возможности в умелых руках.
Для тех, кто в цейтноте
- Дизайнер должен контролировать вёрстку.
- Визуальные редакторы — супер.
- Увольняйте верстальщика.
- Покупайте визуальный редактор.
- Создавайте библиотеку шаблонных элементов.
- Передавайте разработчику готовую вёрстку, а не картинки.
