MODUL PEMBELAJARAN DESAIN MEDIA INTERAKTIF
(DKV21468)
Materi Media Interaktif Berbasis Web Perancangan Halaman Website
Disusun Oleh
Dika Tondo Widakdo, S.Kom, M.TI
Institut Informatika dan Bisnis Darmajaya
2021
Kata Pengantar
Puji syukur kita haturkan pada Tuhan Yang Maha Esa bahwa kini telah tersusun Modul Praktikum Mata Kuliah Desain Media Interaktif (DKV21468). Pada capaian akhir mata kuliah ini Mahasiwa mampu memahami dan mengerti proses mendesain sebuah halaman website. Tujuan diterbitkannya modul praktikum ini adalah sebagai panduan dalam :
1. Pengelolaan kegiatan praktikum bagi mahasiswa
2. Melaksanakan proses praktik sesuai bidang keilmuan desain komunikasi visual 3. Melaksanakan proses pembelajaran kasus, analisis praktis dan analisis profesional
dalam praktek desain komunikasi visual
4. Bagian dari proses belajar mengajar dan praktikum pada program pendidikan S1 Desain Komunikasi Visual Harapan kami semoga modul praktikum ini dapat bermanfaat sesuai tujuan dan sasaran pendidikan.
Bandar Lampung, 15 Maret 2021
Institut Informatika dan Bisnis Darmajaya
PenyusunDika Tondo Widakdo, S.Kom, M.TI
MEDIA INTERAKTIF BERBASIS WEB /PERANCANGAN WEBSITE
A. Tujuan Intruksional
Mahasiswa memahami mata kuliah Desain Media Interaktif (DKV21468), yaitu mampu memahami dan mengerti proses mendesain sebuah halaman website dengan cara:
1. Mampu menjelaskan proses perancangan sebuah karya desain website berbasis informasi sesuai dengan kebutuhan sarana informasi dan komunikasi.
2. Mampu merinci proses langkah-langkah membuat perancangan sebuah karya desain halaman website yang akan diaplikasikan untuk sarana informasi dan komunikasi
3. Mampu menghasilkan kwalitas perancangan sebuah karya halaman website yang akan diaplikasikan untuk sarana informasi dan komunikasi.
4. Mampu mewujudkan dalam bentuk perancangan sebuah karya halaman website yang akan diaplikasikan untuk sarana informasi dan komunikasi.
B. Sasaran Pembelajaran
Sasaran pembelajaran praktikum mata kuliah Desain Media Interaktif adalah mahasiswa semester 5 Prodi Desain Komunikasi Visual Fakultas Ilmu Komputer Institut Informatika dan Bisnis Darmajaya.
C. Sumber Pembelajaran
Sumber pembelajaran yang dijadikan rujukan dalam proses pembelajaran adalah sebagai berikut :
1. Bauer, Peter, Photoshop® CS2 For Dummies, Wiley Publishing, Inc., Indianapolis,Indiana,2005
2. Campbell, Marc, Dreamweaver 8 Design and Construction, O'Reilly, 2006
3. Harris, Andy, PHP/MySQL Programming for the Absolute Beginner, Premier Press : 2003
4. Robbins Jennifer, Niederst Learning Web Design, Third Edition, A Beginner’s Guide to(X)HTML, Style Sheets, and Web Graphics, O’Reilly Media, Inc, USA, 2007
5. Wagner, Richard and Mansfield, Richard, Creating Web Pages All-in-One Desk ReferenceFor Dummies®, 3rd Edition , Wiley Publishing, Inc., Indianapolis, Indiana, 2007
D. Sumber Daya
Adapun sumber daya yang menunjang perkuliahan ini adalah Dosen pengampu matakuliah sebanyak 1 orang dan sarana serta prasana seperti laboratorium komputer.
E. Ruang Lingkup
Ruang lingkup praktikum mata kuliah Desain Media Interaktif adalah perancangan sebuah karya desain halaman website yang akan diaplikasikan untuk sarana komunikasi dan informasi penjelasan tentang :
1. Mendeskripsikan pengertian dan teori website.
2. Mendeskripsikan sejarah Website.
3. Mendeskripsikan fungsi dari website.
4. Mendeskripsikan unsur – unsur dari website.
5. Mendeskripsikan jenis – jenis website.
6. Mempraktekkan perancangan desain website dengan aplikasi grafis.
F. Alat dan Kelengkapan.
Untuk alat dan kelengkapan pada mata kuliah ini adalah LCD, laptop, white board, kertas A3, pensil, pensil warna, spidol, cat air, penghapus, foto dan asistensi tugas.
G. Pengendalian dan Pemantauan
Untuk pengendalian dan pemantauan pada mata kuliah ini adalah :
1. Rencana Pembelajaran Semester (RPS) yang telah disusun oleh dosen pengampu.
2. Absen mahasiswa yang telah ditanda tangani dosen pengampu.
3. Format asistensi tugas yang telah ditanda tangani dosen pengampu setiap adanya asistensi tugas diberi nama jelas peserta didik yang mengikuti perkulihaan ini.
4. Pedoman penilaian pencapaian kompetensi.
H. Pelaksanaan
Pada mata kuliah Desain Media Interaktif dengan topik materi perancangan sebuah halaman website yang untuk sarana komunikasi dan informasi. Ada pun yang harus disiapkan, antara lain:
1. Menyiapkan meja, kursi, pensil seri, penghapus, dan white board untuk praktikum.
2. Menyiapkan alat pendukung seperti komputer/laptop bagi masing-masing mahasiswa selama masa perkuliahan.
3. Material atau bahan dalam membuat sketsa desain website.
4. Menyiapkan formulir asistensi selama berlangsungnya perkuliahan sebagai bukti asistensi tugas yang dilakukan oleh peserta didik.
Gambar 1.1 Formulir Asistensi Tugas
KEMAMPUAN AKHIR YANG DIHARAPKAN PERTEMUAN 1
Mahasiswa mampu mengerti dan memahami pengetahuan mengenai desain halaman website untuk sarana komunikasi dan informasi.
EVALUASI PEMBELAJARAN/PENILAIAN PERTEMUAN 1
SEKOR > 77-90 ( A / A-)
Menguraikan pengetahuan mengenai desain web untuk sarana komunikasi dan informasi.
SEKOR > 65 (B- / B / B+ )
Mendekati dalam menguraikan pengetahuan mengenai desain web untuk sarana komunikasi dan informasi.
SEKOR > 60 (C / C+ )
Kurang detail dalam menguraikan pengetahuan mengenai desain web untuk sarana komunikasi dan informasi.
SEKOR > 45 (D)
Tidak detail dalam menguraikan pengetahuan mengenai desain web untuk sarana sebuah komunikasi dan informasi.
SEKOR < 45 ( E )
Tidak mampu menguraikan pengetahuan mengenai desain web untuk sarana komunikasi dan informasi.
I. Materi
1. Pengertian Website
Perkembangan internet dari tahun ke tahun mengalami peningkatan dari sisi pengguna aktifnya. Setiap orang tentu mengakses internet dengan menggunakan berbagai perangkat, mulai dari desktop, mobile, hingga tablet. Dan website adalah salah satu media yang paling sering untuk diakses dan digunakan dalam mencari berbagai informasi dan sarana komunikasi.
Dari segi defenitif , website adalah kumpulan halaman dalam suatu domain yang memuat tentang berbagai informasi agar dapat dibaca dan dilihat oleh pengguna internet melalui sebuah mesin pencari. Informasi yang dapat dimuat dalam sebuah website umumnya berisi mengenai konten gambar, ilustrasi, video, dan teks untuk berbagai macam kepentingan.
Biasanya untuk tampilan awal sebuah website dapat diakses melalui halaman utama (homepage) menggunakan browser dengan menuliskan URL yang tepat.
Di dalam sebuah homepage, juga memuat beberapa halaman web turunan yang saling terhubung satu dengan yang lain.
2. Sejarah Website
Sejarah website pertama kali dimulai dari seorang ilmuwan yang berasal dari Inggris, bernama Tim Berners-Lee. Orang tua dari Berners juga merupakan ilmuwan komputer pada era awal dunia komputasi. Tujuan awal dari Tim Berners membuat sebuah website adalah supaya lebih memudahkan para peneliti di tempat kerjanya untuk mendapatkan dan bertukar informasi. Kemudian, pada tanggal 30 April 1993, secara resmi CERN yang merupakan laboratorium fisika di Swiss mengumumkan tentang perilisan website secara gratis. Sebelum itu pada tahun 1990, Tim Berners-Lee juga menuliskan tentang tiga teknologi dasar web, antara lain:
- HTML (HyperText Markup Language)
Merupakan bahasa markup atau format untuk halaman web.
- URI (Uniform Resource Identifier)
Merupakan sebuah alamat unik untuk membuka halaman situs. Fungsinya adalah mengidentifikasi setiap sumber daya yang ada pada web. Saat ini sering disebut dengan URL (Uniform Resource Locator).
- HTTP (HyperText Transfer Protocol)
Teknologi ini memungkinkan seseorang untuk mengambil kembali sumber daya yang terkoneksi dengan semua situs web.
3. Fungsi Website.
Terdapat beberapa fungsi website yang memiliki keunggulan dan kualitas yang berbeda sesuai dengan target pemasaran maupun bisnis. Berikut ini merupakan beberapa fungsi yang dikategorikan sesuai dengan tujuan bisnis :
- Sarana Informasi
Pertama, fungsi website adalah sebagai sarana untuk menyampaikan informasi terbaru dan menarik untuk dibaca oleh customer atau pelanggan anda. Pada dasarnya, website juga dapat dijadikan sebagai sarana edukasi, pembelajaran, tutorial, tips & trik, dan masih banyak lagi.
Contoh website sebagai sarana informasi adalah situs pencarian berita, website company profile, dan lainnya. Untuk jenis kontennya, dapat berupa video, teks, dan gambar.
- Sebagai blog
Fungsi website yang kedua ini untuk membuat blog, sehingga tujuan utamanya adalah untuk mendapatkan trafik pengunjung. Serta, mengoptimalkan blog yang telah terpublikasi. Selain itu juga dapat berfungsi sebagai sarana untuk meningkatkan brand perusahaan agar mendatangkan customer lebih banyak lagi.
- Sarana transaksi jual beli toko online / ecommerce
Dan fungsi terakhir sebagai media untuk menampung proses transaksi jual beli online atau sering disebut dengan e-commerce. Dengan menggunakan website ecommerce, mampu untuk mendatangkan lebih banyak konsumen untuk
membeli produk barang atau jasa melalui website yang telah disediakan. Jadi pada dasarnya, e-commerce disini hanya sebatas perantara saja. Contoh dari website yang menerapkan fungsi ini adalah Tokopedia, Bukalapak, Amazon, Shopee, dan website yang lainnya.
4. Unsur – Unsur Website
Setelah mengetahui pengertian, sejarah dan fungsi website, selanjutnya masuk pada pembahasan mengenai unsur – unsur dari website itu sendiri. Berikut merupakan beberapa informasi terkait dengan unsur pembentuk sebuah website : - Domain
Komponen pertama adalah domain, dimana website dapat dianalogikan sebagai produk. Maka website adalah merk atau brand-nya. Penulisan domain yang menarik dapat membuat seseorang masuk ke dalam situs anda. Selain itu juga anda harus membuat domain yang tidak terlalu panjang dan mudah untuk diingat. Domain yang baik juga akan berpengaruh pada peningkatan ranking sistem pada mesin pencarian.
- Hosting
Komponen atau unsur yang kedua adalah hosting, yang mana memiliki peran penting dalam menyimpan semua database (penyimpanan data). Informasi dalam database dapat berupa teks, gambar, ilustrasi, video, dan script. Saat ini banyak sekali jasa terkait layanan paket hosting sesuai dengan kebutuhan bisnis dan produk anda.
- Konten
Dan yang terakhir adalah konten, dimana fungsi dari konten sangatlah krusial.
Karena apabila website tidak memiliki sebuah konten, maka dapat dikatakan bahwa situs tersebut tidak memiliki tujuan yang jelas. Contoh website yang menerapkan konten adalah media sosial, company profile, situs jual beli online, dan masih banyak lagi yang lain.
5. Jenis – Jenis Website
Pada pembahasan kali ini, kami akan memberikan beberapa informasi dan penjelasan mengenai jenis – jenis website. Berikut merupakan tiga jenis website berdasarkan pengembangannya yaitu :
- Website Statis
Website statis merupakan website yang memiliki tampilan yang tetap dan tidak
banyak mengalami perubahan. Biasanya untuk perubahannya sendiri hanya terletak pada tampilan desain halaman web saja, terkait konten tidak mengalami perubahan yang besar. Contoh dari web statis yaitu website yang menampilkan profil perusahaan atau organisasi.
- Website Dinamis
Website dinamis adalah website yang mengalami perubahan secara terus menerus sesuai dengan kebutuhan dan relevansi dari bisnis dan perkembangan zaman. Website dinamis memiliki tampilan yang lebih interaktif, dan menyediakan fitur kolom komentar, dan chatting. Contoh dari situs web ini adalah blog, situs berita online, e-commerce, sistem informasi, dan lain sebagainya.
- Website Interaktif
Website interaktif adalah website yang dirancang untuk dapat saling
berinteraksi antar penggunanya. Jenis situs ini biasanya tergolong ke dalam platform media sosial seperti Facebook, Twitter, Instagram, dan platform social media yang lain.
6. Langkah – Langkah Membuat Desain Tampilan Website Dengan Adobe Ilustrator.
Berikut cara membuat desain web dengan aplikasi grafis Adobe Ilustrator dengan mengikuti trend desain kekinian :
1. Pertama membuat ukuran artboard-nya dengan cara CTRL+N lalu ketik Width dan Height sama seperti yang dibawah.
2. Masukkan gambar/tema tourism dengan cara drag & drop
.
3. Karena gambarnya terlalu terang dan kita ingin memasukkan tulisan di gambar itu, maka itu kita akan menimpa gambar tersebut dengan shape yang agak gelap.
4. Sekarang tema/gambar kita di header ini sudah gelap kan, jadi kita bisa memasukkan tulisan agar bisa lebih terbaca oleh visitor.
Cara membuat kotak Contact Us:
Buat Shape berbentuk kotak dan berwarna biru lalu timpa dengan tulisan
“Contact Us”
Cara Membuat kotak Learn More:
Buat shape berbentuk kotak lalu setting seperti ini dan atur stroke nya menjadi 2pt
5. Selanjutnya kita akan membuat bagian kontennya. Buat shape lalu klik shape tersebut dan pilih Effect ->Stylize ->Drop Shadow.
Hasilnya :
6. Langkah terakhir adalah membuat footer
