Learn About UI Design & Convert It To HTML!"

Kali ini saya akan berbagi materi mengenai "Learn About UI Design & Convert It To HTML!" dengan pemateri yaitu Muhibbudin Suretno sebagai Senior Frontend Developer di ORORI.com

Apa itu UI Design? (dikutip dari Wikipedia) Desain Antarmuka Pengguna (bahasa inggris: User Interface Design) atau rekayasa antarmuka pengguna adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna (bahasa inggris: User Experience) dan interaksi.

Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna atau apa yang sering disebut dengan user-centered design.

Dari pengertian diatas saat ini saya akan menjelaskan beberapa langkah yang biasa saya gunakan dalam merancang sebuah tampilan (kita sebut mockup) aplikasi web atau mobile apps sesuai dengan tujuan yang telah disebutkan diatas. Beberapa langkah tersebut diantaranya:

1.      Mencari suatu masalah atau sesuatu yang dapat dijadikan tema / konsep aplikasi (ideation)

2.  Mengenali lebih jauh tentang masalah tersebut _(seperti target pengguna & masalah yang dimilikinya)

3.      Menuangkan data yang sudah kita miliki kedalam sketsa

4.      Menggambar ulang sketsa tersebut kedalam bentuk mockup (high fidelity)

5.      Menerapkan bentuk mockup tadi menjadi template

Berdasarkan poin no. 5 dibagi lagi menjadi:

- Menyiapkan aset gambar (slicing design)

- Menyiapkan skeleton template

- Membuat rancangan layout sesuai mockup

- Menyesuaikan template dengan desain

- Menyiapkan template untuk kemungkinan tambahan (responsive design)

- Menambahkan efek untuk menambah daya tarik website

Beberapa hal yang perlu diperhatikan dari langkah-langkah diatas berhubungan langsung dengan **Product & User Research** dimana kita harus mengenali masalah yang ada disekeliling kita, memahami siapa target pengguna kita, apa yang mereka butuhkan, kenapa mereka harus memilih aplikasi kita dan lain hal sebagainya.

Mari kita mulai eksplorasi kita mengenai UI Design yang sebenarnya begitu luas, dimulai dari:

1.      Mencari suatu masalah atau sesuatu yang dapat dijadikan tema / konsep aplikasi

     Hal pertama yang harus kita siapkan sebelum membuat UI Design adalah menentukan masalah atau tema (ideation), untuk mempersingkat proses ide yang biasanya memakan waktu yang cukup lama.

    Mari kita tentukan untuk membuat aplikasi dengan ide tentang **website yang menyediakan paket wisata bagi para traveler**

      2.      Mengenali lebih jauh tentang ide yang kita dapatkan

    Dari ide yang telah kita miliki selanjutnya kita kenali lebih jauh tentang ide tersebut, disini kita asumsikan beberapa hal mengenai target pengguna kita, yaitu pria / wanita dengan umur 20 - 35 tahun tinggal di kota besar dan memiliki pekerjaan yang menyita waktu serta membuat mereka cenderung stress.

      Dengan data yang sangat simple tersebut kita dapat membuat rancangan desain dengan fokus terhadap paket-paket wisata favorite dan destinasi populer yang dapat membuat calon pengguna kita tertarik, tentunya dengan beberapa tambahan seperti travel mana saja yang bergabung dengan website kita serta apa yang traveler / pengguna lain katakan tentang servis kita yang dapat menambah rasa kepercayaan si calon pengguna lain.

      3.      Menuangkan data yang sudah kita miliki kedalam sketsa

   Dari data diatas kita mendapatkan beberapa insight dan kita dapat melanjutkan kedalam tahap mendesain sebuah sketsa yang mempresentasikan apa yang telah kita lakukan di langkah-langkah sebelumnya:

     Dari insight diatas saya telah membuat rancangan sketsa seperti berikut ini:

      

 Nah seperti inilah gambaran sketsa aplikasi dari apa yang telah didapatkan dari insight diatas

Selanjutnya akan dijelaskan maksud dari sketsa diatas

1. Bagian pertama yaitu navbar menu berisi logo aplikasi kita serta menu sebelah kanan yang berisi (Find Places, Packages, Client Say, Sign In & Sign Up)

Sedikit yang menarik pada tombol Sign Up akan kita biarakan berbeda nantinya dengan menu yg lain agar menjadi focus point atau call to action button

2. Bagian penting dari sketsa diatas yaitu form pencarian dengan tagline yang cukup besar serta beberapa link serta ornamen tambahan. Jadi ketika ada pengguna yang membuka website kita dia tahu untuk apa sebenarnya aplikasi kita ini ada.

3. Selanjutnya bagian yang berfungsi sebagai secondary action setelah form pencarian diatas, yaitu slide yang berisi destinasi-destinasi populer.

4. Bagian yang tidak kalah penting yaitu section customer review yang menjadi penambah rasa kepercayaan pengguna tentang website kita.

5. Bagian terakhir yaitu list paket travel yang kita jadikan rekomendasi untuk pengguna

6. Bagian tambahan kita tampilkan dibagian bawah seperti logo travel, menu footer, copyright serta FAQ dll.

      4.      Menggambar ulang sketsa tersebut kedalam bentuk mockup (High Fidelity)

     Disini kita dapat membuat mockup menggunakan beberapa aplikasi seperti Adobe Photoshop, Adobe Illustrator, Adobe Experience Design, Corel Draw, Inkscape, Balsamiq, MockingBot, Pencil Evolus, GravitDesigner, Sketch atau Figma atau aplikasi 2D design lain yang biasa kalian gunakan.

     Dalam contoh ini menggunakan Figma, karena tampilannya yang clean seperti sketch & yang pastinya gratis. Seperti halnya pada materi kali ini saya menggunakan Figma untuk menggambar ulang sketsa yang saya buat diatas. Tapi tentang bagaimana menggambar ulang sketsa tersebut insyaallah akan dijelaskan dilain waktu dan kesempatan.

     Dan berikut hasil gambar ulang sesuai sketsa & Insight yang kita dapatkan:

    1. Apa yang kalian baca diatas berhubungan langsung dengan proses Product & User Research yang sebetulnya bila diurutkan akan memakan waktu yang cukup lama diantaranya:

- Ideation

- User Research

- User Personas

- User Interview

- User Journey

- Storyboard

- Card Sorting

- Sketching

- Low Fidelity

- Usability Testing

- Medium Fidelity

Hingga sampai dengan proses akhir yaitu High Fidelity. Dikarenakan prosenya yang cukup lama maka diatas dirangkum dan singkat menjadi beberapa poin yaitu Ideation, User Personas, Sketching & High Fidelity yang sebetulnya masih jauh dari kata sempurna.

2. Sebetulnya ada cara yang dapat mempercepat proses-proses disini yaitu dengan Design Sprint dari Google Venture tapi saya sendiri jujur belum pernah mencoba dan apalagi menguasai hal tersebut jadi saya belum bisa menjelaskan secara detail

3. Apa yang kita bahas diatas hanya untuk membuat 1 buah tampilan landing page, jika kalian ingin membuat halaman lain maka research kalian bisa disesuaikan dengan halaman lain tersebut. Seperti bagian list product maka kalian harus tahu mengenai kebiasaan pengguna saat mereka berbelanja atau memilih sesuatu.

4. Saat membuat desain kalian dapat menggunakan aplikasi apapun sesuai selera kalian, tapi untuk yang baru belajar bisa mulai membuat dengan menggunakan kertas & pensil seperti membuat button, card, alert, menu dll. Atau jika kalian pernah membuat sketsa aplikasi kalian bisa mencari insight di pinterest, behance, dribbble serta medium.com atau website desain lain. Sebagai tambahan biasanya saya mengkombinasilan insight antara pinterst dan goodui.org

5. Untuk materi selanjutnya (belum tau kapan) akan asumsikan kalian sudah mengetahui apa itu HTML, CSS, sedikit JS dan slicing desain agar lebih mudah ketika akan menjelaskan soal Create HTML Template from Scratch!

6. Sebagai materi tambahan kemungkinan akan dibuat kedalam video dilain waktu & kesempatan, seperti mengenal apa itu SASS, membuat sketsa aplikasi serta menggambar menggunakan Figma.

Beberapa pertanyaan selama materi disampaikan:

1.      Ka, perlukah seorang UI designer mengerti tentang web component?

terus bagaimana kakak menggambarkan consistency font, color, dsb nya?

Jawab:

-          Tentunya harus, tapi terkadang ada juga UI Designer yang membuat tampilan yang cukup unique yang sebenarnya cukup impossible bagi frontend developer junior. Tapi kembali lagi hal yang unique tsb. justru menjadi tantangan bagi para frontend developer.

-          Soal konsistensi font, color dsb. bisa di lihat dari bentuk desain yang dibuat, biasanya tergantung dengan konsep, target pengguna & pasar yang di tentukan. Karena berbeda pengguna berbeda juga soal pewarnaan dll. Misal antara warna untuk pria & wanita itu berbeda, wanita cenderung ke warna yang soft seperti warna corral, violet, tosca dll. tapi untuk pria lebih ke warna yang lebih memberikan energi seperti oranye, merah & biru.

2.      Ka perlukah seorang UI desaigner mengerti tentang web com??

Jawab:

Hal-hal lainnya bergantung dari pengalaman si UI Designer tersebut

3.      ka, bagaimana menyikapi icon untuk di beberapa device (responsive). membuat beberapa ukuran icon yg berbeda, atau mengandalkan proses exporting icon di dalam aplikasi?

Jawab: Icon seperti apa ya?

misalkan selain menggunakan fontAwesome biasanya UI designer menggunakan icon dalam bentuk image, nah biasanya kk bikin icon nya dalam beberapa ukuran berbeda misalkan 32px x 32px dan 42px x 42px atau satu saja ? (best practice nya seperti apa)

4.      Terus kak klo kita belom pernah buat web sama sekali apa yang harus dikuasai kak pada font end

Jawab:

Untuk Belajar | Titi & Herlina selain dari tech stack frontend yg cukup banyak mulai dari HTML, CSS, JS (ES 5 Standar, ES6, JS Next) dsb. seorang frontend developer juga harus memiliki kepekaan terhadap warna, memahami apa itu user experience (meskipun sedikit), interaction, user behavior serta feeling in art yang lumayan

Meskipun kadang untuk saat ini Frontend Developer cenderung hanya mengerjakan tech stacknya saja, kadang saya sendiri menemukan beberapa teman yg fokus di Frontend Dev tapi secara pemahaman soal CSSnya pun masih harus di perdalam lagi

Untuk lebih lengkapnya mengenai tech stack frontend bisa dilihat disini https://github.com/kamranahmedse/developer-roadmap/

5.      khususnya untuk responsive design

jawab:

agar ukurannya bisa di setting di CSS kita?

Oh itu toh, biasanya sih saya bikin atau minta ke ui designer dalam format SVG agar lebih scalable.

Agar gambarnya tidak pecah dalam ukuran berapapun