Уже давно доказано, что человек сначала разглядывает картинки, - и только потом читает!
Поэтому, для обозначения соответствующих разделов сайта «Профессор Пуф» было принято решение разработать тематические лого или их можно назвать еще пиктограммами, которые должны облегчить восприимчивость посетителей сайта и позволят быстрей «прочитать» назначение каждого из разделов сайта.
И так у нас есть пара разделов, которые нуждаются в представлении посетителям сайта «Профессор Пуф» — это «НАШ ХЛЕБ» и «НАШЕ МЕНЮ».
Тематическое лого «НАШ ХЛЕБ» - должно «рассказывать» посетителям сайта «Профессор Пуф», о наличии собственного производства свежего хлеба, начиная от выращивания собственного зерна по старинной методике, включая мельничный помол для качественной и полезной муки и заканчивая современной технологией бережного выпекания готового хлеба «Профессор Пуф».
Я решил не перегружать тематическое лого «НАШ ХЛЕБ» печами для выпекания или мельницей. Было решено на лого показать свежий хлеб и один колос собственного зерна. А мельницу, к слову сказать, я решил показать отдельно.
Тематическое лого «НАШЕ МЕНЮ» - должно «рассказывать» посетителям сайта «Профессор Пуф», о кухне «Профессор Пуф» и его примерном МЕНЮ. Конечно, весь ассортимент меню ресторана не хотелось показывать в тематическом ЛОГО, поэтому я решил показать блюда, которые ресторан предлагает для выездного кейтеринга: гамбургеры, шашлык, рыбные стейки.
Лого-пиктограмма |
Лого-пиктограмма |
Пекарня «Профессор Пуф» производит отличный хлеб из муки собственного зерна, выращенного по старинной методике. Поэтому я решил показать мельницу отдельной анимированой иллюстрацией во весь экран.
Мне не хотелось брать фотографию чьей то мельницы. И потом, более менее симпатичные мельницы остались только за границей. Во всяком случае, было принято решение показать иллюстрацию мельницы, что бы не сильно акцентировать происхождение мельницы, её состояние и прочие функциональные признаки.
Более того, я решил «построить» собственную мельницу в виртуальном пространстве и уже с 3-х мерной модели сделать рендер иллюстрации для дальнейшего её размещения на сайте «Профессор Пуф» с последующей анимацией крыльев мельницы.
Я построил фундамент из желтого кирпича, стянул его для прочности и красоты конечно — деревянными брусьями. Соорудил само помещение мельницы из могучих тёмных досок, увенчав башню мельницы жёлтыми декоративными досками, что бы попасть в чёрно-жёлтую цветовую гамму сайта «Профессор Пуф».
После того как рендер был готов, я установил мельницу в поле с золотой пшеницей и уже отдельным объектом сверстал на SASS винт (крылья) нашей 3-х мерной иллюстрации мельницы.
В данном ракурсе мельница может казаться не слишком объемной, но это не случайно. Можно было выбрать более выразительный 3-х мерный изометрический ракурc мельницы, но тогда лопасти не возможно было бы проанализировать. Поэтому я решил не много пожертвовать красивым ракурсом, но сохранить при этом возможность анимации крыльев мельницы.
3D модель мельницы |
Цветовую схему начинаю формировать отталкиваясь от основных цветов самого ресторана, — а он чёрный. Также используем цвета ЛОГО, — белый и черный, в зависимости от ситуации.
И добавим акцентных цветов, что бы не было скучно: желтый — потому что он «сочный» и зелёный потому что он «вкусный». Основной цветовой гаммой для сайта «Профессор Пуф», я выбрал пару: Черный и Белый это позволит нам сохранить, достаточно «строгий» стилистически сайт.
Для мягких связующих элементов сайта, я использовал промежуточные цвета, между Черным и Белым, что бы понизить возникший контраст.
Яркие «цветные пятна» нам дадут акцентные цвета - которые разбавят монотонную бело-черную цветовую гамму всего полотна сайта «Профессор Пуф».
Серые оттенки, мы использовали что бы «говорить» в паттернах на абсолютно чёрном фоне. Это позволит дать нам дополнительную «глубину» общего впечатления цветовой гаммы сайта.
Цвета стилей сайта |
SASS переменные цвета |
Кладём в основу формирования топологической схемы всех страниц веб сайта «Профессор Пуф», основные направления деятельности ресторана.
На главной странице сайта, показываем блок услуг, которые предлагает ресторан «Профессор Пуф»:
Затем в отдельной секции, даем информацию о доставке и ее условиях. Для визуализации доставки, я использовал пикторгамму мобильного фургона и покрасил его в нашу цветовую гамму белый, желтый, черный. Крупная фотография повара, который трудится над блюдом, дополнительно добавит аппетита при просмотре этого раздела сайта.
На странице «НАШ ХЛЕБ» мы расказываем об основных этапах производства хлеба.
Широкой секцией покажем поле с золотистистой пшеницей и в центр его, поставим нашу 3-х мерную модель мельницы. Что бы не много «оживить» вебсайт, сделаем небольшую анимацию лопостей мельницы.
Топология страниц сайта |