Как я делаю сайты: Как создать сайт. Пошаговое руководство

Как создать сайт из Notion — Сервисы на vc.ru

{«id»:13973,»url»:»\/distributions\/13973\/click?bit=1&hash=36e9dbe09585049bc2ad336719ba618e3527cc649329f2e6c7a26974041cd061″,»title»:»\u041a\u0430\u043a \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0438\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0430\u0436\u0438″,»buttonText»:»\u0412\u044b\u044f\u0441\u043d\u0438\u0442\u044c»,»imageUuid»:»fb0a50bc-0a7b-535f-b137-b58b2208d639″}

Меня зовут Антон Сабуров, я веду канал Anton No Code где делаю обзоры на сервисы и решения в сфере визуального программирования.

8480
просмотров

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

Посмотреть видео-обзор можно тут

Любой документ в Notion можно открыть в «в веб»

Это делается через кнопку «Share»

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

Минус этого подхода в следующем:

Свой домен не подкрутить
Отсутствие SEO-адаптации

Какой «обвес» нужен Notion чтобы превратиться в сайт

Улучшить дизайн заголовков, кнопок, объектов
Добавить создание форм
Меню, «хлебные крошки» и прочие атрибуты навигации
И многое другое, что присуще классическим сайтам:
человеческие ссылки, SSL, метатеги, sitemap, favicon.

Где можно «позаимствовать» идеи страниц

Пример шаблона посадочной страницы >> тут
Шаблон персонального сайта >> тут
Минималистичное портфолио >> тут
Расширенное портфолио >> тут
Шаблон блога >> тут
А-ля таплинк >> тут

Добавляем кнопки в Notion

Тут можно воспользоваться сервисом виджетов для Notion

https://indify. co/

Инструмент бесплатный. Делать кнопки очень легко.

Выберите формат кнопки (текст+иконка)
Вставьте надпись кнопки
Вставьте ссылку кнопки
Настройте стиль
Скопируйте код кнопки

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

Добавляем формы в Notion

Можно добавить гуглоформу или Typeform, но в среде Notion есть специализированные решения. Одно из них:

Чтобы добавить форму проходим через 4 этапа:

Регистрируемся и делаем интеграцию сервисов
Создаем таблицу. Это будет база данных для нашей формы.
Создаем форму и привязываем к таблице. Делаем настройку.
Добавляем в нужное место на нашем документе.

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

А при учете что сервис бесплатный (при наличии водяного знака) — это просто супер.

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

Сервисы, которые создают красивые сайты из Notion.

Мне больше всего понравился SUPER

Внутри огромный фарш из функционала

Но мне больше всего заинтересовал новый функционал — Builder.
Он позволяет перетягивать объекты на страницу и создавать функциональные сайты во главе c Notion. Это прям интересно.

Благодаря этому можно создавать более сложные структуры, типа вот этих

Сервис SUPER стоит 12$ за сайт в месяц.

Дополнительно интересно воспользоваться шаблонами. Из достаточно много. Средняя цена платного шаблона — 10-15$.

Второй игрок, который позволяет создавать из Notion-документов полноразмерные сайты Potion

Начну с того, что поделюсь с вами ссылкой на сайты, созданные через связку Notion-Potion

Пример1, пример2, пример3, пример4, пример5.
Посмотрите, в этих сайтах чувствуется какая-то своя «фишечка». Мне нравятся. Хотя свои я пока делаю на carrd.co.

Potion берет 10$ за сайт в месяц.
За эту цену вы получаете возможность:

добавить собственный домен
кастомизиировать сайт
получить высокую загрузку контента
SEO-адаптацию

А последнего игрока я недавно нашел на ProductHunt — это индийский стартап

Notion Diary позволяет создавать блоги из Notion-документа.
Механика проста, как и у предыдущих ребят.
Интегрируете сервисы — добавляете таблицу, куда добавляете новые материалы.

Сервис бесплатный и работает на Notion API, который только недавно выкатили.

Как я делаю сайты — Вероника Зубакова на TenChat.ru

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

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

Давайте обсудим, какие этапы работы выделяю я

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

2. Брифинг
Бриф — это серия вопросов клиенту с целью понять детали проекта. Здесь мы уже обсуждаем конкретику, потому что на основе ваших ответов будет составлено техническое задание и именно на основе анализа полученной информации дальше и будет строиться работа.

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

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

5. Прототип
Если с помощью мудборда мы согласовывали настроение и визуальную концепцию проекта, то на этапе прототипа мы разговариваем уже о логике и структуре сайта. Прототип — это еще не конечный вариант страницы, его цель — показать будущую структуру и объяснить ее работоспособность. И уже на этом этапе вы полностью представляете, как будет работать ваш сайт.

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

7. Верстка сайта на Tilda и подключение технической части / Подготовка макета к передаче в разработку
В первом случае я сама переношу сайт на Тильду, настраиваю анимацию, подключаю домен и безопасное соединение для адреса вашего сайта, подключаю платежные системы, рассылки и т п — при необходимости.