ARTLEBEDEV
  • Веб
  • ТНК-ВР
  • 1.0 2.0

    Создание второй версии сайта ТНК на Украине

    Описание Процесс

    Определяемся с основными блоками: карта АЗК, промо и немного новостей.

    Пробуем пройтись широкими мазками.

    Убираем малоинформативную карту Украины и заменяем ее большой тематической иллюстрацией.

    Уже ярче, но по-прежнему бессмысленно. Добавляем интерактив — теперь можно «прокатиться» между городами, заодно узнав адреса новых АЗК.

    Время суток тоже меняется.

    А что если использовать силуэты автомобилей как контейнеры для фото?

    Силуэт на силуэте.

    Резервируем подвал под карту сайта.

    Нет, место ей все же вверху.

    Новостные блоки и иллюстрации с силуэтами не приняты клиентом. Исправляем. Теперь сверху будет сменное порно промо.

    Середина страницы пока похожа на набор ингредиентов для борща. Упорядочиваем блок с преимуществами, а стелу объединяем с логотипом.

    Клиент: Все хорошо, только надо добавить портрет гендиректора с небольшим высказыванием.

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

    Пока шла работа, сменилась промо-акция. Ставим в шапку новую иллюстрацию.


    Переходим к деталям.

    Не хватает пиктограмм (кстати, что изображено на предпоследней — пельмень или подушка?).

    Работаем над иллюстрацией для автомойки.


    Делаем внутренние разделы.

    Работаем над структурой страниц. Карту сайта раскрываем в выпадающем блоке сверху.

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

    По-прежнему жалко пустого места слева. Возвращаем туда колонку с контентом.

    Навигацию с контекстно зависимыми ссылками ставим на плашку. Не нравится — не смотри.

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

    Сбиваем плотнее иллюстративный материал.

    Раздел «Пресс-центр» сложился с первой попытки.

    А вот с «Сетями АЗК» пришлось повозиться.

    Слишком много внимания джобберам. Меняем местами текст про них и блок про топливо.

    Теперь слишком низко опустились ссылки на «Сервис» и «Экологию». Переносим «Джобберов» вниз.

    «Музей клонов» оказался важнее «Сервиса». Делаем рокировку.

    Немного разбавляем унылую двухколоночность полосы.

    В разделе «Сервис на АЗК» можно было ограничиться тематической иллюстрацией.

    Но хотелось чего-то, чуть подробнее рассказывающего про услуги. Вернули пиктограммы с главной страницы.

    Дополнили их комментариями.

    В конечном итоге ограничились простым списком.


    Переходим к странице поиска, совмещенной с картой сайта.

    Шаблонный вариант (как без него?).

    Повышаем наглядность


    Структурируем результаты поиска

    Первый подход — простой список с дополнительной сортировкой по упоминанию слов в заголовках, самих текстах и в ссылках.

    Делаем фильтр по основным разделам.

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

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

    Внутри видим два первых и последний результаты поиска.


    А теперь — десерт.

    Делаем страницу 404-й ошибки

    Вначале — типичное блуждание дизайнера во мраке непонимания сути задачи.

    Затем — безысходность.

    Не беда. Раскрываем здесь карту сайта, добавляем немного изюма. И в печать!

    Вернее, поехали! :-)

    Параллельно с разработкой нового сайта продолжаем поддерживать старую версию

    Задача: нарисовать тизер для акции про пиво «Купи пять бутылок — шестая в подарок».

    Дизайнер: Пиво, красиво.

    Арт-директор: Не порть фирменный оранжевый круг.

    Дизайнер: А с фоновой шестеркой?

    Арт-директор: Не читается.

    Дизайнер: Может, бутылку целиком?

    Арт-директор: Как в ларьке.

    Дизайнер: Запотевшая, как из холодильника.

    Арт-директор: Нет в этом праздника и подарка.

    Дизайнер: Вот подарок.

    Арт-директор: Так подарок — сама бутылка.

    Дизайнер: Ленточка вокруг бутылки?

    Арт-директор: Гений!

    Дизайнер: Ленту графически привяжем к логотипу.

    Арт-директор: Развязанная? Уже кто-то попробовал? Бант лучше повяжи. И бутылку крупнее.

    Дизайнер: Двойной праздничный узел.

    Арт-директор: Лента справа от лого не должна вылезать.

    Дизайнер: Зануда.

    Арт-директор: Пиво будешь?