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
€64.70
List Price:  €92.43
You save:  €27.73
£55.05
List Price:  £78.64
You save:  £23.59
CA$95.98
List Price:  CA$137.12
You save:  CA$41.14
A$105.75
List Price:  A$151.09
You save:  A$45.33
S$94.56
List Price:  S$135.09
You save:  S$40.53
HK$547.16
List Price:  HK$781.70
You save:  HK$234.53
CHF 63.45
List Price:  CHF 90.65
You save:  CHF 27.20
NOK kr738.30
List Price:  NOK kr1,054.77
You save:  NOK kr316.46
DKK kr482.62
List Price:  DKK kr689.49
You save:  DKK kr206.87
NZ$114.62
List Price:  NZ$163.75
You save:  NZ$49.13
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.18
৳8,222.07
List Price:  ৳11,746.32
You save:  ৳3,524.24
₹5,828.55
List Price:  ₹8,326.85
You save:  ₹2,498.30
RM329.23
List Price:  RM470.35
You save:  RM141.12
₦97,690.64
List Price:  ₦139,564.04
You save:  ₦41,873.40
₨19,499.79
List Price:  ₨27,858.04
You save:  ₨8,358.25
฿2,572.30
List Price:  ฿3,674.88
You save:  ฿1,102.57
₺2,260.88
List Price:  ₺3,229.98
You save:  ₺969.09
B$364.14
List Price:  B$520.22
You save:  B$156.08
R1,304.32
List Price:  R1,863.40
You save:  R559.07
Лв126.57
List Price:  Лв180.83
You save:  Лв54.25
₩96,278.96
List Price:  ₩137,547.26
You save:  ₩41,268.30
₪260.22
List Price:  ₪371.76
You save:  ₪111.54
₱4,095.18
List Price:  ₱5,850.51
You save:  ₱1,755.32
¥10,983.18
List Price:  ¥15,690.93
You save:  ¥4,707.75
MX$1,193.03
List Price:  MX$1,704.41
You save:  MX$511.37
QR256.47
List Price:  QR366.40
You save:  QR109.93
P952.83
List Price:  P1,361.25
You save:  P408.41
KSh9,133.69
List Price:  KSh13,048.69
You save:  KSh3,915
E£3,308.47
List Price:  E£4,726.59
You save:  E£1,418.12
ብር4,039.90
List Price:  ብር5,771.53
You save:  ብር1,731.63
Kz59,799.99
List Price:  Kz85,432.22
You save:  Kz25,632.23
CLP$63,667.80
List Price:  CLP$90,957.90
You save:  CLP$27,290.10
CN¥496.98
List Price:  CN¥710
You save:  CN¥213.02
RD$4,142.41
List Price:  RD$5,917.99
You save:  RD$1,775.57
DA9,432.20
List Price:  DA13,475.15
You save:  DA4,042.95
FJ$158.10
List Price:  FJ$225.87
You save:  FJ$67.76
Q544.32
List Price:  Q777.63
You save:  Q233.31
GY$14,658
List Price:  GY$20,940.90
You save:  GY$6,282.90
ISK kr9,646.72
List Price:  ISK kr13,781.62
You save:  ISK kr4,134.90
DH698.65
List Price:  DH998.11
You save:  DH299.46
L1,239.20
List Price:  L1,770.37
You save:  L531.16
ден3,980.20
List Price:  ден5,686.25
You save:  ден1,706.04
MOP$563.76
List Price:  MOP$805.41
You save:  MOP$241.64
N$1,284.80
List Price:  N$1,835.51
You save:  N$550.70
C$2,588.54
List Price:  C$3,698.08
You save:  C$1,109.53
रु9,341.71
List Price:  रु13,345.87
You save:  रु4,004.16
S/263.77
List Price:  S/376.83
You save:  S/113.06
K272.38
List Price:  K389.14
You save:  K116.75
SAR262.50
List Price:  SAR375.01
You save:  SAR112.51
ZK1,910.82
List Price:  ZK2,729.87
You save:  ZK819.04
L321.97
List Price:  L459.98
You save:  L138
Kč1,603.41
List Price:  Kč2,290.69
You save:  Kč687.27
Ft25,203.86
List Price:  Ft36,007.06
You save:  Ft10,803.20
SEK kr743.98
List Price:  SEK kr1,062.87
You save:  SEK kr318.89
ARS$62,542
List Price:  ARS$89,349.55
You save:  ARS$26,807.54
Bs484.12
List Price:  Bs691.63
You save:  Bs207.51
COP$269,661.49
List Price:  COP$385,247.22
You save:  COP$115,585.72
₡36,378.56
List Price:  ₡51,971.60
You save:  ₡15,593.04
L1,737.15
List Price:  L2,481.76
You save:  L744.60
₲527,980.62
List Price:  ₲754,290.36
You save:  ₲226,309.74
$U2,698.07
List Price:  $U3,854.56
You save:  $U1,156.48
zł277.62
List Price:  zł396.62
You save:  zł118.99
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.