Хочу представить вашему вниманию обзор сервиса для создания адаптивного дизайна – Webflow.

Webflow: делаем адаптивный дизайн без единой строчки кода

Обзор сервиса для создания адаптивного дизайна – Webflow.

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

Дизайн сделан в приятных тонах и с удобным интерфейсом. Далее разработчики сего детища позаботились о мануалах: после прохождения регистрации и создания аккаунта, мы получаем доступ к обучающему видео. Думаю, что даже те, кто с английским на «Вы», легко освоят азы сервиса Webflow.

Рассмотрим подробнее интерфейс сервиса. Начнем с простого – создания проекта.

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

Рабочая среда выгладит примерно так:

И так, справа мы видим элементы (html, iframe, video, forms, etc), которые мы можем перетащить (drag-n-drop) на страницу макета.

Скажу сразу, что сетка здесь 960px, что очень удобно, так как тенденции дизайна в наши дни склоняются именно к ней.

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

Здесь мы видим знакомые нам css-свойства, которые можно установить без единой строчки кода, так как сервис сам генерирует его, а нам достаточно прописать размер либо же перетащить ползунок.

Панель слева позволит тестировать нашу страницу под все основные разрешения экранов, то бишь тестить адаптивную верстку, а также экспортировать наши «наброски» в исходный код.

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

Плюсы:

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

Минусы:

  • Сервис платный и цена его немаленькая.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>