MEMBUAT UI DESAIN WEB HOT BURGERS

Diajukan untuk memenuhi persyaratan

Pelaksanaan Praktek Kerja Lapangan (PKL) Mandiri

Di Susun

O
L
E
H

TAUFIK HAKIKI

KELAS : XII
NISN : 0030816939
JURUSAN : REKAYASA PERANGKAT LUNAK

SMK NEGERI 2 BENGKALIS

TAHUN PELAJARAN 2020/2021
 LEMBAR PENGESAHAN
MEMBUAT UI DESAIN WEB HOT BURGERS
O
L
E
H

TAUFIK HAKIKI
KELAS : XII
NISN : 0030816939
JURUSAN : REKAYASA PERANGKAT LUNAK

Kepala Program Keahlian TKI Pembimbing Laporan

SMK Negeri 2 Bengkalis

M. AMRIZAL, S.Kom IRAWAN, SE

NIP. 19820917 200604 1 004 NUPTK. 4349 7596 6120 0033

Mengetahui,
Kepala SMK Negeri 2 Bengkalis

Dra. MARDIANIS, M.Pd

NIP. 19611226 198601 2 001

i
 KATA PENGANTAR

Alhamdulillah kami panjatkan puji syukur kami ke hadirat Allah SWT.

Sehingga penulis telah menyelesaikan laporan ini dengan tepat waktu.

Salah satu tujuan penulis dalam menulis laporan adalah sebagai dokumentasi.
Laporan yang penulis buat ini berdasarkan data-data yang valid yang telah
dikumpulkan dalam berbagai metode.

Penulis menyampaikan terima kasih pada beberapa pihak yang ikut

mendukung proses pembuatan laporan ini hingga selesai. Yaitu:

1.Orang Tua penulis sebagai pendukung utama segala kegiatan yang penulis lakukan.

2.Ibu Dra. MARDIANIS, M.Pd selaku Kepala Sekolah SMKN 2 Bengkalis yang
sudah mengizinkan penulis melakukan kunjungan industri.

3.Bapak Ibu Guru SMKN 2 yang telah membimbing penulis selama pandemi

4.Pak M.AMRIZAL, S.kom selaku kepala program studi Teknik Komputer dan
Informatika

5.Pak IRWAN, SE selaku pembimbing

Penulis menyadari atas ketidak sempurnaan penyusunan laporan ini. Namun

penulis tetap berharap laporan ini akan memberikan manfaat bagi para pembaca,
penulis juga mengharapkan adanya masukan berupa kritik atau saran yang berguna.
Terima kasih.

Bengkalis, 10 Desember 2020

Penulis

TAUFIK HAKIKI

ii
 DAFTAR ISI

HALAMAN JUDUL
HALAMAN PENGESAHAN ......................................................................................i
KATA PENGANTAR .................................................................................................ii
DAFTAR ISI ..............................................................................................................iii
BAB I PENDAHULUAN
1.1 Latar Belakang......................................................................................1
1.2 Tujuan...................................................................................................1
1.3 Manfaat ................................................................................................1
1.4 Alat dan bahan .....................................................................................1
BAB II DASAR TEORI
2.1Web Designer ........................................................................................2
BAB III PEMBAHASAN
3.1 Apa itu User Interface? ........................................................................4
3.2 Membuat UI desain web hot burgers ...................................................5
3.2.1 Persiapan .....................................................................................5
3.2.2 Membuat desain header ..............................................................5
3.2.3 Membuat desain konten/isi..........................................................8
3.2.4 Membuat desain footer .............................................................12
BAB IV PENUTUP
4.1 Kesimpulan ........................................................................................13
4.2 Saran ..................................................................................................13

iii
 BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

PerkembanganInteraksi Manusia Dan Komputer contohnya dalam

bidang teknologi informasi dan komunikasiyangpada saat ini telah membawa
manfaat yangsangat penting bagi kemajuan kehidupan manusia. Berbagai
macam kegiatan manusia yangsebelumnya dikerjakan oleh mereka, kini
digantikan oleh perangkat mesin otomatis.Kedudukan manusia juga seolah-
olah tergeser dengan adanya system komputer yang semakincanggih yang
dapat menggeser kemamampuan otak manusia dalam berbagai bidang ilmu
danaktifitas yang dilakukan manusia. Perkembangan teknologi informasi dan
komunikasi sudah benar-benar dapat dirasakan manfaatnya dalam kehidupan
manusia serta memberikan kesejahteraan di dalam kehidupan masyarakat.

1.2 TUJUAN

Tujuan dari penggunaan user interface ini adalah untuk membuat

interaksi pengguna sesederhana dan seefisien mungkin.

1.3 MANFAAT

User Interface pada sebuah produk baik aplikasi maupun website

menjadi sangat penting karena dengan UI pengguna bisa berinteraksi dengan
baik pada produk tersebut.

1.4 ALAT DAN BAHAN

-Laptop - Software Adobe Xd

1
 BAB II

DASAR TEORI

2.1 Web Desaigner

Sering kali website yang eksepsional seperti itu dibuat tidak hanya
oleh seorang web developer saja melainkan satu tim dengan spesialisasi
masing-masing. Dalam tim tersebut biasanya terdiri dari 3 profesi yaitu
UI/UX designer, front-end developer, dan back-end developer. Apa saja
perbedaan pada setiap profesi tersebut?

UI/UX DESAIN

Kita tidak akan banyak membahas tentang UI/UX designer karena

profesi ini lebih ke arah desain. Seperti halnya arsitek, UI/UX designer sangat
berperan dalam menentukan estetika dan pengalaman pengguna dalam sebuah
web yang Anda kunjungi. Peran UI/UX designer hanya sebatas membuat
wireframe (sketsa layout untuk sebuah web) dan tentunya web design itu
sendiri mulai dari komposisi letak, jenis dan ukuran font, sampai warna-warna
yang digunakan. Walaupun begitu biasanya UI/UX designer memahami
bagaimana HTML, CSS, dan JavaScript bekerja sehingga tidak ngawur dalam
mendesain website.

Front-End Developer

Tugas front end developer adalah memastikan konten yang

ditampilkan di browser pengguna berjalan sesuai desain

2
3

disepakati. Header yang menggeser ke samping atau yang disebut

slider, ikon menu yang berubah saat di-scroll, serta animasi-animasi lucu dan
menggemaskan yang membuat kita ingin mencubit layar monitor adalah fitur
yang ditulis dengan kode pemrograman oleh sang front-end developer. 

 
Back-End Developer

Back end developer bertanggung jawab memprogram server agar

mengirimkan dokumen (dalam hal ini HTML, CSS, dan kode JavaScript) ke
browser pengguna setiap kali pengguna memintanya melalui http request.
PHP, JavaScript, Python, dan Ruby adalah bahasa pemrograman yang
biasanya dipakai di server. Back end developer juga akan sering berkutat
dengan database dan manajemen konten di suatu website.
 BAB III

PEMBAHASAN

3.2 Apa itu User Interface?

User Interface adalah tampilan visual sebuah produk yang

menjembatani sistem dengan pengguna (user). Tampilan UI dapat berupa
bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara
sederhana, UI adalah bagaimana tampilan sebuah produk dilihat oleh
pengguna. 

Peran UI designer hanya sebatas membuat wireframe (sketsa layout

untuk sebuah web) dan tentunya web design itu sendiri mulai dari komposisi
letak, jenis dan ukuran font, sampai warna-warna yang digunakan.

Tampilan UI ini diterapkan pada sistem operasi, aplikasi, website,

maupun blog.Jadi, tampilan UI dirancang dengan desain beberapa aspek,
mulai dari layout, gambar logo, pemilihan warna yang sesuai, typography
yang mudah dibaca dan hal lainnya untuk mempercantik tampilan. Nah,
semua elemen yang memperindah tampilan tersebut termasuk dalam elemen
UI. 

Tidak hanya UI pada aplikasi, tampilan UI pada sebuah halaman

website harus menarik.

4
 5

3.3 Membuat UI Desain Web Hot Burger

3.3.1 Persiapan

Disini saya menggunakan software Adobe Xd, untuk bahan seperti

gambar,logo, Icon dan tools kalian bias cari digoogle
Ini adalah bahan yang sudah saya kumpulkan :

3.3.2 Membuat Desain Header

Header adalah bagian atas dari sebuah website. Biasanya berisi nama
situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas
utama dari sebuah situs.

Langkah pertama : Membuat Artboard

 6

Langkah kedua : Tambahkan Gambar

Langkah ketiga : Tambahkan Logo

 7

Langkah Keempat : Buat Slider Banner Dan Menu Bar

 8

3.3.3 Membuat Desain Konten/Isi

Konten 1

Dikonten 1ada sebuah text untuk judul kontennya yaitu “Mau

Makan?”. Setelah itu buat 5 content box.

Konten 2

Seperti promosi untuk menambah daya tarik pembeli, saya

menambahkan background berwarna orange.
 9

Konten 3

Dikonten 3 ada sebuah text untuk judul kontennya yaitu “Resep Paling
Populer?”. Setelah itu buat 6 kotak berwarna putih untuk keperluan content
box yang didalamnya ada heading, gambar,icon dan text. Di bagian bawah
tambah saya tambahkan tools tampilkan menu.
 10

Konten 4

Seperti promosi untuk menambah daya tarik pembeli.

Konten 5

Client Testionials untuk lebih meyakinkan bahwa menu yang disajikan

enak.
 11

Konten 6

Saya menambahkan background berwarna orange dan ada 4 kotak

berwarna putih untuk keperluan content box yang didalamnya ada
heading,icon dan text.

Konten 7

Saya menambahkan alamat lengkap dan memasukkan beberapa icon,

disampingnya terdapat lokasi tempat.
 12

3.3.4 Membuat Desain Footer

Saya hanya membuat footer yang sederhana seperti dibawah ini.

Hanya ada logo sosial media, beberapa gambar dan tulisan copyright.
 BAB IV

PENUTUP

4.1 KESIMPULAN

Setelah saya melakukan PKL (Peraktek Kerja Lapangan) mandiri

dirumah. Saya mendapatkan banyak manfaat, baik itu pengalaman,
pengetahuan, dan semua yang terkait dalam dunia kerja. Sehingga saya dapat
menambah wawasan yang saya dapatkan selama ini, karena hanya dengan
praktek saya bisa mengetahui seberapa jauh kemampuan yang sudah saya
dapat di sekolah. Sehingga suatu saat nanti jika saya memasuki dunia kerja
tidak akan ragu melakukannya, karena sebelumnya sudah mempunyai
pengalaman yang baik.

4.2 SARAN

Dari hasil selama saya melakukan kegiatan PKL, saya memberikan

saran agar PKL dapat dilaksanakan dengan lancar dan baik
kedepannya serta saya berharap :

Kepada para peserta PKL agar mempersiapkan diri dengan menguasai

pelajaran yang akan diterapkan dalam industri, agar memudahkan dalam
melakukan praktek kerja lapangan di perusahaan.

Saya juga ingin memberikan saran pada pihak perusahaan terutama di

Plant Administrasi agar tidak perlu sungkan terhadap anak PKL, usahakan
berikan tugas asalkan dengan bimbingan terlebih dahulu sebelum tugas
dilaksanakan, agar hasilnya menjadi efektif dan efisien.

13