Design and Branding

Some people say the era of the scrappy MPV is dead, I'd argue design and branding should never have been missing even from a scrappy MVP.

There isn't a need for a totally custom design, or to hire a "professional" designer to create something new and unique for your MVP.

For my MVPs, I focus on the logo and the color palette for the brand and application. Use an existing UI Kit or template that I like for the actual design of the pages of the website.

The basics

You don't need years of design or art education to get a good eye from design. Some simple concepts can be learned in as little as a weekend, which can make big improvements to your work.

When I worked at AREA 17, they encourage all employees yes, even us developers to take the same course on design techniques the designers joining the company take. It was great to see the techniques some of the best designers I worked with use.

Once of my favorite books for new designers is "Non-Designer's Design Book" by Robin Williams.

For a more practical guide for developers, I learned a lot from Refactoring UI. Written by Adam Wathan and Steve Schoger, the creators of the popular Tailwind CSS framework.

Logo

I like simple logos, they are easier to create, they are easier to recognize and remember.

My approach is to identify a word that I want to associate with my project, and use that word for inspiration for the logo.

In some cases, where I cannot find a word that matches the project, I opt to forgo the imagery all together and just use the name of the project as the logo. This is a little tricker for social media, but you can get a little creative and reach something good to launch with. This can work particularly well if you have a short name.

Remember, as with other aspects of the MVP you're not creating what will be used for years to come, you're working to release something good enough to get to market.

My favorite site for getting images/icons that can be used for logos is The Noun Project. You can get editable images that you can drop into any design software you choose and tweak to your needs. Images can be used free with attribution, or otherwise for a small fee. Combined with the name, this is often enough for a logo.

If I'm struggling to find the right word, I try searching images on Google with my project name and tagline, to see what visuals others may have used.

Recently there have been a number of AI logo generators, I've not been blown away by the results, but they can be a good source of inspiration rather than the finished article.

Logos from some of my recent side projects. 3 were not designed by me, one by a professional designer. Can you guess which one?

Colors

This is probably the aspect of design that I still struggle with the most. Selecting a color palette for my projects is still very difficult for me, typically I have the habit of using too many colors, or those that don't work well together.

There are a number of great tools for selecting colors for your projects.

​Coolors is one of my favorite, resisting the urge to tweak or add to the generated palettes can be hard.

You can create a random palette, explore existing ones, or even generate one from an image you have as inspiration for your project.

UI Kits

A nice logo and color palette will get you a long way for your MVP. To get me the rest of the way, I lean into using UI Kits.

UI Kits are a collection of templates and components, you can use to build your MVP. They provide consistent, well-designed elements you'll need and provide you guidelines for any you end up creating yourself.

Since I use Tailwind CSS for most (now all?) of my projects, I stick with kits that are based on Tailwind.

I picked up Tailwind UI as soon as it was announced, and have it used it on many of my projects.

A lot of UI Kits target specific JavaScript libraries, such as React or Vue and can require some work to integrate into your development stack. Recently I've started using more Livewire in my projects, and was happy to find a number of UI Kits built for explicitly for my preferred stack.

I've started using Mary-UI on the majority of my new projects, highly recommend it!

With these basic elements, you'll have a great looking design foundation for your project.

In the next post, I'll dive into the logo, colors and design for Playlist Kit.

Cheers,
Mubs

​

​

​

​

​

​

​

​

​

​