Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!
Во-первых, процесс разработки в каждой компании строится по разному. Где-то он состоит из большого количества этапов, с участием различных специалистов и занимает существенное время. Где-то все происходит проще и быстрее.

Во-вторых, многое зависит от требований, которые предъявляет к конечному продукту заказчик. Чем больше требований, тем больше человеко-часов необходимо на работу.

Время чтения: 5 мин
28 мая 2021 г.

Сравнение этапов разработки сайта

Верстальщик берет макет и переводит его в html-код. Далее пишутся скрипты, которые оживляют проект: кнопки нажимаются, заявки отправляются, калькуляторы работают и прочее
Дополнительно к сайту подключаются метрики для отслеживания аналитики, пиксели, устанавливается SSL-сертификат
HTML-верстка и программирование
CMS (система управления сайтом)
На этом этапе проект подключается к админке, с помощью которой далее будут вноситься изменения на сайте: добавляться новые страницы и статьи, логотипы партнеров и прочее
Сайт подключается к уникальному адресу в интернете
Сайт пока — набор файлов и папок. Для того чтобы он работал, его необходимо загрузить на хостинг (сервер-хранилище)
Это процесс сканирования сайта поисковиками и занесения его страниц в поисковую выдачу (Гугл, Яндекс и прочие)
#
#
#
#
#
Верстальщик берет макет и переводит его в html-код. Далее пишутся скрипты, которые оживляют проект: кнопки нажимаются, заявки отправляются, калькуляторы работают и прочее
Верстка на Тильде
Сайт далее может хостоваться у Тильды
Техническая оптимизация
Делаем адаптив, подключаем формы, проверяем работу всех элементов. Повторимся, что этапов разработки на самом деле гораздо больше (о них — в наших модулях), но они справедливы в общем для всех сайтов, а сейчас мы показываем именно отличия Тильды от других способов создания проекта в интернете
Вы сможете в любой момент редактировать проект, добавлять новые страницы и вносить в него любые изменения, какие угодно вашей душе. Кроме этого, сайт можно подгрузить по API в ваш сайт на другой платформе, а также код проекта может быть экспортирован и загружен на ваш хостинг (такой, как при обычной разработке). В первом случае страницы можно будет собирать и редактировать на Тильде, а во втором вы утратите возможность редактирования, в режиме онлайн, но можете «перезагружать» измененные страницы на сторонний хостинг (или кодить)
#
#
#
Дизайнер использует Тильду как дизайн-инструмент (по большому счету, все равно, что использовать, Фотошоп или Тильду — принципы там примерно одинаковые). И сайт сразу работает.
# На Тильде логика почти такая же, только упрощенная: html-верстка и программирование не требуются, а CMS и хостинг предоставляется самой Тильдой
#
Домен
Хостинг
Индексация
Шаг 1 ИЗУЧЕНИЕ
#
Изучить нишу, составить список из 20 шаблонов подходящих под тематику.
Требования
Ожиданий от дизайна.
Объема контента.
Интеграции с внешними сервисами.
От стоимости ставки одного специалиста. Ставки специалистов в разных компаниях отличаются.
Полный цикл разработки сайта с нуля.
Упрощенный цикл разработки сайта за 20 000 рублей.
Шаг 1 ИЗУЧЕНИЕ
#
Исследовать компанию или персону, для которой разрабатывается проект, собрать все требуемые данные для сайта. Ответить себе на вопрос: Что мы знаем о том, кому будет служить сайт?

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

Собрать мудборд (подборку с вдохновляющими примерами), ответить себе на вопрос: Как сделали другие и можем ли мы их превзойти?
Шаг 2 ИДЕЯ И СТРУКТУРА БУДУЩЕГО САЙТА
#
Все твердят: «Сайт начинается с контента», «Контент — король» и вот это все. На самом деле это не совсем так. Сайт начинается с идеи и понимания структуры. Задача этапа — получить ответ на вопрос «Что делаем?». Сколько в нашем сайте будет страниц? О чем примерно будем на них говорить и почему? Результатом этого этапа должны стать описанная концепция, схема будущего сайта и ТЗ на тексты.
Шаг 2 ИЗУЧЕНИЕ
#
Выбрать более подходящий шаблон для заданной тематике. Показать клиенту. Внести правки и отредактировать шаблон под клиента. Поменять телефоны, адреса, фразы.
Шаг 3 ТЕКСТЫ
#
Этот шаг можно разбить на несколько частей:
1. Придумываем центральный оффер или работаем с его формулировкой. Кто мы такие и что нам надо от посетителей сайта?
2. Пишем текст. В уроках попробуем рассказать о методике, которая позволит написать текст, даже если вы этого никогда не делали.
3. Редактируем. В агентстве это обычно делает профессиональный редактор — указывает на слабые места. В уроках расскажем, как можно «сымитировать редактора».
4. Проверяем ошибки. Корректор вычитывает текст.
5. Оптимизируем текст. Прописываем основные мета-теги
Шаг 4 ПРОТОТИП
#
Подготовить прототипы Прототип схематично изображает полную структуру сайта, расположение текста (работаем уже с реальными текстами), изображений, видео, ссылок. Важно понимать, что прототип — это не дизайн. Это просто серая схема с текстами, которую дизайнер будет использовать далее, «натягивая» дизайн на этот каркас
Шаг 5 ДИЗАЙН
#
Определиться с дизайном (эскизы) и отрисовать типовые блоки На этом этапе можно подготовить несколько визуальных концепций. Для этого не нужно отрисовывать все страницы сайта, достаточно одной, например, главной. После того как определимся — готовим визуализацию для типовых блоков, которые встречаются на других страницах, и фиксируем стили: кегли и начертание текста, отступы и цветовые решения
Шаг 5 ВЕРСТКА НА ТИЛЬДЕ
#
Этот шаг можно разбить на несколько частей:
1. Верстка главной страницы, типовых блоков, хэдера и футера. Именно они определяют, как сайт будет строиться дальше — как хорошо вы сделаете заготовки = как быстро и правильно будет идти далее верстка.
2. Вот здесь готовится адаптив главной и типовых блоков: как сайт будет выглядеть на планшете и смартфоне.
3. Верстка корневых страниц. Готовим основные типовые страницы (которые могут служить шаблонами для прочих — например, мы создаем одну страницу Услуги, а все остальные будут строиться по этому же принципу).
4. Наполнение контентом. Здесь речь пойдет о заполнении карточек товаров, или верстке статей блога, или заполнении всех Услуг.
5. Верстка технических страниц. Страницы Ошибки и Успеха, Политика обработки персональных данных, Публичная оферта.
6. Проверяем адаптив. Убедитесь, что все страницы со всех устройств отображаются корректно
Шаг 5 ОПТИМИЗАЦИЯ
#
Техническая оптимизация, подключение необходимых интеграций (системы аналитики, рассыльщики) и систем оплаты
Какие работы нужно провести:
1) тестирование работы сайта (проверить, чтобы все кнопки нажимались и вели, куда нужно);
2) подключение и тест форм (куда уходят данные при заполнении форм?);
3) подключение и тест иных интеграций (от CRM до платежных систем);
4) подключение систем аналитики (Яндекс Метрика и Google Analytics) и пикселей (например, Facebook и ВКонтакте);
5) подключение SSL;
6) проверка работы технических страниц;
7) проверка индексации;
8) проверка метатегов и установка бейджей для социальных сетей;
9) установка фавикона;
10) подключение доменного имени.
Шаг 5 ПОДДЕРЖКА
#
При эксплуатации сайта вам наверняка потребуется вносить изменения в контент, а также следить за тем, чтобы все работало корректно. Этот этап и называется поддержкой или сопровождением
Вы сможете в любой момент редактировать проект, добавлять новые страницы и вносить в него любые изменения, какие угодно вашей душе. Кроме этого, сайт можно подгрузить по API в ваш сайт на другой платформе, а также код проекта может быть экспортирован и загружен на ваш хостинг (такой, как при обычной разработке). В первом случае страницы можно будет собирать и редактировать на Тильде, а во втором вы утратите возможность редактирования, в режиме онлайн, но можете «перезагружать» измененные страницы на сторонний хостинг (или кодить)
# Тильда позволяет оптимизировать работу и помочь управляющему (менеджеру) без навыков заниматься оформлением кейсов. Тильда имеет большое количество блоков, но для того что бы оформить любой кейс достаточно даже 15 типовых блоков.
Цель данной- статьи рассказать о тех блоках которые являются самыми популярными и универсальными, и показать как с их помощью можно создать прототип любого сайта. За основу будут взяты несколько сайтов, и переработаны с помощью стандартных блоков тильды. По результатам эксперимента произведем сравнение оригинального сайта и сайта собранного из стандартных блоков.
#
Что можно делать на Тильде?
ДИЗАЙН МАКЕТ
#
Это постраничная визуализация сайта. Макет готовит веб-дизайнер, и уже на этом этапе можно понять, как сайт будет выглядеть. Но пока он — картинка, которая не имеет адреса в интернете, не ищется, не индексируется и пока не работает. Обычно готовится в Фотошопе, Скетче, с недавних пор — в Фигме, а вообще, в любой удобной графической программе — по согласованию с верстальщиком, которому будет передаваться макет
ЛЕНДИНГ
#
Промо-сайты, сайты для мероприятий или HR-целей, Маркетологам нужны лендинги для мероприятия, Тильда держит посещаемость ресурса 20 тысяч человек в день, не падает от нагрузок, все люди пришли, организаторы счастливы!
КОРПОРАТИВНЫЙ САЙТ
#
На Тильде можно делать полноценные большие многостраничные сайты для бизнеса, со сложными перелинковками, с новостями и контент-проектом внутри. Единственное ограничение для корпоративных порталов — лимит в 500 страниц в рамках одного проекта. Но этого более чем достаточно, редкий подобный сайт имеет более 50 страниц
ИНТЕРНЕТ-МАГАЗИН
#
На Тильде можно делать интернет-магазины до 500 (если нужно, чтобы каждый товар имел отдельную страницу) и до 5000 товаров (если они организованы с помощью каталога). Особенно классно в Тильде то, что можно протестировать нишу с минимальным вложением ресурсов — сделать своеобразный MVP магазина, пустить на него трафик и понаблюдать за продажами. Дальнейшую разработку — сложные личные кабинеты, избранное и прочее — можно будет финансировать уже из заработанных средств.
ЛИЧНЫЙ САЙТ ИЛИ ПОРТФОЛИО
#
Прекрасный и быстрый способ создать свое портфолио и рассказать о себе — сделать сайт на Тильде. Обновляйте работы, принимайте заказы
БЛОГ ИЛИ СПЕЦПРОЕКТ
#
Тильда отлично подходит для ведения блога. Но вам нужно знать о двух минусах. Во-первых, в Тильде совсем недавно появился способ организации контента — Потоки, с ними можно сделать теги, но этот инструмент пока сыроват. Во-вторых, есть ограничение в 500 страниц (тоже надеемся, что его снимут). При регулярном выпуске 10 материалов в месяц сайта хватит на 4 года. То есть пока для контент-проектов Тильду можно рассматривать как временный вариант
ПРЕЗЕНТАЦИИ
#
В Тильде можно создать презентацию из полноэкранных проектов и перемещаться от слайда к слайду с помощью кнопок «вверх-вниз». Добавьте блок Т203 в категории Другое — и каждый блок превратится в отдельный слайд
Точнее, на сегодняшний день один редактор. Внести изменения в текст, добавить картинки, даже сделать простой адаптив, который дизайнер упустил из виду, — редактору это по силам.
РЕДАКЦИОННАЯ
Задачи того же плана: поменять предложения, даты курсов, условия, добавить блок или форму.
МАРКЕТИНГОВАЯ
В том числе я в качестве арт-директора.
Глобальных неразрешимых проблем с Tilda не помню — разве что частности. Как человек, старающийся сохранять корпоративную идентичность, я почти всегда пользуюсь zero-блоками и избегаю стандартных. Между тем в Zero Block, как ни странно, нельзя сделать некоторые вещи, которые доступны в обычных, не кастомных блоках. Хотя вот недавно в Zero Block добавили формы и стало гораздо лучше.
ДИЗАЙНЕРСКАЯ
Какие сотрудники могут работать в Тильда?
Мы до сих пор живём в формате стартапа, поэтому у одного человека в команде часто целый веер обязанностей. Так что с Tilda в Contented работают три группы сотрудников:
# В итоге главный профит от Tilda непосредственно для нас — скорость и экономия ресурсов.

# " В целом, пожалуй, я бы даже не применял к Tilda термин «конструктор». Стандартные блоки, с которых она начиналась, в настоящее время явно не основная ее функциональность. Профессиональные дизайнеры и, шире, команды продакшена скорее предпочитают Zero Block, который идеологически гораздо ближе к базовым принципам создания цифрового продукта. "
# " С созданием лендинга справляется один дизайнер. Хорошо бы, чтобы при этом у него были базовые знания CSS. Впрочем, мы наработали свою базу шаблонов — тех блоков, которые устраивают наших внутренних заказчиков, хорошо адаптируются и предсказуемо ведут себя в пространстве Mos.ru. Благодаря им менеджеру по силам самостоятельно собрать лендинг всего за несколько часов — при условии, что контент полностью готов.
Это бывает актуально, когда нужно выпустить проект суперсрочно. "
# " Эта своеобразная библиотека родилась из решения сделать для наших редакторов готовый формат лонгрида с админкой. Мы тогда не смотрели на Tilda, а опирались на формат наших редакционных материалов — то, как написаны статьи, — собирали референсы по другим СМИ и в результате сделали макет с несколькими видами галерей, врезок и цитат. И обнаружили, что всё это реализуемо на Tilda.
К тому времени у нас уже была создана инфраструктура для импорта проектов с Tilda по API. Перенести проект с платформы может практически любой, включая операторов службы поддержки. Никаких специальных навыков не надо — только доступ в админку.
У нас при импорте автоматически подтягиваются наши шапка и подвал, счётчики, в админке можно задать метатеги и OpenGraph-теги для страницы.
Иногда некоторые блоки после выгрузки на сайт могут вести себя некорректно. Например, в блоке с развлекательном тестом не работала «шарилка». Мы обратились в службу поддержки Tilda и попросили сделать так, чтобы при шаринге прописывались не абсолютные, а относительные пути. На нашу просьбу откликнулись довольно быстро, блок починили. Так что маленький совет: если можете произвести диагностику — делайте это сами и просите о конкретном решении. "


По нашему опыту, достаточно одного, причём даже внештатного, дизайнера, чтобы собрать приличный лендинг. Как следствие, маркетинг в YouDrive удалось сделать независимым от айтишников, точнее, от степени их загруженности.
# " Как видно по комментариям экспертов, Tilda встраивается в бизнес-процессы самых разных компаний. Наверняка вы заметили, что выделяются типовые кейсы ее применения — например, оперативно соорудить лендинг о новом продукте или мероприятии, создать блог или сверстать статью. Бывают и более необычные сценарии: оформление писем для рассылок, создание обучающих курсов. Если перед вами стоят задачи, похожие на те, о которых рассказали наши герои, то с оглядкой на эти шесть историй, надеемся, вам будет проще попробовать Tilda и освоиться с ней.. "
#
Отзывы о тильде других пользователей
Если перед вами стоят задачи, похожие на те, о которых рассказали наши герои, то с оглядкой на эти шесть историй, надеемся, вам будет проще попробовать Tilda и освоиться с ней!
Tilda Publishing
# На самом деле Тильда отличный инструмент, если знать его ограничения и особенности. Мы (digital-агенство), например, на порядок увеличили обороты и лояльность клиентов за счет увеличения скорости разработки. При этом на аналитику, проектирвание и креатив получается выделять еще больше времени – что влияет на качество продукта, как нильзя лучше.
# Если перед вами стоят задачи, похожие на те, о которых рассказали наши герои, то с оглядкой на эти шесть историй, надеемся, вам будет проще попробовать Tilda и освоиться с ней!
За что платить Тильде?
1
#
Как видно по комментариям экспертов, Tilda встраивается в бизнес-процессы самых разных компаний. Наверняка вы заметили, что выделяются типовые кейсы ее применения — например, оперативно соорудить лендинг о новом продукте или мероприятии, создать блог или сверстать статью. Бывают и более необычные сценарии: оформление писем для рассылок, создание обучающих курсов.
2
#
Сайты на Тильде дешевле и быстрее в разработке и поддержке, а также хорошо индексируются поисковиками И не важно, каков уровень дизайна — за 10, 100 или 500 тысяч рублей. Вы в любом случае не будете платить за этап html-верстки и программирования. Кроме того, вы сэкономите время, не проводя эти работы. Таким образом, вы сможете быстрее проводить AB-тесты, и, как следствие — быстрее запускать продукты. С SEO у Тильды также все в порядке.
3
#
Уже готовые интеграции с популярными сервисами, платежными системами и встроенная CRM Тильда интегрирована примерно с 20 популярными сервисами для приема форм и с 12 платежными системами.
4
#
Масса других плюшек: конструктор писем, анимация блоков Рассылку можно делать прямо в Тильде (так же просто, как и верстать сайты), подключить один из сервисов рассылок, например, Mailchimp, и отправить красивое письмо. Сайты на Тильде можно анимировать. В Тильде есть генератор UTM-меток.
# В итоге главный профит от Tilda непосредственно для нас — скорость и экономия ресурсов.

"Для меня верхом заботы о пользователях стало создание Тильдой после вступления в силу поправок к ФЗ-152 Конструктора политики конфиденциальности. Это говорит о большой клиентоориентированности. Как и работа службы тех. поддержки. Доходило до того, что мне присылали куски CSS, чтобы я мог кастомизировать стандартный функционал так, как мне было нужно."
В какой-то момент у Tilda Publishing начали появляться настоящие евангелисты. Самый заметный из них бесспонрно
Максим Ширко — умный, харизматичный, часто перегибающий палку. Он создал Тильда-сообщество под названием Тильдошная, каталог веб-студий (аналог Tilda Experts), несколько образовательных курсов и в конце концов стал сотрудником Tilda Publishing.
#

Как перенести сайт на Тильду и зачем это делать?

Как перенести сайт на Тильду и зачем это делать?
К сожалению, ответ неутешительный. На чем бы не был сделан ваш сайт, не существует возможности его автоматического переноса. Чтобы перенести сайт на Тильду, вам придется с нуля создавать его в Тильде. Вы можете практически один в один воспроизвести дизайн (возможности Тильды, в частности, Zero Block, это позволяют), но все содержимое вам необходимо вручную добавлять в блоки конструктора. Переподключать домен. Даже фавикон вам придется вручную грузить в Тильду.
Этим вопросом задаются многие владельцы сайтов и специалисты, по достоинству оценившие возможности Тильды. Но как быть, если у тебя есть сайт на Wordpress или 1C-Битрикс и ты, как и многие, решил перейти на Тильду?
"Интересно, с чем приходилось работать на этапе пресейла — мне присылали дизайн-макеты в самых разных форматах, подробно проработанные ТЗ или абзац текста, mind map и даже ссылки на сайты с просьбой скопировать один в один."
Каталог
Также тильда имеет такой важный и нужный инструмент как встроенный каталог, который синхронизируется с 1С и позволяет группировать продукции и товары.
Каталоги дают возможность каждому товару присвоить свой единственный адрес, что позволяет избежать дублирование контента.
Товарам в каталоге можно задавать свойства, которые будут влиять на цену и она будет расчитываатся и меняться автоматически
Каталоги позволяют делать фильтры по свойствам товаров, а затем выгружать это в эксель таблицу.