{"id":10669,"date":"2019-12-23T00:00:00","date_gmt":"2019-12-23T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/12\/23\/ui-design-tips\/"},"modified":"2024-09-24T02:20:22","modified_gmt":"2024-09-24T02:20:22","slug":"ui-design-tips","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/12\/23\/ui-design-tips\/","title":{"rendered":"UI Design Tips"},"content":{"rendered":"

Mari mulai dari awal. Untuk membuat desain yang terlihat bagus dan terpercaya, kamu harus mencegah kekacauan terjadi. Bagaimana mencegahnya? Yang terpenting adalah adanya sistem pada pekerjaan desainmu. Developer pun akan merasa lebih mudah saat kau membuat sistem pada desain.<\/span><\/p>\n

\"setting<\/p>\n

 <\/p>\n

Buatlah sebuah sistem resize dengan membuat ukuran yg telah ditentukan<\/b><\/h3>\n

Mulai dengan memilih unit standar 8 pixel grid<\/h4>\n

Untuk membuat desain lebih rapi memang tergantung kamu sebagai desainer ingin membuat ukuran apa. Namun pilihan terbaik adalah dengan mengikuti aturan yang telah teruji dan salah satunya dengan membuat standar resize dan ukuran geser sebesar 8 pixel. Dengan aturan ini akan mempersingkat pengambilan keputusan.<\/span><\/p>\n

Mengapa 8 pixel?<\/p>\n

    \n
  • Karena 8 pixel mudah diingat dan cukup baik untuk jarak minimum,\u00a0<\/span><\/li>\n
  • Angka tersebut bisa dibagi 4 dan 2,<\/span><\/li>\n
  • Saat meresize elemen, angka tersebut dapat dibagi tanpa menjadikan angkanya berupa koma. Karena saat ukuran pixel bulat tanpa menjadi koma (contoh koma misalnya 2.5) maka akan terlihat lebih tajam dan presisi<\/span><\/li>\n
  • Perkalian delapan terjalin dengan angka binary<\/span><\/li>\n<\/ul>\n

    Apasaja keuntungan menggunakan 8 pixel?<\/span><\/p>\n

      \n
    • Sebagai desainer waktu itu berharga dan pengambilan keputusan yang cepat akan membuat waktu lebih efisien.<\/span><\/li>\n
    • Saat bekerja dengan developer, akan mudah untuk melakukan perubahan cepat tanpa harus project tsb kembali ke kita sbg desainer karena desain sudah konsisten<\/span><\/li>\n
    • User akan mudah dan nyaman saat menggunakan tampilan tsb.<\/span><\/li>\n<\/ul>\n

      \"8<\/p>\n

       <\/p>\n

      Bekerja dengan grid saat melayout elemen<\/b><\/h3>\n

      Harmoni horizontal<\/h4>\n

      Saya kalian menggunakan grid saat mendesain. Grid adalah rangka dari tampilan yang menunjukkan dimana elemen dapat diletakkan.<\/span><\/p>\n

      Template menahan komposisi dan memberikan batasan jelas agar desain menjadi konsisten.<\/span><\/p>\n

      \"horizontal<\/p>\n

       <\/p>\n

      Harmoni vertikal<\/h4>\n

      Sama dengan menjaga harmoni horizontal, penting juga menjaga jarak agar konsisten secara vertikal.<\/span><\/p>\n

      Seberapa besar kolom tergantung desainer, namun tetap saya merekomendasikan 8 px sebagai acuan saat peletakkan elemen atau teks<\/span><\/p>\n

      \"vertical<\/p>\n

       <\/p>\n

      Pilih ukuran font secara langsung<\/b><\/h3>\n

      Saat melihat desain yang baik, maka akan ada konsistensi dalam penggunaan ukuran font. Mulai dengan memilih beberapa ukuran font utama yang tidak berdekatan. Gabungkan ukuran font yg berdekatan kedalam 1 ukuran.<\/span><\/p>\n

      Membuat standar ukuran font memberikan beberapa manfaat<\/h4>\n
        \n
      1. Desain akan lebih konsisten dan elegan.<\/span><\/li>\n
      2. Mempercepat desain proses dan membuat efisien<\/li>\n<\/ol>\n

        Saat menentukan ukuran font harap perhatikan untuk memperbesarnya dengan peningkatan yg sama<\/span><\/p>\n

        Saat memperbesar teks sebaiknya nonlinear, artinya semakin besar teks maka semakin besar peningkatannya. Misalnya ingin memoerbesar dari 12px ke 14px, namun saat ingin memperbesar font 40px, maka tidak hanya bisa menambah 2px saja. Bisa jadi harus mengubahnya menjadi 24px karena secara optis akan terlihat lebih seimbang.<\/span><\/p>\n

        Hal ini tak hanya berlaku untuk font, namun button, whitespace dan lainnya. Tipikalnya perubahan ini berdasarkan perubahan geometris seperti skala gambar dibawah ini:<\/span><\/p>\n

        Biasanya utk ukuran font tetap berada pada skala ukuran teruji seperti 12,14, 16, 18,20,24,30,36,48,60, dan 72 px<\/span><\/p>\n

        \"typography<\/p>\n

         <\/p>\n

        Ukuran line height (jarak antar teks)<\/b><\/p>\n

        Saat mengatur jarak ini, gunakan penambahan dengan 4px. Misalnya saat font 16px maka line height 24, jika ingin menambahnya maka line height menjadi 28<\/span><\/p>\n

         <\/p>\n

        Tentukan warna projectmu<\/strong><\/h3>\n

        Sebelum memulai proyek sebaiknya langsung menentukan warnanya. Dan saat menentukan warna oerlu juga menentukan shades warnanya. Sebaiknya tentukan 5-10shades untuk tiap warna. Saya merekomendasikan untuk menggunakan 9 shades<\/span><\/p>\n

        Mengapa 9 shades?<\/h4>\n

        Manfaat pertama adalah untuk penamaan, baik menggunakan graphic editor maupun css setiap warna biasanya diberikan nomor dalam ratusan seperti 100,200,…,900<\/span><\/p>\n

        Manfaat kedua dengan menggunakan 9 warna akan terbagi dengan lebih mudah. Bagian tengah adalah warna utamanya , 4 di kiri shade menuju putih, dan tertuanya 4 di kanan.\u00a0<\/span><\/p>\n

        \"nine<\/p>\n

         <\/p>\n

        Siapkan perbedaan beberapa ukuran, jenis dan kondisi elemen<\/h4>\n

        Saat mendesain akan berhubungan dengan berbagai ikon, button dan komponen yang sebaiknya disiapkan berbagai ukuran. Namun jangan lupa juga untuk membatasi pilihannya sesedikit mungkin. Gunakan ikon dan komponen yang telah ditentukan ukurannya tersebut.\u00a0<\/span><\/p>\n

        \"button<\/p>\n

         <\/p>\n

        Tentukan Properti Elemen Lain<\/h4>\n

        Terkadang saat membuat desain kita menggunakan shadow. Perlu untuk menentukan jarak shadow pada sumbu x dan y , radius besar blur yg diinginkan serta transparencynya. Perlu juga memoersiapkan standar set shadow (seperti saat menentukan shade warna) agar mudah pengaplikasiannya sata proses mendesain. Selain shadow tentukan hal lain yang perlu diperhatikan juga seperti corner radius, transparency, dan gradient warna.<\/span><\/p>\n

        \"shadow<\/p>\n

         <\/p>\n

        Tentukan pula properti elemen lainnya<\/h4>\n

        Terkadang saat membuat desain kita menggunakan shadow. Perlu untuk menentukan jarak shadow pada sumbu x dan y , radius besar blur yg diinginkan serta transparencynya. Perlu juga memoersiapkan standar set shadow (seperti saat menentukan shade warna) agar mudah pengaplikasiannya sata proses mendesain. Selain shadow tentukan hal lain yang perlu diperhatikan juga seperti corner radius, transparency, dan gradient warna.<\/span><\/p>\n

         <\/p>\n

        WHITE SPACE<\/span><\/h4>\n

        Penempatan white space juga dapat diakomodir oleh 8px dan kelioatannya agsr konsisten. Penggunaan jarak 4px juga bisa untuk elemen kecil<\/span><\/p>\n

        \"white<\/p>\n

         <\/p>\n

        https:\/\/www.smashingmagazine.com\/2019\/12\/ui-design-tips-speed-up-workflow\/<\/p>\n","protected":false},"excerpt":{"rendered":"

        Mari mulai dari awal. Untuk membuat desain yang terlihat bagus dan terpercaya, kamu harus mencegah kekacauan terjadi. Bagaimana mencegahnya? Yang terpenting adalah adanya sistem pada pekerjaan desainmu. Developer pun akan merasa lebih mudah saat kau membuat sistem pada desain.   Buatlah sebuah sistem resize dengan membuat ukuran yg telah ditentukan Mulai dengan memilih unit standar […]<\/p>\n","protected":false},"author":9,"featured_media":10670,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-10669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=10669"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10669\/revisions"}],"predecessor-version":[{"id":11901,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10669\/revisions\/11901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/10670"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=10669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=10669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=10669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}