Сайт для «Самусьского судостроительно-судоремонтного завода»

Задача: сделать сайт с лёгким доступом к продающимся судам и рассказывающий о 130-летней истории завода. Структура должна быть похожа на структуру сайта Сибирского центра логистики — холдинга, в который входит «Самусьский судостроительно-судоремонтный завод».
Решение: создаем «энциклопедический» сайт: здесь и хронология производства судов, и «экспонаты»-корабли, и даже фотографии начала XX века. Суда, выставленные на продажу, выносим в зону контактов в шапке сайта, благодаря чему в этот раздел можно перейти с любой страницы сайта.
Схожесть со структурой сайта холдинга передаём за счёт расположения меню и большой атмосферной фотографии на главной странице.

Подготовка

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

Цвета

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

Шрифты

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

Б. М. Кисин в статье «Конструкция шрифта. Антиква и гротеск» отмечает: «Десяти лицам было предложено прочесть 12 строк, набранных тем и другим шрифтом. Был установлен с точностью до долей секунды темп чтения для каждого испытуемого и выведено среднее. Так как шрифт предназначался для газеты, которую обычно читали в вагоне трамвая, метро, то был произведен второй опыт — чтение вибрирующего текста. И в том, и другом случае оказалось, что гротеск легче читается. При вибрировании буквы гротеска легче узнавались, чем буквы антиквы. При чтении на расстоянии показатель для антиквы оказался 9,88 и для гротеска — 10,1. При слабом освещении оказалось, что гротеск был виден в то время, когда буквы антиквы ещё были расплывчаты. Для гротеска в среднем требовалось освещения на 20% меньше». Поэтому для абзацев мы использовали гротеск.

Детали

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

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

Большому кораблю — большая страница

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

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

Благодаря сотрудничеству с Сибирским центром логистики, мы продолжаем погружение в тему речного судоходства. Сейчас работаем над новым проектом — разрабатываем сайт «Томской судоходной компании».

Отзыв заказчика

Визуальная навигация для Центра занятости населения города Томска
Визуальная навигация для Центра занятости населения города Томска
В портфолио
Сайт для Gork Studio
Сайт для Gork Studio
Студия Avaj занимается графическим дизайном,
разработкой веб-сайтов и логотипов
Нужна консультация?