Wireframing, Grid, Golden Ratio serta Skema dalam Web

Merancang Web bukan merupakan sesuatu yang mudah. Sebagian orang yang memang sudah dari awal berkecimpung didunia computer, memandang web merupakan sesuatu yang mudah. Tapi bagaimana dengan orang-orang yang belum menguasai web. Bisakah mereka membuat web mereka sendiri?

Hal tersebut merupakan problema yang dialami oleh beberapa orang diluar sana. Jangankan membuat web, beberapa orang masih asing dalam istilah-istilah dalam web. Maka dari itu disini akan dijelaskan mengenai istilah-istilah dalam tahap awal perancangan web. Diantaranya Wireframing, Grid, Golden Ratio dan juga Skema. Tentunya masih banyak lagi istilah lain diluar sana. Tetapi disini admin hanya akan mengulas beberapa dan silahkan mengexplore pengetahuan kalian sebanyak mungkin.

WIREFRAMING

Wireframe adalah kerangka dasar/blueprint atau bisa juga disebut rancangan awal dari halaman web yang akan kita bangun. Secara garis besar didalam wireframe ini kia menempatkan elemen-elemen penting dari halaman web tersebut pada posisinya masing-masing seperti banner, body content, menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam web nantinya. Secara visual tampilan dari wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dri masing-masing elemen dari layout halaman web. Dalam pembuatan Wireframing atau mockup bisa dengan menggunakan aplikasi pengolah grafis seperti photoshop, corel draw dan aplikasi lainnya. Wireframe dapat berguna ketika designer berkomunikasi dengan klien, karena dengan wireframe designer dapat dengan mudah mem-visualisasikan ide-ide dengan lebih mudah dibanding dengan penjelasan skema desain secara lisan. Contoh Wireframe

GRID

Grid adalah struktur yang terdiri dari garis-garis horizontal atau gabungan garis vertikal dan horizontal yang saling bertemu yang digunakan untuk mengatur layout atau interface. Dengan grid ini kita membagi suatu layout berdasarkan kolomkolom, selanjutnya dengan kolom-kolom ini content diatur dan ditempatkan. Selain dalam layout web grid juga terdapat didunia design. Grid disini digunakan sebagai alat bantu untuk mendesign media cetak seperti layout buku, brosur, poster dan sebagainya. Grid memberi guideline kepada designer dimana elemen desain seharusnya ditempatkan alam suatu layout.
Grid membantu designer memetakan berbagai elemen-elemen designer yang berbeda untuk ditempatkan pada layout dan menghubungkan elemen-elemen yang menyusun layout halaman web tersebut. Sehingga memberi kesan keteraturan pada halam web, yang pada akhirnya secara visual menghasilkan layout yang jelas dan terorganisir.

960px menjadi standar ukuran lebar layout web?

Hal ini dikarenakan untuk menyisakan ruang di bagian kiri dan kanan, tidak full memenuhi layar monitor, dan juga alasan utamanya adalah menyangkut faktor user experience dari segi kenyamanan pengguna.

Konsep GOLDEN RATIO

Golden ratio, yang secara harfiah diterjemahkan sebagai “rasio emas” (emas disini maksudnya seperti emas dalam “kesempatan emas”), merupakan sebuah angka yang sangat spesial dalam matematika. Golder ratio adalah bilangan irasional yang nilainya mendekati 1,618. Golden ratio biasanya disimvbolkan dengan huruf yunani φ. Angka ini sering muncul dalam konsep geometri, seni, arsitektur, hingga struktur makhluk hidup. Dua buah besaran a dan b (dengan kondisi a>b) dikatakan memiliki golden ratio jika perbandingan antara dua besaran tersebut sama sepert perbandingan total keduanya dengan nilai maksimum diantara keduanya (yaitu dalam kasus ini). Sebagai contoh sederhana, anggaplah kita punya sebuah garis dan memotongnya jadi dua bagian yang tidak sama. Golden ratio akan diperoleh jika bagian yang panjang dibagi dengan bagian yang pendek sama dengan panjag garis, mula-mula dibagi dengan bagian yang panjang.

Golden ratio merupakan bilangan irrasional dengan nilai sesungguhnya 1,61803398874989484820... yang digitnya terus bertambah tanpa pola tertentu. Namun yang pasti adalah persamaan seperti pada contoh pembagian garis diatas harus terpenuhi

Jenis-jenis SKEMA

a. Skema warna monokromatik (monochromatic color scheme)

Dalam skema monokromatikdibuat dengan menggunakan satu warna yang sama pada roda warna dalam beberapa shades(gelap), tints (terang), atau tonesakan memberikan penampilan yang berbeda pada kombinasi warna monochromatic. Shadesadalah warna murni atau hueyang dicampurkan dengan warna hitam. Tints adalah warna murni atau hue yang dicampurkan dengan warna putih. Tones adalah warna murni atau hue yang dicampurkan dengan warna abu-abu. Warna ini memberikan kesan bersih dan elegan.

b. Skema warna saling melengkapi / komplementer (complementary color scheme)

Dalam skema ini, semua warna yang digunakan adalah warna yang saling berlawanan pada roda warna. Mata manusia cenderung tertarik pada sesuatu dengan warna komplementer. Ketika anda merancang lure (umpan palsu) untuk dijual komersil dicat dengan warna komplementer (ungu dan kuning) , dan menempatkan umpan monokromatik disamping umpan komplementer dalam satu rak, para pembeli/pemancing mungkin lebih tertarik pada umpan dengan warna komplementer (dengan asumsi pengerjaan cat yang baik).

c. Skema warna analog (Analog Color Scheme)

Skema warna yang analog menggunakan satu warna pada roda warna dan dua warna di sebelahnya. Salah satu contoh skema warna Analog hangat (merah, oranye dan kuning) atau dingin (biru, ungu dan hijau).
Pendekatan skema analog yaitu memilih warna, 3 sampai 5 warna yang berdekatan satu sama lain dalam diagram roda warna. Skema analog yang paling terkenal adalah yang digunakan pada umpan klasik “firetiger” pola yang terdiri dari warna hijau terang, kuning, dan oranye. Kami telah mendengar rumor bahwa umpan warna ini cenderung menghasilkan banyak ikan. Hal ini akan menjadi pemikiran karena ikan tidak bisa melihat semua warna yang ada didalam diagram roda warna. Dengan menggunakan skema warna, memungkinkan anda untuk menyertakan warna yang mudah dilihat dan dikenali oleh ikan sehingga meningkatkan kesempatan untuk mendapatkan ikan.

d. Skema warna Triadic (Triadic color scheme)

Salah satu skema warna adalah skema Triadic, dimana skema warna Triadic memiliki kombinasi tiga hue yang relatif berjarak sama dalam color wheel. Gambar di samping merupakan contoh dari skema warna Triadic, dimana terdapat tiga kombinasi hue yaitu hue warna merah , kuning dan hue warna biru. Ketiga hue ini merupakan warna primer sehingga memiliki jarak yang sama dalam color wheel. Warna kuning pada kulit menggambarkan kehangatan ditunjang dengan warna merah pada latar yang memperkuat gambar memiliki sifat yang panas. Warna biru pada pakaian yang bersifat dingin memecah suasana panas pada gambar tersebut. Dari ketiga kombinasi hue pada gambar tersebut menimbulkan kesan yang dinamis.
Jika sebuah segitiga sama sisi ditarik di atas roda warna, sudut yang akan menyentuh tiga warna. Warna menyentuh dianggap warna triadic. Warna-warna primer triadic, seperti warna sekunder dan warna tersier.

e. Skema warna Tetradic (Tetradic color scheme)

Skema warna tetradic adalah Teori skema warna melibatkan dua pasangan yang saling melengkapi secara bersamaan. Jika persegi panjang digambar di atas roda warna, dua pasangan yang saling melengkapi sentuhan sudut akan menjadi dasar untuk skema warna triadic. Skema warna tetradic ialah skema warna yang kompleks dan beragam. Skema warna tetradic disebut juga sebagai ganda komplementer karena menggunakan dua set warna komplementer. Meskipun ada standar untuk untuk
memastikan warna tersebar merata. Meskipun skema ini bisa terlihat bervariasi dan berwarna-warni, tetapi sulit untuk menyeimbangkannya.

f. Skema warna Split komplementer (Split complementary color scheme)

Skema ini adalah kombinasi warna-warna yang saling bersebrangan letaknya dalam lingkaran warna. Split komplementer menggunakan satu warna dan dua warna di sisi objek yang melengkapi. Warna primer adalah merah, kuning dan biru. Warnawarna sekunder ungu, hijau dan oranye. Warna di antara warna-warna primer dan sekunder disebut warna tersier. Contoh : Merah dan hijau, Kuning kehijauan dan ungu kemerahan Skema warna.

g. Skema warna Persegi (Square color scheme)

Skema warna persegi mirip dengan skema warna tetradic, tetapi dengan empat warna spasi secara merata di sekitar lingkaran warna. Skema warna persegi ialah skema warna yang paling kompleks dan beragam. Skema warna ini akan lebih baik jika membiarkan satu warna menjadi dominan. Juga harus memperhatikan keseimbangan antara warna-warna hangat dan sejuk dalam desain yang akan kita buat.

TYPOGRAPHY

Typography atau tipografi yaitu suatu perpaduan seni dan teknik dalam mengatur tulisan agar maksud dan arti dari tulisan tersebut dapat tersampaikan dengan baik secara visual kepada pembaca serta menciptakan kenyamanan membaca semaksimal mungkin untuk pembaca. Tipografi tidak hanya terbatas pada pemilihan jenis huruf, ukuran huruf, dekorasi, kesesuaian dengan tema, tetapi tipografi juga meliputi tata letak vertikal atu horizontal tulisan pada sebuah bidang desain. Tipografi berperan untuk mengkomunikasikan ide atau informasi dari tulisan ke pembaca. James Craig mengklasifikasikan huruf menjadi beberapa jenis, diantaranya:

1. Roman Ciri: memiliki sirip/kaki/serif yang berbentuk lancip pada ujungnya, memiliki ketbalan dan ketipisan yang kontras pada garis-garis hurufnya, serta memiliki kesan yang klasik, anggun, lemah gemulai, dan feminin.

2. Egyptian Ciri: memiliki kaki/sirip/serif yang berbentuk persegi seperti papan dengan ketebalan yang sama atau hampir sama dan memilki kesan kokoh, kuat, dan stabil.

3. Sans Serif (tanpa sirip/serif) Ciri: tidak memiliki sirip pada ujung hurufnya dan memiliki ketebalan huruf yang sama atau hampir sama, serta memiliki kesan modern, kontemporer, dan efisien.

4. Script Ciri: menyerupai goresan tangan yang dikerjakan dengan pena, kuas, atau pensil tajam dan biasanya miring ke kanan, serta memiliki kesan sifat pribadi dan akrab.

5. Miscellaneous Huruf jenis Miscellaneous merupakan pengembangan dari bentuk-bentuk yang sudah ada dan ditambahkan dengan hiasan dan ornamen atau garis-garis dekoratif. Huruf Miscellaneous memiliki kesan dekoratif dan ornamental.