{"id":8246,"date":"2023-08-24T19:34:50","date_gmt":"2023-08-24T19:34:50","guid":{"rendered":"https:\/\/www.gmedia.la\/en\/?p=8246"},"modified":"2023-08-24T19:47:03","modified_gmt":"2023-08-24T19:47:03","slug":"wireframes-and-mockups-a-guide-for-ux-ui-designers","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/wireframes-and-mockups-a-guide-for-ux-ui-designers\/","title":{"rendered":"Wireframes and Mockups: A Guide for UX\/UI Designers"},"content":{"rendered":"<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"What are Wireframes and Mockups?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Wireframes are simplified visual representations of a user interface, while mockups are more detailed and visual versions. Wireframes focus on layout without visual details, while mockups include colors, typography, and other visual elements.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"How to Manage Software Licensing in Wireframes and Mockups?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"To manage software licensing in wireframes and mockups, consider using open-license or Creative Commons resources when possible. Purchase software licenses for non-open resources and always check usage restrictions before downloading. Design tools like Figma, Adobe XD, and Sketch can help track license compliance.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Which Design Tools Facilitate License Compliance?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Design tools such as Figma, Adobe XD, and Sketch make it easy to track software licenses for elements used in wireframes and mockups. They offer features for managing licensed assets and collaborating in real-time.\"\n      }\n    }\n  ]\n}\n<\/script><\/p>\n<p>In the competitive world of user interface (UI) and user experience (UX) design, creating wireframes and mockups is an essential process for developing engaging apps and websites. However, it&#8217;s crucial to understand how to handle software licensing when incorporating third-party elements into your wireframes and mockups. In this comprehensive guide for UX\/UI designers, we&#8217;ll explore both creating wireframes and mockups as well as key software licensing considerations.<\/p>\n<h2><strong>What are Wireframes and Mockups?<\/strong><\/h2>\n<h3><strong>Wireframes<\/strong><\/h3>\n<p>Wireframes are simplified visual representations of a user interface. These structured sketches present the arrangement of elements on a page without focusing on visual details. They are an essential tool for planning the information architecture and navigation of a design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-7342 aligncenter\" src=\"https:\/\/blog.glajumedia.com\/wp-content\/uploads\/2023\/08\/1-500x319.webp\" alt=\"\" width=\"500\" height=\"319\" \/><\/p>\n<h3><strong>Mockups<\/strong><\/h3>\n<p>On the other hand, mockups are more detailed and visual versions of user interfaces. These include colors, typography, images, and other visual elements. Mockups provide a closer representation of the final product, making it easier to present designs to stakeholders and serving as a guide for developers during implementation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-7348 aligncenter\" src=\"https:\/\/blog.glajumedia.com\/wp-content\/uploads\/2023\/08\/maqueta-escaparate-instantaneo-sitio-web-aislado_359791-347-500x491.jpg\" alt=\"\" width=\"500\" height=\"491\" \/><\/p>\n<h2><strong>Managing the Software License in Wireframes and Mockups<\/strong><\/h2>\n<p>When working on designing wireframes and mockups, you may want to use resources like icons, images, or third-party fonts to enrich your designs. However, it is essential to consider the software licenses for these items to avoid legal issues and ensure ethical use. Here are some key guidelines:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7347 size-medium\" src=\"https:\/\/blog.glajumedia.com\/wp-content\/uploads\/2023\/08\/plantilla-web-tienda-alimentos-psd-premium_120329-43-500x500.webp\" alt=\"Wireframes and Mockups\" width=\"500\" height=\"500\" \/><\/p>\n<h3><strong>\u00a0 \u00a0 \u00a01. Use of Open License Resources<\/strong><\/h3>\n<p>It is a good practice to use resources with an open license or under Creative Commons licenses for your design projects. These licenses are usually flexible, allowing use for commercial and personal projects with minimal restrictions, such as attribution to the original author.<\/p>\n<h3>\u00a0 \u00a0 \u00a0<strong>2. Purchase of Software Licenses<\/strong><\/h3>\n<p>If you need to use resources that are not available under an open license, consider purchasing appropriate software licenses. Many websites offer premium resources, such as high-quality images or unique fonts, which can be used legally after purchasing a license.<\/p>\n<h3>\u00a0 \u00a0 \u00a0<strong>3. Check the Restrictions of Use<\/strong><\/h3>\n<p>Before downloading any resource, always check the associated usage restrictions. Some resources may be labeled &#8220;For Personal Use Only&#8221; or &#8220;Not for Commercial Use,&#8221; which could limit their applicability to specific design projects.<\/p>\n<h2><strong>Design Tools that Facilitate License Compliance<\/strong><\/h2>\n<p>Fortunately, there are design tools that make it easy to keep track of software licenses for the elements you incorporate into your wireframes and mockups:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-7345 aligncenter\" src=\"https:\/\/blog.glajumedia.com\/wp-content\/uploads\/2023\/08\/concepto-paginas-aterrizaje-veterinarias_23-2148451973-500x240.webp\" alt=\"\" width=\"500\" height=\"240\" \/><\/p>\n<ul>\n<li><strong>Figma:<\/strong> Figma enables real-time collaboration and provides access to libraries of shared resources, making it easy to manage licensed assets.<\/li>\n<li><strong>Adobe XD:<\/strong> This tool offers integration with resource libraries and allows you to tag assets with detailed license information.<\/li>\n<li><strong>Sketch:<\/strong> Through plugins, Sketch allows efficient tracking of the licenses of the resources used in your designs<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>The creation of wireframes and mockups is a fundamental part of the UX\/UI design process. However, it is essential to properly address the software license when incorporating third party elements into these designs. Use openly licensed resources whenever possible, purchase licenses when necessary, and check usage restrictions. Plus, take advantage of design tools that make it easy to comply with these licenses.<\/p>\n<p>If you&#8217;re looking for the perfect team to help you build an effective website, we&#8217;re here to help. Also, <a href=\"https:\/\/www.gmedia.la\/en\/contact\/\">Contact us<\/a> today to get more information about our <a href=\"https:\/\/www.gmedia.la\/en\/shopify-development\/\">Virtual Store Design<\/a> services.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Find out how to create effective wireframes and mockups in UX\/UI design and manage software licenses. This essential guide for designers addresses ethical and legal design in the digital world, providing key tips to ensure success.<\/p>\n","protected":false},"author":1,"featured_media":8250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[44,17],"tags":[118,74,75,108,294,94,249,301,46,47,61,50,96],"class_list":["post-8246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-uxui","category-web-design","tag-app-development","tag-ecommerce","tag-ecommerce-business","tag-ecommerce-web-development","tag-it-outsourcing","tag-seo","tag-staff-augmentation","tag-strategies-for-ux-desing","tag-ui-and-ux","tag-ui-design","tag-ux","tag-ux-design","tag-web-design-peru"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/8246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=8246"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/8246\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/8250"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=8246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=8246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=8246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}