Daily UI Challenge — Vintage food menu
Step by step tutorial on creating a vintage design food menu
Content
- Introduction
- Result demo
- Prerequisite
- Step by step guide
- Conclusion
Introduction
If you are into UX/UI or frontend development, You have probably heard of the “Daily UI Challenge” (https://www.dailyui.co/). It is a challenge for UX/UI design to come up with a different design of common frontend element, such as sign up form, landing button, info card, and e.t.c. Thousands of talented designers create their own version of the UI element design and share it with the internet.
In this article, I will pick one interesting example for “Food menu” and try to actually implement it in code. The example I picked this time is “Food/Drink Menu” by Pixelcode (https://dribbble.com/shots/2668255-Daily-UI-043-Food-Drink-Menu)
This design is very different from what we consider as “standard” web/app UX/UI element. It has a very vintage and minimalist style, replicating the feel of a printed menu on kraft paper. The layout is also very structured and ordered. In a world full of fancy animation, eye-catching image and video, this design focus on functionality and create its own gimmick.
Result Demo
This is the final result:
Codepen demo:
This is a no JS solution, you can play with the code on codepen
Prerequisite
HTML, CSS and SCSS/SASS (any CSS preprocessor)
This tutorial is (mostly) beginner facing
Step by step guide
Step 1: Draft our the design
The first step I always do is to draft out the design and study the structure of it, and try to observe if any specific problem to solve in the design.
Basically this is a very straight forward design. Layout wise, we don’t have much to worry about. We have our standard box-container for each part of the component. Each container is encapsulated with semi-closed border. Design wise, there are a few problems we need to solve:
- Background texture
- The “DEALS” carved text
The background of the design is a brown color kraft paper. Instead of trying to replicate it with complicated CSS linear-gradient or property, we could just use a big image for the background. The second problem is the “DEALS” text, a vertical text which is “carved” out of the black layer and get it shape by the kraft paper color. We will go into more detail in the later part if this article.
Overall, it is a pretty straight forward design. To make things more interesting, I also want to add an animation to the text, so it “filled” in with white color on mouse hover.
Step 2: Set up the basic
After we studied the design, let’s set up the basic structure of our project. The first thing we need to do is select a font-style that match the design. After some testing, I decided to go with Barlow Condensed:
Although, the font in the design do have a very special “&”, which this font lack of. The overall look and feel are similar
While for the background, I searched for “kraft paper” on google and did some “photoshop-ping” (is this a real word?). The final result has a more rough texture, which I think bring out the vintage feel even more:
For this design, we only have one color: black (actually, #453B34). So we don’t need to worry about picking the color. We could also pre-define some font-size variables to help us later.
Let’s set up the CSS basic style:
If you are not familiar with what a box-sizing is, see: https://css-tricks.com/box-sizing/ (TLDR: box-sizing: border-box make positioning more intuitive, for most people in most cases at least.)
@mixin is SCSS feature for writing “modular” style that could be @include later
With the basic SCSS style out, we could set up the background next.
Step 3: Create the background
Since our design is a food menu on paper, to make it look more natural, instead of using the whole screen, we would create a round-border container for the menu, with some shadow to show that it is in a different hierarchy from the white background. The code is very simple:
HTML:
SCSS:
Thanks to us setting global SCSS sizing variables earlier, we could just use the variable here and no need to think about each sizing. For this particular design, the size of the element is very similar. If we found that the size is not correct later on, we could just change the variable once and all other style using it will be updated.
To make our life easier, we also set text-transform: uppercase to save time type uppercase in html.
The .container class creates a border for our menu content, and default margin and padding, so we don’t need to worry about padding inside each container inside it.
Our container don’t have any content now, so it is very narrow. But it is fine, once we add content, it will scale automatically.
Step 4: Create the header container
Let create the top part of the menu first, the header (title and slogan of the restaurant on the top-left, opening hour, and feature on the top-right). The container is a simple flex layout, with different size of text and border location. Let see how we would separate the container:
We would have an outer container (red) first, inside it, we have the title container (orange) and feature container (green), inside the feature container, we then have the opening hour (blue) and feature container(purple). Let jump into the code.
HTML:
SCSS:
The code is long, but the concept is straight forward. We identify the structure, and then we put the content into the correct container. We started from rough positioning and slowly adjust the style to make thing look better.
We created a global mixin subtitle, which will come useful when we are styling the menu text later.
The result look like this:
Next, let create the “DEAL” text block on the right.
Step 5: Create the “DEAL” text
Okay this part is quite interesting. We need to make the text “carved” out from its black block shape, in other word, we need to create a “hole” in the black color with the shape of the text, so the “DEALS” will have the background color and texture.
A lazy solution would be to use a brown color for the text. But since our kraft paper has texture, it is very obvious to the viewer something is not right. We won’t go for that solution. Instead, we would use a property: background-clip: text; This property allows us to clip the background to the shape of the text, for example:
You can see the “TEXT” clip its background to it shape. For our case, what we need to do is the reverse. We only want the “DEALS” text to be clipped away. Unfortunately, there are no inverse-clip property.
In order to create our desired effect, we would:
- First, put the text in a div, in which the div contain the same background image as our background.
- Give that div
background-clip: textproperty, allow us to get a text with background texture. - Finally, we put that div on top of a black background div.
For the vertical alignment, we could just use writing-mode: vertical-rl
The code looks like this:
HTML:
SCSS:
Providing us this result:
Since we are using vertical-rl, you can see that the alignment of the texture is not the same if you look close enough. To make it look better, you can simply crop another image from the background, rotated, and use that as background of the DEALS instead
Step 6: Menu separator
The next part is the “menu” separator. We could actually create the separator with just one div. (With the use of before and after element)
HTML:
SCSS:
With mixin we can save a lot of time writing duplicated style, and it also provide feasibility for changing everything at once later.
Step 7: Food menu container
The final part (for the static design) is the food menu. Again, it is not complicated, it is essentially a fixed-height flex column container, which wrap to another column on overflow.
To make the menu look more natural, I added some more food as well to extend the length of the container. All the food share the same style. So I am not going to copy the entire html here.
HTML:
SCSS:
I used “dotted” border to create the dot effect of the design. However, there is a drawback as different browser render “dot” differently, there are no much we can do about it. I discover that the “circle” dot become “rectangular” once smaller than roughly 2px.
I also add a footer text at the bottom of the menu, again, only to make the whole design look more believable.
Now we have the whole design completed. To make thing more interesting, let add some animation.
Step 7: Adding animation
The animation I want to add is filling color on hover. When the user points the cursor to the text, a white color will flow from left to right, changing the whole text color from black to white.
To create the effect of filling color, we can actually apply “background-clip: text” again. We have a text, with background size is 200% of its width, and has a sharp cut gradient of white and black, each take 100% of the width. The text is transparent itself and get it color by clipping away the background.
By default, the text is black as it is clipping out the black background. White on hover, all we need to do is moving the background position to the right, revealing the white background gradually
We also want to make it a global mixin so we can apply it to different text.
SCSS:
The final result look like this:
Conclusion
This is a very interesting piece of design to code. On first glance, it looks really different from other web interface designs and may seem difficult. However, breaking it down piece by piece, most of it is actually CSS style we are familiar with.
One thing could be done better with the animation is animating the line as well, or to create a time-lag between the coloring of the text, and then coloring of the border.
Overall I am quite happy with the design. It is not something I usually do but the result is kind of satisfying. If you like it, feel free to leave a clap or comment :)
