Designing a New Preset

James Coviello
BentoBox Design
Published in
4 min readOct 26, 2020

Problem

BentoBox initially created a set of presets for customers to use as their exact site design or just as a starting off point. The presets were a hit with the customers but after a year or two, the onboarding team mentioned that customers wanted more variation within our library of presets. The design team took this feedback and started the preset redesign project.

Process

Our first step in the preset creation process was to determine what types of restaurant themes our gallery was lacking. For this round we landed on a trendy brunch spot, a food truck, a farm to table restaurant, and a traditional bakery. From there we picked names that we felt would successfully represent each theme. Once we distributed the new themes amongst the team we got started on logo creation and selected brand colors. Then we began designing the actual websites. During the website build out we hooked up all of the colors on the site to bootstrap variables so that they would be quicker to update, since the whole reason for a preset is to accommodate any restaurant’s branding. After our initial round we allotted one round of feedback and one round of QA. Below you will find a more detailed explanation of the new presets we created.

Stella

The Stella preset was created to fulfill the need for a “trendy Brooklyn brunch” spot. Think Sunday in Brooklyn. What this meant to us in terms of design, was that this site would have a lot of negative space, showcased trendy typography, and felt somewhat precious with the color palette. Three design elements that make it different from our current presets:

  • Parallax split overlay layout
  • Card layout designed to showcase photography
  • Contained hero content and scrolling dots

Bandera

The Bandera preset was based on a “west coast food truck” concept. What this meant to us in terms of design, was that this site would be really bold, have a color-blocking layout, and feature large typography.

Three design elements that make it different from our current presets:

  • A color border around all site content
  • Bold color-blocked intro headings
  • Color overlay on full overlays and Instagram grid

Mochi

The Mochi preset was created to satisfy the need for a “traditional cute bakery”. The goal was to create a design that would be perfect for a Pinterest bakery. This meant that the site would be very light, airy, minimal, and have a “traditional feminine” vibe.

  • Rounded thumbnail images
  • Color blocking and overlapping on the split overlays
  • Padding around content

Hudson:

The Hudson preset was created for a “modern farm to table concept”. The goal was to create a preset that felt modern yet rustic and warm. This meant that there would be usage of straight lines, a cream warm color palette, and clean layout.

  • Overhanging the logo
  • Photography driven
  • Color blocking on the split overlays

Tonic Concept:

The Tonic preset was created to cater to our customers that may not have a traditional brick and mortar, but still have the need to advertise their food and beverage products online. This theme was built for brands with a strong, lively presence.

  • Unique split-landing image
  • Bold typography
  • Color blocking

Conclusion

The need for a preset refresh allowed us to analyze what our gallery was missing. We created innovative designs that would not only make our designers’ day to day easier but also provide unique layouts for any type of customer. Stay tuned because we have more exciting presets coming your way!

Written by James Coviello, Anastasiya “Stacy” Krokha, and Kayla Scheidel.

--

--