Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Design
Webdesign

Mendesain Sebuah Website dari Dasar

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Bagian terbesar  dalam mendesain sebuah website bukan hanya tentang teknik menggunakan Photoshop, jadi untuk menulis sebuah tutorial Photoshop yang berhubungan dengan topik ini sedikit sulit. Namun saya akan tetap memberitahu anda tentang desain yang baru-baru ini saya buat. Kita akan melihat beberapa langkah-langkah dalam Photoshop dan saya akan berusaha memberitahu anda alasan-alasan dibalik langkah yang saya ambil.

Anda dapat menemukan file Photoshop PSD di folder yang berlabel ‘PSDs’ yang ada di file ZIP yang telah anda unduh. Anda mungkin ingin untuk melihatnya secara singkat sebelum kita mulai.


Pertama, Desain Akhir.

Pertama, lihatlah desain berikut ini. Saya menulis sebuah buku tentang tema dalam Wordpress yang berjudul How to Be a Rockstar WordPress Designer. Buku ini membutuhkan sebuah contoh tema yang dapat diikuti, sehingga saya mendesain satu tema yang saya beri nama “Creatif” – karena nama ini terdengar sangat ‘Perancis’ dan cukup keren. Pada dasarnya, tema ini adalah sebuah desain set yang akan kita buat menjadi dua tema WordPress – satu tema untuk blog pada umumnya dan yang lainnya adalah tema yang memudahkan kita untuk membuat portfolio dengan menggunakan Wordpress.

Apa yang anda lihat di bawah ini adalah empat layar utama yang saya gunakan untuk membuat sebuah tema. Secara umum, saya membuat dua layar untuk website pada umumnya, satu untuk homepage dan yang lainnya untuk content page. Jika situs tersebut lebih rumit, maka saya akan membuat satu layar per halaman yang dirasa penting. Anda juga bisa mendesain suatu halaman ketika anda ada di tahap pembuatan HTML, namun akan lebih baik jika anda menandai halaman-halaman yang penting sehingga anda bisa memastikan bahwa semuanya terlihat dan terasa bagus.

Layar-layar dibawah ini adalah:

  1. Homepage untuk tema Creatif Portfolio
  2. Homepage untuk tema Creatif Blog
  3. Halaman konten umum untuk kedua jenis blog tersebut.
  4. Skema warna alternatif yang akan kita buat menjadi stylesheet yang dapat diubah – sehingga anda dapat menukar warna tema tersebut untuk mendapatkan versi terang atau gelap dari kedua tema tersebut.









Palet Warna

Salah satu langkah awal yang saya lakukan saat akan mendesain sebuah situs baru adalah memilih palet warna. Ada banyak situs bagus yang dapat membantu anda untuk memilih warna yang tepat untuk situs anda, namun seringkali saya menemukan warna yang tepat dengan cara bereksperimen sendiri. Cara sederhana yang biasanya saya pakai untuk memilih warna adalah dengan cara memilih set warna yang netral dengan sebuah warna highlight untuk mengangkat warnanya. Untuk artikel ini, saya memilih palet warna beige-abu-abu dengan warna biru muda yang terang sebagai warna highlightnya.



Langkah 1

Kita akan memulai tutorial ini dengan logo kecil. Meskipun biasanya mendesain sebuah logo adalah proses yang rumit, saat ini saya hanya ingin membuat gambar kecil yang bisa menonjolkan halaman website saya. Jadi, saya melewati semua proses umumnya dan langsung saja membuat sebuah teks kecil/kotak logo yang menarik. Jika anda tertarik dengan cara mendesain logo, blog yang tepat untuk topik ini adalah Logo Design Love oleh David Airey, dan tentu saja anda bisa menemukan galeri yang berisikan berbagai macam logo menarik di Faveup.

Jadi, saya memilih untuk menggunakan font News Gothic Condensed Bold. Saya rasa ini adalah font standar dari Mac, namun saya juga kurang yakin karena saya banyak sekali menginstall font di komputer saya. Saya menggunakan Layer Style yang sederhana (yang bisa anda lihat pengaturannya pada langkah selanjutnya) yang akan membuatnya terlihat seperti web2 dan trendi. Logo ini menggunakan gradasi warna yang tipis, bayangan yang halus, dan border 1px untuk menonjolkan tulisan tersebut pada halaman.



Langkah 2

Berikut adalah pengaturan untuk Layer Style:



Langkah 3

Selanjutnya saya menambahkan persegi panjang dengan sudut tumpul di belakang teks. Anda bisa membuat bentuk ini dengan Rounded Rectangle Tool (U). Seperti yang bisa anda lihat di bawah ini, saya juga menambahkan gradasi warna tipis pada kotaknya. Anda dapat melakukan ini dengan cara dengan menekan CTRL pada kotak layer, pilih pilihan pixels, lalu pilih Select > Modify > Contract dan ubah menjadi 1px. Lalu pada layer yang baru, buatlah sebuah Radial Gradient dari versi warna yang lebih terang ke warna yang lebih gelap hingga memudar ke transparan.

Seperti yang sudah saya bicarakan sebelumnya, desain ini mempunyai kesan seperti web2 – desain ini terlihat bersih dan sederhana, mempunyai gradasi warna dan cukup rapi. Beberapa desainer mungkin memilih untuk tidak mengikuti tren, namun saya sendiri tidak merasa keberatan untuk mengikuti tren asalkan tren tersebut memang sesuai dengan tujuan saya. Dalam hal ini, saya menginginkan tampilan bersih yang tidak akan mengganggu konten dan berfungsi sebagai sampul yang bagus. Namun menurut saya semua itu kembali lagi ke subyektif masing-masing.



Langkah 4

Kanvas yang saya gunakan ukurannya sekitar 1100px wide x 1400px. Pada kenyataannya, semua konten berada dalam rentang 1000px sehingga konten tersebut dapat dilihat di layar dengan resolusi 1024 x 768. Saya menggunakan kanvas yang lebih luas agar saya dapat melihat apa yang terjadi jika pengunjung mempunyai resolusi yang lebih besar.

Di langkah ini saya telah menambahkan dasar dari header saya, seperti bar dengan warna gelap pada bagian atas, warna yang lebih gelap dari warna background sebagai menu bar saya, sebuah garis 1px untuk menutup menu bar dan beberapa subteks di bawah logo saya (dengan kembali menggunakan font News Gothic Condensed).

Ada dua hal yang perlu anda perhatikan:

  1. Lebih baik menggunakan warna-warna yang ada di palet warna anda. Dalam desain saya warna background, menu bar, menu items dan subteks logo saya semuanya bervariasi dan lebih gelap dari palet warna saya. Hal ini akan membuat tampilan yang terasa menarik, mulus, dan tidak bertentangan satu sama lain. Tentu saja jika anda hanya menggunakan warna-warna yang itu-itu saja, desain anda akan terasa membosankan. Maka dari itu kami memperkenalkan warna highlight kami pada bagian akhir. Gaya desain yang berbeda akan membutuhkan variasi warna yang berbeda pula, namun dalam desain ini, kami meinginkan warna-warna yang senada dengan satu warna highlight yang kuat.
  2. Untuk tambahan, anda dapat menampilkan warna-warna yang anda pilih pada desain anda. Contohnya kami yang menggunakan background berwarna beige dan menambahkan warna-warna yang lebih gelap pada tiga titik – logo, bar di bagian atas dan link menu yang di-highlight. Hal ini akan membuat tampilan yang seimbang dan senada diantara tiga bagian tersebut. Keseimbangan dalam desain sangatlah penting.


Langkah 5

Pada langkah ini kita akan menambahkan bagian pertama dari warna highlight. Warna ini ditampilkan sangat tipis pada garis 1px yang ada di bagian atas. Lalu kita akan menambahkan bagian-bagian lainnya agar warna highlight tersebut muncul kembali di titik-titik lainnya dan akan membuat bagian-bagian tersebut menyatu dalam satu desain yang terlihat menarik. Karena desain ini tidak memuat banyak hal selain bagian-bagian halaman yang diletakkan dengan baik dan pemilihan warna, maka pemilihan warna yang tepat sangatlah penting.



Langkah 6

Karena sekarang halaman ini terlihat sedikit ‘datar’, saya akan menambahkan sebuah layer diatas layer background. Lalu saya akan menggambar sebuah Radial Gradient dari warna beige/abu-abu gelap ke warna transparan dan menaruh layer tersebut di Colour Dodge untuk menerangi background. Karena menu bar didesain dengan menggunakan warna transparan, efek tersebut juga terlihat dari menu bar.

Sangatlah penting untuk mengingat bahwa anda perlu untuk mengubah desain ini ke HTML nantinya. Dengan alasan yang nantinya bisa anda lihat sendiri, saat anda telah sampai di ujung dengan area 1000px yang bisa dilihat, kita akan kembali ke warna yang monoton. Artinya, nanti, anda akan dapat membuat sebuah potongan gambar dan menggunakannya sebagai gambar background CSS. Lalu, saya akan menambahkan gambar background lainnya dengan area highlight yang besar dan gambar inilah yang akan menjadi gambar background pada badan konten utama.

Mengetahui situs yang akan anda gunakan untuk membangun HTML juga penting sehingga anda dapat menyesuaikan desain anda sedemikian rupa dan menghindari masalah-masalah rumit lainnya. Hal ini kebanyakan saya ketahui dari pengalaman saya sendiri dan mempelajari bagaimana keputusan yang anda buat pada desain anda akan mempersulit anda. Menurut saya akan jauh lebih mudah untuk membuat background yag dapat diulangi dengan mudah diluar area 1000px yang terlihat.



Langkah 7

Selanjutnya adalah saatnya menambahkan area putih pertama yang saya gunakan sebagai area blok konten. Disini saya menggunakan sebuah garis 1px sebagai outline dengan warna yang lebih gelap dari warna background, lalu tambahkan garis 1px sebagai batas interior dan akhirnya, sebuah garis dengan gradasi warna beige yang menuju ke bawah. Gaya desain ini senada dengan logo saya sebelumnya. Dengan menggunakan warna yang lebih gelap sebagai outline, diikuti dengan warna yang lebih terang sebagai garis interior, kita akan mendapatkan tampilan yang tajam. Ketajaman tampilan tersebut berasal dari kontras misalnya dari warna gelap ke warna terang.

Secara pribadi saya merasa ketajaman dan kejernihan sangat penting dalam desain web. Tidak ada yang lebih menganggu saya selain kurangnya perhatian untuk membuat detail web terlihat jernih dan tajam.



Langkah 8

Saya telah menambahkan konten buatan pada langkah ini. Karena teks ini harus berbentuk teks HTML, maka sangat penting bagi anda untuk berhati-hati dalam memilih font. Tidak ada yang lebih menyedihkan dari ketika anda telah memilih font yang bagus lalu anda ingat bahwa font tersebut bukanlah font standar dan tentu saja hasil desain anda akan berbeda dari apa yang anda bayangkan. Saya menggunakan Helvetica untuk headline yang bercetak tebal dan Arial untuk teksnya.

Dalam Photoshop, anda disarankan mengatur Anti-Aliasing ke pengaturan “Sharp” untuk mengetahui bagaimana teks tersebut akan terlihat di browser. Dulu, saya menggunakan “None”, namun sekarang kebanyakan PC dan MAC menggunakan ClearType untuk membuat font terlihat mulus.

Pastikan kembali bahwa subteks link website anda menggunakan warna biru sebagai highlightnya, agar senada dengan garis headline 1px yang kita tambahkan sebelumnya.



Langkah 9

Selanjutnya sata menambahkan elemen desain kecil dalam bentuk message strip pada bagian kanan atas di ujung kotak saya. Dalam desain sederhana seperti ini (yang hanya terdiri dari garis sederhana dan kotak), mempunyai satu atau dua elemen yang berbeda akan membuat desain anda terlihat menarik. Dalam hal ini, kita akan menggunakan warna highlight kita yang dikombinasikan dengan sudut 45’ yang akan membuat elemen tersebut terlihat sangat bagus.

Pertama, kita akan menggambar sebuah persegi panjang dan menambahkan teks di atasnya. Lalu saya menggunakan Dodge Tool (O) untuk menerangi bagian tengahnya, setelah itu saya menambahkan Later Style untuk memberikan sedikit bayangan pada teks tersebut. Kemudian, saya memilih kedua layer tersebut, menekan CTRL-T untuk mengubah dan memutarnya sebanyak 45’.



Langkah 10

Setelah meletakkannya di atas kotak saya, saya memotong ujungnya seperti yang terlihat di gambar. Sekarang anda akan melihat bahwa kita bisa saja menaruh agar garisnya sebaris dengan kotak tersebut, namun menurut saya akan lebih bagus jika kita membuat garis tersebut terlihat seperti mengelilingi kotak tersebut, sehingga saya membuatnya 4px dari kotak tersebut.



Langkah 11

Selanjutnya saya memilih pixelnya secara manual dengan pola yang bisa anda lihat di bawah ini, saya membuat sebuah layar di bawah layer message strip dan menggunakan warna biru yang lebih gelap. Saya memilih warna yang lebih gelap agar hasilnya terlihat seperti bagian belakang message strip tersebut, anda juga dapat melihat bahwa saya membuatnya semakin gelap ke arah kanan dimana warna itu akan berakhir sebagai bayangan buatan.



Langkah 12

Kemudian saya membuat duplikat bungkusnya dan memutarnya sebanyak 90’, lalu saya meletakkannya di sebelah tangan kanan dari kotak tersebut, seperti yang bisa anda lihat. Dan voila, jadilah elemen desain kita!



Langkah 13

Selanjutnya saya membuat bagian-bagian halaman website lainnya. Tidak ada hal yang baru dalam proses ini. Saya hanya menggunakan kembali desain elemen yang sama – gaya teks yang sama, message strip yang sama, kotak-kotak yang sama – dan meletakkannya di tempat dimana saya ingin meletakkan konten saya.



Langkah 14

Selanjutnya saya menambahkan bagian footer. Tidak ada hal yang sangat menarik dari footer ini, namun saya menggunakan warna yang sama dengan bar di bagian atas agar warnanya kembali terlihat dan menutup desain ini dengan sempurna.



Langkah 15

Karena saya membuat tema WordPress maka saya juga memutuskan untuk membuat versi dari logo saya yang dapat dibuat dengan teks biasa. Anda dapat melihatnya di  bawah dan di komponen HTML tutorial ini dimana kita akan membuat ‘logo’ tersebut.



Langkah 16

Di tahap ini saya akan menunjukkan palet layer saya. Saya tidak terlalu suka memberi nama layer saya (karena saya orang yang malas) namun saya tetap menggabungkan layer saya ke dalam set. Ini adalah desain untuk logo vs logo teks, tema blog vs portfolio dan halaman internal yang berada di file PSD yang sama, namun berada di set layer yang sama. Jadi saya bisa menukar letak mereka dan mendapatkan susunan yang berbeda. Hal ini sangat berguna karena jika saya tiba-tiba memutuskan untuk memindahkan logo 2px ke kiri, saya tidak perlu membuka tiga file sekaligus dan memindahkan 2px pada setiap file tersebut dan beresiko menghancurkan susunan desain tersebut. Dan juga, dengan meletakkannya dalam satu file, menurut saya mereka terlihat bagus dan teratur dan membuat saya merasa hangat dan nyaman saat melihatnya.



Langkah 17

Sekarang saya akan menunjukkan bahwa saat latihan hasil desain saya tidak seperti apa yang saya bicarakan di tutorial. Faktanya, desain buatan saya pada masa awal lebih terlihat seperti gambar yang ada di bawah ini.

Saat itu saya tidak dengan sengaja mengganti layer cokelat tua saya dan berpikir bahwa desain ini terlihat lebih bagus dengan warna yang lebih terang. Inilah yang saya sebut sebagai Kecelakaan yang Menyenangkan. Saya ingin berkata bahwa hasil kerja saya yang terlihat bagus adalah buah dari kepintaran saya, namun sejujurnya setengah dari hasil desain saya berasal dari keberuntungan.

Ada juga waktu dimana saya hampir menyelesaikan desain saya dan melihat desain buatan saya di masa awal dan berpikir bahwa desain saya juga terlihat cukup bagus dengan warna background yang gelap. Jadi saya memutuskan untuk membuat versi dengan background yang gelap, lalu saya membuat agar tema tersebut mempunyai pilihan stylesheet yang dapat ditukar, cerdas bukan!



Langkah 18

Jadi saya membuat salinan dari file desain saya dan mengganti backgroundnya menjadi warna cokelat tua. Untungnya, tidak terlalu banyak yang perlu diganti, saya hanya membuat logo tersebut menjadi lebih gelap dan berwarna hitam sehingga logo tersebut tetap menonjol. Saya juga mengatur beberapa warna agar desain tersebut terlihat menyatu. Mungkin desain ini tidak sebagus desain yang asli, namun desain ini dapat menjadi tambahan yang menarik untuk kumpulan desain tersebut.



Kesimpulan

Seperti yang telah saya sebutkan di awal tutorial ini, desain tema ini tidak hanya tentang teknik Photoshop. Kenyataannya adalah desain web seringkali hanya menggunakan teknik dasar untuk mengisi blok dengan warna-warna. Desain ini lebih berbicara tentang pemilihan warna-warna, font tulisan, dan bagaimana anda akan meletakkan semua hal tersebut. Saya harap anda mendapatkan sesuatu dari proses ini.


Membangunnya ke HTML

Tentu saja mendesain sebuah situs di Photoshop hanyalah sebagian dari pekerjaan mendesain web. Langkah selanjutnya adalah membawa desain tersebut ke HTML.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.