Разработка сайта с чего начать
Как разработать дизайн и код персонального веб-сайта
Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.
Многие разработчики считают, что быть хорошим дизайнером — это врожденная способность, что творческий подход — это то, с чем вы сразу родились. На самом деле, дизайн — это навык, который можно освоить, как и любой другой. Для создания красивого сайта не обязательно родиться художником, нужно только попрактиковаться, хорошо так попрактиковаться. Эта статья расскажет о том, как практиковать дизайн через процесс создания персонального сайта с нуля и превращения его в код.
Зачем проектировать самостоятельно?
Зачем проектировать сайт самостоятельно, если можно использовать библиотеку пользовательского интерфейса, такую как Bootstrap или ещё лучше готовый шаблон? Ниже приведены некоторые из преимуществ самостоятельного дизайна вашего сайта.
1. Выделяться из общей массы
Создание каркаса модели
Первый шаг — создание приблизительного каркаса сайта. Создание каркаса помогает определить структуру страницы до добавления визуального дизайна и контента. Каркас не обязательно должен быть красивым, он должен фокусироваться на компоновке контента. Вы можете нарисовать его вручную или воспользоваться основными функциями инструмента разработки. Чтобы создать каркас (прототип), я представляю дизайн как серию прямоугольников. Элементы веб-страницы представляют собой прямоугольные блоки, которые строятся сверху вниз. Начните с прямоугольников, для этого вам точно не потребуются никакие художественные таланты.
Структура веб-сайта
Элементы, которые вы добавлять в каркас, зависят от вас. Вы можете добавить панель навигации, заголовок, записи в блоге и нижний колонтитул. Для начала, возможно, вам не понадобятся все эти элементы, вы можете оставить их базовыми и добавить их позже. Решите, что вы хотите включить, и добавьте эти секции в ваш каркас. Если у вас возникли проблемы с этим шагом, вы можете просмотреть аналогичный веб-сайт, копировать структуру контента и модифицировать его в соответствии с вашими запросами.
Каркас не обязательно должен быть идеальным. Как только структура вашего сайта будет вас устраивать, вы сможете перейти к визуальному дизайну.
Применяйте визуальный дизайн
Для преобразования приблизительного каркаса в конструкцию можно использовать бесплатный инструмент разработки, такой как графический редактор Figma. Если вы никогда не пользовались программой разработки, может потребоваться некоторое время, чтобы привыкнуть к ней, но вам не нужно быть в ней специалистом. Для начала достаточны основные функции, такие как добавление прямоугольников, изменение размера и настройка свойств.
Реализация макета
Для начала создайте пустое полотно, на котором будет представлена пустая страница браузера. Добавляйте свой каркас в инструмент разработки, создавая контейнеры для вашего содержимого. Я рекомендую сначала начать с черно-белых вариантов, чтобы вы могли сосредоточиться на макетах. Откорректируйте макет таким образом, чтобы элементы были соответствующего размера, выровнены и между ними оставалось свободное пространство.
Добавление разделов и содержимого хранилища
После того, как вы сделаете его похожим на веб-сайт, сделайте его красивее. Имитируйте стили других веб-сайтов, выясняя, за счет чего элементы выглядят привлекательными.
На данном этапе рассмотрим форму, размер, границы и тени. Постепенно обновляйте основные прямоугольники до нужного вам стиля.
Обновление графики
Шрифты и расстояние между ними имеют большое значение для придания дизайну безупречного вида. Даже простой дизайн может быть высококачественным, если хорошо выполнена графика. Опять же, вы можете копировать другой веб-сайт или искать шрифт и графические ресурсы для добавления в ваш дизайн.
Добавьте цвет
Затем добавьте цвет на сайт. Придайте вашему сайту особенность, создав свой бренд. Подумайте о том, как вы хотите, чтобы сайт попал к читателю. Если вы хотите, чтобы он выглядел чистым и минималистичным, выбирайте не слишком яркие цвета, следите за тем, чтобы градиенты были едва заметными, и выбирайте легко читаемые шрифты. Если вы хотите, чтобы он выглядел забавно, то выберите яркие цвета, используйте яркие градиенты, применяйте текстуры фона, используйте закругленные элементы, и выберите шрифты, которые выделяются.
Добавление цвета может показаться пугающим, но для этого вам не нужно знать теорию цвета. Если ваш дизайн начался в черно-белом цвете, вы можете выбрать один цвет для акцентирования элементов, чтобы придать дизайну немного жизни. Если вы хотите выйти за рамки этого, я рекомендую выбрать один или два цвета, которые вам нравятся, а затем использовать различные варианты освещенности этого цвета. Это помогает создать связующую тему, не являясь экспертом в данной сфере. При выборе цвета фона и переднего плана следует помнить о читаемости, проверяя цветовой контраст.
Примером может служить установка темно-синего цвета для фона, затем использование более светлой версии того же синего цвета для текста. Для белых цветов фона можно использовать среднюю яркость синего для заголовков.
После того, как вы добавили цвет, переходите к обзору общего дизайна и внесению изменений.
Уточнение
При разработке вам следует сделать шаг назад, отстраниться и абстрагироваться, чтобы взглянуть на ваш проект в целом и доработать его. Критикуйте свой проект, описывая то, что вы видите простым языком, а затем переведите это в техническую проблему, которую необходимо решить.
Как только вы закончите разработку дизайна, вы можете начать переводить его в код.
Создание HTML–структуры
Стилизуйте его с помощью CSS
Поскольку HTML-документы добавляются сверху вниз, вы можете начать с верхней части документа и работать вниз. Используя созданный вами дизайн, постарайтесь скопировать его как можно ближе в HTML & CSS.
Помните, что это не должно быть по принципу «все или ничего», вы можете реализовать части, необходимые для начальной версии сайта. Для моего сайта мне было необходимо только введение, ссылки и способ размещения блогов, так что, это все, что я начал воплощать. Если вы не готовы к воплощению раздела, вы можете удалить его, пока не будете готовы.
Расположение секций и элементов
Я рекомендую сконцентрироваться на компоновке элементов и сохранить эстетические аспекты на более поздний срок. Если вы расставляете и стилизуете элементы одновременно, это может привести к метанию вперед и назад, что может приостановить ваш прогресс. Примером может служить раскладка навигационной панели при попытке задать тип и размеры шрифтов. Возможно, у вас все удобно скомпоновано, но затем настройка шрифта все сбрасывает. Это может заставить вас изменить панель навигации, чтобы она снова подошла по размеру. Но что если навигационная панель теперь слишком высокая? Вы можете изменять это несколько раз, что может привести к огорчению. Вместо этого я рекомендую в первую очередь сконцентрироваться на компоновке элементов и попытаться заставить их работать с различными размерами контента. Это может потребовать метод проб и ошибок в CSS, но чтобы убедиться, что ваши элементы имеют достаточную ширину, для удобного добавления в него содержимого.
При превращении макета в полноценный дизайн я предпочитаю думать о горизонтальных линиях, которые разрезают дизайн на секции сверху вниз. Навигационная панель наверху может быть первым кусочком. Вы можете сосредоточиться только на HTML и CSS, которые необходимы для навигации, не беспокоясь о разделах ниже. Внутри навигационной панели вертикальные фрагменты могут быть разделены на элементы, составляющие навигацию. Сосредоточьтесь на элементе, расположенном в крайнем левом углу, а затем следуйте направо. Когда навигационная панель будет установлена, перейдите к разделу под ней.
Добавьте визуальные стили
Стилизуйте элементы, основываясь на вашем дизайне и добавляя одинаковые лица шрифтов, размеры шрифтов, вес шрифтов, цвета и изображения. При размещении результата дизайна в Интернете может потребоваться корректировка, так как визуализация в браузере и в разных браузерах может отличаться.
Сделайте его отзывчивым
Сделайте его быстро реагирующим, чтобы пользователи на экранах различных размеров могли легко просматривать содержимое. Сделать сайт быстро реагирующим не обязательно будет тяжело. Ему не нужно перемещать элементы или иметь меню только для мобильных устройств. Простой способ сделать базовый дизайн быстро реагирующим — это иметь точку останова, когда элементы начинают обрезаться или сжиматься, создавать стек и делать их по всей ширине страницы.
Когда ваш проект реализован, все готово! Теперь вы можете решить, что хотите с ним делать.
Как я сам сделал сайт и сколько за него плачу
Свой первый сайт я купил несколько лет назад, потратил 180 тысяч рублей. С помощью контекстной рекламы я стал зарабатывать на нем около 15 тысяч в месяц, а спустя два года окупил все затраты.
Тогда мне захотелось создать сайт с нуля — это дешевле, чем покупать уже готовый продукт, поэтому расходы окупятся раньше. Я прочитал в интернете, как это сделать, а после создал пять небольших сайтов — одни на заказ, другие для себя. На каждый я тратил примерно 2000—3000 Р — это плата за аренду домена и хостинг на год.
В статье расскажу, как я создал один из сайтов и настроил на нем рекламу.
Кратко: как я создал сайт
Выбор темы — важный шаг. Если выбрать для сайта неподходящую тему, он не заинтересует рекламодателей и, соответственно, будет приносить меньше денег.
Я решил взять тему, в которой хорошо разбираюсь, — продукты питания: как их производят, из какого сырья делают и как хранят. Я раньше работал на молочном комбинате, поэтому мог много рассказать об этом.
Зарабатывать я планировал при помощи рекламы — хотел размещать на сайте рекламные баннеры разных компаний. К сожалению, оказалось, что рекламодатели редко хотят размещать рекламу на сайтах про еду: оттуда посетители меньше переходят по объявлениям. Больше всего рекламодателей интересуют сайты, посвященные страхованию, кредитам, юридической помощи, инвестициям и медицине.
Р )» loading=»lazy» data-bordered=»true»>
Доменное имя — это адрес сайта в интернете. Например, доменное имя сайта Тинькофф-банка — tinkoff.ru. В каждом домене есть доменная зона, которая указывает, к какой стране или теме относится домен. Скажем,.ru — это российская доменная зона,.com — международная для коммерческих организаций,.org — международная для некоммерческих организаций и так далее. При этом ограничений по выбору доменной зоны практически нет — можно выбрать какую угодно зону, если доменное имя еще не занято. Существует несколько доменных зон, которые можно использовать только по их назначению: например,.edu предназначена только для учебных заведений, а.aero — для тех, кто связан с авиаиндустрией.
Чтобы воспользоваться доменным именем, его нужно арендовать. Расскажу, как это сделать.
Выбрать домен. Лучше взять короткое имя из одного-двух слов: такое проще запомнить. При этом имя не должно быть занято — проверить это можно с помощью сервиса Whois или прямо на сайте выбранного регистратора.
Еще можно купить уже существующий домен, если важно занять определенное имя или нужен домен, который был создан давно. Такие домены могут находиться на первых страницах поисковой выдачи, а значит, будут стоить дороже.
Как победить выгорание
Регистрировать домен стоит только у аккредитованных регистраторов. Советую выбирать тех, что работают на рынке минимум 10 лет: они дорожат репутацией. Я зарегистрировал доменное имя у хостера Beget. Расскажу, как это сделать.
Сначала нужно зарегистрироваться на сайте. После переходим в раздел «Домены и поддомены», выбираем пункт «Зарегистрировать домен» и вводим имя. Нам предложат выбрать доменную зону для имени —.ru,.com,.net и так далее. Я не советую использовать доменную зону.рф: некоторые браузеры и почтовые клиенты могут выдавать ошибки при работе с таким сайтом. За регистрацию домена в зоне.ru я отдал 179 Р — это была плата за год аренды.
После выбора имени попросят внести персональные данные. Некоторые из них, например ФИО и адрес, нужно вписать и на русском, и на английском.
После нужно проверить правильность введенных данных, принять условия оферты и нажать кнопку «Зарегистрировать».
Хостинг — это сервер с непрерывным доступом к сети, на котором будет размещен сайт. От него зависит безопасность сайта, обслуживание во время поломок и то, сколько человек будет его посещать. Поэтому важно выбрать хороший хостинг.
Я советую выбирать хостинг-провайдера, чьими услугами пользуется много людей: чем популярнее хостинг, тем вероятнее, что провайдер никуда не исчезнет.
Расскажу, на что еще стоит обратить внимание при выборе хостинга и как установить сайт на домен с его помощью.
Оценить хостинг можно по следующим параметрам:
Еще важно, чтобы у хостинга была круглосуточная поддержка: так вам помогут в любое время, если сайт внезапно перестанет работать.
Хорошо, если хостинг предоставляет бесплатный пробный период. Так можно понять, подходит ли он под ваши задачи: хватает ли вам дисковой памяти, не тормозит ли сайт. Если такого периода нет, лучше оплатить только 1—2 месяца хостинга, а потом при необходимости продлить.
Р в год» loading=»lazy» data-bordered=»true»>
Установить сайт на домен можно на сайте хостера — тоже расскажу об этом на примере сервиса Beget, с помощью которого я и провожу все эти манипуляции.
Нужно добавить домен в разделе «Домены и поддомены», а после этого отметить в выпадающем списке пункты «Создать новый сайт» и «Направить домен на сайт» — так домен автоматически привяжется к созданному сайту. На сайте хостера появится пространство, где можно будет работать со своим сайтом через админку CMS или файловый менеджер.
Создать сайт самостоятельно можно разными способами.
С помощью конструкторов вроде «Тильды» и Wix. У них простой интерфейс и множество шаблонов под разные задачи, так что там можно создать сайт даже без знания HTML и к тому же бесплатно. Но у конструкторов есть недостатки.
Самостоятельно написать код сайта намного труднее, ведь нужно знать HTML и CSS.
Справочники от MDN Web Docs:
по HTML,
по CSS
HTML — это язык гипертекстовой разметки, который состоит из тегов. Теги говорят, что есть на странице: текст, картинки, видео и так далее. CSS расшифровывается как Cascading Style Sheets — «каскадная таблица стилей». С ее помощью можно описать, как будут выглядеть элементы на сайте: например, каким будет размер текста, цвет фона и так далее.
Системы управления контентом, или CMS, — это те же конструкторы, но с расширенными возможностями. В них сайты состоят из готовых блоков, которые можно менять в текстовом редакторе. На этом способе я и остановился.
Я выбирал из пяти CMS:
Мне было важно, чтобы у CMS были плагины, бесплатное обслуживание и доступ к коду для редактирования. В итоге я остановился на «Вордпрессе».
Покажу, как установить «Вордпресс» на хостинге Beget, а после расскажу о плагинах с полезными функциями для этой CMS.
Чтобы установить «Вордпресс» на хостинг, открываем сайт хостера и выбираем пункт CMS, а после — «Вордпресс».
Появится окно установки, в котором необходимо заполнить следующие поля:
Появится окно, где нужно будет ввести логин и пароль, которые вы придумали на предыдущем шаге. Откроется админка сайта, где можно добавлять меню, разные разделы и прочее.
Плагины помогают сайту работать быстрее, дополняют его возможности и позволяют получить новые функции. Их можно установить через админку «Вордпресса».
Вот какие расширения «Вордпресса» я рекомендовал бы установить в первую очередь:
Для этого я выбрал готовый шаблон сайта, настроил его под себя и добавил туда свои страницы.
Выбрал и установил шаблон. В «Вордпрессе» есть много готовых шаблонов для сайта. Они пригодятся тем, кто не хочет самостоятельно продумывать дизайн страниц. Чтобы выбрать шаблон, надо кликнуть на кнопку «Настройте свой сайт» или выбрать вкладку «Внешний вид».
В каждом шаблоне есть набор файлов, которые организуют структуру страницы и ее внешний вид: в каком порядке расположены блоки, как выглядят меню и другие элементы. В них можно поменять содержимое — текст, ссылки, иллюстрации. Если вам не нравится внешний вид каких-то элементов, их стиль можно изменить по своему вкусу.
Добавил название сайта, меню и подвал. Для этого нужно кликнуть по кнопке «Настройте свой сайт» или выбрать вкладку «Внешний вид», а после перейти в настройки.
Добавил страницы. Для этого нужно перейти в раздел «Записи» и кликнуть «Добавить новую». Откроется визуальный редактор страницы сайта. Там можно вписать содержимое страницы, настроить разделы сайта и метки — ключевые слова сайта, или теги. Здесь же можно менять внешний вид страницы: размер текста, цвет ссылок и прочее.
Страницу можно опубликовать, и тогда она появится на сайте. Можно изменить ее видимость, чтобы ее видели не все, а только зарегистрированные пользователи или только вы. Еще можно опубликовать страницу позднее: настроить отложенную публикацию.
Добавил сайт в «Яндекс-вебмастер» и Google Search Console. Это нужно, чтобы поисковые системы быстрее узнали о существовании сайта. А еще эти сервисы диагностируют ошибки в коде, помогают искать фразы, по которым люди находят сайт в поиске, и предоставляют разную статистику: на какие страницы и с каких устройств пользователи заходят чаще всего, сколько времени проводят на сайте и так далее.
Чтобы добавить сайт в «Яндекс-вебмастер», открываем сервис и нажимаем «Добавить сайт». Указываем в появившемся поле адрес сайта и снова жмем «Добавить». «Яндекс-вебмастер» предложит подтвердить права на домен и даст вам код. Этот код нужно ввести на сайте, где вы зарегистрировали домен, — у меня это Beget.
Добавить сайт в Google Search Console можно аналогичными способами. Открываем сервис и выбираем пункт «Добавить ресурс». Откроется меню, где предложат выбрать тип ресурса. Выбираем «Доменный ресурс», потому что мы добавляем целый домен, а не отдельную страницу сайта:
Нашел самые частые запросы пользователей. Новые пользователи будут находить сайт через Яндекс, Гугл или другую поисковую систему. Чем выше в поиске будет сайт, тем больше пользователей на него зайдет. А для этого нужно сделать так, чтобы содержание сайта отвечало самым частым запросам пользователей.
Чтобы найти самые популярные запросы, можно воспользоваться сервисом «Яндекса» «Подбор слов». Он покажет, что пользователи искали чаще, — это поможет понять, какие фразы стоит использовать при наполнении сайта.
Например, я собирался писать о продуктах, так что стал проверять связанные с этой темой фразы. Чтобы узнать точное количество показов по конкретной фразе, я стал вводить запросы в кавычках и с восклицательными знаками: «“!пальмовое!масло!вред”». Так можно узнать, сколько людей пользовались именно этим запросом. Если ввести его без кавычек и восклицательных знаков, то покажут суммарную статистику по всем запросам, содержащим эти слова: например, «пальмовое масло вред и польза для ребенка».
Еще я рекомендую активировать «Вебвизор» — он отслеживает движения мышью, прокручивания страницы и клики. С его помощью можно понять, куда пользователи нажимают чаще, а на какие кнопки вовсе не обращают внимания.
Затем нажимаем на кнопку «Создать счетчик».
Если вы не понимаете, куда вставлять код счетчика, установите плагин «Яндекс-метрика» для «Вордпресса». Он сам внедрит код туда, куда нужно. Покажу, что делать после установки плагина.
Когда я наполнил сайт контентом, на него стали заходить посетители. Тогда я решил, что пришло время размещать на сайте рекламные объявления других компаний — а они будут платить за переходы по этим объявлениям.
Договариваться с каждым рекламодателем по отдельности не нужно: баннеры появляются на сайте автоматически, с помощью партнерских сетей. Я пользуюсь сетью Google AdSense. О том, как устроена программа «Гугл-адсенс» и за что могут забанить сайт, Т—Ж подробно рассказывал в другой статье. А я напишу о том, как я вступил в партнерскую сеть и с какими трудностями столкнулся.
Чтобы вступить в «Гугл-адсенс», нужно сделать следующее:
После создания аккаунта нужно его активировать — для сайтов на «Вордпрессе» есть отдельная инструкция «Гугла». Затем нужно дождаться, пока сайт одобрят модераторы. Для этого он должен соответствовать требованиям, а содержание сайта — отвечать правилам программы и правилам «Гугла» для издателей.
Еще важно, чтобы сайт выглядел опрятно, на нем было хотя бы 30 страниц с текстом и картинками, однородный контент и более-менее длинные статьи — обо всем этом можно подробнее прочитать в уже упоминавшейся статье Т—Ж.
У меня с одобрением возникли сложности: я подавал заявку в «Гугл-адсенс» четыре раза, трижды мне отказывали. При этом в письмах не называли конкретную причину отказа.
Приходилось каждый раз перечитывать правила и додумывать, что именно не понравилось модераторам. Я менял дизайн, ставил предупреждение об использовании файлов cookies, добавлял страницы с политикой конфиденциальности и наполнял сайт полезными статьями. В конце концов мне удалось пробиться в программу.
Как я размещаю рекламу. В каждой статье я ставлю по 2—3 рекламных баннера. Я располагаю их вручную, с помощью шорткодов, но новичкам советую воспользоваться автоматизированными объявлениями.
Для этого нужно зайти в аккаунте «Гугл-адсенса» в раздел «Объявления» и выбрать вверху на странице блок «По сайту». Затем найдите в списке нужный сайт и нажмите на значок карандаша. В открывшемся окне справа вверху включите автоматизированные объявления. Теперь рекламные баннеры будут появляться на сайте автоматически.
Прибыли у меня пока нет, потому что статьи я не пишу сам, а заказываю на бирже фриланса. Трачу на это около 5 тысяч рублей в месяц.
Налоги с дохода я не плачу, валютный контроль не прохожу. Возможно, начну, когда сайт станет более прибыльным.
Всего на создание сайта я за полгода потратил 32 939 Р
Автор накидал в кучу все, что он узнал про создание сайтов в интернете, прошел этот путь, не поленился описать и сделать кучу скриншотов. За это респект. Но только за это
Michael, ничего не кидал. это всё мой опыт: от CMS до изучения HTML5, стилей и т.д
Michael, вы, мягкого говоря, заблуждаетесь:)
Сергей, исходя из личного опыта я согласен Michael.
Вы описали не заработок на сайте, а личный блог для души. Который в редких случаях выходит на заработок.
При таком подходе в серьезных тематиках вам даже топ 100 не светит.
Вот кратко весь путь по заработку а там уже решайте:
3) собрать семантику (ключи, или поисковые запросы) вордстат это да хорошо, но выбрать весь объем запросов!? Постареете и внуки будут делать сайт)))
Нужны программы типа кейколлектор, словоеб (или заплатит за ядро об этом чуть ниже)
4) После сбора семантики нужна кластеризация разбивка по группам запросы это целая наука см. в интернете инфы валом. Если делать самому запоситесь клавиатурой, мышками так как мышку я сломал на третий день об клавиатуру.
#затраты пол года из жизни.
5) ядро лучше купить (3-4 пункт) в среднем от 15.000₽ смотря от тематики
6) это всё о чем вы написали статья выше (я бы добавил пунктов ещё 5-15 ко всему что вы написали но это к каждому придет со временем)
7) поиск авторов на биржах или пишем сами (основная часть #затрат от 150т₽ до бесконечности смотря от темы ядра.
8) подготовка ТЗ авторам (сами, сотрудник, сервисы) #затраты от 15₽ за штуку
9) закуп ссылок. Соц ссылки, крауд, вечные, временные, обмен и так далее тут стратегии сами подбираете. #затраты дорого
10) размещение тут тоже есть нюансы. Но тут вам в подсказку конкуренты с пункта 1 (помним выше, сильнее, быстрее)
11) развития пабликов по желанию
Ну как то так это очень кратко и несколько пунктов пропущено умышленно что то забыл написать сори.
Цена проекта от 150т₽ смотря от ядра.
А дальше самое интересное взойдет или нет будет трафик или нет. Выйдет новый алгоритм и хана всем вашим усилиям, разместили рекламу поймали фильтр, авторы накосячил поймали фильтр и так далее