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.

1. 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.

2. Table of Content
UI - UX
 Understanding Problem
 Brainstorming
 Design
 Prototyping
Programmer
 Implementation
 Testing
Optimization
 SEO
 Social Media
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

3. 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

4. 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.

5. 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:

6. 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:

8. Wireframe

10. 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

11. 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?