PEDOMAN PEMBUATAN BLUEPRINT

WEBSITE

Pengenalan UI dan UX
User Experience (UX) merupakan proses mendesain suatu produk melalui pendekatan
pengguna. Dengan pendekatan ini, Anda jadi bisa menciptakan produk yang sesuai dengan
kebutuhan dan keinginan pengguna.
Produk dengan desain UX yang baik akan menciptakan pengalaman yang menyenangkan bagi
pengguna saat menggunakan produk Anda. Pengguna jadi mudah dan nyaman saat menggunakan
produk.
Adapun, komponen UX ini meliputi bagaimana fitur-fitur yang disediakan pada produk, struktur
desain, navigasi penggunaan produk, aspek visual design, dan seluruh aspek interaksi dengan
pengguna. UX juga meliputi bagaimana Anda menentukan branding, konten, dan copywriting yang
sesuai dengan target pengguna Anda.

User Interface (UI)

Seperti yang disebutkan sebelumnya, UI adalah bagian dari UX yang berupa tampilan visual
design sebuah sistem. Tampilan tersebut memungkinkan pengguna terhubung dan berinteraksi
dengan suatu produk. Selain berfungsi sebagai penghubung, UI juga berfungsi untuk
memperindah tampilan sehingga dapat meningkatkan kepuasan pengguna. Namun, tak hanya
harus indah, UI juga harus mudah digunakan.
Beberapa komponen UI diantaranya adalah komponen tombol, ikon tipografi, tema, layout,
animasi yang tampil pada produk, dan visual interaktif lainnya. Semua komponen UI tersebut
didesain dengan berfokus pada keindahan dan kemudahan pengguna. Jadi, pengguna dapat
menikmati produk Anda.

1
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

Perbedaan User Interface (UI) dan User Experience

(UX)

User Interface (UI) User Experience (UX)

Tujuan Membuat tampilan produk lebih Memberikan kenyamanan saat

menarik memakai produk

Fokus Berfokus pada tampilan yang Berfokus pada kenyamanan pengguna

bagus

Elemen Animasi, typography, warna, Usability, navigasi, struktur desain,

video, buttons, dll fitur-fitur, interaction design, dll

Based on Desain berdasarkan riset desain Desain berdasarkan riset pengguna

dan konsep produk

Tools Spesifikasi utama desain grafis, Spesifikasi utama prototyping seperti

seperti Flinto, Principle, Frames Sketch, InVision, Figma, Adobe XD,
X, Adobe illustrator Axure

2
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

User Interface (UI) User Experience (UX)

Pre-building Berupa mockup Berupa wireframe dan prototype

Skill yang Desain grafis, creative thinking, Riset, critical thinking, creative
dibutuhkan convergent thinking, desain thinking, analysis, problem
branding. solving, wireframing.

WORKFLOW DESAIN UX
☐ 1. Define the customer “problem” and how your business can provide a solution in a
unique way.
☐ 2. Determine viability: Is there a market for your service?
☐ 3. Identify businesses that are having success today.
☐ 4. Will your business be relevant as time passes? How will you adapt?
☐ 5. Define your market:
☐ a. Who is your ideal customer?
☐ b. What’s your market size?
☐ c. How easy is it to acquire the customer?
☐ 6. Validate your idea by talking to potential customers about it.

PEMBUATAN SITE MAP

3
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

WORKFLOW DESAIN UX
1. MEMBUAT WIREFRAME

Wireframe adalah kerangka dasar dari halaman website. Di dalam wireframe

terdapat berbagai komponen seperti banner, header, content, footer, link, form,
dan lain-lain. Proses pembuatan wireframe website disebut wireframing di mana
semua komponen di atas sesuai dengan tata letak yang diinginkan. Wireframing
biasanya dilakukan oleh UI Designer. Dialah orang yang bertanggung jawab
membuat website menarik.

Wireframe dari sebuah website bisa berbeda satu sama lain, tergantung jenis website
serta kebutuhan pengguna. Wireframe di atas cocok untuk website company profile. Jika
ingin membuat wireframe website toko online, tentu perlu lebih fokus ke bagian daftar
produk.

KOMPONEN WIREFRAME WEBSITE

Inilah beberapa komponen yang diperlukan dalam membuat sebuah wireframe website:

4
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

1. Layout Utama
Komponen utama wireframe adalah layout utama. Komponen ini biasanya berupa kotak-
kotak yang telah diatur sesuai dengan tata letak halaman website. Dalam komponen ini,
terdapat beberapa bagian, seperti header, menu navigasi, body, hingga letak
sidebar. Sebelumnya buatlah terlebih dahulu Site map dari website yang akan di buat
seperti berikut:

2. Komponen Interface
Komponen interface adalah komponen yang terkait dengan media interaksi antara
tampilan website dengan pengunjung. Komponen ini digunakan sebagai penunjang
informasi pada pengunjung yang biasanya berupa button, link, judul, font size, logo, dan
lain-lain.

5
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

3. Komponen Navigasi
Salah satu komponen dalam wireframe website adalah navigasi. Komponen ini berguna
untuk mengarahkan pengunjung menjelajahi website Anda dengan mudah. Desain yang
digunakan bisa berupa menu, tanda panah, atau ikon lain sesuai keinginan.

6
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

4. Komponen Informasi
Sesuai namanya, komponen informasi merupakan konten utama yang ingin disampaikan
pada audiens. Contohnya, input, thumbnail, link, paragraf, dan lain-lain. Oleh karena itu,
penting untuk menempatkan komponen ini di bagian yang paling mudah dilihat
pengunjung.

7
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

5 Komponen Tambahan
Komponen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan
website. Sebagai contoh jika merancang website untuk toko online. Komponen tambahan
yang bisa Anda gunakan seperti, fitur cek resi, form konfirmasi pemesanan, hingga
layanan chat dengan pembeli secara langsung. Dengan kondisi tersebut, resiko untuk

8
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

melakukan perbaikan setelah website jadi lebih kecil. Sebab, setiap tahapan dikerjakan
dengan konsep yang jelas.

6. Design Usability Test

9
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

FINAL PROJECT
1. Isi Project Planner berikut :

2. Jawablah pertanyaan berkut berdasarkan hasil project yang telah kalian kerjakan

10
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

3. Buatlah Workflow UI website kalian yang berisikan

• Sitemap
• Wireframe (lengkap dengan komponennya)

11
PEDOMAN PEMBUATAN BLUEPRINT
WEBSITE

4. Membuat rekaman video hasil testing website berdurasi maksimal 3 menit

12