Jack Zerby gives some insight into customization on Flavors.me:
When Jonathan and I first discussed the design customization on Flavors, our first instinct was to offer various themes.
After giving it some thought, I realized that I didnt think themes were the best way to allow the user to create something unique.
The whole goal with Flavors is to give people a tool to create something personal, something special, something different.
That can’t be accomplished when you give people options like “Duckhunt”, “Steampunk”, or “OMG Jonas Brothers Theme”.
The argument for themes comes from the fact that most people aren’t designers, so if you give them the final product and allow them to slap their name on it, it becomes theirs.
My argument is that people may not be designers, but they are creative.
Using Layers instead of Themes
I came to a solution when I broke down elements of my own design process.
- Wireframes
- Fonts
- Colors
- Images
I obviously dont do any of this in any particular order, but every time I sit down to design I have to manipulate these elements to achieve my desired result.
Using this guide I created 4 sections of design options in Flavors.
- Layouts
- Fonts
- Colors
- Backgrounds
This allows the user to arrange these various elements in millions of different combinations, yet still staying within specific design contraints.
Design Controllers
There are many different approaches to design controllers.
1. Top drawer (via Tumblr)
2. Bottom drawer (via Squarespace)
3. Sidebar (via Soup.io)
4. Draggable (via Flavors.me)
I tried a ton of different approaches and finally settled on a draggable design controller.
The reason why I chose this approach
- If you’re designing and you want to move the controller away from where you are focusing.
- If you’re done designing and you want to hide it to see what the final presentation will look like.
- Doesnt bump your screen up/down or shrink the actual workspace.
Some things Id like to improve:
Colors: A better way to show a user which color affects which area of the page. I tried highlighting the area affected when mousing over the color swatch, but that was really distracting.
The Flavors brand started as a tree.
That’s because at the time, I didn’t really care about the brand, I just wanted to start working on the product.
What does a tree have to do with the word Flavors? Nothing…but it looked cool.
Jonathan and I work well together because he knows when I’m half-assing it. So after he called me on it, I ditched the tree and started at square one. (no pun intended)
Baskin Robbins has a lot to do with flavors. All 31 of them.
Everyone knows the colorfully delicious grid of ice cream behind the counter of a Baskin Robbins.
I started with circles.
That looked way to girly, as my wife Marisa told me from the other couch.
I tried squares, starting with a single square at 150px x 150px.
After that I realized I was on to something. We created this site to allow people create something unique. Every flavor at Baskin Robbins is unique, BUT it’s still ice cream. Every page on Flavors.me is unique, BUT it’s still within boundaries. (My sister Kayla just said she likes that line)
So I colored up these bad boys…
Now I had a grid to work with. Every page was born from this grid. I usually don’t use really strict grids (I forget most of the time), but this time it became such a part of the brand, I had to use one.
First the homepage…
Then finally the settings page…
