Everyone Can Code

App Design Journal

 Aplikasi hebat bermula dengan idea hebat!

Brainstorm Plan Prototype Evaluate

Senaraikan Idea Apa yang pengguna Lakaran skrin aplikasi “App Pitch”
boleh lakukan
Fokus pada satu idea Papan cerita
Kenalpasti ciri-ciri
aplikasi Rekabentuk “Style”
Aplikasi

Bina Prototaip

Beri nama & cipta ikon

 Contoh di muka seterusnya >

Kenalpasti beberapa masalah yang perlu untuk

diselesaikan dan sesuai dengan prinsip hidup anda
Brainstorm
Senaraikan Idea
Fokus pada satu idea
 Pilih salah satu dari senarai tadi dan terangkan dengan
lebih terperinci
Brainstorm
Senaraikan Idea
Fokus pada satu idea Mengapa?

Apa/siapa sasaran cadangan penyelesaian tersebut?

 Pilih salah satu dari senarai tadi dan terangkan dengan
lebih terperinci
Brainstorm
Senaraikan Idea
Fokus pada satu idea Apa lagi yang perlu anda pelajari (info tambahan yang diperlukan)
dari masalah tersebut?

Siapa lagi yang merasakan cadangan penyelesaian

tersebut penting?
 Senaraikan 2 cadangan/idea aplikasi yang ingin
dibangunkan
Brainstorm
Senaraikan Idea Cadangan aplikasi Bagaimana aplikasi ini
Fokus pada satu idea (Idea) membantu?
 Fokus pada satu idea dan nyatakan tujuan cadangan
aplikasi tersebut
Brainstorm
Senaraikan Idea Aplikasi saya akan membantu [ sasaran ] dengan [masalah
Fokus pada satu idea yang dipilih] melalui [apa yang boleh dilakukan oleh aplikasi]

Terangkan dengan lebih terperinci tentang idea aplikasi

anda. Tuliskan matlamat aplikasi anda dan jelaskan
bagaimana pengguna akan menggunakan aplikasi anda.
 Contoh di muka seterusnya >

Berdasarkan pilihan tadi, perincikan apa yang

boleh pengguna lakukan dengan aplikasi yang
Plan akan dibangunkan.
Apa yang pengguna
boleh lakukan

Kenalpasti ciri-ciri
aplikasi
 CONTOH

Berdasarkan pilihan tadi, perincikan apa yang boleh

pengguna lakukan dengan aplikasi yang akan dibangunkan.
Bug Buzz Example
Lihat contoh aplikasi Bug Buzz
berikut. Ini adalah permulaan
perancangan untuk aplikasi yang
membantu pengguna menjejaki
gambar dan maklumat serangga yang
Pengguna boleh mengambil Pengguna boleh Mencari
mereka jumpai.

gambar serangga maklumat jenis-jenis

serangga yang berbeza

“USER ACTIONS”

Pengguna boleh menambah Pengguna boleh melihat

serangga yang baru apabila keseua gambar serangga
dijumpai

Pengguna menyimpan Pengguna perlu melihat

maklumat tentang serangga maklumat seperti dimana
yang baru dijumpai dan bila serangga dijumpai
 App Features
Pilih iOS features yang akan anda gunakan dalam aplikasi anda
Plan daripada senarai di bawah. Adakah terdapat features lain yang
anda perlukan?
Apa yang pengguna
Drag a checkmark next to features you want to consider using in your app.

boleh lakukan
Bluetooth
Keyboard
Communicates wirelessly with
Kenalpasti ciri-ciri Allows typing input

other devices

aplikasi
Camera
Captures and processes Map
images
Displays interactive maps


Augmented reality
Microphone
Places virtual objects that users
Captures and records audio

can interact with in their world

Touchscreen
Speakers
Allows users to interact
Plays back audio

through tap, swipe, and drag

Gyroscope Haptics
Measures how the device is Provides feedback through
rotated
vibrating the device (iPhone only)

Go Further
Review “User Interaction” and Accelerometer Machine learning
“System Capabilities” in the
 Measures how quickly the Analyzes information and
Human Interface Guidelines for iOS 
 device is moving
categorizes it for further use

to learn more about di erent iOS

features. GPS Other
Locates the device longitude
and latitude
ff
 Contoh di muka seterusnya >

My app’s storyboard
Prototype Lakarkan skrin aplikasi anda, kemudian lukiskan anak
panah untuk menunjukkan interaksi antara skrin.

Lakaran skrin aplikasi:

Papan cerita

Rekabentuk “Style”
Aplikasi

Bina Prototaip

Beri nama & cipta ikon

 Contoh

My app’s storyboard
Sketch Screens
Bug Buzz Example Lakarkan skrin aplikasi anda, kemudian lukiskan anak
Input

panah untuk menunjukkan interaksi antara skrin.

12
 Contoh di muka seterusnya >

My app’s design
Berikan apliksai and style dan personality. Pastikan menepati sasaran pengguna dan tujuan
Prototype aplikasi anda.

Pilih skim warna aplikasi

Lakaran skrin aplikasi:

Papan cerita
Lakarkan perincian elemen antara muka (user interface) seperti butang, alat navigasi, dan
visual yang lain. Sekiranya aplikasi anda menggunakann warna untuk menunjukkan maklumat,
Rekabentuk “Style” lakarkan ikon untuk membantu pengguna yang rabun warna.
Aplikasi

Bina Prototaip

Beri nama & cipta ikon

Go Further
Try creating your own sounds in
GarageBand. Add a new slide 

to create a mood board using
screenshots that inspired your design.
Read more about accessible use of
color
Color and
and contrast.
Contrast
 Contoh

My app’s design
Berikan apliksai and style dan personality. Pastikan menepati sasaran pengguna dan tujuan
Bug Buzz Example aplikasi anda.

Pilih skim warna aplikasi

Lakarkan perincian elemen antara muka (user interface) seperti butang, alat navigasi, dan
visual yang lain. Sekiranya aplikasi anda menggunakann warna untuk menunjukkan maklumat,
lakarkan ikon untuk membantu pengguna yang rabun warna.

14
 Contoh di muka seterusnya >

Membina Prototaip menggunakan Keynote

Bina projek baharu. Muat turun templat untuk sama ada iPad atau iPhone. Gunakan idea
Prototype daripada lakaran dan elemen reka bentuk anda untuk mencipta skrin dalam prototaip Keynote
anda. Bina setiap skrin pada slaid yang berbeza.

Lakaran skrin aplikasi: Buat pautan interaktif untuk meniru interaksi aplikasi. Tambah pautan antara slaid supaya
anda boleh menavigasi antara skrin dan mencetuskan respons seperti yang anda lakukan
Papan cerita
dengan kod. Untuk melakukan ini, pilih objek atau teks yang anda mahu pautkan, pilih pilihan
untuk menambah pautan, kemudian pilih slaid yang sesuai. Untuk memastikan bahawa slaid
Rekabentuk “Style” berubah hanya apabila pengguna menekan butang, semak bahawa Presentation Type
ditetapkan kepada Links Only dalam bar sisi Document.

Aplikasi
Lihat video ini mengenai prototaip 60 saat untuk mengetahui cara anda boleh menggunakan
Keynote untuk menguji idea dengan pantas.
Bina Prototaip

Beri nama & cipta ikon

Go Further
Try creating your own sounds in
GarageBand. Add a new slide 

to create a mood board using
screenshots that inspired your design.
Read more about accessible use of
color
Color and
and contrast.
Contrast
 Contoh

Contoh Prototaip Aplikasi dalam Keynote

Bug Buzz Example

Go Further
Tekan pada prototaip di atas untuk melihat video demo atau
Check out this iPhone prototype
iPhone prototype muat turun fail prototaip Keynote untuk meneroka prototaip
aimed to help users recycle more. prototype
tersebut.
16
 Ikon dan nama aplikasi anda
Lakarkan 2 ikon untuk aplikasi anda.
Prototype
Lakaran skrin aplikasi:
Papan cerita

Rekabentuk “Style”
Aplikasi

Bina Prototaip

Beri nama & cipta ikon

Cadangkan 2 pilihan nama untuk aplikasi anda

17
 Anda kini mempunyai prototaip yang berfungsi!
Evaluate Sekarang tiba masanya untuk mendapatkan maklum
balas. Walaupun anda hanya mempunyai prototaip
App Pitch aplikasi, anda dicadangkan untuk menguji aplikasi
tersebut. Minta rakan sekelas, keluarga dan orang
lain mencubanya. Cuba cari penguji yang sesuai
dengan khalayak sasaran aplikasi anda dan dapatkan
maklum balas mereka.

Adakah aplikasi and mesra pengguna?

Adakah aplikasi anda mengatasi masalah

yang dihadapi?

Adakah aplikasi anda menepati sasaran

pengguna?

Secara keseluruhan, adakah prototaip

anda berfungsi dengan baik?

Adakah sebarang penambahbaikan

diperlukan?
 My app pitch
Satu cara untuk menguji idea aplikasi anda ialah dengan membina App Pitch dan
Evaluate berkongsi dengan orang lain. Buat pembentangan tiga minit atau video tentang Pitch anda.
Pitch yang baik akan menceritakan kisah yang jelas dan boleh membuatkan orang lain
mahukan aplikasi anda.

App Pitch
Pitch anda hendaklah termasuk:

Why: Masalah yang cuba diselesaikan oleh aplikasi anda

Who: Penerangan tentang siapa pengguna aplikasi anda

What: Gambaran keseluruhan aplikasi atau demonstrasi prototaip

How: Butiran tentang pengalaman pengguna dan antara muka pengguna, termasuk reka
bentuk, ciri dan peningkatan yang telah anda buat

Apakah maklum balas yang anda terima tentang idea aplikasi anda?