sendbread.com - 2022 | v1


Welcome to V1 of the sendbread.com mockups!! 🎉🥳


Below you will find notes on each individual mockup that indicate the design aspect to focus on. Many designs share common elements, but have alternate layouts in specific areas, or something additional worth calling out.

Global Notes (applies to all mockups):

  • In general, we had some minor road blocks with images.
  • All the new product images are only 512px squares, which prevented us from using them in certain larger sizes.
  • The product images, on top of being small, are also already pre-cropped to the point where the bread itself is cropped out (hard edges).  Because of this, we were unable to use them in layouts similar to Vita Coco's card layouts, because the image is so zoomed in and cropped off that it was impossible to have the complete bread showing (because it's already cropped off). To correct this, we would need either 1) The original images (much larger than 512px, preferably 2000+ pixels wide), with nothing cropped away. In general, if the subject matters goes to the edge of the image frame, that's bad. All pictures have "missing content" essentially, and we would be able to achieve other layouts if we had white space around all the images and their subject matters.
  • We provided mono-chromatic (which is a single color essentially) designs and multi-color designs. The mono-chromatic mockups use a Flat color, and the multi-color use a slight gradient in most places.

 
Mockups:

  • Colors & Buttons

    This represents the various hues of the brand colors extracted from the branding. There are also a handful of button concepts, and this look & feel would carry through to different areas depending on the background color used. E.g, in some blue sections, you'll see the blue tinted button is used to stay consistent with its surroundings.

  • Monochromatic-1

    Monochromatic Pink - This version of the design uses pinks as the primary primary color. The secondary color would be the tan color of the pig.

  • Monochromatic-2

    Monochromatic Tan - This version of the design uses tans as the primary primary color and pink as the accent/secondary color.

  • Monochromatic-3

    Monochromatic Blue - This version of the design uses blue as the primary color and pinks as the secondary color.

  • Multicolor-1

    Multi-Color Gradient - This version makes use of several brand colors. Other features -

    • 4 smaller product cards within grid (not edge-to-edge)
    • Pink & purple header and footer.

  • Multicolor-2

    Multi-Color Gradient - This version makes use of several brand colors and slight gradients.

    • Alternate approach to product cards - Alternating left + right.

  • Multicolor-3

    This version is the same as 5, but with different card layout. This goes edge to edge cards. No space between.

  • Multicolor-4

    This version is the same as 3, but

    • Has new buttons with no outlines and rounded corners.
    • New layout on "where to find us" with a Polaroid type off-kilter image for support.
    • Different card layout for products (vertical).
    • The footer on this mockup includes the names of all types of breads, and would link directly to those products.