Design your own app




Design your own app: A practical approach

Anybody Can Design! For this blog post, I am narrowing down the use case by addressing non-designers trying to overcome hurdles in design and not seasoned designers. Any attempts made by non-designers to design their own apps mostly end prematurely with the following statements:

  • “It looks ugly”
  • “My color choices are horrible”
  • “I don’t know how to put it in a proper layout”

Bad Design Meme

Turning your app ideas into design and eventually a product isn’t as far from reality as you might think. More often it comes down to finding the right tools and approach to get the job done. Let’s cover all obstacles during the design journey of an app or a website. We’ll break down this journey into the following steps:

  1. Objective

  2. Paper prototyping

  3. Color Schemes

  4. Typography

  5. Putting all of the above in one canvas

We’re cool? Great. Let’s start!

1: Objective

Design that doesn’t solve a problem is art.” It’s important to lay down an expectation just before you start to design. Making it look pretty doesn’t necessarily mean a good design. Establish a problem-solving approach towards design.

How to get from point A to B in the most meaningful way should be the objective when you design your own app.

 

2: Paper Prototyping

All you need is paper and pencil to start this very underrated process. Why underrated? Because for most projects I find that maximum clarity is achieved, while spending the least possible time and effort, through sketching the ideas on paper. It lets you learn more about your design in a shorter space of time and it allows you to lock in a layout that best suits your requirements.

It’s very important to get a little detailed while sketching your screens on paper as it will give you a head start for the next few steps in the journey of designing your own app. Instead of a very rough sketch of the screens, try factoring in the elements, navigation, actions, etc.

For example: if you are making a recipe collection app, what will happen when you click on a recipe from a list of recipes? How would you share that recipe or add a new recipe?

The more detailed you get, the more clarity you will have.

Design your own app - prototype

Design your own app - prototype

 

This also helps with a very early demo with a potential partner or investor. Remember showing your idea is a lot better than simply telling.

 

3: Color Schemes

One of the most tricky parts is to choose an appropriate colour scheme. The decision here can possibly save or destroy your design. Although there are a lot of colour generator tools out there, they often fail to deliver in the final output, especially if you are a non-designer.

It’s better to change the approach a bit. First, think of the tone you’d like to set based on your product. For example: A kids’ product can have a fun and playful colour tone, a futuristic tech company can have neon and sharp tone, a women’s cosmetic product can have pastel colour tone. Once you know what tone you’d like for your product, take a Google quest for inspiration.

fun

neon

pastel

cheerful

Images courtesy of: https://designschool.canva.com/blog/website-color-schemes/. Follow the link to see more colour combinations based on tones.

Select up to 3 colours as your combination and try to visualize if they go well with each other in terms of contrast and how it will fill your website or app elements. Assign a colour for each element from your paper prototype and use white space wherever effective. Play around with lighter and darker shades of selected colors. Remember, you don’t have to fill all elements with colour. Take a look at Google’s Material design theory for some ideas.

 

4: Typography

To keep it simple there are two or three places where a particular font can be chosen when it comes to website or app design. First is for the headings and sub headings, second is for the rest of the text related elements, and third is for action buttons & navigation. A few amazing tools to try font combinations are:
Canva font combinations

  1. Google web fonts
  2. Typekit
  3. Canva font combinations

 

Fonts are important as they represent personality and draw a user’s attention towards the right part of your screen. The aim is not just to select the font but also to package it in a way that draws the correct attention. The Oscar blunder is a perfect example of typography gone wrong.

Once you select fonts, focus on the following points:

  1. Size: Set the size for all headings, subheadings and body text in a way that attention is garnered as expected.
  2. Line Height: This is the space between 2 lines of text and is what makes it easier to read many paragraphs.
  3. Word and letter spacing: The space between words or letters is a quite vital to give importance in areas such as buttons or block quotes.

Be consistent with the values you’ve set in the above steps across all screens of your website or app.

 

5: Putting all of the above in one canvas

The important thing here is which canvas to choose? Luckily, in this tech age, there are so many amazing tools for us to choose from that it becomes a good problem to have. Of course any tool will require further research on how to use it effectively.

Don’t doubt whether you will be able to use the chosen tool properly as there are really good and simple learning materials available free of cost on the net. Just youtube it!

Here are few options for you to consider:

1: Adobe Photoshop CC: An ocean of possibilities with the tools available in photoshop. For the requirements in this context, knowing only a few tools will suffice and it won’t overwhelm you.

2: Sketch for Mac: A lightweight, easy to use design software. Just like Photoshop, you don’t need to be a pro to get started. Working with just few tools will get you the result you want.

3: Make a working app with Appivo: The above two options will just provide a design file. How about stepping up a notch and making a fully functional working app all by yourself? Here’s a small example of what you can achieve with Appivo:

The stand-out part of Appivo platform is that you can build a fully functional app and design it at the same time with quick results. If you wish to try your hand at our platform, feel free to contact us or join our ongoing beta program.

There is no better feeling than to fill a white canvas. It is fun, creative and stimulating work. Good for the soul.

Author: Chetan Bhatia

UI/UX Designer & Front End Developer that finds himself most productive when there is music playing in the background. Swimming and football enthusiast and at times likes to cook just to clear his mind.

Leave a Reply

Your email address will not be published. Required fields are marked *