Creating a new project with no design skills

Hey guys!

This time we'll be looking at a way in which we can get started building a new product from scratch and get it through the hurdle of making it look nice and appealing before focusing on the actual functionality.

Whether you want to create a personal project, a quick POC, or even an MVP for a side hustle, using these tools can help you get up and running with a quite good starting point, decent enough to share with others and gather some feedback before turning it into a real thing.

Having said that, let's look at what we can use to get our project bootstrapped and much closer to the launch phase.

Getting started

So we have an idea that could potentially be a home run and we want to make it look good so it doesn't get dismissed as 'just another thing'.

What are the most basic essentials needed?

We would need mainly 3 things.

• A color palette
• A nice logo
• A pair of fonts.

You could add a slogan and some keywords related to the brand if you'd like as well.

Now, the color palette is to give visual consistency to the project and all the related assets that it would be using.

The logo is the face of the project, what people would be seeing the first time they encounter it out in the wild and whether is just a graphic or it includes the name as part of it, it will be what will stay in the minds of the audience.

Finally, the pair of fonts is to, again, give visual consistency to the project but in this case on all of the written pieces.

It is said that a project normally needs one main font and a secondary one and in some special cases, a third one, although that is not that common.

So now with our essentials identified, let's start from the beginning and tackle each one in order.

The color palette

Selecting colors that match and complement each other for a palette used throughout a project (without using random combinations or picking a color that's going to be used just one time in the entirety of the project) it's an art form on itself.

But picking a proper group of complementary colors is not only an art it's also a science. Besides, its whole purpose is to serve as a foundation for a project to look good and feel consistent with users.

That can be a pretty subjective matter but you'll be surprised how much commonalities there are to things that "look good".

For this task, we're going to use the help of an online tool called colormind.io which allows us to create a consistent and matching color scheme we can use as the base colors for our project.

You can click the 'generate' button to create a group of 5 colors that work well together. You can use a color that you already picked before by 'locking it' and the generator will find some complimentary colors for it.

You can bring up a color picker to make changes to a selected color that's missing something or probably in a tone you don't like. And you can switch positions between the colors to see how they would look like together.

Heck, you can even upload an image and the generator will pick the colors from the image and suggest the remaining ones to create a cohesive palette for the brand.

The brand logo

Speaking of images, what is a good group of colors without a good image that serves as the primary "face" of the project?

You can use sites like Canva or tools like Gimp, Inkscape, or even bring out the ol' trusty Paint to make the logo with the newly created color palette and some shapes.

But if you happen to lack any design skills or don't know what "looks good" then what?

Again, let's use a tool that will do that work for us. In this case, we'll be using one that's called BrandMark.

Once you land on the site and click the 'Create my logo' button, you'll be asked a couple of questions about the brand that you want to create, like the name, an optional slogan, and related keywords amongst other things.

Once you've provided all the info, the site will get busy creating an almost endless array of options for you to pick from and will give you several options.

• An option to edit the current logo (name, slogan, icon, colors, etc.)
• An option named 'ideas' where you can pick from to make the logo much more 'custom-made' looking.
• The option to save the logo if you (like me the first time I tried) get amazed by the logo created for you.
• The option to purchase an entire branding pack with all the assets you'll ever need if you want to create an entire side-hustle and make both digital and physical products and promote them anywhere. (I mean seriously look at all that it includes in this example)

Still, with all of these, we're missing one last piece of the puzzle.

The pair of fonts

Now, if you don't want to use default system fonts or want to switch it up from the typical 'Lato' and 'Roboto' fonts. You can search for yourself two fonts that go well together (and probably spend hours picking different combinations as I have 🙄)

But again, we don't have to do all that heavy lifting when we can have a tool that makes all of that easy for us. In this case, that tool is called Fontjoy.

This one is pretty straightforward. You can click the 'Generate' button and have a well-matched font pairing with the example of how it would look like in text. You could also have one font that you already love and want to find a partner for.

By clicking on the lock in the specific font, the generator will find other matching fonts (you can have up to 3 fonts in total as we've already discussed). You can also pick the style of the fonts you want to work with.

There's also a slider you can adjust to increase or decrease the contrast between the picked fonts (i.e. the fonts generated are more similar or different from each other)

Now with these 3 elements created, we pretty much have all the branding for our idea/prototype/MVP done. Let's see now what we have when combining all these elements.

Putting all together

As a way of example, I want to show you one of the things I made putting these tools to use as part of a project I was working on with a colleague.

The idea for this project was to create the website for a grocery store where users could go and select from a list of products and then add the chosen ones to a shopping cart.

Here are the generated colors that formed the website palette

$blue: #6b879f;
$orange: #ce794b;
$white: #dfd9c6;
$secondary: #8c8283;
$tertiary: #ad7d67;

Here's the logo that the tool created

And now here are all those things in context (in the website's homepage)

Now you see that the visual aspect of the homepage is good enough for a site, it doesn't look too amateur and it also did not require too much time to put all those pieces together (probably 2 hours or less in total).

What would be left to do there is to actually write the code that will provide the website with the functionalities of a standard shopping site.

Once those are created, they would be within the context of the already established brand.

That's pretty much the point when you can pick up from and write the code in your framework of choice to build the features required for your project, idea, side-hustle, etc.

You can now take those elements and go from a 'nice-looking prototype' to a 'nice-looking and functioning' project.

There's also the option you can take to go the easy route and use a service to generate the necessary code for the project like for instance, Divjoy or Appseed

There you have it folks! we just made use of our good friend technology to help us get started in the product creation process without much hassle, without requiring special skills, and most importantly, without spending too much time on implementation details.

And that's it for this week's post! Hope you found it useful and informative and can use some of these tools the next time you (or someone you know) have an idea and want to get prototyping quickly to test if it would work.

I have used these a couple of times already for my projects and also for work purposes and they have saved me hours in what would be myself getting stuck deciding between the nitty-gritty details forgetting about the big picture of what I have to build in the first place 😅

Thanks a lot for reading so far, let me know if you any extra utilities you use to save you time and catch you in the next post.

Photo by Halacious on Unsplash