{"id":2987,"date":"2022-04-11T22:50:35","date_gmt":"2022-04-11T22:50:35","guid":{"rendered":"https:\/\/sagaratechnology.com\/blog\/?p=2987"},"modified":"2022-04-11T22:52:03","modified_gmt":"2022-04-11T22:52:03","slug":"wireframes-in-ui-ux","status":"publish","type":"post","link":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/","title":{"rendered":"Wireframes in UI\/UX"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2022\/04\/wireframing-tips.jpg\" alt=\"Example of Wireframes\" class=\"wp-image-2988\" width=\"538\" height=\"415\"\/><\/figure>\n\n\n\n<p>Have you ever seen a website or an app that is so good and very easy to use? But you know, the process behind a good and user friendly website or app is very long and interesting. Well, the thing is, every aspect of a good product must come from a very careful planning. the way it looks, how it\u2019s gonna be used, or how to make the interaction very easy to learn and many more. This careful planning we call it Wireframes or Wireframing.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e7317a7839b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e7317a7839b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#What_is_Wireframes\" >What is Wireframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#Why_its_Important_to_UIUX\" >Why it\u2019s Important to UI\/UX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#Before_we_Begins\" >Before we Begins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#The_Tools\" >The Tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#Is_it_worth_to_learn\" >Is it worth to learn?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_Wireframes\"><\/span>What is Wireframes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wireframe is a framework for organizing every item on a website or application page. Wireframe making is usually done before the manufacture of the product begins. it will organize such things as text, images, layouts, and so on. Wireframing is very common in the websites or technology industry, especially for UI\/UX Designers. To do this, a UI\/UX Designer uses just some paper or special software for wireframing. Wireframes only display sheets consisting of boxes and lines to arrange the layout of various elements on a website or application.<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Why_its_Important_to_UIUX\"><\/span>Why it\u2019s Important to UI\/UX<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wireframe allows a developer to easily work on the development of the structure and direction of the website or application to be built. Just imagine that without this concept, developers might get confused when the website or application is finished. However, after checking that they did not create a wireframe first, there were many revisions in each view. So that the work can slow down time, while the project deadline must be completed immediately. Cause time is money baby.<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Before_we_Begins\"><\/span>Before we Begins<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When we build a web page or application, of course there are several considerations and mandatory things that you need to know. These considerations include:<\/p>\n\n\n\n<ul><li>Pages must adapt to the website or application as a whole.<\/li><li>Content such as text, images, videos, etc., must fulfill the purpose and can be conveyed to the user well.<\/li><li>Elements in each body, links, and widgets must relate to other elements.<\/li><\/ul>\n\n\n\n<p>Wireframes also needs to explain such things as: <\/p>\n\n\n\n<ul><li>What is the content on the website or application page?<\/li><li>What is the most important content to take precedence and should stand out?<\/li><li>Where will the user be directed?<\/li><li>How do users move around the page?<\/li><li>How is the content organized through the pages?<\/li><\/ul>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"The_Tools\"><\/span>The Tools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Well, if you like to do it with your hand, maybe sketching on a piece of paper would be nice, and it\u2019s a quick way to make the sketch without waiting for the hardware first. But, If you are interested in making wireframes using software or applications, there are several recommended tools for you. These include <a href=\"http:\/\/figma.com\">Figma<\/a>, Zeppelin, Cacoo, Jumpchart, Gliffy, Adobe Illustrator, and Mockflow Whimsical. From these tools, there are toolsets and additional features that really help you in working on a design concept. With the features inside those apps, you will take your wireframing to the next level.<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Is_it_worth_to_learn\"><\/span>Is it worth to learn?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This kind of skill is not hard to learn, but it\u2019s not that easy to. You have to be a very careful and considerate person to make such a nice plan in wireframing. So, if you have all that things inside you, and you want to be great UI\/UX designer, this is one hell of a chance to level up your skill.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever seen a website or an app that is so good and very easy to use? But you know, the process behind a good and user friendly website or app is very long and interesting. Well, the thing is, every aspect of a good product must come from a very careful planning. the&#8230;<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,282,124,10,1],"tags":[28,30,95,31,72,70,343],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wireframes in UI\/UX - Sagara Asia Blog<\/title>\n<meta name=\"description\" content=\"Learn the way how a website or application is very good looking and easy to use - Sagara Asia Blog Wireframes in UI\/UX\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Wireframes in UI\/UX - Sagara Asia Blog\" \/>\n<meta name=\"twitter:description\" content=\"Learn the way how a website or application is very good looking and easy to use - Sagara Asia Blog Wireframes in UI\/UX\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2022\/04\/wireframing-tips.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Wisnu Aji Panangkar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframes in UI\/UX - Sagara Asia Blog","description":"Learn the way how a website or application is very good looking and easy to use - Sagara Asia Blog Wireframes in UI\/UX","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/","twitter_card":"summary_large_image","twitter_title":"Wireframes in UI\/UX - Sagara Asia Blog","twitter_description":"Learn the way how a website or application is very good looking and easy to use - Sagara Asia Blog Wireframes in UI\/UX","twitter_image":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2022\/04\/wireframing-tips.jpg","twitter_misc":{"Written by":"Wisnu Aji Panangkar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#article","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/"},"author":{"name":"Wisnu Aji Panangkar","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/c81100054c175471fe88ff521a0964a3"},"headline":"Wireframes in UI\/UX","datePublished":"2022-04-11T22:50:35+00:00","dateModified":"2022-04-11T22:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/"},"wordCount":563,"commentCount":0,"publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"keywords":["Design","Design System","Design Thinking","UI","Ui And Ux Design","UX Design","Wireframes"],"articleSection":["Headline","Informasi Digital","Technology","Tips teknologi"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/","url":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/","name":"Wireframes in UI\/UX - Sagara Asia Blog","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/#website"},"datePublished":"2022-04-11T22:50:35+00:00","dateModified":"2022-04-11T22:52:03+00:00","description":"Learn the way how a website or application is very good looking and easy to use - Sagara Asia Blog Wireframes in UI\/UX","breadcrumb":{"@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sagaratechnology.com\/blog\/wireframes-in-ui-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sagaratechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Headline","item":"https:\/\/sagaratechnology.com\/blog\/category\/headline\/"},{"@type":"ListItem","position":3,"name":"Wireframes in UI\/UX"}]},{"@type":"WebSite","@id":"https:\/\/sagaratechnology.com\/blog\/#website","url":"https:\/\/sagaratechnology.com\/blog\/","name":"Sagara Asia Blog","description":"Dapatkan Informasi Seputar Teknologi dan Bisnis","publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sagaratechnology.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sagaratechnology.com\/blog\/#organization","name":"Sagara Technology","url":"https:\/\/sagaratechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","contentUrl":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","width":200,"height":200,"caption":"Sagara Technology"},"image":{"@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/sagara-asia\/"]},{"@type":"Person","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/c81100054c175471fe88ff521a0964a3","name":"Wisnu Aji Panangkar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8044be80db5dbabd7d6537d73a5db330?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8044be80db5dbabd7d6537d73a5db330?s=96&d=mm&r=g","caption":"Wisnu Aji Panangkar"},"sameAs":["dazzakah"]}]}},"_links":{"self":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/2987"}],"collection":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=2987"}],"version-history":[{"count":1,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/2987\/revisions"}],"predecessor-version":[{"id":2989,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/2987\/revisions\/2989"}],"wp:attachment":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=2987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=2987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=2987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}