{"id":7919,"date":"2020-09-22T08:00:37","date_gmt":"2020-09-22T01:00:37","guid":{"rendered":"http:\/\/crocodic.com\/?p=7919"},"modified":"2020-09-22T08:36:30","modified_gmt":"2020-09-22T01:36:30","slug":"apakah-tombol-utama-pada-aplikasi-harus-sama-dengan-warna-utama-brand","status":"publish","type":"post","link":"https:\/\/crocodic.com\/id\/apakah-tombol-utama-pada-aplikasi-harus-sama-dengan-warna-utama-brand\/","title":{"rendered":"Apakah Tombol Utama pada Aplikasi Harus Sama dengan Warna Utama Brand?"},"content":{"rendered":"

<\/p>\n\n\n\n

Sejatinya warna brand<\/em> sebuah produk adalah gambaran karakter dari produk tersebut. Ada warna primer, sekunder, ataupun aksen yang biasa digunakan pada sebuah produk. Dengan ini kita bisa berasumsi bahwa warna \u2013 warna tersebut (terutama warna primer) akan selalu ditonjolkan oleh produk. Begitu pula dalam dunia pembuatan aplikasi<\/a> mobile<\/em>, hal ini selalu menjadi perhatian oleh para desainer User Interface. <\/em><\/p>\n\n\n\n

Di sini kita akan membahas tentang penggunaan warna pada tombol utama pada aplikasi mobile<\/em>. Apakah harus menggunakan warna primer, atau bisa jika hanya mirip \u2013 mirip saja, atau bisa jika warnanya beda? Untuk menjawab pertanyaan ini, mari kita lihat beberapa contoh aplikasi mobile<\/em> di bawah.<\/p>\n\n\n\n

1. Traveloka<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Jika memperhatikan logo Traveloka maka kita akan berasumsi bahwa produk\nini identik dengan warna biru dan abu \u2013 abu. Setelah melihat logo, mari kita\nlihat aplikasi mobile<\/em>nya.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Aplikasi mobile Traveloka memang didominasi warna biru pada setiap sisinya, namun aplikasi ini menggunakan warna orange pada tombol utamanya. Sebuah warna yang tidak bisa kita temukan pada logo Traveloka.<\/p>\n\n\n\n

2. <\/strong>GO-JEK<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Mari kita lihat logo GO-JEK,\nunicorn <\/em>karya anak bangsa Indonesia.\nDi sini kita bisa melihat warna hitam dan hijau sebagai brand color <\/em>GO-JEK. Lalu kita lihat ke dalam aplikasi mobile<\/em> GO-JEK.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Di sini kita bisa melihat tampilan aplikasi GO-JEK yang bersih dan nyaman ini. GO-JEK menggunakan warna hijau pada tombol utama aplikasi mobile<\/em>nya.<\/p>\n\n\n\n

3. Airbnb<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Saat melihat logo\nAirbnb, kita berasumsi bahwa warna merah muda adalah warna primer dari brand\nini. Sekarang coba kita lihat ke dalam aplikasi mobile<\/em> Airbnb.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Airbnb menggunakan warna merah muda untuk tombol utama pada aplikasi mobile<\/em>nya. Warna ini mirip dengan warna brand<\/em> Airbnb itu sendiri.<\/p>\n\n\n\n

4. Tiket.com<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Bisa kita lihat bahwa\nTiket.com memiliki warna brand <\/em>biru\ndan kuning. Nah, sekarang kita lihat ke dalam aplikasi mobile<\/em> salah satu competitor dari Traveloka ini.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Hmmm, juga didominasi warna biru, aplikasi mobile<\/em> Tiket.com ini mempunyai tombol utama berwana orange. Sama seperti Traveloka? Ah tidak, mungkin itu hanya perasaaan Anda saja. Hehehe \ud83d\ude00<\/p>\n\n\n\n

5. Pinterest<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Setelah kita meliihat\nlogo Pinterest di atas, kita menjadi tahu bahwa merah adalah warna brand <\/em>dari Pinterest. Mari kita lihat ke\ndalam aplikasi mobile<\/em> Pinterest.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Di dalam dalam aplikasi mobile<\/em>nya Pinterest menggunakan warna\nyang sama dengan logo untuk tombol utamanya yaitu warna merah. Dengan kata lain\ntombol utama aplikasi Pinterest senada dengan warna logonya.<\/p>\n\n\n\n

Setelah kita melihat\nbeberapa produk dan melihat warna pada tombol utama masing-masing aplikasi mobile<\/em> di atas, mari kembali ke\npertanyaan kita.<\/p>\n\n\n\n

Jadi apakah tombol utama pada aplikasi harus sama dengan warna utama brand?<\/strong><\/p>\n\n\n\n

Jawabannya adalah boleh\nsama dan boleh juga tidak.<\/p>\n\n\n\n

Kita bisa saja\nmenggunakan warna lain yang tidak menjadi warna primer pada sebuah brand. <\/em>Yang perlu diperhatikan adalah\nwarna yang akan kita gunakan harus terlihat jelas atau menonjol, sehingga\ntombol utama pada sebuah aplikasi mobile<\/em>\nmudah ditemukan oleh pengguna walaupun tombol tersebut terletak diantara\nbeberapa elemen.<\/p>\n\n\n\n

Coba Anda scroll <\/em>lagi ke atas dan coba perhatikan.\nSemua tombol aplikasi mobile<\/em> di atas\nmudah ditemukan oleh pengguna karena tombol tersebut memiliki warna yang bisa\ndilihat dengan jelas dan menonjol diantara elemen \u2013 elemen yang ada di sekitar\ntombol utama tersebut.<\/p>\n\n\n\n

Hal ini sesuai dengan\nprinsip desain yang saya tulis pada artikel sebelumnya yaitu,<\/p>\n\n\n\n

\u201cLayaknya\nperempuan, pengguna juga perlu kejelasan, jangan sampai membuat pengguna berpikir\ndua kali atau mereka akan beralih ke lain aplikasi\u201d #halah<\/h5>\n\n\n\n

Jadi, jangan biarkan pengguna sampai berpikir ulang hanya karena kita membuat tombol utama aplikasi mobile<\/em> sulit ditemukan, karena desain yang baik adalah desain yang tidak membuat pengguna berfikir. Terima kasih, semoga bermanfaat \ud83d\ude42<\/p>","protected":false},"excerpt":{"rendered":"

Sejatinya warna brand sebuah produk adalah gambaran karakter dari produk tersebut. Ada warna primer, sekunder, ataupun aksen yang biasa digunakan pada sebuah produk. Dengan ini kita bisa berasumsi bahwa warna \u2013 warna tersebut (terutama warna primer) akan selalu ditonjolkan oleh produk. Begitu pula dalam dunia pembuatan aplikasi mobile, hal ini selalu menjadi perhatian oleh para […]<\/p>\n","protected":false},"author":1,"featured_media":8970,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[354,355,82],"tags":[],"class_list":["post-7919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-design","category-crocodic-dec","category-aplikasi-mobile-android-ios"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=7919"}],"version-history":[{"count":9,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7919\/revisions"}],"predecessor-version":[{"id":8969,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7919\/revisions\/8969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/8970"}],"wp:attachment":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=7919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=7919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=7919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}