Download to read offline
Ui designer 101
- 1. Rumah UX - LegaAdilawati
- 2. Seorang designer yangmembuat design, dalam bentuks sketsa, wireframe atau design tampilan website/app pada smartphone/tablet disebut sebagai UI Designer ADD A FOOTER 2
- 3.
- 4.
- 5.
- 6. - Sketching – Dibuatsesuai kebutuhan user - Wireframe – Mengubah layout jadi tampilan web - Mockup Design - Wireframe yang sudah diberi warna, gambar, font yang dipilih - Prototyping – Membuat motion graphic untuk mendapatkan “feel interaction with the user" ADD A FOOTER 6 Seorang UI Designer kini lebih memfokuskan dirinya dalam pekerjaan seputar design tampilan layout dimulai dari sketsa coretan pada kertas, wireframe dan design tampilan sebenarnya.
- 7. ADD A FOOTER7 Wireframe berfungsi untuk membantu orang desain dan non-desain untuk menyatukan pemikiran mereka dan memudahkan dalam komunikasi dalam desain
- 8. User flow adalahserangkaian langkah yang dilakukan pengguna untuk mencapai tujuan yang bermakna. 8
- 9. Mendefinisikan pengguna dantujuan mereka se-detail mungkin, tetapi Anda bisa menggunakan persyaratan, cerita, tahap perjalanan pengguna. Catet apa yang mereka butuhkan, apa request-annya, serinci-rincinya 9
- 10. ADD A FOOTER10 Jelaskan apa yang akan mereka lakukan pada setiap langkah.
- 11. ADD A FOOTER11 Anda dapat mulai menambahkan hal-hal digital yang akan dilihat / digunakan pengguna: layar, pesan, tampilan iklan lobi yang tidak diinginkan, dll.
- 12. ADD A FOOTER12 Sasaran pada tahap ini adalah memiliki user flow yang akan dipahami oleh pengguna dan pengembang Anda — jika tidak, Anda berakhir dengan solusi yang tidak dipahami oleh keduanya.
- 13. ADD A FOOTER13 Menjiplak UI : hanya untuk belajar Buat UI sendiri : tentuin platform, tema, desain deh Minta feedback : user testing Menyertakan alasan ditiap desain
- 14.
- 15. ADD A FOOTER15 Dalam desain, kami mencoba untuk mencapai keseimbangan antara elemen karena menyenangkan di mata. Tetapi keseimbangan tidak selalu dicapai melalui simetri
- 16. ADD A FOOTER16 Proximity dalam desain berarti bahwa benda-benda yang saling berdekatan dipandang sebagai satu kesatuan. Sesederhana itu dan itu adalah sesuatu yang Anda lihat setiap hari. Pada halaman web Anda atau kartu bisnis Anda, informasi terkait ditempatkan berdekatan dan membentuk unit visual.
- 17. ADD A FOOTER17 Kontras terjadi ketika ada perbedaan elemen pada halaman berbeda. Misalnya, bisa berupa warna yang berbeda antara teks dan warna latar belakang. Ini bisa berupa heading yang diatur dalam font besar, tebal, kasar, dikombinasikan dengan font sans-serif Bisa jadi perbedaan antara grafik besar dan grafik kecil atau bisa juga tekstur kasar dipadukan dengan tekstur halus. Yang penting tentang kontras adalah bahwa unsur-unsurnya harus sepenuhnya berbeda. Bukan hanya sedikit berbeda.
- 18. ADD A FOOTER18 Value atau biasa disebut dengan tone warna yaitu cahaya relatif dan kegelapan dari suatu objek.
- 19. 19 Analogous Color Schemes MonochromaticColor Schemes Warm and Cool Complimentary Color Scheme Split Complementary Scheme Triadic Color Schemes
- 20. SEE YOU ONPART 2 20
Editor's Notes
- #7 Tools : Sketching : dikertas, digambar pake tab Wireframe : Mock up design :
- #8 Wireframe berfungsi untuk membantu orang desain dana non-desain untuk menyatukan pemikiran mereka dan memudahkan dalam komunikasi dalam desain
- #9 User flow adalah serangkaian langkah yang dilakukan pengguna untuk mencapai tujuan yang bermakna.
- #10 Mendefinisikan pengguna dan tujuan mereka se-detail mungkin, tetapi Anda bisa menggunakan persyaratan, cerita, tahap perjalanan pengguna.
- #11 Jelaskan apa yang akan mereka lakukan pada setiap langkah. Cara yang baik untuk memulai adalah menuliskan apa yang perlu dilakukan pengguna pada setiap langkah untuk menyelesaikan pekerjaan atau memenuhi tujuan / persyaratan.
- #12 Anda dapat mulai menambahkan hal-hal digital yang akan dilihat / digunakan pengguna: layar, pesan, tampilan iklan lobi yang tidak diinginkan, dll.