G.H.O.S.T Framework — Metode review design mandiri dan sederhana

“Kalo ngereview design, biasanya yang direview apa aja mas?” “Banyak, cuma biasanya ini”. And then G.H.O.S.T was born.

Akhir-akhir ini sering ngadain sesi design feedback di grup telegram komunitas dan antusiasnya makin menggila. Sekali buka sesi bisa 2–10 yang minta review, cuma karna cari bahan bahasannya susah dan waktu yang terbatas cuma bisa review 1 atau 2. Sorry ya guys.

Di kantor pun aku salah satu yang paling suka dengan design culture satu ini, Design Critique membuat kerjaan jadi terpapar oleh sudut pandang baru. Aku juga rajin eksperimen dengan format critique ku biar feedback yang aku kasih lebih terarah dan membantu yang dapet feedback.

Di satu momen ada yang nanya kalo aku lagi review design, biasanya apa aja yg ku review. Diem sejenak karna gak pernah mikirin ini sebelumnya. Biasanya ya cuma asal review sesuai intuisi dan pengalaman, tapi gak mungkinkan aku kasih jawaban gitu… gak memuaskan. Jawaban-jawaban diplomatis ala designer. “Secukupnya aja” “Menyesuaikan kebutuhan” “Tergantung….” tapi — aku gak mau gitu.

So aku luangin waktu buat merenungkan kebiasaan review ku. Dan ternyata ada polanya… it was G.H.O.S.T. Yes, hantu 😎

G — Goals

Saat pertama kali aku lihat sebuah design, ini yang pertama kali ku tanyakan

Apa tujuan dari design ini?

• Memberikan layanan film ke user
• Menawarkan berbagai macam produk kecantikan
• Atau sekedar meminta user untuk Login

Semua tujuan itu harus terlihat jelas dalam sekilas, jangan sampai design kita justru menipu user dan membuat salah sangka.

Example

Halaman utama Google yang jelas keliatan tanpa basa-basi kali dia ada sebuah mesin pencarian. Dan tujuan utama dari halaman ini adalah untuk membolehkan user googling.

Google’s Homepage

H — Hierarchy

Next, lebih ke arsitektur informasi tapi versi litenya.

Apakah semua informasi yang penting bagi user sudah mudah ditemukan?

Kalo ngomong soal IA (Information Architecture) ada tiga komponen utama di dalamnya Content, Context, User. More detail on seperated story. Tapi singkatnya disini…

• Apakah informasi yang user perlukan mudah ditemukan?
• Apakah aksi yang user perlu lakukan mudah diakses?
• Apakah informasi yang diberikan memicu user untuk melakukan aksi?

Hirarki disini berhubungan erat dengan positioning, size, dan color.

Example

Halaman utama Medium merupakan salah satu contoh terbaik untuk ini. Bisa dilihat bagaiaman mereka menggunakan ukuran header dibagi menjadi 2 bagian dengan ukuran berbeda dan variasi layout untuk daftar artikelnya membuat Medium menjadi sekedar portal artikel.

Mereka menggunakan gambar dan warna secukupnya hingga tidak mendistraksi kita dari konten utamanya — teks.

Medium’s Homepage

O— White-space

Hah!!! Kok bisa O jadi white-space. Kalo digambarnya aku nulisnya gak pake O tapi pake empty space that is why bisa jadi white-space. Yeah i know.. i know… sedikit maksa. BUT FOR THE SAKE OF CATCHY-NESS!!! Jadi mohon dimaklumi ya teman-teman ehehe.

Kalo ini simple sih, dan kalian pasti sudah umum dengan white-space. White-space jadi sangat penting di sebuah design, kalo design gak ada white-spacenya bakal jadi keliatan tidak professional.

Selain itu dengan memberikan jarak yang tepat kita bisa meningkatkan pengelompokan informasi biar lebih mudah dicerna.

Buat detailnya coba cek microblog ini deh.

Gestalt Priciples: Proximity by UXMISFIT

S — Simplicity

Ini kebiasaan design ku pas awal-awal nih, kalo ada bagian kosong… pasti nyoba diisi ornamen-ornamen dekorasi yang padahal tidak penting-penting amat atau malah bikin user terdistraksi.

Saat bikin komponen UI pun selalu bikin dari 0 dan bikin sendiri, ngehabisin banyak waktu yang padahal bisa tinggal copy aja dari existing library.

Tapi simple bukan berarti minimalis ya, simple itu mudah dipahami dan mudah dipelajari. Cuma ya biasanya sesuatu yang minimalis itu lebih mudah dipahami, tapi jangan terlalu minimalis juga wkwkwk.

Microblog by Michael Filipiuk

T — Typography

Typography adalah salah satu UI design basics yang paling penting menurutku. Selain dari ~95% screen nanti isinya bakal teks, typography juga ngebantu kita buat kasih kesan professional dan pengalaman baca yang nyaman dan gak jenuh dimata.

Beberapa dasar tipografi itu:

• Typescale
• Hierarchy
• Line-height
• Opacity
• Max-width
• etc

Aku udah sempet bikin guide lengkapnya nih. Typography Basics

Typography Basics

Penasaran gimana method ini kalo diterapin?

Kesimpulan

Mau pake framework mau gak pake, bebas. Yang penting adalah kita bisa lebih melestarikan budaya design critique ini terutama di komunitas desain Indonesia.

Gak cuma berani minta feedback, tapi juga berani ngasih feedback.