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.
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.
That’s kinda easy, just google “Cool Colour Theme Generator” or just go to coolors and generate one, its that simple.
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?
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.
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: