зачем он нужен дизайнеру и как его правильно готовить — Дизайн на vc.ru
Мы в JetStyle ориентированы на создание цифровых сервисов и продуктов. Но зачастую возникают задачи, которые нужно закрыть быстро и без привлечения разработчиков. Например, если мы тестируем гипотезу для MVP или собираем лендинг. Тогда вполне рабочее решение — использовать такой сервис как Webflow, который позволяет все собрать силами дизайнера.
26 854 просмотров
Что из себя представляет Webflow?
Webflow — конструктор продвинутого уровня, в нем можно верстать корпоративные сайты, интернет-магазины, продуктовые лендинги и другие одностраничники, а также блоги и портфолио. У него много возможностей по сравнению со скромной функциональностью других конструкторов. При этом дизайнеру не понадобится помощь разработчика для создания сайта. А вот без базовых знаний HTML и CSS обойтись не получится.
Webflow состоит из трех компонентов: инструмента для веб-дизайна без кода, CMS и хостинга.
Конструктор местами напоминает Adobe Photoshop: есть визуальный интерфейс для верстки, элементы отображаются в виде слоев, похожа стилизация, только в Webflow позиции управляются разными настройками, а не курсором. В интерфейсе дизайнер может добавлять, позиционировать и стилизовать элементы, а система самостоятельно генерирует разметку и весь другой необходимый код.
Тарифные планы
Сервисом можно пользоваться бесплатно, но есть ограничения:
- можно создать не более двух проектов,
- нельзя вставлять кастомный код (CSS стили, скрипты и т. д.),
- нельзя экспортировать код.
Если вы хотите полную функциональность или планируете регулярно пользоваться конструктором, то нужно заплатить за аккаунт, с которого можно будет создавать проекты. А для того, чтобы у определенного проекта был свой домен и админка, нужно дополнительно заплатить за хостинг.
На минимальном тарифе аккаунт и хостинг стоят по $16, если платить сразу за год, и $20 при помесячной оплате.
На таком тарифе можно создавать до 100 страниц на сайте. Как правило, он закрывает потребности для большинства проектов, будь то блог, портфолио, корпоративный сайт или даже интернет-магазин.
В Webflow есть функциональность, позволяющая сделать полноценный интернет-магазин, — Webflow Ecommerce. У него отдельные от основных тарифные планы.
Особенности и ограничения
Гибкое использование кода
В отличие от более простых аналогов — Tilda, Readymag, WordPress, Wix — в Webflow есть много способов использования собственного кода, что позволяет создавать любые необходимые элементы и их поведение на странице, в том числе интегрировать это в CMS. Это дает возможность гибко работать с кодом человеку, который не является разработчиком.
Большой выбор шаблонов и анимации
В Webflow есть платные готовые шаблоны. А еще большой анимационный блок с возможностью импорта ключей из Adobe After Effects и интуитивный интерфейс. С помощью анимационного блока и вставки кастомного кода можно делать почти любую трендовую сложную анимацию.
Адаптивные настройки элементов
По умолчанию в конструкторе есть вьюпорты: десктоп, планшет, горизонтальная и вертикальная мобильные версии. Все настройки каждого элемента тянутся с десктопа на остальные разрешения: изменили ширину блока на десктопе — она изменится везде. Но если изменить настройку на каком-то вьюпорте, то десктопная настройка уже не будет влиять на настройку в этом вьюпорте. А еще здесь не всегда есть возможность посмотреть превью изменений: режим просмотра включается и показывает рабочий сайт, но во многих случаях он не показывает работающий кастомный код.
Лимиты на количество пользователей
Другая особенность — аккаунтом может управлять три человека, которые добавляются в администраторы. При этом нельзя пользоваться одним аккаунтом одновременно с разных устройств. Еще есть ограничение по визитам — до 100 000 на один хостинг.
Что еще нужно знать
1. Если у вас хостинг не на Webflow, а клиент просит выгрузить код из конструктора к себе, то визуального редактора не будет, останется просто код.
2. Если все же перенести сайт с Webflow на другой хостинг, исчезнет возможность пользоваться CMS и редактировать сайт через админку.
3. Конструктор не поддерживает сторонние сертификаты, только официальный от Webflow. Можно попытаться настроить это через прокси-сервер, но для этого потребуется привлечь программиста.
Функциональные возможности
Webflow поддерживает большое количество интеграций со сторонними сервисами. Это позволяет добавлять сайту функциональность интернет-магазина, CRM-систему, инструменты SMS- и email-рассылок и другие полезные возможности.
Мультиязычность
В Webflow нет инструмента по работе с мультиязычностью, смена языка делается кастомным кодом. Для одного из наших проектов мы нашли готовое решение, которое закрывало наши потребности, — мгновенное переключение языков без создания дополнительных страниц. Если вам понадобится сделать на сайте отдельные языковые страницы, лучше заранее поискать информацию на форумах.
Интернет-магазин
Если говорить о функциональности интернет-магазина, у Webflow много преимуществ по сравнению с другими конструкторами. То, чего в WordPress или Wix пришлось бы добиваться большими усилиями и с помощью разработчиков, здесь можно настроить относительно быстро и просто.
В Webflow Ecommerce есть все необходимое для онлайн-продаж: управление товаром и остатками, пользовательские корзины, переписка с клиентами, а также самостоятельное оформление заказа. Можно настроить каждую деталь интернет-магазина: витрину, корзину, форму заказа, сетку продуктов и страницы оплаты, уведомления о покупке. А еще товары можно массово экспортировать и импортировать в формате CSV — не придется добавлять их по одному.
Создание CMS
Webflow — это конструктор, в нем часто приходится что-то костылить. Например, здесь есть такое понятие, как коллекция — по сути это шаблонная страница. Через нее мы настраиваем все поля, которые можно редактировать в админке.
С чего начинать делать CMS?
Сначала мы создаем коллекцию — пустую страницу. В коллекцию можно добавлять до 30 полей: изменение текста, заголовков, загрузка картинок, галерей и т.д.
После того, как коллекция в CMS настроена, переходим к верстке страниц. В интерфейсе Webflow это реализовано почти так же, как в Figma и Photoshop — просто берем и копируем все элементы на странице и вставляем их внутрь коллекции.
Структура сайта
Если говорить о структуре, сайт выглядит следующим образом:
- есть рабочая зона, это поле редактора,
- справа — поле настройки конкретного элемента,
- слева находятся:
— панель добавления элементов (список всего, из чего собирается сайт в Webflow),
— панель символов (символ — аналог «компонента» в Figma),
— «навигатор» (список слоев),
— страницы сайта,
— панель CMS (список созданных «коллекций»),
— панель Ecommerce (для работы с магазином),
— Assets — все добавленные мультимедиа (картинки, видео, документы, файлы анимации Lottie),
Поля в интерфейсе конструктора
В интерфейсе мы можем настроить все необходимое для работы контент-менеджера. Ограничение Webflow — до 30 полей:
- Plain text — просто текст,
- Rich text — списки, жирный, курсив и т. д.,
- заголовки h2–H6, вставка мультимедиа и подписей к ним,
- Image — картинки,
- Video,
- Link,
- Email,
- Phones,
- Number,
- Date/Time,
- различные переключатели: Swift, Color, Options, форма добавления File.
Варианты использования конструктора
Webflow можно использовать для выполнения небольших операций внутри дизайнерских задач.
Передача анимации разработчику
Когда для лендинга дизайнер придумал крутую анимацию (как двигается или скроллится тот или иной элемент, что происходит, когда пользователь куда-то жмет и т. д.), и нужно донести идею до разработчика — идем в конструктор, быстро верстаем с помощью инструментов Webflow придуманную анимацию и отдаем разработчику ссылку на страницу с этой анимацией. Разработчик вживую увидит, что он должен сделать в проекте. Ему можно даже передать готовый код, если аккаунт оплачен и код можно выгрузить. Для этой цели, конечно, можно использовать редактор интерактивных прототипов Principle — он отдает видеоанимации. Но Webflow отдает «живую» анимацию в коде и стоит меньше.
Живая демонстрация клиенту
Есть проект, и нужно показать клиенту результат (промежуточный или конечный — демо). В проекте есть несколько экранов, состояний и переходы между ними, или просто есть анимация.
Для понятного клиенту демо мы можем собрать имитацию реальной страницы в Webflow — сделать анимации и линковку между элементами и экранами.
То есть не описывать словами и не показывать примерные варианты, а дать результат, максимально приближенный к реальности. Конечно, имеется в виду грубая сборка без проработки всех деталей, в которой:
- статичные части страницы можно вставлять как картинки на фон,
- кликабельные элементы тоже можно вставлять как картинки,
- можно не соблюдать такие правила верстки, как наименования классов, элементов, правильные настройки стилей, потому что они необходимы только в рабочем проекте.
Такую имитацию можно сделать относительно быстро, и клиент получит привычную ссылку на сайт для просмотра.
Для этих целей можно использовать Figma, где тоже можно слинковать все экраны и состояния, но анимацию в некоторых случаях в ней сделать не получится — для отображения простых состояний (вроде наведения на кнопку и нажатия) требуется дублировать много экранов, а в самой линковке (если экранов много) можно запутаться.
Выводы и рекомендации
Итак, есть ли смысл дизайнеру учиться делать сайты на Webflow?
Конструктор предлагает много возможностей, поэтому как минимум его инструменты стоит попробовать. Особенно, если есть проекты, где необходима админка.
Ценности вебфлоу тем меньше, чем сложнее нужен сайт и чем меньше навыков и знаний верстки у дизайнера.
С другой стороны, работа с вебфлоу позволит дизайнеру лучше понимать разработчиков.
Для некоторых проектов мы выбираем Webflow, потому что на этом конструкторе можно кастомизировать дизайн и удешевить производство — создать сайт без помощи разработчиков и управлять контентом из админки. То есть быстро и за относительно небольшие деньги сделать рабочий проект. Это удобно, например, когда у клиента есть MVP, и ему нужен лендинг для быстрой проверки гипотез.
Будем рады, если вы поделитесь с нами своими находками и опытом использования Webflow.
10 невероятных трюков с CSS для преобразования вашего веб-макета
Любой, кто имеет опыт в веб-дизайне, независимо от того, использовали ли вы конструкторы веб-сайтов «сделай сам» или создавали сайт с нуля, вероятно, слышали о CSS раньше.
Этот невероятно мощный инструмент можно использовать для преобразования ваших веб-макетов, предоставляя вам возможность контролировать свой веб-сайт и реализовывать свое творческое видение. Но как вы можете использовать каскадные таблицы стилей, чтобы раскрыть потенциал вашего следующего веб-сайта?
В этом руководстве будет подробно описан ряд свойств CSS, которые использовались для создания заголовка, который вы можете видеть на изображении выше. Вы можете найти этот проект здесь, на CodePen, что даст вам возможность попробовать его самостоятельно.
CSS Image Manipulation
Первый шаг, который нам нужно сделать, чтобы создать раздел заголовка, это добавить изображения на страницу. Вы можете использовать ряд методов для достижения этой цели, поэтому мы рассмотрели самые популярные, а также несколько приемов, которые помогут вам манипулировать вашими изображениями.
1. CSS Background-Image
Мы хотим иметь полноэкранное фоновое изображение для нашего заголовка, и свойство CSS background-image идеально подходит.
Во-первых, нам нужно создать контейнер для нашего изображения (и остальных элементов в заголовке).
Мы начали с добавления тега div с классом «header», затем установили его высоту на 100vh и ширину на 100vw ; это дает нам блок точно такого же размера, как окно просмотра. Мы также добавили правило CSS для основной части страницы, перекрывая значением hidden , а поля — 0px .
2 ИзображенияИмея контейнер, мы можем добавить фоновое изображение, и для достижения этой цели нам понадобятся три разных правила CSS. Первому, фоновому изображению, нужен URL-адрес, чтобы он служил источником фонового изображения, и мы использовали для этого удобный каталог Unsplash. Нам также нужно установить background-size для покрытия и background-position для нижнего , но вы можете поэкспериментировать с ними для достижения наилучших результатов.
2. CSS Background-Blend-Mode
Режимы наложения CSS позволяют смешивать изображения и текст, подобно функции смешивания в таких программах, как Adobe Photoshop.
Чтобы режимы наложения работали с нашим фоновым изображением, мы установили цвет фона на полупрозрачный белый перед добавлением режима наложения, который мы хотели использовать.
После этого background-blend-mode был установлен на soft-light , что позволило нам смягчить изображение.
3. CSS Clip-Path
В следующем трюке мы будем использовать правило clip-path. При использовании HTML-тегов img вы можете указать путь, который будет скрывать части изображений, с которыми вы работаете. Вы можете использовать для этого обычные формы, но вы также можете использовать приложение, генерирующее SVG, для создания более сложного дизайна.
2 Изображения Мы добавили тег div с «flex_image_box», чтобы он действовал как контейнер для трех изображений, используя свойство CSS display, чтобы превратить его во flexbox (мы поговорим об этом позже). Внутри тега div были добавлены три тега img с идентификаторами, установленными как «img1», «img2» и «img3».
Настройка ширину каждого изображения до 600 пикселей , мы можем оставить свойство высоты пустым без изменения соотношения сторон изображений; теперь пришло время добавить наш клип-путь!
Чтобы создать наши три треугольника, мы использовали один и тот же клип-путь многоугольника для img1 и img3 с инвертированной версией для img2. Нам также пришлось поиграть с позиционированием нашего контейнера flex-box, чтобы убедиться, что изображения занимают правильное положение на экране. Наши правила clip-path можно увидеть ниже.
4. Непрозрачность CSS
Непрозрачность устанавливает уровень прозрачности любого элемента HTML. Мы устанавливаем непрозрачность наших изображений на 90% , делая их слегка непрозрачными, чтобы они красиво сливались с фоном.
Адаптивный текст и изображения CSS
В прошлом мы уже изучали искусство создания потрясающих адаптивных веб-сайтов с использованием HTML, CSS и JavaScript, но мы можем опираться на принципы, которые вы уже понимаете, обеспечивая более глубокое понимание ваших навыков.
необходимо освоить макеты вашего сайта.
1. Адаптивные/относительные единицы CSS
Единицы CSS, такие как px, pt и cm, являются абсолютными единицами, и это означает, что веб-браузер будет отображать их с одинаковым размером независимо от ширины и высоты окна, которое они занимают. Относительные единицы различаются, производя высоту и длину, которые относятся к другим измерениям, таким как окно браузера или родительский элемент. Приведенные ниже относительные единицы обычно используются и необходимы для адаптивного веб-дизайна.
- em : Эта единица измерения обычно используется с текстом. Это относительно размера шрифта текущего элемента, что делает 4em в четыре раза больше установленного размера шрифта.
- rem : Как и em, rem относится к размеру шрифта элемента; корневой элемент в иерархии используется для определения размера вывода.
- vw/vh : Определение ширины и высоты на основе размера области просмотра, 2vw равно 2% ширины браузера, а 2vh равно 2% высоты браузера.
- % : Единица измерения % вычисляет размеры на основе размера родительского элемента.
- vmin/vmax : Эти единицы производят размеры относительно 1% от наименьшего или наибольшего размера окна просмотра, предоставляя элементам возможность реагировать непосредственно на размер окна браузера.
2. CSS Font-Size
Это свойство может быть установлено с использованием значений по умолчанию, которые предопределены либо основной таблицей стилей веб-сайта, либо веб-браузером пользователя. Эти значения включают средний, xx-маленький, x-маленький, маленький, большой, x-большой и xx-большой, причем средний установлен по умолчанию для любого текста, в котором отсутствует тег CSS размера шрифта. В качестве альтернативы, относительные значения могут использоваться при использовании CSS-свойства font-size, и это метод, который мы использовали, чтобы убедиться, что размер текста в нашем разделе заголовка соответствует размеру для любого окна просмотра.
Мы добавили в наш HTML два тега заголовков, что позволило нам добавить текст в проект. Один из них является основным большим заголовком, а другой — подзаголовком, и оба они используют относительные единицы измерения.
Связано: Как изменить размер шрифта HTML в CSS
3. Ширина и высота CSS
Все элементы HTML имеют размеры высоты и ширины, будь то теги div, img, a или любого другого типа. Эти размеры могут автоматически устанавливаться на значения по умолчанию, но они также могут быть продиктованы веб-дизайнерами с использованием правильных правил; мы использовали оба этих метода для этого заголовка.
Для фонового изображения использовались адаптивные единицы измерения с высотой 100vh и шириной 100vw, но мы также использовали абсолютные единицы для трех изображений. Стоит изучить и поэкспериментировать с единицами ширины и высоты CSS, с такими опциями, как «наследовать», предоставляющими средства для принятия размеров родительского элемента, и есть множество других подобных трюков, которые вы можете использовать.
4. CSS Mix-Blend-Mode
CSS Mix-Blend-Mode очень похож на фоновый режим, только его можно применять к любому элементу, а не только к фону. Мы использовали это свойство в заголовке h2, чтобы добавить текстуру и сделать проект более интересным. Мы начали с установки нашего цвет текста на черный , затем установите режим смешивания на наложение .
Стоит изучить различные варианты наложения при работе с текстом, поскольку фоны с уникальными цветовыми профилями по-разному реагируют на используемые вами настройки.
5. Преобразование текста CSS
Преобразование текста CSS — это умное свойство, которое позволяет дизайнерам изменять регистр текста на своих веб-сайтах, не влияя на то, как его читают поисковые системы. Например, у нас есть установите text-transform в верхний регистр в нашем заголовке h2, делая каждую букву заглавной независимо от того, как мы вводим ее в наш HTML.
Свойства переполнения CSS
HTML часто может показаться жесткой структурой, которая устанавливает строгие границы для контента на ваших веб-сайтах, но это не так, когда используются свойства переполнения.
CSS Overflow и Text-Overflow
Overflow и text-overflow — очень похожие свойства CSS. Переполнение может быть применено к любому элементу, что дает вам контроль над содержимым, которое может выйти за его границы. Text-overflow аналогичен, но применяется только к тексту и дает вам возможность добавлять дополнительные параметры к вашим правилам. Для этого проекта мы использовали только переполнение (мы использовали его, чтобы ограничить размер тела нашей страницы), но вы можете прочитать о переполнении текста на веб-сайте W3Schools.
Использование CSS для веб-макетов
CSS — невероятно мощный инструмент, позволяющий веб-дизайнерам и разработчикам создавать потрясающие веб-сайты с помощью кода. Мы рекомендуем вам взглянуть на CodePen, который мы предоставили в начале статьи, так как это даст вам еще более глубокое представление о том, как работают все эти инструменты. Кроме того, вы можете поиграть с заголовком, который мы сделали, чтобы добавить свои собственные последние штрихи.
Разница между изображением HTML и фоновым изображением CSS? — CSS
Берджавакаин80226758 1
Ссылка на урок: https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/learn-responsive-design-module/ Lessons/sizing-elements/exercises/scaling-background-img
Когда вы включаете изображение на веб-сайт, как вы можете решить, лучше ли добавить элемент img в html или свойство background-img в CSS?
И то, и другое кажется возможным, и я хотел бы знать, есть ли явные различия.
Спасибо.
vincentb.e 2
Прочитав документацию MDN по и background-image, я бы сказал, что самая большая разница — это ясность для вас, разработчика.
Скорее всего проще использовать свойство CSS.
1 Нравится
мтф 3
Фоновые изображения, как правило, не связаны ни прямо, ни даже косвенно с содержимым страницы, как, например, графика кожи, глазные конфеты и оформление витрин. Их лучше всего хранить в CSS, а эту папку заблокировать от robots. Я использую папку skin в моей папке css . Это предотвращает индексацию изображений.
— это то, что мы прямо или косвенно связываем с содержимым нашей страницы. При наличии достаточной разметки и смежного контента поисковые системы могут принимать решения об индексации. Если вы не хотите, чтобы ваши изображения индексировались, не используйте элемент IMG или добавьте директиву
nofollow, noindex в метаданные страницы.
С точки зрения времени загрузки страницы изображения CSS будут первыми, а затем IMG. Однако, в отличие от скрипта, все это должно быть асинхронным и не прерывать загрузку изображений на страницу. Мы можем еще больше ускорить его, разместив изображения страниц на другой платформе (CDN) и размещая только изображения CSS на сайте. Это позволяет использовать несколько серверов и, следовательно, больше асинхронных портов. Браузеры обычно ограничены двумя портами на одном хост-сервере одновременно, но не ограничивают несколько серверов, каждый из которых имеет два открытых порта.
Нам не нужно вдаваться в подробности того, насколько важно иметь оптимизированные изображения, по крайней мере, для загрузки страницы, и делать изображения высокого качества доступными для пользователя, если это необходимо, через другую страницу или промежуточное объявление по щелчку пользователя. То же правило относится и к скин-графике. Сделайте их максимально оптимизированными. Не заставляйте браузер масштабировать изображения за вас.
Это дорогостоящий процесс, так как приходится вычислять размеры, необходимые для страницы, когда мы опускаем все важные 9 элементов.0162 ширина и высота атрибуты. Для этой цели также можно использовать CSS, если мы хотим, чтобы изображения меняли размер для разных окон просмотра.
3 лайков
мтф 4
Не по теме, вроде.
Когда мы хотим поделиться изображением высокого качества в Интернете, мы предоставим наилучшее доступное разрешение. Из упомянутой выше позиции старой школы, «межстраничного объявления», можно увидеть, насколько технологии продвинулись достаточно, чтобы дать нам прогрессивные высококачественные изображения , которые обычно включают размытое изображение, затем менее размытое изображение, затем представление об изображении, затем некоторая нечеткость с лучшим качеством и далее к окончательному высокому качеству.