materi 1

PEMROGRAMAN WEB

Pemrograman Web

Febriyanti Darnis,S.ST., M.Kom NIDN.0206029002

Universitas Selamat Sri

Febriyanti Darnis/Komputer Web Desain

Pertemuan 1 29 Sept 2020

1

PERTEMUAN 1 : MENGENAL TEKNOLOGI INTERNET WEBSITE 1.1. DEFINISI 1.1.1 Sejarah Internet Internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut ARPANET (Advanced Research Project Agency Network), di mana mereka mendemonstrasikan bagaimana dengan hardware dan software komputer yang berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak terhingga melalui saluran telepon. Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol/Internet Protocol). Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada saat itu Departemen Pertahanan Amerika Serikat (US Department of Defense) membuat sistem jaringan komputer yang tersebar dengan menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan. Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford Research Institute, University of California, Santa Barbara, University of Utah, di mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara tersebut ingin bergabung, sehingga membuat ARPANET kesulitan untuk mengaturnya. Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan non-militer seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi Internet. Perkembangan teknologi Informasi dan Komunikasi (TIK) yang pesat menyebabkan perubahan pola sistem jaringan menjadi semakin efisien. Awal mula teknologi Internet (interconnection-networking) hanya untuk menghubungkan

Febriyanti Darnis/Komputer Web Desain

2

jaringan antar komputer berbasis Internet Protocol (IP) sebagai protokol pertukaran paket data (packet switching communication protocol). Pada perkembangannya untuk melayani miliaran pengguna di seluruh dunia dibuatlah rangkaian Internet yang terbesar yang kemudian dinamakan Internet.

1.1.2 Layanan Internet Internet (kependekan dari interconnection-networking) adalah seluruh jaringan komunikasi yang menggunakan media elektronik, yang saling terhubung menggunakan standar sistem global Transmission Control Protocol/Internet Protocol Suite (TCP/IP) sebagai protokol pertukaran paket (packet switching communication protocol) untuk melayani miliaran pengguna di seluruh dunia. Rangkaian jaringan yang terbesar dinamakan Internet. Cara menghubungkan rangkaian dengan kaidah ini dinamakan internetworking ("antarjaringan").

Febriyanti Darnis/Komputer Web Desain

3

Internet adalah kumpulan dari berbagai jaringan komputer yang saling interkoneksi yang mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti telepon, fiber-optic, wireless dan lainnya.



 

WWW (world wide web) Adalah salah satu bentuk layanan yang dapat diakses melalui internet. Biasa disingkat sebagai Web. Merupakan sekumpulan dokumen, gambar-gambar, dan bentuk resources yang lainnya yang dihubungkan melalui hyperlinks dan URLs.





Protokol Merupakan bahasa/software standar untuk mengatur komunikasi jaringan komputer TCP/IP (Transmission Control Protocol Internet Protocol) merupakan cara standar untuk mempaketkan dan menyelamatkan data komputer (sinyal elektronik) sehingga data tersebut dapat dikirim ke komputer yang lain.

Febriyanti Darnis/Komputer Web Desain

4

Protokol Transfer adalah protokol yang digunakan untuk pengiriman informasi di internet. Beberapa protokol transfer:  HTTP  protokol standar untuk suatu dokumen web  FTP (File Transfer Protocol)  digunakan untuk mentransfer file dalam format text atau binary dalam suatu server komputer diinternet.  Gopher  digunakan untuk mengakses server gopher yang menyediakan informasi dengan menggunakan suatu sistem menu atau melalui hubungan telnet.  News NNTP (Network News Transfer Protocol)  digunakan untuk mendistribusikan berita di USENet. USENet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut news-group.  Telnet  digunakan untuk login ke suatu server komputer.

•

• •

HTTP (Hypertext Transfer Protocol) : Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta dan mengambil suatu dokumen dan oleh web server dalam menyediakan dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML. HTTP adalah protokol komunikasi yang digunakan dalam web Spesifikasi HTTP standar (HTTP 1.1) dideskripsikan di RFC 2616 (http://www.ietf.org/rfc/rfc2616.t xt)

Febriyanti Darnis/Komputer Web Desain

5

•

contoh “obrolan“ komunikasi antara browser dan server untuk menghantarkan sebuah dokumen web yang disisipi sebuah gambar:

URL (Uniform Resource Locator) : digunakan untuk menentukan lokasi informasi pada suatu web server. dapat diibaratkan sebagai suatu alamat, yang terdiri dari: • Protokol yang digunakan oleh suatu browser untuk mengambil informasi • Nama komputer (server) dimana informasi tersebut berada • Jalur/path serta nama file dari suatu informasi

•

•

DNS (Domain Name System) Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet. Merupakan suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet

Sumber : Imperva.com

Febriyanti Darnis/Komputer Web Desain

6

•

•

DNS (Domain Name System) : Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet. Merupakan suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet.

Sumber : https://www.linimasaade.com

Server dan Client : • •

•

Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu: Server  penyedia berbagai layanan termasuk web. Layanan web ditangani oleh sebuah aplikasi bernama web server. Client  bertugas mengakses informasi yang disediakan oleh server. Pada layanan web, client dapat berupa web browser.

Web Server  Berjalan pada komputer server  Sebagai tempat menyimpan file-file dokumen web sehingga dapat diakses oleh pengguna internet.

Contoh-contoh: • Apache  Multi • MS Intenet Information Server (IIS)  Windows • Tomcat (for Java)  Multi

Febriyanti Darnis/Komputer Web Desain

7

Web Browser • Berjalan pada komputer user • Merupakan tool untuk melakukan navigasi di web • Menampilkan dokumen web.

1.2. DESAIN WEB Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan. Sebagian dari aspek yang mungkin tercakup pada desain web atau produksi web adalah menciptakan animasi dan grafik, pemilihan font, pemilihan warna, navigasi, isi. Desain web juga menggabungkan pada seni programing dan pengembangan ecommerce.

WWW adalah kependekan dari World Wide Web, atau lebih dikenal dengan nama web. Web adalah sebuah layanan yang didapat oleh pemakai komputer apabila komputernya tersambung dengan internet.

Febriyanti Darnis/Komputer Web Desain

8

Cara kerja www : Penjelasan Cara Kerja WWW : •

•

•

•

Informasi – informasi yang dibuat disimpan dalam sebuah dokumen web pages pada sebuah tempat penyimpanan, yaitu hardisk. Dokumen web yang disimpan dalam sebuah harddisk terletak pada web server apabila komputer yang dimaksud telah dilengkapi dengan web server seperti IIS, PWS atau Apache Server. Dalam hal ini komputer bertugas sebagai server sekaligus menyimpan informasi. Komputer yang bertugas sebagai client membaca informasi yang terdapat pada web pages melalui sebuah jaringan internet dengan mengambil informasi yang tersimpan pada komputer server. Komputer client menampilkan halaman web dengan menggunakan sebuah program khusus, yaitu browser.

•

•

Browser web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman web yang tersimpan dalam komputer. Dengan menerapkan Grafik User Interface (GUI), maka para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat pada internet.

Cara Kerja Browser Web • Browser web mengambil sebuah informasi melalui jaringan internet pada sebuah server web dengan perintah request. • Server web memberikan umpan balik atau feedback, dengan memberi perintah responen. • Browser web menampilkan informasi yang telah diterima dari server web. •

Febriyanti Darnis/Komputer Web Desain

9

1.2.1

Website

Fungsi Website Fungsi Komunikasi (email, form contact, cahtting, forum dan sebagainya.)

Fungsi Informasi ( News, Profile, Company, Library, Reference dan sebagainya.)

Fungsi Intertainment (game online, film online, musik online dan sebagainya.)

Fungsi Transaksi (sarana bisnis, baik barang, ataupun jasa dengan metode, transaksi menggunakan kartu kredit atau pun transfer.)

Jenis Situs Website

Perencaan dalam merencang situs pemasaran dan promosi :  URL atau alamat situs web dapat menjadi aset pemasaran tersendiri dan disesuaikan dengan posisi yang diinginkan.  Halaman web harus mengesankan pengunjung.  Letak isi menu tidak perlu terlalu banyak cukup simple akan tetapi menampilkan latar belakang perusahaan (citra diri perusahaan).  Situs ini hanya memberikan informasi tidak bisa digunakan untuk transaksi online.  Informasi produk harus jelas.  Ada pencatatan pengunjung (guest book).

Febriyanti Darnis/Komputer Web Desain

10

Perencanaan dalam merancang situs:  Adanya marketing tool  Adanya referensi atau informasi tambahan  Penggunaan web dirancang semudah mungkin

Perencanaan dalam merancang situs:  Adanya marketing tool  Informasi yang ditampilkan harus lengkap dan jelas.  Halaman situs user friendly (mudah untuk dipahami).  Transaksi hanya dapat dilakukan secara offline

Beberapa hal yang harus diperhatikan adalah :  Membuat nama domain sendiri.  Kecepatan akses sangat penting jadi jangan terlalu banyak menggunakan animasi bergerak.  Pemilihan server (keamanan, kemudahan akses, stabilitas sistem server)  Tampilan situs memiliki kesan profesional  Email balasan  Cara pembayaran yang selengkap mungkin  Pencarian yang memudahkan pengunjung  Proses transaksi cepat dan mudah

Febriyanti Darnis/Komputer Web Desain

11

Membuat nama domain sendiri.  Sederhana : Untuk memudahkan peserta didik untuk menggunakan dan memanfaatkan menu yang ada untuk memahami sistem e-lerarning.  Cepat : Bertujuan untuk kecepatan respon terhadap sebuah layanan keluhan dan kebutuhan perbaikan peserta didik sehingga perbaikan pembelajaran dapat dilakukan secepat mungkin oleh pengajar atau pengelolah.  Personal : Peserta didik dapat berkomunikasi dengan baik layaknya komunikasi tatap muka pengajar dengan peserta didik secara langsung, peserta didik dapat dibantu kemajuannya dan segala persoalan yang dihadapi

Febriyanti Darnis/Komputer Web Desain

12

1.2.2

Prinsip Dasar Web Desain

Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan prinsip – prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip – prinsip yang harus diperhatikan antara lain:

Unik Komposisi Simple Semiotik Ergonomis Fokus

Konsistensi

Febriyanti Darnis/Komputer Web Desain

13

Unik

Komposisi

Simple

Semiotik

•Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain.

•Untuk memperindah tampilan halaman web, seorang web designer harus betul-betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang dibuatnya.

•Banyak dari seorang web designer yang memegang prinsip – prinsip “Keep it Simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif

•Arti semiotik adalah ilmu yang mempelajari tentang tanda – tanda. Dalam hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti keika melihat tanda dan gambar yang ada dalam suatu website.

•Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan pengunjung dalam membacadan kecepatan yang akan diperoleh pengunjung dalam mencari informasi. Hal – hal yang perlu diperhatikkan oleh seorang webdesigener untuk mencapai prinsip ini adalah pemilihan ukuran fon yang tepat dan mudah dibaca, menempatkan link Ergonomis, sedemikian rupa sehingga mudah dan dapat diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informative.

Fokus

•Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, dengan adanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dulu harus dibaca atau dilihat

•Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen – elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan Konsistensi visi serta misi dari website tersebut.

Febriyanti Darnis/Komputer Web Desain

14

Marketing

Berita Customer Service

Ecommerce

Febriyanti Darnis/Komputer Web Desain

15

01

Menentukan Isi Website

 Isi website sangatlah penting, hal ini akan berkaitan dengan manfaat yang akan diperoleh pengunjung website.

02

 

Menentukan Target Pengunjung  Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjung oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada pengguna hardware dan aplilkasi browser yang berbeda dengan setiap pengunjung.  Target pengunjung berpengaruh terhadap tampilan layout website dan informasi yang akan disampaikan didalam website

03

Menentukasn struktur website  Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang terorganisasi dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing dan pemeliharaan website tersebut.  Struktur website diperlukan untuk memberikan kemudahan dalam pengolahan website, jadi struktur terorganisir dengan baik

Febriyanti Darnis/Komputer Web Desain

16

KONSEP DASAR DESAIN

Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada dasarnya mengikuti prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam memperhatikan prinsip desain.Prinsip desain tersebut adalah:

01

Komunikatif Prinsip komunikatif berhubungan dengan corporate identy, isi pesan serta audiens.

02

Estetis Fungsi estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.

03

Ekonomis Desain web harus memperhatikan factor ekonomis dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu web.

Febriyanti Darnis/Komputer Web Desain

17

ELEMEN LAYOUT Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman – pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen – elemen layout. Pedoman – pedoman yang dimaksud adalah:

Keseimbangan adalah hasil susunan satu atau lebih elemen desain sehingga antara satu dengan lainnya memiliki bobot yang sama. Ada tiga jenis keseimbangan antara lain : a. Keseimbangan Simetris (Formal) Adalah keseimbangan yang memiliki elemen yang bobotnya sama pada dua sis garis vertikal imajiner halaman web. Sehingga bentuknya menjadi terkesan formal, sederhana, mudah pembuatannya tetapi terkesan membosankan dan kurang menarik.

Gambar. Keseimbangan Simetris

Febriyanti Darnis/Komputer Web Desain

18

b. Keseimbangan Asimetris (Informal) Keseimbangan Asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis vertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanya ruang kosong, berkesan santai dan kasual.

Beberapa Faktor yang harus diperhatikan yaitu :  Warna sebagai penyeimbang antar objek. Bila objek lebih besar dari yang lain berikan warna muda atau warna yang tidak terlalu kuat dan sebaliknya.  Bentuk, dimanaobjek yang memiliki kesan datar namun memiliki detail bentuk yang sederhana akan seimbang dengan objek kecil dengan detail yang lebih teliti.  Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihat seimbang dengan area dan objek yang lebih kecil pada lawan arahnya.

Gambar. Keseimbangan Asimetris

c. Keseimbangan Radial Semua elemen memancar keluar dengan model melingkar dari titik tengah suatu objek. Keseimbangan radial lebih mudah untuk diimplementasikan karena objek akan seimbang bila objek berada ditengah. Untuk itu dengan menempatkan objek pada posisi tengah maka desain akan nampak seimbang.

Febriyanti Darnis/Komputer Web Desain

19

Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen – elemen layout. Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yang diberikan negatis maka objek tersebut akan menjadi samarsamar, bahkan tidak terlihat karena terserap oleh background.

Informasi lebih dimengerti oleh pengguna bila mempunyai aliran – aliran yang baik, sedikit gangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain. Konttinuitas dapat dibuat dengan membuat halaman – halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya. Konsistensi membuat pengunjung nyaman karena dapat menjelajah situs dengan mudah. Ketika pengunjung membuka suatu halaman situs yang konsisten, dia akan langsung tahu kemana harus pergi dan dia juga tahu dimana sedang berada. Konsistensi dapat diterapkan pada margin, layout, huruf, warna dan yang paling utama adalah navigasi. Konsistensi sangat efektif untuk membangun brand perusahaan. Brand bukan hanya logo tapi sekumpulan atribut, meliputi logo, slogan, warna dan kualitas emosional.

Febriyanti Darnis/Komputer Web Desain

20

Gambar. Konsistensi pada Situs Web

Ruang kosong dibentuk dengan berbagai cara sehingga dapat menambah kesan elegan dan kesempurnaan pada suatu desain. Ruang kosong sebagai prinsip desain grafis mungkin dapat dilihat serupa dengan ruang yang ‘disiasiakan’. Ruang kosong kemudian berarti sebuah kemewahan dan semakin Anda kurang penggunaan sesuatu semakin Anda mendapatkan lebih banyak ‘the less you use the more you must have’.

Febriyanti Darnis/Komputer Web Desain

21

Lebih banyak ruang kosong dilihat sebagai sesuatu yang ‘lebih’ atau sesuatu yang ‘mahal’ dan dapat memberikan posisi tertentu dalam kaitan ‘brand‘ sebuah perusahaan dengan target penjualan dengan konsumen kelas atas atau posisi desain itu sendiri. Desain dengan ruang kosong yang rapat dan penuh sesak akan terlihat sebagai sebuah cara untuk ‘menghemat biaya’. Membuat ruang kosong akan benar-benar menambah nilai untuk ‘brand‘ pada produk tertentu.

Gambar. Ruang Kosong

Fungsi Ruang Kosong : Tempat istirahat mata pembaca Menghubungkan antara elemen-elemen dalam sebuah layout Membuat bentuk positif dan negatif Memberi nuansa 3 dimensi Menegaskan sebuah elemen Mempermudah pemahaman layout Membuat halaman tampak dinamis Mempermudah membaca text

Febriyanti Darnis/Komputer Web Desain

22

PEWARNAAN

Warna merupakan sensitivitas yang berhubungan dengan indra. Warna dapat merebut perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web. Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warna bersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warna perusahaan biasanya bersih, seperti biru, putih dan abu – abu. Warna anak – anak biasanya terkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer).

Warna mempunyai emosi yang melekat, yang bisa ditimbulkan dengan memperlihatkan keserasian warna dengan cara yang benar. Berikut ini yang makna terkandung di dalam warna :

Febriyanti Darnis/Komputer Web Desain

23

Warna banyak berperan dalam pembuatan situs, beberapa variasinya antra lain : a) Menegaskan elemen yang dianggap penting. b) Menarik perhatian. c) Membimbing pembaca untuk menentukan daerah mana yang seharusnya lebih dahulu dibaca. d) Menghubungkan antara satu elemen dengan yang lain (penggunaan warna background halaman yang sama dengan background foto) e) Mengatur informasi yang ditampilkan. f) Menentukan bagian yang berbeda pada sebuah grafik. g) Mengelompokan atau memisahkan elemen yang satu dengan yang lain. h) Membangkitkan respon yang emosional.

Febriyanti Darnis/Komputer Web Desain

24

a. Warna Primer Warna primer tidak bisa dibuat dengan mencampurkan warna lain, warna ini berdiri sendiri. Warna primer terdiri atas merah, kuning, dan biru.

Gambar. Warna Primer

b. Warna Sekunder Warna sekunder dibuat dengan mengkombinasikan dua warna primer. Warna sekunder terdiri atas orange, hijau dan ungu.

Gambar. Warna Sekunder c. Warna Tersier

Warna Tersier dibuat dengan mengkombinasikan warna primer dengan perbatasan warna sekunder. Warna tersier terdiri aatas kuning-hijau, kuning-orange, merah-orange, merah-ungu, biru-ungu, dan biru-hijau.

Gambar. Warna Tersier

Febriyanti Darnis/Komputer Web Desain

25

Keserasian bisa didefinisikan sebagai bagian dari susunan yang menyenangkan, bisa berwujud musik, puisi atau warna. Metode untuk memilih warna yang serasih, yaitu : a. Metode Warna Beruntun Warna beruntun terdiri atas tiga warna yang letaknya saling bersebelahan dan biasanya ada satu warna yang menonjol (dominan). Metode ini menghasilkan warna lembut yang serasi, Misalnya kuning, kuning-orange dan orange atau kuning, kuning-hijau dan hijau. b. Metode Warna Berlawanan Warna berlawanan terdiri dari atas dua warna yang letaknya saling bersebrangan. Metode ini menghasilkan warna yang lebih hidup (kontrasnya tinggi), misalnya biru dan orange, merah dan hijau, atau kuning dan ungu. c. Metode Warna Segitiga Warna segitiga sesuai dengan namanya terdiri atas tiga warna yang letaknya ditentukan dengan bentuk segitiga. Metode ini menghasilkan warna yang serasi, misalnya biru, merah dan kuning. d. Metode Warna Memudar Metode ini menggunakan satu warna yang diturunkan intensitas warnanya menjadi lebih muda, misalnya warna merah akan diturunkan intensitas warnanya sebanyak 50% atau 75%. e. Metode Warna Kombinasi Warna kombinasi adalah gabungan dari dua warna atau lebih yang menghasilkan warna yang harmonis. Beberapa warna kombinasi yang baik, yaitu :  Hitam, putih, abu – abu, merah  Merah, orange  Orange, Ungu  Ungu, Kuning  Hijau, Ungu  Biru, Kuning  Biru, Ungu, Putih  Hijau, Coklat  Teal, Ungu/Lilac f.

Metode Warna Hangat Warna hangat cocok digunakan untuk situs yang penuh semangat dengan tema yang berani dan tegas. Warna hangat terletak pada bagian kanan roda warna. Warna hangat terdiri dari kombinasi :      

Kuning Kuning-Orange Orange Merah-Orange Merah Merah-Ungu

Febriyanti Darnis/Komputer Web Desain

26

g. Metode Warna Dingin Warna dingin cocok untuk menyampaikan pesan yang sederhana yang memberi kesan tentram. Warna dingin terletak pada bagian kiri roda warna. Warna dingin terdiri dari kombinasi : 

    

Kuning-hijau Hijau Biru-hijau Biru Biru-ungu Ungu

Fungsi Pewarnaan : • Menegaskan elemen yang dianggap penting. • Menarik perhatian • Membimbing pembaca untuk menentukan daerah yang akan dibaca • Menghubungkan antar element • Mengatur informasi yang akan ditampilkan • Menentukan bagian yang berbeda pada sebuah grafik • Membangkitkan respon emosional

TIPOGRAFI Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dengan mudah dibaca.

Jenis huruf sangat banyak, tapi secara garis besar dapat dikategorikan menjadi lima, yaitu: a. Serif Jenis huruf ini merupakan jenis huruf yang tradisional, cirinya mempunyai “kaki” atau “ekor”, misalnya Times New Roman, Garamond, Palatino. Karena

Febriyanti Darnis/Komputer Web Desain

27

bentuk hurufnya yang berkaki membuat garis tidak kelihatan, ini memudahkan mata pembaca untuk menelusuri dan membaca teks. Jadi huruf ini cocok dipakai untuk teks yang panjang dengan jarak spasi yang sedikit. Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan konservatif. Cocok dipakai untuk organisasi, pemerintahan, pendidikan dan perusahaan.

Gambar . Font Serif

b. Sans-Serif Sans-serif yang berarti tidak berkaki (bahasa perancis), misal jenis huruf ini adalah Helvetica, Arial, Verdana dan Avant Garde. Jenis ini terlihat sederhana dan tidak formal, sehingga cocok untuk judul dan subjudul. Jika ingin menggunakan jenis ini untuk teks utama, imbangi dengan memberikan jarak spasi yang agak lebar pada teks.

Gambar. Font Sans-Serif

c. Dekoratif Jenis huruf yang mempunyai desain yang rumit, sesuatu yang baru dan menciptakan suasana hati yang membangkitkan emosi. Jadi jangan sampai digunakan untuk teks yang panjang atau isi dari halaman. Gunakanlah untuk judul dan grafik, tapi jangan terlalu banyak.

Febriyanti Darnis/Komputer Web Desain

28

Gambar. Font Dekoratif

d. Skrip Jenis ini menyerupai tulisan tangan. Jenis ini juga sering disebut kursif. Dan jangan terlalu banyak digunakan. Bentuk huruf ini memberikan kesan keanggunan, sentuhan pribadi dan kepuasan.

Brush Script Kuenstler Script Gambar. Font Skrip

e. Monospace Jenis huruf yang mempunyai jarak dan lebar yang sama pada setiap huruf, misalnya courier, monospace.

Gambar. Font Monospace

Ada beberapa tip agar huruf dapat dibaca dengan mudah dan enak dilihat, yaitu: a) Buatlah kontras yang tinggi antara teks dengan latar belakang atau antara teks dengan gambar. b) Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sans-serif. Jenis huruf dekoratif atau kursif lebih sulit untuk dibaca, biasanya dipakai untuk judul, itupun harus berukuran besar. c) Kadang – kadang jenis huruf sans-serif mudah dibaca daripada serif ketika karakter yang digunakan berukuran kecil .

Febriyanti Darnis/Komputer Web Desain

29

d) Aturlah leading dan kerning. Leading adalah spasi antara dua baris teks, sedangkan kerning adalah jarak spasi antar huruf. e) Gunakan huruf standar yang terdapat pada semua komputer atau browser, seperti Times New Roman, Helvetica, Arial dan Verdana. Jika menginginkan jenis huruf lain yang unik untuk keindahan, jadikan huruf tersebut sebagai grafik.

Beberapa petunjuk atau aturan baku yang digunakan dalam penggunaan huruf, baik dalam pemilihan ukuran, jenis dan lain – lain: 1) Secara formal, pasangkan jenis huruf serif untuk isi halaman dan sans-serif untuk judul. 2) Jika menggunakan beberapa macam jenis huruf dalam sebuah halaman, biasanya jenis huruf dekoratif atau skrip digunakan untuk judul dan serif atau sans-serif untuk isi halaman, agar berfariasi. 3) Usahakan jangan lebih dari dua belas kalimat dalam satu baris teks, kanera akan mempersulit pembacaan. 4) Hindari pemakaian kombinasi dua huruf yang sangat mirip, karena menghasilkan kontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalam pandangan 5) Membatasi pemakaian jenis huruf dalam satu halaman. Jangan sampai melebihi tiga atau empat jenis huruf. 6) Hindari penggunaan slider (penggulungan halaman) lebih dari sekali. Apabila banyak artikel yang ingin ditampilkan, buatlah link ke halaman lain. 7) Ukuran huruf untuk isi halaman adalah 10-14 point dan judul adalah 14-30 point. 8) Memberikan ketebalan dan huruf besar (kapital) pada teks untuk judul, agar dapat membedakan dengan isi halaman 9) Hindari telalu banyak huruf besar karena akan memperlambat kecepatan membaca dan memboroskan ruang 10) Hindari pemakaian jenis huruf monospace untuk isi halaman, karena memerlukan banyak perhatian untuk membacanya. Hal ini dapat mengalihkan pesan yang ingin disampaikan.

Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dengan mudah dibaca.

Febriyanti Darnis/Komputer Web Desain

30

LAYOUT Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan pada suatu bagian tertentu. Secara umum, halaman web memiliki lima jenis layout dan pemilihan layout yang disesuaikan jenis informasi yang ditampilkan.

Biasanya digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.

Gambar . Model Layout Top Index

Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.

Gambar. Model Layout Bottom Index

Febriyanti Darnis/Komputer Web Desain

31

Biasanya digunakan untuk layar dengan resolusi yang lebar, sehingga mudah dalam penyediaan navigasi dibagian kiri seperti tampilan sistem opersi, tanpa menimbulkan kekacauan penyajian informasi pada halaman utama.

Gambar. Model Layout Left Index

Kebalikan dari Left Index tetapi menu utama jarang terletak pada bagian sebelah kanan melainkan sering digunakan untuk meletakan fitur atau kontent dari menu utama.

Gambar. Model Layout Right Index

Halaman akan terjaga keseimbangannya.

Febriyanti Darnis/Komputer Web Desain

32

Gambar. Model Layout Top Index

Biasanya digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah dan lain – lain.

Gambar. Model Layout Alternating Index

PEMBUATAN LAYOUT

Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini merupakan proses secara umum banyak dilakukan dalam pembuatan layout sebagai berikut :

Febriyanti Darnis/Komputer Web Desain

33

1. Membuat Sketsa Desain Seorang desainer bias saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu membuat sketsa diatas kertas. Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakan software. 2. Membuat Layout Desain Banyak software yang dapat digunakan membuat layout. Salah satu diantaranya adalah Macromedia, Microsoft Fronpage proses ini dikerjakan setelah pembuatan sketsa desain. Namun terkadang pembuatan layout merupakan proses yang pertama kalai dikerjakan. 3. Membagi Gambar Menjadi Potongan-Potongan Kecil Proses ini diperlukan untuk meng-optimize waktu download. 4. Membuat Animasi Animasi diperlukan untuk menghidupkan atau menjadikan website lebhi interaktif. 5. Membuat HTML Setelah merapikan layout desain lengkap dengan tombol, image, teks, script HTML, hal yang perlu dilakukan kemudian adalah membuat layout ke dalam format HTML.

Berikut ini merupakan proses secara umum banyak dilakukan dalam pembuatan layout sebagai berikut : • Membuat sketsa desain • Membuat layout desain • Membagi gambar menjadi potongan – potongan kecil • Membuat animasi • Membuat HTML

Febriyanti Darnis/Komputer Web Desain

34

KRITERIA SITUS WEB YANG BAIK

1. Usability Usability adalah sebagai suatu pengalaman pengguna dalam berinteraksi dengan aplikasi atau situs web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Website harus memenuhi lima syarat untuk mencapai tingkat usability yang ideal, antara lain : a. Mudah untuk dipelajari Letakkan isi yang paling penting pada bagian atas halaman, agar pengunjung dapat mendapatknya dengan cepat. b. Efisien dalam penggunaan Jangan menggunakn link yang terlalu banyak, sediakan seperlunya dan hantarkan pengunjung untuk menncapai informasi yang diperlukan dengan cepat dan mudah. c. Mudah untuk diingat

Situs jangan terlalu banyak melakukan peruban yang terlalu mencolok khususnya pada navigasi. d. Tingkat kesalahan rendah

Hindari link yang tidak berfungsi (broken link) atau halaman masih dalam proses pembuatan (under construction). e. Kepuasan pengguna

Kepuasan adalah hal yang penting untuk diperhatikan untuk keberlngsungan website.

2. Navigasi Beberapa tip untuk membuat navigasi yang baik, yaitu : 1) Buatlah navigasi yang jelas dan ringkas. 2) Umumnya, navigasi diletakan di sebelah kiri atau di atas sebuah halaman web. 3) Navigasi bisa berbentuk teks atau grafik. Apabila navigasi berbentuk grafik sertakan pula teks pada grafik tersebut. 4) Berikan ruang antara navigasi. 5) Hindari pemakaian frame untuk navigasi, karena membuat desain terlihat statis. 6) Jaga konsistensi. Letakan pada tempat yang sama di tiap halaman, gunakan warna yang sama, dan tempatkan pada tempat yang mudah untuk dilihat. Beberapa tip untuk membuat link yang standar, yaitu : 1) Gunakan garis bawah untuk menandai sebuah link. Dan hindari garis bawah teks yang bukan link. 2) Bedakan warna sebuah link yang belum pernah dikunjungi dengan yang sudah.

Febriyanti Darnis/Komputer Web Desain

35

3) Jangan sampai link yang tidak berfungsi (broken link). Dan link yang belum ada isinya, jangan dicantumkan. 4) Gunakan breadcrumb untuk mempermudah pengunjung untuk menjelajahi situs dengan cepat. Beberapa tip untuk menghindari warna buta (warna yang jelek), yaitu : 1) Hindari menggunakan hanya warna hijau dan warna merah saja dalam desain. Karena kebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warna hijau. 2) Jangan menggunakan warna sebagai petunjuk. Lebih baik gunakan petunjuk lain yang lebih dimengerti. 3) Buatlah kontras yang tinggi antar teks dengan background.

3. Grafik Desain Beberapa tips untuk membuat desain visual yang baik : 1) Gunakan desain visual untuk menciptakan kejelasan kegunaan, sesuai dengan tujuan situs web tersebut, dan desainnya harus mempu mengkomunikaskan, mendukung dan menyempurnakan tujuan situs web secara visual. 2) Buat situs web yang berkesan profesional dan orisinil. 3) Keep it clean and simple. Jaga situs web agar tetap bersih dan sederhana. Jangan sampai user teralihkan perhatiannya dari tujuan awal dibuatnya situs web. 4) Jaga grafik agar berukuran kecil dan gunakan fasilitas optimize pada program penggunaan grafik. 5) Gunakan format yang tepat. Format JPEG dan PNG 24 bit digunakan untuk foto. Format GIF dan PNG 8 bit digunakan untuk image berwarna sederhana.

4. Content Beberapa tips untuk membuat konten yang baik : 1) Kenali audien. Tulislah dengan gaya mereka dan sesuaikan dengan isinya. 2) Jaga konten agar tetap up to date untuk meningkatkan gaya lengkat untuk datang kembali berkunjung. 3) Nyatakan kebijakan dengan jelas. 4) Dahulukan kualitas diatas kuantitas. 5) Buat tulisan pada halaman web agar dapat dengan mudah dan cepat di scan.

5. Compatibilty Beberapa tips untuk meningkatkan kompatibilitas : 1) Test diberbagai jenis browser. 2) Pastikan situs web bekerja paling tidak di platform PC. 3) Jika memungkinkan tawarkan pilihan tampilan situs. 4) Kalo memakai plug-in pastikan pengunjung dapat dengan mudah mendowloadnya.

Febriyanti Darnis/Komputer Web Desain

36

6. Loading Time Beberapa tips untuk meningkatkan loading time : 1) Uji coba untuk berbagai kecepatan koneksi. 2) Jika menggunakan grafik, jaga grafik agar berukuran kecil dan gunakan fasilitas optomize pada program pengolahan grafik. 3) Lakukan slicing pada image secara efektif. 4) Gunakan atribute pada image. 5) Lakukan manajemen table yang baik. 6) Gunakan animasi dan suara sekecil mungkin.

7. Functionality Seberapa baik sebuah situs web bekerja dari aspek teknologinya, ini bisa melibatkan programer dengan script-nya, misalnya dengan HTML, PHP, ASP, ColdFusion, CGI, SSI dan lain-lain.

Berikut ini merupakan kriteria situs yang baik harus diperhatikan beberapa aspek, antara lain : • Usability • Navigasi • Grafik Desain • Content • Compatibilty • Loading Time • Functionality

Febriyanti Darnis/Komputer Web Desain

37

1.2.3

DESAIN ANTERMUKA (INTERFACE DESIGN)

User interface adalah bagian visual dari website, aplikasi software atau device hardware yang memastikan bagaimana seorang user berinteraksi dengan aplikasi atau website tersebut serta bagaimana informasi ditampilan di layarnya. User interface sendiri menggabungkan konsep desain visual, desain interasi, dan infrastruktur informasi. Tujuan dari user interface adalah untuk meningkatkan usability dan tentunya user experience. Desain Antaramuka (Interface Design) atau Desain Antarmuka Pengguna (User Interface Design) atau rekayasa antarmuka pengguna (User Interface Engineering) adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna (User Experience) dan interaksi. Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna—atau apa yang sering disebut dengan user-centered design. Karakteristik Desain Tetap Muka (User Interface) yang baik sebagai berikut : Jelas (Clarity) Memiliki UI yang jelas adalah salah satu elemen penting dalam desain user interface. Tentunya tujuan dari desain UI adalah agar orang-orang bisa menggunakan dan berinteraksi dengan sistem dengan mudah. Jika orang-orang tidak bisa mengerti bagaimana cara menggunakan dan menavigasi website, pengguna pasti akan bingung.

Febriyanti Darnis/Komputer Web Desain

38

Gambar. UI Clarity Singkat (Concision) Tentunya memiliki UI yang jelas akan membuat UX Anda bagus, tetapi dapat berhatihati agar penjelasan tidak terlalu panjang. Jika meletakkan definisi dan penjelasan pada setiap bagian website, website akan terlihat lebih berantakan. Kemungkinan besar dengan bertumbuhnya website, interface juga akan terus berkembang. Kalau meletakkan terlalu banyak penjelasan, user nantinya akan menghabiskan waktu membaca penjelasannya. UI boleh jelas, tapi juga harus singkat. Kalau memang diperlukan penjelasan, usahakan agar bisa menjelaskannya dalam satu kalimat. Jika dapat memberi label hanya dengan satu kata itu tentunya akan lebih baik. Jangan buang waktu user. Mungkin memastikan bahwa semuanya singkat tapi jelas bisa menjadi tantangan. Tetapi kalau bisa melakukan itu, UI website akan menjadi memuaskan.

Febriyanti Darnis/Komputer Web Desain

39

Gambar. Karakteristik yang tidak jelas

Bagaimana pendapat anda ketika anda melihat gambar diatas?

Febriyanti Darnis/Komputer Web Desain

40

Familiar (Familiarity) Mungkin salah satu kata yang sering didengar saat membahas desain web adalah intuitif. Apa sebenarnya arti dari kata itu? Secara simple, intuitif artinya layout dapat dimengerti dengan mudah secara natural dan hanya dengan menggunakan insting. Tetapi bagaimana cara membuat layout website intuitif? Anda perlu menggunakan desain web yang familiar. Familiar yang dimaksud disini adalah sesuatu yang sudah pernah dilihat sebelumnya. Kalau familiar dengan sesuatu,? Coba pikirkan hal-hal apa yang sudah pasti familiar bagi user website Anda dan masukkan hal-hal ini ke desain web Anda.

Gambar. UI Familiarity Responsif (Responsiveness) Bagi yang mempelajari web design dan SEO mungkin sudah familiar dengan istilah responsive. Untuk UI sendiri, responsive memiliki beberapa arti yang berbeda. Pertama, responsive berarti cepat. Interface website harus bisa bekerja dengan cepat. Kalau perlu menunggu sebuah website loading lama pasti juga malas kan. Jika interface bisa loading dengan cepat tentunya user experience juga akan semakin baik. Arti lain dari responsive pada UI juga harus bisa memberitahu user apa yang sedang terjadi di halaman itu. Misalnya, jika seorang user mengklik suatu tombol di website, apakah mereka sudah berhasil menekan tombol tersebut? Mungkin text pada tombol

Febriyanti Darnis/Komputer Web Desain

41

bisa menjadi kata “loading” jika mereka sudah berhasil menekan tombolnya. Bisa juga menggunakan progress bar seperti loading Gmail sebagai indikator kalau website sedang loading.

Gambar. UI Responsif

Febriyanti Darnis/Komputer Web Desain

42

Konsisten (Consistency) Dalam mengembangkan user interface, konsistensi pada interface dapat membantu user untuk mengerti pola. Dari satu interface, mereka bisa mempelajari apa kegunaan tombol, tabs, icons, dan berbagai elemen yang ada pada interface tersebut. Jika mereka nantinya menemukan interface yang mirip, mereka bisa mengerti apa kegunaan elemen-elemen yang ada pada interface tersebut. Dengan begitu, mereka bisa mengerjakan sesuatu dengan lebih cepat dan mempelajari fitur-fitur baru dengan lebih cepat. Salah satu perusahaan yang kerap melakukan ini adalah Microsoft dengan program Microsoft Officenya. Meskipun selalu mengupdate program-program Microsoft Office nya seperti Word, Excel, dan Power Point, elemen-elemen yang ada pada ketiga program tersebut tetap konsisten. Meskipun interfacenya berubah, tahu bahwa untuk menyimpan file, bisa klik pada icon disket dan untuk menge-print, tinggal klik pada icon printer.

Gambar. UI Konsisten

Febriyanti Darnis/Komputer Web Desain

43

Menarik (Aesthetics) Poin yang satu ini mungkin bisa dibilang subjektif tetapi interface akan lebih baik jika mereka memiliki tampilan menarik. Yang dimaksud dengan menarik disini adalah interface menarik untuk digunakan. Memang kalau bisa membuat UI simple, mudah digunakan, efisien, dan responsive, sudah memiliki UI yang baik. Tetapi jika bisa membuatnya menarik tentunya akan lebih asik untuk digunakan, bukan? Sehingga dapat membuat customer lebih senang menggunakan website. Tentunya apa yang dianggap menarik untuk website atau aplikasi,juga perlu disesuaikan dengan pasar dan audience. Jadi tampilan harus menarik sesuai dengan audience. Tetapi juga harus tetap memerhatikan fungsi website agar mereka tetap berfungsi dengan baik.

Gambar. UI Menarik (Aesthetics) Efisien (Efficiency) User interface yang baik harus memastikan bahwa website dan aplikasinya bisa digunakan dengan efisien. Agar bisa membuat UI yang efisien perlu tahu dulu apa yang ingin user capai dan biarkan mereka melakukan langkah-langkahnya tanpa banyak masalah. Perlu mengidentifikasi bagaimana website atau aplikasi bekerja. Apa saja fungsinya dan apa kegunaannya. Buat interface yang memudahkan user untuk mencapai tujuan.

Febriyanti Darnis/Komputer Web Desain

44

Gambar. UI Menarik (Aesthetics) Forgiving Mungkin pernah melakukan kesalahan saat sedang mengakses website. Misalnya, salah menghapus informasi, UI yang baik akan membantu mengembalikannya dengan cepat. Selain itu, kalau misalnya user masuk ke halaman website yang error, apakah website menyarankan mereka untuk mencoba mengarah ke halaman lain website? Tanpa disadari, hal-hal ini bisa membantu meningkatkan user experience.

Gambar. UI Forgiving

Febriyanti Darnis/Komputer Web Desain

45