YUK-RECYCLE Design inspired by Material Design
Hi, it’s Donny !
Inspirasi terbesar dalam pembuatan guideline design untuk Yuk-Recycle adalah Material Design dari Google. Saya hampir sebagian besar mengikuti kaidah dari material design ini. Mengapa material design? Pertama karena aplikasi Yuk-Recycle berbasis android, material design adalah kiblat dari android. Kedua, karena penggunaan dari material design sangat mudah untuk diimplementasi.
Pada material design, diberikan gambaran berupa penggunaan button, dsb.
Ini adalah contoh logo dari Yuk-Recycle. Contoh dapat dilihat bahwa button menggunakan warna yang jelas, terlihat dan tulisan yang sangat jelas.
What is Material Theming?
Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand.
When you begin changing aspects of your UI, such as color and typography, Material Theming tools apply your design vision throughout your user experience. These tools allow easy switching between design and code workflows by providing specific values for all customizable attributes. Customizing these values creates a Material Theme for your product.
Tools yang disediakan oleh google mempermudah kita. Sebenarnya ada banyak tools lain yang daoat digunakan seperti adobe, tetapi kami menggunakan google karena kami merasa material design adalah standard bagi kami pada mobile apps khususnya android, maka dari itu, kami banyak melihat referensi penggunaan design dalam menunjang aplikasi kami dari sana.
Pengaplikasian guideline ke mock up
Contoh pengaplikasian dari guideline yang pertama adalah dari pemilihan warna. Pemilihan warna sebagian besar sesuai, kecuali memang dibutuhkan untuk membuat ornamen kecil.
Jangan tertipu dengan 0xFF yang diawal. Pada flutter, setiap penggunaan color harus men-state opacity dari warna tersebut. 0x00 berarti opacity 0%, dan 0xFF berarti opacity 100%. Contoh diatas adalah penggunaan warna hijau Yuk-Recycle (#007E24).
Pengaplikasian logo didasarkan pada background yang kami pakai. Jika backgroun gelap, menggunakan logo yang berwarna putih dan begitu sebaliknya.
Diatas adalah contoh penerapan pada logo. Jika logo ditekan, maka akan berubah warna menjadi hijau dan jika menu lain yang ditekan, logo akan kembali ke non-active state nya yaitu biru gelap.
Diatas adalah contoh dengan menggunakan asset yang berbeda. Cara seperti diatas adalah cara yang kami lakukan pada aplikasi kami.
Diatas adalah contoh dari button log out. Disini kami menggunakan warna merah sesuai guideline dan putih untuk tulisan nya
Sekian yang bisa dijelaskan. Kedepannya kami berharap dapat lebih baik lagi. Cheers ! *D*
