As we moved on from the web and found peace with android, came forward the need to share our experience so that you can learn from our mistakes.

I hate long intros, lets get to work!

What’s the first thing you’d do when you’re thinking of developing an app? Eat some burgers, maybe? Ofc, that’s exactly what me and my team does when we’re stuck so get yourself a burger, then think about the name of your app…

Well in our case, we literally when to google and translated prayer times to Arabic and found out Salah Tawqit, well, sounds great.

How about the colour scheme, or theme, or shades, bruh?

That’s kinda easy, just google “Cool Colour Theme Generator” or just go to coolors and generate one, its that simple.

But how am I gonna design it? On a paper? 🤮 Use Figma

Now what the coffee is figma, well its a freemium design tool, yeah, freemium. What that means is that Figma is free for nobody but the lone wolves and it has a desktop app and it’s a vector graphics editor. Oof, that means you can design logos, edit vectors, and make youtube thumbnails for free! poor wallet noises

Enough with the lame jokes, Figma actually lets you design pretty cool user interfaces with interaction use-cases, aka use-case prototyping. Lets learn by doing and not by talking.

We’re not pros at figma nor do we wanna be, we just chill, eat the burger, have a shot of espresso, and code. But this guy, he’s awesome!

Once you get the hang of figma, it’s kind of easy to make designs and interfaces, but, how about Logo Making?

Make yourself a logo, don’t you dare pay a freelancer or any “generator”

It’s really easy, trust me on this one, there are so many sites that provide free vector icons, repeat after me, free vector icons. Now bear in mind you need a vector, that’s a file that ends in .svg, although there are other vector file formats, SVG stands for Scalable Vector Graphics, that’s what we need.

Now this site, flaticon is my choice when it comes to downloading free vectors, just get yourself an SVG that suits your suit (I couldn’t find a better one), we’ll edit its colours and size quite easily in figma.

Now just copy this vector to figma, and we can humiliate it all we want. On the left hand side in figma, you’ll see the layers of your vector, select the layer you want to edit, hold down CTRL/CMD and click on a layer, now you can change its colour, adjust its size, or even reduce it to atoms using the deleting snap.

Finale

Well, we designed our app using these techniques and ended up with the following two pages, the user can horizontally scroll between these two, isn’t that great?

This is what the initial design looks like: