Создание

сайтов

на

Tilda

snitko.pro

Создание сайтов на Tilda


  • Михаил Снитко
  • 02 Июня 2021

Создание сайтов на Tilda

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

Специализация

1. Определиться с тем, что буду разрабатывать: лендинги, сайты-визитки, интернет-магазины, лонгриды, промо-сайты.

2. Чтобы зарабатывать нужно не учиться всему, а стать профессионалом в узкой сфере.

3. Чтобы выбрать специализацию, нужно ответить на вопрос “Что мне интуитивно нравиться”, оценить рынок услуг разработчиков на Тильде и рынок запросов в группах и т.д.

4. Определиться с ЦА.

5. Это промо-страницы (мероприятия, курсы, обучение...), лендинги (производства, строительство…), сайты-визитки (общ. организации, детские сады…)?

6. Сужение ЦА лучше продает, но требует большей подготовки.

Опыт

1. Делать сайты для себя.

2. Делать сайты друзьям.

3. Делать сайты бесплатно или за символическую цену.

4. Делать сайты за отзыв.

Портфолио

1. Сделать в виде сайта/лендинга для себя.

2. Разместить свою фотографию или видео.

3. Описать кто я и чем полезен.

4. Показать свои лучшие работы.

5. Указать стоимость работ.

6. Разместить отзывы заказчиков.

7. Добавить свои контакты и возможность заказать услуги.

8. Описать подробно что я делаю и как это работает.

9. Указать тонкости: что делает меня хорошим.

10. Указать ограничения: чем не смогу помочь и что тогда делать.

11. Описать миссию, стратегическую цель и интересы.

12. Добавить изюминку.

13. Создать свою группу в соц. сетях.

14. Публиковать туда свои работы, как только заканчиваю их.

15. Собирать отзывы заказчиков.

16. Писать полезный контент.

17. Группа помогает развеять оставшиеся сомнения заказчика.

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

1. Изучить возможности Тильды. Справочный центр и практические руководства. https://help-ru.tilda.cc/ Цель: знать в каком разделе искать инструменты.

2. Копировать сайты. Это способ получения навыков разработки. Задача: выбрать 5-7 сайтов и скопировать с максимальной точностью.

Стратегия выхода на рынок

1. Копируем сайты, нарабатываем навык (2 нед)

2. Берем первые заказы, организовываем работу, делаем портфолио, нарабатываем отзывы, работаем по цене заказчика (2 нед.)

3. Поток заказов, качество выше цены, нарабатываем портфолио и репутацию, определяем цену работы (2 мес.).

4. Заказов больше, чем можем выполнить, зарабатываем деньги, выбираем проекты (3 мес. от начала деятельности).

5. Избирательно относимся к проектам, берем только дорогие и качественные проекты, поднимаем стоимость работ (1 год после начала)

Альтернативный подход

1. Сотрудничать с веб-студиями в роли подрядчика.

2. 2-3 студии обеспечат заказами.

Необходимые качества

1. Пунктуальность.

2. Дисциплина.

3. Работа на результат.

4. Доводить дела до конца.

5. Работать сфокусировано.

6. Видеть цель.

Программы

1. Photoshop.

- Уменьшение изображений, оптимизация по веб.

- Обрезка фото.

- Волшебный ластик - удаление фона.

- Размытие и резкость.

- Коррекция изображений.

- Слой-маски - переход одного изображения в другое.

2. Joxi - скриншотер

3. Svg explorer extension - отображение svg файлов в проводнике.

Расширения

1. ColorZilla - определение цвета.

2. WhatFont - определение шрифтов.

3. Emmet Re:vie - проверка адаптивности.

4. LastPass - менеджер паролей.

Сервисы

https://www.flaticon.com/ - поиск иконок

https://webfonts.pro/ - шрифты

https://color.adobe.com/ - побор палитры

https://colorscheme.ru/ - побор цветов

https://colorhunt.co/ - готовые палитры

• https://www.canva.com/ - дизайн без знаний

http://getcover.ru/ - созание мокапов

https://mind42.com/ - интеллект-карты

https://ru.todoist.com/ - задачник, ежедневник

https://toggl.com/ - учет рабочего времени

Расчет стоимости часа работ, доказательство работы для заказчика. Таблица статистики (Проект/ Стоимость/ Время/ Стоимость часа)

Работа с заказчиками

1. Работать с теми, кто приятен по первому впечатлению.

2. Говорить правду.

3. Соблюдать сроки, отвечать за слова.

4. Поддерживать рабочие отношения, не дружеские.

5. Если клиент что-то просит - говорить “да”.

6. Направлять заказчика, общаться по делу.

7. Работать профессионально.

8. Общаться по проекту там. где мне удобно.

Алгоритм работы с заказчиком

1. Квалификация заказчика.

2. Выяснение подробностей проекта.

3. ТЗ.

4. Договоренность, предоплата.

5. Выполнение работы.

6. Оплата 2 части, обратная связь.

Квалификация заказчика

В месяц нужно 4-5 проектов. Не нужно браться за каждый. Задача понять:

1. Хочу ли работать с заказчиком?

2. Смогу ли выполнить проект?

3. Подходит ли проект по срокам и деньгам?

Вопросы на этапе квалификации:

1. Опишите максимально подробно вашу задачу.

2. К какому крайнему сроку нужно закончить проект.

3. Структуру сайта и тексты предоставите вы, или это с меня?

4. Какой бюджет проекта?

5. Есть ли ТЗ или прототип?

Если заказчик адекватно ответил на все вопросы - переходим к следующему этапу.

Подробности проекта

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

1. Максимально подробно описать проект.

2. Скидываем каталоги лучших сайтов и просим выбрать ТОП- 5 https://land-book.com/, https://www.behance.net/

3. Спрашиваем, есть ли сайты, откуда можно взять информацию.

4. Спрашиваем, есть ли тексты для сайта.

5. Просим подготовить видео, фотографии, кейсы, отзывы.

ТЗ

1. Это правила, по которым играем с заказчиком. Если правила не установлены - заказчик может их нарушать.

2. Контент можно включать в ТЗ, но не обязательно.

3. Составлять ТЗ в свободном стиле простыми словами.

4. Что должно быть в ТЗ:

- Какие блоки/страницы будут разрабатываться на лендинге/сайте.

- Время работы на каждой страницей

- Стоимость разработки за объем, прописанный в ТЗ

- Порядок оплаты и сроки разработки

- Как будет происходить разработка

Расчет стоимости проекта

1. Рассчитывается исходя из затрат времени на проект.

2. Трудозатраты зависят от скорости работы.

3. Чем выше скорость работы, тем больше стоимость часа.

4. Расчет делаем в 2 этапа:

- приблизительный расчет на этапе квалификации (кол-во блоков * 1 час * стоимость часа * 1,15 = стоимость проекта)

- точный расчет по техническому заданию, исходя из опыта определяем время на каждый блок (дизайн + настройка)

5. Прописывать время на каждый блок в ТЗ. Так происходит обоснование цены.

Расчет сроков

1. Поблочно по ТЗ рассчитываем количество часов на проект.

2. Прибавляем к рассчитанному времени 25% на согласование, правки, ступор.

3. Рассчитать количество рабочих дней исходя из 4-5 рабочих часов в день.

4. Не забывать про выходные, чтобы не перегореть.

5. Уведомлять заказчика, если не успеваем.

Взаиморасчеты

1. Уверенно называем цену из ТЗ, т.к. есть обоснование.

2. Преоплата 30-50%.

3. Создаем сайт на своем аккаунте, передаем проект только после полной предоплаты.

4. Вторую часть оплаты берем перед привязкой домена и формы оплаты.

Правовые отношения с заказчиком

До оформления ИП можно работать как физ.лицо.

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

Поиск заказов

1. Группа ВК Тильды.

2. Свой сайт и группа в соц.сети.

3. Объявления в группах бизнес направленности.

4. Партнерство с веб-студиями.

5. Рекомендации.

6. Контекстная реклама Яндекс и Google

7. Таргетированная реклама ВК, FB, Instagram

8. При хорошем выполнении заказы нужно будет искать в течение 1-2 месяцев

Этапы работы с проектом

1. Подготовка контента для сайта.

2. Создание дизайн-концепции.

3. Разработка дизайна в стандартных и Zero блоках.

4. Адаптация дизайна.

5. Настройка сайта.

6. Тестирование и публикация.

Контент на сайте

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

Весь контент оформляется в виде полного или упрощенного прототипа. Если не умеете делать контент, нужно брать заказы, где он подготовлен.

Разработка дизайн-концепции

Это 2 первых экрана,в которых отражена основная идея дизайна: цветовая палитра, шрифты, кнопки, изображения, структура, расположение и геометрия элементов.

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

Алгоритм разработки дизайн-концепции

1. Ищем референсы.

2. Придумываем идеи.

3. Подбираем изображения для первого экрана.

4. Подбираем цветовую палитру.

5. Подбираем шрифты.

6. Разрабатываем первый экран.

7. Показываем заказчику.

8. Дорабатываем варианты, пока не согласуем концепцию с заказчиком.

Поиск референсов

1. Выбрать понравившиеся дизайны сайтов. https://www.behance.net/, https://land-book.ru/, https://land-book.com/, http://flatinspire.com/, https://awwwards.com/

2. Собрать референсы. Сохранить понравившиеся элементы в документ.

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

Подбор изображений

1. Ширина изображения на фон - 1680 пикселей

2. Отсутствует пикселизация изображения

3. Форматы jpg, png

4. Каждое изображение оптимизируем под веб

Подбор шрифтов

1. В большинстве случаев шрифтов Тильды остаточно.

2. Для заголовков 36-60 пкс Для текстов 14-18 пкс Подзаголовки 18-24 пкс

3. Если этого мало - https://webfonts.pro/

Какие стандартные блоки используются

1. Ответы на частые вопросы.

2. Слайдер галереи.

3. Слайдер галереи в поп-ап.

4. Меню.

5. Видео в поп-ап.

6. Открытые формы заявки.

7. Формы заявки в поп-ап.

8. Поп-ап карточка товара.

9. Слайдер отзывов.

10. Контакты.

11. Слайдер партнеры.

12. Блоки из “другое”.

Экраны адаптивности

1. 5 экранов. Адаптируем от большего к меньшему.

2. Наследственность элементов.

3. Сначала весь дизайн, после адаптация каждого блока.

Перед настройкой

1. Адаптацию и настройку страницы делать только после того, как будет полностью согласован Дизайн.

2. Перед адаптацией и настройкой продублировать все страницы. Сэкономит время, если заказчик после настройки решит изменить блок.

3. Сделать по завершению настройки резервную копию в свой аккаунт и аккаунт заказчика.

Адаптация дизайна

1. Только после создания всего дизайна.

2. Не копировать адаптированные блоки для создания новых.

3. Адаптируем от большего к меньшему экрану.

4. Сделав 1 блок, выпишите размеры шрифтов для заголовков и текста.

5. Для тестирования используем сервис Emmet Re:vie.

Настройка страниц

1. Создаем всплывающие формы заявки и настраиваем их, привязываем формы к соответствующим формам.

2. Настраиваем якорные ссылки, прописываем их в меню страницы.

3. При необходимости создаем меню с фиксацией.

4. Создаем Поп-ап с политикой конфиденциальности.

5. Настраиваем теги h1 и h2.

6. Внимательно проверяем каждый блок.

7. Название и описание страницы.

8. Бейджик для соц.сетей.

Настройка сайта

1. Загружаем фавикон, если нет - делаем.

2. Подключаем домен по инструкции Тильды.

3. Подключаем приемщик данных.

4. Тестируем на прием заявок.

5. Отключаем галочку “не индексировать” с каждой страницы.

6. Проверяем сайт на ошибки в панели Веб-мастера.

Передача проекта

1. Просим заказчика проверить сайт.

2. Если есть мелкие правки - исправляем.

3. Передать доступ к Тильда-аккаунту или передать сайт на аккаунт клиента.

4. Попросить отзыв.

Что еще просят клиенты

1. Обратный звонок, чат.

2. CRM-системы (подключаем по инструкции Тильды).

3. Яндекс.Метрика, Google Analytics - минимальный набор настроек для клиента.

Задайте вопрос

Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных

WEB-ДИЗАЙН


Отрасль веб-разработки, в задачи которой входит проектирование пользовательских веб-интерфейсов.

СДЕЛАЙТЕ ШАГ К УВЕЛИЧЕНИЮ ПРИБЫЛИ


Проведем переговоры лично в офисе в Москве или в формате скайп-колла по России и миру (за консультацию деньги не берем, проводим переговоры абсолютно бесплатно)

Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных

X
Зарегистрируйтесь на открытый урок "Performance-маркетинг"