1.
||
i

2.
ii

3.
ii
i
DESAIN APLIKASI WEB
Ditulis Oleh :
Erliyan Redy Susanto
Yusra Fernando
Ade Surahman
UNIVERSITAS TEKNOKRAT INDONESIA
Kampusnya Sang Juara

4.
iv
DESAIN APLIKASI WEB
Penulis :
Erliyan Redy Susanto
Yusra Fernando
Ade Surahman
Editor :
Erliyan Redy Susanto
Cover Designer :
Yusra Fernando
FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS TEKNOKRAT INDONESIA
Bandar Lampung 2021

5.
1
BAB I
Pengantar Desain Web
Seorang web desainer harus memiliki keahlian dalam bidang
pemrograman web. Beberapa pengetahuan serta bahasa pemrograman
yang perlu dikuasai diantaranya adalah :
 Hypertext Markup Language (HTML)
 Cascading Style Sheets (CSS)
 jQuery
 JavaScript
 Desain Responsive
 Integrasi web Application Programming Interface (API)
 Pengalaman dalam Pengalaman Pengguna (UX) dan Antarmuka
Pengguna (UI)
Sedangkan perangkat lunak penunjang yang perlu dikuasai untuk
membuat objek dalam bentuk gambar dan video yang menarik :
 Adobe Suite - Photoshop, Illustrator, InDesign, AfterEffect
 CorelDRAW Graphics Suite
 dll
B. Keahlian dan Perangkat Lunak Penunjang
A. Tujuan
Memberikan gambaran tentang bagaimana menjadi seorang desainer web
tentang tugas dan tanggung jawabnya, serta berbagai hal apa saja yang
harus dikuasai agar menjadi seorang desainer web yang profesional.

6.
2
C. Pengantar Desain Aplikasi Web
Seseorang yang memiliki peran sangat berpengaruh dalam bidang industri
software di dunia saat ini mengatakan bahwa
"Jika bisnis tidak ada di internet, maka bisnis akan gulung tikar."
Gambar 1 Foto Bill Gates
Bill Gates mengatakan hal tersebut lebih dari dua dekade lalu. Saat ini
terdapat ratusan juta situs web aktif di Internet (menurut Netcraft) dan
desainer web menjadi bagian sentral dari strategi pemasaran perusahaan
mana pun. Sehingga keadaan ini menempatkan desainer web dalam
permintaan yang begitu tinggi dalam industri teknologi informasi.
Desainer Web bertanggung jawab untuk merancang dan membangun
antarmuka, navigasi, dan estetika situs web untuk bisnis dan klien.
Kemungkinan bekerja dalam tim Teknologi Informasi (TI) dari suatu
organisasi atau untuk agensi desain digital yang melayani klien, Desainer
Web harus memiliki berbagai keterampilan dan kualitas. Pada deskripsi
lowongan pekerjaan Desainer Web pasti akan ditanyakan kandidat yang
ahli dalam praktik terbaik dalam desain, memahami kebutuhan pengguna
dan klien, serta menjadi komunikator yang hebat.

7.
3
D. Tugas dan tanggung jawab Desainer Web
Membutuhkan keterampilan teknis dan kreatif, deskripsi pekerjaan
Desainer Web biasanya mencakup beberapa tugas dan tugas berikut:
1. Merancang halaman arahan yang menarik dan responsif
2. Mengintegrasikan program Content Management System (CMS) klien
dan umpan data ke dalam situs web
3. Mengoptimalkan situs untuk kecepatan dan skalabilitas maksimum
4. Menggunakan praktik terbaik industri dan desain melalui proses
pembuatan situs web
5. Melakukan pengujian situs web
6. Bekerja sama dengan pengembang back-end untuk memastikan logika
web dan aplikasi terintegrasi dengan benar
7. Memastikan fungsi dan stabilitas situs web di seluruh perangkat
seperti desktop, seluler, tablet
8. Bekerja dengan tim pemasaran dan riset untuk memasukkan elemen
merek dan temuan riset pasar yang relevan ke dalam situs web
9. Memberikan dukungan internal dan layanan pelanggan eksternal
selama proses pembuatan dan peluncuran situs web
E. Langkah-langkah menjadi Desainer Web
Ada beberapa hal yang perlu dilakukan untuk menjadi desainer web yang
professional diantaranya adalah :
1. Pelajari teori desain aplikasi web
Saat mempelajari disiplin ilmu baru maka penting untuk mempelajari
prinsip-prinsip dasar terlebih dahulu. Situs web yang dirancang dengan
baik mengikuti aturan ketat desain User Experience (UX) maka akan
memiliki manfaat yang baik dan daya tarik visual yang bagus. Desain
UX yang baik akan membuat pengunjung merasa nyaman tetap berada
di situs, sementara yang buruk akan membuat mereka pergi ke tempat
lain. Sebelum mencoba membuat desain aplikasi web, perlu dipelajari
aturan tentang bagaimana situs web harus diatur. Siapa pun yang ingin

8.
4
menjadi perancang web harus belajar cara membuat arsitektur
informasi yang jelas dan kuat. Untuk membuat desain aplikasi web yang
menarik, penting untuk mempelajari teori warna dan prinsipdasar
hierarki visual. Desain aplikasi web adalah bidang yang terus
berkembang, jadi harus siap untuk mempelajari sesuatu yang baru
setiap saat[1].
2. Pelajari cara membuat kode
Akan sulit untuk bekerja di industri desain aplikasi web tanpa
mengetahui bahasa pemrograman apa pun. Akan tetapi kita dapat
membuat situs web menggunakan pembuat situs web seperti Wix atau
Squarespace. Namun kita akan kesulitan mengetahui kemungkinan
web saat bekerja hanya dengan pembuat situs/web builder. Dengan
mengetahui cara membuat kode akan memberi banyak manfaat.
Misalnya, akan dapat membentuk gagasan yang jauh lebih akurat
tentang apakah desain yang dibuat layak secara teknis atau tidak.
Gambar 2. Website https://www.wix.com/

9.
5
Gambar 3. Website https://www.squarespace.com/
Desainer web harus memiliki keterampilan yang diperlukan dalam
menggunakan bahasa HTML dan CSS. HTML menetapkan struktur dan
konten halaman, sedangkan CSS menentukan opsi gaya/style. HTML
digunakan untuk pembuatan halaman web dan CSS digunakan untuk
mengontrol gaya dan tata letak halaman web. Sebagai contoh sumber
belajar HTML dan CSS adalah pada W3schools.
Gambar 4. Website https://www.w3schools.com/
Selain itu juga desainer web juga perlu mempelajari JavaScript. Bahasa
pemrograman javascript adalah salah satu bahasa pemrograman yang
paling banyak diminati dalam industri desain aplikasi web. Ada banyak
hal yang jauh lebih mudah untuk membuat situs web menjadi lebih
canggih menggunakan JavaScript. Ada banyak platform pembelajaran
yang menyediakan kursus JavaScript secara gratis. Sebagai contoh
pengantar kursus JavaScript pada Codecademy dan Udacity. Dengan

10.
6
mempelajari keterampilan dalam pengkodean akan membuat desainer
web jauh lebih mudah dalam menciptakan desain aplikasi website.
Gambar 5 Website https://www.codecademy.com/
Gambar 6. Photoshop
Gambar 7 Website https://www.udacity.com/

11.
7
3. Gunakan software pendukung yang tepat
Pada setiap industri TI, pengetahuan terhadap berbagai software
pendukung adalah langkah awal menuju kesuksesan. Akan sulit
menjadi desainer web yang hebat tanpa mengetahui software sebagai
str industri. Akan tetapi karena desain aplikasi web adalah disiplin ilmu
yang luas, desainer web harus terbiasa dengan berbagai aspek desain
seperti:
a. Desain grafis.
Meskipun desain grafis dan desain aplikasi web adalah dua bidang
yang terpisah, desainer web sering kali perlu mendalami desain
grafis untuk menyelesaikan masalah desain tertentu. Oleh karena
itu, sangat penting untuk mempelajari cara menggunakan editor
grafis seperti Adobe Photoshop. Tugas paling umum yang dilakukan
desainer web dalam editor grafis adalah mengedit gambar,
mengubah ukuran atau memotong gambar agar pas dengan ruang
tertentu atau mengompresi gambar sehingga lebih sesuai untuk
tampilan web. Sebagai contoh tutorial yang sangat baik untuk
mempelajari desain menggunakan Photoshop pada
photoshoptutorials.ws
Gambar 8 Website https://www.photoshoptutorials.ws/
b. Pembuatan prototipe.

12.
8
Pembuatan prototipe adalah lsan desain aplikasi web. Ketika
desainer web memiliki keterampilan pembuatan prototipe yang
solid, maka tidak perlu menunggu desain aplikasi web akhir untuk
memvalidasi pemahamannya. Sebaliknya, desainer web dapat
memvalidasi keputusan desain mereka dalam hitungan menit.
Sebagai contoh Mockplus sebuah software yang mudah untuk
pembuatan prototipe. Dengan menggunakan Mockplus maka
desainer dapat membuat prototipe yang sepenuhnya interaktif
hanya dalam hitungan menit.
Gambar 9 Website https://www.mockplus.com/
c. Pengodean.
Seorang desainer web harus memahami cara membuat kode.
Beberapa editor kode yang banyak digunakan seperti Sublime,
Atom hingga Dreamweaver. Desainer web juga harus terbiasa
dengan CMS yang populer. CMS merupakan perangkat lunak
berbasis web yang digunakan untuk membuat dan mengelola
konten web digital. CMS membuat prosedur pengelolaan konten
jauh lebih nyaman bagi pemilik situs. Meskipun ada banyak CMS
berbeda yang tersedia saat ini, ada beberapa CMS yang paling
banyak digunakan diantaranya Wordpress, Joomla, dan Drupal.
4. Pelajari aturan dasar Search Engine Optimization (SEO)

13.
9
Bagian dari menjadi desainer web yang banyak diminati adalah mampu
melakukan lebih dari sekadar desain. Situs web harus disusun
sedemikian rupa sehingga ramah tidak hanya untuk pengguna tetapi
juga untuk bot mesin pencari. SEO adalah proses pengoptimalan situs
yang bertujuan untuk menciptakan visibilitas online yang lebih baik
dari sebuah situs web. Desainer web harus fokus pada promosi "alami"
(atau "organik") dengan meningkatkan kinerja situs,
mengoptimalkannya untuk berbagai platform dan memfokuskan pada
konten sehingga membuatnya relevan dan penting bagi pengguna yang
ditargetkan. SEO dapat membantu meningkatkan peringkat situs
dengan mesin pencari.
5. Bangun kebiasaan menguji desain secara teratur
Desainer harus menguji situs web untuk memastikan halaman dimuat
dengan cepat dan situs dapat diakses baik untuk pengguna desktop
maupun seluler (desain responsif yang banyak digunakan adalah
bootstrap dan materialize). Untuk melakukan kegiatan tersebut saat ini
desainer web dapat menggunakan software seperti Google Pagespeed
Insights.

14.
10
Gambar 10 Website https://developers.google.com/speed/pagespeed/insights/
6. Tingkatkan keterampilan komunikasi
Desain aplikasi web jarang dikerjakan oleh satu orang. Baik itu pada
perusahaan besar maupun kecil, kerja secara tim pasti akan terjadi.
Desainer web harus memiliki keahlian dalam berkomunikasi dengan
klien, pengembang, atau desainer lain. Itulah mengapa desainer web
harus belajar menyajikan karya mereka dengan cara terbaik.
7. Amati tren yang akan datang
Termasuk desainer web, inspirasi sangat penting bagi semua orang
kreatif. Desainer web harus terbiasa dengan tren desain aplikasi web
terbaru untuk memahami permintaan pengunjung web yang selalu
berubah. Berikut ini adalah beberapa sumber sebagai inspirasi dalam
mendesain aplikasi web. Awwwards adalah situs web terkenal untuk
para profesional web. Situs ini memiliki nominasi 'Situs hari ini' di
mana desainer dapat menemukan contoh desain aplikasi web yang
sangat menarik.

15.
11
Gambar 11 https://www.awwwards.com/
8. Bergabunglah dengan komunitas desain aplikasi web
Cara terbaik untuk belajar adalah belajar dari yang terbaik. Sangat
penting untuk tidak hanya bergabung dengan komunitas desain
aplikasi web tetapi juga menjadi anggota aktif. Bergabunglah dengan
komunitas online populer seperti Sitepoint atau Uxmastery.
Gambar 12. Website https://www.sitepoint.com/
9. Belajar dari pendapat orang lain

16.
12
Desain adalah masalah yang sangat subjektif, dan desain aplikasi web
tidak terkecuali. Itulah mengapa ketika desainer membuat sesuatu
yang mereka butuhkan untuk mencari umpan balik dari orang lain
seperti desainer lain, pemangku kepentingan, bahkan pengguna.
10. Fokus pada pembuatan portofolio
Dalam mepekerjakan seorang desainer web, perusahaan atau klien
harus yakin bahwa seorang desainer web memiliki semua
keterampilan yang diperlukan untuk melakukan pekerjaan itu. Itu
sebabnya ketika perusahaan / klien mencari calon desainer mereka
ingin melihat hasil nyata dari pekerjaan mereka, bukan hanya untuk
mendengar pemahaman mendalam tentang teori desain. Cara terbaik
untuk membuktikan keahlian desain aplikasi web adalah dengan
membuat portofolio.
F. Rangkuman
Menjadi desainer web tidak sesulit seperti yang dibayangkan, tetapi
membutuhkan waktu dan tenaga. Banyak pengetahuan serta keterampilan
yang diperlukan dalam merancang tampilan website. Beberapa
pengetahuan dasar yang perlu dikuasai desainer web diantaranya HTML,
CSS, jQuery, JavaScript, desain Responsif, integrasi web API, serta desain
UX dan UI.
G. Latihan
Jawablah pertanyaan berikut ini
1. Bahasa pemrograman yang perlu dikuasai oleh seorang web desainer
KECUALI ......
a. HTML
b. CSS
c. JavaScript
d. jQuery
e. Java

17.
13
2. Berikut ini adalah software desain grafis yang dapat digunakan untuk
membuat desain web KECUALI.....
a. Adobe Photoshop
b. CorelDraw Graphic Suite
c. Adobe Illustrator
d. invision
e. Xara Designer
3. Software yang bisa digunakan untuk desain interface pengguna (UXD)
diantaranya adalah .....
a. Atom
b. Notepad ++
c. Adobe Ilustrator
d. Adobe XD
e. Adobe Acrobat
4. Adobe XD adalah salah satu software yang dapat digunakan untuk
membuat ......
a. Desain grafis website
b. Desain prototype
c. Desain alur kerja sistem
d. Desain kode program
e. Desain proses bisnis
5. Proses pengoptimalan situs yang bertujuan untuk menciptakan
visibilitas online yang lebih baik dari sebuah situs web sehingga
alamat web dapat disajikan pada halaman awal serta urutan teratas
ketika dicari berdasarkan kata kunci tertentu disebut dengan istilah
.....
a. Search Engine Optimization
b. Search Engine
c. Search by keyword
d. Search by name
e. Web page optimation

18.
14
6. Tugas dan tanggungjawab seorang desainer web diantaranya adalah
........
a. Melakukan pengujian situs web
b. Bekerja sama dengan pengembang back-end untuk memastikan
logika web dan aplikasi terintegrasi dengan benar
c. Memastikan fungsi dan stabilitas situs web di seluruh perangkat
seperti desktop, seluler, tablet
d. Bekerja dengan tim pemasaran dan riset untuk memasukkan
elemen merek dan temuan riset pasar yang relevan ke dalam situs
web
e. Merancang proses bisnis website
7. Berikut ini adalah tempat mempelajari tutorial dasar dalam bentuk
kode-kode yang dapat digunakan untuk membuat desain web yang
menarik diantaranya KECUALI .........
a. W3schools
b. Udacity
c. Udemi
d. CodeIgniter
e. Codecademi
8. Berikut ini adalah beberapa komunitas web desain sebagai rujukan
dalam memperoleh isnpirasi desain web adalah KECUALI ....
a. Awwwards dan Dribbble,
b. Behance dan BOS
c. Behance dan Dribbble
d. Awwwards dan Behance
e. Behance dan Awwwards
9. Berikut ini adalah software yang untuk membuat desain prototype
KECUALI ....
a. Balsamiq Mockup
b. Justinmind
c. Adobe XD

19.
15
d. InVision
e. BlueFish
10. Berikut ini adalah yang termasuk tugas dan tanggung jawab Web
Desainer KECUALI ....
a. Bekerja sama dengan pengembang back-end untuk memastikan
logika web dan aplikasi terintegrasi dengan benar
b. Memastikan fungsi dan stabilitas situs web di seluruh perangkat
seperti desktop, seluler, tablet
c. Menguji komplesitas program terutama pada bagian backend
d. Bekerja dengan tim pemasaran dan riset untuk memasukkan
elemen merek dan temuan riset pasar yang relevan ke dalam situs
web
e. Memberikan dukungan internal dan layanan pelanggan eksternal
selama proses pembuatan dan peluncuran situs web
H. Tugas
Dalam rangka memperluas wawasan tentang desain aplikasi web silahkan
carilah beberapa software pendukung lainnya yang dapat digunakan untuk
mempercepat dalam mengerjakan proyek desain aplikasi web. Sebutkan
nama software, platform yang digunakan (desktop atau web cloud), fungsi
software serta dimana (alamat website) software tersebut didapatkan!

20.
Biodata Penulis
Erliyan Redy Susanto
Menyelesaikan pendidikan sarjana di Universitas Ahmad
Dahlan Yogyakarta, pendidikan Master di IPB.
Berpengalaman dalam berbagai proyek aplikasi berbasis
web di perusahaan swasta dan pemerintah. Saat ini aktif
sebagai dosen tetap di Fakultas Teknik dan Ilmu Komputer
Universitas Teknokrat Indonesia.
Yusra Fernando
Menyelesaikan pendidikan sarjana di STMIK Teknokrat,
pendidikan Master di IPB. Saat ini menjabat wakil dekan
Fakultas Ekonomi Universitas Teknokrat Indonesia.
Berpengalaman 12 tahun sebagai dosen yang mengampu
mata kuliah bidang pemrograman web.
Ade Surahman
Menyelesaikan pendidikan sarjana di STMIK Teknokrat,
pendidikan Master di Universitas Budi Luhur. Saat ini
menjadi dosen tetap Fakultas Teknik dan Ilmu Komputer
Universitas Teknokrat Indonesia. Berpengalaman lebih
dari 10 tahun sebagai dosen yang mengampu mata kuliah
bidang pemrograman web serta menangani berbagai
proyek berbasis web di lembaga swasta maupun
pemerintahan.

21.
231
Buku Ajar Desain Aplikasi Web merupakan salah satu referensi yang dapat digunakan untuk
matakuliah Desain Web baik teori maupun praktik. Buku ini membahas beberapa bahasa
pemrograman yang digunakan dalam pengembangan aplikasi berbasis web seperti HTML, CSS,
Javascript dan PHP. Selain itu juga dibahas beberapa tools desain web yang populer saat ini
seperti bootsrap dan materialize. Semoga dengan buku ini dapat memudahkan mahasiswa dalam
memahami materi matakuliah desain web.
Menyelesaikan pendidikan sarjana di Universitas Ahmad Dahlan
Yogyakarta, pendidikan Master di IPB. Berpengalaman dalam berbagai
proyek aplikasi berbasis web di perusahaan swasta dan pemerintah. Saat
ini aktif sebagai dosen tetap di Fakultas Teknik dan Ilmu Komputer
Universitas Teknokrat Indonesia.
Menyelesaikan pendidikan sarjana di STMIK Teknokrat, pendidikan
Master di IPB. Saat ini menjabat sebagai wakil dekan Fakultas Ekonomi
Universitas Teknokrat Indonesia. Berpengalaman 12 tahun sebagai dosen
yang mengampu mata kuliah bidang pemrograman web.
Menyelesaikan pendidikan sarjana di STMIK Teknokrat, pendidikan
Master di Universitas Budi Luhur. Saat ini menjadi dosen tetap Fakultas
Teknik dan Ilmu Komputer Universitas Teknokrat Indonesia.
Berpengalaman lebih dari 10 tahun sebagai dosen yang mengampu mata
kuliah bidang pemrograman web serta menangani berbagai proyek
berbasis web di lembaga swasta maupun pemerintahan.