Из этой статьи вы узнаете, как создать веб-сайт, который будет выглядеть профессионально и хорошо работать. Хотя основная часть дизайна вашего веб-сайта в конечном итоге зависит от вас, есть несколько важных вещей, которые следует делать и избегать при создании веб-сайта.
Шаги
Часть 1 из 2: Как создать свой веб-сайт
Шаг 1. Определите, хотите ли вы использовать создателя веб-сайта
Веб-сайты, созданные с нуля, требуют довольно подробного понимания кодирования HTML, но вы можете легко создать веб-сайт, используя бесплатную службу хостинга, такую как Weebly, Wix, WordPress или Google Sites. Создатели веб-сайтов, как правило, намного проще для начинающих дизайнеров, чем HTML.
- Если вы все же решите кодировать свой собственный веб-сайт, вам необходимо изучить кодирование как HTML, так и CSS.
- Если тратить время и силы на создание своего веб-сайта вам не кажется привлекательным, вы также можете нанять дизайнера веб-сайтов, который создаст ваш сайт для вас. Дизайнеры-фрилансеры могут стоить от 30 до 100 долларов в час.
Шаг 2. Составьте план вашего сайта
Прежде чем вы даже откроете создателя веб-сайта, вы должны знать приблизительно, сколько страниц вы хотите, чтобы ваш веб-сайт был, каким должно быть содержимое на каждой из этих страниц, и общий макет важных страниц, таких как домашняя страница и «О нас». страница.
Страницы вашего веб-сайта может быть легче визуализировать, если вы нарисуете приблизительные изображения каждой из них, а не просто определите, какой контент должен отображаться
Шаг 3. Используйте интуитивно понятный дизайн
Хотя есть что сказать о свежих идеях, базовый дизайн вашего веб-сайта должен соответствовать установленным правилам, например следующим:
- Параметры навигации (например, вкладки для разных страниц) должны располагаться вверху страницы.
- Если вы используете значок меню (☰), он должен находиться в верхнем левом углу страницы.
- Если вы используете панель поиска, она должна быть в верхней правой части страницы.
- Полезные ссылки (например, ссылки на страницу «О нас» или «Связаться с нами») должны располагаться в самом низу каждой страницы.
Шаг 4. Будьте последовательны
Какой бы шрифт текста, цветовую палитру, тему изображения и варианты дизайна вы ни выбрали, убедитесь, что вы используете одно и то же решение на всем своем веб-сайте. Может быть невероятно неприятно видеть один шрифт или цветовую схему, использованные для страницы «О программе», когда для домашней страницы использовался совершенно другой.
- Например, если вы используете исключительно холодные цвета для домашней страницы своего сайта, не используйте яркие, яркие цвета на следующей странице.
- Имейте в виду, что использование громких или конфликтующих цветов, особенно когда цвета отображаются динамически (например, движутся), может вызвать эпилепсию у небольшого числа пользователей Интернета. Если вы решили использовать такие цвета на своем сайте, не забудьте добавить предупреждение об эпилепсии перед соответствующими страницами.
Шаг 5. Добавьте параметры навигации
Размещение прямых ссылок на важные страницы вашего веб-сайта в верхней части домашней страницы поможет перенаправить новых посетителей к важному контенту. Большинство создателей сайтов добавляют эти ссылки по умолчанию.
Важно убедиться, что каждая страница на вашем веб-сайте доступна, щелкая по параметрам на вашем веб-сайте, а не только по адресу страницы
Шаг 6. Используйте цвета, которые дополняют друг друга
Как и любой другой вид дизайна, дизайн веб-сайта основан на приятных визуальных сочетаниях цветов; из-за этого выбор подходящих цветов темы имеет решающее значение.
Черный, белый и серый - хорошая комбинация, если вы не знаете, с чего начать
Шаг 7. Рассмотрите возможность использования минималистичного дизайна
Минимализм поощряет холодные цвета, простую графику, черно-белые текстовые страницы и как можно меньше украшений. Поскольку минимализм требует небольшого количества причудливых элементов, это простой способ сделать ваш веб-сайт профессиональным и привлекательным, не требуя больших усилий.
- Многие создатели веб-сайтов будут использовать «минималистичную» тему, которую вы можете выбрать при настройке своего веб-сайта.
- Альтернативой минимализму является «брутализм», в котором используются более резкие линии, яркие цвета, жирный текст и минимальное количество изображений. У брутализма меньше последователей, чем у минимализма, но в зависимости от содержания вашего веб-сайта он может лучше соответствовать вашим дизайнерским потребностям.
Шаг 8. Сделайте уникальный выбор
Прямые линии и веб-элементы с привязкой к сетке - беспроигрышные ставки, но принятие нескольких уникальных стилистических решений придаст индивидуальность вашему сайту и поможет вашему сайту выделиться.
- Не бойтесь противостоять трендам, размещая элементы веб-сайта асимметрично или используя перекрывающиеся элементы для создания многослойного внешнего вида.
- В то время как элегантные, острые углы и прямоугольные элементы (также известные как "карточная" презентация) менее предпочтительны, чем закругленные мягкие элементы.
Часть 2 из 2: Как повысить производительность веб-сайта
Шаг 1. Воспользуйтесь опциями мобильной оптимизации
На мобильные браузеры приходится больше веб-трафика, чем на настольные браузеры, а это означает, что количество внимания, которое вы уделяете мобильной версии своего веб-сайта, должно, по крайней мере, соответствовать уровню разработки веб-сайта для настольных компьютеров. Большинство сервисов для создания веб-сайтов автоматически создают мобильную версию вашего сайта, но вы должны иметь в виду следующую информацию для своего мобильного сайта:
- Убедитесь, что кнопки (например, ссылки на сайты) большие и их легко нажимать.
- Избегайте реализации функций, которые нельзя просматривать на мобильных устройствах (например, Flash, Java и т. Д.).
- Подумайте о создании мобильного приложения для вашего веб-сайта.
Шаг 2. Избегайте использования слишком большого количества фотографий на странице
Как настольный, так и мобильный браузеры могут испытывать затруднения при загрузке страниц, на которых отображается большое количество фотографий или видео. Хотя изображения важны в веб-дизайне, использование большего количества изображений на странице может вызвать излишне долгое время загрузки, что не позволит людям посещать рассматриваемые страницы.
В общем, вы хотите, чтобы страницы вашего сайта загружались менее чем за четыре секунды
Шаг 3. Добавьте страницу «Контакты»
Вы заметите, что практически на всех существующих веб-сайтах есть страница «Свяжитесь с нами», на которой есть контактная информация (например, номер телефона и адрес электронной почты); некоторые сайты даже имеют встроенную форму вопроса на этой странице. Добавление страницы «Контакты» предоставит посетителям веб-сайта прямую связь с вами, тем самым добавив решение для потенциальных проблем.
Шаг 4. Создайте собственную страницу 404
Когда кто-то посещает определенную страницу вашего веб-сайта, которая либо не была настроена, либо не существует, отображается веб-страница «Ошибка 404». Большинство браузеров имеют страницу 404 по умолчанию, но вы можете настроить свою в настройках создателя вашего веб-сайта; если да, убедитесь, что вы указали следующие данные:
- Беззаботное сообщение об ошибке (например, «Поздравляем - вы нашли нашу страницу с ошибкой!»)
- Ссылка на главную страницу сайта
- Список часто просматриваемых ссылок
- Изображение или логотип для вашего сайта
Шаг 5. По возможности используйте строку поиска
Если ваш метод создания веб-сайта поддерживает добавление панели поиска на ваш веб-сайт, настоятельно рекомендуется сделать это. Это гарантирует, что пользователи смогут быстро перейти к определенной странице или элементу, не нажимая на ваши параметры навигации.
Панели поиска также полезны, когда ваша аудитория хочет искать общий термин без использования метода проб и ошибок
Шаг 6. Уделите больше времени своей домашней странице
Когда кто-то заходит на домашнюю страницу вашего веб-сайта, он должен немедленно понять суть темы вашего веб-сайта; в дополнение к этому, все элементы домашней страницы должны загружаться быстро, включая параметры навигации и любые изображения. Ваша домашняя страница должна иметь следующие аспекты:
- Призыв к действию (например, кнопка для нажатия или форма для заполнения)
- Панель инструментов навигации или меню
- Привлекательная графика (например, одна сплошная фотография, видео или небольшая группа фотографий с сопроводительным текстом)
- Ключевые слова, относящиеся к услуге, теме или направленности вашего веб-сайта
Шаг 7. Протестируйте свой сайт в нескольких браузерах на разных платформах
Это невероятно важно, поскольку разные браузеры могут по-разному обрабатывать аспекты вашего сайта. Прежде чем начать продвигать свой веб-сайт, попробуйте посетить и использовать свой веб-сайт в следующих браузерах на платформах Windows, Mac, iPhone и Android:
- Гугл Хром
- Fire Fox
- Safari (только для iPhone и Mac)
- Microsoft Edge и Internet Explorer (только для Windows)
- Встроенный браузер на нескольких разных телефонах Android (например, Samsung Galaxy, Google Nexus и т. Д.)
Шаг 8. Продолжайте обновлять свой сайт по мере его старения
Тенденции дизайна, ссылки, фотографии, концепции и ключевые слова со временем меняются, поэтому вам придется продолжать вносить изменения в свой веб-сайт, чтобы оставаться в курсе. Это потребует от вас проверять производительность вашего веб-сайта вместе с другими аналогичными веб-сайтами не реже одного раза в три месяца (желательно чаще).
Базовая справка HTML
Образец веб-страницы с HTML
Поддержка wikiHow и разблокировать все образцы.
Шпаргалка по HTML
Поддержка wikiHow и разблокировать все образцы.
Пример простой веб-страницы
Поддержка wikiHow и разблокировать все образцы.
подсказки
- Доступность веб-сайта - еще один важный аспект разработки веб-сайта. Это включает в себя такие вещи, как подписи для людей с нарушением слуха, звуковые описания для слепых посетителей и предупреждения о светочувствительности, если на вашем веб-сайте используются эффекты, потенциально вызывающие судороги.
- У большинства создателей веб-сайтов есть набор шаблонов, которые вы можете использовать для закрепления макета и дизайна вашего сайта перед добавлением предпочтительных элементов.
Предупреждения
- Большинство создателей сайтов бесплатны; однако, если вы хотите использовать свой собственный домен (например, «www.yourname.com» вместо «www.yourname.wordpress.com»), вам придется платить ежемесячную или годовую плату.
- Избегайте плагиата и соблюдайте все законы об авторском праве: не добавляйте случайные изображения из Интернета или даже структурные элементы без разрешения.
