Mise en place: What Designers Can Learn from Top Chefs
By Ian Venskus, Senior Creative Technologist at MERGE
I recently binge-watched seasons 1 and 2 of Selena + Chef on HBO Max. The show is very entertaining, and one big takeaway is mise en place. The French term for “everything in its place” is a lesson for all industries, not just cooking. For me, it’s designing microsites in the browser — a non-traditional technique where the layout is designed by writing HTML and CSS, rather than using software like Figma or Photoshop from the onset. While there are many takes out there that reference mise en place as it relates to web design, here are some tips for how I set things in place.
Research the Brand and the Culture
Much like in the show, where it’s important to understand the people and culture of the food being made, it’s also important to understand the brand and culture of the company the microsite is being created for. By learning about the company and its unique culture, I’m able to get a feel for what it’s like to work there and create a space in my mind for what I’m about to make. This also allows me to more seamlessly blend into the project rather than be thought of as an outside agency consultant.
Start with an Outline
As I’m learning about the company and its target consumers, I use the space I’ve created in my mind to form an outline. It doesn’t need to be overly complicated to start, as we know there is likely going to be a homepage, links and buttons. This isn’t something that needs to be perfected before moving to the next step, as other stakeholders will be involved. A full recipe is great, but it’s not required — a general idea is all you need.
Apply CSS Global Brand Styles to HTML Elements
I like to start by styling the raw ingredients of HTML to be specific to the brand I’m collaborating with. This allows for an interactive design system with the font, color, weight and line-height already in place. It also means the majority of the HTML written will not have classes. For example:
h2 {
font-size: calc(20px + 2 * ((100vw — 320px) / 320));
color: #2E2E2E;
line-height: 1.2;
min-height: 0vw;
}
This may raise some eyebrows, but I’ve found this is the cleanest and fastest way to work and to onboard new people into the project, particularly if the microsite scales onto a larger platform.
Use Content Sectioning to Scope Modules
I use content sectioning elements like <section>, <article> and <div> to cut the cascade of the global brand styles. This allows for inheritance and adjustment of specific styles for that particular section. For example, if I want a headline to be a different color, I would simply update the scope of the CSS to .my-container h2 {color: #00417C;} rather than write a specific class such as “alt-color”.
This keeps the CSS organized, and while a class of “alt-color” will have performance increases, it also means that I’m going to have to remember it when writing the HTML and doing maintenance later on. I also only use one class to scope. This provides a pattern to create an organized file tree structure by naming it after the scoping class like the following:
· my-container/style.css
· my-container/index.html
· my-container/script.js
By having these files in the same folder, they will become easier to find and troubleshoot down the road, reducing the time needed for quality assurance.
Get Cooking
Now that all of the styles and modules are prepped, I create a loose prototype using the outline from above. This is just a rough draft, so the hero images and content can be in black and white with lorem ipsum text.
Next, let’s turn on the heat by getting everyone on the project into a video chat — including the client — and also provide them with a protected link to the dev environment so they can view the site on multiple devices. This chat might include five people or 20, depending on the magnitude of the project.
During this time, it’s important to ask each person how they like the direction of the site and make refinements in real-time when possible. Perhaps the copy needs to change or a photo needs to be adjusted, and a copywriter or art director can quickly provide instruction or assets to get less significant updates out of the way.
This allows everyone to taste-test what’s being made while it’s “still cooking,” enabling us to get an unfiltered sense of what the client truly wants.
In the beginning, group sessions should last between 30 minutes and an hour, but they will decrease in time and frequency as the project gets closer to completion. These sessions typically act as a booster to team members, and I often find that projects completed in this way go smoothly, as everyone is willing to make and correct mistakes together while creating something new.
Conclusion
Applying the lessons of mise en place to what I do each day in web design is much more enjoyable than, say, trying to recreate grandma’s chocolate chip cookies. While it’s nice to have a recipe or even picture to model after, when the ingredients are at the ready, taking it on yourself with those around you pitching in is much more valuable, as you feel as though you are part of the culture and can appreciate and understand all the work that goes into it.
