Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript

в 11:57, , рубрики: web-дизайн, Блог компании Pixli, веб-дизайн, графический дизайн, интерфейсы, платформа для разработки, прототипирование, создание сайтов

Здравствуйте уважаемые читатели, после почти годового периода обкатки и тестов, мы выпустили в свет первую публичную версию нашего продукта – универсальную платформу для web-дизайнеров. Зачем вообще она создавалась – спросите вы. Об этом и пойдет речь ниже.

Идея создания платформы пришла нам в голову, когда на сложных страницах, в процессе верстки, возникало много разногласий между верстальщиком и дизайнером и на выходе получалось не совсем то, что виделось изначально. Особенно, когда речь шла о сложных эффектах. Разумеется, чтобы достичь должного качества мы тратили уйму времени на “шлифовку” работы. Мысль о том, что нужно как-то упрощать процесс, особенно на средне бюджетных проектах уже засела в головах.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 1

Сначала мы протестировали разные готовые решения, но в каждом чуть-чуть чего-то не хватало. И так родились требования – чего мы хотим:

  1. Удобный функционал, простое обучение.
  2. Адаптивная кроссбраузерная верстка.
  3. Возможность создавать сайт с “чистого листа”, с минимальным ограничением функционала со стороны платформы.
  4. Возможность программировать элементы самостоятельно.
  5. Возможность создать сайт без программирования элементов.
  6. Личный кабинет.
  7. Брендированный личный кабинет.
  8. Возможность создавать несколько сайтов и управлять ими.
  9. Возможность передавать управление сайтом своим клиентам.
  10. Возможность управлять своими клиентами.

Итак, вот 10 требований, которые мы предъявили платформе для того, чтобы наши дизайнеры могли в ней работать и творчески развиваться. Очевидно, что платформа будет и дальше развиваться, но эти требования — то, что можно получить «здесь и сейчас». Что будет дальше – время покажет. В любом случае, мы будем делать акцент на безупречной работе того, что имеем.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 2

Как мы начинали свой путь

Начинался проект, как рядовой редактор, каких много. Мы быстро это поняли и хотели большего! И поэтому постепенно уходили от разработки простых сайтов «для себя», к той платформе, о которой мечтали.

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

С технической поддержкой оказалось все гораздо сложнее. Первоначально, мы разработали продукт, идеальный для нас, но как оказалось, довольно сложный даже для клиентов с опытом. Пока мы не разработали доступные и понятные обучающие материалы, не отладили работу support-менеджеров, мы теряли 80% клиентов. Сейчас проблема ушла, но платформа по-прежнему ориентирована на профессионалов разработчиков и web-дизайнеров.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 3

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

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 4

В остальном, возможности сервиса похожи на возможности других платформ, за исключением “функционала для компаний и агентств”. Об этом можно будет поговорить в следующий раз.

Давайте лучше заглянем дальше. Добро пожаловать в визуальный редактор.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 5

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

Левую и правую панель можно спрятать, чтобы не мешали процессу творчества.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 6

Теперь поговорим о главном техническом отличии нашей платформы. Мы вышли за рамки обычного редактора и не предлагаем разрабатывать сайт из готовых кирпичиков. У нас их очень мало, и те в виде готовых виджетов:

  • табы;
  • видео;
  • галерея;
  • слайдер и т.д.

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

Иными словами, наша платформа позволяет создавать индивидуальную адаптивную верстку, не вдаваясь в код. По необходимости html, css и javascript легко внедряются, позволяя размещать свои собственные блоки. В этом и заключается уникальность нашего редактора – у нас можно реализовать довольно сложные “дизайнерские решения” средствами представленных в редакторе инструментов без использования стороннего кода.

Итак, первые пункты наших требований реализованы. Редактор есть, сайты создаются.

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

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 7

Что дает PIXLI разработчикам

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

Фриланс

Платформа дает единоличный контроль над всеми разработками, что избавляет от необходимости сотрудничества с frontend-разработчиками. Дизайн макеты можно делать непосредственно в браузере, используя визуальный редактор – он обладает необходимыми возможностями. Это позволит сэкономить время. Доступ заказчика к личному кабинету позволить ему видеть весь процесс создания от начала до конца. Это поможет вести разработку в режиме постоянных уточнений, а не получать замечания пост-фактум. Дизайн выполняется одновременно с адаптивной версткой.

Digital-агентства

Тесты показали, что платформа PIXLI позволяет сократить разработку дизайна почти в три раза. При этом в результате получается динамичный сайт с уникальным дизайном, адаптированный под все современные устройства. Профессиональный визуальный редактор позволил объединить прототипирование, дизайн и адаптивную верстку, с чистым семантическим кодом на выходе.

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

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

Компании

Главным преимуществом для компаний является оптимизация процессов создания сайтов. Платформа ускоряет процесс создания и запуска уникальных посадочных страниц и промосайтов. От идеи до ее реализации проходят считанные дни.

Для стартапов скорость изменения сайта или приложения бывает критичной. Платформа помогает быстро изменять дизайн в зависимости от тестов.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 8

Сколько вешать в граммах?

Попробуем проанализировать, позволит ли наша платформа сократить расходы на создание сайта и если да, то насколько?

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

Анализ исследований 2016 года показал, что в IT-сфере востребованными профессиями являются:

  • Web-разработчик:
    • html-верстальщик;
    • web-дизайнер;
    • web-программист;
  • контент-менеджер;
  • программист 1С;
  • разработчик мобильных приложений;
  • системный администратор.

Как видим, первые места занимают верстальщики и дизайнеры. Что удивительно при количестве предложений по разработке сайтов. Однако следует заметить, что речь идет не о фрилансерах с сомнительным портфолио, а о действительных профессионалах.

Сайт: временные рамки

Создание сайта – процесс достаточно длительный. Время его создания не ограничено, так как это работа творческая, зависит от требований заказчика. Можно выделить 5 основных этапов:

  1. Разработка технического задания – 5 — 12 дней.
  2. Подготовка контента – 5 — 15 дней.
  3. Дизайн сайта – 4-18 дней.
  4. Верстка сайта – 7 — 14 дней.
  5. Программирование – 5-21 дней.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 9

Мы брали средние значения времени, которое тратится на каждый шаг. Конечно, время существенно зависит от уровня разработчика, количества человек в команде, а также от заказчика. Если заказчик сайта твердо знает, что он хочет, то процесс сокращается. Минимальное количество дней, которое тратит среднестатистическая студия с командой из 5 человек, при параллельной работе, составляет 7 дней. Максимальное – 80 дней, это в случае разработки сложных сервисов. Конечно, эти цифры весьма приблизительны.

Финансовая сторона вопроса

Из чего складывается стоимость сайта? Опять же из стоимости каждого этапа разработки. Как правило, фирмы заявляют минимальную стоимость, которая очень различается и зависит от трудозатрат, раскрученности компании, объема портфолио и даже от региона. Например, корпоративный адаптивный сайт в Нижнем Новгороде можно заказать от 20000 рублей, а в Москве от 60000 р.

В среднем, если разбирать стоимость сайта по этапам его создания, то можно получить следующую картину для корпоративного сайта с элементами CMS:

  1. Разработка технического задания — бесплатно.
  2. Подготовка контента – приличный текст начинается от 200 р. за 1000 знаков без пробелов. Количество знаков на одной странице в среднем составляет около 3000. Для 10 страниц получаем что-то около 6000р.
  3. Дизайн сайта – от 2000 на фрилансе и до 0,5 млн. руб. за эксклюзив.
  4. Верстка сайта – 7000-20000 руб.
  5. Программирование – от 6000 р. на фрилансе и далее без ограничений.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 10

Исходя из этих цифр, можно сделать вывод, что реклама сайта за 20000 р. – это либо стартовая цена в длительном торге, либо цена за готовый дизайн в WordPress. Если же говорить о сайтах, созданных действительно под заказчика с уникальным дизайном с учетом пожеланий, и ручной версткой, то здесь цены начинаются от 50000 рублей минимум. Просто не могут быть меньше.

Можно ли упростить верстку?

Жаль это признавать, но ручная качественная верстка становится уделом избранных, хорошие верстальщики на вес золота, а их услуги дорогостоящие. На это сильно повлияло развитие технологий. 10 лет назад счастьем было получить резиновый макет, а сейчас он должен быть адаптивным под несколько разных устройств. Соответственно, существует огромный спрос на упрощение процесса верстки сайта. А раз есть спрос – найдется и предложение.

PIXLI – оптимизация затрат?

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

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 11

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

В итоге мы получаем затраты на заказ сайта в размере стоимости сайта+домен+хостинг=52949р. в первый год. Цены на хостинг и тариф были взяты с сайта RU-CENTER. Если же рассматривать годовую поддержку, сумма вырастает в разы – на 180000 в год. Итого 232949 рублей за первый год.

Что касается использования редактора, естественно все будет дешевле, так как хостинг и поддержка включены в абонентскую плату. Стоимость годового обслуживания для PIXLI будет составлять около 15000р.

Итак, давайте посмотрим, что получает разработчик сайта «для себя» за 15000 рублей в год на PIXLI:

  1. Возможность создания 15 сайтов. Ваша задача – разработка дизайна и сборка элементов в редакторе.
  2. Техническую поддержку и хостинг.
  3. Возможность самостоятельно сопровождать свой сайт – создавать резервную копию, обновлять информацию, менять дизайн.

Дизайн сайта можно сделать на основе шаблона или заказать на стороне. Сейчас это стоит от 20000 рублей. Зарплату сотрудника, который занимается созданием сайта, мы не учитываем по той причине, что вряд ли компания будет нанимать кого-то на стороне. Чаще всего, как показывает наш опыт, если им потребовались такие услуги, значит, уже кто-то есть, способный создать сайт. Итак, вы экономите за счет верстки, поддержки, хостига.

Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript - 12

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

Заключение

Разрабатывая платформу PIXLI, мы исходили из собственного опыта создания сайтов на заказ. Нам было не сложно встать на сторону целевой аудитории и посмотреть ее глазами на инструментарий разработки. Мы постарались максимально автоматизировать верстку, оставив достаточно простора для творчества. Кроме редактора мы выстроили платформу, которая позволяет разработчику управлять своим бизнесом из одной локации — личного кабинета.

Среда PIXLI еще молода, находится в непрерывном развитии. И мы обещаем, что оно не остановится еще очень долго, радуя наших клиентов новыми возможностями и вкусными бонусами.

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

Верстать сайт вручную или использовать инструменты – каждый решает сам. Однако само наличие выбора уже делает жизнь легче и приятней.

Автор: Pixli

Источник

Поделиться

* - обязательные к заполнению поля