Пришел к нам наш старый клиент и говорит хочу новый сайт, да так чтоб русский оберег в нем чувствовался, потому что компания так и называется: ОБЕРЕГ!
А компания, на минуточку, занимается разносторонним обслуживанием объектов по противопожарной безопасности, расчетами пожарных рисков, аудитами и многим другим. Реальный оберег от пожаров.
Что же такое этот Неослав?
Данный термин как графсистему ввела не так давно школа дизайна Гранича. Неослав или Неославянское возрождение - это обновление славянской стилистики и переосмысление русской культуры. Современные народные узоры, орнаменты и даже пиксельная графика. Всё это есть в графсистеме Неослав.
И мы не отставали и нарисовали для начала простой и лаконичный логотип.
В нем сочетается древний славянский символ «чуд» и название компании.
Следующий этап – составление мудборда, это сборка различных элементов, текстур, картинок для составления общей картины видения этого проекта дизайнером. А так же на данном этапе учитываются пожелания заказчика. У нас, например, были пожелания по цветам: белый, красный, черный, бежевый.
Попав «в сердечко» мудбордом – мы приходим к этапу отрисовки уже самого дизайна, пропуская этап прототипирования, так как он был уже давно собран маркетологом.
Самое главное – главная!
Отрисовка главной начинается с хедера, так как сайт многостраничный и везде будет одна и та же шапка – нужно сделать ее универсальной под любое наполнение.
Именно здесь мы начали закладывать зерно неослава – иконки для других страниц из русского узора косоворотки (а вы знали, что у нас были именно косоворотки? Небольшой интересный факт)
После хедера начали разрабатывать несколько вариантов отображения данных на первом экране, который с первой минуты должен хотя б чуточку зацепить пользователя.
Будет это 1 баннер на главной или несколько? Как лучше преподать услуги, сразу все или скроллом или списком? Как подать энергетику сайта? Строгость или мягкость? Сразу ярко или легко?
Эти задачи решаем упрощенной отрисовкой:
Мы остановились на интереснейшем варианте в плане информативности и лаконичности. Не стали расписывать много про услуги, но при этом оставили внушительный список, чтобы дать понять пользователю о широком спектре услуг компании. В изображениях услуг так же соблюдается гамма с красным оттенком.
Больше информативности в плане баннеров, акция главная + доп. акция прекрасно вписались на первом экране сайта и дополняют друг друга по цветам.
У компании оберег отличная и именитая команда, в числе которой Виталий Бойко – мы отобразили в макете место для главной звезды, чтобы улучшить доверие к продукту.
Подкрепляем экспертность буллетами, подчеркнутыми красивым описанием с визуальным тематическим изображением, сколажированным в цветах и стилистике славянского духа.
Неотъемлемая часть главной страницы для крупных компаний – это анонсы новостей, которые помогают пользователям быть в курсе происходящего в мире, наращивать ссылочную массу и делать сайт интереснее и увесистее в поле рунета.
Обратите внимание на интересную особенность заголовков - они сделаны с буквицей, такие тонкие нюансы и собирают общую стилистику сайта.
Некоторые заголовки подчеркиваются интересной пиксельной веточкой. Но это для нас, дизайнеров, она пиксельная, а для обывателя – это отсылка к вышивке крестиком!
Дополнительная форма захвата перед подвалом главной страницы тоже имеет несколько интересных особенностей:
Фото мужчины подобрано в специальной бежево красной гамме, мы сохранили буквицы для заголовков и подчеркнули отдельно формы ввода узором для косовороток.
Сочетание капслочного написания названий кнопок и большого простора вокруг – создают приятное впечатление, легкость восприятия информации.
Подвал - так же важная универсальная часть многостраничного сайта
Он полезен для навигации, дополнительных акцентных кнопок, юридической информации и контактных данных.
Главную «главную» мы завершили, перейдем к кое-чему даже посложнее...
Классическая страница со всеми элементами дизайна
Мы выбрали для примера отрисовки страницу про техническое обслуживание систем.
Для начала отрисовали поведение заголовка сразу с картинкой, подзаголовком и кнопкой.
Следом после уже продуманного стиля с буквицей для заголовков идет стиль таблицы:
Акцентные цвета распределены по градации: черный, бежевый, серый.
Блок FAQ отрисовывается сразу в открытом виде и мы пошли дальше - сделали сразу стиль маркированного списка.
Хотели бы так же обратить внимание на нумерованный список:
Мы не только сделали цифры другим шрифтом и отбили их на плашки – в этом варианте еще и показали небольшой акцентный блок светло-серого цвета с логотипом, уходящим за рамки внизу слева. Изящно этот блок подчеркнул русско-славянский узор.
Квиз – отличный ход для маркетинга, поможет клиенту быстрее определиться с покупкой. Отрисуем красиво и его!
Отдельный баннер слева, сколлажированный и самостоятельно отрисованный в фотошопе придаст оригинальности предложению от компании.
Изящный узор на фоне создаст атмосферу старых книг, славянской печатности.
Внутреннее наполение квиза изящно сочетает в себе легкий технологичный дизайн, неославянский стиль и функционал. Так же мы тут отразили виды чек-боксов и кнопок для листинга. Процент скидки справа подразумевает под собой текстовую верстку и динамичное изменение количества.
Поколдовали над квизом и переходим к приятным деталям далее:
Яркий, четкий, лаконичный – и это всё про лид блок. Обратим ваш взгляд на персонажа, в его руках не планшет, а береста. Маленькая пасхалка от дизайнера. Эту форму так же подчеркнули прямоугольники с березовой текстурой, флажок с логотипом отбил и выделил плашку, контрастная кнопка и диалог идут в равновесии и выделяются от общей массы.
Хотелось бы еще обратить ваше внимание на отрисовку этапов:
Для различных производств и услуг всегда важны плашки этапов – у нас это наслаиваемые друг на друга прямоугольники с яркими цифрами и вручную отрисованными в фотошопе картинками в одной гамме с сайтом и тематической стилистикой.
Для новостей отрисовали 2 страницы
Категории выделили отдельно под заголовок для быстрой навигации. На первом же экране страницы отразили актуальные новости-баннеры.
Отдельная страница-шаблон для новости. Слева расположена упрощенная навигация для длинных статей.
Дополнительно отрисовали маркированный и нумерованный список в поведении на укороченной боковой странице.
Показываем размер вставок видео с подписью и отрисовываем цитату.
И не забываем про дополнительные новости.
Красиво отрисуем страницу контактов
Чтобы актуальная информация была расположена четко и читабельно.
Не забудем про проекты компании, анонсы с ярко-красными кнопками расположат пользователя к желанию узнать подробнее:
Но что же будет когда нажмем кнопку? Лаконичный поп-ап с описанием и фотографиями:
И под конец, как вишенку на торте, покажем вам поп-апы и 404 страницу. В 404 мы так же добавили небольшой вязаный узор в цифру 0 и текстуру березы в сепаратор, чтобы подчеркнуть неослав:
Поп-апы в той же гамме, легкие и лаконичные.
Бонусом отрисовали обложку и аватар для ютуб-канала:
На этом работу над дизайном данного проекта мы закончили и приступили к верстке. Получилось очень необычно, элегантно и интересно!
Нам было в радость привнести в мир веб-дизайна славянского стиля.
Понравился кейс и хотите оформить так же необычно и интересно свой проект? Пишите нам на почту pines@quince-d.ru (https://quince-d.ru/)!
