TA : Pembuatan Website Program Studi DIV Komputer Multimedia STMIK Stikom Surabaya Dengan Teknik Desain Website Responsif.

PEMBUATAN WEBSITE PROGRAM STUDI DIV KOMPUTER MULTIMEDIA STMIK STIKOM SURABAYA DENGAN TEKNIK

DESAIN WEBSITE RESPONSIF

TUGAS AKHIR

Nama : Made Caesario Aditya Wirawan NIM : 08.51016.0021

Program : DIV (Diploma Empat) Jurusan : Komputer Multimedia

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & KOMPUTER SURABAYA

viii

DENGAN TEKNIK DESAIN WEBSITE RESPONSIF

Made Caesario Aditya Wirawan (2008)1 Karsam, MA., Ph.D. dosen pembimbing 1

Sutikno, S.Kom. dosen pembimbing 2

1

Program DIV Komputer Multimedia

Penemu situs web adalah Sir Timothy John Tim Berners-Lee, sedangkan situs web yang tersambung dengan jaringan pertamakali muncul pada tahun 1991. Maksud dari Tim ketika merancang situs web adalah untuk memudahkan tukar menukar dan memperbarui informasi pada sesama peneliti di tempat ia bekerja. Pada tanggal 30 April 1993, CERN (tempat dimana Tim bekerja) mengumumkan bahwa WWW dapat digunakan secara gratis oleh publik (http://dotcomcell.com). Menurut hasil studi bertajuk "Getting Mobile Right" yang diprakarsai oleh Yahoo dan Mindshare, saat ini ada sekitar 41,3 juta pengguna smartphone dan 6 juta pengguna tablet di Indonesia (Liputan6.com, 28 Oktober 2013). Dengan hasil survei tersebut maka Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya menggunakan teknik Responsive Web Design (RWD).

Istilah Responsive Web Design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart (www.alistapart.com). Dengan Teknik Responsive Web Design ini website dapat diakses melalui berbagai perangkat.

Dalam penelitian ini akan membahas bagaimana membuat website dengan teknik desain website responsif menggunakan HTML5 dan CSS3. Tujuan pembuatan website ini agar dapat diwujudkan untuk memaksimalkan antarmuka website pada berbagai macam perangkat.

Metode penelitian yang digunakan adalah SDLC (System Development life

Cycle) dengan tahapan yang terdiri dari: rencana, analisa, desain, implementasi,

uji coba, penyebaran, dan pengelolaan.

Hasil dari pembuatan website dengan teknik desain website responsif ini adalah nantinya website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dapat berjalan dengan baik menggunakan teknik tersebut. Serta antarmuka website dapat ditampilkan pada personal komputer, komputer tablet, dan smartphone.

xi

KATA PENGANTAR ... ix

DAFTAR ISI ... xi

DAFTAR GAMBAR ... xv

DAFTAR TABEL... xviii

DAFTAR LAMPIRAN ... xix

BAB I PENDAHULUAN 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 3

1.3 Pembatasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 4

BAB II LANDASAN TEORI 2.1 Profile Prodi DIV Komputer Multimedia ... 5

2.2 Visi ... 6

2.3 Misi ... 6

2.4 Tujuan ... 7

2.5 Lulusan Dipastikan ... 8

2.6 Mata Kuliah Pokok ... 8

2.7 Profesi Kerja ... 8

xii

2.12 Situs Web Dinamis ... 12

2.13 Fungsi Website ... 13

2.13.1 Media Promosi ... 13

2.13.2 Media Pemasaran ... 14

2.13.3 Media Informasi ... 14

2.13.4 Media Pendidikan ... 14

2.13.5 Media Komunikasi ... 14

2.14 Cara Sebuah Website Bekerja ... 15

2.15 Program yang Digunakan ... 15

2.15.1 HTML5 ... 16

2.15.2 Java Script ... 17

2.15.3 Jquery ... 18

2.15.4 CSS (Cascading Style Sheets) 3 ... 19

2.16 Perangkat untuk Mengakses Website ... 20

2.16.1 Personal Komputer (PC) dan Laptop ... 21

2.16.2 Komputer Tablet (PC Tablet) ... 23

2.16.3 Ponsel Pintar (Smartphone) ... 25

2.17 Desain Website Responsif ... 27

2.18 Web Typography ... 29

xiii

3.2 Teknik Pengumpulan Data ... 35

3.3 Teknik Analisis Data ... 46

3.4 STP (Segmenting, Targeting, Positioning) ... 46

3.4.1 Segmenting ... 46

3.4.2 Targeting ... 47

3.4.3 Positioning ... 48

3.5 Keyword ... 48

3.6 Tahap Perancangan Karya ... 50

3.6.1 Pra Produksi ... 51

3.6.2 Produksi ... 58

3.4.3 Pasca Produksi ... 68

3.7 Jadwal ... 69

3.8 Anggaran ... 70

3.9 Publikasi ... 71

BAB IV DESAIN DAN IMPLEMENTASI 4.1 Implementasi Karya ... 75

4.2 Publikasi Karya ... 88

4.2.1 Poster A1 ... 89

4.2.2 Label CD ... 90

xiv DAFTAR PUSTAKA

DAFTAR RIWAYAT HIDUP LAMPIRAN

xv

Gambar 2.1 Logo Prodi DIV Komputer Multimedia ... 5

Gambar 2.2 Adobe Certified ... 8

Gambar 2.3 Logo HTML 5 ... 16

Gambar 2.4 Logo Java Script ... 17

Gambar 2.5 Logo Jquery ... 18

Gambar 2.6 Logo CSS (Cascading Style Sheets) 3... 19

Gambar 2.7 Contoh Perangakat PC dan Laptop ... 21

Gambar 2.8 Contoh Perangakat PC Tablet ... 23

Gambar 2.9 Contoh Perangakat Ponsel Pintar (Smartphone) ... 25

Gambar 2.10 Web dengan Teknik Desain Web Responsif ... 27

Gambar 2.11 Anatomy Font Serif dan Sans-serif ... 30

Gambar 2.12 Font Serif dan Sans-serif ... 31

Gambar 2.13 Hirarki Tipografi ... 32

Gambar 3.1 Halaman website UC San Diego ... 38

Gambar 3.2 Halaman website Moore College Art & Design ... 39

Gambar 3.3 Halaman website University of Utah ... 40

Gambar 3.4 Halaman website Stanford Arts... 41

Gambar 3.5 Halaman website Institut Teknologi Bandung ... 43

Gambar 3.6 Bagan alur perancangan karya ... 50

xvi

Gambar 3.11 Tampilan aplikasi Adobe Kuler untuk memilih

kombinasi warna ... 57

Gambar 3.12 Lima kombinasi warna ... 57

Gambar 3.13 Layout halaman dibagi menjadi tiga bagian ... 59

Gambar 3.14 Detail layout pada setiap bagian (header, body, dan footer) ... 60

Gambar 3.15 Wireframing desain layout Dashboard (index.html) ... 61

Gambar 3.16 Wireframing desain layout halaman Dosen dan Staf ... 62

Gambar 3.17 Wireframing desain layout halaman Fasilitas ... 64

Gambar 3.18 Wireframing desain layout halaman Canvas ... 65

Gambar 3.19 Wireframing desain layout halaman Gallery (thumbnail gambar) ... 66

Gambar 3.20 Wireframing desain layout halaman Blog ... 68

Gambar 3.21 Sketsa Poster ... 72

Gambar 3.22 Sketsa label CD ... 73

Gambar 3.23 Sketsa cover kotak CD (depan dan belakang) ... 74

Gambar 4.1 Tampilan Dashboard ... 76

Gambar 4.2 Tampilan fitur slide gambar ... 77

Gambar 4.3 Tampilan navigasi PC ... 77

Gambar 4.4 Tampilan navigasi pada smartphone ... 78

xvii

Gambar 4.9 Tampilan halaman Dosen ... 82

Gambar 4.10 Tampilan halaman Fasilitas ... 83

Gambar 4.11 Tampilan halaman Canvas ... 84

Gambar 4.12 Tampilan halaman Blog ... 86

Gambar 4.13 Tampilan halaman Foto Aktifitas ... 87

Gambar 4.14 Tampilan efek pada foto ... 88

Gambar 4.15 Poster A1 ... 89

Gambar 4.16 Label CD ... 90

xviii

Tabel 3.1 Analisa SWOT Website Program Studi DIV Komputer

Multimedia STMIK STIKOM Surabaya ... 45 Tabel 3.2 Analisis Penentuan Keyword ... 49 Tabel 3.3 Jadwal Pengerjaan Website ... 70

1 1.1 Latar Belakang

Internet mengalami perkembangan terus menerus dan dengan penemuan teknologi-teknologi baru. Perkembangan ini juga didukung dengan berkembangnya teknologi berbagai macam merk dan tipe gadget baru yang selalu bermunculan menawarkan fitur dan kecanggihan masing-masing. Hal ini semakin memudahkan untuk memasuki dunia online dengan mudah misalkan dari segi media sosial yang populer di masyarakat yaitu facebook, twitter, instagram dan lain-lain. Mudahnya mengakses internet dengan perangkat yang juga mudah dibawa kemanapun kita pergi. Masyarakat kini akan lebih cenderung mengakses internet melalui perangkat mobile yaitu ponsel pintar maupun komputer tablet. Melihat perkembangan baik ini peneliti ingin membuat sebuah website untuk Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya yang tidak hanya bisa diakses melalui personal komputer namun juga dapat diakses melalui berbagai macam perangkat mobile tersebut.

Hasil survei dari berbagai sumber mengatakan bahwa, fakta pengguna internet dan pengguna smartphone terus meningkat tajam. Menurut hasil studi bertajuk "Getting Mobile Right" yang diprakarsai oleh Yahoo dan Mindshare, saat ini ada sekitar 41,3 juta pengguna smartphone dan 6 juta pengguna tablet di Indonesia (Liputan6.com). HarianTI mengabarkan tahun ini Indonesia menjadi negara dengan penjualan perangkat tablet tertinggi dengan angka mencapai 1,3

juta unit. Ini menjadikan Indonesia menduduki peringkat tertinggi untuk negara di kawasan Asia Tenggara (HarianTI.com).

Memenuhi kebutuhan masyarakat untuk menikmati akses ke sebuah website dengan perangkat mobile. Munculah istilah responsive web design (RWD) dengan teknologi terbaru yaitu HTML5 dan CSS3. Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di www.alistapart.com. Teknik desain website responsif dapat membuat suatu website ditampilkan dengan tampilan berbeda disetiap perangkat yang digunakan. Keuntungannya adalah pengguna tidak perlu bersusah payah untuk melakukan

zoom in atau zoom out layar saat membuka suatu website karena website yang

diakses melalui personal komputer/ laptop, komputer tablet, dan ponsel pintarakan ditampilkan berbeda menyesuaikan ukuran layar perangkan tersebut. Sehingga website akan menjadi fleksibel dan dapat ditampilkan secara maksimal dengan berbagai macam ukuran layar.

Dari fakta dan keunggulan desain website responsif ini, website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya nantinya dapat ditampilkan secara maksimal melalui berbagai macam perangakat dan dapat diakses oleh lebih banyak pengunjung. Sehingga sangat efektif untuk media promosi bagi Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya serta untuk menyediakan informasi dan menyebarkan informasi dengan cepat. Sebagai pengujung juga dapat dengan mudah mencari informasi terbaru karena di website juga dapat melihat update berita maupun agenda kegiatan yang akan diadakan oleh prodi multimedia.

1.2 Perumusan Masalah

Permasalahan yang akan dibahas pada tugas akhir ini adalah bagaimana membuat website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dengan teknik Desain Website Responsif untuk memaksimalkan tampilan antarmuka diberbagai macam perangkat?

1.3 Pembatasan Masalah

Dalam penelitian ini agar tidak meyimpang dari tujuan yang akan dicapai maka pembahasan masalah dibatasi pada hal-hal sebagai berikut:

1. Membuat desain website yang responsif untuk Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

2. Website dapat ditampilkan pada komputer personal, komputer tablet, dan ponsel pintar.

1.4 Tujuan

Sesuai dengan permasalahan yang ada maka tujuan dibuatnya Tugas Akhir ini adalah membuat desain website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya responsif untuk memaksimalkan tampilan antarmuka diberbagai macam perangkat.

1.5 Manfaat

Manfaat yang diperoleh masyarakat sebagai pengguna atau pengunjung akan dimudahkan dengan desain website fleksibel yang dapat diakses melalui

berbagai macam perangkat yang digunakan. Pengunjung akan lebih nyaman saat mengakses website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya baik dari segi tampilan, konten, dan navigasinya.

5 2.1 Profile Prodi DIV Komputer Multimedia

Dalam buku Pedoman Administrasi dan Kurikulum STMIK STIKOM Surabaya tahun ajaran 2013/2014 bahwa Program Studi DIV Komputer Multimedia merupakan program studi yang mendidik mahasiswa agar mampu menyampaikan pesan yang bisa menggunakan alur audio maupun visual. Alur pandang, dan dengar. Alur ini dapat kita jumpai pada media televisi, multimedia interaktif, dan dikemas dalam unsur-unsur kreatif dalam penyampaian pesannya agar lebih menarik.

Gambar 2.1 Logo Prodi DIV Komputer Multimedia (Sumber: Arsip Prodi DIV Komputer Multimedia)

Pada gambar 2.1 adalah logo dari Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Terdiri dari dua warna yaitu, oranye dan abu-abu. Warna oranye merupakan warna dari bendera Program Studi DIV Komputer

Multimedia di STMIK STIKOM Surabaya. Sedangkan warna abu-abu menujukkan kebersamaan dan teknologi.

2.2 Visi

Menjadi Program Studi Komputer Multimedia unggulan yang menghasilkan lulusan Komputer Multimedia dengan kualifikasi Animasi, Videografi, Multimedia Interaktif, dan Web Disain.

2.3 Misi

Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya memiliki Misi sebagai berikut:

1. Menyelenggarakan pendidikan Komputer Multimedia yang efektif, efisien dan berkualitas, yang mengacu pada kurikulum berbasis kompetensi dan relevan dengan kebutuhan masyarakat dan industri.

2. Meningkatkan profesionalisme dan kompetensi tenaga pengajar.

3. Meningkatkan kerjasama dengan industri yang berhubungan dengan multimedia, seperti advertising, rumah produksi, post production, TV Station, dan industri yang memiliki in house production.

4. Meningkatkan kualitas dan kuantitas penelitian bidang Komputer Multimedia, yang dapat bermanfaat dalam memecahkan permasalahan yang berhubungan dengan penciptaan karya Multimedia yang dibutuhkan masyarakat.

5. Melaksanakan kegiatan pengabdian kepada masyarakat dengan melibatkan civitas akademika dalam kegiatan pendidikan dan penelitian, terutama yang berkaitan Komputer Multimedia.

2.4 Tujuan

Program Studi DIV Komputer Multimedia bertujuan mencapai penguasaan tentang konseptual dan teknis pada bidang seni dan teknologi multimedia, agar menghasilkan sarjana Komputer Multimedia yang memiliki kualifikasi dan kompetensi akademis sebagai berikut:

1. Berkemampuan menerapkan kompetensi Komputer Multimedia dibidang industri, pendidikan dan pemerintahan.

2. Menghasilkan penelitian & pengabdian masyarakat yang dapat bermanfaat bagi dunia industri dan pemerintah.

3. Menghasilkan Sumber Daya Manusia pada bidang Komputer Multimedia untuk mendukung Pengembangan dan Pembangunan Pemerintah Daerah dalam era otonomi daerah.

4. Memiliki sertifikasi Internasional berkompetensi Multimedia dan memiliki jiwa profesionalisme, global dan enterpreneurship.

5. Memiliki kemauan dan kemampuan untuk bekerja dengan efektif dan memiliki kepekaan dan tanggap terhadap permasalahan yang dihadapi masyarakat.

6. Memiliki kemauan, kemampuan, dan keterampilan untuk mengikuti perkembangan teknologi terbaru sesuai dengan bidangnya.

2.5 Lulusan Dipastikan

Mampu memiliki penguasaan secara teknik dan mampu menyampaikan pesan secara audio visual bidang multimedia yang meliputi Animasi, Videografi, dan Multimedia Interaktif, sesuai dengan perkembangan kebutuhan masyarakat, dunia industri, pendidikan dan pemenrintahan.

2.6 Mata Kuliah Pokok

Game Animation, Cel Animation, Digital Audio, Graphic Programing, 3D Modelling, Web Design, Web game 3D Animation and Special Effect, Digital Imaging, Web Programming, VideoGraphy & Storyboarding, Interactive Multimedia, Basic Design, Editing Digital & Video.

2.7 Profesi Kerja

Animator, Web Designer, Videorapher, Art Director, Photorapher, Storyboarder, Digital Ilustrator, Game Programmer.

2.8 Sertifikasi Internasional

Gambar 2.2 Adobe Certified

Pada gambar 2.2 adalah merupakan sertifikat resmi dari adobe untuk mahasiswa Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya apabila lulus ujian dari adobe.

2.9 Situs Web

Situs web (bahasa Inggris: web site) atau sering disingkat dengan istilah situs adalah sejumlah halaman web yang memiliki topik saling terkait, terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah lokal (LAN) melalui alamat internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses publik di internet disebut pula sebagai World Wide Web atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda situs internet umumnya dapat diakses publik secara bebas, pada prakteknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan surel

(e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena

alasan keamanan, privasi, atau komersil (http://dotcomcell.com).

Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan

instruksi-instruksi berbasis HTML, atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer.

Halaman-halaman web tersebut diakses oleh pengguna melalui protokol komunikasi jaringan yang disebut sebagai HTTP, sebagai tambahan untuk meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web dapat pula mengimplementasikan mekanisme pengaksesan melalui protokol HTTPS.

2.10 Sejarah Situs Web

Penemu situs web adalah Sir Timothy John “Tim” Berners-Lee, sedangkan situs web yang tersambung dengan jaringan pertamakali muncul pada tahun 1991. Maksud dari Tim ketika merancang situs web adalah untuk memudahkan tukar menukar dan memperbarui informasi pada sesama peneliti di tempat ia bekerja. Pada tanggal 30 April 1993, CERN (tempat dimana Tim bekerja) mengumumkan bahwa WWW dapat digunakan secara gratis oleh publik (http://dotcomcell.com).

Sebuah situs web bisa berupa hasil kerja dari perorangan atau individu, atau menunjukkan kepemilikan dari suatu organisasi, perusahaan. biasanya pembahasan dalam sebuah situs web merujuk pada sebuah ataupun beberapa topik khusus, atau kepentingan tertentu. Sebuah situs web bisa berisi pranala yang menghubungkan ke situs web lain, demkian pula dengan situs web lainnya. Hal ini terkadang membuat perbedaan antara situs web yang dibuat oleh individu

ataupun perseorangan dengan situs web yang dibuat oleh organisasi bisnis menjadi tidak begitu jelas.

Situs web biasanya ditempatkan pada server web. Sebuah server web umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk menangani pengaturan nama ranah, serta menangani layanan atas protokol HTTP yang disebut sebagai Server HTTP (bahasa Inggris: HTTP Server) seperti Apache HTTP Server, atau Internet Information Services (IIS).

2.11 Situs Web Statis

Situs web statis bersifat un-real time. Maksudnya, website statis tidak tidak dapat diubah secara simultan dalam sebuah web based administrator, sehingga hanya bisa diubah ketika langsung mengakses file pada server dan malakukan perubahan pada source codenya (Wiswakarma. 2009: 01).

Editor teks merupakan perangkat utilitas yang digunakan untuk menyunting berkas halaman web, misalnya: Notepad atau TextEdit.

Editor WYSIWYG, merupakan perangkat lunak utilitas penyunting halaman web yang dilengkapi dengan antar muka grafis dalam perancangan serta pendisainannya, berkas halaman web umumnya tidak disunting secara lengsung oleh pengguna melainkan utilitas ini akan membuatnya secara otomatis berbasis dari laman kerja yang dibuat oleh pengguna. perangkat lunak ini misalnya: Microsoft Frontpage, Macromedia Dreamweaver.

Editor berbasis templat, beberapa utilitas tertentu seperti Rapidweaver dan iWeb, pengguna dapat dengan mudah membuat sebuah situs web tanpa harus

mengetahui bahasa HTML, melainkan menyunting halaman web seperti halnya halaman biasa, pengguna dapat memilih templat yang akan digunakan oleh utilitas ini untuk menyunting berkas yang dibuat pengguna dan menjadikannya halam web secara otomatis.

2.12 Situs Web Dinamis

Situs web dinamis merupakan situs web yang secara spesifik didisain agar isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan mudah. Website dinamis memerlukan sebuah tempat penyimpanan data untuk menampung infornasi-informasi yang masuk. Dengan adanya penampung informasi maka dapat mengatur perilaku data untuk dimunculkan. Alat bantu penampung data tersebut adalah Database. Program data base yang digunakan umumnya adalah MySQL karena bersifat open souce dan gratis serta memiliki berbagai macam fitur (Puji Oktavian. 2010: 62)

Pengimplementasian situs web dinamis pada umumnya membutuhkan keberadaan infrastruktur yang lebih kompleks dibandingkan situs web statis. Hal ini disebabkan karena pada situs web dinamis halaman web umumnya baru akan dibuat saat ada pengguna yang mengaksesnya, berbeda dengan situs web statis yang umumnya telah membentuk sejumlah halaman web saat diunggah di server web sehingga saat pengguna mengaksesnya server web hanya tinggal memberikan halaman tersebut tanpa perlu membuatnya terlebih dulu.

Untuk memungkinkan server web menciptakan halaman web pada saat pengguna mengaksesnya, umumnya pada server web dilengkapi dengan mesin

penerjemah bahasa skrip (PHP, ASP, ColdFusion, atau lainnya), serta perangkat lunak sistem manajemen basisdata relasional seperti MySQL.

Struktur berkas sebuah situs web dinamis umumnya berbeda dengan situs web statis, berkas-berkas pada situs web statis umumnya merupakan sekumpulan berkas yang membentuk sebuah situs web. Berbeda halnya dengan situs web dinamis, berkas-berkas pada situs web dinamis umumnya merupakan sekumpulan berkas yang membentuk perangkat lunak aplikasi web yang akan dijalankan oleh mesin penerjemah server web, berfungsi memanajemen pembuatan halaman web saat halaman tersebut diminta oleh pengguna.

2.13 Fungsi Website

Website mempunyai fungsi yang bermacam-macam, tergantung dari tujuan dan jenis website yang dibangun, tetapi secara garis besar dapat berfungsi sebagai (www.rudywebdesign.com):

2.13.1 Media Promosi

Sebagai media promosi dapat dibedakan menjadi media promosi utama, misalnya website yang berfungsi sebagai search engine atau toko Online, atau sebagai penunjang promosi utama, namun website dapat berisi informasi yang lebih lengkap daripada media promosi offline seperti koran atau majalah.

2.13.2 Media Pemasaran

Pada toko online atau system afiliasi, website merupakan media pemasaran yang cukup baik, karena dibandingkan dengan toko sebagaimana di dunia nyata, untuk membangun toko online diperlukan modal yangr relatif lebih kecil, dan dapat beroperasi 24 jam walaupun pemilik website tersebut sedang istirahat atau sedang tidak ditempat, serta dapat diakses darimana saja.

2.13.3 Media Informasi

Website portal dan radio atau tv online menyediakan informasi yang bersifat global karena dapat diakses dari mana saja selama dapat terhubung ke internet. Sehingga dapat menjangkau lebih luas daripada media informasi konvensional seperti koran, majalah, radio atau televisi yang bersifat lokal.

2.13.4 Media Pendidikan

Ada komunitas yang membangun website khusus berisi informasi atau artikel yang sarat dengan informasi ilmiah misalnya wikipedia. Wikipedia adalah sebuah ensiklopedia berisi kumpulan informasi tertulis mengenai pengetahuan yang tersedia secara bebas.

2.13.5 Media Komunikasi

Sekarang banyak terdapat website yang dibangun khusus untuk berkomunikasi. Website yang difungsikan sebagai media komunikasi misalnya

forum yang dapat memberikan fasilitas bagi para anggotanya untuk saling berbagi informasi atau membantu pemecahan masalah tertentu.

2.14 Cara Sebuah Website Bekerja

Website pada dasarnya hanyalah kumpulan file yang terletak pada sebuah komputer yang terhubung ke Internet. Ketika seseorang mengunjungi Website Anda, mereka sebenarnya hanya terhubung ke sebuah komputer dan komputer (yang kemudian disebut sebagai Server) tersebut memberikan file yang ingin mereka lihat. Melalui internet suplai informasi dilayani oleh web server. Web

server adalah aplikasi yang berguna untuk menerima permintaan informasi dari

pengguna melalui web browser dan mengirimkan kembali informasi yang diminta melalui HTTP (Hyper Text Transfer Protocol). Biasanya web server diletakkan di komputer tertentu pada web hosting (Puji Oktavian. 2010: 11).

Ini kedengaran simple, tetapi umumnya komputer biasa tidak memiliki power dan software yang dibutuhkan untuk merespon semua permintaan yang dibutuhkan oleh pengunjung Website. Walaupun komputer/server sanggup, komputer akan membutuhkan koneksi/akses Internet yang luar biasa cepat untuk melayani jumlah pengunjung Website.

2.15 Program yang digunakan

Bahasa yang digunakan adalah bahsa pemrograman yang digunakan untuk mendesain halaman antarmuka sebuah website. Berikut ini adalah beberapa bahasa program yang umum digunakan untuk membuat sebuah website:

2.15.1 HTML5

Gambar 2.3 Logo HTML5 (Sumber: http://www.w3schools.com/)

HyperText Markup Language (HTML) dengan logo pada gambar 2.3 adalah

sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized

Markup Language), HTML adalah sebuah standar yang digunakan secara luas

untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web

Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan

Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

2.15.2 Java Script

Gambar 2.4 Logo Java Script (Sumber: http://www.w3schools.com/)

JavaScript dengan logo pada gambar 2.4 adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html (dengan file JavaScript yang melekat padanya jika memang ada) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS: menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.

2.15.3 jQuery

Gambar 2.5 Logo jQuery (Sumber: http://www.w3schools.com/)

Jquery dengan logo pada gambar 2.5 adalah JavaScript Library yang berarti kumpulan kode/fungsi JavaScript siap pakai, sehingga memudahkan dan mempercepat kita dalam membuat kode JS. Secara standar, apabila kita membuat kode JS, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami.

Kesimpulannya adalah jQuery menyederhanakan kode JS. Hal ini sesuai dengan selogannya ‘Write less, do more’ cukup tulis sedikit, tetapi bisa melakukan banyak hal (Hakim. 2010: 03).

Memilih jQuery dibandingkan JSL pendahulunya seprti Prototype, mootools, YUI (Yahoo User Interface), dan Dojo. Berikut beberapa alasan yang membuktikan jQuery sangat powerful dan layak dijadikan pilihan, yaitu:

1. JQ telah banyak digunakan oleh website-website terkemuka di dunia.

2. Kompetibel/cocok dengan semua browser yang populer, seperti Mozilla, Internet Explorer, Safari, Chrome, dan Opera.

3. Kompetibel dengan semua versi CSS (CSS 1 sampai dengan 3).

4. Dokumentasi, tutorial dan contoh-contohnya lengkap, kunjungi website resminya di http://jquery.com

5. Didukung oleh komunitas besar dan aktif, seperti forum, milis, blog, social networking (twitter dan facebook), website, dan tutorial.

6. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.

7. Filenya hanya satu dan ukurannya kecil, hanya sekitar 20 KB.

8. Open source/free (gratis) dengan lisensi dari GNU (General Public License) dan MIT License.

9. jQuery lebih banyak digunakan oleh para developer web dibandingkan Javasrcipt Library lainnya.

2.15.4 CSS (Cascading Style Sheets) 3

Gambar 2.6 Logo CSS (Cascading Style Sheets) 3 (Sumber: http://www.w3schools.com/)

Cascading Style Sheet (CSS) dengan logo pada gambar 2.6 merupakan sebuah elemen penting dalam pembuatan sebuah web. Sama pentingnya saat kita mendesain bentuk web pada pengolah gambar. Dengan CSS dapat mendesain sejumlah halaman dengan aturan yang sama tanpa mengubah halaman-halaman tersebut satu persatu (Wiswakarma. 2009: 07).

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.16 Perangkat untuk mengakses website

Ada beberapa perangkat yang harus digunakan untuk mengakses sebuah website. Dengan menggukan teknik desain website responsive maka masyarakat dapat mengakses dengan berbagai macam perangkat, sebagai berikut:

2.16.1 Personal Komputer (PC) dan Laptop

Personal komputer atau laptop seperti yang terlihat pada gambar 2.7 adalah perangkat yang umum dimiliki oleh masyarakat untuk mengakses internet. Personal Computer adalah seperangkat komputer yang digunakan oleh satu orang saja / pribadi. Biasanya komputer ini adanya dilingkungan rumah, kantor, toko, dan dimana saja karena harga PC sudah relatif terjangkau dan banyak macamnya (Ardiansyah. 2013: 08).

Gambar 2.7 Contoh Perangakat PC dan Laptop (Sumber: google image)

Fungsi utama dari PC adalah untuk mengolah data input dan menghasilkan output berupa data/informasi sesuai dengan keinginan user (pengguna). Dalam pengolahan data yang dimulai dari memasukkan data (input) sampai akhirnya menghasilkan informasi, komputer memerlukan suatu sistem dari kesatuan elemen yang tidak bisa terpisahkan, yaitu (http://pakdevakeren.blogspot.com): 1. Hardware (perangkat keras)

Hardware adalah sekumpulan komponen perangakat keras komputer yang secara fisik bisa dilihat, diraba, dirasakan. Hardware ini dibagi menjadi 5 (lima) bagian, yaitu:

a. Input Device, peralatan masukkan (Keyboard, Mouse, dan lain-lain) b. Process Device, peralatan proses (Processor, Motherboard, Ram, dan

lain-lain)

c. Output Device, peralatan keluaran (Monitor, Printer, dan lain-lain) d. Storage Device, peralatan penyimpan (Harddisk, Flashdisk, dan lain-lain) e. Peripheral Device, peralatan tambahan (WebCam, Modem, dan lain-lain) 2. Software (Perangkat Lunak)

Software adalah program yang berisi instruksi/perintah sebagai pelantara yang menghubungkan (menjembatani) antara hardware dan brainware (perangkat manusia) sehingga dapat menghasilkan informasi yang diinginkan brainware. Software dapat dikategorikan menjadi dua kelompok. Software Operating System (OS), Contohnya adalah Windows, Linux, Dos, Android, dan lain-lain. Tanpa adanya Operating System ini, maka hardware hanyalah benda mati yang tidak bisa digunakan. Software Application System, Contohnya adalah Ms. Office, Open Office, Adobe Photoshop, Corel Draw, Program Database, Program Utilities, dan lain-lain.

3. Brainware (Perangkat Manusia/ pengguna/ user)

Brainware adalah perangkat yang mengoperasikan dan menjalankan perangkat lunak yang ada didalam komputer. Bukan hanya itu, ternyata brainware itu bukan hanya orang yang menggunakan komputer saja, namun orang yang merasakan manfaat dari komputer pun bisa di katakan Brainware. Contohnya adalah siswa/i dikelas yang sedang memperhatikan presentasi yang dibawakan oleh gurunya dengan menggunakan Laptop dan Projector.

Siswa/i ini secara tak sadar disebut juga sebagai brainware karena melihat hasil (informasi) pelajaran yang disampaikan gurunya. Brainware dikelompokkan menjadi beberapa kategori mulai dari pembuat program (programmer), Technical Support, Designer Graphic, Operator, sampai user paling awam sekalipun.

2.16.2 Komputer Tablet (PC Tablet)

PC Tablet atau bisa saja langsung dikatakan tablet saja, merupakan jenis personal komputer yang memiliki fleksibilitas yang lebih daripada PC biasa maupun laptop karena berukuran kecil seperti buku hingga mudah dibawa.

Gambar 2.8 Contoh Perangakat PC Tablet (Sumber: www.apple.com)

Karakter alat ini seperti yang terlihat pada gambar 2.8 ialah mempunyai layar sentuh bisa dengan jari atau pena digital (stylus) sebagai fungsi kontrol paling utama serta tetap bisa menggunakan keyboard ataupun mouse yang

bongkar pasang seperti komputer umumnya. Pengguna PC Tablet bisa melakukan kegiatan kantor seperti menulis, browsing, menonton video hingga memotret. Biasanya PC Tablet sudah memiliki bundle aplikasi penunjang selain tentunya operating system. Ukuran diagonal tablet seperti ini lebih lebar dari tujuh inchi, dari segi dimensi inilah yang memperlihatkan perbedaan dengan smartphone dan juga PDA (http://yoetama.blogspot.com).

Seperti yang tadi sekilas tertulis diatas walaupun tablet pc bisa langsung digunakan tanpa memakai alat input keyboad, mouse dan lainnya ada juga jenis Hibrida dimana sudah ada beredar 13 tahun silam yang detachable keyboard. Namanya teknologi memang terus berkembang beragam kelebihan dari setiap vendor selalu unik dan berbeda ada PC Tablet yang bisa dilipat, docking system, keyboard fisik yang disembunyikan dengan cara digeser ataupun diputar. Banyak juga perusahaan yang melirik pasar PC Tablet diantaranya ialah Amazon, Archos, Apple, HP, HTC, Microsoft, Motorola, RIM, Samsung, Sony dan banyak lainnya. Tiap merek dari komputer tablet menggunakan sistem operasi yang berbeda pula, karena wajar dalam persaingan pasar untuk bisa meraih simpati dari pengguna dan yang umum dipakai sebagai sistem operasi sebuah PC Tablet adalah Android milik Google, IOS milik Apple, Windows milik Microsoft dan QNX milik RIM.

Fungsi utama dari PC Tablet berselancar dengan teknologi Wireless seluler yang menggunakan kanal 2G, 3G, 4G ataupun WiFi.

2.16.3 Ponsel pintar (Smartphone)

Kata "smartphone" didefinisikan dalam Kamus Oxford American sebagai "ponsel yang menggabungkan (Personal Digital Assistant) PDA".

Gambar 2.9 Contoh Perangakat Ponsel Pintar (Smartphone) (Sumber: www.businesskorea.co.kr)

Jadi, menurut (http://diproses.blogspot.com) definisi smartphone adalah perangkat telekomunikasi serbaguna. Smartphone atau yang disebut juga piranti pintar dewasa ini menjadi trend yang mewabah di Indonesia, digemari nya

Smartphone ini juga bukan tanpa alasan, tapi karena feature yang ditawarkan

sangat menarik dan mengubah hobi pengguna untuk browsing, chating dan semacam nya yang awalnya dilakukan secara setatis, sekarang dengan smartphone bisa dilakukan dengan mobile atau bergerak.

Seperti halnya pengguna atau user yang semakin cerdas memilih perangkat pintar nya, vendor pun bersaing menawarkan feature dan interface yang menarik dan mudah untuk penggunanya, mereka menawarkan OS (operating system) dan aplikasi yang memanjakan penggunanya.

Fisik dan geografis menjadi semakin tak berjarak, secara sosial pun masyarakat semakin tak bersekat. Sebuah kemajuan yang sangat patut disyukuri,

smartphone merupakan pengembangan dari mobile phone atau lebih dikenal

dengan handphone yang diciptakan awal mula sekitar 40 tahun lalu oleh Martin Cooper. Ponsel yang berbentuk besar sekali itu mempunyai berat sekitar 1,15 kg dan panjang sekitar 10 inch serta hanya bisa digunakan selama 20 menit saja sebelum baterai nya habis. Namun dalam perkembangan nya hingga jadi

smartphone pada saat ini, dengan dimensi yang lebih elegan dan indah juga bisa

lebih multi fungsi sehingga tidak hanya digunakan untuk telepon dan sms saja, kekuatan baterai nya pun bisa lebih tahan lama hingga dapat bertahan beberapa hari standby dengan sekali full charge.

Smartphone sangat berguna untuk orang-orang sibuk dalam masyarakat

modern. Namun sebenarnya hal menarik bagipengguna smartphone adalah untuk menemukan apa yang perangkat anda dapat lakukan, dan benar-benar mengambil keuntungan dari itu. Banyak orang hanya menggunakan gadget seharga 2 jutaan mereka sebagai ponsel sederhana untuk komunikasi telepon, messege service atau chat saja. Itu karena mereka tidak pernah meng-eksplorasi smartphone meraka yang berbentuk seperti layak nya telepon selular, atau tidak pernah memiliki waktu untuk sekedar baca buku manual dari ponsel nya. Dan itu membuat investasi untuk membeli gadget mahal menjadi kurang efektif.

2.17 Web Desain Reasponsif

Gambar 2.10 adalah salah satu contoh website yang telah menggunakan Desain web responsif atau responsive web design dengan berbagai tampilan pada perengkat, web responsif adalah sebuah pendekatan secara desain pada user interface website untuk optimalisasi kenyamanan user dalam meng-explore web dari segi tampilan, konten dan navigasi website tanpa harus merubah ukuran (resize) halaman web tersebut pada browser atau device yang digunakan (http://kangtanto.com).

Gambar 2.10 Web dengan Teknik Desain Web Responsif (Sumber: www.co.uk)

Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak

memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.

Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart (www.alistapart.com). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.

Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.

Beberapa elemen dari web responsif adalah media queries, Grid & flexible image, adapun penjelasan dari elemen diatas adalah (www.ar7ikel.com):

1. Media Queries adalah salah satu fasilitas yg dimiliki oleh CSS3 (Cascading Style Sheet), dmana halaman web bisa menggunakan CSS style yang berbeda

sesuai dengan karakteristik dari perangkat atau device yang digunakan user, pada umumnya media queries mendeteksi ukuran jendela browser.

2. Fluid Grid, atau grid yang fleksibel, konsep ini mengacu pada penggunaan ukuran relatif dengan basis persentase atau ems dibandingkan jenis ukuran absolut seperti pixel atau point.

3. Flexible Image, penggunaan ukuran persen dari 0 sampai 100 untuk image yang ditampilkan di web responsif, selain itu juga tehnik ini berguna untuk mencegah image tampil melebihi elemen containernya.

2.18 Web Typography

Saat bahasa HTML pertama kali dibuat, font benar-benar diatur oleh

browser. Web desainer tidak bisa mengubah font. Sampai pada tahun 1995,

perusahaan Netscape mengenalkan tag <font> yang kemudian menjadi standar di HTML 2. Ditambah dengan diperkenalkannya CSS pada tahun 1996 melengkapi kemampuan dari bahasa HTML. Tetapi kalau ingin menggunakan font yang aneh-aneh, terkadang komputer pengunjung tidak memiliki font tersebut, akhirnya desain yang tadinya bagus jadi berantakan.

CSS2 kemudian mencoba untuk mengakomodir hal tersebut dengan menambah fitur mencari font yang tidak ada dalam komputer pengunjung dan menggantinya dengan font lain yang mirip atau mendekati. Tetapi itu pun belum memuaskan. Sampai akhirnya di CSS3, ada fasilitas font download, dimana komputer pengunjung akan mendownload font yang memang sudah disediakan

oleh web desainer. Sehingga desain website yang sudah dibuat tidak akan berantakan.

Istilah tipografi menurut wikipedia adalah seni dan teknik mengatur tulisan, desain tulisan, dan memodifikasi aksara. Tujuan agar pengunjung website dapat membaca tulisan dengan nyaman dan tentu dimajakan dari sisi visual.

2.19 Font

Font adalah sebuah desain yang dibuat untuk huruf, angka dan karakter selain itu. Font mempunyai pitch, ukuran (size) dan kombinasi dari jenis tulisan

(typeface) (Zeembry, 2013: 142).

Jenis font dibagi menjadi dua yaitu serif dan sans-serif pada gambar 2.11. Jenis font serif adalah huruf yang memiliki garis-garis kecil yang berdiri horizontal pada badan huruf. Sedangkan font sans-serif adalah huruf sans serif adalah jenis huruf yang tidak memiliki garis-garis kecil dan bersifat solid. Jenis huruf seperti ini lebih tegas, bersifat fungsional dan lebih modern (www.ahlidesain.com).

Gambar 2.11 Anatomy Font Serif dan Sans-serif (Sumber: www.wikipedia.org)

Penjelasan lebih lanjut tentang penggunaan font serif dan sans-serif dapat dilihat pada gambar 2.12 berikut ini.

Gambar 2.12 Font Serif dan Sans-serif (Sumber: www.urbanfont.com)

Gambar 2.12 menjelaskan bahwa jenis huruf serif baik untuk dokument yang akan dicetak. Sedangkan untuk huruf yang baik digunakan pada layar adalah jenis huruf sans serif. Dari penjelasan tersebut maka penulis menggunakan jenis huruf sans-serif karena digunakan pada website yang akan ditampilkan pada layar monitor dan layar smartphone.

2.20 Font Hierarchy

Hierarki tipografi adalah sistem untuk jenis pengorganisasian yang menetapkan perintah penting dalam data, yang memungkinkan pembaca untuk dengan mudah menemukan apa yang mereka cari dan menavigasi konten (Jeremy Loyd, 2013). Hirarki tipografi dalam website Program Studi DIV Komputer

Multimedia STMIK STIKOM Surabaya ada pada gambar 2.13 yang menjelaskan besar huruf dan tipe huruf.

Gambar 2.13 Hirarki tipografi (Sumber: Hasil olahan peneliti)

33

Pada BAB III Laporan tugas akhir ini, mejelaskan tentang metode yang digunakan untuk membangun website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya menggunakan teknik desain website responsif. Berikutnya pada bab III ini menjelaskan tahapan proses pra produksi dari awal perancangan karya.

3.1 Metodologi Penelitian

Metode penelitian yang digunakan dalam proses pembuatan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya ini dengan metode SDLC (System Development Life Cycle). SDLC adalah tahapan-tahapan pekerjaan yang dilakukan oleh analis sistem dan programmer dalam membangun sistem informasi. Konsep ini umumnya merujuk pada sistem komputer atau informasi. Oleh karena itu SDLC juga merupakan pola yang diambil untuk mengembangkan sistem perangkat lunak, yang terdiri dari tahap-tahap: rencana

(planning), analisa (analysis), desain (design), implementasi (implementation), uji

coba (testing), penerimaan dan penyebaran (acceptance and deployment), dan pengelolaan (maintenance). Dalam rekayasa perangkat lunak, konsep SDLC mendasari berbagai jenis metodologi pengembangan perangkat lunak. Metodologi-metodologi ini membentuk suatu kerangka kerja untuk perencanaan

dan pengendalian pembuatan sistem informasi, yaitu proses pengembangan perangkat lunak.

Dalam siklus SDLC, secara umum menggunakan tujuh tahap tersebut. Berikut ini secara garis besar apa yang dilakukan pada setiap tahap tersebut untuk membuat proyek website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya:

1. Perencanaan Karya

Tingkat ini melibatkan menentukan tujuan proyek dan menjalankan studi kelayakan diantara layanan klien dan pengembangan web, dengan mempertimbangkan berbagai faktor seperti biaya proyek, biaya peralatan, kepraktisan dan lain-lain.

2. Analisis Karya

Penyempitan tujuan proyek menjadi fungsi didefinisikan dan operasi dari aplikasi yang diusulkan melalui diskusi intensif antara layanan pengembangan web dan klien dicapai melalui langkah ini.

3. Desain sistem (Perancangan karya)

Dokumentasi berbagai rincian seperti operasi dan fungsi seperti tata letak layar, diagram proses dan dokumentasi lainnya yang dilakukan di sini.

4. Implementasi

Di sinilah keahlian layanan pengembangan web yang paling dibutuhkan saat aktual end coding kembali dilakukan.

Dalam fase ini produk tersebut dimasukkan melalui berbagai lingkungan pengujian dan alat yang dirancang dan digunakan oleh layanan pengembangan web untuk membuat produk untuk menghapus bug dan kesalahan untuk memastikan eksekusi harmonis.

6. Penerimaan dan Penyebaran

Akhirnya layanan pengembangan web menyebarkan dan menginstal sistem setelah mendapatkan secara resmi disetujui oleh klien.

7. Pemeliharaan

Layanan pengembangan web tidak hanya memastikan instalasi aplikasi, tetapi mereka juga bertanggung jawab untuk pemeliharaan selanjutnya dan peningkatan jika dan ketika diperlukan.

3.2 Teknik Pengumpulan Data

Teknik pengumpulan data dalam pembuatan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya ini yaitu:

1. Wawancara

Cara ini dilakukan untuk mengetahui permasalahan-permasalahan apa saja yang terjadi pada Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya sehingga dapat diselesaikan dengan website yang baru. Peneliti melakukan wawancara dengan Kepala Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya Bapak Karsam, MA., Ph.D. Kesimpulan dari hasil wawancara tersebut adalah, bahwa Program Studi DIV

Komputer Multimedia STMIK STIKOM Surabaya membutuhkan desain antarmuka website yang baru. Website yang baru tersebut dapat menampilkan karya-karya mahasiswa dan website tersebut dapat ditampilkan dengan baik menggunakan ponsel pintar (smartphone) yang sebagian besar dimiliki khususnya mahasiswa dan masyarakat pada umumnya.

2. Pengamatan

Pengamatan ini dilakukan peneliti pada website yang telah ada milik Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya untuk mengetahui langsung di lapangan. Dengan begitu peneliti akan mengetahui website seperti apa yang dibutuhkan oleh Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Kesimpulan pengamatan ini adalah website yang telah ada sekarang tidak dapat menampilkan karya-karya mahasiswa dan antarmuka yang tidak dapat ditampikan dengan baik pada smartphone.

3. Studi Literatur

Studi Literatur merupakan pengumpulan data yang dilakukan dengan mengumpulkan bahan-bahan dari buku-buku panduan, majalah, internet dan koran yang berhubungan dengan pembuatan atau perkembangan website. Dengan studi ini maka peneliti memberikan keterangan sumber dalam suatu uraian dan sumber data dalam daftar pustaka.

4. Studi Eksisting

Dalam studi eksisting ini peneliti mengambil 5 (lima) contoh website dari berbagai universitas baik dari dalam negeri maupun luar negeri yang menggunakan desain website responsif. Kelima website ini peneliti pilih untuk analisis sebagai kompetitor yang telah menggunakan desain website responsif, yaitu:

a. UC San Diego (http://www.ucsd.edu/)

b. Moore College Art & Design (http://moore.edu/) c. University of Utah (http://www.utah.edu/) d. Stanford Arts (http://arts.stanford.edu/)

e. Institut Teknologi Bandung (http://www.itb.ac.id/)

Tujuan dari studi eksisting ini adalah mengamati kekuatan (strengths), kelemahan (weaknesses), peluang (opportunities), dan ancaman (threats) dari masing-masing yang dimiliki oleh website tersebut. Hasil pengamatan ini akan saya jadikan sebagai pembelajan dari kekuatan dan menghindari kekurangan dari kelima contoh website yang saya amati.

a. UC San Diego

Pada gambar 3.1 adalah halaman website dari Universitas San Diego yaitu salah satu universitas yang terdapat di California Amerika Serikat. Website tersebut telah menggunakan teknik desain website responsif. Bagian kiri pada gambar merupakan tampilan normal dari website yang diakses melalui desktop

sedangkan sebelah kanan adalah tampilan website yang diakses menggunakan

smartphone.

Gambar 3.1 Halaman website UC San Diego (Sumber: http://www.ucsd.edu/) Analisa SWOT website UC San Diego

S = Tata letak yang terlihat menggukan dua sampai empat kolom, tetap terlihat jelas dan berjalan baik pada tampilan mobile.

W = Terlalu banyak menu yang ditampilkan saat tampilan mobile sehingga tampilannya menjadi sangat pajang kebawah.

O = Tampilan yang terlihat sangat bersih dengan navigasi yang dikelompokkan sesuai warna.

T = Dengan banyaknya kolom apabila ukuran kolom yang kurang tepat dapat membuat tampilan normal pada personal komputer akan berbeda dengan tampilan mobile.

b. Moore College Art & Design

Gambar 3.2 Halaman website Moore College Art & Design (Sumber: http://moore.edu/)

Pada gambar 3.2 diatas adalah tampilan dari halaman website Moore College Art & Design di Philadelphia Amerika Serikat. Website tersebut telah menggunakan teknik desain website responsif. Bagian kiri pada gambar merupakan tampilan normal dari website yang diakses melalui desktop sedangkan sebelah kanan adalah tampilan website yang diakses menggunakan smartphone.

Analisa SWOT website Moore College Art & Design

S = Tampilan slide yang besar tetap terlihat baik saat pada tampilan mobile. W = Tampilan website pada personal komputer, terlalu banyak ruang kosong di

O = Pemisahan setiap artikel sangat menarik menggunakan blok-blok setiap judul yang berbeda. Sehingga memudahkan melihat saat ada penambahan artikel baru.

T = Membutuhkan kejelian saat mengkategorikan navigasi yang begitu banyak, lalu disembunyikan pada saat tampilan mobile.

c. University of Utah

Gambar 3.3 Halaman website University of Utah (Sumber: http://www.utah.edu/)

Pada gambar 3.3 di atas adalah tampilan dari website University of Utah yang terdapat di Utah Amerika Serikat. Website dari University of Utah ini baru saja diperkenalkan pada 15 Agustus 2013 dan website tersebut telah menggunakan teknik desain website responsif. Bagian kiri pada gambar merupakan tampilan normal dari website yang diakses melalui desktop sedangkan sebelah kanan adalah tampilan website yang diakses menggunakan smartphone.

Analisa SWOT website University of Utah

S = Menggunakan warna yang tegas dan kontras terasa sangat jelas untuk memisahkan setiap bagiannya.

W = Saat website pada tampilan mobile, semua menu baik menu utama maupun sub menu disembunyikan sehingga pengunjung harus menemukan tombol menu terlebih dahulu.

O = Pengujung dapat langsung menemukan alamat atau kontak dari universitas ini pada halaman pertama saat mengaksesnya melalui mobile.

T = Membutuhkan ketelitian untuk menentukan ukuran font karena akan berbeda saat ditampilan dengan personal komputer atau dengan tampilan mobile.

d. Stanford Arts

Gambar 3.4 Halaman website Stanford Arts (Sumber: http://arts.stanford.edu/)

Pada gambar 3.4 di atas merupakan tampilan dari website Stanford Arts yang telah menggunakan teknik desain website responsif. Bagian kiri pada

gambar merupakan tampilan normal dari website yang diakses melalui desktop sedangkan sebelah kanan adalah tampilan website yang diakses menggunakan

smartphone.

Analisa SWOT website Stanford Arts

S = Tata letak yang sangat baik dengan memisahkan menu atau keterangan pada gambar. Jadi pada saat tampilan mobile, gambar tersebut tetap terlihat jelas.

W = Gambar yang ditampilkan kurang menarik karena hanya satu dan gambar tersebut hanya diam sebagai background.

O = Pengunjung sangat nyaman apabila mengakses melalui mobile karena terlihat rapi dan jelas dengan warna yang flat namun sesuai dengan kategori.

T = Karena menu dan link yang dipisahkan dari gambar saat tampilan mobile maka membutuhkan perintah yang cukup rumit.

e. Institut Teknologi Bandung

Pada gambar 3.5 berikut ini merupakan tampilan website dari Institut Teknologi Bandung. Website Institut Teknologi Bandung ini telah menggunakan teknik desain website responsif.

Bagian kiri pada gambar merupakan tampilan normal dari website yang diakses melalui desktop sedangkan sebelah kanan adalah tampilan website yang diakses menggunakan smartphone.

Gambar 3.5 Halaman website Institut Teknologi Bandung (Sumber: http://www.itb.ac.id/)

Analisa SWOT website Institut Teknologi Bandung

S = Pengunjung akan sangat nyaman pada saat mengakses melalui mobile karena pemisahan setiap judul artikel yang sangat baik yang disertai gambar dan keterangan gambar.

W = ukuran gambar tidak sama atau kurang proporsional pada saat di tampilkan pada personal komputer maupun sebaliknya.

O = Tampilan yang sangat jelas dan rapi pada saat ditampilkan pada tampilan mobile.

T = Pengunjung agak sedikit bingung apabila melihat menu pada bagian kanan website saat tampilan normal pada personal komputer.

Kesimpulan hasil analisis SWOT dari 5 (lima) contoh website kompetitor tersebut adalah:

a. Pengelompokan kolom yang baik sesuai dengan kategori masing masing kolom yang ditampilkan. Hal ini agar tidak membingungkan tata letak kolom saat website tersebut ditampilkan pada tampilan mobile.

b. Navigasi website yang terlalu banyak harus dipisahkan sesuai dengan menu utama dan sub menu. Apabila ditampilkan pada tampilan mobile maka perlu hati-hati agar menu yang banyak tersebut tidak ditampilkan terlalu panjang ke bawah.

c. Memilah informasi yang ingin disampaikan pada halaman utama menjadi sangat penting. Karena tampilan normal pada personal komputer akan berbeda dengan tampilan pada mobile. Misalnya, apabila ingin mempilkan slide gambar pada halanam utama maka silde tersebut harus tampil paling atas saat diakses pada mobile.

5. SWOT (Strength, Weakness, Oppurtunity, Threat)

Hasil analisis SWOT dari 5 (lima) kompetitor terhadap pembuatan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dapat dilihat pada tabel 3.1. Tabel ini untuk mengetahui bagaimana kekuatan

(strengths) mampu mengambil keuntungan (advantage) dari peluang

(opportunities) yang ada, bagaimana cara mengatasi kelemahan (weaknesses)

yang mencegah keuntungan (advantage) dari peluang (opportunities) yang ada, selanjutnya bagaimana kekuatan (strengths) mampu menghadapi

ancaman (threats) yang ada, dan terakhir adalah bagaimana cara mengatasi kelemahan (weaknesses) yang mampu membuat ancaman (threats) menjadi nyata atau menciptakan sebuah ancaman baru.

Tabel 3.1 Analisa SWOT website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya

Kekuatan (Strength) Kelemahan (Weakness) a. Pengelompokan kolom

sesuai dengan kategori masing-masing. Agar terlihat jelas pada saat tampilan mobile. b.Tampilan yang rapi

dan bersih dengan memisahkan menu utama dengan submenu lain.

a. Desain website responsif adalah teknologi baru dan masih banyak yang perlu dimaksimalkan dalam tampilannya di masing-masing perangkat.

Peluang (Opportunity) Strategi SO Strategi WO a. Masih sangat jarang

website yang

menggunakan teknik desain website responsif.

b. Menjangkau pasar yang lebih luas.

a. Untuk menampilkan tampilan desain yang fleksibel maka harus ditata dengan rapi dengan

pengelompokan yang tepat.

a. Walaupun teknologi ini tergolong baru. Namun akan sangat membantu dalam memperluas jangkauan karena sudah dapat diakses diberbagai perangkat.

Ancaman (Threat) Strategi ST Strategi WT

a. Akan terjadi kesalahan apabila tidak teliti karena harus menyesuaikan tampilan masing-masing perangkat, yaitu: personal komputer, komputer tablet dan ponsel.

a. Untuk mengurangi kesalahan dalam tampilan masing-masing perangkat maka diatasi dengan tata letak kolom yang baik.

a. Menjangkau pasar yang lebih luas dengan memanfaatkan berbagai perangkat yang digunakan masyarakat harus selalu memperbaharui teknologi yang digunakan. Faktor Internal Faktor Eksternal

3.3 Teknik Analisis Data

Metode Diskriptif Analisis akan digunakan dalam usaha mencari dan mengumpulkan data, menyusun, menggunakan serta menfsirkan data yang sudah ada. Untuk menguraikan secara lengkap, teratur dan teliti terhadap suatu obyek penelitian.

Sanapiah Faisal mengartikan metode deskriptif adalah berusaha mendeskripsikan dan menginterpretasikan apa yang ada, baik kondisi atau hubungan yang ada, pendapat yang sedang tumbuh, proses yang telah berlangsung dan berkembang. Dengan kata lain metode deskriptif adalah memberikan gambaran yang jelas dan akurat tentang material/fenomena yang diselidiki.

3.4STP (Segmenting, Targeting, Positioning)

Sebelum menuju tahap pra produksi peneliti menganalisis segmentasi, targeting, dan posisioning terlebih dahulu untuk menentukan audien yang akan dituju.

3.4.1 Segmenting

Segmentasi pasar merupakan suatu aktivitas membagi atau mengelompokkan pasar yang heterogen menjadi pasar yang homogen atau memiliki kesamaan dalam hal minat, daya beli, geografi, perilaku pembelian maupun gaya hidup.

a. Segmentasi berdasarkan demografi: Usia: 15 tahun – 45 tahun

Jenis kelamin: laki-laki dan perempuan

Pendidikan: pelajar SMA hingga pelajar yang lebih tinggi b. Segmentasi berdasarkan geografis:

Daerah: perkotaan

Ukuran kota: kota besar dengan perekonomian yang baik Pusat kota: dengan pertumbuhan jumlah pelajar yang besar c. Segmentasi berdasarkan psikografis:

Kelas sosial: mulai dari kelas menengah sampai menengah ke atas. Gaya hidup: modern, mobile, instan.

3.4.2 Targeting

Hakikatnya, targeting adalah menentukan segmen-segmen pasar yang yang potensial bagi perusahaan anda. Sebelumnya, anda perlu menentukan atau menyegmentasi pasar secara kreatif, sehingga dengan begitu anda akan benar-benar mengenal potesi segmen pasar yang akan menjadi target perusahaan anda (Hewrmawan Kertajaya, 2006: 15).

Terget pemasaran dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya ini adalah para pelajar yang ingin melanjutkan pendidikan yang lebih tinggi. Orang tua siswa yang ingin mencari lembaga pendidikan untuk anaknya. Serta masyarakat pada umumnya yang tertarik dan antusias terhadap perkembangan teknologi dan multimedia.

3.4.3 Positioning

Positioning adalah bagaimana sebuah produk dimata konsumen yang membedakannya dengan produk pesaing. Dalam hal ini termasuk barnd image, manfaat yang dijanjikan serta competitive advantage. Inilah alasan kenapa konsumen memilih produk suatu perusahaan, bukan produk pesaing.

Sesuai dengan posisioning pasar dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya adalah masyarakat yang sudah mulai beralih ke produk perangkat mobile seperti, komputer tablet dan ponsel pintar. Mereka masyarakat modern yang suka mengakses internet dimanapun mereka berada. Website ini masih tetap dapat dinikmati oleh masyarakat yang menggunakan perangkat personal komputernya karena desain website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya yang fleksibel. Sehingga sangat efisien untuk menyebarkan informasi kepada masyarakat dengan masing-masing perangkat yang digunakan.

3.5 Keyword

Setelah menentukan STP maka selanjutnya dikembangkan untuk menemukan sebuah keyword atau kata kunci pada tabel 3.2. Kata kunci ini adalah sebuah kata yang dapat mewakili semua aspek yang telah dibahas dalam pembahasan STP dan SWOT sebelumnnya. Kata kunci ini akan dijadikan sebagai acuan untuk membangun website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya baik dari segi desain, gaya, warna, dan tipografi.

Tabel 3.2 Analisis Penentuan Keyword Segmentating Simple & Flexible Young Active Colorful Fresh Active Urban Clean Targeting Energetic Dynamic Dynamic Enthusiatic Intellectual Smart Rational Positioning Modern Simple Mobile Elegant Speed Easy Simple Comfortable Frienly

Kata kunci yang akan digunakan adalah Simple & Flexible. Kata Simple dan Flexible dapat digunakan sebagai acuan dalam membuat keseluruhan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Kata simple berarti keadaan jaman yang modern ini membuat masyarakat semakin mudah dan menyederhanakan pekerjaan dengan teknologi. Sedangkan kata Flexible mewakili teknik yang akan digunakan untuk website ini. Karena website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya bisa diakses dimana saja asalkan ada koneksi internet dan dapat ditampilkan

diberbagai macam perangkat yaitu, personal komputer, komputer tablet, dan ponsel pintar.

3.6Tahap Perancangan Karya

Pada tahap ini menjelaskan tahapan perancangan karya pada gambar 3.6 sesuai dengan hasil analisis yang telah didapatkan sebelumnya.

Gambar 3.6 Bagan alur perancangan karya (Sumber: Hasil olahan peneliti)

3.6.1 Pra Produksi

Tahap pra produksi ini adalah tahap penting sebelum produksi website. Pada tahap ini akan dijadikan acuan semua aspek dalam tahap produksi website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya

1. Ide

Melihat perkembangan teknologi begitu pesat dengan bermunculannya berbagai macam merk dan type ponsel pintar yang dijual dipasaran. Dari hari ke hari semakin banyak yang menggunakan ponsel untuk mengakses internet baik untuk sosial media, browsing, jual beli online, dan lain-lain.

Kecenderungan masyarakat yang sudah semakin beralih ke perangkat mobile yang bisa dengan mudah dibawa kemana-mana. Maka munculah pemikiran untuk menerapkan teknik Responsive Web Design (RWD) pada website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Dimana teknik ini dapat menampilkan sebuah website pada berbagai perangkat yaitu, personal komputer, komputer tablet, dan ponsel pintar dengan tampilan yang dapat menyesuaikan ukuran layar masing-masing perangkat tersebut.

2. Konsep

Sebuah ide dasar akan dikembangkan menjadi sebuah konsep agar mudah dipahami dan selanjutnya diwujudkan menjadi sebuah proyek. Konsep dapat dipahami sebagai dasar pemikiran yang strategis untuk mencapai satu tujuan.

Konsep besifat pemikiran, dan tidak besifat operasional. Konsep membutuhkan implementasi dan besifat rencana (Masri. 2010: 27).

Konsep pertama adalah sesuai dengan judul penelitian yaitu website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya akan dibangun dengan menerapkan teknik Responsive Web Design (RWD) untuk memaksimalkan tampilan website diberbagai perangkat seperti, personal komputer, komputer tablet, dan ponsel pintar. Teknik ini memiliki keunggulan sebagai berikut:

a. Dapat memaksimalkan antarmuka diberbagai macam perangkat.

b. Membuat pengunjung lebih nyaman karena website akan menyesuaikan tampilan sesuai dengan ukuran layar monitor.

c. Teknik ini direkomendasikan oleh google untuk meningkatkan pencarian. Konsep kedua adalah website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya menggunakan desain yaitu flat design. Flat

design berfokus pada functionality and clarity (http://onsydney.com.au), juga

dipilih karena beberapa alasan sebagai berikut:

a. Flat design mulai semakin populer setelah kemunculan iOS 7 pada iphone tnggal 18 september 2013 (http://appel.com).

b. Antarmuka yang efisien.

c. Meningkatkan kemampuan akses pengguna.

d. Minimalis, tanpa efek, dan mengunakan vibrant colours yang didominasi warna primer atau sekunder.

Tanpa semua elemen mengganggu seperti bayangan, gradien dan flash. Aksesibilitas pengguna dan pengalaman User (UX) pasti akan meningkat. Dengan kombinasi yang baik dari ruang yang cukup, pengguna akan tidak sulit menemukan dan menelusuri situs anda dan menemukan apa yang mereka cari (http://www.mkels.com). Desain ini sangat cocok untuk website yang responsif karena saat perubahan ukuran layar dalam tampilan mobile, website akan terlihat bersih dan konten seperti tulisan, navigasi, dan lain-lain terlihat lebih jelas tanpa mengganggu pandangan pengguna.

3. Sitemap (Peta situs)

Sitemap atau peta situs adalah seperti sebuah denah/lokasi yang menempatkan semua link url yang ada di halaman website kita sebagai tinjauan bagi pengunjung untuk mengetahui lebih jauh isi dari website tersebut. Fungsi dari sitemap ini adalah untuk memudahkan mesin pencari untuk menemukan artikel atau sebuah topik terkait dalam sebuah website. Berikut ini pada gambar 3.13 adalah alur peta situs dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

Gambar 3.7 Sitemap (alur website) (Sumber: Hasil olahan peneliti)

Alur peta situs dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dirancang dengan empat level menu seperti yang terlihat pada gambar 3.7 di atas. Yang pertama adalah pada halaman dashboard (index.html) merupakan halaman pertama dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Ketika

pengunjung mengakses website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya maka akan berhadapan dengan menu utama yaitu level satu. Setelah memilih salah satu menu yang ada pada level satu maka akan menuju ke level dua. Begitupun selajutnya jika memilih salah satu menu pada level dua maka pengujung akan menuju level tiga, contohnya jika pengujung memilih menu fasilitas pada level dua. Terakhir adalah jika pengunjung memilih salah satu menu pada level tiga maka akan menuju ke level empat, yaitu menu tersebut adalah menu dari studio yang akan memberikan beberapa pilihan yang menuju ke level empat.

4. Font

Berikut ini pada gambar 3.8 adalah analisis untuk penggunaan huruf pada website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

Gambar 3.8 Pemilihan jenis font Sans-serif (Sumber: Hasil olahan peneliti)

Alasan memilih font sans-serif terlihat pada gambar 3.10 yang menunjukkan font jenis sans-serif sangat tepat digunakan pada website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya, karena memiliki karakter simpel sesuai dengan keyword.

5. Analisis warna

Dalam tahap analisis warna ini peneliti akan menganalisis warna dengan konsep flat desain yang disesuaikan dengan kata kunci simple dan fleksibel. Maka dengan konsep tersebut dimana flat desain menggunakan vibrant

colours karena memiliki karakter cerah, colorful, responsif, dan dinamis

(http://thefreedictionary.com). Warna yang yaitu menggunakan warna dasar dari warna primer merah, kuning, dan biru seperti pada gambar 3.11.

Gambar 3.9 Warna primer (merah, kuning, dan biru) (Sumber: Hasil olahan peneliti)

Ketiga warna ini akan dipadukan dengan warna dari bendera Prodi Komputer Multimedia yaitu warna oranye. Setelah mendapat warna tersebut, untuk mendapatkan warna yang berkarakter simpel dengan warna yang soft dan tidak mencolok maka dilakukan penambahan warna terang dan warna gelap seperti pada gambar 3.10. Lalu dengan aplikasi adobe kuler pada gambar 3.11 untuk melihat hasil dari kombinasi wrna tersebut.

Gambar 3.10 Penambahan warna terang dan werna gelap (Sumber: katorlegaz.com)

Gambar 3.11 Tampilan aplikasi Adobe Kuler untuk memilih kombinasi warna (Sumber: https://kuler.adobe.com/)

Gambar 3.12 Lima kombinasi warna (Sumber: Hasil olahan peneliti)

Pada gambar 3.12 adalah hasil akhir warna yang didapat dan menggambarkan simple karena tidak terlalu mencolok dengan warna yang soft. Serta kombinasi lima warna (vibrant colours) yang menggambarkan fleksibel.

3.6.2 Produksi

Tahap produksi ini diawali dengan membuat wireframing navigasi dan layout. Pada dasarnya layout dapat dijabarkan sebagai tata letak elemen-elemen desain terhadap suatu bidang dalam media tertentu untuk mendukung konsep atau pesan yang dibawanya. Me-layout adalah salah satu proses atau tahapan kerja dalm desain. Dapat dikatakan bahwa desain merupakan arsiteknya, sedangkan layout adalah pekerjanya (Rustan. 2008: 0).

Melangkah ke tahap wireframing, ini adalah tahap yang sangat penting dalam membuat rancangan dasar dari website yang akan saya terapkan pada website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

Wireframing merupakan tahap menterjemahkan gambar sketsa dasar atau sebuah

coretan pensil kedalam bentuk yang lebih rapi dan mudah dimengerti. Mulai dari tahap pembagian layout dasar hingga bagian detail dari website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya. Bertujuan untuk menentukan hirarki desain arsitektur website, sehingga dapat merencaknakan tata letak sesuai dengan sudut pandang pengguna memproses informasi dari website. Wireframing merupakan langkah yang bagus untuk memulai sebelum melompat ke aplikasi pengolah gambar karena memungkinkan kita untuk fokus pada komponen penting dari situs web tanpa semua visual dari desain selesai (http://webdesign.tutsplus.com). Wireframing juga akan menghemat waktu Anda ketika merancang sebuah situs web karena kegiatan wireframing sebagai sketsa, dan daripada harus melakukan hal-hal lebih dari sekali di pengolah gambar. Pada

wireframe harus menyertakan kotak yang mewakili gambar, header, footer, sidebar, blok teks, navigasi dan aspek konten lain dari situs web.

Sebelum menuju ke tahap wireframing setiap halaman, berikut ini pada gambar 3.17 adalah pembagian layout secara garis besar. Layout pada semua halaman umumnya dapat dibagi menjadi tiga bagian yaitu, header, body, dan footer. Bagian header memuat informasi mengenai logo Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya yang berada di sebelah kiri dan logo STMIK STIKOM Surabaya yang berada disebelah kanan. header ini adalah bagian yang dapat ditemukan pada semua halaman dengan fomat yang sama. Pada bagian body adalah bagian yang memuat isi yang tergantung pada setiap halaman yang dipilih. Sedangkan pada bagian footer adalah bagian yang memuat informasi pendaftaran mahasiswa dan informasi kontak dan alamat dari Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

Gambar 3.13 Layout halaman dibagi menjadi tiga bagian (Sumber: Hasil olahan peneliti)

Setelah membagi layout menjadi tiga bagian maka dilanjutkan membagi lagi setiap masing-masing bagian tersebut untuk lebih detail akan dijelaskan melalui gambar 3.13. Pada gambar 3.14 dapat dilihat bahwa pada header, body, dan footer telah dimasukkan elemen-elemen apa saja yang ada di setiap bagian tersebut.

Gambar 3.14 Detail layout pada setiap bagian (header, body, dan footer) (Sumber: Hasil olahan peneliti)

Berikut ini adalah gambar dari tahap wireframing beberapa halaman yang terdapat pada website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya.

1. Wireframing desain layout Dashboard

Pada gambar 3.15 di atas merupakan gambar wireframing dari halaman dashboard (index.html). Pada gambar sebelah kiri merupakan wireframing halaman dashboard dengan tampilan normal pada desktop. Sedangkan pada gambar sebelah kanan merupakan wireframing tampilan website pada smartphone.

Gambar 3.15 Wireframing desain layout Dashboard (index.html) (Sumber: Hasil olahan peneliti)

2. Wireframing desain layout Dosen dan Staf

Gambar 3.16 Wireframing desain layout halaman Dosen dan Staf (Sumber: Hasil olahan peneliti)

Pada gambar 3.16 di atas merupakan gambar wireframing dari halaman dosen. Halaman ini menampilkan foto para dosen dan staf di Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya serta sekilas dari jabatan dan profil masing-masing. Pada gambar wireframing sebelah kiri merupakan website dengan tampilan normal pada desktop. Sedangkan gambar wireframing sebelah kanan adalah tampilan website pada

smartphone. Terdapat beberapa perbedaan antara tampilan normal pada

desktop dengan tampilan smartphone yaitu, foto masing-masing dosen dan staf ditampilkan dengan dibagi menjadi tiga kolom, sedangkan pada smartphone, foto tersebut akan ditampilkan satu demi satu secara berurutan dari atas lalu kebawah. Hal ini dilakukan untuk kenyamanan pengunjung

90

4.2.2 Label CD

Gambar 4.16 Label CD (Sumber: Hasil olahan peneliti)

4.2.3 Sampul CD

Gambar 4.17 Sampul CD (Sumber: Hasil olahan peneliti)

91

BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan hasil pembuatan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya ini dapat disimpulkan sebagai berikut: 1. Website Program Studi DIV Komputer Multimedia STMIK STIKOM

Surabaya telah selesai dibuat dengan teknik desain website responsif untuk memaksimalkan antarmuka pada personal komputer, komputer tablet, dan

smartphone.

2. Pembuatan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dengan teknik Responsive Web Design (RWD) melalui tahapan yang cukup panjang, mulai dari pra-produksi, implementasi hingga tahap uji coba.

3. Tahap uji coba website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya berjalan dengan baik dan dapat dinikmati oleh masyarakat melalui masing-masing perangkat yang dimiliki, baik melalui personal komputer, komputer tablet, dan smartphone.

4. Memerlukan perangkat yang mendukung koneksi internet dan peramban yang baik seperti Mozilla Firefox sehingga dapat menampilkan website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dengan tampilan antarmuka yang maksimal.

92

5. Sebelum membuat website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dengan teknik Responsive Web Design (RWD)

sebelumnya harus terlebih dahulu menganalisa website dari beberapa kompetitor yang juga menggunakan teknik yang sama.

6. Pentingnya sebuah lembaga seperti Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya memiliki website dengan desain responsif adalah untuk media eksistensi dan menyebarkan informasi dengan cepat kepada mahasiswa sebagai pengguna dan masyarakat pada umumnya. 7. Website Program Studi DIV Komputer Multimedia STMIK STIKOM

Surabaya ini akan terus dikembangkan lebih lanjut sesuai dengan kebutuhan.

5.2 Saran

Saran yang dapat peneliti sampaikan setelah menyelesaikan proyek website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya adalah pengembangan website selanjutnya. Setelah menggunakan teknik Responsive Web Design (RWD), website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dapat dikembangkan lagi dengan pengoptimalan SEO (Search engine optimization). SEO biasa juga disebut internet marketing berfungsi untuk meningkatkan jumlah pengunjung website Program Studi DIV Komputer Multimedia STMIK STIKOM Surabaya dengan meningkatkan ranking website dan memudahkan pencarian di mesin pencari Google.

DAFTAR PUSTAKA

Sumber Buku

Buku Pedonam Administrasi dan Kurikulum STMIK STIKOM Surabaya 2013/2014.

Hakim, Lukmanul. 2009. Trik Rahasia Master PHP. Yogyakarta: Loko Media. Hakim, Lukmanul. 2010. Bikin Website Super Keren dengan PHP & jQuery.

Yogyakarta: Loko Media.

Kertajaya, Hermawan. 2006. Hermawan Kertajaya on Marketing Mix. Bandung: Mizan Pustaka.

Martin, Dian dan Zeembry. 2013. 212 Tips Mastering Profesional Web Design. Jakarta: Elex Media Komputindo.

Masri, Andry. 2010. Strategi Visual.Yogyakarta: Jalasutra.

Puji Oktavian, Diar. 2010. Menjadi Programmer Jempolan Menggunakan PHP.

Yogyakarta: MediaKom.

Rustan, Surianto. 2010. Layout dasar & Penerapannya. Jakarta: Gramedia Pustaka Utama.

Wiswakarma, komang. 2009. Membuat Katalog Online dengan PHP dan CSS. Yogyakarta: Loko Media.

Sumber Internet

Ardiansyah, Deva. 2013. Pengertian dan Fungsi Personal Computer (PC) Beserta Perkembangannya .(http://pakdevakeren.blogspot.com/2013/08/pengerti-an d.(http://pakdevakeren.blogspot.com/2013/08/pengerti-an-fungsi-personal-computer.html) diakses pada t.(http://pakdevakeren.blogspot.com/2013/08/pengerti-anggal 9 Desember 2013.

HarianTI.com. 2013. Penjualan Tablet di Indonesia Paling Tinggi se-Asia Tenggara. (http://harianti.com/ penjualan-tablet – di – indonesia -paling-tinggi-se-asia-tenggara/) diakses pada tanggal 1 Desember 2013.

http:// www.apple.com/. diakses pada tanggal 9 Desember 2013. http://arts.stanford.edu/. diakses pada tanggal 15 Desember 2013.

http:// www.businesskorea.co.kr. diakses pada tanggal 9 Desember 2013. http:// www.co.uk. diakses pada tanggal 9 Desember 2013.

http://dotcomcell.com/kumpulan-artikel/2010/11/apa-itu-situs-web-website.html. diakses pada tanggal 10 Desember 2013.

http://www.itb.ac.id/. diakses pada tanggal 15 Desember 2013. http://www.mkels.com. diakses pada tanggal 17 Desember 2013. http://moore.edu/. diakses pada tanggal 15 Desember 2013.

http://www.onsydney.com.au/the-5-rules-of-flat-design/. diakses pada tanggal 15 Desember 2013.

http://thefreedictionary.com. diakses pada tanggal 17 Desember 2013.

http://training.adobe.com/certification. diakses pada tanggal 7 Desember 2013. http://www.ucsd.edu/. diakses pada tanggal 15 Desember 2013.

http://www.utah.edu/. diakses pada tanggal 15 Desember 2013. http://www.w3schools.com/.diakses pada tanggal 9 Desember 2013.

Info_diproses.2013. Pengertian Smartphone. http://diproses.blogspot.com/ 2013/

06/ pengertian smartphone.html#.UwDs286um6-) diakses pada tanggal 7 Desember 2013.

Kanganto.com. 2013. Responsive Design, Solusi Desain Web Yang Fleksibel. (http://kangtanto.com/web-2/responsive-design-solusi-desain-web-yang-fleksibel) diakses pada tanggal 1 Desember 2013.

Lim, Winnie. 2012. A Beginner's Guide to Wireframing. (http://webdesign. tutsplus.com/ tutorials/ a-beginners-guide-to

wireframing--webdesign-7399) diakses pada tanggal 7 Desember 2013. Liputan6.com. 2013. Akan Ada 103,7 Juta Pengguna Smartphone di Indonesia.

(http://tekno.liputan6.com/read/731892/akan-ada- 1037- juta- pengguna-smartphone-di-indonesia) diakses pada tanggal 1 Desember 2013.

Loyd, Jeremy. 2013. Understanding Typographic Hierarchy. (http://webdesign. tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636) diakses pada tanggal 7 Desember 2013.

Marcotte, Ethan. 2010. Responsive Web Design. (http://www.alistapart.com /articles/responsive-web-design/) diakses pada tanggal 2 Desember 2013. Oetama, Yoetama. 2013. Pengertian PC Tablet dan Fungsi Lengkap.

(http://yoetama.blogspot.com/2013/03/pengertian-pc-tablet-dan-fungsi-lengkap.html) diakses pada tanggal 9 Desember 2013.

Rudy. 2010. Fungsi Website. (http://rudywebdesign.com/blog/2010/12/27/fungsi-website/) diakses pada tanggal 10 Desember 2013.

Wijanarko, Lizard. 2010. Pengertian Serif dan Sans Serif. (http://www.ahlidesain.com/pengertian-serif-dan-sans-serif.html) diakses pada tanggal 7 Desember 2013.