Сайтостроение для чайников: создание сайта с нуля

Содержание

• Цели и задачи сайта
• Структура сайта
• Оценка сайтов конкурентов
• Поиск вдохновения
• Прототип
• Выбор домена
• Выбор хостинга
• Выбор конструктора
• Выбор CMS

Цели и задачи сайта

Зачем вам вообще нужен сайт? Вариантов много:

• у вас есть один товар или услуга и вы хотите привлечь к ним клиентов с помощью контекстной рекламы;
• у вас много товаров, реализацией которых вы хотите заняться через интернет;
• хотите монетизировать создаваемый вами контент с помощью рекламы;
• хотите сделать портфолио, чтобы показывать потенциальным клиентам.

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

Структура сайта

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

Составьте структуру сайта в обычном текстовом файле или на листке бумаги, выписав основные страницы. Подумайте, есть ли смысл разделения на странице или всё прекрасно уместится на сайт-одностраничник.

Оценка сайтов конкурентов

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

Поиск вдохновения

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

Можно воспользоваться следующими сайтами с примерами работ:

• Behance — самый известный среди дизайнеров сайт, где регулярно выкладываются классические, веб- и пр. дизайнеры;
• Httpster — работы авторов со всего мира с разбивкой по месяцам;
• Awwwards — регулярные конкурсы среди разработчиков и веб-дизайнеров как одиночек, так и агентств с разбивкой по дням, месяцам и годам;
• Dribbble — большое всемирное сообщество дизайнеров с сортировкой контента по категориям;
• One Page Love — множество примеров стильных одностраничных сайтов;
• SiteInspire — площадка для демонстрации лучших примеров минималистичного и аккуратного дизайна;
• Made On Tilda — примеры современного и стильного веб-дизайна на примерах сайтов на Tilda.

Прототип

Перед тем, как создавать дизайн, нарисуйте прототип. Его можно нарисовать просто на листе А4, но учитывайте, что при внесении большого количества изменений придется периодически перерисовывать прототип с нуля, иначе он будет становиться нечитаем. Также можно воспользоваться такими профессиональными инструментами как Adobe Photoshop, Adobe InDesign, Microsoft Visio, Axure Pro или Sketch. Конечно, с их помощью макет получится наиболее качественным, но будет сложно подключить к работе других специалистов без опыта работы с подобным ПО. Из-за вышеперечисленных минусов многие дизайнеры склоняются к использованию современных веб-сервисов, среди них:

• Marvel — самый известный и профессиональный инструмент веб-дизайна для прототипирования и создания интерактивных шаблонов; есть бесплатные и платные тарифные планы различающиеся количеством пользователей с доступом к проекту и количеством текущих проектов;
• Figma — профессиональный инструмент веб-дизайна, UI/UX-дизайна, прототипирования и создания интерактивных шаблонов; есть бесплатные и платные тарифные планы;
• Draftium — позволяет создать за несколько часов даже сложный макет для большого сайта, более 300 готовых шаблонов и позволяет создавать неограниченное количество прототипов в платной версии, в бесплатной возможности несколько ограничены; является инструментом конструктора сайтов Weblium, поэтому есть возможность перенести созданный вами шаблон в конструктор;
• Wirefram — инструмент прототипирования со ставкой на простоту использования, поэтому не стоит рассчитывать на шаблоны и интерактивность, это виртуальная версия листа формата А4 и карандаша. Есть ограниченная бесплатная версия и три тарифных плана с поддержкой разного количества пользователей для работы над проектом;
• Justinmind — большой инструмент прототипирования с интеграцией программ Sketch, Adobe и пр. Можно создавать интерактивные прототипы на уровне Marvel, но программа проще для понимания неспециалистами. Есть бесплатная версия и три тарифных плана;
• InVision — ещё одно профессиональное приложение с возможностью бесплатной работы над прототипом для 10 человек с интеграцией Sketch, Photoshop, JIRA, Storybook и пр. Платные тарифные планы рассчитаны в основном на упрощение командной работы над прототипами.

Выбор домена

Домен – уникальный адрес вашего сайта в сети. Состоит из уровней – разделенных точками слов. Домены бывают первого (страны и тематики), второго (непосредственно имя домена, которое вы придумываете) и третьего уровня (подразделы сайта, например, для отделения форума от основной площадки). Проверить, свободен ли домен, часто можно непосредственно на хостинге или на специальных сайтах типа REG.ru или RU-CENTER.

Наиболее эффективными доменными именами являются название бренда, запоминающееся сокращение (например, hh.ru, vk.ru), ключевые слова (если название бренда длинное или плохо запоминающееся, например, pirogi.ru, salati.ru).

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

Выбор хостинга

Хостинг – сервис, предоставляющий услуги по размещению веб-сайта во всемирной сети. На хостинге хранится доменное имя, хранилище для веб-сайта и сервер с доступом через интернет.

Какой может быть хостинг?

• виртуальный (shared) – сервер, на котором расположено много сайтов, один сервер вмещает около тысячи сайтов с равными возможностями, наиболее популярный вид хостинга, так как подходит небольшим веб-сайтам, на которые нет большой нагрузки;
• выделенный (dedicated) – сервер, целиком предоставляющийся пользователю под его управление с возможностями менять ПО вплоть до операционной системы, такой вид хостинга используют веб-ресурсы с большой нагрузкой, например, маркетплейсы и онлайн-игры;
• виртуальный выделенный (VPS-сервер) – сервер, отличающийся от обычного виртуального тем, что владелец может устанавливать любое необходимое ему ПО, объем ресурсов в данном случае выделяется в соответствии с тарифом, а не распределяется равным образом;
• облачный (cloud) – система серверов, где выделяемые ресурсы распределяются по нескольким компьютерам, а не содержатся на одном, это позволяет вести более гибкую ценовую политику, зависящую от конкретных нужд пользователя, и обеспечивать бесперебойную работу;
• соразмещение (colocation) – размещение серверов в дата-центре провайдера, такой вариант дает наибольшую свободу, но всё техническое обслуживание сервера ложится на ваши плечи.

На что обращать внимание при выборе хостинг-провайдера?

• стоимость – обычно в пределах 200-400 рублей в месяц со скидкой при оплате за год, советуем внимательно вчитываться в договор при оплате, так как хостинги часто предлагают услуги на первое время по сниженной цене, а потом повышают;
• скорость – важно, чтобы сайт грузился быстро, так что обратите внимание на производительность (учитывайте используемое провайдером оборудование и тип хостинга, которым хотите воспользоваться);
• масштабируемость – возможность повышения производительности должна учитываться, особенно в случае интернет-магазинов с сезонными продажами, когда заказы могут начать поступать тысячами в короткий период времени, без масштабируемости можно получить неработающий сайт вместо прибыли в критический момент или постоянно переплачивать;
• аптайм – провайдеры не могут обеспечить 100% доступность сайта, но если перебои частые, не стоит пользоваться услугами такого хостинга;
• служба поддержки – проблемы и недопонимания случаются, так что необходимо, чтобы хостинг предоставлял быструю и оперативную помощь круглосуточно;
• дисковое пространство – бизнесу с тысячами страниц товаров и сайту-визитке бизнес-спикера нужен совершенно разный объем памяти для хранения, необходимо, чтобы у хостинга были тарифные планы с подходящим для вашего сайта, для небольших сайтов обычно хватает 30-100 Мб;
• инструменты для создания сайтов – хостинги часто предлагают или свои инструменты создания сайта, например, конструкторы, или установку CMS прямо через личный кабинет – это упрощает работу, так что удобно для новичков;
• поддержка разных технологий и скриптов – обычно необходимыми являются PHP, MySQL, phpMyAdmin, Zend Optimizer, Python, PERL, Parser, SSH-доступ;
• доступ к домену по FTP для работы с файлами на сервере;
• доменные имена – следует уточнить цену продления регистрации доменного имени, часто хостинг-провайдеры предлагают первый год бесплатно, а на второй требуют оплату по повышенной цене, но иногда «тариф в подарок» – это просто услуга за оплату, например, услуг хостинга за год;
• хранение и защита персональных данных – хостинг должен гарантировать сохранность ваших данных и данных ваших клиентов, которые вы можете хранить на сервере;
• круглосуточный мониторинг сервера на предмет ошибок и неполадок;
• защита от DDoS-атак и защита почты от вирусов, спама и нежелательной рекламы;
• от 5 почтовых ящиков, если вам необходим почтовый сервер, и, соответственно, панель управления для работы с почтой;
• ежедневное автоматическое резервное копирование и резервное копирование по требованию;
• удобство панели управления – продуманная работа с сайтами, размещенными на сервере, через графический интерфейс.

Популярные хостинг-провайдеры в России – это Timeweb, Beget, Спринтхост, REG.RU, RU-CENTER.

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

Выбор конструктора

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

Какие есть конструкторы сайтов?

• Tilda – самый популярный конструктор. Удобен для маленьких проектов – информационных сайтов, лендингов, маленьких магазинов. Готовый сайт можно интегрировать с платежными системами и CRM. Есть бесплатная версия с ограниченным количеством функций (только домены третьего уровня и 1 сайт из 50 страниц на 50 Мб) и блоков, платная от 750 руб. в месяц. В конструкторе более 200 готовых дизайнов и 450 блоков. Есть своя библиотека иконок.
• LPgenerator – более продвинутый и профессиональный конструктор для бизнес-лендингов. Из-за специализации предлагает много интеграций для начала и увеличения продаж, отслеживания работы сайта и лидогенерации. Бесплатно использовать можно только как 7-дневную триал-версию, далее нужно выбирать платный тариф. Платные тарифы начинаются от 690 руб. в месяц.
• WIX – конструктор с широкими возможностями – можно создать почти всё от одностраничника до интернет-магазина. Более 250 виджетов в магазине приложений и более 500 готовых дизайн-решений. Бесплатное использование не подразумевается, но тарифные планы довольно низкие – от 150 руб. в месяц для личных целей и от 400 руб. в месяц для бизнеса.
• uKit – относительно новый конструктор от разработчиков uCoz, если вы о таком слышали. Более интуитивно понятен для новичков и с современным дизайном. Подходит для создания лендингов и визиток, но есть функционал для создания простых интернет-магазинов. К сожалению, много ограничений по настройке, собственные изменения невозможны без перехода на тариф PRO. Бесплатных вариантов использования нет, только 14-дневная триал-версия, минимальная стоимость по тарифам — 5$ в месяц.
• uCoz – самый старый и проверенный временем конструктор сайтов в Рунете. Можно сделать форум, сайт-визитку, лендинг, блог и интернет магазин. Будет сложноват для новичков, хотя более гибок в плане настроек, чем многие другие конструкторы. Большинство имеющихся шаблонов уже сильно устарели, придется или делать самостоятельно, или заказывать. Есть и более серьезные минусы: на бесплатном и минимальном тарифах на сайтах отображается реклама, также на бесплатном тарифе платная техподдержка. Минимальный тариф от 2,99$ в месяц.
• Nethouse – ещё один отечественный конструктор. Больше всего подходит для онлайн-витрин, хотя подойдет также для лендингов и визиток. Конструктор заточен под решения для небольшого бизнеса, именно для него больше всего шаблонов и функционала, хотя выбор все равно довольно скромен, а интерфейс для настройки может быть неочевиден. Есть бесплатный тариф, но только для доменов третьего уровня и без возможностей приема платежей. Минимальный тариф «Старт» от 300 руб. в месяц.

Выбор CMS

Если конструктора по каким-то причинам недостаточно и требуется более индивидуальное и сложное решение, следует обращаться к CMS – системам управления контентом. Какие CMS есть и к каким из них есть смысл обращаться?

• WordPress – самый популярный в мире движок, изначально созданный под блоги, но сейчас являющийся основой известных новостных ресурсов, интернет-магазинов и лендингов. Около четверти сайтов со всего мира работают на этой системе. Дефолтная функциональность не дает много настроек, но можно самому переписать HTML, CSS и пр., а также установить плагины, которые существуют почти под любую задачу. Бесплатен сам по себе, но предлагает много платных плагинов и шаблонов.
• Joomla – более сложный движок, второй по популярности после WordPress. Более функционально подходящий для интернет-магазинов, хотя будет необходима кастомизация, но более сложен для новичков. Ценовая политика аналогична WordPress — есть платные расширения и шаблоны, хотя и не в таких количествах.
• Drupal – подходит для решения сложных и нестандартных задач. Готовых плагинов не предоставляется, так что знания в области веб-программирования необходимы для работы с данным движком. Опять же, сам движок бесплатен, но есть платные модули и шаблоны.
• OpenCart – движок для интернет-магазинов. Нацелен на eCommerce, так что именно для продаж подходит лучше всего. Также бесплатен, но с платными модулями и шаблонами.
• 1С-Битрикс — российский движок, наиболее удобный для работающих с другими системами 1С, так как можно удобно их интегрировать. Для внедрения потребуется помощь опытного веб-разработчика. Продукт полностью платный, минимальная цена от 5 400 руб.
• UMI.CMS – еще один популярный российский движок, в целом с теми же проблемами, что и 1С-Битрикс. Не подойдёт для новичков, потребуется профессиональная помощь. Продукт также платный, цена зависит от количества встроенных модулей, минимальная — 4 900 руб.

Конечно, за одну статью не рассказать весь процесс создания сайта, но все основы мы перечислили, только помните, что просто создать сайт недостаточно – надо наполнить его контентом и не забыть о продвижении. Если считаете, что всё же создавать сайт самостоятельно – задача неблагодарная, мы всегда готовы предложить свои услуги. Мы открыты для сотрудничества, рассматриваем даже самые сложные проекты.