{"id":1688,"date":"2015-07-01T10:48:26","date_gmt":"2015-07-01T03:48:26","guid":{"rendered":"http:\/\/dmd.binus.ac.id\/?p=1688"},"modified":"2018-01-24T06:23:30","modified_gmt":"2018-01-24T06:23:30","slug":"penggunaan-icon-pada-website-binus","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/knowledge\/2015\/07\/penggunaan-icon-pada-website-binus\/","title":{"rendered":"Penggunaan Icon pada Website BINUS"},"content":{"rendered":"<p>Sebagaimana tren desain\u00a0<em>flat<\/em>\u00a0yang semarak digunakan semenjak akhir\u00a02013 dan telah diterapkan oleh raksasa industri teknologi seperti\u00a0Apple, Google, Microsoft, maka website BINUS pun mencoba untuk menerapkan\u00a0<em>style<\/em> tersebut. Perubahan\u00a0<em>style\u00a0<\/em>yang dilakukan\u00a0juga seiring dengan penggantian <em>Corporate Identity<\/em>\u00a0BINUS, maka pembuatan <em>themes<\/em> baru untuk website BINUS\u00a0dengan gaya desain\u00a0<em>flat<\/em>\u00a0pun diaplikasikan.\u00a0Pengembangan desain\u00a0<em>flat<\/em>\u00a0yang dilakukan termasuk\u00a0desain\u00a0<em>icon\u00a0<\/em>sebagai bagian dari\u00a0<em>themes\u00a0<\/em>website BINUS.<\/p>\n<p>Pertimbangan penggunaan <em>icon<\/em>, tak hanya sekedar soal estetika\u00a0dan tren desain belaka. <em>Icon<\/em> juga meningkatkan usabilitas dan <em>user experience<\/em> dari website. <em>Icon<\/em> juga secara universal merupakan simbol yang mudah dimengerti dan dikenali oleh<i>\u00a0<\/i>pengakses. Seperti misalnya\u00a0simbol &#8220;x&#8221; yang diartikan dengan <em>closed<\/em> (keluar) atau <em>delete<\/em>\u00a0(hapus). Dalam implementasinya di website BINUS, <em>icon<\/em> digunakan untuk navigasi, seperti pada bagian\u00a0<em>search<\/em> dan <em>award<\/em>, sebagai tombol dan sebagai pemisah dan penanda bagian\/modul pada website. Setiap <em>icon<\/em> yang digunakan sebagai pemisah tersebut, merepresentasikan konten\u00a0dari bagian modulnya. \u00a0Selanjutnya, dalam tulisan ini akan lebih dibahas mengenai pembuatan <em>icon<\/em> BINUS yang digunakan sebagai pembagi objek\/modul.<\/p>\n<figure id=\"attachment_1758\" aria-describedby=\"figcaption_attachment_1758\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 273px\"><a href=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.54.00-AM.png\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1758 size-full\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.54.00-AM.png\" alt=\"Screen Shot 2015-06-26 at 11.54.00 AM\" width=\"273\" height=\"74\" \/><\/a><figcaption id=\"figcaption_attachment_1758\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 1: contoh icon pada website binus yang digunakan sebagai navigasi<\/figcaption><\/figure>\n<figure id=\"attachment_1759\" aria-describedby=\"figcaption_attachment_1759\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 176px\"><a href=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.59.23-AM.png\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1759 size-full\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.59.23-AM.png\" alt=\"Screen Shot 2015-06-26 at 11.59.23 AM\" width=\"176\" height=\"73\" \/><\/a><figcaption id=\"figcaption_attachment_1759\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 2: contoh \u00a0icon\u00a0pada website binus yang digunakan sebagai tombol<\/figcaption><\/figure>\n<figure id=\"attachment_1760\" aria-describedby=\"figcaption_attachment_1760\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 640px\"><a href=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.56.44-AM.png\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1760\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/Screen-Shot-2015-06-26-at-11.56.44-AM.png\" alt=\"Screen Shot 2015-06-26 at 11.56.44 AM\" width=\"640\" height=\"115\" \/><\/a><figcaption id=\"figcaption_attachment_1760\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 3 : contoh icon pada website binus yang digunakan sebagai separator atau pemisah bagian modul<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p><strong>Proses Pembuatan<em> Icon<\/em>.<\/strong><\/p>\n<p><em>Icon<\/em>\u00a0yang digunakan di\u00a0website BINUS\u00a0menggunakan <em>icon<\/em>\u00a0berbayar dari Picons. Beberapa\u00a0<em>icon<\/em>\u00a0dikembangkan menjadi versi berwarna (dari yang awalnya hitam putih) dan ada pula yang dibuat baru\u00a0sesuai dengan keperluan. Warna yang dipilih pun disesuaikan dengan aturan warna (<em>colorswatch<\/em>) dari <em>Corporate Identity<\/em> BINUS yang baru.<\/p>\n<p>Dalam pembuatan awal digunakan aturan (<em>guide<\/em>) dari\u00a0<em>icon<\/em> IOS 7 untuk acuan \u00a0perbandingan ukuran antara <em>background<\/em> dan <em>icon<\/em>. Dalam pembuatan dan penggunaannya pun tidak benar-benar kaku mengikuti aturan <em>grid<\/em> tersebut namun\u00a0ditinjau ulang untuk disesuaikan dengan estetika dan keseimbangan optis yang dirasa perlu.<\/p>\n<figure id=\"attachment_1757\" aria-describedby=\"figcaption_attachment_1757\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 603px\"><a href=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/proporsi.png\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1757 size-full\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/proporsi.png\" alt=\"proporsi\" width=\"603\" height=\"626\" \/><\/a><figcaption id=\"figcaption_attachment_1757\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 4: contoh penerapan guide pada proses pembuatan icon<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>Dalam proses pembuatan\u00a0<em>icon<\/em>\u00a0kami melakukan\u00a0eksplorasi\u00a0bentuk dan warna, hingga akhirnya mencapai kesepakatan untuk desain finalnya.<\/p>\n<figure id=\"attachment_1761\" aria-describedby=\"figcaption_attachment_1761\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 640px\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1761\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/alternatif-icon.jpg\" alt=\"alternatif-icon\" width=\"640\" height=\"285\" \/><figcaption id=\"figcaption_attachment_1761\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 5: alternatif desain awal dalam pembuatan icon<\/figcaption><\/figure>\n<p><strong>Impelementasi \u00a0<em>Icon<\/em><\/strong><\/p>\n<p>Setelah proses pembuatan desain <em>icon<\/em> tersebut selesai, masih ada proses lain yang harus dilakukan, yakni melakukan penyesuaian\u00a0warna dengan merujuk ke aturan <em>colorswatch<\/em>\u00a0dari masing-masing<em> Business Unit<\/em>\u00a0BINUS, seperti ungu untuk yayasan, biru untuk universitas, merah tua\u00a0untuk sekolah.<\/p>\n<figure id=\"attachment_1762\" aria-describedby=\"figcaption_attachment_1762\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 640px\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1762\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/final-desain.jpg\" alt=\"final-desain\" width=\"640\" height=\"285\" \/><figcaption id=\"figcaption_attachment_1762\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 6: desain icon\u00a0final\u00a0dan contoh penerapan warna sesuai business unit<\/figcaption><\/figure>\n<figure id=\"attachment_1763\" aria-describedby=\"figcaption_attachment_1763\" class=\"wp-caption clear aligncenter\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\" style=\"width: 640px\"><a href=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/tampilan-web.jpg\"><img loading=\"lazy\" decoding=\"async\" itemprop=\"contentURL\" class=\"wp-image-1763\" src=\"http:\/\/dmd.binus.ac.id\/wp-content\/blogs.dir\/1\/files\/2015\/06\/tampilan-web.jpg\" alt=\"tampilan-web\" width=\"640\" height=\"285\" \/><\/a><figcaption id=\"figcaption_attachment_1763\" class=\"wp-caption-text\" itemprop=\"description\">Gambar 7: tampilan icon pada website binus<\/figcaption><\/figure>\n<p style=\"text-align: center\">* * *<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sebagaimana tren desain\u00a0flat\u00a0yang semarak digunakan semenjak akhir\u00a02013 dan telah diterapkan oleh raksasa industri teknologi seperti\u00a0Apple, Google, Microsoft, maka website BINUS pun mencoba untuk menerapkan\u00a0style tersebut. Perubahan\u00a0style\u00a0yang dilakukan\u00a0juga seiring dengan penggantian Corporate Identity\u00a0BINUS, maka pembuatan themes baru untuk website BINUS\u00a0dengan gaya desain\u00a0flat\u00a0pun diaplikasikan.\u00a0Pengembangan desain\u00a0flat\u00a0yang dilakukan termasuk\u00a0desain\u00a0icon\u00a0sebagai bagian dari\u00a0themes\u00a0website BINUS. Pertimbangan penggunaan icon, tak hanya sekedar soal [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,83,28],"tags":[],"class_list":["post-1688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dmd-binus-university","category-news","category-products"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/1688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/1688\/revisions"}],"predecessor-version":[{"id":2168,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/1688\/revisions\/2168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media\/2165"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media?parent=1688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/categories?post=1688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/tags?post=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}