Как создать сайт НА TILDA без знания кода

графический дизайнер и автор блога
Дмитрия Сугак
Всем привет! Меня зовут Дмитрия Сугак, я — графический дизайнер. Если вы хоть раз задумывались о создании сайта, то вы на правильном пути. Сегодня я расскажу, зачем нужен свой сайт и как сделать его без знания кода. А поможет нам в этом Tilda — мощная и понятная площадка для создания сайтов.

ПОЧЕМУ ИМЕННО ТИЛЬДА?

Сайты, созданные на Tilda, часто получают награды от специалистов в области дизайна и легко занимают первые места в поисковой выдаче. Поэтому дизайнеры используют эту платформу для разнообразных проектов, начиная от собственных портфолио (которые еще называют «сайты-визитки»), заканчивая многостраничными интернет-магазинами.

Тильда предоставляет возможность создавать сайты без кода, что очень удобно для начинающих специалистов. Обучившись верстке сайтов на Tilda, вы сможете сделать сайт на заказ любой сложности. Еще профи часто предлагают такую услугу, как «сайт под ключ». Это дизайн и адаптивная верстка сайта, то есть готовый продукт с нуля.

дизайн на tilda

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

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

Эту проблему и решает Tilda. Благодаря множеству готовых шаблонов для любой ниши и задачи, вы не потратите много времени на изучение платформы, а сразу приступите к работе.
Тильда представляет собой некий конструктор, позволяющий создавать страницы из блоков. Редактор Zero Block — это инструмент, благодаря которому вы можете спроектировать особый дизайн сайта из уже готовых макетов. Если чей-то вариант вас не интересует, не беспокойтесь: пустые страницы там тоже есть!

Тильда дает возможность сделать свой сайт с нуля и сверстать его без кода. Но тут не обойдется без теоретических знаний. Хотите научиться делать проекты, достойные наград и вызывающие восторг у конкурентов? Я легко и доступно обучаю базовым принципам продающего дизайна и, если вам интересна эта тема, переходите по ссылке: https://ddesign.moscow/infographics.

особенности контента для сайта

Как сделать свой интернет-сайт привлекательным для заказчиков? Конечно, с помощью контента! Содержание — важно. Научитесь выражать идеи в разных форматах, создавайте уникальный дизайн. Попробуйте поиграть с текстом, формой, изображениями или видеофрагментами. Вы дизайнер — именно вы контролируете внешний вид элементов и их расположение. Делайте анимации, добавьте сайту динамики. Не бойтесь пробовать, и смотрите за откликом аудитории. Уверена, что при таком подходе он будет 100% положительным!

зачем анализировать конкурентов?

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

Не думайте, что опытные дизайнеры берут идеи только из головы. У каждого человека бывают дни, когда нет вдохновения (особенно в творческих профессиях). Главное — правильно вдохновиться чужой работой. Не путайте с плагиатом! Копировать точно не стоит, ведь неуникальный сайт привлечет меньше посетителей. Важно отслеживать тренды и следовать им, когда это уместно.

адаптация в zero block

Перед публикацией сайта убедитесь, что ваша работа хорошо отображается на разных устройствах. В Zero Block есть функция, в которой можно переключаться между экранами и на каждом из них вручную настраивать элементы. Согласитесь, это достаточно трудоемкий процесс. Но есть пара трюков по его оптимизации. Сейчас с вами поделюсь!

Для создания идеальной композиции необходимо следить за положением каждого элемента по двум осям — Х и У. Есть тут те, кто говорил, что математика в жизни не пригодится? Теперь изучайте! В Zero Block в качестве единиц измерения можно выбрать пиксели или проценты. Советую поставить процент, относительно которого будет меняться положение на разных экранах.

Также можно настроить автомасштабирование вашей модели. С помощью переключателя адаптируйте макет по ширине экрана. Так он всегда будет автоматически занимать 100% окна в браузере.

оформление текста и содержание

Самым интересным этапом можно назвать выбор шрифта. Текст занимает большую часть сайта и привлекает внимание клиента. Типографика напрямую влияет на восприятие дизайна. Кстати, грамотному подбору шрифтов я обучаю на своем курсе: https://ddesign.moscow/infographics.

В Tilda можно загрузить свой шрифт или выбрать любой из имеющихся, таких как известные Futura, Open Sans, Georgia, а также фирменный шрифт платформы — Tilda Sans. Если со шрифтом определились, но не знаете, что писать на сайте, — читайте дальше.

СОДЕРЖАНИЕ САЙТА

Первым делом соберите информацию о своем сайте. Зачем вы его создали?Для продажи товаров или презентации себя как специалиста? От этого напрямую зависит ваш будущий контент.

Если вы решили написать текст самостоятельно, воспользуйтесь схемой:
  1. Напишите одно предложение о себе или о своей компании — краткое и понятное, которое описывает сферу вашей деятельности. Например: Тильда — конструктор, который помогает создать бесплатный сайт без навыков в сфере IT-программирования.
  2. Допишите более развернутый текст. Но сделайте это так, будто вы рассказываете историю о себе приятелю — максимально простым (но не слишком фамильярным) языком.
  3. Выделите несколько особенностей вашего продукта или вас как специалиста.
  4. Укажите преимущества. Опишите, с помощью чего ваш продукт решает проблему заказчика. Детализируйте этот момент.
  5. Подумайте над заглавиями. Если вы хотите обратить внимание клиента —сделайте это оригинально. Например, вместо заголовка «Контакты» можно написать «Скажите привет».
  6. Отзывы. Добавьте отзывы ваших клиентов. Если их еще нет — попросите написать о вас несколько слов. Это расположит к вам новых людей.

как анимация влияет на скорость загрузки страницы

Намного интереснее листать сайт, когда он анимирован. Это удерживает внимание потенциального покупателя. На Тильде можно настроить анимацию без кода и знаний в программировании. Притягательные анимации помогут вашему сайту опередить конкурентов, которые данной функцией не воспользовались. В Zero Block Tilda можно выбрать как готовые анимации, так и создать свою, уникальную.
Многие переживают, влияет ли анимация (и ее количество) на скорость загрузки сайта. Это скорее относится к тем сайтам, которые перегружены картинками и анимацией. Однако на Tilda применяются все технологии для оптимизации процесса загрузки иллюстраций, а в конечном счете и для ускорения странички. Если вы всё же волнуетесь, можете уменьшить размер картинок перед тем как, выложить их на сайт.

Таким образом, мы пришли к выводу, что создать сайт онлайн не сложнее, чем испечь пирог. Главное — придерживаться определенных правил и учиться новому. Если у вас есть желание развиваться в этом направлении, не опускайте руки, и у вас все получится!
ПОНРАВИЛАСЬ СТАТЬЯ?
БОЛЬШЕ ИНТЕРЕСНЫХ СТАТЕЙ
ОБУЧАЕМ ДИЗАЙНУ С НУЛЯ ДО ПРОФИ

КСТАТИ! МЫ ЗАПУСТИЛИ КУРС ДЛЯ ЗАРАБОТКА НА ФРИЛАНСЕ

Инфографика для маркетплейсов
Лучший онлайн курс по дизайну карточек товаров для Вайлдберриз и Озон.
Вы научитесь делать карточки с инфографикой для Wildberries и Ozon и освоите редактор Figma.
После оплаты вы сразу получаете доступ к урокам. На курсе много обратной связи от автора обучения.
ПОДРОБНОЕ ВИДЕО О КУРСЕ
ЖМИТЕ, ЧТОБЫ УЗНАТЬ ПОДРОБНОСТИ