9 Tahap Utama Dalam Mendesain Website

9 Tahap Utama Dalam Mendesain Website

Semakin berkembangnya teknologi website beberapa tahun ini memberi andil besar untuk perubahan pola kerja kepada para pelaku teknologi website itu sendiri. Website dituntut harus…

Semakin berkembangnya teknologi website beberapa tahun ini memberi andil besar untuk perubahan pola kerja kepada para pelaku teknologi website itu sendiri. Website dituntut harus bisa berjalan dengan performa cepat, fungsional dan tampilan antarmuka (interface) yang bagus. Dulu seorang web designer atau webmaster yang mengerjakan sebuah proyek website mulai dari desain hingga ke proses coding. Kini dalam pengerjaan sebuah website, idealnya ada tiga orang yang berperan, yaitu : website designer, front-end developer (biasanya disebut slicer atau css ninja) dan back-end developer.

Seorang website designer berperan penting dalam mendesain tampilan antarmuka yang bagus, menarik dan fungsional dalam sebuah website. Dalam mendesain tampilan antar-muka sebuah website tentu sangatlah berbeda dengan desain cetak. Ada beberapa aturan dasar yang harus dipahami oleh seorang website designer, mulai dari resolusi, ukuran lebar konten, skema warna dan sistem grid. Berikut akan dijabarkan satu-persatu secara runut. Baiklah mari kita bahas! :)

1. Tujuan dan Goal

Sebelum memulai mendesain sebuah website, hal pertama yang harus diperhatikan adalah tujuan dan goal dari website tersebut. Apakah itu untuk portofolio, untuk sebuah profil perusahaan atau untuk berjualan (e-commerce). Ambil saja contoh website untuk profil perusahaan. Goal yang ingin diraih apa? Apakah hanya sebagai sebuah eksistensi perusahaan saja, sebagai alat branding perusahaan , atau untuk menggaet lebih banyak klien?

Setelah tujuan dan goal ditentukan, kita akan dengan mudah menemukan konsep dan gaya desain yang sesuai untuk website tersebut. Menentukan prioritas isi konten utama, konten pendukung, widget, dan lain-lain untuk halaman utama (homepage) website akan jadi lebih cepat. Ingat! Tetap fokus pada tujuan dan goal utama, jangan terlalu berlebihan dalam hal yang bersifat dekoratif.

 2. Rancangan Sitemap

Setelah tujuan dan goal ditentukan, tahap selanjutnya adalah menyusun rancangan sitemap. Sitemap sangat penting dan menjadi unsur yang paling vital di dalam sebuah website karena menjadi kerangka utama hubungan antara satu halaman dengan halaman lainnya di sebuah website.

Di dalam sitemap tentukan navigasi utama, alur proses halaman, dan link interaksi ke berbagai halaman lainnya. Dengan disusun secara teliti dan rapi, kita dapat menentukan halaman mana yang tidak dibutuhkan, konten mana yang harus tampil pada halaman utama (homepage), alur organisasi halaman seperti apa yang digunakan, dan widget serta konten pendukung mana yang dipilih.

3. Referensi Website

Referensi dari berbagai website sejenis dibutuhkan untuk memberi masukan ide-ide baru, sebagai bahan perbandingan dan juga mempelajari pengalaman-pengalaman pengguna (user experience/UX)-nya. Di artikel berikut ini bisa ditemukan beberapa referensi yang sangat berguna untuk proses mendesain website.

4. Sketsa / Wireframe 

Proses sketsa atau wireframe (istilah di dalam desain website) berguna sekali sebagai acuan dasar sebuah desain website. Dengan wireframe membantu kita supaya tidak kebingungan dalam proses desain di Photoshop.

Wireframe juga digunakan untuk presentasi ke klien dan menghemat waktu revisi dibanding harus merevisi setelah mock-up desain website selesai. Artikel berikut ini memberikan informasi tools yang berguna untuk membuat wireframe agar terlihat lebih profesional dari pada sekedar sketsa biasa di atas kertas.

5. Skema Warna

Tahap berikut adalah pemilihan skema warna. Setelah mengetahui tujuan dan goal serta menentukan ide dan gaya desain yang cocok untuk sebuah website, pemilihan warna yang sesuai dengan hal tersebut menjadi penting. Dengan pemilihan warna yang tepat dapat mendukung dan memberi kesan yang kuat untuk gaya desain yang kita pakai, misalnya : warna biru cocok untuk desain website yang bergaya korporat dan umum, warna coklat untuk gaya desain klasik dan eksklusif. Ingat! Untuk desain website mode warna yang digunakan adalah RGB karena outputnya dalam screen monitor. Dengan menentukan skema warna terlebih dahulu, proses desain website menjadi lebih efisien. Dengan tidak membuang-buang waktu mengutak-atik color gradient dan panel swatches di Photoshop. Temukan beberapa tools yang berguna untuk pemilihan skema warna website disini.

 6. Lebar Konten Area

Mulai banyaknya website yang meninggalkan standar ukuran lebar 960 pixel (untuk screen monitor ukuran yang digunakan 1024 x 768 pixel) dan kini menggunakan lebar 1140 pixel hingga 1200 pixel. Dengan pertimbangan makin banyak orang yang sudah memakai monitor screen lebih besar dan perkembangan responsive website (teknologi website yang bisa tampil bagus dan menyesuaikan di berbagai ukuran screen gadget).

Menentukan ukuran lebar area website di awal tentu menjadi hal yang penting. Dengan menggunakan ukuran lebar area 1140 pixel ke atas dapat memberi nilai tambah untuk sebuah website yang kompleks. Ada ruang lebih untuk menambah konten-konten, panel notifikasi maupun widget.

 7. Sistem Grid

Grid bukanlah menjadi pembatas kreativitas didalam mendesain website. Tetapi dengan grid membuat kita semakin terpacu untuk membuat desain yang bagus dan kreatif di dalam ruang lingkup grid itu sendiri. Selain itu sistem grid juga membantu konsistensi layout setiap halaman di dalam sebuah website. Untuk sistem grid 960 pixel saya biasa menggunakan 960 grid system dan untuk sistem grid 1140 pixel bisa menggunakan Columnal atau Bootstrap. Catatan! Ada berbagai macam jumlah kolom dalam grid, mulai dari 12, 16 sampai 24 kolom. Semua harus menggunakan resolusi file 72 dpi (pada Photoshop).

 8. Manajemen Folder dan Layer

Manajemen folder dan layer membantu proses mendesain di Photoshop agar lebih rapi dan terorganisir. Memberi nama setiap folder dan layer membantu untuk mempermudah editing maupun slicing di setiap bagian website. Buatlah nama folder untuk setiap bagian website, misalnya : Header (untuk bagian atas meliputi logo, link, ikon-ikon, dan lain-lain), Navigation Bar (untuk navigasi utama), Main Content, Widget, Footer, dan lain-lain. Berilah nama dan masukkan seluruh layer yang termasuk di dalam setiap bagian website, misalnya : “Home button” masukkan ke folder Navigation Bar, “Main image” masukkan ke folder Main Content, dan lain sebagainya.

Untuk lebih detail bagaimana beretika dalam Photoshop bisa dilihat disini. Ingat! Karena dalam proses pengerjaan sebuah website ada seorang front-end developer yang akan menterjemahkan desain website Anda dari Photoshop ke html dan css. Dengan pemberian nama dan pengorganisasian layer yang tertata rapi tentunya akan sangat membantu kerja seorang front-end developer.

9. Manajemen File Aset

Beruntunglah bila anda punya rekan tim seorang front-end developer yang cukup mahir mengoperasikan Photoshop dan bisa memotong setiap bagian-bagian desain website menjadi gambar-gambar terpisah yang disebut file aset. Beban kerja anda sebagai seorang desainer website bisa menjadi ringan. Tetapi alangkah baiknya jika anda juga bisa menyediakan setiap file aset dalam sebuah desain website dan mengumpulkannya ke dalam folderAsset Files”. Selain memastikan setiap file aset dipotong sempurna ini juga akan menjadi nilai tambah anda sebagai seorang website designer.

Kesimpulan

Dari 9 tahap  diatas akan membantu anda terbiasa untuk bekerja secara teliti dan rapi. Ketelitian hingga satu pixel wajib dimiliki setiap website designer dan “Perfect pixels” menjadi semboyannya. Bagaimana? berminat menjadi seorang website designer? atau ada tahapan yang kurang? silahkan digenapkan menjadi 10 tahap atau lebih, mari berdiskusi :)

Referensi : http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/

Tag: , , , , , ,

9 Comments

Leave Comment
  1. Roni says:

    Wow, mantep banget kaka :) jadi semangat mau nyoba2 desain website

  2. banyaknama says:

    langsung ke tutorialnya ada gan? langkah pertama apa? trus langkah kedua apa? trims :)

  3. Bos,,ane mau nanya dong klo bikin User Interface gimana yak?

  4. gilbert says:

    Thanks Mas Bero…… Nice Info….

  5. Climutu says:

    Another useful post by agan @treecore.
    Kapan2 bikin tutorial membuat startup dong gan :)

  6. Taufik Hidayat says:

    Gan kalo desain di corel bagaimana?
    Apa ada kelemahan..

Write Comment

Your email will not be published. The marked label is required.