Работа над любым проектом начинается с подготовки. Вещь вроде понятная и банальная, но именно этот этап чаще всего пропускают.

Первое что нужно сделать, понять: «Зачем, собственно, вам нужен сайт? Какие задачи с его помощью вы будете решать?»

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

Пример
Вы копирайтер. Пишете тексты для лендингов, интернет-магазинов, блогов, социальных сетей и email-рассылок. С помощью сайта хотите заявить о себе и привлекать клиентов.

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

Типичное описание лендинга.

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

По сути, это готовая структура лендинга. Открываете текстовый редактор и записываете структуру в виде списка.

Когда определена задача и написана структура будущего сайта, самое время сесть за исследование.

Найдите в сети ресурсы ваших конкурентов. Прямых, косвенных, любых. Google и Яндекс в помощь. Подумайте, по каким ключевым словам в поиске люди будут вас искать. Вводите запрос и, вуаля.

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

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

Замечайте детали, учитесь читать между строк. Ищите идеи, записывайте ошибки и нестыковки, чтобы не повторить их в своём проекте.

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

Учитесь «воровать» как художник. Но не отключайте при этом голову.

Идеи для собственного проекта можно найти на любом сайте. Не только в вашей теме. Просматривайте ресурсы по смежным тематикам. Всегда полезно знать, как выглядит современный интернет.

Создайте собственную копилку идей. Понравился сайт — добавьте его в закладки. Сделайте отдельный документ или таблицу и наполняйте понравившимися примерами.

Прислушивайтесь к себе. Замечайте, что нравится, а что нет.

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

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

Нарисовать прототип можно с помощью специальных программ и сервисов, а можно просто на бумаге.

Кому-то нравится собирать сразу в конструкторе. Так тоже можно. Но, не торопитесь, до конструкторов ещё успеете добраться.

Лично у меня, программы для отрисовки прототипов вызывали тоску. Через полчаса работы в этих прогах у меня начинал дёргаться глаз и хотелось в голос завыть. Поэтому, я остановился на обыкновенном листке бумаги формата А4 и шариковой ручке.

На бумаге можно нарисовать абсолютно любой лендинг или страницу. Не нужно рисовать все в мельчайших деталях. Достаточно передать основную идею. Главное, чтобы вы сами поняли, что нарисовали.

В процессе создания макета обычно рождается много идей.

Не ограничивайтесь одним прототипом. Нарисуйте несколько. Потом выберете самый интересный.

Если остановитесь на бумажном варианте вот несколько рекомендаций как рисовать.

Представьте, что экран будущего лендинга на бумаге — это прямоугольник с шириной 6 см и высотой 4 см и нарисуйте его.

Текст рисуется горизонтальными линиями. Чтобы изобразить заголовок или подзаголовок — линия более жирная.

Картинки и фотографии показываются перечеркнутыми прямоугольниками.

Слайдер — перечеркнутый прямоугольник и элементы управления. Видеоплеер обозначается пиктограммой кнопки play. Как на пульте дистанционного управления.

Создание текста — тема отдельного разговора.

Если писать не умеете, наймите копирайтера. Да, это дополнительные расходы но, хороший копирайтер, напишет текст с учетом проблем вашей целевой аудитории и прицелом на их решение.

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

Не пишите текст в процессе вёрстки страницы прямо в конструкторе. Используйте текстовый редактор или Google Docs.

В редакторе проще что-то изменить, поменять местами абзацы, скопировать или удалить. Во время вёрстки сделать это сложнее. Придется отвлекаться.

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

Часто люди отказываются использовать реальные фото. Считают, что показывать на сайте пыльные и ржавые станки — это уродливо.

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

Это не значит, что использовать стоковые картинки нельзя. Можно. Но, при первой возможности постарайтесь заменить их на настоящие.

Если можете снять видео на производстве — сделайте это. Демонстрация работает лучше чем текст, а видео, работает ещё лучше картинок.

Десять лет назад, чтобы сверстать страницу пришлось бы погрузиться в изучение html, css и прочих непонятных вещей. Сегодня это не обязательно. В сети масса конструкторов с приличным набором инструментов. Разобраться как в них работать можно за 2−3 часа.

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

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

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

Если у вас сложилось впечатление, что приведенный в статье алгоритм создания сайтов очень сложный и разобраться с ним самостоятельно невозможно…

Не спешите.

Давайте разбираться вместе.

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

Но, самое главное, за время тренинга, вы освоите и примерите на себя прибыльную онлайн-профессию в которой сможете зарабатывать от 50 000 рублей в месяц.

Узнать подробную программу тренинга и зарегистрироваться вы можете на странице «Быстрые деньги на создании сайтов».