It has long been proven that a person first looks at pictures - and only then reads!
Therefore, to designate the relevant sections of the site «Professor Poof» , it was decided to develop thematic logos, or they can also be called pictograms, which should facilitate the receptivity of site visitors and allow faster «read» the appointment of each section of the site.
And so we have a couple of sections that need to be presented to the visitors of the site «Professor Poof» - these are «OUR MENU» and «OUR MENU».
Thematic logo «OUR MENU» - should "tell" the visitors of the site «Professor Poof» about the existence of our own production of fresh bread, starting from growing our own grain according to the old method, including the mill grinding for high-quality and healthy flour and ending with the modern technology of gentle baking of ready-made bread «Professor Poof» .
I decided not to overload the «OUR BREAD» themed logo with baking ovens or a mill. It was decided to show fresh bread and one ear of its own grain on the logo. And, by the way, I decided to show the mill separately.
Thematic logo «OUR MENU» - should "tell" the visitors of the site «Professor Poof» about the kitchen «Professor Poof» and its exemplary MENU. Of course, I didn't want to show the entire assortment of the restaurant's menu in the thematic LOGO, so I decided to show the dishes that the restaurant offers for off-site catering: hamburgers, shashlik, fish steaks.
Logo pictogram |
Logo pictogram |
Пекарня «Профессор Пуф» производит отличный хлеб из муки собственного зерна, выращенного по старинной методике. Поэтому я решил показать мельницу отдельной анимированой иллюстрацией во весь экран.
Мне не хотелось брать фотографию чьей то мельницы. И потом, более менее симпатичные мельницы остались только за границей. Во всяком случае, было принято решение показать иллюстрацию мельницы, что бы не сильно акцентировать происхождение мельницы, её состояние и прочие функциональные признаки.
Более того, я решил «построить» собственную мельницу в виртуальном пространстве и уже с 3-х мерной модели сделать рендер иллюстрации для дальнейшего её размещения на сайте «Профессор Пуф» с последующей анимацией крыльев мельницы.
Я построил фундамент из желтого кирпича, стянул его для прочности и красоты конечно — деревянными брусьями. Соорудил само помещение мельницы из могучих тёмных досок, увенчав башню мельницы жёлтыми декоративными досками, что бы попасть в чёрно-жёлтую цветовую гамму сайта «Профессор Пуф».
После того как рендер был готов, я установил мельницу в поле с золотой пшеницей и уже отдельным объектом сверстал на SASS винт (крылья) нашей 3-х мерной иллюстрации мельницы.
В данном ракурсе мельница может казаться не слишком объемной, но это не случайно. Можно было выбрать более выразительный 3-х мерный изометрический ракур мельницы, но тогда лопасти не возможно было бы проанимировать. Поэтому я решил не много пожертвовать красивым ракурсом, но сохранить при этом возможность анимации крыльев мельницы.
3D модель мельницы |
I begin to form the color scheme based on the basic colors of the restaurant itself - and it is black . We also use LOGO colors - white and black , depending on the situation.
And let's add some accent colors to keep it cool: yellow - because it's «juicy» and green because it's «delicious».
The main color scheme for the site «Professor Poof» , I chose a pair: Black and White this will allow us to save, rather «strict» stylistically site.
For the soft binding elements of the site, I used intermediate colors, between Black and White , to reduce the resulting contrast.
Bright «colored spots» will give us accent colors - which will dilute the monotonous white-black color scheme of the entire canvas of the site «Professor Poof» .
Gray shades, we used to «speak» in patterns on a completely black background. This will give us an extra «depth» of the overall impression of the site's color scheme.
Website style colors |
SASS variable colors |
We lay the basis for the formation of the topological scheme of all pages of the website «Professor Poof», the main directions of the restaurant.
On the main page of the site, we show a block of services offered by the restaurant «Professor Poof» :
Then, in a separate section, we give information about the delivery and its conditions. To visualize the delivery, I used the mobile van pictorgam and painted it in our colors white, yellow, black. A large photo of the chef working on the dish will add extra appetite when browsing this section of the site.
On the page «OUR BREAD» we tell you about the main stages of bread production.
With a wide section we will show a field with golden wheat and in the center of it, we will put our 3-dimensional model of a mill. In order to «revive» the website a little, let's make a small animation of the blades of the mill.
Site page topology |