How to Create a Mobile App Design – Mobiroller

May 5, 2022


In this tutorial video, you will learn how to create a mobile app design using Mobiroller.

Video Transcript:

0:00 when it comes to the app design we won’t
0:03 go very deep and keep it simple here are
0:10 things that we are going to cover so
0:13 we’re going to talk about the general
0:15 design settings changing your menu type
0:18 designing an app icon spice screen and
0:22 the menu background will use karma for
0:27 our purposes so we’ll keep it really
0:30 simple now let’s go back to our control
0:34 panel and see how all these things are
0:37 working together welcome to our builders
0:43 training in this section we’ll talk
0:46 about the app design so let me walk you
0:50 through how to make an app design and
0:52 all the aspects related to the out loops
0:55 of your app we are here in your
0:58 dashboard you’ll see there’s a button
1:01 named change template so let’s click
1:04 here and try to change our template
1:08 we’ve created a lot of templates for you
1:11 to use so the easiest way of changing
1:15 your apps outlook is to change the
1:17 template so let’s have a look at the
1:20 templates and how to change it our
1:22 example is mobile roller Academy app so
1:26 in this case I’ll choose the education
1:29 tab
1:43 so my template has been changed which
1:46 means except from my logo everything has
1:50 changed since you know how to change
1:53 your template now we can go ahead and
1:55 click on the appearance tab and see
1:57 what’s in there as you see we have the
2:00 general settings and the menu settings
2:02 so let’s start with the general settings
2:05 and let’s see what’s inside of it in
2:08 general settings not all of the things
2:11 are design related but still let’s go
2:15 through so you can change your font font
2:18 size list item font sizes the loading
2:23 animation of your app loading animation
2:26 color and app exit confirmation you can
2:32 also change other colors like the
2:34 navigation bar color text color list
2:37 item text color this is also the place
2:40 to change your splash image list item
2:43 background and default background image
2:46 so there is nothing complicated about
2:51 here let’s save this and move on but you
3:01 can change your menu type here think
3:06 carefully what your end purpose is and
3:09 choose a mini type according to your
3:11 needs
3:12 currently we have four options in
3:15 Motorola classic many sliding many lists
3:19 mini and extended menu this is how the
3:24 classic menu looks like this is how the
3:29 sliding menu looks like we have actually
3:31 closed sliding menus this is how the
3:36 list mini is looking like and and it
3:40 comes to the extended menu you have many
3:43 options by choosing your menu you
3:47 shouldn’t be purely thinking of your own
3:49 taste
3:50 you should be also thinking about your
3:53 users experience so
3:57 think about how to present your content
3:59 the best way possible the menu type is
4:02 going to accomplish that so let’s choose
4:06 the classic menu and see what’s
4:07 happening
4:08 so now I need to choose a menu
4:12 background as you can see this is gonna
4:18 be the background in your main menu so
4:27 let’s change the menu type this time to
4:30 the sliding menu when you do that there
4:37 won’t be the menu background anymore but
4:39 the opacity so let’s change the menu
4:44 type again this time we’re choosing the
4:47 list menu and once we do that there
4:55 comes back the menu background again so
4:58 if you choose a menu background also you
5:01 have the menu item background option
5:03 this time so the menu item background is
5:17 the background of each cell in your
5:21 menu so T is Logan’s background of
5:26 those so let’s change our menu type for
5:32 the last time to extended menu so when
5:39 you choose the extended menu you will
5:41 need to choose the menu background as
5:43 well as the menu item background simple
5:46 as that now that we are familiar with
5:50 the appearance tab let us talk about the
5:54 images that they’re going to create for
5:56 our custom map design so to start with
6:00 we have the app icon you can click here
6:04 and change it you can
6:09 dimensions and the formats the second
6:16 one we have the many background and the
6:24 last item that we’re gonna work on is in
6:27 the general settings our last item is
6:37 the special image you will be creating
6:40 that in camera in a bit so let’s
6:47 continue with the creation of those
6:49 images and then we’ll come back here and
6:52 finalize the look of our app let’s
6:56 create an app icon using Ken I’ll show
7:00 you step-by-step how to do it and you
7:04 will love this after seeing how easy it
7:08 is to make an app logo for yourself
7:10 you’ll be surprised
7:12 first up click on create a design and
7:22 from here we’ll find the log
7:30 remember that you’re making an app ID we
7:34 are not creating a brand logo so we need
7:37 to keep it really simple when your users
7:41 download your app they are going to
7:44 click on this icon to move to your app
7:47 so that’s why let’s create something
7:52 very simple so that they can easily
7:55 reach out to it here we have some
8:01 templates that we can use and I think we
8:11 could use this one so what I will do is
8:19 actually getting rid of this one and
8:26 write an M instead of that B and change
8:36 this to M so we can make this a little
8:50 bit bigger I’ll put this right in the
8:54 middle and then take this Academy so the
9:01 background color already matches my
9:03 brand so there’s no problem with that
9:07 now remember that this is a 500 by 500
9:12 club so I need to change that thousand
9:17 24 2024 so I’ll go to the file and
9:23 change the dimensions use custom
9:28 dimensions
9:28 [Music]
9:32 and get myself a pack so click on resize
9:45 so now my logo is created so let’s name
9:53 it
9:59 rubbadubbers Academy have icon and then
10:06 we can download
10:09 let’s continue by creating our splash
10:11 image
10:15 missions are here first thing I want to
10:27 do is to add a logo of my brother I
10:32 previously uploaded it here so just
10:34 click on it and here it is I’ll place my
10:41 logo somewhere here that looks nice
10:51 then I’ll go ahead and add some text and
10:55 that’s gonna be a heading
11:36 so I edit my text I have my logo and to
11:40 me it looks pretty okay so I’ll just
11:44 name this
11:59 now I can download it and later on I’ll
12:08 use this in my module of control panel
12:10 and I am I splash screen ready let’s
12:17 move on to the menu background right
12:18 away since it’s the same size actually I
12:23 don’t need to do anything what I’ll do
12:26 here is I’ll just take our logo out and
12:30 this can stay here a little bit on top
12:36 maybe what I want to do is I’ll add
12:40 something like a line so that we can see
12:46 the separation
13:09 so something like this
13:18 you
13:23 so it’s gonna look something like this
13:26 now that I created all the three images
13:29 and downloaded them I can go back to my
13:32 movie roller control panel and start
13:35 uploading them let’s have a look at my
13:41 logo let’s check out the splash screen
13:56 and finally let’s have a look at the
13:58 manual ground
14:09 come to the end of this session of our
14:11 training and I try to show you how to
14:13 make an app design see you in the next
14:16 part