Say Hello to Tangelo!
Hey there!
Thomas here, kicking off the devlog with the work I’ve been doing this week:
- Introducing Tangelo!
- Figuring out the plan (and why I’m taking this approach)
Meet Tangelo!
Hey there, I’m Tangelo! But everyone calls me Tangent, because; well, I go on a lot of them!
Tangelo’s the mascot of Little CRM: a helpful feller that thinks you can make a sale without spying on someone’s digital life (a painfully controversial opinion, it seems!)
I love how they turned out; and I can’t wait to get the landing page updated with them, some punched up copy, and a design based on the standards manual! Speaking of…
The plan for Little CRM’s development (and Practical Computer itself)
I spent Most of the week scrambling with life admin stuff, but alongside all of that was some incredible foundational work for Practical Computer. 90% of my time spent on it was hammering out the basis for my graphics standards manual. For folks who aren’t aware of what a graphics standards manual is, I’d definitely check out checks notes Standards Manual’s reprint of the NASA Graphics Standards Manual
Backwards planning
Buy why is this what I’m spending my time on first, rather than building out Little CRM itself? There are a few reasons, but all of it boils down to:
- Front-load the work that’s most difficult & tedious
- Don’t waste time redoing work that you could have done right the first time
- Keep the project sustainable
- Set future you up for success
In essence, it’s Backwards Planning, even if it doesn’t look like it on the outset.
Front-load the tedious work
I’ve got a “fun” combination of traits in that:
- I know the importance of good, impactful, effective design
- I want to create things that are both useful and fun to use
- I’ve been around long enough to know that we’ve got all the tools available to us to build those things; it’s just a matter of research & diligence
- I’m not skilled as a designer at all
That means I’ve got myself at an impasse: I won’t be happy unless the design is rock-solid and consistent, but I’m not skilled at the actual act of design and that’s going to slow the project down.
For the past decade, I’ve followed the practice of “tackle the most difficult, boring, tedious work first.” It’s my procrastination-buster. It can be slow as molasses, but it’s gotten the jobs done (and done well!)
So, yeah. The design standards for Little CRM are essential, but it’s going to be slooowwwww going because I don’t have those skills all in hand.
But! I’ve broken down the problem make it manageable
- Things I do not have the skills for - Creating a visual design identity - Creating a consistent user-experience framework that addresses 90% of use cases (and provides the atomics to build out the last 10%)
- Things I do have the skills for - The tedious work of combining both into a standards manual
For the visual design identity, I commissioned Wren to tackle:
- The logos for Practical Computer & Little CRM
- Typography for a variety of use cases
- Color palettes for like & dark mode
They absolutely hit it out of the park; they’re honestly some of the best, most interesting software design identities I’ve seen in a while. Hire them!
For the actual user-experience framework, I’m modifying Nicer Studio’s Standerd UI Kit to fit my needs. The visual identity will definitely be different, but the core principles are sound, the symbols & component setup are solid, and it covers a lot of use-cases. So as I chip away at converting the file to Sketch, I’ll build the standards manual!
Don’t waste time redoing work that you could have done right the first time
Let’s be clear: there’s nothing that’s stopping me from downloading Bootstrap, Tailwind, or some other component framework and shipping Little CRM. But I wouldn’t be happy with it. I’d always be trying to bend the framework’s design identity or implementation to fit my needs. So I’d have to revisit everything I ship, try to work backwards to my ideal (with a working version already in place), and waste a lot of time getting to what I actually wanted in the first place.
Seems bad for a hobby project!
And let’s also be clear: I’m only able to do this because this is a hobby project that isn’t essential to my wellbeing. I absolutely would not recommend rolling your own if you’re on a time-crunch.
But since it is, I can take my time and build the standards manual that works for me. I’m imagining it’ll follow some of the principles of Neat CSS:
- Opinionated
- Works (largely) out of the box without a ton of class polluting
- Takes advantage of the cascading nature of CSS to allow you to customize it with your own
custom.css, while keeping the actual CSS framework actually updatable
Make it sustainable
The hardest part of any hobby project is keeping it sustainable; especially long-term. That’s what I’m very deliberate about the projects I take on.
Because I have a design framework that’s largely built out, the conversion process is like a coloring book: go through each symbol & component, make it fit the design identity, keep going. I can take that in small chunks, pace myself, prevent burnout.
Then, when it comes time to actually build out the CSS framework, I’ve got everything in front of me! Again, chip away at it, tackle the technical framework problems, keep going.
After all of that, the mise en place is done and Little CRM will come together wonderfully.
Make it fun
Every time I look at the design identity I get excited at the possibilities. That’s crucial, because all of this is side project work–after my day job, Kira, my fitness routine, and life in general have gotten their dues. So this needs to be something that gives me an extra pep in my step, a second wind & worth taking time away from something like, say, my music.
And it’s not just a boondoggle either! It’s a proper, practical, design identity that addresses the majority of expected cases, and provides paths forward for the problems I haven’t figured out yet!
Set future you up for success
When working with Wren, one of my primary goals was to make an identity that I can use almost universally
Basically: all Practical Computer apps look and behave similarly, but the logos themselves can have distinct identities.
If you’ve spent any amount of time with me over the past few years chatting about the process of making software, you know this is a principle I strongly believe in. We’ve got all the tools to make excellent software that shines, but it takes deliberate practice to get there. I know (and have!) a lot of tools to do that on the programming side; what I don’t have are the corresponding tools in the design side. So, I’ve gotta make them. At least this end result will be fun to work with 😄