Inspirasi Desain Web untuk Pemula

Inspirasi Desain Web untuk Pemula
April 3, 2014 mirzailhami

Tak dapat dipungkiri, perkembangan teknologi web terus berkembang dengan sangat pesat hingga saat ini. Ada ribuan aplikasi web dan mobile baru bermunculan di internet setiap harinya. Bahkan internet sekarang ini adalah sebuah industri bisnis terbesar dunia.

Apa yang dapat kita manfaatkan dari hal tersebut? Terjun didalamnya atau hanya menonton dari kursi penonton? Dengan kemampuan biasa atau tanpa pengalaman sekalipun, tidak menutup kemungkinan untuk Anda menjadi web desainer. Gimana cara mulainya? Apa yang perlu dipersiapkan pertama sekali?

Inspirasi Desain Web untuk Pemula

Inspirasi Desain Web untuk Pemula (credit: flickr.com)

Artikel ini bertujuan untuk memberikan Anda sedikit gambaran bagaimana memulai untuk menjadi seorang web desainer. Ini merupakan langkah awal, sebagai sumber referensi untuk Anda belajar nantinya.

Sebelumnya, penting untuk diketahui bahwa menjadi seorang web desainer professional tidaklah dapat diraih dalam satu malam. Anda harus melalui tahapan proses sebelum mengantarkan Anda di tingkat mahir.

HTML & CSS

Ini bukan pemrograman. HTML dan CSS hanya berupa bahasa penanda, dan bergantung satu sama lain. Anda wajib mempelajari keduanya, mustahil belajar CSS tanpa mempelajari HTML, begitu pula sebaliknya. Anda tidak akan dapat membuat website yang menarik tanpa menggunakan CSS.

HTML adalah singkatan dari “HyperText Markup Language”. Ini adalah bahasa penanda dari sebuah website. Tersusun dengan “tag” atau disebut juga dengan “elemen”.

Misal, sebuah paragraf berikut diapit oleh tag paragraf:

<p>Halo gan, gue lagi belajar HTML nih. </p>

 

CSS adalah singkatan dari “Cascading Style Sheets”. Ini digunakan untuk menambahkan style dari setiap elemen HTML di website Anda. Sederhanya begini, jika HTML adalah berupa pondasi sebuah bangunan, maka CSS adalah penampilannya (warnanya, ukuran, dekorasi).
Cara menuliskan CSS adalah dengan mengikuti tag HTML-nya, seperti:

p {
color: red;
font-family: verdana;
margin-top: 0;
} 

Kode CSS di atas menampilkan semua paragraf dengan warna merah, jenis font-nya verdana dan memiliki margin atas sebesar 0 piksel.

Referensi tambahan:

  • W3Schools – Referensi terbaik untuk memulai belajar HTML dan CSS
  • 1stwebdesigner – Tutorial, inspirasi dan pemrograman
  • Hongkiat – Web desain, web development, HTML & CSS, wordpress dan lainnya
  • Net Tuts – Web development, pemrograman, CSS & HTML
  • Creatiface – Tutorial, tips, inspirasi, dan web development karya anak negeri
  • Ariona – Belajar CSS, HTML, layout dan web development karya dalam negeri

CMS – Content Management System

Menulis adalah alat yang paling ampuh untuk mengikat ilmu. Bukan hanya sekedar berbagi ilmu, dengan menulis di blog, pastinya Anda juga akan sedikit banyak belajar bagaimana membuat desain halaman blog yang menarik, memilih template dan tipografi.

CMS Sebagai Inspirasi Desain Web

CMS Sebagai Inspirasi Desain Web (credit: flickr.com)

Sebagai langkah awal sebelum terjun ke industri yang sebenarnya, silahkan dimulai dengan membuat blog terlebih dahulu. Tulis tentang apapun yang dikuasai, tidak harus tentang komputer atau pemrograman.

Diawal memulai, dibutuhkan fokus. Kemudian, kembangkan dan ekspolorasi lebih jauh untuk mendapatkan banyak pengalaman. Berikut beberapa rekomendasi:

WordPress – Paling banyak digunakan sekarang ini. Mudah untuk diimplementasi dan memiliki berbagai plugin yang cukup powerful.

Drupal – CMS yang paling kuat sistem keamanannya. Sedikit lebih rumit dan kompleks, namun patut untuk dicoba.

Joomla – CMS ini juga memiliki ribuan tema yang menarik. Bisa dipilih sesuai dengan kategori website Anda.

Tentu ada banyak lagi CMS lainnya dan memiliki kelebihan dan kekurangan masing-masing. Silahkan eksplor lebih jauh. Rekomendasi saya adalah gunakanlah CMS yang memiliki komunitas yang besar, sehingga mudah untuk mendapatkan bantuan, plugin terbaru, tema dan ekstensi lainnya.

Inspirasi Desain Web

Tidak ada aturan baku yang mewajibkan Anda untuk membuat desain tertentu. Semuanya bergantung kreatifitas masing-masing. Apalagi website sekarang sudah sangat banyak, dengan beragam desainnya masing-masing. Yang penting adalah unik. Itu saja.

Namun, belajar dari desain halaman web yang sudah terkenal juga baik. Untuk menambah gudang inspirasi. Lakukan riset kecil-kecilan terhadap apa yang membuat pengunjung nyaman berlama-lama dalam sebuah website, apakah karena warna, tipografi, layout, kualitas konten, dan lainnya.

Saya pribadi juga memiliki beberapa sumber inspirasi dan referensi sebelum membuat website. Namanya juga inspirasi, maka desainnya juga pasti tidak akan jauh dari sumber inspirasi tersebut.

Desain Halaman – Pastinya ada ribuan halaman web dengan desain menarik. Masing-masing memiliki karakternya, unik, elegan. Berikut ini beberapa yang paling sering saya gunakan:

  • Apple Store – Website Meublo terinspirasi dari desain halaman ecommerce milik Apple ini
  • Awwards – Website ini kerjaanya memberikan penghargaaan bagi desain web terbaik
  • The Best Designs – Gudangnya desain-desain terbaik
  • Creative Market – Marketplace untuk desain ikon, template, tema, logo, font dan masih banyak lagi

Tipografi – Pemilihan font yang baik juga adalah kunci menarik pengunjung. Hargailah teks, hargai pula pengunjung. Ada banyak font gratisan dan juga berbayar. Berikut ini beberapa sumber tipografi favorit saya:

  • Typekit – Ada banyak font berbayar menarik disini
  • Google Fonts – Sumber font yang paling banyak saya gunakan, termasuk font dari website ini
  • Fonts – Ini juga yang paling banyak direkomendasikan desainer web

Kesimpulan

Ikuti dan gabung di komunitas-komunitas web. Web akan terus berkembang, maka berkumpul dengan orang-orang dalam bidangnya akan membuat Anda up-to-date. Pelajari dan praktekkan apa yang sudah dibaca, ilmu tanpa praktek itu bohong besar. Pelajari pula tutorial-tutorial singkatnya melalui video di Youtube.

Follow siapa saja yang tweet tentang web desain di Twitter. Berlangganan sebanyak mungkin RSS feeds dari web yang membahas teknologi web. Download buku-buku praktis yang membahas web.

Terakhir, berikut ini adalah beberapa tools yang paling banyak digunakan oleh desainer web ketika bekerja:

  • FireFTP – Firefox Add-on untuk upload file ke server hosting. Gratis
  • FireBug – Firefox Add-on untuk memerika kode HTML dan CSS langsung di layar browser
  • Google Chrome Developer Tools – Untuk memerika kode HTML, CSS, mobile emulator di browser Chrome
  • Google Webmaster – Tools dari Google untuk memeriksa performansi website
  • Google Analytics – Mengetahui detil statistik pengunjung
  • Bing Webmaster – Tools dari Microsoft untuk memeriksa performansi website