частный веб мастер

Проекты

WEB DEVELOPER & DESIGNER

Сайт для ресторана «Профессор Пуф»

Авторская Русская Кухня.

Avatar

Разработка тематических лого
для веб сайта «Профессор Пуф»

Каждому направлению деятельности —
по отдельному лого.

Уже давно доказано, что человек сначала разглядывает картинки, - и только потом читает!

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

И так у нас есть пара разделов, которые нуждаются в представлении посетителям сайта «Профессор Пуф» — это «НАШ ХЛЕБ» и «НАШЕ МЕНЮ».

Тематическое лого «НАШ ХЛЕБ» - должно «рассказывать» посетителям сайта «Профессор Пуф», о наличии собственного производства свежего хлеба, начиная от выращивания собственного зерна по старинной методике, включая мельничный помол для качественной и полезной муки и заканчивая современной технологией бережного выпекания готового хлеба «Профессор Пуф».

Я решил не перегружать тематическое лого «НАШ ХЛЕБ» печами для выпекания или мельницей. Было решено на лого показать свежий хлеб и один колос собственного зерна. А мельницу, к слову сказать, я решил показать отдельно.

Тематическое лого «НАШЕ МЕНЮ» - должно «рассказывать» посетителям сайта «Профессор Пуф», о кухне «Профессор Пуф» и его примерном МЕНЮ. Конечно, весь ассортимент меню ресторана не хотелось показывать в тематическом ЛОГО, поэтому я решил показать блюда, которые ресторан предлагает для выездного кейтеринга: гамбургеры, шашлык, рыбные стейки.

Avatar

Лого-пиктограмма

ALT
Avatar

Лого-пиктограмма

ALT

3D иллюстрация мельницы

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

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

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

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

После того как рендер был готов, я установил мельницу в поле с золотой пшеницей и уже отдельным объектом сверстал на SASS винт (крылья) нашей 3-х мерной иллюстрации мельницы.

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

Avatar

3D модель мельницы

ALT

Сайт для ресторана «Профессор Пуф»

Авторская Русская Кухня.

ALT
Avatar

Цветовая схема
для веб сайта «Профессор Пуф»

Цвет — сформирует нам характер сайта!

Цветовую схему начинаю формировать отталкиваясь от основных цветов самого ресторана, — а он чёрный. Также используем цвета ЛОГО, — белый и черный, в зависимости от ситуации.

И добавим акцентных цветов, что бы не было скучно: желтый — потому что он «сочный» и зелёный потому что он «вкусный». Основной цветовой гаммой для сайта «Профессор Пуф», я выбрал пару: Черный и Белый это позволит нам сохранить, достаточно «строгий» стилистически сайт.

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

Яркие «цветные пятна» нам дадут акцентные цвета - которые разбавят монотонную бело-черную цветовую гамму всего полотна сайта «Профессор Пуф».

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

Avatar

Цвета стилей сайта

ALT
Avatar

SASS переменные цвета

ALT
ALT

Сайт для ресторана «Профессор Пуф»

Avatar

Топологическая схема страниц
для веб сайта «Профессор Пуф»

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

Кладём в основу формирования топологической схемы всех страниц веб сайта «Профессор Пуф», основные направления деятельности ресторана.

  • Главная (представительская)
  • Наш хлеб (выпекание своего хлеба)
  • Наше меню (фото блюд)

На главной странице сайта, показываем блок услуг, которые предлагает ресторан «Профессор Пуф»:

  • Банкеты
  • Кофе-брейки
  • Фуршеты

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

На странице «НАШ ХЛЕБ» мы расказываем об основных этапах производства хлеба.

  • Выращиваем
  • Мелем
  • Выпекаем

Широкой секцией покажем поле с золотистистой пшеницей и в центр его, поставим нашу 3-х мерную модель мельницы. Что бы не много «оживить» вебсайт, сделаем небольшую анимацию лопостей мельницы.

Avatar

Топология страниц сайта

ALT

Сайт для ресторана «Профессор Пуф»

Авторская Русская Кухня.

ALT

Мобильный сайт «Профессор Пуф»

ALT
ALT

Мобильный сайт «Профессор Пуф»

ALT
ALT

Мобильный сайт «Профессор Пуф»

ALT
ALT

Мобильный сайт «Профессор Пуф»

ALT
ALT

Мобильный сайт «Профессор Пуф»

ALT
ALT

Мобильный сайт «Профессор Пуф»

ALT

Спасибо

WEB DEVELOPER & DESIGNER

Перейти на сайт
ALT

Лента веб проектов


Смотреть новость

Сайт о фотосъёмке, видеосъемке, монтажу и профессиональному продакшену.

Web News

Смотреть новость

Авторская Русская Кухня. Выездной кейтеринг. Закуски и Заедки.

Web News