I had an idea pop into my head about 3–4 years ago* to “recreate” the hamburger menu button. Most likely the majority of people using the internet today are fully familiar with the three bar icon and do know that it is used to represent the menu/nav. However, I still wanted to bring my idea to life, and finally made the first steps in doing so in December of 2020.
I first sketched a few concepts out on paper.
Then I sought out a font that was easy to read at nearly any size. I did my findings of fonts through Google Fonts and ultimately landed on Lexend Zetta.
Lexend Zetta is a part of the Lexend font family, created by Dr. Bonnie Shaver-Troup and Thomas Jockin. The purpose of the font lined up near perfectly for what I was looking for in a font. I did do some minor tweaking to the font, most notably to the ‘E’. Hope you're cool with that Thomas, but thanks for making an awesome font!
Once I found the font to use, I then jumped into Affinity Designer to create my concept digitally.
Having wanting to learn more about making and using SVG’s, I exported it as such. The thought is that an SVG will provide flexibility in the styling, among other things.
I also wanted it to be accessible.
My take of the Hamburger Menu Button on CodePen
- I wanted to incorporate the word “Menu”, so the three bar icon's purpose was more easily understood
- I didn't want to deviate too far away from the original
- I wanted to represent its size, visually as a button, also providing an easier touch target on mobile
- I wanted to pay homage to the original design, with the ‘E’
The original Hamburger Menu Button was conceived by Norman Cox in 1981, for the Xerox Star user interface.
Pretty amazing, thanks Norm!
- Dive deeper with SVG
- Need to verify accessibility
- Possibly tweak/refine design further
*Future Proofing: Currently February, 2021