14 June 2013

Возможно ли создать сайт-визитку за 40 минут? Мой опыт

Блог компании TemplateMonster Russia corporate blogWeb design
Существует большое количество инструментов как для создания прототипа сайта, так и быстрого разворачивания сайта «с нуля», которые позволяют создать что-то в Сети и оперативно это обсудить/поменять буквально за несколько минут. Для интернет-магазина можно воспользоваться InSales, WebAsyst, WinShop или SiteBerry. Для создания готовых сайтов сервисов еще больше — к списку можно добавить имеющиеся у провайдеров Jimdo, Setup, Wix и многочисленные платформы для блогов. Но онлайн-сервисов для быстрого создания уникального дизайна сайта (с учетом обычной и мобильной версии) почти нет. Поэтому я расскажу о MotoCMS, как инструменте прототипирования и быстрого дизайна сайта.

Основная миссия MotoCMS — быстрое и бюджетное создание сайта-визитки, сервис позволяет успешно решить следующие задачи:
  • Подобрать сетку сайта и цветовое решение
  • Согласовать основные шаблоны на примере готового сайта
  • Быстро внести изменения в дизайн прямо в браузере
  • Быстро согласовать тексты и изображения на сайте
  • Легко добавить базовый функционал для сайта

Хотя на сайте MotoCMS заявлено, что это шаблоны Flash-сайтов, далеко не все из них Flash, есть и обычные HTML. Например, тот, который использовался для данной статьи. Как заявляют разработчики, MotoCMS была изначально Flash-админкой сайтов с Flash-шаблонами, но потом разработчики полностью перешли на HTML формат в шаблонах. Сейчас шаблоны MotoCMS наиболее удобные, функциональные и отвечающие всем требованиям к сайтам-визиткам.

Выбор шаблона


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

<Шаблоны MotoCMS

На самом шаблоне нужно нажать тестировать шаблон в течение 30 дней — и на указанный e-mail будет выслана ссылка для редактирования и просмотра шаблона.

Выбор шаблона

Доступно большое количество шаблонов для первоначального редактирования, вот некоторые примеры

Шаблон 1

Шаблон 2

Шаблон 3

Шаблон 4

Шаблон 5

Редактирование — базовые возможности


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

Редактирование на лету

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

Редактирование слайдера

Редактирование контента

Редактирование меню

Выбор медиа

Настройки сайта содержат все необходимые базовые параметры — доступ, SEO, аналитика, шрифты и медиа-файлы, а также основные настройки дизайна для сайта — минимальный размер сайта, цвет фона, изображения.

Настройки

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

Редактирование — изменение функционала


Как я уже сказал, на любую страницу сайта кроме текста, изображения или видео можно добавить произвольный виджет. Возможных вариантов виджетов большое количество, они позволяет собрать прототип сайта, действительно, за несколько минут. Некоторые из доступных виджетов:
  • Галереи, слайды и карусели изображений (с возможностью гибко задать поведение дополнительных текстовых блоков).
  • Форма обратной связи (с развернутым функционалом — кто реализовывал подобные вещи самостоятельно, знают, что один такой виджет дорогого стоит).
  • Меню вертикальное и горизонтальное
  • Карты Google
  • Кнопки, видео, платежные (только через PayPal, к сожалению) кнопки и HTML-виджеты.

Виджеты

Виджет формы

HTML-виджеты заслуживают отдельного внимания: ведь с их помощью можно реализовать любой функционал (как на клиентской, так и на серверной стороне). Кроме этого поддерживается огромное количество готовых кодов от Google, Facebook, ВК, Twitter, Dropbox, Box, Flickr, Vimeo, Blogger и многих других. Для каждого кода присутствует инструкция, как его получить на исходном сервисе, чтобы вставить на сайте.

HTML виджет

Для примера — изменения между этими двумя страницами были проделаны за 5 минут.

До изменений

После изменений

Фронтенд


На клиентской стороне все также безупречно, как и в административной панели. Кроме всего прочего у каждого сайта (или шаблона) есть мобильная версия, которую можно отдельно отредактировать (на базе всех существующих галерей и элементов дизайна). Переключение между страницами сайта происходит через AJAX, что может несколько испортить впечатление (долго висит индикатор загрузки), но весь сайт выглядит ровно так же, как и при редактировании — и это немаловажный плюс.

Динамическая загрузка

Все содержимое сайта контролируется собственной библиотекой — MotoJS — в которую загружаются данные о всей структуре и настройках сайта. Разработчики хорошо постарались, чтобы сделать ее кроссбраузерной (в том числе, и для мобильных устройств).

Заключение


После нескольких часов использования к системе быстро привыкаешь, и все действия по редактированию сайта выполняются так же быстро, как ив графическом редакторе. Можно поздравить команду MotoCMS: у них получился отличный инструмент для дизайнеров по созданию быстрых прототипов сайта, а также для вебмастеров по созданию сайтов визиток. Большой каталог шаблонов на любой вкус позволяет выбрать тот, который больше всего подходит для конкретной задачи.

30-дневная демо-версия MotoCMS позволяет сначала выбрать подходящий шаблон, получить его с админкой по персональной ссылке, вносить изменения и сохранять полученный результат. Потом в течение нескольких дней (или недель) обсудить все поправки от заказчика по факту готового прототипа сайта. Это идеальное решение для фрилансеров и небольших веб-студий, когда сначала можно показать клиенту готовый результат, потом получить деньги и уже только потом купить шаблон, причем со всеми внесенными изменениями.
Tags:прототипированиесайт-визиткасистема управления сайтамидизайншаблоны
Hubs: Блог компании TemplateMonster Russia corporate blog Web design
-32
38.7k 57
Comments 3