Why are UX & UI people so obsessed with naming components and icons after food?
I’ve been asking myself this question since last year and finally decided to write about it. I thank Pablo Stanley’s post — it was the last nail on this coffin, his doodles are freaking hilarious.
In my search for answers — I didn’t find any particular reasoning as to why this happens…but every so often, there we have it, either a new icon or component named after some sort of food or food-related object. Well, here’s that list that no one asked for 😉.
Bento Box (aka Grid items, aka Apps, aka Gallery, aka Waffles, aka Pepperonis, aka Box of chocolates)
Represents a menu with grid items
Access existing apps
There is an array of options (grid format)
Can also be found in Asian restaurants
Used as a grid template to decorate your home with a bunch of frames
Fries (aka Breadsticks)
When you’re fresh out of hamburger menus
For dippin’ in mayo-ketchup
Breadcrumbs (aka Breadcrumb trail)
Trail of links to help users figure out where they are
Found in Hansel & Gretel’s stories
Represent an input, attribute, or action
Likely a single leftover breadstick from your Olive Garden dinner
Döner (aka Filter, aka Sort order, aka Cake cone)
Another variation of the hamburger menu
A group of filters
As flower pot
Potentially hold your Kebab balls
Menu (aka List, aka, Menu, aka Hamburger, aka Pancakes)
Represent a list menu.
Likely containing a group of navigation links
Can also be vegetarian or vegan burger
Alt-burger (alt. Grilled cheese)
Because you’re trying to be “minimal”
When you’re all out meats and only have cheese
Options (aka Kebab, aka Overflow, aka More vert, aka Triple scoop)
Represents a set of grouped options
Likely found on a skewer
Lists (aka Deconstructed Spaghetti and Meatballs)
Inside a menu to create a list structure of some sort
Icon for bullet point list
In a hipster restaurant where every dish is “deconstructed”
More (aka More horiz, aka Meatballs, aka Donut holes)
Yet another member of the menu family (yay)
Likely found next to some sphagetti
To provide brief messages about app processes
Where snacks are at
Spaghetti (aka Bacon, aka Bacon Burger, aka Hair)
Icon for “air”
Icon for “water”
Icon for many natury stuff
Search (aka Skillet, aka Lolipop, aka Magnifying glass, aka Nancy Drew’s weapon of choice)
Commonly represented in an input field
Also used to cook all of the above foods!
SEE THEM IN ACTION
I hope you enjoyed this tongue-in-cheek article. Let me know, did I miss any? I never thought this profession would make me so hungry all👏the👏time.
I made all of my sketches using Invision Freehand. I thought it was a pretty slick and cool online whiteboard.
32 User Interface Elements For UI Designers: Your Ultimate Glossary
User interface (UI) elements are the parts we use to build apps or websites. They add interactivity to a user…
If you thought the hamburger was bad, the waffle icon is worse
Building a usable intranet on SharePoint is easier than ever before owing to Office 365 in the cloud. Microsoft's cloud…