Урок 2 из 5

Дизайн и первая версия сайта

11 минут

Выберите направление оформления и соберите первую рабочую версию сайта с демонстрационными данными.

Сейчас появится сайт, который можно открыть и показать: главная, каталог, страницы объектов, меню, подвал. Не каркас и не заготовка — рабочая версия.

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

Готовый запрос
Найди в интернете, как выглядят сайты в моей тематике: смотри и живые сайты, и галереи готовых работ, и подборки шаблонов на конструкторах сайтов. На основе увиденного собери 3–4 разных направления оформления. Для каждого опиши словами: — какое впечатление оно создаёт и кому подходит; — основной цвет, фон светлый или тёмный; — какие шрифты: с засечками или без, заголовки крупные или сдержанные; — сколько воздуха между блоками, острые углы или скруглённые; — 2–3 адреса сайтов, где так сделано, чтобы я мог посмотреть. Направления должны быть заметно разными, а не тремя оттенками одного. Ничего пока не применяй, файлы не меняй. Я выберу номер.

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

Если ни одно не подошло, скажите конкретно: «первое слишком строгое, третье слишком яркое, покажи что-то между ними». Формулировка «всё не то» ни к чему не приведёт.

Собираем сайт

Собираем сайт
Беру вариант [номер]. Сделай сайт по плану в этом оформлении, чтобы я мог открыть его локально и посмотреть. Оформление задай один раз для всего сайта, чтобы новые страницы получали его автоматически. Своих данных у меня пока нет, поэтому заполни страницы демонстрационными и подпиши в подвале, что данные на сайте демонстрационные. Отзывов не придумывай. Фотографии не подставляй и в интернете не ищи — на их месте поставь аккуратные заглушки. Свои изображения я добавлю позже. В конце перечисли, какие страницы получились и что на них есть.

Демонстрационные данные — это нормально и полезно. Без них сайт выглядит пустым каркасом, и непонятно, как он будет смотреться с настоящим содержимым: как ляжет длинное название, хватит ли места цене, не разъедется ли плитка. В следующем уроке эти данные переедут в таблицу, и вы замените их своими.

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

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

Если результат не тот, описывайте не решение, а то, что видите. «Меню на странице товара не открывается, на остальных открывается» работает лучше, чем «поправь меню, наверное там ошибка в скрипте»: во втором случае агент пойдёт проверять вашу догадку, а не проблему.

Что получилось

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

*Стоит проверить:* оформление задано в одном месте, а не в каждой странице отдельно. Спросите: «в каком файле задано оформление и получит ли его новая страница, если ты её создашь». Если в каждой отдельно — попросите перенести, пока страниц пять, а не пятнадцать.