Необходимый инструментарий и знания для создания сайта-визитки. Новичкам на заметку

Если отбросить модные тенденции и дизайн, то примитивнейший сайт можно написать на чистом HTML в штатном Блокноте, и он будет преспокойно работать. Любая веб-страница, сайт, это лишь совокупность текста, фото, ссылок и мультимедиа.

Но сегодня уже недостаточно знать язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS. Интернет стал более дружественным, сайты обросли интуитивно понятным функционалом и навигацией, а каналы связи способны с бешеными скоростями гнать гигабайты информации из одной точки шара в другую, всё это накладывает новые высокие требования. Что нужно знать в первую очередь, чтобы удержаться на волне прогресса, если вы новичок?

Доменное имя

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

Технологии и языки

• HTML — клеточная ткань сети, чаще всего на её основе создают каркас и структуру страниц;
• CSS — дополнительная технология, позволяющая вдохнуть в «серую» HTML'ку жизнь, красоту и гармонию;
• JavaScript — язык скриптов. Обеспечивает интерактивность сайта и автоматизацию типовых задач, будь то работа с cookies, e-mail и т.д.
• PHP — серверный язык программирования. Позволит обрабатывать данные ваших пользователей, сделает структуру вашего сайта более удобной для проектирования.

Дизайн

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

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

Теория цвета и пропорции. Очень важно учесть расположение всех элементов и цветовую палитру сайта для расстановки нужных акцентов.

Типографика. «Правильные» шрифты лучше подают информацию и добавляют гармоничности общей стилистики.

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

Добавим сюда качественную и обработанную графику, чувство вкуса, интуицию и воображение.

Инструменты

Photoshop — мощный графический редактор. Одна из самых известных программ в мире дизайна, внешний вид будущего сайта создаётся именно в ней.

Редактор кода. Их много и все они разные, но один из лучших для веб — бесплатный Brackets.

Браузеры. Один и тот же код в нескольких вэб-клиентах может выглядеть по разному. Тестируя сайт в разных браузерах проектировщик добивается максимально схожего отображения.

Веб-сервер. Программа позволяющая запускать страницы разрабатываемого сайта локально на вашем компьютере. Используйте OpenServer.

Практика

Чтобы научиться писать хорошие сайты, нужно ... писать сайты. Практика — лучшее обучение. Изучайте чужой код и дизайнерские решения, в поисках вдохновения, но не кражи идей.