Empty Screen

How to Design Your First Mobile App How to design your first mobile app
3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€61.58
List Price:  €87.97
You save:  €26.39
£52.44
List Price:  £74.91
You save:  £22.47
CA$96.52
List Price:  CA$137.90
You save:  CA$41.37
A$108.05
List Price:  A$154.36
You save:  A$46.31
S$90.34
List Price:  S$129.07
You save:  S$38.72
HK$543.13
List Price:  HK$775.94
You save:  HK$232.80
CHF 57.63
List Price:  CHF 82.34
You save:  CHF 24.70
NOK kr718.85
List Price:  NOK kr1,026.97
You save:  NOK kr308.12
DKK kr459.52
List Price:  DKK kr656.49
You save:  DKK kr196.96
NZ$116.81
List Price:  NZ$166.88
You save:  NZ$50.06
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.18
৳8,531.88
List Price:  ৳12,188.92
You save:  ৳3,657.04
₹5,934.81
List Price:  ₹8,478.67
You save:  ₹2,543.85
RM296.79
List Price:  RM424.01
You save:  RM127.21
₦112,480.92
List Price:  ₦160,693.92
You save:  ₦48,213
₨19,730.13
List Price:  ₨28,187.10
You save:  ₨8,456.97
฿2,287.97
List Price:  ฿3,268.67
You save:  ฿980.70
₺2,704.69
List Price:  ₺3,864.02
You save:  ₺1,159.32
B$401.24
List Price:  B$573.23
You save:  B$171.98
R1,280.65
List Price:  R1,829.58
You save:  R548.92
Лв120.46
List Price:  Лв172.10
You save:  Лв51.63
₩97,486.09
List Price:  ₩139,271.81
You save:  ₩41,785.72
₪251.04
List Price:  ₪358.64
You save:  ₪107.60
₱3,878.05
List Price:  ₱5,540.32
You save:  ₱1,662.26
¥10,026.31
List Price:  ¥14,323.91
You save:  ¥4,297.60
MX$1,375
List Price:  MX$1,964.37
You save:  MX$589.37
QR254.83
List Price:  QR364.06
You save:  QR109.23
P953.17
List Price:  P1,361.73
You save:  P408.56
KSh9,053.20
List Price:  KSh12,933.70
You save:  KSh3,880.50
E£3,544.09
List Price:  E£5,063.20
You save:  E£1,519.11
ብር9,421.13
List Price:  ብር13,459.34
You save:  ብር4,038.20
Kz63,830.88
List Price:  Kz91,190.88
You save:  Kz27,360
CLP$65,744.40
List Price:  CLP$93,924.60
You save:  CLP$28,180.20
CN¥510.57
List Price:  CN¥729.42
You save:  CN¥218.85
RD$4,131.65
List Price:  RD$5,902.61
You save:  RD$1,770.96
DA9,266.07
List Price:  DA13,237.82
You save:  DA3,971.74
FJ$157.67
List Price:  FJ$225.25
You save:  FJ$67.58
Q539.19
List Price:  Q770.30
You save:  Q231.11
GY$14,646.40
List Price:  GY$20,924.33
You save:  GY$6,277.92
ISK kr9,010.51
List Price:  ISK kr12,872.71
You save:  ISK kr3,862.20
DH648.26
List Price:  DH926.13
You save:  DH277.86
L1,196.51
List Price:  L1,709.38
You save:  L512.86
ден3,795.85
List Price:  ден5,422.88
You save:  ден1,627.02
MOP$560.81
List Price:  MOP$801.19
You save:  MOP$240.38
N$1,306.98
List Price:  N$1,867.19
You save:  N$560.21
C$2,583.28
List Price:  C$3,690.56
You save:  C$1,107.28
रु9,492.56
List Price:  रु13,561.38
You save:  रु4,068.82
S/257.39
List Price:  S/367.72
You save:  S/110.32
K284.03
List Price:  K405.78
You save:  K121.74
SAR262.53
List Price:  SAR375.06
You save:  SAR112.53
ZK1,947.17
List Price:  ZK2,781.79
You save:  ZK834.62
L314.09
List Price:  L448.72
You save:  L134.63
Kč1,535.57
List Price:  Kč2,193.77
You save:  Kč658.19
Ft24,887.10
List Price:  Ft35,554.52
You save:  Ft10,667.42
SEK kr670.89
List Price:  SEK kr958.46
You save:  SEK kr287.56
ARS$83,636.94
List Price:  ARS$119,486.47
You save:  ARS$35,849.52
Bs485.21
List Price:  Bs693.19
You save:  Bs207.97
COP$300,063.78
List Price:  COP$428,680.91
You save:  COP$128,617.13
₡35,459.16
List Price:  ₡50,658.12
You save:  ₡15,198.95
L1,821.77
List Price:  L2,602.65
You save:  L780.87
₲562,262.91
List Price:  ₲803,267.16
You save:  ₲241,004.24
$U2,935.62
List Price:  $U4,193.93
You save:  $U1,258.30
zł263.32
List Price:  zł376.19
You save:  zł112.86
Already have an account? Log In

Transcript

Welcome to the second video about the ticket screen, the empty state screen. In this short video, we'll learn how to design an empty state for our ticket screen. Since the ticket screen is accessible from our home screen, aka the party we screen, there's a possibility that this screen won't have any content. Since the user haven't bought any tickets yet. For this purpose, we're designing an empty state, which will show if there aren't any tickets in the ticket screen. If you recall, we mentioned this in the user for video, how an empty screen should look like.

The elements are some appropriate graphic, a message that explains why there is no content here. And a call to action that will make the user do something in our case, buy tickets. So without further ado, let's get down to business. I assume that you've already created your background using the rectangle tool. Our favorite color, if not do it now. We're using the same color as our ticket screen, where we have a back button and a screen title.

Now in our assets panel, I provided the graphic for this lesson, grab it and place it onto our canvas. As you can see, this is the same icon we're using in our header component to link us to the ticket screen, only larger and a different color. Place it in the middle of our canvas. Now, open up your title and type in looks like you don't have any tickets bought changed font size to this to 30 pixels. The font weight is regular and the color is white. The final thing to do is to center align this text and make sure it fits in our screen by breaking this words.

Now, placing 30 pixels down our graphic and center aligned to our canvas. So both the graphic and the text and glued them together. Center align them to the middle of our canvas. Now the final thing to do is to add the call to action. Copy and paste the call to action from our previous screens and change the content to book tickets now make sure this is center aligned and 15 pixels. From the bottom and that's it guys.

We've made it. The final design for our application. I will see you in the next video, where we will discuss the things we've learned so far and prepare for the challenge. Thank you so much for your attention.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.