Постановка задачи

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

Технические моменты

Я умышленно опускаю все технические детали отрисовки макета, с которыми всегда можно ознакомиться отдельно (сетка, методы отрисовки в фотошопе и тд), я заостряю внимание исключительно на проектировании дизайна.

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

Определение границ сайта

Назовем фирму заказчика "Company". Эта компания занимается производством и распространением своего строительного грунта. Необходим сайт, который будет продвигать продукцию. То есть, нам нужно проектировать не интернет-магазин, а корпоративный сайт с каталогом, предложениями и описанием предоставляемых услуг.

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

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

PS. Все скрины, приведенные ниже, кликабельны.

Эскиз

• Для рекламы продукции на сайте разумно использовать небольшой слайдер с сопутствующими блоками изображений, которые ознакомят пользователя с основными разделами.
• Целевой аудиторией фирмы являются, преимущественно, мужчины 25-50 лет, занимающиеся поиском поставщиков грунта для своих строительных компаний, поэтому сайт должен выглядеть респектабельно (высокий достаток аудитории), современно и легко (для молодой части аудитории). Мы будем использовать светлые тона для основы и немного темного с оранжевым для контрастности и акцентировании внимания на важных элементах сайта.

Итог: Цветовая схема, основные элементы стиля определены, продолжаем.

Расположение блоков

• Играем с шириной шапки и добавляем главное меню. Все это пока выглядит просто, но наша задача сейчас, определиться со стилем, поэтому на первых шагах мы будем экспериментировать, выбирать направление.
• Убираем оранжевую подводку для шапки. Без нее сайт выглядит серьезнее, нам нужна респектабельность.
• В дизайне используем острые углы и простоту форм для большего расположения со стороны респектабельной аудитории.
• Сразу под шапкой располагаем дополнительную навигацию, которая будет актуальна при посещении других разделов сайта. Под навигацией отводим место небольшому информационному блоку с последней новостью или выгодным предложением. Этот блок можно выполнить в виде бегущей строки.
• Для наглядности, вставляем в слайдер изображение. В идеале, оно должно хорошо контрастировать со светлым фоном. Начинаем прорисовку элементов слайдера.

Итог: Наш сайт стал чуть сочнее и серьезнее - неплохо.

Поиск решений

• Можно начинать думать о логотипе, если фирма нам его не предоставила. В любом случае, его наличие сделает шапку визуально более законченной. В данном случае, мы отрисовываем свой логотип в виде ковша, копающего грунт, с сохранением угловатости и простоты форм - стало лучше.
• Пробуем менять расположение главного меню. С ним пока явно что-то не так, оно совершенно не обращает на себя внимание. Можно попытаться сделать для логотипа более темный фон. Визуально, это раздробит шапку на 2 части. Под шапку пробуем вернуть оранжевую подводку - результат посредственный, но мы экспериментируем.
• Продолжаем отрисовку элементов слайдера и начинаем думать о том, что где-то на видном месте, мы обязательно должны сделать акцент на каталоге продукции, чтобы пользователь не бился в попытках отыскать цены на все типы грунтов.
• Используем бэкграунды для дополнительной навигации. Результат: навигация дополнительная, и не должна слишком сильно акцентировать на себе внимание пользователя.

Итог: Сайту не хватает респектабельности, нужно определяться со стилем.

Поиск решений №2

• Небольшая коррекция логотипа и меню. Шапка стала спокойнее.
• Коррекция дополнительной навигации. Теперь она не акцентирует на себе столько внимания.
• Блок с бегущей строкой стал визуально легче, за счет использования оранжевого цвета. Пробуем немного скруглять углы.
• Помимо кнопки для скачивания каталога, на сайте должен быть доступен блок, в котором перечисляются основные предоставляемые услуги. В данном случае мы будем использовать горизонтальный скроллер под слайдером.

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

Главное меню

• Избавляем логотип от округлого элемента, сохраняя основную идею. Результат достойный.
• Небольшая коррекция по цвету: переходим от оранжевого к насыщенно рыжему.
• Очень важное решение: перенести меню под шапку. Таким образом, мы визуально отделяем меню и делаем на нем больший акцент - это то, что нам было нужно.

Итог: Шапка сайта стала лучше по всем параметрам. Мы, наконец, определились с расположением главного меню.

Двухцветный логотип

• Используем второй цвет в логотипе (белый). Это делает его ярче и читабельнее.
• Размещаем кнопку скачивания каталога в шапке, после переноса меню у нас появилось для этого свободное пространство.

Итог: Хорошая работа - логотип стал ярче, а шапка еще лаконичнее.

Доводка главного меню

• Выравниваем пункты главного меню по левой границе шапки (по аналогии с логотипом), а справа у нас освобождается место для панели поиска. Используем рыжий цвет для текущего раздела меню и светло-серый для ховер-эффекта.
• Возвращаем бегущей строке рыжий цвет с острыми углами.

Итог: Главное меню более рационально использует пространство своего блока, что добавляет порядка шапке.

Стиль определен

• Очень важное изменение, касающееся удаления боковых полей с полезного пространства сайта. Также мы убираем лишние отступы над главным меню и между блоками слайдера.
• Выравниваем панель поиска с правой границей кнопки "Скачать каталог".
• Вместо стрелок в дополнительной навигации мы используем окружности.
• Мы также используем надписи на слайдере без отступа слева.
• Начинаем подбирать текстуру для фона.

Итог: Удаление полей делает дизайн более техничным и простым. С этого момента можно считать, что мы нащупали стиль будущего сайта и двигаемся в верном направлении.

Скроллер и доставка

• Пробуем перенести кнопку скачивания каталога из шапки в область слайдера. Наполняем слайдер информацией. Перемещаем стрелки прокрутки слайдов к левой границе сайта для создания равномерного информационного шума.
• Продолжаем работу над скроллером. Используем жирные заголовки и бледные описания к ним. Вместо иконок пока используем окружности.
• Доставка - важная часть работы фирмы, поэтому не стесняемся уделить этой теме особое внимание. Немного графики, информирующей клиента о быстрой доставке к дому из любой точки России. В дальнейшем мы можем сделать эту графику интерактивной: пользователь указывает пункт доставки (город, район), а сайт выдает примерные сроки.

Итог: Слайдер принимает почти законченный вид, а скроллер и графика доставки делают сайт более информативным, при этом, не перегружая его.

Лента новостей и футер

• Прикидываем примерное расположение блока с последними новостями фирмы.
• Отрисовываем предположительные границы футера.

Итог: Сайт увеличился по высоте, а темный футер утяжеляет низ, делая дизайн в целом более сбалансированным (темная шапка балансирует с темным футером).

Доводка ленты новостей

• Графика с доставкой становится контрастнее за счет осветленного фона.
• По аналогии со слайдером, убираем лишние поля у ленты новостей.

Итог: Теперь верх и низ сайта выполнены в едином стиле.

Слайдер с предложениями

• Запомните, любую информацию на сайте лучше подкреплять графикой, хотя бы в минимальном объеме. Так уж устроен человек. Добавляем 3 блока с изображениями и один с текстом, это и будет наша новостная лента. По-прежнему игнорируем боковые поля для изображений (на этот раз справа).
• Слайдер под блоками используем для представления выгодных предложений фирмы. Предложения будут автоматически перещелкиваться. Соответственно, к каждому из трех предложений, будет соответствовать своя иллюстрация.
• Пробуем использовать более контрастный фон для сайта.

Итог: Сайт стал еще выше и еще информативнее. Графикой не перегружен, но слишком контрастный задний фон слегка отвлекает пользователя от изучения главной страницы.

Доводка предложений

• Активное предложение выделяем рыжим цветом и добавляем светло-серый ховер-эффект. Поясняющая полоса на иллюстрации должна плавно перемещаться вслед за активным пунктом предложения.
• Под футером оставляем немного пространства для предполагаемого копирайта.
• Обрати внимание, что изображения новостей и предложений строго выровнены относительно друг друга, а также соответствуют ширине трех категорий верхнего скроллера.

Итог: Нижняя половина сайта приобретает законченный вид.

Финал

• Небольшая коррекция по цвету в сторону еще более насыщенного рыжего.
• Корректируем логотип, удаляя небольшие отступы между оранжевым и белым элементами. Теперь логотип еще лучше вписывается в общий стиль сайта без боковых полей.
• Мы подобрали менее контрастный фон, он состоит из треугольников, отлично перекликаясь со схематичным образом гор, и не делает на себе слишком сильный акцент.
• Дабы использовать больше свободного пространства шапки - возвращаем туда кнопку скачивания каталога. Добавляем в нее пиктограмму и возможность скачивания в двух форматах на выбор (pdf и doc).
• В слайдере используем размытие для фона информационного текстового блока, откуда мы перенесли кнопку каталога. Вместо этой кнопки мы располагаем кнопку просмотра фотографий с образцами грунта. Прижимаем ее к нижней границе слайдера для соответствия общему стилю.
• Добавляем тематические пиктограммы к скроллеру с ховер-эффектом в оранжевый цвет.
• Небольшая коррекция графики с доставкой, добавляем горизонтальную линию, символизирующую путь от точки отправки до пункта назначения.
• Добавляем фотографии к ленте новостей. Используем тонкие стрелки для заголовков. А для просмотра полной ленты отрисовываем рыжую кнопку.
• Заполняем футер четырьмя столбцами: контактами, иконками социальных сетей (соответствующих общему стилю), мнениями клиентов о компании, типами грунта и формой обратной связи. Используем пунктирные разделители для более четкого визуального разделения на столбики.
  Итог: Главная страница сайта выглядит полностью законченной. Вся основная информация по фирме доступна и легко читается. Нескольких секунд изучения достаточно, что бы понять сферу деятельности фирмы. Дизайн прост и информативен - поставленная задача выполнена!

Альтернативные цветовые схемы

PS.

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