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.
