How tofu inspired our design approach

Daphnie Loong
7 min readJul 24, 2018

--

Who knew there’s so much you can learn about design from tofu? And believe it or not, they’re the same reasons why it inspired the name and beliefs of our creative studio.

So, you’re probably here from Bēhance because you wanted to read more about Tofu Design. Thanks for dropping by!

And if you came here by chance, then stick around!

Ok, let’s cut to the chase: Tofu Design is a creative studio. We do UI/UX, branding, graphic design, and copywriting. We’re the whole pizzazz you need to zhuzh up your business.

Tofu Design is the brainchild of my partner, Daniel, and I. He’s a designer. I’m a writer. Together, we thought, would make a pretty neat combo. After months of blood, sweat, tears, and a lot of yelling, we’re thrilled to be able to launch our creative studio — officially!

Inspired by tofu’s natural wobbly twerks

And the name?

Well, for one thing, we both love tofu. We love it in every way. We even had a hamster named Tofu. Which brought us to an epiphany that this could be the perfect embodiment of us.

This seemingly boring pressed block of soy holds the essence of our Asian culture, our simplistic lifestyles, and what we aspire to be in life and in work. Just like tofu, we aspire to be versatile. Adaptable. Taste great with other condiments. Yet hold firm on our own.

We’d like to think we jiggle but not break.

How tofu became the centre of our design values

We admire how tofu is essentially canvas in food form — a pure and unassuming ingredient that doesn’t demand for attention with bursting flavours but is always a great accompaniment to any dish. And drawing inspiration from its nature, we developed our company belief system to reflect that.

That said, we decided to take our website back to basics with its UI/UX design — a little risky especially with all the insanely creative modern websites out there.

But despite the risk, we still wanted to keep everything quite stripped back, allowing only the areas we want to shine, shine.

The clean aesthetics help to draw emphasis to our content

Tofu Design is all about the no-frills and no-bullshit approaches. Clean. Simple. Easy. But executed with finesse. So, one thing’s for sure, we don’t want to confuse our clients with over-the-top representations of ourselves. We want them to take us as we are. After all, isn’t that how all successful relationships begin?

Let’s get technical, technical

Here’s the part we break down our thoughts behind each element on our website. Call it a case study if you will but really, we’re just excited to share with you guys what we’ve been mum about for the longest time.

Logotype and logo design

Of course, the concept of tofu rings through (and maybe most apparently) on our logotype and logo design.

The Tofu Design logotype was crafted with the curves of a block of tofu in mind, carefully chiseled to create a unique logotype. We took inspiration from our Asian roots, toying with the idea of using Chinese/Korean/Japanese character arrangements. We even tried it in blue.

The many iterations of Tofu Design’s logotype evolution

But ultimately, we pulled ourselves back and asked “What would tofu do?” (ok, not exactly that but you know what I mean).

And that’s to keep 👏🏻 it 👏🏻simple 👏🏻.

Tofu Design’s final logotype and logo design

For our final logotype, we went with something that had more balance. We used the same curvatures to create each letters: the “t” and the “f” are inverted versions of each other, and the “u” is derived from the “o”.

Compared to the previous iterations, we created more space between each letters and expanded its width to allow each letters to breathe — and maybe even to whomever that looks at it too. It’s less “sharp inhale” and more “breathe easy”.

Logo design

Now, who’s this jiggly number?

A quick fun fact for you: our logo is actually developed directly from the “tofu” letters. If you look close enough, you’ll see that the same lines and curves from each letters are reflected on the logo itself.

And of course, the logo is essentially a fun-loving block of tofu.

The animation of the tofu plays a huge part to our identity as well. Not only is it our loading animation but the wobbly twerk shows that we don’t like to take ourselves too seriously.

May I call you…jiggly?

Website structure

There were no qualms about how our website should be structured from the beginning. Both Daniel Tan and I were sure we wanted it to be as clean as possible. The goal of our UX is to make sure that everyone who “stepped foot” onto our website knew how to navigate it and understood how it works.

We stuck to a basic framework governed by a strict responsive grid system. This detour from a “modern” grid system not only adds value to our UI but it pays homage to the nature of tofu: plain and structured. The generous use of white space and the light-handed shadow on our cards also show the soft textures of tofu throughout the site.

A seamlessly responsive design even on mobile and tablet

Colours and illustrations

Our hero illustrations are one of the highlights of our entire website. And rightfully so. We took extra care and attention to balance the harmony between four distinctively different colour schemes. The challenge was making sure each colour told their own story without clambering over one another for attention.

And while we’re at it, we also tried to marry symmetry with fluidity to create an illustration style that had an organically human sensibility while still geometrical at a glance.

Also, you’ll notice by now that while our core company colour is black and white, we don’t shy away from using colours either. The hues we’ve chosen in this palette are subtle and soft — a warm welcome to an otherwise unfamiliar and new space.

However, we have no plans for now to brand any of the colours as a part of our scheme. We want the flexibility to constantly adapt. So these colours may represent us now, but as we grow, maybe the colours will change too.

Tone of voice

Tofu Design’s voice is similar to the one you’re reading now. Mostly because I wrote them both. But the personality we want you to experience is one of a calm and contented friend.

It’s charming without being too assertive.

It’s sassy without being an ass.

And it’s confident without being showboat-y.

It just tells it as it is. Plain. Simple. Human.

That’s us looking low-key “candid”

Key Takeaways

Of the many things tofu taught us about design, this is one thing we hold on to the most:

It’s ok to come just as you are. Stripped down. Nothing fancy. Nothing dramatic. Nothing outrageous. If you do something simple right, it can transform into something utterly sophisticated. Perfect, even.

And that’s our goal with Tofu Design — both our general company direction and our website. We want to design with a purpose. Your purpose. And to do it right.

All right, you’ve been a great sport to read this far. Thanks for giving us 7 minutes of your time. I feel like we’re already friends now.

Find us at www.tofudesign.co

--

--