Video Screen

How to Design Your First Mobile App How to design your first mobile app
4 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.90
List Price:  €92.72
You save:  €27.82
£55.48
List Price:  £79.26
You save:  £23.78
CA$94.84
List Price:  CA$135.49
You save:  CA$40.65
A$107.44
List Price:  A$153.49
You save:  A$46.05
S$94.44
List Price:  S$134.92
You save:  S$40.48
HK$547.73
List Price:  HK$782.50
You save:  HK$234.77
CHF 63.11
List Price:  CHF 90.16
You save:  CHF 27.05
NOK kr759.51
List Price:  NOK kr1,085.06
You save:  NOK kr325.55
DKK kr484.31
List Price:  DKK kr691.90
You save:  DKK kr207.59
NZ$117.18
List Price:  NZ$167.41
You save:  NZ$50.23
د.إ257.02
List Price:  د.إ367.19
You save:  د.إ110.16
৳7,686.18
List Price:  ৳10,980.73
You save:  ৳3,294.54
₹5,834.28
List Price:  ₹8,335.04
You save:  ₹2,500.76
RM330.66
List Price:  RM472.40
You save:  RM141.73
₦97,668.24
List Price:  ₦139,532.04
You save:  ₦41,863.80
₨19,468.63
List Price:  ₨27,813.53
You save:  ₨8,344.89
฿2,546.70
List Price:  ฿3,638.31
You save:  ฿1,091.60
₺2,265.91
List Price:  ₺3,237.16
You save:  ₺971.24
B$351.06
List Price:  B$501.53
You save:  B$150.47
R1,322.01
List Price:  R1,888.66
You save:  R566.65
Лв126.52
List Price:  Лв180.76
You save:  Лв54.23
₩94,315.14
List Price:  ₩134,741.70
You save:  ₩40,426.55
₪257.38
List Price:  ₪367.71
You save:  ₪110.32
₱3,931.96
List Price:  ₱5,617.33
You save:  ₱1,685.37
¥10,592.26
List Price:  ¥15,132.45
You save:  ¥4,540.19
MX$1,160.67
List Price:  MX$1,658.17
You save:  MX$497.50
QR255.40
List Price:  QR364.88
You save:  QR109.47
P964.60
List Price:  P1,378.06
You save:  P413.46
KSh9,279.27
List Price:  KSh13,256.67
You save:  KSh3,977.40
E£3,320.75
List Price:  E£4,744.14
You save:  E£1,423.38
ብር3,980.93
List Price:  ብር5,687.29
You save:  ብር1,706.36
Kz58,401.19
List Price:  Kz83,433.85
You save:  Kz25,032.66
CLP$68,800.17
List Price:  CLP$98,290.17
You save:  CLP$29,490
CN¥505.43
List Price:  CN¥722.08
You save:  CN¥216.64
RD$4,147
List Price:  RD$5,924.54
You save:  RD$1,777.54
DA9,435.57
List Price:  DA13,479.97
You save:  DA4,044.39
FJ$157.96
List Price:  FJ$225.66
You save:  FJ$67.70
Q546.07
List Price:  Q780.13
You save:  Q234.06
GY$14,663.88
List Price:  GY$20,949.30
You save:  GY$6,285.42
ISK kr9,758.70
List Price:  ISK kr13,941.60
You save:  ISK kr4,182.90
DH709.58
List Price:  DH1,013.74
You save:  DH304.15
L1,235.01
List Price:  L1,764.37
You save:  L529.36
ден3,991.30
List Price:  ден5,702.11
You save:  ден1,710.80
MOP$564.38
List Price:  MOP$806.29
You save:  MOP$241.91
N$1,336.41
List Price:  N$1,909.24
You save:  N$572.83
C$2,577.43
List Price:  C$3,682.20
You save:  C$1,104.77
रु9,342.84
List Price:  रु13,347.49
You save:  रु4,004.64
S/260.45
List Price:  S/372.08
You save:  S/111.63
K268
List Price:  K382.87
You save:  K114.87
SAR262.59
List Price:  SAR375.15
You save:  SAR112.55
ZK1,736.79
List Price:  ZK2,481.24
You save:  ZK744.44
L322.64
List Price:  L460.94
You save:  L138.29
Kč1,642.49
List Price:  Kč2,346.52
You save:  Kč704.02
Ft25,571.54
List Price:  Ft36,532.34
You save:  Ft10,960.80
SEK kr748.30
List Price:  SEK kr1,069.05
You save:  SEK kr320.74
ARS$60,059.22
List Price:  ARS$85,802.56
You save:  ARS$25,743.34
Bs483.92
List Price:  Bs691.35
You save:  Bs207.42
COP$270,819.36
List Price:  COP$386,901.39
You save:  COP$116,082.02
₡35,222.95
List Price:  ₡50,320.66
You save:  ₡15,097.70
L1,728.74
List Price:  L2,469.73
You save:  L740.99
₲517,758.37
List Price:  ₲739,686.52
You save:  ₲221,928.15
$U2,629.19
List Price:  $U3,756.16
You save:  $U1,126.96
zł279.29
List Price:  zł399
You save:  zł119.71
Already have an account? Log In

Transcript

Hello again Ladies and gentlemen, welcome back to our series. In this video we'll design the video screen. Here, the user can see a short video sample representing a DJ or the selected party. If you remember from our previous video on how to design the single party screen, we've added a video thumbnail with a play button. When the user taps the thumbnail, he's redirected to the video screen. Now this screen acts as a full screen model.

Same as our calendar screen. The user can see the video and control the Video Timeline using a sidebar. As per usual, enough talking and let's get down to business. Open up your Rectangle tool and draw a rectangle that covers the entire screen. As usual, we need to BG for background and as usual, move it down our layer stack. Let's change the color of it to our favorite color which is 071923 As you can see, we have an instance of our header component that needs to change.

Click off the I have also the calendar icon, the ticket icon, the date, and the title, click on the eyeball of the close icon. When the user taps the close icon, the modal closes back to the single party screen. Now, move on to our assets panel, grab the image and move it over to our canvas. This is the same image that we've been using in our single party screen and it's going to represent our video. Make it full width and change its height to 265 pixels. Positioning to the center of the screen.

Excellent. The only thing left to design is the sidebar. Grab a rectangle tool, click once and make it 345 pixels in width and center it up. Make the height three pixels and change the color of it to 103448. This will represent the sidebars background duplicated by pressing Ctrl C and control V and change the color of it to white. This will be the sidebars to website.

Make it 75 pixels in width. Now, grab an ellipse tool and click once. Click the chain icon constrain the proportions of the circle and change the width to 25 pixels. This will automatically change the height to 25 pixels as well change the color of The circle wipe in place it to the edge of the elapsed time. This will be the seaports control, which the user can swipe, change the video Stein. Finally, open up your title and typing zero colon 16 slash one code 30.

Change the font to circular STD. The letter spacing to zero. The font size is 16 pixels, the font weight is meaning and the color is white places to the right edge somewhere below the sidebar. This number represents our elapsed time and the video length selected, select the ellipse and the rectangles and group them together. Rename this sheet bar to organize it better. And that's it.

Guys do not have our video screen design. I will see you in the next video.

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.