WEB DESAIN (SOFTKILL)

10111882 ANGGER SETYO PANGESTU
18111564 NUR DINIE
 18111358 NUKI SETYAWAN
15111850 RANDIKA AGUSTARUNA
16111031 REZA ADITYA SAPUTRA

Web desainer adalah seseorang yang bertanggung jawab pada visual aspect pada sebuah website, yang terkait dengan layout,coloring, and typography pada halaman web. Web desainerjuga harus mempunyai pengetahuan berbagai dasar bahasa programmer seperti HTML,CSS, Javscript, PHP dan flash untuk membuat sebuah website.  

Typography
Tipografi merupakan salah satu bahasan dalam bidang desain grafis yang berfokus pada teknik dan seni membuat teks menjadi dapat dicerna dengan mudah. Perancangan teks pada tipografi dilakukan melalui typesetting, yaitu pengaturan komposisi huruf dan teks. Komposisi pada typesetting mencakup jenis huruf yang digunakan, ukuran huruf, panjang baris, jarak antar baris, jarak antar kata, dan jarak antar huruf. Bagian ini akan membahas bagaimana tipografi diaplikasikan pada dokumen web, beserta dengan teknik-teknik yang membantu kita dalam merealisasikan aplikasi tipografi tersebut.

Dasar Tipografi
Sebelum membahas bagaimana teknik aplikasi tipografi pada dokumen web, kita terlebih dahulu akan melihat berbagai hal-hal mendasar yang harus dimengerti oleh mahasiswa mengenai tipografi.

Prinsip Utama TipografiSebagai salah satu pembahasan dalam ilmu desain, tipografi memiliki prinsip yang sama dengan berbagai ilmu desain lainnya: membuat sesuatu menjadi beguna, dan mudah digunakan. Dalam konteks tipografi, tentunya hal ini diaplikasikan ke teks. Fungsi utama dari tipografi ialah membuat teks menjadi berguna dan mudah digunakan. Artinya? Tipografi berbicara tentang kemudahan membaca teks (readability) dan kemudahan mengenali setiap huruf dan kata (legibility).
Tipografi menghidupkan teks dalam sebuah tulisan. Tipografi membuat teks menjadi menarik, sehingga pembaca penasaran dan ingin membaca teks. Tipografi memenjara pembaca dalam teks: sekali pembaca mulai membaca, berhenti membaca dan melakukan hal lain akan menjadi sulit. Tipografi diciptakan untuk menghargai konten (teks) dengan memaksimalkan penampilan koten tersebut, dan tipografi diciptakan untuk memanjakan pembaca dengan memberikan pengalaman yang menarik dalam membaca teks.
Respect the text, respect the reader, respect the type.
—Allan Haley
Kutipan dari Allan Haley di atas merupakan prinsip utama dari tipografi. Penghargaan terhadap teks, pembaca, dan font (jenis huruf) merupakan hal yang harus dipraktekkan oleh setiap desainer.

White Space
White Space / Ruang kosong dimaksudkan agar karya tidak terlalu padat dalam penempatannya pada sebuah bidang dan menjadikan sebuah obyek menjadi dominan. Ruang kosong adalah ruang yang didalamnya tidak ada isi. Baik tulisan, warna mencolok, objek atau bidang tertentu yang menjadi fokus atau perhatian, biasanya kosong adalah hirarki visual yang rendah sehingga tidak diartikan menjadi sebuah .

Space atau ruang kosong penting dalam desain karena dibuat untuk berbagai tujuan. Ruang dapat berupa dua dimensi (panjang dan lebar), seperti lantai atau tiga dimensi (panjang, lebar dan tinggi). Ruang termasuk bakcground atau latar belakang, latar depan dan latar tengah. Space atau ruang berarti jarak atau sekitar area , diantara atau dikelilingi komponen dari satu bagian / objek. Ada dua buah ruang, positif dan negatif. Ruang positif berarti ruang dari sebuah bentuk yang mewakili subjek. Ruang negatif berarti ruang diantara atau mengelilingi subjek.



Bagian yang lebih banyak adalah disebut juga dengan ground / latar. Pada gambar di atas anda dapat melihat persegi yang lebih kecil pada kedua gambar sebagai sebuah figur / objek. Mungkin pada gambaran diatas pada sisi kanan anda melihat suatu figur gelap dengan sebuah lubang pada latar belakang yang lebih terang, yang didasarkan pada objek lebih gelap muncul lebih sering sebagai sebuah figur dengan bidang-bidang lebih terang sebagai latar.
Ruang kosong atau ruang negatif adalah ruang yang mengelilingi elemen desain. Pada tingkatan makro ruang kososng adalah ruang disekitar desain anda dan blok besar dari ruang kosong antara elemen. Pada tingkatan mikro ruang kosong berarti ruang diantara dua garis teks atau ruang antara sebuah gambar dan tulisan. Untuk membentuk ruang kosong biasanya kita menggunakan beberapa elemen desain berikut.

 Langkah-Langkah Pekerjaan Web Desainer


Berikut ini adalah langkah-langkah dari tugas seorang web desainer yang bisaanya di lakukan dalam sebelum pekerjaan sebuah web desain di lanjutkan ke tahap berikutnya, walaupun terkandang beberapa desainer cukup membayangkan di otak dan langsung membuatnya di photoshop, dan ada pula yang langsung merancang di browser. Tapi biasanya salah satu dari langkah ini akan tetap di gunakan untuk membuat pengerjaan lebih teroganisir.Merancang Konsep Layout (Wireframing)




Tugas pertama web designer adalah membuat rancangan layout website, rancangan layout ini bermacam-macam, ada yang sekedar membuat wireframe dengan coret-coret di kertas atau dengan tools untuk membuat wireframe lainya seperti balsamiq atau Mockingbird, ada yang cukup membayangkan di otak dan langsung membuatnya di photoshop, ada yang langsung di browser.




Merancang Layout Secara Visual


Setelah membuat rancangan layout dalam bentuk wireframe, selanjutnya tentunya membuat bentuk visualnya, bisa di photoshop, firework atau gimp.



Disini web designer bisa menyalurkan ide-idenya dalam membuat setiap elemen yang ada di website, memberi warna, menempatkan gambar dan lainya.


Web designer tentunya harus punya penjelasan-penjelasan tentang desain yang dia buat, biasanya ini terdokumentasi lengkap, kenapa memilih warna tertentu, font apa yang digunakan, dan lain sebagainya.

Konversi Layout Visual ke HTML dan CSS
Tampilan visual saja belum cukup, untuk bisa dibilang sebagai desain sebuah website maka tampilan visual tersebut harus bisa dijalankan dan harus berfungsi dengan baik jika dibuka pada sebuah web browser. Untuk itu tentunya dibutuhkan proses konversi dari file Photoshop, Firework atau Gimp kedalam bentuk HTML dan CSS agar bisa dijalankan dengan baik di Web Browser. Biasanya dikenal istilah Slicing, karena sebagain besar desain web dibuat dengan photoshop.



Pada bagian ini web designer memotong-motong desain visual yang sudah dibuat menjadi potongan-potongan gambar. Gunanya tentu agar gambar yang digunakan pada website nantinya tidak besar dan memberatkan, selain itu kegunaan memotong-motong gambar yaitu agar bisa menentukan bagian mana saja baik tulisan atau gambar yang nantinya bisa dibuat dinamis dan bagian mana yang hanya statis.


1. Membuat Susunan Markup (HTML)Tugas web designer setelah proses slicing tersebut adalah mengatur tata letak elemen-elemen yang ada di sebuah website sesuai dengan bentuk visual yang sudah dibuat sebelumnya, untuk mengatur tata letak tentunya dibutuhkan pengetahuan akan bahasa markup, yaitu HTML (Hypertext Markup Langugage) jadi web designer harus mengerti HTML, sekarang bahkan sudah HTML5.
Kenapa harus mengerti bahasa markup? sekali lagi karena desain yang dibuat itu nanti akan dibuka disebuah layar monitor dengan menggunakan web browser, bukan untuk di cetak. Jadi web designer harus bertanggung jawab memastikan desain yang dibuatnya bisa tampil baik di browser tersebut, bukan hanya satu browser, tapi ada banyak browser yang digunakan, jadi kompatibilitas tampilan di setiap browser juga menjadi tanggung jawab web designer, jadi web designer harus paham juga istilah web standard, pemahaman akan web standard ini tentunya akan sangat membantu ketika dia merancang web secara visual di photoshop, dengan paham kompatibilitas browser dia akan sangat berhati-hati dalam membuat desain, jangan sampai apa yang dibuat ternyata menimbulkan hasil yang berbeda jika dilihat di browser yang berbeda.Kenapa web designer yang menyusun markup? karena web designer lah yang paling mengerti bagaimana seharusnya desainnya bekerja pada sebuah web browser.

Mempercantik Markup Dengan CSS






Mengatur tata letak tidak cukup dengan HTML karena nanti jadinya sangat monoton, seorang web designer bertugas juga untuk mempercantik tampilan markup tersebut, tentunya untuk mempercantiknya dibutuhkan CSS (Cascading Stylesheet) yang memang pasangannya HTML, jadi web designer juga harus memahami CSS, karena dengan CSS lah nanti semua elemen yang ada di website akan diatur, seperti warna backround, bentuk teks, ukuran teks, lebar layout, jumlah kolom, dan lainnya. Tujuan akhirnya yaitu agar desain yang dibuat secara visual di Photoshop dapat serupa dengan tampilan di browser dalam bentuk HTML dan CSS.


1. Memberi Efek Tambahan Yang Diperlukan
Di zaman sekarang teknologi website semakin berkembang dengan hadirnya HTML5, CSS3, SVG, Jquery, dan teknologi lainnya. Semua teknologi itu tentunya untuk menunjang tampilan website, siapakah yang bertugas atas tampilan sebuah website? tentunya web designer, jadi web designer juga harus menguasai itu semua karena itu semua sangat penting untuk menunjang tampilan sebuah website.




Siapa yang bertanggung jawab berapa lama waktu delay dari sebuah slideshow? tentunya web designer, jadi web designer lah yang akan menentukan berapa waktu delay (jeda) munculnya slide pertama dan slide kedua.
Siapa yang bertanggung jawab atas tampilan website pada sebuah layar handphone? tentunya web designer, jadi dia harus mengerti penggunaan Media Query di CSS kalau mau websitenya tampil responsive. Atau dia harus mengerti istilah Fluid Layout jika websitenya ingin ada versi mobile tersendiri.

Memastikan kode sudah benar (Validation)Tentunya kualitas kode juga harus diperhatikan, apakah kode yang dibuat sudah memenuhi standar atau belum, jadi kode-kode HTML yang sudah dibuat harus di validasi dengan tools yang ada seperti W3 Validator (http://validator.w3.org).






 Revisi atau Update (Version Control | GIT)






Kadang saat tampilan sudah jadi dan sudah dikerjakan oleh web programmer, dan ternyata desainya ada yang kurang sempurna, ada kesalahan. Dan web designer harus membetulkan desain tersebut. Untuk kolaborasi antara web designer dan web programmer biasanya sebuah tim menggunakan software seperti Git, jadi perubahan-perubahan yang sudah dilakukan oleh designer di push dengan Git, agar nanti jika terjadi kesalahan lagi tidak sulit untuk mengelolanya. Jadi web designer juga harus memahami penggunaan software seperti Git.


Profile Web Desainer
Brendan Ciecko
Brendan Ciecko yang lahir di Massachusetts, 27 Januari 1988. Usia 9 tahun, Brendan sudah menguasai bahasa pemrograman untuk membuat sebuah web sederhana. Otaknya yang brilyan diakui semua artis dunia yang sudah memakai kepiawaiannya merancang web design untuk launching album mereka di dunia maya. Tercatat beberapa nama terkenal seperti : Mick Jagger “The Rolling Stones”, Lanny Kravitz, Monica, New Kids On the Block, Joey McIntyre,Denis Leary, Katty Pary dan yang paling terakhir adalah Slash.
Dan semua itu dia raih disaat usia yang masih muda, yakni 23 tahun dan di usia 19 tahun, Brendan mendirikan Ten Minute Media, sebuah perusahaan web designer khusus entertainment dan musik dan berpenghasilan diatas 1 Milyar Rupiah perbulan


Tidak hanya kaya dan jenius, Brendan juga seorang tokoh muda populer di Amerika yang menjadi sumber inspirasi bagi kebanyakan anak muda di Amerika yang mungkin di usia 19 tahun masih mencari jati diri dan bergelimang dengan narkoba dan alkohol serta berkeliaran di jalan-jalan. Bahkan Brendan juga diminta berbicara di beberapa universitas dan perguruan tinggi terkemuka di Amerika, seperti American International College, Michigan Tech, Hampshire College,Bay Path College, University Of Hartford dan lain-lain.


Di usia 19 tahun, Brendan sudah mencatatkan namanya sebagai enterpreneur muda berpenghasilan jutaan dollar. Ini juga dibuktikan Brendan lewat karya-karyanya yang meraih penghargaan internasional seperti :


- LAWeekly.com Web Awards “Best Music MySpace Page” - Slash (2010)
- Inc. Magazine “30 Under 30″ (2008)
- Web Marketing Association’s “WebAward” (2008)
- BusinessWest’s “Forty Under 40″ (2008)
- Grinspoon Entrepreneurial Spirit Award (2008)
- ADDY “Best in Show” Award, Western MA (2008)
- GSEA New England Regional Finalist (2007)
- PC Magazine SMB Award (2007)






Dalam sebuah wawan cara dengan BBC Bredan bercerita tentang bagaimana dia bekerja dalam industri musik, pekerjaan utama saya adalah menangkap essensi pemusik dan saya berusaha menghadirkan dan merepresentasikannya lewat web atau media digital lainnya. Langkah pertama saya adalah mendiskusikannya bersama artis bersangkutan, mengetahui target musik mereka dan berusaha menghadirkan eksperimen musik mereka lewat karya saya.


Saya hanya dapat merancang ini semua jika saya mendengarkan musik. Musik membantu saya mengatur kecepatan irama kerja, proses kreatif saya dan alur kerja saya. Dan saya mengatur ritme kerja saya juga dengan musik. Desain dan keseimbangan adalah kunci segalanya. Jika komposisinya tepat, maka saya sudah bekerja untuk sesuatu yang bernilai.




Sebuah pencapaian brilyan dari seorang anak muda yang berbakat. Dengan segala yang ia miliki dari kerja sendiri dan usahanya meraih impian, maka Brendan adalah wakil generasi anak muda dari bangsa yang dalam gambaran dunia banyak diwakili oleh narkoba dan alkohol. Dan Brendan berhasil membuktikan pada dunia bahwa usia muda adalah usia paling tepat untuk bekerja keras dan meraih impian.


Daftar Pustaka


http://sosok.kompasiana.com/2012/03/04/brendan-ciecko-milyarder-muda-web-designer-artis-dunia-440054.html


http://manpras.blogspot.com/2013/03/pengertian-web-design.html


Alexander Sibero,Membuat Website Profesional,Mediakom,Jakarta,2013