SECTION 04 MENDESAIN SITUS WEB

Desain web itu rumit. Kita harus mempertimbangkan banyak hal saat merancang sebuah situs web, dari tampilan visual (bagaimana tampilan situs web) ke desain fungsional (bagaimana situs web bekerja).

Saat ini, website sudah makin menjadi kompleks. Sama seperti fashion, desain website pun selalu berubah-ubah mengikuti tren. Di tahun 2018 ini saja, sudah ada prediksi tren-tren website designapa saja yang akan banyak Anda lihat di berbagai website.

Tentu saja dengan semakin kompleks desain web di jaman sekarang, semakin sulit juga bagi Anda para web developer untuk membangun sebuah website dari nol. Ide-ide klien sendiri pun sudah semakin rumit dan bermacam-macam. Maka dari itu, Anda memerlukan cara perencanaan dan langkah-langkah kerja yang bisa membantu Anda untuk mengerjakan proyek desain web dengan lebih efisien.

8 Langkah Web Desain yang Efisien

Seperti yang sudah disebutkan sebelumnya, salah satu faktor paling penting di industri desain saat ini adalah mengatur workflow atau alur kerja agar Anda bisa bekerja dengan efisien. Untuk dapat melakukan pekerjaan yang efisien, Anda tentunya memerlukan waktu untuk menyusun pekerjaan Anda. Dengan membagi-bagi pekerjaan dalam beberapa tahapan, Anda tetunya bisa menjadi lebih produktif dalam pengerjaan dan penyelesaiannya.

Setiap orang dan desainer memang memiliki proses desain yang mereka rasa paling enak dan paling produktif. Di artikel kali ini, kami akan membahas workflow atau alur kerja desain yang efisien untuk membantu Anda para designer. Apalagi bagi kalian yang men-desain dan mengembangkan website. Ada lima langkah yang akan dibahas di artikel ini yaitu, mendengarkan kebutuhan client, melakukan riset, mengumpulkan ide, dan sketch desain website, buat wireframe dan style tiles, kemudian buat prototype desain web sebelum Anda membangun dan mengembangkan website itu sendiri. Kelima langkah ini diharapkan dapat membantu Anda untuk mendesain dan mengembangkan sebuah website dengan sukses dan efisien.

Kebutuhan client

Desainer web sering berpikir tentang proses desain web dengan fokus pada hal-hal teknis seperti wireframes, kode, dan manajemen konten. Namun desain yang hebat bukan saja tentang cara Anda mengintegrasikan tombol media sosial atau bahkan visual yang menarik. Desain hebat sebenarnya adalah membuat situs web yang sesuai dengan strategi menyeluruh.

Oleh karena itu, penting sekali bagi Anda untuk mengetahui tujuan dari website ini. Apa yang sebenarnya klien inginkan dari website ini? Sebelum memulai perencanaan desain Anda, Anda harus mengumpulkan informasi sebanyak-banyaknya dari klien Anda. Semakin Anda tahu banyak, semakin cepat Anda bisa mengerjakan desain web-nya.

Dengarkan ide mereka

Biasanya klien tidak akan langsung memberi tahu Anda apa yang mereka inginkan, Anda biasanya harus menanyakannya kepada mereka. Mereka ingin Anda bisa memvisualisasikan apa yang mereka inginkan dari brief yang sudah mereka berikan. Ada juga klien yang kesulitan untuk menyampaikan dan mengkomunikasikan yang mereka mau. Oleh karena itu, penting bagi Anda untuk menanyakan klien pertanyaan-pertanyaan mengenai bisnis mereka. Anda harus memastikan mood seperti apa yang mereka inginkan, apa yang mereka suka, dan tidak suka.

Kuesioner Klien

Salah satu cara yang bisa Anda lakukan adalah meminta klien Anda untuk mengisi sebuah kuesioner tentang desain website yang mereka inginkan. Anda bisa memulai dengan menuliskan pertanyaan penting apa saja yang bisa membantu Anda untuk memulai sebuah proyek. Misalnya, apa tujuan dari website ini? Siapa target audiencenya? Siapa saja competitor klien Anda? Apa yang klien Anda harap pengunjung website lakukan saat berada di website mereka?

Pastikan Anda mengirimkan kuis ini sebelum Anda mulai membuat proposal. Jika Anda ingin melihat contoh, Anda bisa melihat form kuesioner desain ini.

Agar lebih mudah, Anda juga bisa membuat kuesioner ini menggunakan Google Docs sehingga bisa diakses dimana saja dengan mudah oleh Anda maupun klien Anda.

Setelah klien Anda mengisi kuis ini, Anda bisa mengirimkan proposal dan membahas budget, project scope, timeline, dan kepemilikian. Setelah proposal disetujui, Anda sudah bisa mulai mengerjakan proyek tersebut.

Riset, Ide, dan Sketch

Bagian ini adalah salah satu bagian tersulit dalam suatu proyek. Ada banyak desainer di luar sana yang langsung menggunakan Photoshop atau Illustrator dan memulai proses desain. Padahal, ada baiknya Anda menggambarkan dulu desain web seperti apa yang Anda ingin buat di atas kertas.

Mulai Sketching

Menulis – atau mungkin dalam kasus ini menggambar – ide Anda di sebuah kertas adalah cara yang efisien dalam proses brainstorming. Ambil waktu yang Anda butuhkan untuk berpikir dan mulai sketching ide apapun yang muncul di kepala Anda. Anda juga tidak perlu langsung menggambar layout desain web dengan detail. Anda bisa membuat bentuk-bentuk seperti lingkaran dan kotak. Nantinya, ide-ide Anda bisa saja mulai bermunculan dengan natural. Jangan lupa untuk menuliskan atau menggambar ide apapun yang muncul di kepala Anda di mana saja.

Kompilasikan inspirasi Anda

Inspirasi juga penting dan bisa sangat membantu dalam proses desain web. Anda bisa memulai dengan menyiapkan sebuah folder bookmark di browser Anda. Mulai research dan kemudian simpan berbagai halaman web yang Anda kira relevan. Jangan sampai Anda menjiplak elemen atau ide dari website ini karena itu akan dianggap sebagai plagiasi. Cari website yang memiliki desain paling menarik dan cocok dengan kebutuhan klien Anda. Kemudian tulis apa yang Anda suka dan tidak suka dari desain web tersebut, baik layout, warna, bentuk, animasi, dan sebagainya. Dengan begini, Anda bisa mendapatkan inspirasi bentuk layout dan tampilan untuk website klien Anda.

Kenali competitor bisnis klien Anda

Ada baiknya Anda juga melihat desain website competitor bisnis klien Anda. Anda bisa mempelajari desain web dari competitor local maupun international dan pelajari isi-isinya. Elemen apa saja yang mereka semua miliki? Ini tentunya hal-hal yang harus Anda masukkan ke website Anda. Apa yang Anda rasa harusnya mereka miliki tetapi tidak ada? Ini adalah hal-hal yang bisa Anda masukkan ke website klien Anda. Selain itu, Anda juga bisa membaca artikel kami tentang 10 elemen penting desain website.

Wireframe

Wireframe adalah blueprint website Anda. Ini adalah hal yang membantu memberikan website Anda struktur visual. Beberapa desainer memiliki kecenderungan untuk memasukkan elemen desain ke wireframe. Ini sebaiknya tidak dilakukan karena wireframe sebenarnya dimaksudkan untuk memberi tahu Anda dimana elemen diletakkan, bukan bagaiman desain website ini akan kelihatan nantinya. Wireframe juga sebaiknya ada di mode grayscale agar Anda focus 100 persen ke layout desain web tersebut.

Untuk memulai, Anda memang membutuhkan pen dan kertas. Tulis dulu semua elemen yang akan Anda masukkan ke halaman web. Setelah itu susun mereka di halaman webnya. Anda bisa melakukan penyusunan ini dengan menggambar di kertas atau menggunakan tools wireframe seperti Proto.io, wireframe.cc, dan bahkan Photoshop.

Di bawah ini adalah salah satu contoh wireframe yang lengkap :

Untuk melihat proyek lengkapnya, Anda bisa mengunjungi halaman Behance ini.

Wireframe sendiri harus memiliki hal-hal di bawah ini:

Letak Elemen

Anda tentunya tidak bisa memulai website Anda tanpa tahu dimana Anda ingin meletakkan berbagai eleman yang sudah Anda rencanakan. Oleh karena itu, Anda harus tahu dimana Anda ingin meletakkan berbagai elemen.

Hirarki Informasi

Sitemap yang memiliki banyak link bisa jadi membingunkan untuk seorang klien dan bahkan untuk desainer. Dengan meletakkan sitemap, Anda akan dapat melihat bagaimana halaman-halaman itu terlihat di website Anda. Dengan begini, Anda bisa melakukan penyesuaian sebelum Anda sudah bergerak terlalu jauh ke depan.

Interaktif

Ketika Anda membuat sebuah wireframe, Anda juga harus bertanya: bagaimana elemen ini akan berinteraksi satu sama lain? Apakah pengunjung website akan mau menghabiskan waktu lebih banyak di website Anda? Apakah pengunjung website dapat dengan mudah menavigasi websitenya? Di sinilah user experience akan sangat berperan.

Perencanaan Konten

Setelah kerangka situs web Anda tersedia, Anda dapat mulai dengan aspek yang paling penting dari situs yaitu konten tertulis.

Konten sendiri memiliki dua tujuan penting:

Mendorong keterlibatan dan tindakan

Pertama, konten melibatkan pembaca dan mendorong mereka untuk mengambil tindakan yang diperlukan untuk memenuhi tujuan sebuah situs. Ini dipengaruhi oleh konten itu sendiri (tulisan), dan bagaimana materi itu disajikan (tipografi dan elemen struktural).

Konten yang singkat, tajam, dan menarik menarik perhatian mereka dan membuat mereka mengklik ke halaman lain. Bahkan jika halaman Anda membutuhkan banyak konten, Anda perlu dengan benar “memotong” konten tersebut dengan memecahnya menjadi paragraf pendek yang dilengkapi dengan visual. Dengan begitu artikel Anda dapat tetap terasa ringan dan menarik.

Search Engine Optimisation

Konten juga meningkatkan keterlihatan situs untuk mesin telusur. Praktik pembuatan dan peningkatan konten agar mendapat peringkat yang baik dalam pencarian dikenal sebagai search engine optimization, atau SEO.

Mendapatkan kata kunci dan frasa kunci Anda sangat penting untuk kesuksesan situs web manapun. Salah satu tools yang dapat Anda gunakan adalah Google Keyword Planner. Alat ini menunjukkan volume pencarian untuk kata kunci dan frasa target potensial, sehingga Anda dapat mengasah apa yang sebenarnya manusia cari di web. Karena mesin pencari menjadi semakin canggih, konten Anda juga harus bisa mengikuti kecanggihan mesin pencari. Google Trends juga berguna untuk mengidentifikasi istilah yang benar-benar digunakan ketika mereka mencari. Untuk tahu lebih banyak tentang kedua tools Google ini, Anda bisa membaca Panduan Google Keyword Planner dan Google Trends kami.

Proses desain pun juga harus focus pada perancangan situs web seputar SEO. Kata kunci yang Anda ingin peringkat perlu ditempatkan di tag judul – semakin dekat ke awal, semakin baik. Kata kunci juga harus muncul di tag H1, meta description, dan konten isi.

Konten yang ditulis dengan baik, informatif, dan kaya kata kunci lebih mudah diambil oleh mesin telusur, yang semuanya membantu membuat situs lebih mudah ditemukan.

Biasanya, klien Anda akan menghasilkan sebagian besar konten, tetapi penting bagi Anda untuk memberi mereka panduan tentang kata kunci dan frasa apa yang harus mereka sertakan dalam teks.

Untuk tahu lebih banyak tentang kinerja halaman pada mesin pencari, Anda bisa membaca artikel kami tentang Search Engine Optimisation atau SEO.

Style Tiles

Style tiles atau yang lebih dikenal dengan nama style guides atau panduan style adalah kumpulan desain untuk visual branding sebuah web yang biasa berisi font, warna, dan element interface yang akan membantu menyampaikan identitas website ini kepada pengunjung website. Style tiles juga biasa sesuai dengan diskusi client. Elemennya biasa terdiri dari logo, typography, warna, dan voice brand itu sendiri. Berikut ini adalah contoh Style Tiles.

Kenapa Anda harus menggunakan style tiles?

Visualisasi Konsep

Membuat sebuah style tiles akan membantu menerjemahkan mood, feeling, dan nada website yang akan Anda buat. Ini juga akan mempermudah Anda untuk melihat apakah website ini sudah sesuai dengan permintaan klien Anda. Selain itu, ini juga akan membantu Anda melihat dengan lebih jelas bagaimana sebaiknya Anda menggunakan elemen desain agar klien bisa mengerti desain Anda.

Menjaga konsistensi

Style tiles dapat membantu Anda menjaga konsistensi dalam tampilan website Anda. Misalnya dengan warna, Anda tahu colour scheme apa yang ingin Anda gunakan agar website Anda memiliki warna yang senada dan cocok. Dengan begini, Anda bisa bekerja dengan lebih mudah dan konsisten.

Efisiensi waktu

Mendesain style tiles akan memudahkan Anda untuk menunjukkan kulit dari desain website tersebut. Dengan begitu, jika klien merasa ada yang kurang atau ingin melakukan perubahan, Anda tidak perlu mengulang proses desain website-nya. Anda tinggal mengupdate style tiles Anda dan kemudian menunjukkannya lagi kepada klien.

Prototype

Membangun sebuah website sebenarnya hampir sama seperti membangun rumah; wireframe berperan seperti floor plan dan interior desainnya berupa style tiles. Setelah Anda  membuat wireframe dan style tiles, Anda hanya tinggal menggabungkan keduanya. Dengan menggabungkan keduanya, Anda akan melihat tampilan website Anda.

Prototyping adalah proses dimana Anda membangun model website Anda sebelum Anda membangun websitenya. Beberapa desainer suka mendesain prototype desain website mereka dengan Photoshop. Jika Anda tidak terlalu suka Photoshop, Anda juga bisa menggunakan framework web seperti inVision dan UXpin.

Prototype sendiri terdiri dari tiga langkah, yaitu:

Prototype

Mengimplementasikan style tiles ke layout sambil mengadaptasi tampilan dan fungsionaitas  dengan user experience. Ini dilakukan untuk memastikan bahwa desain web Anda tetap terlihat menarik tetapi mudah dinavigasi dan digunakan.

Test

Step ini adalah langkah yang sangat penting. Di langkah ini, Anda akan mengevaluasi apakah website Anda sesuai dengan kebutuhan dan ekspetasi klien. Anda bahkan bisa membagikan prototype dengan pengguna Anda untuk mengetes interaktifitas dan user experiencenya.

Fine Tune

Di langkah ini, Anda bisa melakukan perubahan dan peningkatan kinerja website tersebut. Proses ini mungkin membutuhkan waktu lebih lama, semuanya tergantung dengan berapa kali Anda bertemu dengan client untuk mem-finalkan permintaan desainnya.

Testing Website

Setelah visual dan konten situs siap, website Anda siap untuk diuji.

Uji secara menyeluruh setiap halaman untuk memastikan semua tautan berfungsi dan situs web dimuat dengan benar di semua perangkat dan browser. Kesalahan mungkin disebabkan oleh kesalahan pengkodean yang kecil, dan meskipun seringkali sulit untuk menemukan dan memperbaikinya, lebih baik lakukan sekarang daripada menyajikan situs yang rusak kepada publik.

Jangan lupa juga untuk memeriksa halaman meta judul dan deskripsi. Bahkan urutan kata-kata dalam judul meta dapat mempengaruhi kinerja halaman pada mesin pencari.

Launch website Anda

Jika semua sudah siap, sekarang saatnya untuk bagian favorit semua orang dari proses desain web: Ketika semuanya telah benar-benar diuji, dan Anda senang dengan tampilan websitenya, Anda tinggal meluncurkan website Anda.

Jangan berharap ini akan langsung berjalan dengan sempurna. Mungkin masih ada beberapa elemen yang perlu diperbaiki. Desain web adalah proses yang berkelanjutan dan  membutuhkan management yang konstan.

Desain web – dan benar-benar, desain secara umum – adalah tentang menemukan keseimbangan yang tepat antara bentuk dan fungsi. Anda perlu menggunakan font, warna, dan motif desain yang tepat. Tetapi cara orang bernavigasi dan mengalami situs Anda sama pentingnya.

Perancang yang terampil harus berpengalaman dalam konsep ini dan mampu membuat situs yang berjalan di antara bentrokan yang rumit antara keduanya.

Hal penting yang perlu diingat tentang tahap peluncuran bukan berarti Anda sudah selesai dengan projek ini. Proyek desain web sendiri bisa dibilang tidak pernah selesai. Setelah situs dirilis, Anda dapat terus menjalankan pengujian pengguna pada konten dan fitur baru, memantau analisis, dan memperbaiki pesan branding Anda.

Simpulan

Di artikel ini, kami telah membahas proses desain website yang efisien. Dengan mengikuti alur kerja ini, Anda diharapkan dapat merencanakan project desain web Anda di depan, mencegah berbagai hal yang dapat menghalangi alur kerja Anda, dan yang terpenting mengerjakan proyek dengan lebih efisien. Langkah selanjutnya adalah bagian pengembangan. Jika Anda memiliki keterampilan untuk mengembangkan situs web Anda maka prosesnya harus Anda ketahui. Jika tidak, maka Anda memerlukan seorang pengembang web atau web developer untuk mengaplikasikan web desain Anda ke website klien Anda. Semoga artikel ini membantu!