{"id":2548,"date":"2018-08-14T11:07:50","date_gmt":"2018-08-14T11:07:50","guid":{"rendered":"http:\/\/blog.docotel.com\/?p=2548"},"modified":"2020-02-10T07:22:32","modified_gmt":"2020-02-10T07:22:32","slug":"ingin-membuat-website-dan-aplikasi-ayo-berkenalan-dulu-dengan-wireframe","status":"publish","type":"post","link":"https:\/\/dti.amon.id\/blog\/ingin-membuat-website-dan-aplikasi-ayo-berkenalan-dulu-dengan-wireframe\/","title":{"rendered":"Ingin Membuat Website dan Aplikasi? Ayo, Berkenalan Dulu dengan Wireframe!"},"content":{"rendered":"

Dalam membuat website<\/em> atau aplikasi, rancangan desain diperlukan sebelum memasuki tahap development.<\/em> Rancangan ini diperlukan agar website<\/em> atau aplikasi yang dibuat dapat sesuai dengan apa yang diharapkan. Pada tahap perancangan, peran user interface<\/em> sangatlah dibutuhkan dengan tujuan untuk membuat wireframe<\/em>.<\/p>\n

Lalu, apa itu wireframe? <\/em><\/strong><\/p>\n

Wireframe<\/em> merupakan kerangka desain yang biasanya dikerjakan oleh UI Designer<\/em> berbentuk coretan tangan di kertas atau menggunakan tools<\/em> desain khusus wireframing. Wireframe<\/em> digunakan sebagai patokan dalam penataan item-item<\/em> pada halaman website<\/em> sebelum proses desain yang sesungguhnya dimulai. Item-item<\/em> yang biasanya masuk ke proses wireframing<\/em> antara lain banner, header, footer, form input, <\/em>dll. <\/em><\/p>\n

Dengan wireframe<\/em>, seluruh proses dalam pengerjaan website<\/em> atau aplikasi dapat berjalan secara terstruktur dan terarah. Wireframe<\/em> juga akan meminimalisir terjadinya revisi atau perbaikan yang dapat memperlambat pekerjaan developer.<\/em><\/p>\n

Saat merancang layout<\/em> untuk wireframe<\/em>, tentukan jumlah kolom yang akan diperlukan pada website<\/em>. Pada layout<\/em> dasar terdapat dua tipe, yaitu dua kolom dan tiga kolom yang dapat digunakan sesuai dengan kebutuhan. Namun, seiring perkembangan tren UI Design<\/em>, kini penggunaan layout <\/em>tidak selalu terpaku dengan kedua tipe layout<\/em> tersebut.<\/p>\n

Wireframe<\/em> memiliki beberapa elemen penting, di antaranya:<\/strong><\/p>\n

    \n
  1. Informasi<\/li>\n<\/ol>\n

    Elemen ini berisi semua informasi yang bersumber dari hasil riset, konten, atau informasi yang ingin disampaikan. Seluruh informasi atau konten yang akan ditampilkan harus memiliki sumber yang jelas dan terpercaya. Contohnya link<\/em>, konten tulisan, gambar, form<\/em>, dan lain-lain.<\/p>\n

      \n
    1. Navigasi<\/li>\n<\/ol>\n

      Dalam sebuah website<\/em> atau aplikasi, user interface<\/em> harus memiliki tampilan yang mudah digunakan. Oleh karena itu, navigasi juga sangat diperlukan untuk memberikan petunjuk agar pengguna tidak kebingungan. Jika pengguna merasa bingung dan tidak nyaman saat menggunakan aplikasi atau website<\/em>, mereka akan cepat menutup halaman tersebut dan tidak mau menggunakannya lagi.<\/p>\n

        \n
      1. Desain interface<\/em><\/li>\n<\/ol>\n

        Desain interface<\/em> berfungsi untuk membuat tampilan visual menjadi lebih cantik dan menarik. Dalam proses ini, penempatan item<\/em>, pemilihan font dan font-size<\/em>, pengaturan text<\/em>, hingga penempatan judul dilakukan.<\/p>\n

        Demikian penjelasan mudah mengenai wireframe <\/em>pada proses pembuatan website <\/em>dan aplikasi, semoga bermanfaat, ya!<\/p>\n","protected":false},"excerpt":{"rendered":"

        Dalam membuat website atau aplikasi, rancangan desain diperlukan sebelum memasuki tahap development. Rancangan ini diperlukan agar website atau aplikasi yang dibuat dapat sesuai dengan apa yang diharapkan. Pada tahap perancangan, peran user interface sangatlah dibutuhkan dengan tujuan untuk membuat wireframe. Lalu, apa itu wireframe? Wireframe merupakan kerangka desain yang biasanya dikerjakan oleh UI Designer berbentuk […]<\/p>\n","protected":false},"author":75,"featured_media":2550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[315,298,156,314],"coauthors":[785],"class_list":["post-2548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledge","tag-designwebsite","tag-userinterface","tag-website","tag-wireframe"],"_links":{"self":[{"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/posts\/2548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/comments?post=2548"}],"version-history":[{"count":0,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/posts\/2548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/media\/2550"}],"wp:attachment":[{"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/media?parent=2548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/categories?post=2548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/tags?post=2548"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/dti.amon.id\/blog\/wp-json\/wp\/v2\/coauthors?post=2548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}