Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

Di tutorial desain web untuk pemula ini, kita akan belajar mendesain halaman web sederhana di Photoshop. Tutorial ini adalah kreasi ulang tutorial Jeffrey Way di 30 Days to Learn HTML & CSS.

Preview

Di bawah adalah desain sederhana yang akan kita buat.

final-large

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Installasi Font, Clipping Mask, Penggunaan Grid 960
  • Lama Pengerjaan: 20 menit

Lanjutkan membaca Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

Iklan

Pemenang Kuis Buku “Panduan Mudah Desain Web Profesional”

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Akhirnya, kita tutup seri Panduan Desain Web untuk Pemula dengan mengumumkan pemenang kuisnya. Pemenang dipilih secara acak menggunakan fitur angka acak dari random.org.

pemenang-1.jpg

Pemenangnya adalah Ryan dan Rudi Hasan Hsb.

pemenang-2.jpg

Mendesain Interface Menu Modern

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Di tutorial ini, saya akan menjelaskan proses pembuatan menu yang digunakan oleh Syarip Yunus dalam theme tumblr premiumnya, Timeline. Saya sengaja memilih desain ini karena tampilannya yang unik dan mirip dengan desain interface sebuah aplikasi.

Preview

Berikut adalah hasil yang akan kita peroleh.

final-large.jpg

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Penggunaan Tool Vektor, Layer Mask, Layer Style
  • Lama Pengerjaan: 30 menit

Lanjutkan membaca Mendesain Interface Menu Modern

21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web

[box type=”info”]

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional
[/box]

Salah satu trend yang berkembang selama beberapa tahun ini adalah penggunaan pola dan tekstur secara ringan (subtle). Ini sangat berbeda dengan trend di era Web 2.0 yang banyak menggunakan gradient dan efek glossy. Di artikel ini, kita akan mengamati beberapa contoh penggunaan pola dan tekstur secara apik dalam desain web.

[hr]

Cast Iron Design Company

Situs ini menambahkan tekstur pada semua area situs, termasuk pada logo yang digunakannya. Memberikan kesan unik karena sangat cocok dengan font tulisan tangan yang digunakannya.

Whiteloupe

Whiteloupe menggunakan sangat sedikit tekstur bahkan lebih terlihat seperti warna solid.

Bitfoundry

Bitfoundry menggunakan tekstur noise yang sangat ringan di seluruh latarnya. Namun untuk teks, mereka tetap menggunakan warna solid. Ini menambah kontras antara teks dan latar.

SachaGreif.com

Situs ini menggunakan pola garis-garis diagonal di latar. Untuk memberikan kesan konsisten, heading widgetnya menggunakan pola yang sama.

More Air

Sedikit noise pada tekstur sudah cukup untuk menambah kontras latar dengan teks. Bunga-bunga di dekat iPad memberikan efek kedalaman pada desain.

Tvornicca Bannera

Latar situs ini menggunakan warna solid. Tapi di ilustrasinya, dia menggunakan tekstur yang cukup kasar. Logonya pun menggunakan tekstur yang sama.

Carter Digital

Desain situs ini sangat bersih. Tekstur hanya ditemukan dalam persegi gelap di bawah judul situs.

Launch Factory

Di sini digunakan banyak tekstur. Bahkan teksnya pun terlihat kasar.

Mynus

Tekstur paling berat digunakan di situs ini. Untuk menjaga kontras teks dan latar digunakan warna teks yang terang dengan drop shadow hitam untuk mengurangi tekstur di belakangnya.

Decode

Tekstur noise yang digunakan sangat lembut. Teks dan berbagai elemen lainnya bersih tanpa tekstur.

Lake Wapogasset

kippt

Village

Pola hanya digunakan di latar. Di antara latar dan elemen lain ditambahkan drop shadow sebagai transisinya.

The Black Harbor

Pola yang digunakan adalah beberapa noise besar di latar. Di area utama, tidak ada tekstur sama sekali.

Doublenaut

Pola digunakan di latar sementara gambar menggunakan tekstur.

Kelli Anderson Blog

Pola digunakan di latar situs. Sedikit tekstur di gunakan di area navigasi. Pola juga digunakan di dalam drop shadow logo.

Victoria and Albert Museum

Pola berupa ilustrasi buku digunakan di latar. Sangat cocok dengan ilustrasi situs yang juga berupa foto buku.

Stellavie

Tekstur pola pixel digunakan di latar. Warnanya sama atau mungkin mirip dengan warna logo.

The Buffalo Lounge

Pola berupa noise yang membentuk kolom-kolom digunakan dalam latar.

S.O.S Mamute

Ada banyak tekstur di sini. Cocok untuk memberi kesan alami apalagi dengan penggunaan teks tipe tulisan tangannya yang banyak digunakan.

Hack Fwd

Pola digunakan dalam latar. Di area utama, tidak ada tekstur.

10 Tutorial Desain Web yang Perlu Dipelajari Pemula

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Di artikel ini, saya akan memperlihatkan sepuluh tutorial Photoshop membahas desain web yang sangat berguna bagi para pemula. Semua tutorial ini cukup mudah bagi pemula namun ini tidak mengurangi nilainya karena teknik yang diajarkan dan hasil akhirnya berguna dalam proses desain web yang sesungguhnya. Kesepuluh tutorial ini telah saya urutkan dari yang termudah hingga tersulit.

Lanjutkan membaca 10 Tutorial Desain Web yang Perlu Dipelajari Pemula

Mendesain Login Form Gelap Bergaya Modern

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Dalam tutorial untuk pemula ini, kita akan mulai belajar membuat desain sebuah formulir login. Di sini, kita akan menggunakan ekstensi GuideGuide untuk mempermudah pembuatan guide. Terima kasih pada Izul Chaniago dan Rizky Nizamil Putra, Anda juga bisa mendownload versi HTML dari tutorial ini.

Preview

Di bawah adalah hasil yang akan kita peroleh.

final

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Layer Style, Penggunaan Ekstensi GuideGuide
  • Lama Pengerjaan: 1 jam

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Lanjutkan membaca Mendesain Login Form Gelap Bergaya Modern

8 Tips Belajar Desain Web

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Desain web adalah salah satu bidang desain yang mengumpulkan berbagai keahlian dalam satu tempat. Ini membuat banyak orang bingung ketika memulai belajar desain web. Haruskah belajar pemrogramannya terlebih dahulu? Ataukah harus memulai dengan mendesain di Photoshop? Artikel ini akan membahas beberapa tips yang mudah-mudahan mempermudah Anda untuk belajar desain web.

1. Mulai dengan Mempelajari Desain Minimalis

Desain minimalis adalah gaya desain pertama yang harus Anda kuasai. Dalam desain minimalis, Anda dituntut untuk menghasilkan desain yang efektif tanpa perlu disibukkan dengan detail-detail yang tidak begitu penting. Dengan menguasai desain minimalis, maka sebenarnya Anda telah menjalankan tujuan utama yang diharapkan dalam desain web yaitu membuat situs yang berfungsi.

tips-belajar-desain-web-1.jpg

Contoh projek desain blog minimalis di Panduan Mudah Desain Web Professional.

2. Selalu Memulai dengan Struktur yang Matang

Masalah yang sering terjadi adalah sering kali si desainer terlalu disibukkan dengan detail-detail kecil seperti tekstur, warna, atau font. Padahal hal penting pertama yang harus dipikirkan adalah merencanakan struktur situs. Sebuah blog memiliki struktur berbeda dengan portfolio karena isinya lebih cepat diperbarui. Blog perusahaan memiliki gaya berbeda dengan blog personal.

Lanjutkan membaca 8 Tips Belajar Desain Web

Kuis Berhadiah Buku “Panduan Mudah Desain Web Profesional”

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Seperti biasa, dalam setiap peluncuran buku baru, Desaindigital selalu mengadakan kuis bagi para pembacanya. Buku baru kali ini adalah “Panduan Mudah Desain Web Professional” dari Tim Penulis Desaindigital dan diterbitkan oleh PT. Elex Media Komputindo. Dalam kuis ini, ada dua buku gratis bagi dua orang pembaca yang beruntung.

buku-panduan-mudah-desain-web-profesional-1.jpg

Lanjutkan membaca Kuis Berhadiah Buku “Panduan Mudah Desain Web Profesional”

Memperkenalkan Seri “Panduan Desain Web untuk Pemula”

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Kali ini, Desaindigital berinisiatif untuk membuat seri Panduan Desain Web untuk Pemula. Seri ini akan berupa kumpulan tutorial, inspirasi desain, artikel, kumpulan resource, dan kuis berhadiah buku yang berkaitan dengan desain web. Seri ini akan berlangsung selama dua minggu, dimulai dari kuis berhadiah buku yang dimulai hari ini.

Seri ini adalah bagian dari peluncuran buku “Panduan Mudah Desain Web Professional” karya Tim Penulis Desaindigital yang diterbitkan oleh PT. Elex Media Komputindo. Tentu saja, saya berharap Anda akan menyukai seri ini. 🙂

buku-panduan-mudah-desain-web-profesional-2