TEKNIK DESAIN

APLIKASI
MOBILE
Pemrograman Web dan
Perangkat Bergerak
 KOMPETENSI DASAR

● 3.26 Menerapkan teknik desain aplikasi mobile

● 4.26 Membuat desain aplikasi berbasis mobile
 TUJUAN PEMBELAJARAN
1. Melalui penggalian informasi dan diskusi peserta didik mampu menjelaskan prosedur
instalasi tools pengembang aplikasi mobile
2. Melalui penggalian informasi dan diskusi peserta didik mampu menjelaskan kebutuhan
perangkat keras untuk tools pengembang aplikasi mobile.
3. Melalui latihan peserta didik dapat merancang aplikasi berbasis mobile dengan tools
pengembang.
4. Melalui latihan peserta didik dapat membuataplikasi mobile menggunakan tools
pengembang.
5. Melalui latihan peserta didik dapat menguji hasil aplikasi berbasis mobile.
MENGENAL TOO
LAYOUT DESAIN
MOBILE
TOOLS DESAIN APLIKASI MOBILE

01
Spefikasi minimum
komputer

• RAM atau memori minimal 3 GB.

Direkomendasikan RAM 8 GB.
• Processor intel Core i5
• Minimal 2 GB penyimpanan hardisk yang
tersedia. Direkomendasikan 4 GB (500 MB
untuk penyimpanan IDE dan 1,5 GB untuk
penyimpanan Android SDK dan sistem
emulator).
• Resolusi layar minimum 1280 x 800.
MENGENAL LAYOUT
DESAIN APLIKASI
ANDROID
LAYOUT DESAIN APLIKASI ANDROID

LINEAR RELATIVE
LAYOUT LAYOUT

FRAME GRID
LAYOUT LAYOUT
LINEAR LAYOUT
jenis layout dimana user menempatkan 1 objek (widget) per baris/kolom
RELATIVE LAYOUT
layout yang penataannya yang menempatkan widget-widget didalamnya seperti layer,
sehingga sebuah widget dapat berada di atas/di bawah widget lainnya
GRID LAYOUT
layout ini akan memberikan kemudahan dengan mengakomodir komponen didalamnya
ke dalam bentuk Grid (Kolom dan Baris)
FRAME LAYOUT
Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen
yang ada didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya
(layering)
Apakah ada yang ditanyakan ???

—Someone Famous
NEXT >>

Praktek Membuat Desain

Layout Aplikasi
KODULAR
situs web yang menyediakan tools yang menyerupai
MIT App Inventor untuk membuat aplikasi Android
dengan menggunakan block programming.
 Maybe you need to divide the content

Mercury
Mercury is the closest planet to
the Sun and
the smallest one in the Solar
System—it’s only a bit larger
than the Moon
Venus
Venus has an incredibly
beautiful name and is the
second planet from the Sun. It is
very terribly hot—even hotter
than Mercury
 Use a graph to show your data

608 5,408
Followers Followers

5,608 5,408
Views Followers

5,608 5,608
Followers Followers
To modify this graph, click on it, follow
the link, change the data and paste the
new graph here
 You could use three columns, why not?

Mercury Jupiter Mars

Mercury is the closest It’s the fourth-brightest Despite being red, Mars is
planet to the Sun object in the sky a cold place
Awesome
words
Because key words are great for catching
your audience’s attention
 Reviewing concepts is a good idea

Mercury Venus Mars

Mercury is the closest planet Venus has a beautiful name, Despite being red, Mars is
to the Sun but it’s terribly hot actually a cold place

Jupiter Saturn Neptune

It’s the biggest planet in the Saturn is the ringed one and a Neptune is the farthest planet
Solar System gas giant from the Sun
Our history
Despite being red, Neptune is the
Mars is actually a farthest planet from
very cold place the Sun

2016 2017 2018 2019

Venus has a beautiful Mercury is the

name, but it’s terribly smallest closest
hot planet to the Sun
 Our areas of expertise

Neptune Venus
Neptune is the farthest Venus is the second planet
planet from the Sun from the Sun

Mercury Mars
Mercury is the closest Despite being red, Mars is a
planet to the Sun cold place
 This is a table

Mass Diameter Surface Gravity

Mercury 0.06 0.38 0.38

Mars 0.11 0.53 0.38

Saturn 95.2 9.4 1.16

 Infographics are a good idea

Gender Age

25-35

36-45

46-55
40% 60%
This is a map

Mercury is the smallest closest

planet to the Sun

Venus has a very beautiful name, but

it’s terribly hot

Despite being red, Mars is actually a

very cold place
 Our team

Helena James Jenna Doe

You can replace the You can replace the
image on the screen image on the screen
with your own with your own
4,498,300,000
Big numbers catch your audience’s attention
 Strategy
Step 1 Step 3 Step 5
Neptune is the farthest planet Jupiter is the biggest planet in Mercury is the closest planet
from the Sun the Solar System to the Sun

Step 2 Step 4
Venus has a beautiful name, Despite being red, Mars is a
but it’s terribly hot cold place
Budget

$333,000
Instagram

$386,000 $240,000
Facebook Twitter
Desktop software
You can replace the image on the
screen with your own work. Just
delete this one, add yours and center
it properly
Tablet app
You can replace the image on the
screen with your own work. Just
delete this one, add yours and center it
properly
 Here you could state one of
your qualities

Here you could state one of

What sets us your qualities

apart? Here you could state one of

your qualities

Here you could state one of

your qualities
 Buyer persona

Age: 25-35 Job: Publicist

Gender: Female Income Range: $1500-$2000
Studies: Degree in Advertising Marital Status: Single
Location: Madrid, Spain Hobbies: Sports and social media

Goals Motivations
● Neptune is the
farthest planet 70% Mars
● Mercury is the closest
planet 50% Jupiter
● Venus has a beautiful
name 30% Saturn
Goals Venus
Venus has a beautiful name, but also a
poisonous atmosphere

Mercury
Mercury is the smallest closest planet to
the Sun

Jupiter
It’s a gas giant and the biggest planet in
the Solar System

Mars
Despite being red, Mars is actually a
very cold place
 What platforms are we going to use?

Twitter WhatsApp LinkedIn

2010-2019 2010-2019 2010-2019
Mercury is the closest Venus has a beautiful Despite being red
planet to the Sun name, but it’s terribly Mars is actually a
hot cold place
 Process

1 2 3 4

Venus is the second Mercury is the Jupiter is the Despite being red,
planet from the Sun closest planet to the biggest planet in the Mars is a cold place
Sun Solar System
Thanks
Do you have any questions?

addyouremail@freepik.com
+91 620 421 838
yourcompany.com

This presentation template was created by Slidesgo,

including icons by Flaticon, infographics & images by
Please keep this slide for attribution Freepik and illustrations by Stories
Alternative resources
 Resources

● Connected
Stories: ● Profile pic
● Blog post ● Mention
● To the stars ● Word of mouth
● Social ideas ● World map
● Live collaboration
● About us page
● Target
●
Photos:
Mobile Marketing ● Coworkers using devices at work
● Make it rain ● Phone with apps and laptop
● Experts
● Market Launch
● Social Dashboard
 Instructions for use (free users)
In order to use this template, you must credit Slidesgo by keeping the Thanks slide.

You are allowed to:

● Modify this template.
● Use it for both personal and commercial purposes.

You are not allowed to:

● Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Delete the “Thanks” or “Credits” slide.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Instructions for use (premium users)
In order to use this template, you must be a Premium user on Slidesgo.

You are allowed to:

● Modify this template.
● Use it for both personal and commercial purposes.
● Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
● Share this template in an editable format with people who are not part of your team.

You are not allowed to:

● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Fonts & colors used
This presentation has been made using the following fonts:

Fredoka One
(https://fonts.google.com/specimen/Fredoka+One)

Raleway
(https://fonts.google.com/specimen/Raleway)

#F5F5F5 #6695ff #407BFF #263238 #455A64 #E0E0E0 #203E80

 Stories by Freepik
Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick
the background and layers you want to show and bring them to life with the animator panel! It will boost
your presentation. Check out How it Works.

Pana Amico Bro Rafiki Cuate

 Use our editable graphic resources...
You can easily resize these resources without losing quality. To change the color, just ungroup the resource
and click on the object you want to change. Then, click on the paint bucket and select the color you want.
Group the resource again when you’re done. You can also look for more infographics on Slidesgo.
 JANUARY FEBRUARY MARCH APRIL MAY JUNE

PHASE 1

Task 1

Task 2

PHASE 2

Task 1

Task 2

JANUARY FEBRUARY MARCH APRIL

PHASE
1

Task 1

Task 2
 ...and our sets of editable icons
You can resize these icons without losing quality.
You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.
Educational Icons Medical Icons
Business Icons Teamwork Icons
Help & Support Icons Avatar Icons
Creative Process Icons Performing Arts Icons
Nature Icons
SEO & Marketing Icons