Как создать свой сайт: руководство для начинающих
Сделать сайт с нуля кажется новичкам такой же сложной и непосильной задачей, как написание книги или съемка собственного фильма.
На деле же создание сайтов возможно и без специальных навыков. Для этого достаточно выбрать качественный конструктор сайтов, на котором буквально каждый сможет сделать свою страницу. Мы написали полное руководство о том, как создать сайт: от разработки дизайна и контента до оптимизации SEO и анализа посещаемости. Оно подойдет как для тех, кто собирается создать сайт с нуля, так и для тех, кто хочет обновить уже существующий веб-ресурс.
Как создать свой сайт:
Выберите тип сайта
Выберите подходящий инструмент для создания сайта
Создайте страницы
Поработайте над дизайном и контентом
Выберите домен
Позаботьтесь о хостинге
Оптимизируйте SEO
Воспользуйтесь веб-аналитикой
1. Выберите тип сайта
Перед тем, как создать сайт с нуля, вам необходимо определиться с концепцией. Она состоит из ваших целей и предполагаемой целевой аудитории бизнеса.
Может быть, вы хотите открыть интернет магазин дизайнерской одежды? Или публиковать веганские рецепты? Или поделиться с миром своими работами и найти потенциальных заказчиков? Имея в голове четкую цель, будет легче выбрать тип сайта, который решит задачи бизнеса максимально эффективно. Чтобы понять, какой именно сайт вам нужен, почитайте наше руководство «Популярные виды сайтов», а также изучите 50 сайтов, которые можно создать на Wix.
Популярные типы сайтов:
Интернет магазины создают для продажи товаров онлайн. Почитайте о том, как открыть интернет магазин футболок.
Блоги используются для публикации статей на различные темы, продвижения личного бренда и повышения авторитета в индустрии. Узнайте, почему ведение блога полезно для бизнеса.
Онлайн портфолио позволяет продемонстрировать ваши опыт и навыки в выгодном свете, а такжн привлечь потенциальных клиентов и работодателей. Мы уже писали о том, что такое онлайн портфолио, как создать портфолио онлайн, а также публиковали вдохновляющие примеры сайтов портфолио.
Не нужно ограничиваться одним типом сайта. Например, на сайте интернет магазина можно публиковать интересные статьи, а на сайт портфолио добавить каталог— и продавать товары. Главное — собрать на одном сайте инструменты, которые помогут привлечь целевую аудиторию и достичь поставленных целей.
Определившись с типом сайта, вы можете начать с чистого листа или выбрать в качестве основы один из готовых дизайнерских шаблонов. В библиотеке WIx собраны более 900 шаблонов для самых разных сайтов: от тревел-блога и магазина скейтов до сайта юридической фирмы и фитнес-студии. Помимо основы для будущего сайта, шаблоны являются отличным источником вдохновения. Подробнее о том, как сделать сайт — ниже.
2. Выберите подходящий инструмент для создания сайта
Чтобы помочь вам создать свой сайт, Wix предлагает целый ряд решений зависимости от ваших навыков и целей. Среди таких решений — автоматический сайт на основе искусственного интеллекта, конструктор сайтов для новичков, платформа для разработчиков, готовые шаблоны и сервис для поиска специалистов. Расскажем о каждом варианте и поможем выбрать наиболее подходящий.
2.1. Wix ADI
2.2. Редактор WIx
а. Шаблоны
б. Сайт с нуля
в. Velo
2.3. Наймите специалиста
2.1. Wix ADI
Кому подойдет: новичкам или тем, кто хочет создать сайт за 5 минут.
Wix ADI — это первая в мире платформа на основе искусственного интеллекта, которая способна создать сайт бесплатно на основе ваших предпочтений всего за несколько минут. Всё, что нужно сделать — ответить на несколько вопросов: например, тип сайта, нужные разделы и пожелания по дизайну. На основе ответов Wix ADI предоставит готовый сайт с персонализированным дизайном и контентом. Кроме того, сайт уже будет оптимизирован под мобильную версию без дополнительных действий с вашей стороны — что очень важно, поскольку на смартфоны приходится более 70% пользовательского трафика. Вы сможете внести изменения в дизайн или структуру сайта с помощью редактора. Рекомендуем Wix ADI тем, кто не знает, как создавать сайты и не хочет тратить на это много времени. Или тем, кто хочет быстро сделать основу сайта для дальнейшего усовершенствования.
2.2. Редактор Wix
Кому подойдет: каждому, кто хочет создать сайт самому.
Редактор Wix — это конструктор сайтов с интуитивно понятным интерфейсом, который позволяет создать свой сайт без дизайнеров и программистов. Вы можете легко добавлять, удалять и перемещать элементы в пару кликов, менять цвета, редактировать текст и применять специальные эффекты.
Создать сайт в Редакторе WIx можно несколькими способами:
а. Шаблоны
Кому подойдет: каждому, кто ищет качественную основу для сайта или источник вдохновения.
Как мы уже упомянули выше, в библиотеке Wix собраны более 900 шаблонов, созданных профессиональными дизайнерами. Здесь — самые разные типы сайтов: блоги, интернет магазины, сайты компаний, онлайн портфолио, резюме, страницы бизнес-конференций, свадебные приглашения и многое, многое другое. Просто нажмите на релевантную категорию и выберите шаблон, который лучше всего соответствует вашему видению.
Чтобы помочь с выбором, мы составили подборку красивых сайтов на Wix, а также рассказали про лучшие шаблоны сайта портфолио для креаторов. Вы можете настроить любой выбранный шаблон на свой вкус в Редакторе Wix: изменить цветовую палитру, шрифты и графические элементы, добавить новые разделы и страницы, а также подключить сторонние приложения.
b. Сайт с нуля
Кому подойдет: тем, кто уже знает, как создать HTML сайт и не боится начинать с чистого листа.
Для тех, кто хочет создать сайт с нуля, Редактор WIx предоставляет полную свободу творчества. Просто выберите пустой шаблон, и начните работу над собственным проектом. Перетаскивайте с помощью мыши любые нужные компоненты, планируйте структуру и верстки, добавляйте цвета, кнопки, специальные эффекты и многое другое.
c. Velo
Кому подойдет: разработчикам и программистам, которые хотят получить доступ к продвинутым функциям и вывести сайт на новый уровень.
Работая в Редакторе Wix, вы также получаете доступ к Velo: открытой масштабируемой платформе разработке с множеством полезных функций. Velo делает возможным бессерверное кодирование для frontend и backend интерфейсов, ускоряет создание веб-приложений, уменьшает CSS и JavaScript за счет встроенной среды IDE, позволяет создавать релиз-кандидаты и многое другое. С Velo вы можете выйти далеко за пределы стандартных возможностей конструктора сайтов и воплотить в жизнь даже самый смелый проект — сохраняя при этом комфорт и простоту использования Редактора Wix. При этом Velo органично встроен в основной интерфейс. Всё, что вам нужно сделать — перейти в режим разработчика и добавить собственный код на сайт. Вы также можете мониторить и устранять ошибки в созданных веб-приложениях, не покидая платформу.
2.3. Нанять специалиста
Кому подойдет: для поиска профессионала, который знает, как написать сайт
Вы можете нанять профессионального веб-дизайнера прямо через Wix. Он сделает сайт под ключ, или поможет с отдельными проектами, которые кажутся слишком сложными или времязатратными. Конечно, такой вариант дороже, чем создать сайт самому, однако это экономит время и гарантирует качественный результат. Кроме того, вы можете нанять специалиста для написания контента, оптимизации SEO и любых других задач, свзяанных с сайтом.
Wix Marketplace — это место, где собраны десятки специалистов Wix. Они знают платформу от А до Я, и помогают решать задачи по дизайну, маркетингу, SEO и других направлениям. Каждый фрилансер проверен Wix — а это значит, что мы гарантируем качество оказываемых услуг. Вы можете найти подходящего кандидата автоматически (ответим на вопросы сервиса), или вручную (просмотрев портфолио заинтересовавших вас специалистов). Обратите внимание: сейчас интерфейс Wix Marketplace доступен только на английском. Мы планируем запуск русскоязычной версии сервиса в будущем.
3. Создайте страницы
Настало время подумать, какие страницы и разделы вы хотите включить на сайт. Но перед этим давайте определимся с терминами. Что такое веб страница?
Это документ, содержащий текстовую и графическую информацию, который можно просматривать в Интернете. Сайт может состоять из нескольких страниц, или из одной единственной. Во втором случае он называется лендингом или посадочной страницей.
Что такое раздел на сайте?
Это часть страницы, отделенная от других частей функционально или по смыслу. Например, список контактов или текст о компании может быть как отдельной страницей, так и одним из разделов на странице.
То, какие страницы выбрать для сайта, зависит от ваших целей. Вот самые популярные:
Домашняя страница
Страница о себе
Страница с товарами
Страница с контактами
Страница с вопросами и ответами
Каждая из этих страниц имеет свою функцию. Вместе они помогают удержать внимание посетителя и рассказать историю о вас или вашем бизнесе. Если информации на сайте немного, можно создать одностраничный сайт, чтобы весь важный контент был у пользователя перед глазами. Однако если вы планируете наполнить сайт разнородной информацией — начать блог или открыть интернет магазин — сайт с несколькими страницами будет лучшим решением. В любом случае, начните создание сайтов с главной страницы и поместите туда всю ключевую информацию о вас или вашем бизнесе. По мере развития сайта вы сможете добавить новые страницы: например, фотогалерею, форму обратной связи или FAQ. Не создавайте больше страниц, чем нужно — слишком большой и сложный сайт может отпугнуть посетителей и потенциальных клиентов. Изучите сайты конкурентов и посмотрите, какие разделы они используют и какую структуру выбрали. Так будет легче понять, что смотрится удачно, а что не очень, а также собрать удачные идеи для создания собственного сайта.
4. Поработайте над дизайном и контентом
Согласно исследованию, более 48% пользователей ориентируются на дизайн и контент сайта, когда составляют впечатление о бизнесе. Поэтому эти компоненты сайта критически важны для достижения поставленных вами целей. Качественный контент и дизайн помогают сайту выделиться среди похожих и донести до пользователя всю необходимую информацию.
Графические и текстовые элементы сайта должны находится в гармонии и отражать характеристики и ценности бренда. К примеру, бренд Coca-Cola построен на развлечениях, счастье и молодости; поэтому на сайте они используют яркие, теплые цвета и легкие, оптимистичные тексты. Расскажем поподробнее, как делать сайты с качественными дизайн-компонентами и контентом.
Дизайн Мы уже писали о том, что такое веб дизайн. В кратце — это набор визуальных элементов и решений, который делает сайт красивым, удобным и функциональным. Элементов веб дизайна множество — цветовая палитра, навигация, изображения, видео, специальные эффекты и многое другое. Все они помогают пользователю понять принцип работы сайта, облегчить взаимодействие с ним, а также создать эмоциональную связь между клиентом и брендом.
Wix предоставляет тысячи встроенных элементов веб дизайна. Формы, шрифты, картинки и фотографии, анимации и эффекты прокрутки — все, чтобы поднять сайт на новый уровень и улучшить пользовательский опыт взаимодействия с сайтом.
В этой части разберем самые фундаментальные категории элементов веб дизайна:
Цвета
Меню
Кнопки
Визуальные элементы
Мобильный веб-дизайн
Цвета Цвета — первое, что замечает посетитель. Поэтому важно знать, как использовать их при создании сайта. Вот несколько советов:
Согласно психологии цвета, разные оттенки вызывают разные эмоции. Учитывайте это при выборе цветовой палитры.
Используйте комплиментарные (контрастные) цвета для разных частей сайта. Комплементарными называются цвета, которые находятся в противоположных друг от друга частях цветового круга. Например, красный и зеленый, желтый и фиолетовый, оранжевый и синий. Это поможет привлечь внимание к самым важным элементам на странице.
При составлении цветовой палитры, выберите основной цвет который будет использоваться чаще всего; дополнительный, который будет контрастировать с основным; а также акцентные цвета — они нужны, чтобы выделить важные детали.
Например, основной цвет McDonald’s — красный, дополнительный — желтый (используется для надписей, кнопок и плашек), а в качестве акцентных цветов выступают белый и несколько оттенков зеленого.
Не используйте более 3-4 цветов. На слишком пестрый сайт тяжело смотреть, и это может отпугнуть потенциальных клиентов.
Меню
Меню — это карта и компас для посетителей. Добавив в меню правильные разделы в правильном порядке, вы можете существенно повысить эффективность сайта. Порядок и структура ссылок в меню должны напрямую зависеть от целей сайта. Например, меню интернет магазина должно в первую очередь содержать удобные категории товаров, и может обойтись без раздела «О нас». А на сайте благотворительной организации раздел «О нас» должен быть на самом вверху — ведь не узнав подробнее о деятельности компании, посетители вряд ли решат пожертвовать ей деньги.
Кнопки Важность кнопок заключаются в том, что именно они побуждают посетителя совершить определенное действие: купить товар, подписаться на блог, купить подписку на сервис или просто перейти на следующую страницу. Поэтому кнопки должны быть:
Заметными. Например, если ваш сайт выполнен в бело-фиолетовой гамме, сделайте кнопки оранжевыми. Так они будут выделяться на фоне остального контента на странице.
Понятными. Поместите на кнопку понятный текстовый призыв к действию (Call To Action или CTA). Например, «Купить», «Перейти в корзину», «Забронировать» или «Узнать больше».
Для некоторых кнопок есть устоявшиеся иконки, которые упростят навигацию для пользователя. Например, для ссылок на аккаунты Facebook, Instagram или VK используются логотипы этих соцсетей, а для кнопки «скачать» — иконка со стрелкой вниз.
Визуальные элементы
Изображения, видео, геометрические фигуры и специальные эффекты — все это делает сайт запоминающимся и выделяет его на фоне конкурентов.
Пользователи Wix могут не только загружать собственные изображения и видео, но и воспользоваться сотнями бесплатных медиа из библиотеки конструктора. Кроме того, редактор WIx позволяет добавить анимированный фон или эффекты параллакса.
Мобильный веб-дизайн
Мы уже упоминали выше, что доля мобильного трафика при просмотре сайтов растет с каждым годом. А это значит, что ваш сайт должен идеально смотреться не только на ноутбуке, но и на смартфоне и планшете. Поскольку экраны таких девайсов значительно меньше, расположение элементов в мобильной версии будет отличаться. Вынесите всю важную информацию в верхнюю часть страницы, сделайте заголовки и кнопке более крупными. Менее важные элементы можно удалить совсем, чтобы при просмотре со смартфона сайт не казался перегруженным.
Позаботьтесь о навигации — так пользователям будет легче переходить со страницы на страницу и найти нужную информацию или раздел. Во многих мобильных версиях сайта в качестве элемента навигации используется «гамбургер» — иконка из трех параллельных линий, при нажатии на которую открывается полноценное меню.
Контент
У вас есть всего несколько секунд, чтобы привлечь внимание посетителя и побудить его к дальнейшему изучению сайта. Убедитесь, что весь текстовый контент в верхней части сайта написан максимально понятным языком и содержит только полезную информацию. Чем короче и информативнее текст, тем больше шансов, что вы донесете мысль до посетителя и заставите его дочитать до конца.
Сравните два вступительных текста для главной страницы сайта фитнес-тренера.
А.
ТЫ НЕ ПРОИГРАЛ, ПОКА НЕ СДАЛСЯ. ПРИСОЕДИНЯЙСЯ К ЛУЧШИМ! Спорт — это не просто хобби, это стиль жизни. Спорт наполняет тебя уверенностью и силой. Нет ничего лучше, чем чувство, когда ты преодолеваешь очередной барьер и становишься лучшей версией себя. Меня зовут Андрей Петров, и я превращаю простых петербуржцев в титанов с помощью гантель, гирь и кардио. Мой тренажерный зал — это место, где ты сможешь получить тело, о котором ты всегда мечтал. Начни заниматься уже сегодня и докажи, что ты можешь больше!
Б.
Персональный тренер в Петербурге.
Привет! Меня зовут Андрей, я фитнес-тренер из Петербурга. Тренирую уже 15 лет, помогаю людям полюбить свое тело и изменить отношение к спорту. В моем арсенале — кроссфит, функциональные тренировки, занятия на TRX и упражнения с собственным весом. Тренирую как новичков, так и профессионалов: подбираю индивидуальный план тренировок и корректирую его в зависимости от результатов. Я дипломированный физиотерапевт, поэтому могу работать с клиентами после травм и помочь в реабилитации. Приезжаю домой или тренирую в BestGym на ст.м. Чкаловская. [ЗАПИСАТЬСЯ]
Текст А сложно читать — в нем много «воды» и отсутствует важная информация: например место тренировок, навыки и опыт тренера. По заголовку также не очень понятно, о чем пойдет речь. С большой вероятностью посетитель сайта не дочитает до конца и просто закроет страницу. В одном абзаце текста Б собрано большое количество полезной информации: тут есть и образование тренера, и его опыт, и арсенал тренировок, и расположение зала, и даже стратегия, по которой работает специалист. Кроме того, по заголовку сразу можно понять, о чем сайт. И самое главное — сразу под текстом расположена кнопка с онлайн-записью, которая побуждает читателя забронировать тренировку. Такой текст с большей вероятностью превратит случайного посетителя в потенциального клиента. Все вышесказанное не означает, что вы не можете публиковать более длинные тексты: например, историю компании или подробное описание продукта. Однако такие тексты лучше помещать на отдельные страницы или в нижние части лендинга — таким образом их прочитают те, кто уже заинтересован в дальнейшем изучении сайта.
5. Выберите домен
Что такое домен
Домен — это название сайта. То есть то, что вы набираете в поисковой строке браузера перед тем, как открыть сайт. Страница с красивым доменным именем выглядит профессионально и внушает больше доверия. Часто домены звучат также, как и названия брендов. Например, Wix и wix.com или Google и google.com.
Здесь мы подробно писали о том, как выбрать доменное имя, как зарегистрировать домен, сколько стоит домен и что такое поддомен.
Домены на Wix
Вы можете зарегистрировать подходящее доменное имя прямо на Wix. Наша компания являемся аккредитованным регистратором, который может работать с ICANN — Международной корпорацией по управлению доменными именами и IP-адресами. Это гарантирует полную защиту выбранного доменного имени — оно останется вашим в течение всего срока регистрации.
Подключив один из премиум-тарифов Wix, вы получите первый год регистрации домена в подарок.
6. Позаботьтесь о хостинге
Что такое хостинг Хостинг — это аренда места на удаленном сервере, где хранится информация о сайте. По сути, это виртуальный склад, где лежат страницы вашего сайта и все загруженные на них файлы. Так каждый пользователь в любой момент может получить к ним доступ. Пользователи Wix получают бесплатный хостинг при публикации сайта. Серверы компании надежно защищены, что исключает серьезные сбои на сайте и потерю информации.
7. SEO
SEO — это процесс оптимизации сайта таким образом, чтобы он лучше индексировался Google, Yandex и другими поисковыми системами. Оптимизированные сайты с большей вероятностью появляются на верхних строчках поисковых запросов — что в свою очередь повышает посещаемость.
Wix SEO делает процесс оптимизации максимально простым даже для новичков. Во-первых, сайты на Wix автоматически индексируются Google и появляются в поисковой выдаче в течение короткого времени после публикации. Во-вторых, прямо в редакторе Wix вы сможете добавлять тексты, мета-заголовки, alt-тексты к изображениям и многое другое. В гайде по SEO-оптимизации мы рассказали, зачем это нужно.
Кроме того, SEO-мастер Wix предоставляет подробный пошаговый план по оптимизации сайта и объясняет, как то или иное действие поможет индексации.
Обратите внимание: даже если сайт появляется в Google сразу после публикации, ему может потребоваться время, чтобы попасть в топ-10 результатов по релевантным запросам. Даже хорошо оптимизированные сайты начинают с низких поисковых позиций и постепенно двигаются вверх. Это нормальный процесс для SEO.
8. Воспользуйтесь веб-аналитикой
Веб-аналитика позволяет измерить эффективность сайта. Например, сколько человек посетило страницу, на что они нажали, сколько из них купили конкретный продукт, и в каких регионах живут самые активные пользователи. Такая информация помогает увидеть недостатки сайта и устранить их.
Кроме того, веб-аналитика используется для изучения поведения посетителей сайта. К примеру, вы решили открыть интернет магазин и поместили на сайт заметную и яркую кнопку «Купить». Однако метрики показали, что большинство посетителей закрывают страницу до нажатия кнопки. Это значит, что вопреки вашим ожиданиям кнопку нужно поместить на более видное место или сделать ее более контрастной по отношению к основной цветовой палитре сайта. Такие детали можно увидеть только с помощью аналитических инструментов, и зачастую именно от них зависит конечный успех бизнеса.
Пользователям Wix доступен сервис Wix Analytics, который предоставляет самые важные показатели: число посетителей, количество продаж, клиентское поведение и многое другое. Вы можете настраивать отчеты вручную, чтобы получать метрики, которые важны именно для вашего бизнеса. Также к сайту на Wix можно подключить Google Analytics, чтобы получать информацию сразу из нескольких источников.
Веб-аналитика помогает совершенствовать сайт и вовремя замечать его слабые места. Например, если вы увидели, что один товар продается лучше других, возможно стоит поместить его на главную страницу. А если какой-то пост в блоге набрал необычно высокое количество просмотров, это может означать, что стоит чаще писать на эту тему. Такие решения помогут сохранить актуальность и эффективность сайта.
Еще больше полезных статей о том, как создать сайт своими руками:
Сергей Букринский Контент-менеджер Wix.
