Proses dan hasil dalam pembuatan website

Proses dan hasil dalam pembuatan website yang dibahas dalam artike ini dari sisi UX dan desain UI sampai menjadi sebuah website. Dalam membuat sebuah website dibutuhkan proses. Proses adalah urutan pelaksanaan yang saling terkait yang bersama-sama mengubah sebuah tindakan menjadi hasil yang diinginkan. Dalam pembuatan website, proses menjadi landasan utama agar tercapainya hasil yang baik. 

Kami akan menjelaskan proses apa saja yang dapat dilakukan dalam membuat sebuah website mulai dari pemecahan masalah, pembuatan desain, melakukan penilaian, implementasi dan evaluasi. 

Table of Content

UI - UX

Programmer

Optimization

UI - UX

1. Understanding Problem

Why understand problem is important??

Dengan mengerti masalah yang dialami oleh user, kita jadi lebih memahami, memberi kita mekanisme untuk mengidentifikasi hal-hal tersebut, mencari tahu mengapa hal itu penting, dan menentukan tindakan untuk memperbaikinya.

Terapkan Style Guide

Style guide merupakan dokumen yang secara eksplisit mendefinisikan standar visual yang konsisten. Apakah Anda sedang membangun website baru untuk perusahaan yang belum pernah diketahui, atau Anda membuat ulang website yang sebelumnya telah dibuat, dengan fokus pada style guide dapat membawa kekompakan pada aset yang dirancang pada website itu, dan juga keunikan yang terkait dengan website tersebut.

User Research

Berfokus pada pemahaman perilaku, kebutuhan, dan motivasi pengguna melalui teknik observasi, analisis, dan metodologi lainnya untuk mengetahui siapa usernya, apa saja kebutuhan usernya, dan salah satu metode yang digunakan adalah interview. Apa yang menjadi masalahnya dan apa yang diharapkan dari produk ini bisa di interview sehingga mendapatkan hasil seperti apa yang ingin diselesaikan.

Setelah itu kita susun sebuah requirement apa saja yang akan kita buat dalam sebuah design dan klarifikasi requirement yang sudah dibuat ke client, apakah sudah cocok atau belum

User Persona

User Persona merupakan karakter fiksi yang dibuat untuk mewakili tipe pengguna yang mungkin menggunakan situs, merek, atau produk dengan cara yang serupa. Tujuanya adalah supaya kita bisa mengetahui siapa user nya, bisa berempati tentang masalahnya, dan mengetahui lebih baik apa masalah yang dialami oleh user

2. Brainstorming

Carilah sebuah inspirasi

Dengan mengerti masalah yang dialami oleh user, kita jadi lebih memahami, memberi kita mekanisme untuk mengidentifikasi hal-hal tersebut, mencari tahu mengapa hal itu penting, dan menentukan tindakan untuk memperbaikinya.

Pahami bagaimana kompetitor lain menyelesaikan masalah

Style guide merupakan dokumen yang secara eksplisit mendefinisikan standar visual yang konsisten. Apakah Anda sedang membangun website baru untuk perusahaan yang belum pernah diketahui, atau Anda membuat ulang website yang sebelumnya telah dibuat, dengan fokus pada style guide dapat membawa kekompakan pada aset yang dirancang pada website itu, dan juga keunikan yang terkait dengan website tersebut.

Selalu terapkan Style Guide

Berfokus pada pemahaman perilaku, kebutuhan, dan motivasi pengguna melalui teknik observasi, analisis, dan metodologi lainnya untuk mengetahui siapa usernya, apa saja kebutuhan usernya, dan salah satu metode yang digunakan adalah interview. Apa yang menjadi masalahnya dan apa yang diharapkan dari produk ini bisa di interview sehingga mendapatkan hasil seperti apa yang ingin diselesaikan.

Setelah itu kita susun sebuah requirement apa saja yang akan kita buat dalam sebuah design dan klarifikasi requirement yang sudah dibuat ke client, apakah sudah cocok atau belum

Melihat UI Trend saat ini

User Persona merupakan karakter fiksi yang dibuat untuk mewakili tipe pengguna yang mungkin menggunakan situs, merek, atau produk dengan cara yang serupa. Tujuanya adalah supaya kita bisa mengetahui siapa user nya, bisa berempati tentang masalahnya, dan mengetahui lebih baik apa masalah yang dialami oleh user

3. Design Information Architecture

Sitemap

Sitemap sebagai diagram yang menunjukkan struktur dari sebuah website atau aplikasi, untuk menentukan susunan informasi berdasarkan kelompok konten yang mirip dan juga bisa digunakan untuk menunjukkan user flow dari produk yang kita buat. Dari sitemap dapat dibuat sebagai patokan membuat wireframe dan menentukan scope seberapa besar website yang akan dibuat.

Fokuslah dalam menciptakan solusi yang ramah pengguna dan kemudahan berinteraksi di dalamnya. 

Contoh sitemap:

Wireframe dan Mockup

Wireframe merupakan sketsa sederhana yang berisi layout dan informasi yang akan kita tampilkan pada sebuah screen, untuk penataan konten dan layout dan sebagai kerangka untuk mockup nantinya. Ini adalah tahapan ke-2 dari pembuatan sitemap, setelah kita mengetahui struktur website nya, barulah kita membuat sketsa sederhana ini.

Mockup adalah tampilan wireframe yang sudah diberi warna dan konten sebenarnya, untuk bisa melihat hasil jadi dari website yang akan kita buat.

Contoh Wireframe dan Mockup:

User flow

User Flow merupakan urutan yang dilakukan oleh user untuk menyelesaikan sebuah task

4. Prototype

Prototype digunakan untuk men-testing konsep atau ide dari produk yang sudah dibuat mockup nya. Prototype website bisa berbentuk sketsa kertas hingga prototype bentuk HTML yang dapat di klik layaknya website sungguhan.

Programmer

5. Implementation

Pelaksanaan untuk memulai mengimplementasikan dari tahap pembuatan desain yang akan dilakukan oleh tim pengembang untuk membuat fungsionalitas back end terlebih dahulu dan menghubungkannya dengan desain user interface ketika mereka menerapkannya.  Dalam proses implementasi oleh programmer sebaiknya tim desain juga terlibat dalam langkah ini untuk membantu tahap pengembangan saat menerapkan jika ada kemungkinan untuk meningkatkan kebutuhan perubahan-perubahan kecil yang ada di dalam desain tersebut.

6. Testing

Disini kita tes Apakah produk yang sudah jadi itu bisa digunakan atau tidak dan ada beberapa hal yang menjadi inti dari testing ini :

1. Apakah produknya bisa digunakan, Produk yang baik adalah produk yang dapat digunakan dengan semestinya dan fungsi yang berjalan dengan sempurna 

2. Apakah produknya mudah digunakan,  dalam artian dapat dipahami oleh  user manapun dalam mengakses produk yang kita buat

3. Apakah produk ini bisa menyelesaikan masalah dari user,  karena dalam produk yang dibuat awalnya adalah ah masalah Ketika masalah tersebut menjadi sebuah solusi maka seharusnya solusi itu  dapat menyelesaikan masalah

4. Apakah produk ini bisa membuat user tertarik untuk menggunakannya lagi, sebuah produk yang berkembang pastinya akan membuat banyak user tertarik menggunakannya lagi sehingga produk tersebut semakin banyak dikunjungi dan semakin laku. 

Baca Juga : Mengapa harus menggunakan WordPress?