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 |
Bakery «Professor Poof» produces excellent bread from its own grain flour, grown according to the old method. So I decided to show the mill in a separate animated full-screen illustration.
I didn't want to take a photograph of someone's mill. And then, more or less pretty mills remained only abroad. In any case, it was decided to show an illustration of the mill, so as not to greatly emphasize the mill's origin, its condition and other functional features.
Moreover, I decided to «build» my own mill in a virtual space and already from a 3-dimensional model render the illustration for its further placement on the site «Professor Poof» with subsequent animation of the mill wings.
I built the foundation of yellow brick, pulled it down for strength and beauty, of course, with wooden beams. He built the very premises of the mill from mighty dark boards, crowning the mill tower with yellow decorative boards to fit the black and yellow color scheme of the site «Professor Poof».
After the render was ready, I set up the mill in a field with golden wheat and as a separate object laid out the screw (wings) of our 3D illustration of the mill on SASS.
From this perspective, the mill may not seem too bulky, but this is no coincidence. A more expressive 3-dimensional isometric view of the mill could have been chosen, but then the blades would not have been possible to animate. Therefore, I decided not to sacrifice much for a beautiful angle, but at the same time keep the ability to animate the wings of the mill.
3D model of the mill |
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 |