How to design a mobile app tutorial - a step by step guide

Hey!
Here's another part of our design super-basics free course. Today I'll show you a step by step guide on how to start your first mobile app project. This is perfect for beginners and junior designers who want to have a good template to begin their projects with.
It also helps to do it right, as that way you can have more projects for your portfolio and this is essential when just starting out.
Check out my book:
designingui.com
And follow me on Twitter / Medium
@michalmalewicz
Cheers!

[@kamilwaszewski]

You can use well-known design systems to figure out what margins, and other measurements are fine. I recommend human interface guidelines - it's for iOS apps but you can use it as a reference to prepare your starting layout.

[@irinabezyanova9844]

Thank you for the interesting, helpful and simple explanation. English is not my first language, but I understood your video without subtitles and translator

[@marijabarusic7687]

Thank you so much for this video! I've just finished with paper sketches and wireframes in the third Google UX design course, and I was a little bit confused with the grids and layout in your book, but you have explained it in this video so well! ☺

[@MalewiczHype]

Thank you! I will be updating the book in a few weeks with a lot more on grids and layouts and a couple other techniques :)

[@productguiderhero2324]

You are an awesome teacher, plz make a full app thanks

[@tomashruska2171]

as participant of Google UX course, this was never mentioned in that course. Just make a wireframes, how you want. No layout at all :D

[@kennettajackson767]

Nice tutorial finally purchased the UI video course I very good and informative following along with the videos can wait to see how far I’ll improve in the next few months!

[@MalewiczHype]

Super happy to hear that! :)

[@user-bv2qd5wt1q]

Amazing tutorial, thank you so much

[@codearenaofficial]

THANKS SIR!

[@MarcelQT]

Awesome video! As a dev I’m trying to learn more design and this is super super useful. I was amazed by the difference that grids made. Thank you!!
Btw you look a lot like Jesse Pinkman from Breaking Bad xD

[@khusandjabbarov]

very usefull

[@MalewiczHype]

Glad to hear that

[@taariqq]

What great video! Now, what if there was an actual mockup video doing all this. I am sure there is similar videos.

[@MalewiczHype]

For now that'll have to do, but this process works quite well for most simple designs :)

[@whimsical.me1]

thankyou sir
🙏🙏🙏🙏🙏

[@yurism]

Suggestion for the next videos. No soundtrack in the background. Best

[@Rana-derana]

Waw its good video ❤

[@aliufemi]

Thanks a lot for this video. @Malewicz do you have any recommendation for a mobile design course? It’s something I really want to get into next year. Thanks.

[@MalewiczHype]

I made a mobile UI course. A little over 2000 people are taking it right now ;)

[@SzabatDesign]

And I found my question which I asked on the slack. Should the status bars be visible when making a mock-up to the portfolio :)

[@rasula9]

How to get those iOS components in Figma?