Underdesign: This week Flavors.me is finally rolling out its latest feature, the ‘Grid’ layout, which I had a hand in designing, but is due largely the ongoing work of Jack Zerby. Jack is one of the most underrated designers I know. He’s also one of the few designers I’ve worked with who really understands the value in underdesigning things.
This philosophy is certainly reflected in Flavors.me. After all, its whole purpose is to put its users center-stage. Still, that doesn’t mean there’s not an underlying system at work behind the scenes looking after everything from spacing to line-heights, font-sizes and floats. Hours and hours have been spent developing a system, in which, hopefully it’s kind of hard to make something ugly. The design is there. But while they’re creating their own page, most people will hopefully never notice it.
Any designer will tell you the hardest job you’ll ever do is to design for yourself.
Even though I’ve been a part of HiiDef Inc. for a while now, there’s only recently been a need to put a ‘face’ to the name.
Challenge
There were a few things that made this job tricky.
It’s got to be broad
HiiDef is a web product incubator that’s really hard to put into a single box. Because it’s a parent brand, not only does it need to reflect the company, but it needs to compliment the products we put out.
It’s got to be relevant
Well, I say relevant, but the name ‘HiiDef’ is inherited from one of Jonathan and David’s (founders) earlier businesses. So beyond the idea of something being ‘high definition’ there wasn’t too much of a connection.The new identity had to stay married to this name but also fit with the current company, which meant being simple, bold and flexible.
It’s just the beginning
Let’s get one thing straight: the brand doesn’t make the company. It’s the other way around. Still, whatever meaning we place on the branding, we wanted to be as excited about it as we are about our future.
Solution
So to start, I came up with some rough directional concepts that were intentionally pretty different. The hope was this would allow us to narrow a path from which I could start to refine things.
Some of the broad directional concepts for Round 1
While the guys were excited with where we were going in round one, we all agreed that maybe we should have a look at a second round of ideas. Most of the concepts followed the most obvious ‘high definition’ angle. I also liked the idea of keeping the two ‘i’s lower case, as they reminded me of the two founders (and brothers) Jonathan and David.
Some concepts from Round 2
One concept, however that turned out to be most popular from the second round batch was an abstract ‘H’ and ‘D’ formed through circles in a square. We were actually very close to deciding on this one, but I wasn’t happy. As a web company, I wanted something that could be shrunk to a 16×16 favicon and survive.
Even though this logo itself was quite generic, this sort of treatment was worth exploring.
One, but many
Another direction that I liked from the second round of ideas used a very basic rounded rectangle shape and used changing backgrounds to give it more than one look. I know AOL (oh sorry, Aol.) had recently done something similar, and we were all conscious of not going down that path. What I liked about this approach was that it ticked two of the boxes straight away — what’s broader than a logo that’s always changing? Similarly, it gave us a lot of room for changing direction and keeping things fresh.
Some applications with the final logo. I’ve continued with the many-but-one treatment for the HiiDef Inc. website.
And we’re done.
So the solution (it must seem obvious at this point) lay in combining these two ideas — a shape using the ‘H’ and ‘D’ in a form with enough symmetry and simplicity to be styled in many different ways. And unlike every other concept that I’d sent through for feedback, this seemed to get everyone mutually excited.
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…
