BAB II TINJAUAN PUSTAKA

(1)

4

Perancangan Website Mengenai Kebersihan Dalam Bertato untuk Remaja Akhir Usia 17-25 Tahun di Jabodetabek, Karina Nadya Savira, Universitas Multimedia Nusantara

BAB II

TINJAUAN PUSTAKA

2.1 Media Informasi

Media informasi menurut AIGA (dikutip dalam Landa, 2014) adalah suatu bidang desain yang melibatkan sejumlah besar informasi yang jelas dan dapat dengan mudah diakses oleh ratusan ribu audiens, baik dalam bentuk pameran, bagan, situs web, peta, booklet, poster, atau lain sebagainya (hlm. 4).

2.1.1 Media Berbasis Layar

Area pandang untuk media dengan basis layar terdapat berbagai ukuran dan kepadatan piksel. Dalam penggunaan sehari-hari, layar dengan ukuran terbesar adalah komputer desktop atau laptop, lalu tablet, dan yang paling kecil adalah layar ponsel. Beberapa hal yang perlu diperhatikan saat membuat media berbasis layar adalah :

1. Tentukan tujuan komunikasi, kendala, dan bentuk konten yang akan dibuat (teks, gambar, video, atau lain sebagainya).

2. Memperhatikan penyampaian desain, ukuran layar dan resolusi, browser dan postur browser, margin dan padding, area pandang, serta standar IAB (Interactive Advertising Bureau) (hlm. 328-329).

2.1.2 Website

Website atau situs web merupakan kumpulan halaman atau file yang tersedia di World Wide Web, yang dimiliki oleh perusahaan, pemerintah, organisasi, dan atau individu. Desain di dalam situs web melibatkan strategi, kolaborasi, kreativitas, perencanaan, visual, pengembangan, dan implementasi (hlm. 331).

2.1.2.1 Fungsi Website

Situs web melayani berbagai sektor dan fungsi, seperti:

a. Layanan publik, organisasi, pemerintah

(2)

5

b. Komersial c. Pendidikan d. Redaksi e. Promosi diri f. Media sosial g. Permainan

h. Berbagi video dan foto i. Blog

j. Komunitas

k. Promosi institusi, dsb. (hlm. 331-332) 2.1.2.2 Anatomi Website

Menurut Jason Beaird (2007) dalam bukunya yang berjudul The Principles of Beautiful Web Design, halaman website memiliki anatomi:

1. Mengandung Blok

Setiap halaman website memiliki wadah. Tanpa wadah, website tidak memiliki tempat untuk meletakkan konten.

2. Logo

Dalam membuat desain, desainer mengacu pada identitas logo dan warna. Blok identitas yang muncul pada website harus berisi logo atau nama instansi, dan berada di setiap halaman untuk meningkatkan pengenalan merek.

3. Navigasi

Sistem navigasi sangat penting untuk mudah ditemukan dan digunakan. Peletakkan navigasi harus sedekat mungkin dengan bagian atas layout website agar mudah ditemukan oleh pengguna.

4. Konten

Blok konten utama sangat penting untuk dijadikan sebagai titik fokus agar saat pengunjung memindai halaman, mereka langsung dapat menemukan informasi yang dibutuhkan.

(3)

6

5. Footer

Footer atau catatan kaki biasanya berisi informasi mengenai hak cipta, kontak, informasi legal, dan link ke bagian utama website.

6. White space

Memiliki white space atau negative space sama pentingnya dengan memiliki konten. Tanpa white space, sebuah desain akan terasa sesak. White space membantu desain untuk mengarahkan pandangan pengguna dalam memindai halaman, juga membantu menciptakan keseimbangan dan kesatuan (hlm. 7-8).

Gambar 2.1 Anatomi Website Sumber: Breaid (2007)

2.1.2.3 Grid

Grid merupakan unsur penting dalam desain grafis sebagai proporsi. Konsep pembagian komposisi meluas dari teori Phythagoras pada matematika yang mendifinisikan angka sebagai rasio. Pola tersebut dikenal sebagai golden ratio (hlm. 9).

Gambar 2.2 Golden Ratio Sumber: Breaid (2007)

(4)

7

2.1.2.4 The Rule of Thirds

Membagi komposisi menjadi tiga memudahkan untuk menerapkan proporsi atau golden ration dengan cara membagi persegi dengan 3 garis horizontal dan vertikal. Dengan gridwork sederhana tersebut, akan memudahkan untuk menata elemen (hlm.

10-11).

Gambar 2.3 Grid Menggunakan The Rule of Thrids Sumber: Breaid (2007)

Gambar 2.4 4 Layout Menggunakan The Rule of Thirds Sumber: Breaid (2007)

(5)

8

2.1.2.5 Resolusi Layar

Sebuah situs web dirancang dengan mengoptimalkan resolusi layar tertentu. Situs web harus dirancang sedemikian rupa sehingga pengguna dengan resolusi layar berapapun dapat melihat keseluruhan konten. Desain situs web untuk profesional dan pengguna yang cenderung menggunakan peralatan komputer terbaru, disarankan untuk membuat desain lebih dari 800 piksel.

2.1.2.6 Homepage

Menurut Lal (2013) dalam bukunya yang berjudul Digital Design Essentials: 100 Ways to Design Better Desktop, Web, and Mobile Interface, homepage atau beranda adalah halaman awal yang muncul saat pengguna mengunjungi situs web. Homepage digunakan untuk menyambut pengunjung dan memberikan informasi, layanan, serta berguna sebagai halaman indeks untuk semua konten di dalam situs. Homepage harus menunjukkan hirarki visual dari elemen desain karena berfungsi untuk menarik pengguna untuk mengakses halaman-halaman lain yang ada dalam situs tersebut (hlm 54).

Gambar 2.5 Homepage Sumber: Lal (2017)

2.1.2.7 Single-Page Website

Single-page website berbentuk satu halaman vertikal dan memiliki navigasi yang mengarahkan pengguna ke berbagai bagian

(6)

9

halaman. Bentuk situs web ini biasa digunakan untuk portfolio dan situs web penyedia layanan khusus agar penggunaan lebih efektif.

Jenis situs web ini harus menggunakan tombol go to top untuk memudahkan pengguna kembali ke halaman atas tanpa scroll dan bentuk gambar slideshow juga biasa digunakan untuk menampilkan banyak gambar (hlm. 58-59).

Gambar 2.6 Single-Page Website Sumber: Lal (2013)

2.1.2.8 Forum Online

Forum online juga dikenal sebagai papan pesan adalah tempat di mana pengguna dengan minat yang sama dapat dengan mudah berdiskusi terkait dengan produk atau layanan yang ditampilan dalam situs web, serta memberikan kritik dan saran.

Forum online juga dapat menghubungkan pengguna dengan pemilik situs atau administrator agar forum bersifat terbuka dan dinamis (hlm. 80).

(7)

10

Gambar 2.7 Forum Online Sumber: Lal (2013)

2.1.2.9 Sitemap

Sitemap atau peta situs adalah peta navigasi yang menampilkan semua halaman yang tersedia di situs web dengan hyperlink untuk mempermudah akses dan lebih terarah (hlm 84).

Gambar 2.8 Sitemap Sumber: Lal (2013)

2.1.2.10 Social Design

Desain sosial adalah salah satu cara merancang situs web atau aplikasi online yang menjadikan komunikasi sosial pengguna sebagai pusat dari interface. Hal ini dapat membantu perkembangan situs dengan memberikan pengguna rasa keterlibatan terhadap situs.

(8)

11

Dalam desain sosial, pengguna dapat berinteraksi dan terhubung dengan pengguna lain. Adapun desain sosial perlu dibuat se-efektif mungkin agar mudah diakses.

Gambar 2.9 Social Design Sumber: Lal (2013)

2.1.2.11 Adaptive User Interface

Adaptive user interface merupakan kemampuan interface situs untuk berubah sesuai dengan perangkat dan lingkungan yang digunakan oleh pengguna, menyesuaikan berbagai ukuran dan kemampuan browser. Interface ini dapat berubah sesuai dengan ukuran tata letak, skala gambar, dan memposisikan ulang navigasi serta menu di situs web.

Gambar 2.10 Adaptive User Interface Sumber: Lal (2013)

Dalam penggunaan layar mobile, ukuran layar pada umumnya adalah 2 hingga 4 inci, dengan jarak 1 kaki dari pengguna,

(9)

12

dan penggunaan jari sebagai input. Pada penggunaan layar tablet, ukuran layar adalah 7 hingga 14 inci, dengan jarak dan input yang sama pada penggunaan layar mobile. Sedangkan, untuk layar PC, ukuran 14 hingga 27 inci, dengan jarak 2 kaki dari pengguna, peletakaan perangkat di ataas meja, dan input piksel yang akurat menggunakan mouse dan keyboard (hlm. 60).

2.2 Perancangan 2.2.1 Desain

Menurut Landa (2014, hlm. 1) dalam buku Graphic Design Solutions 5^th ed, desain grafis merupakan bentuk komunikasi visual yang digunakan untuk menyampaikan informasi kepada audiens. Solusi berbentuk desain grafis dapat membujuk, menginformasi, mengidentifikasi, meningkatkan, mengatur, menemukan, dan menyampaikan banyak tingkatan makna sehingga dapat memengaruhi perilaku audiens.

2.2.2 Elemen Desain

Dalam desain dua dimensi, terdapat beberapa elemen formal yaitu garis, bentuk, warna, dan tekstur (hlm. 16).

1. Garis

Titik adalah unit terkecil berbentuk lingkaran yang membentuk sebuah garis jika disusun memanjang. Dalam gambar berbasis layar, titik adalah piksel cahaya yang terlihat berbentuk persergi. Garis adalah gabungan dari titik yang memanjang. Garis termasuk sebagai elemen formal desain karena memiliki banyak peran komposisi serta komunikasi karena bisa membimbing mata audiens ke suatu arah.

(10)

13

Gambar 2.11 Garis Dibuat dengan Berbagai Media dan Alat Sumber: Landa (2014)

Dalam gambar 2.5, menunjukkan garis yang dibuat dengan berbagai media dan alat dapat berbentuk lurus, melengkung, atau bersudut, halus atau patah, tebal atau tipis, dan seterusnya. Garis dapat memandu pengguna ke suatu arah (hlm. 19).

2. Bentuk

Bentuk adalah area yang digambarkan pada permukaan dua dimesi dan dapat diukur tinggi dan lebarnya, tercipta oleh garis dan atau dengan warna, nada, atau tekstur. Semua bentuk dapat diturunkan dari tiga penggambaran tiga bentuk dasar yaitu persegi, segitiga, dan lingkaran.

Gambar 2.12 Bentuk Dasar Berbagai Bidang Sumber: Landa (2014)

(11)

14

Gambar 2.6 menunjukkan bahwa bentuk bervolume seperti kubus, piramida, dan bola terbentuk dari bentuk dasar persegi, segitiga, dan lingkaran (hlm. 20-21).

3. Figure/Ground

Figure/ground disebut juga sebagai ruang positif dan negatif, merupakan prinsip dasar dari persepsi visual dari hubungan bentuk utama dengan latarnya pada permukaan dua dimensi. Dalam hubungan figure/ground, pikiran manusia mencari isyarat untuk membedakan bentuk yang merepresentasi figure atau bentuk utama dengan ground atau latar belakang.

Bentuk utama atau figure atau bentuk positif dapat diterima sebagai bentuk yang pasti sehingga dapat segera terlihat, sedangkan area latar atau ground atau bentuk negatif tampak kosong dan tanpa bentuk, mengelilingi bentuk utama.

Gambar 2.13 Poster Hope for Peace oleh Ronald J. Cala II Sumber: Landa (2014)

Pikiran pengamat akan memahami visual melalui bentuk utama (figure), maka latar (ground) akan terlihat tanpa bentuk. Oleh karena itu, seorang desainer harus mempertimbangkan latar atau ruang negatif sebagai bagian intergral dari sebuah komposisi. Seperti poster Hope for

(12)

15

Peace pada gambar 2.7. Bentuk utama adalah gambar anak-anak yang sedang bergandengan, sedangkan yang menjadi latar terlihat tersembunyi yaitu burung merpati, maka tercipta sebuah konsep figure/ground (hlm. 21-22).

4. Warna

Warna merupakan elemen desain yang sangat kuat dan berpengaruh.

Warna dapat terbentuk dan dapat dilihat hanya dengan cahaya.

Permukaan objek yang terlihat memiliki warna merupakan hasil dari pantulan cahaya. Ketika cahaya memantul pada sebuah objek, cahaya akan diserap, sedangkan cahaya yang tidak terserap akan dipantulkan dan terlihat sebagai warna. Warna yang dipantulkan tersebut dikenal sebagai warna subtraktif. Sedangkan, warna pada layar komputer adalah energi cahaya atau panjang gelombang yang disebut sebagai warna digital. Warna digital yang terlihat pada media berbasis layar dikenal juga sebagai warna aditif atau campuran cahaya.

A. Warna Nomenklatur

Warna dapat terbagi dalam tiga elemen: hue, value, dan saturation. Hue adalah nama dari suatu warna yang dimaksud, seperti merah, hijau, biru, dan seterusnya. Hue juga dapat dianggap sebagai penentuan suhu hangat atau suhu sejuk. Temperatur warna dapat dirasakan melalui pikiran, seperti warna merah, jingga, dan kuning dapat dirasakan sebagai warna hangat, sedangkan warna biru, hijau, dan ungu dapar dirasakan sebagai warna sejuk. Value mengacu pada tingkat terang atau gelap suatu warna, misalnya biru muda, merah tua, dan seterusnya.

Value dibagi menjadi tiga kategori: tint, tone, dan shade. Tint adalah tingkat paling terang dari sebuah warna, tone adalah tingkat terang yang standar, sedangkan shade adalah tingkat terang yang paling rendah (hlm. 23).

(13)

16

Gambar 2.14 Perbedaan Value dan Hue Sumber: Landa (2014)

Pada gambar 2.8, ditunjukkan perbedaan value yang merupakan kontras tingkat terang yang berbeda-beda pada warna, sedangkan hue memperlihatkan kontras berbagai warna. Saturation adalah tingkat kecerahan warna, seperti merah cerah atau merah kusam, biru cerah atau biru kusam, dan seterusnya.

B. Warna Primer

Warna dasar atau yang disebut warna primer berbasis pada tiga warna utama, yaitu merah (red), hijau (green), dan biru (blue), biasa dikenal dengan singkatan RGB.

Gambar 2.15 Sistem Warna Aditif Sumber: Landa (2014)

(14)

17

Warna primer ini disebut juga primer aditif karena jika dicampur akan menghasilkan cahaya putih. Seperti yang disebutkan sebelumnya, warna subtraktif merupakan warna pantulan dari suatu permukaan yang mengurangi gelombang cahaya kecuali yang mengandung warna yang dilihat oleh pengamat. Pada cat atau pigmen seperti cat minyak, cat air, dan sebagainya, warna primer subtraktif adalah merah, kuning, dan biru karena tidak dapat dicampur dari warna lain, namun warna lain dapat dihasilkan dari campuran warna-warna tersebut, seperti warna oranye merupakan campuran dari warna merah dan kuning, serta warna hijau dari campuran warna biru dan kuning. Sedangkan pada percetakan offset, warna primer subtraktif adalah cyan (C), magenta (M), dan kuning(Y), ditambah hitam (K).

Gambar 2.16 Sistem Warna Substraktif Sumber: Landa (2014)

Dalam mencetak dokumen, terdapat proses yang disebut proses empat warna, digunakan untuk memproduksi foto, seni, dan ilustrasi berwarna. Pengamat dapat melihat berbagai warna yang diciptakan oleh pola titik cyan, magenta, kuning, dan atau hitam (hlm. 23-27).

C. Skema Warna

Menurut Breaid (2007), skema warna merupakan formula dasar untuk menciptakan kombinasi warna yang harmonis dan efektif. Skema warna

(15)

18

tergolong menjadi beberapa jenis, diantaranya monokromatik, analog, dan komplementer.

Gambar 2.17 Situs Web Mint Sumber: Breaid (2007)

Warna monokramatik terdiri dari satu warna dasar dan beberapa tint dan shade. Gambar 2.11 merupakan contoh penggunaan warna hijau sebagai monokromatik pada situs web. Ketika pengguna sangat terbiasa melihat beberapa jenis warna dalam satu situs web, sehingga ketika melihat desain yang hanya menggunakan satu warna muncul, akan menjadi sangat menarik.

Gambar 2.18 Situs Web Urlgreyhot Sumber: Breaid (2007)

(16)

19

Warna yang letaknya berdekatan pada roda warna, disebut sebagai skema warna analog. Salah satu aturan dalam penggunaan skema warna analog adalah jangan mengambil lebih dari satu per tiga bagian dalam roda warna. Contoh pada gambar 2.18, penggunaan beberapa nada oranye pada situs web Urlgreyhot membuatnya terasa hangat.

Gambar 2.19 Situs Web The University of Florida Sumber: Breaid (2007)

Skema warna komplementer terdiri dari warna yang letaknya saling berhadapan atau bertolak belakang pada roda warna, seperti hijau dan merah, kuning dan ungu, atau oranye dan biru. Walaupun terlihat seperti bertabrakan, namun gabungan warna tersebut dapat saling melengkapi, seperti situs web The University of Florida pada gambar 2.13, menggunakan warna komplementer oranye dan biru. Penyusunan tata letak yang indah dan markup yang sesuai standar membuatnya terlihat dinamis (hlm. 49-54).

5. Tekstur

Tekstur adalah kualitas atau representasi dari suatu permukaan. Dalam dunia visual terdapat dua kategori tekstur, yaitu taktil dan visual.

Tekstur taktil memiliki kualitas sentuhan yang dapat dirasakan secara fisik atau disebut juga tekstur aktual. Pada teknik percetakan, dapat

(17)

20

menghasilkan teknik taktil pada desain cetakan, seperti emboss dan debossing, stamping, engraving, dan letterpress.

Gambar 2.20 Tekstur Taktil Sumber: Landa (2014)

Sedangkan, tekstur visual merupakan tesktur buatan tangan yang dipindai dari tekstur sebenarnya sehingga menjadi ilusi dari tekstur asli.

Seorang desainer dapat membuat berbagai macam tekstur dengan menggunakan teknik dari menggambar, melukis, fotografi, dan teknik pembuatan gambar lainnya (hlm. 28).

Gambar 2.21 Tekstur Visual Sumber: Landa (2014)

6. Pola

Pola adalah pengulangan konsisten dari satu elemen visual dalam suatu area tertentu. Pengulangan harus dilakukan secara sistematis dengan gerakan yang terarah dan jelas. Struktur pola pada dasarnya bergantung pada konfigurasi tiga blok penyusun dasar, yaitu titik, garis, dan garis pandu. Setiap unit kecil dapat didasarkan pada titik, setiap jalur

(18)

21

didasarkan pada garis, dan setiap dua unit garis yang berpotongan menghasilkan suatu garis pandu atau grid.

Gambar 2.22 Poster Open Your Heart oleh Cedomir Kostovic Sumber: Landa (2014)

Contoh, pada seri poster Open Your Heart oleh Cedomir Kostovic menggunakan pola unik yang berdasar pada kombinasi simbol kelompok etnis dalam budaya Amerika (hlm. 28-29).

2.2.3 Prinsip Desain

Menurut Breaid (2007), dalam menyusun suatu desain web, terdapat dua sudut pandang utama yang menyatakan apakah desain itu baik atau buruk. Sudut pandang kegunaan, yang berfokus pada fungsionalitas, penyajian informasi yang efektif dan efisien, serta sudut pandang estetika murni, yang berfokus pada presentasi, animasi, dan grafik. Hal paling penting adalah bahwa desain adalah tentang komunikasi (hlm. 4-5).

1. Keseimbangan

Keseimbangan visual mirip dengan keseimbangan fisik manusia yang memiliki bobot dan tata letak. Jika elemen pada kedua sisi memiliki bobot yang sama, maka mereka akan menyeimbangkan satu sama lain.

A. Simetri

Keseimbangan simetris terjadi ketika komposisi pada kedua sisi garis sumbu. Jenis simetri ini dapat diterapkan pada tata letak situs web dengan menyeimbangkan konten di antara kolom.

(19)

22

Gambar 2.23 Situs Web Grow Collective Sumber: Breaid (2007)

Situs web tersebut menunjukkan sebuah komposisi simetri dengan perpindahan area konten dari satu kolos pada bagian atas, menjadi dua kolom, dan pada bagian bawah halaman menjadi tiga kolom, namun tata letaknya tetap mempertahankan keseimbangan simetris.

Bentuk keseimbangan simetris lainnya dalam situs web adalah simetri bilateral, yaitu ketika komposisi seimbang pada lebih dari satu sumbu, dan simetri radial, ketika komposisi elemen seimbang di sekitar satu titik pusat.

B. Asimetri

Keseimbangan asimetris pada umumnya lebih menarik secara visual, karena melibatkan objek dengan ukuran, bentuk, nada, dan penempatan yang berbeda, yang diatur sedemikian rupa untuk menyamakan berat halaman. Keseimbangan asimetris sangat fleksibel, oleh karena itu, lebih sering digunakan pada situs web. Sebagian besar tata letak situs web memiliki dua kolom. Kolom yang lebih besar sering kali berwarna terang, untuk menciptakan kontras antara teks dengan konten utama. Sedangkan kolom yang lebih kecil berwarna lebih gelap,

(20)

23

atau dibuat lebih menonjol untuk menciptakan keseimbangan dalam tata letak.

Gambar 2.24 Situs Web Hicksdesign Sumber: Breaid (2007)

Situs web Hicksdesign menjadi contoh kesembangan asimetris di mana sisi dengan warna cokelat tebal yang berisi logo dan navigasi utama berada di sisi kanan halaman, sedangkan konten lainnya menyeimbangkan halaman pada sisi kanan (hlm. 12-15).

2. Unity

Unity atau kesatuan digambarkan dengan komposisi unsur-unsur berbeda yang saling berinteraksi satu sama lain. Tata letak yang memiliki kesatuan adalah tata letak yang berjalan secara keseluruhan dan tidak diidentifikasikan sebagai bagian yang terpisah. Penting bahwa kesatuan tidak hanya ada di antara elemen situs web, tetapi di seluruh halaman harus dapat berfungsi sebagai satu unit. Pendekatan yang dapat dilakukan untuk mendapatkan kesatuan dalam tata letak antara lain dengan menggunakan proximity dan repetitive (hlm. 16).

3. Proximity / Kedekatan

Menempatkan objek secara berdekatan dalam suatu tata letak dapat menciptakan fokus dan menarik mata pengguna.

(21)

24

Gambar 2.25 Kedekatan di Antara Judul dan Konten Sumber: Breaid (2007)

Konsep kedekatan dapat diterapkan pada judul dan konten seperti pada gambar 2.25. Pada sisi kiri, kata “Unkgnome” memiliki jarak yang sama dengan paragraf atas dan paragraf bawah, menyebabkan kata tersebut terlihat seperti pemisah, bukan judul untuk paragraf berikutnya.

Sedangkan pada sisi kanan, kata “Gnomeklatur” ditempatkan lebih dekat dengan paragraf berikutnya, sehingga terlihat sebagai judul untuk paragraf tersebut (hlm. 16-17).

4. Repetitive / Pengulangan

Pengulangan warna, bentuk, tekstur, atau objek serupa pada situs web akan membantu menyatukan desain sehingga terasa seperti suatu unit yang kohesif.

Dalam contoh situs web Left Justified pada gambar 2.26 milik desainer Australia, Andrew Krespanis, memiliki banyak elemen menarik, namun penggunaan tekstur kayu berwarna merah pada header, menu, dan batas halaman secara berulang terlihat menyatukan halaman tersebut (hlm.

17-18).

(22)

25

Gambar 2.26 Halaman Web Left Justified Sumber: Breaid (2007)

5. Emphasis

Emfasis atau penekanan pada sebuah desain adalah untuk membuat elemen tertentu lebih menarik perhatian pembaca, dapat berupa tombol ataupun pesan yang dijadikan sebagai titik fokus. Titik fokus adalah segala sesuatu pada halaman yang dapat menarik perhatian pengguna, bukan hanya sebagai bagian dari halaman, melainkan secara keseluruhan atau menyatu dengan elemen lain. Ada beberapa metode yang dapat dilakukan untuk mencapai titik fokus.

A. Penempatan

Pusat dalam suatu komposisi adalah titik di mana pengguna melihat pertama dan merupakan lokasi terkuat untuk menghasilkan penekanan. Semakin jauh suatu elemen terhadap titik pusat, semakin kecil kemungkinannya untuk diperhatikan terlebih dahulu.

B. Continuance

Ketika mata pengguna mulai bergerak ke satu arah, maka akan mengikuti jalur tersebut hingga fitur yang lebih dominan muncul.

(23)

26

Gambar 2.27 Penempatan dan Continuance yang Menciptakan Emphasis Sumber: Breaid (2007)

Pada contoh gambar 2.27, menunjukkan efek continuance, di mana meskipun elemen bagian bawah lebih besar dan cenderung menarik perhatian, pengguna akan menatap objek yang lebih kecil terlebih dahulu karena terdapat panah yang mengarahkan mata. Continuance juga merupakan metode paling umum yang digunakan oleh desainer web untuk menyatukan tata letak, seperti judul pada tepi kiri, teks, dan gambar yang membentuk garis vertikal pada sisi kiri juga.

Untuk menyejajarkan elemen lain dengan sederhana, desainer dapat menggunakan the rule of thirds.

C. Isolation

Memiliki konsep yang sama dengan proximity, isolation menciptakan kesatuan dalam sebuah desain dengan mendorong penekanan. Sebuah objek yang lebih menonjol dari sekitarnya cenderung akan menarik perhatian (hlm. 18-19).

6. Kontras

Kontras pada situs web didefinisikan sebagai penjajaran elemen grafis yang berbeda dan merupakan metode umum yang digunakan untuk membuat penekanan dalam tata letak. Semakin besar perbedaan suatu elemen grafis dengan sekitarnya, semakin menonjol elemen tersebut.

Kontras dapat dicapai menggunakan perbedaan warna, ukuran, ataupun bentuk.

(24)

27

Gambar 2.28 Situs Web Woot Sumber: Breaid (2007)

Tombol berbentuk oval dan berwarna jingga yang diletakkan di area ruang putih menjadi kontras yang menarik mata pengguna karena memiliki kontras dan isolasi yang berfungsi sebagai penekanan.

Kontras bukan terletak pada produk walaupun ukurannya lebih besar, karena produk akan berubah setiap saat (hlm. 20).

7. Proposi

Penggunaan proporsi merupakan salah satu cara menarik untuk menciptakan penekanan. Proporsi adalah prinsip desain yang berkaitan dengan perbedaan skala objek.

Gambar 2.29 Situs Web Jasongraphix Sumber: Beaird (2007)

(25)

28

Salah satu hal pertama yang mungkin diperhatikan oleh pengguna dalam situs web Jasongraphix adalah mini-me atau miniatur sang desainer yang bersandar pada karya seni. Sama seperti pada situs web Woot yang dijelaskan sebelumnya, gambar pria kecil tersebut menonjol karena selain memiliki kontras dan isolasi, juga karena penggunaan proporsi yang menarik (hlm. 20-21).

2.2.4 Tipografi

Typography atau tipografi berasal dari kata “typo”, yang berarti kesan atau tanda, dan “grapheia”, yang berarti tulisan. Sehingga tipografi berarti membuat suatu kesan dengan tulisan. Pemilihan jenis font dan warna hanyalah sebagian kecil dari penggunaan tipografi, sebagian besarnya melibatkan ruang di sekitar bentuk huruf dan blok teks. Namun, memiliki jenis huruf yang sesuai juga merupakan langkah penting.

2.2.4.1 Penggunaan Jenis Huruf Pada Situs Web

Dalam penggunaan jenis huruf pada situs web, desainer harus memiliki beberapa jenis huruf cadangan semisal pengguna tidak dapat melihat jenis huruf tersebut. Jika pengguna tidak memiliki semua jenis huruf, desainer dapat menambahkan keluarga jenis huruf generik. Keluarga jenis huruf generik adalah serif, sans-serif, kursif, fantasia atau novelty, dan monospace. Misal, jika desainer ingin menggunakan huruf serif, desainer dapat langsung menulis huruf serif pada formula jenis huruf, dan jenis huruf serif yang akan muncul pada situs web adalah jenis huruf yang dimiliki masing-masing pengguna (setiap pengguna dapat melihat jenis huruf yang berbeda, tergantung dengan keluarga jenis huruf yang dimilikinya) (hlm.

100-101).

Gambar 2.30 Contoh Formula untuk Memunculkan Jenis Huruf pada Situs Web Sumber: Breaid (2007)

(26)

29

2.2.4.2 Spasi Pada Teks

Banyak keputusan pemilihan tipografi yang didasarkan oleh spasi, baik untuk hasil cetak maupun web. Terdapat dua arah yang dapat mengontrol spasi. Pertama, spasi horizontal. Dalam pemakaian spasi horizontal, terdapat istilah kerning dan tracking. Kerning adalah pengaturan spasi antar huruf dan tracking menyesuaikan jarak horizontal antara bentuk huruf (hlm.106-108).

Gambar 2.31 Contoh Penggunakan Kerning pada Huruf Sumber: Breaid (2007)

Kedua adalah spasi vertikal. Di antara barisan teks, terdapat ruang vertikal yang disebut leading. Teks yang memiliki leading tambahan akan lebih mudah dibaca dan tidak terlihat sesak.

2.2.4.3 Perataan Teks

Dalam pengaturan tata letak teks, terdapat empat jenis perataan yang dapat digunakan yaitu, rata kiri, rata tengah, rata kanan, dan rata kanan-kiri. Pengunaan tata letak teks yang paling sering digunakan dalam penulisan situs web adalah rata kanan-kiri. Rata kiri, rata tengah, dan rata kanan terkadang dapat menyebabkan masalah keterbacaan dalam teks yang cukup panjang (hlm. 108-109).

(27)

30

2.2.4.4 Perbedaan Jenis Huruf

Jenis huruf dapat dikelompokkan bersama ke dalam keluarga font.

Dalam setiap keluarga, memiliki variasi font yang berbeda. Sebagian besar keluarga font menyertakan font regular atau biasa, dengan varian miring, tebal, dan miring tebal. Beberapa jenis font lain yang tersedia secara komersial bisa memiliki hingga ratusan varian. Setiap keluarga font memiliki karakteristik unik masing-masing yang dapat diidentifikasi.

Keluarga font dapat diklasifikasikan menjadi beberapa kelompok, seperti:

1. Serif Font

Jenis huruf serif dipercaya dapat meningkatkan keterbacaan dalam blok teks besar. Ada banyak variasi font serif yang dapat digunakan.

Gambar 2.32 Contoh Jenis Huruf Serif Sumber: Breaid (2007)

Garamond adalah font serif gaya lama. Font serif gaya lama dapat dikenali dengan sapuan tebal dan tipis, serta tepi serif yang membulat.

Font kedua pada gambar 2.32 adalah Baskerville, font serif transisi.

Dapat dikenali dengan sudut melengkung yang menghubungkan garis terminal dengan serif, atau disebut juga sebagai braket, penambahan sudut 90 derajat pada serif, dan garis lurus sempurna memberikan kesan lebih modern dan mekanis.

(28)

31

Gambar 2.33 Penggunaan Font Didot pada Situs Web Sumber: Breaid (2007)

Font Didot adalah jenis font serif modern yang memberikan kontras antara goresan tebal dan tipis, serta serif yang terkadang tidak memiliki braket. Jenis font ini memiliki keanggunan dan kecanggihan, detail garis halus yang dimiliki font serif modern membuatnya cocok untuk digunakan sebagai headline. Gambar 2.33 merupakan contoh klasik dari situs web majalah Vogue dengan penggunaan font serif modern.

2. Sans Serif Fonts

Jenis font sans serif memiliki nuansa yang lebih bersih dan kontemporer. Jenis ini menonjol jika digunakan dalam berita utama, terutama jika ditempatkan dekat dengan teks yang menggunakan font jenis serif. Namun, pada pembuatan situs web, jenis font sans serif digunakan sebagai isi teks, sedangkan judul menggunakan font serif.

(29)

32

Gambar 2.34 Situs Web Coudal Partners Sumber: Breaid (2007)

Jenis font sans serif memiliki variasi dan detail kecil yang membuatnya sulit dibaca dengan ukuran kecil pada tampilan layar dengan resolusi rendah, seperti pada gambar 2.34. Solusinya adalah dengan memperbesar ukuran font atau dengan menggunakan font sans serif dengan detail sederhana.

3. Font Tulisan Tangan

Font tulisan tangan dapat menjadi sangat sulit dibaca karena kesulitannya dalam keseragaman bentuk huruf, keselarasan, dan spasi.

Namun, penggunaan font tulisan tangan dapat memberikan nuansa kepribadian yang nyata.

Gambar 2.35 Contoh Font Tulisan Tangan Sumber: Breaid (2007)

(30)

33

Huruf dan perataan pada font tulisan tangan terlihat dengan konsisten jika dirancang dengan baik, begitu juga dengan jarak antar huruf.

Pengguna tidak dapat dipastikan untuk mengunduh semua jenis font di dalam suatu situs web, terutama font tulisan tangan. Jika ingin menggunaan jenis font tertentu, desainer harus mengonversi teks tulisan tangan menjadi gambar.

4. Font dengan Lebar Tetap

Setiap huruf membutuhkan jumlah ruang yang berbeda. Misalnya, huruf kapital “W” membutuhkan area yang lebih luas dibandingkan dengan huruf kapital “I”.

Dalam situs web, cara sederhana untuk menampilkan teks dengan lebar tetap adalah dengan menggunakan tag <pre> dan </pre>. Pre adalah singkatan dari preformatted text. Selain untuk menampilkan karakter dengan lebar tetap, pre juga dapat mempertahankan tab, spasi, dan jeda setiap baris, menjadi sama besar.

5. Novelty Font

Novelty font dikenal juga sebagai font display atau dekoratif. Novelty font merupakan versi modifikasi dari font serif atau sans serif. Font ini dapat menjadi kurang terbaca, namun bila digunakan dengan tepat, dapat menambahkan kesan kepribadian dan bakat pada desain.

Gambar 2.36 Contoh Pengunaan Novelty Font pada Situs Web Sumber: Breaid (2007)

(31)

34

Novelty font sering digunakan menjadi blok awal untuk desain logo dan elemen tipe dekoratif. Seperti pada gambar 2.36, situs web Skandinavia Guilago menggunakan novelty font yang dimodifikasi dari font sans serif, sebagai logo.

6. Font Dingbat

Dingbat adalah karakter hias yang digunakan untuk memisahkan teks dan mengisi spasi. Font dingbat merupakan perkembangan dari simbol yang umum digunakan, namun sekarang, rangkaian grafik apapun dapat dijadikan sebagai karakter dalam font dingbat.

Gambar 2.37 Contoh Font Dingbat Sumber: Breaid (2007)

Beberapa font dingbat yang umum dan sudah diunduh di Windows untuk situs web adalah Wingdings dan Webdings (hlm. 110-118).

2.2.4.5 Mengatur Ukuran Teks

Satuan piksel (px) adalah unit terbaik untuk mengatur ukuran teks pada situs web, karena resolusi monitor diatur dengan satuan piksel, begitu juga dengan dimensi semua grafik tampilan yang ada. Namun sebagian besar situs pencarian, termasuk Internet Explorer, memungkinkan pengguna untuk mengganti seluruh jenis satuan dalam situs web.

Pengaturan ini meningkatkan fungsi situs web terhadap pengguna dengan gangguan penglihatan dan layar resolusi rendah. Ukuran teks default di

(32)

35

sebagian besar situs pencarian adalah 16 piksel. Sehingga jika desainer ingin mengubah ukuran teks, harus disesuaikan dengan ukuran spasi horizontal dan vertikal, serta ukuran (hlm. 121-123).

2.3 Tato

Ensiklopedia Indonesia (dikutip dalam Sukendar, 2015) menjelaskan bahwa tato merupakan sebuah lukisan permanen pada kulit tubuh. Proses pembuatan tato yaitu dengan menggambar dengan alat tajam berupa jarum, tulang, atau lain sebagainya pada kulit tubuh, kemudian diberi zat pewarna. Menurut LeMay (dikutip dalam Sukendar, 2015), tato atau rajah juga didefinisikan sebagai gambar atau lukisan pada bagian atau anggota tubuh dan memiliki arti bagi pemiliknya.

Pada beberapa kelompok, tato merupakan tanda suku atau status, seperti bagi masyarakat suku Mentawai, tato juga menunjukkan keahlian si pemilik.

Menurut Olong (dikutip dalam Gumilar, 2008), secara historis, tato lahir dari budaya pedalaman. Keberadaan tato pada perkembangan perkotaan mengalami perubahan makna menjadi budaya populer atau budaya tandingan yang dianggap sebagai simbol kebebasan dan keragaman.

2.3.1 Jenis Tato

Jenis tato dapat dibagi menjadi 5 kategori (Anggelina, 2015), yaitu:

A. Tato Amatir

Tato amatir adalah tato buatan sendiri, dapat dibuat dengan menusukkan tinta, arang, atau abu pada kulit menggunakan jarum. Tato amatir seringkali tidak berseni dibandingkan dengan buatan ahli profesional dan karena tato jenis ini sering dibuat dalam kondisi tidak steril, maka resiko infeksi yang diterima lebih tinggi.

B. Tato Budaya

Tato budaya merupakan tato tradisi, memiliki cara pembuatan tertentu atau tujuan khusus.

(33)

36

C. Tato Profesional

Tato yang dibuat oleh ahli profesional, menggunakan mesin tato dan memiliki standar sterilisasi.

D. Tato Kosmetik

Tato dapat digunakan sebagai riasan kosmetik, seperti tato alis, garis bibir, lipstik, bahkan rambut palsu.

E. Tato Medis

Tato dapat dibuat untuk alasan medis, seperti seseorang dengan penyakit diabetes dapat menggunakan tato tertentu untuk memberitahu petugas kesehatan jika terjadi situasi darurat.

2.3.2 Teknik Pembuatan Tato

Menurut Satria, Matheosz, dan Mamosey (2018), terdapat 3 teknik dasar dalam pembuatan tato, yaitu:

A. Membuat Tato Stensil

Tato stensil digunakan untuk menerapkan garis dasar desain tato ke kulit sebagai panduan karena saat penerapan tato, kulit akan tertarik dan dapat menyebabkan hasil tato terdistorsi. Seniman tato biasanya menggunakan kertas karbon untuk menyalin desain tato ke selembar kertas yang kemudian akan diletakkan pada kulit seperti teknik cap dan dapat dihapus setelahnya.

Namun, ada juga beberapa seniman yang menggunakan tabel cahaya untuk membuat stensil.

B. Menerapkan Tato Stensil

Sebelum stensil diterapkan, kulit harus dicukur halus dan dibersihkan dengan antiseptik. Salah satu teknik untuk menerapkan stensil yang paling umum adalah dengan menggunakan roll-on deodorant untuk mentransfer desain dari kertas ke kulit.

(34)

37

C. Kerangka Tato

Setelah desain tato tercetak ke kulit, mulai membuat outline atau garis besar tato menggunakan jarum dan tinta. Dalam rangka membuat variasi efek outline, terdapat berbagai jenis ukuran jarum untuk menghasilkan garis dengan ketebalan yang berbeda (hlm. 9-10).

2.3.3 Karakteristik Tato A. Flat Tato

Ciri flat tato adalah tato yang didominasi warna hitam, terkadang tanpa bentuk, bentuk rumit, atau hanya berbentuk outline. Contohnya adalah tato tribal atau tato berbentuk sederhana dengan satu warna, biasa digunakan oleh kaum tradisional sebagai tanda status sosial di daerahnya.

B. Tato Tradisional

Ciri tato ini terletak pada desain dan cara pengerjaan yang sederhana. Berwarna hitam atau warna yang mencolok, tebal, dan desain yang diambil tidak jauh dari lingkungan.

C. Fine Line Tato

Karakteristiknya sangat artistik dan penuh kerumitan. Biasa terdiri dari garis-garis tipis karena terdapat banyak detail dan bentuk yang seksama (hlm. 10-11).

2.3.4 Perawatan Tato

Berdasarkan data yang didapat dari dr. Kevin Andrian (2020), setelah membuat tato, terdapat 5 langkah yang perlu dilakukan agar terhindar dari infeksi tato, yaitu:

1. Lepas perban dan oleskan salep antibiotik

Setelah pembuatan tato, biasanya tato akan diperban dan boleh dibuka setelah 24 jam. Setelah membuka perban, oleskan tato

(35)

38

dengan salep antibiotik dan tidak perlu memasang perban lagi agar luka tato mengering.

2. Bersihkan kulit dengan sabun yang lembut

Basuh area kulit yang telah ditato dengan air dan sabun yang berbahan lembut. Hindari penggunaan sabun yang mengandung pewangi atau antibakteri, mengalirkan air langsung ke area tato, dan menggosok area tato dengan handuk kasar.

3. Jaga kelembapan kulit

Oleskan pelembap ke area kulit beberapa kali sehari untuk mencegah iritasi.

4. Hindari paparan sinar matahari dan jangan berenang

Selama beberapa minggu, hindari paparan sinar matahari langsung, sebaiknya juga tidak berenang sampai luka tato benar- benar kering.

5. Jangan mengelupas luka pada tato

Luka tato pada umumnya akan mengering dan membentuk kerak dalam waktu beberapa hari hingga sekitar 2 minggu.

Jangan mengelupas kerak karena bisa menimbulkan luka yang dapat menyebabkan infeksi.

2.3.5 Jenis Penyakit yang Dapat Timbul Akibat Tato

Berdasarkan data yang didapat dari dr. Allert Benedicto Ieuan Noya (2017), selain infeksi lokal, ada beberapa penyakit lain yang dapat terjadi dan menyebar melalui tato. Diantaranya adalah:

A. Hepatitis B, Hepatitis C, dan HIV

Kulit akan terluka dan terjadi pendarahan saat jarum disuntikkan untuk memasukkan tinta. Penggunaan jarum bekas dapat menjadi sarana penyebaran penyakit pada orang lain akibat kandungan darah yang menempel pada jarum. Dari sinilah kemungkinan muncul risiko terkena hepatitis B, hepatitis C, dan HIV.

(36)

39

B. Tetanus

Peralatan membuat tato yang tidak steril dapat memungkin penyebaran tetanus. Penyimpanan jarum yang tidak steril dapat mengandung berbagai bakteri, salah satunya adalah Clostridium tetani yaitu bakteri penyebab tetanus.

C. Alergi

Alergi dapat muncul pada beberapa orang akibat zat kimia yang terkandung pada tinta tato. Reaksi alergi dapat berupa gatal- gatal atau ruam. Tinta warna yang sering menyebabkan alergi adalah kuning, merah, hijau, dan biru.

D. Jaringan parut

Jaringan parut berupa guratan menonjol (keloid) atau benjolan (granuloma) dapat muncul di kulit tempat tato berada. Hal ini dapat terjadi pada sebagian orang dan dianggap mengganggu karena mengurangi kecantikan atau keindahan.

E. Kesulitan MRI

Tato permanen dapat menyebabkan kebengkakan pada daerah yang bertato selama proses MRI (Magnetic Resonance Imaging) berlangsung sehingga kualitas hasil pemeriksaan tidak maksimal. Hal ini jarang terjadi, namun dapat menimbulkan risiko besar.