#Lesson 2 - Basic dalam mendesign layout

setelah sekian lama.. sampai sya lupa letak tuts di keyboard karena belakangan ini lgi disibukkan sma beberapa pekerjaan kecil yg menyita waktu, akhirnya sya bisa kembali nulis disini. sya juga agak sedih karena masalah akun sya di paypal ngga kunjung selesai. hmm.. sya cmn berdoa semoga temen2 di forum ini bisa memberi bantuan ^^".

mengenai judul thread sya di atas, adalah kelanjutan dari thread sya sblmnya tentang basic dalam mendesign sebuah website,bagi yang belum baca, silahkan baca terlebih dahulu ya..

http://www.adsense-id.com/forums/showthread.php/118361-Lesson-1-Basic-dalam-mendesign-sebuah-website

untuk refreshing, mari coba kita ingat kembali 5 point penting dalam mendesign sebuah web. diantaranya..

1). layout
2). tipografi
3). color
4). imagery
5). navigasi

dan pada kesempatan kali ini sya akan membahas point pertama terlebih dahulu..

# layout

kadang layout ini adalah bagian yang bisa dibilang paling sulit, mengapa demikian?
karena layout adalah bagian pertama yang harus kita lewati sebelum masuk ke 4 point yang sya sebutkan di atas. pernahkan muncul pertanyaan "kenapa ya? design web saya selalu begitu2 saja, modelnya pasti ngga pernah berubah.. selalu kotak dari waktu ke waktu!?".. padahal di sisi lain, anda sadar betul kalo design anda itu membosankan dan cukup kotak ^^", dan anda ingin segera memperbaikinya kedalam bentuk layout yang lain..

dan sebenarnya ngga ada yang salah dengan bentuk layout website yang kotak. tapi, tentu kita harus menempatkan dengan tema dan tujuan awal kita. kalo dari awal memang sudah diniati seprti itu..ya mungkin tidak bermasalah..toh juga banyak design website yang professional mendesign website seperti itu. tapi yang menjengkelkan ialah kita ingin mencoba bentuk lain tapi malah secara ngga sadar bentuknya kembali ke bentuk yang seperti "kemarin-kemarin lagi" ^^"

akar permasalahannya ialah, karena kurangnya ide,referensi,dan skill yang mendukung dari dalam diri kita. lantas bagaimanakah cara mendapatkan ide tersebut??
banyak cara! sesuaikan dengan kebiasaan anda yang bisa memboost ide kreatif anda masing-masing. ada orang yang hanya dengan duduk di teras rumah..dan bisa langsung mendapatkan ide. ada yang mesti masak dulu.. entah itu karena pas masak sambil merhatiin warna2 sayuran,buah dll.. atau mungkin ada yang cara mendapatkan idenya dengan cara ngopi2 di kafe, jalan2 di mall..
yang jelas, biarkan diri anda sebebas2nya terlebih dahulu.. biarkan ide kreatif itu mengalir tanpa batasan istilah "pekerjaan"...

setelah mendapatkan ide, selanjutnya.. tuangkan ide tersebut ke dalam beberapa catatan kecil, dan tempel di dekat ruang kerja anda. dan inilah yang disebut proses "story board"...
kumpulan ide-ide kecil itu bisa sangat membantu untuk menghasilkan sebuah karya besar.. ^^". tuliskan ide anda, seperti misalkan warna yang menarik yang baru saja anda dapatkan, bentuk layout, tipe dan model font's, gambar dll...

kemudian buatlah sketsa kasar dari layout yang hendak anda bikin..contohnya adalah seperti di bawah ini :





pastikan jangan asal2an saat mendesign, sekalipun ini hanyalah sebuah sketsa. "malas" itu akan berbuntut ke dalam final webdesign kita. biasanya "kemalasan" yang sering muncul adalah.. seperti ini ( saya contohkan ke dalam bentuk percakapan yang biasa sya dengar)
"ah biarin ajalah.. toh ini cuman sketch, menunya ditulis satu aja.. yang lain biar nanti saya pas saat coding. toh apa bedanya?? sama aja kan.."

bahkan ada pula yang sengaja ngasih background asal2an.. dan beginilah percakapannya..
"ah biarin backgroundnya seadanya aja dulu.. toh nanti juga bakal diganti dengan background yang sudah fix"

hal ini memang terkesan sepele, tapi jika anda terus melakukannya.. akan mengakibatkan design yang anda sketch dengan yang anda bayangkan pada ide awal, akan jauh melenceng.. kenapa demikian? itu karena anda terlalu menyepelekan hal detil di sekitar anda. untuk itu buatlah sedetil mungkin, kalo perlu tuliskan ctatan kecil atau keterangan di samping bagian yang anda design tersebut.

setelah proses sketch selesai, barulah proses mockup. mockup adalah proses mentransformasi sketch yang kita design di kertas ke dalam bentuk digital. dalam hal ini.. adalah PSD.

berikut adalah contoh design website yang saya ambil dari google.



sama seperti penjelasan saya sebelumnya, perhatikan detil! tulislah tulisan pada footer seperti contoh di atas, sekalipun itu cuman singkat dan pendek. hilangkan kebiasaan.. "ah.. biarkan nanti saja".
dari proses ini.. biasanya anda juga akan makan waktu cukup lama. karena proses ini akan flashback dimana anda melakukan proses mencari ide kreatif yang saya bicarakan di awal tadi. warna, bentuk, gambar.. yang anda liat, anda ingat saat mencari ide kreatif..akan tertuang secara otomatis disini.. ingat, ini bukan dinamakan "magic", tapi otak kitalah yang mereka secara otomatis apa yang kita lihat dan menuangkannya secara responsif juga.. ^^"

stelah proses ini selesai, barulah kita menuju ke tahap coding static Web (HTML + CSS).
untuk tahap ini, akan saya bahas nanti.. setelah ke empat point di thread pertama sya bahas smw tentunya.hal ini karena menyangkut teknis..yang ngga bisa hanya dijelaskan sekedar melalui tulisan tanpa contoh. coding. yang jelas, HTML dan CSS adalah hal yang wajib untuk anda pahami.akan lebih baik jika anda memahaminya secara luar dalam.karena finishing dan seberapa mirip design mockup dengan static web yang akan anda dapatkan tergantung dari skill anda dibidang HTML dan CSS ini. mungkin bisa saja..jika anda hanya memiliki pengetahuan setengah-setengah..dalam bidang ini dan tetap mencoba untuk menyelesaikan tahap static web dengan browsing terlebih dahulu, mencari tutorial,dan tanya kesana kemari. tapi anda akan merasakan perbedaan, jika anda benar2 memahaminya di luar kepala.. seolah2 anda bisa coding on the fly..! hehe ^^"

itulah proses layouting secara umum. nanti akan sya bahas lebih detil di thread selanjutnya tentang2 jenis2 layout dsb..

sebagai penutup pada topik kita kali ini, ada beberapa hal yang ingin sya sampaikan.. komposisi dalam mendesign sebuah website..adalah 80% kreatifitas + 20% skill.. tapi ingat 20% disini di asumsikan kita benar2 paham yah.. ^^"

 

mantaap bro sharingnya
lanjutkan

ngomong design web yg pernah ente buat mana bro ?
kita kita mw liat .

 

thanx, moga tambah sukses mastah

 

thanks gann ilmunya

 

sya ngga pnya webgan.. nanti deh ya.. klo udh siap..pasti sya post disini kok. soalnya masih lgi rencana mw bikin sekolah web.. tpi blm ada tempatnya..

 

pokoknya wajib baca nih thread!

 

Lanjut Mastah lagi belajar design juga nih....

 

Thanks bro
bs jadi refrensi project ane..

 

waduh, lagi banyak tongkrongan baru nih.. ikutan om.. siapa tau ane ntar tertarik praktek dari lesson nya si om..

 

mantaps banget pelajaranya mas

 

wihh,baru tau ane ada thread belajar beginian,udah lesson 2 lagi,keep sharing bro

 

ditunggu tips lainnya om

 

sabar ya mas.. klo nanti ada waktu yang pas buat posting lgi. ntar psti sya post lgi deh.. ^^"

 

keren mas bro, dari konseptual sampek eksekusi

 

thread yang sangat ane butuhin, ditunggu kelanjutannya mastaaahh

 

nyimak terus gan, thanks

 

itu lesson dua nya ya...

mantep bro

 

di tunggu tips berikutnya mas bro, hehe

 

jika memang nanti ada kesempatan untuk menulis lagi.. pasti dalam waktu dekat ini saya akan menulis lagi disini. ^^"

 

mangstaaabbbb gann