{"id":1990,"date":"2020-08-07T12:02:19","date_gmt":"2020-08-07T12:02:19","guid":{"rendered":"https:\/\/www.strivemindz.com\/blog\/?p=1990"},"modified":"2024-02-28T14:02:48","modified_gmt":"2024-02-28T14:02:48","slug":"looking-to-create-a-mobile-application","status":"publish","type":"post","link":"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/","title":{"rendered":"UI\/UX Design Principles: Understanding the Key Differences"},"content":{"rendered":"<p class=\"pb-2 min-w-[1px]\" data-private=\"redact\" data-wt-guid=\"368a5a03-70e9-46f9-905d-feeb266b06d3\" data-pm-slice=\"1 1 []\">UI\/UX <span class=\"issue-underline underline decoration-2 underline-offset-4 transition decoration-border-danger-default [.long-form-editing-active_&amp;]:decoration-border-danger-default\/50 hover:bg-bg-danger-light-default\" data-issueid=\"12f7e82d-ee0a-4441-a8f9-66202aea3eeb\" aria-label=\"open issue for the following text Design\" data-testid=\"issue-underline:design\">Design<\/span> requires creativity and <span class=\"issue-underline underline decoration-2 underline-offset-4 transition decoration-border-brand-default [.long-form-editing-active_&amp;]:decoration-border-brand-default\/50 hover:bg-bg-brand-light-default\" data-issueid=\"8427dc36-079c-4100-a8fe-43e8540016fb\" aria-label=\"open issue for the following text is dynamic.\" data-testid=\"issue-underline:undefined\">is dynamic.<\/span> Even with these constant changes, <span class=\"issue-underline underline decoration-2 underline-offset-4 transition decoration-border-brand-default [.long-form-editing-active_&amp;]:decoration-border-brand-default\/50 hover:bg-bg-brand-light-default\" data-issueid=\"50482228-0341-4511-afd5-b0e9e4286561\" aria-label=\"open issue for the following text there are fundamental principles that every designer should understand.\" data-testid=\"issue-underline:undefined\">there are fundamental principles that every designer should understand.<\/span> The principles <span class=\"issue-underline underline decoration-2 underline-offset-4 transition decoration-border-brand-default [.long-form-editing-active_&amp;]:decoration-border-brand-default\/50 hover:bg-bg-brand-light-default\" data-issueid=\"9c3a8ca2-1e53-4767-9293-2dfa843db54d\" aria-label=\"open issue for the following text are concepts that\" data-testid=\"issue-underline:undefined\">are concepts that<\/span> guide the design of software products. Creating designs that are aesthetically pleasing, easy to understand, and usable requires alignment with these principles.<\/p>\n<p>I know most of you want to jump straight to the design without wasting a moment but I would recommend you brush up on the theory before diving into the practice because being aware of the <strong>UI\/UX design<\/strong> principles is crucial.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_77 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<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:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#What_is_UIUX_Design\" >What is UI\/UX Design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#What_Exactly_is_The_UIUX_Design_Principles\" >What Exactly is The UI\/UX Design Principles?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#A_Comprehensive_Guide_to_UIUX_Design_Principles_Understanding_the_Key_Differences\" >A Comprehensive Guide to UI\/UX Design Principles: Understanding the Key Differences<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#UI_Design_Principles\" >UI Design Principles<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Examples\" >Examples:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#UX_Design_Principles\" >UX Design Principles<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Examples-2\" >Examples:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Comparison_of_UI_and_UX_Design_Principles\" >Comparison of UI and UX Design Principles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Case_Studies\" >Case Studies<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#UI_Design_Principles_in_a_Popular_Music_Streaming_App\" >UI Design Principles in a Popular Music Streaming App<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Applying_UI_Design_Principles\" >Applying UI Design Principles:<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#1_Consistency\" >1. Consistency:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#2_Clarity\" >2. Clarity:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#3_Familiarity\" >3. Familiarity:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#4_Responsiveness\" >4. Responsiveness:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#5_Simplicity\" >5. Simplicity:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Results\" >Results:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#UX_Design_Principles_in_a_Website_Redesign_Project\" >UX Design Principles in a Website Redesign Project<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Applying_UX_Design_Principles\" >Applying UX Design Principles:<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#1_User-Centered_Design\" >1. User-Centered Design:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#2_Usability\" >2. Usability:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#3_Accessibility\" >3. Accessibility:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#4_Information_Architecture\" >4. Information Architecture:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#5_Interaction_Design\" >5. Interaction Design:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Results-2\" >Results:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Recap\" >Recap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Importance_of_Understanding_and_Applying_These_Principles\" >Importance of Understanding and Applying These Principles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#The_Building_of_a_Mobile_Application\" >The Building of a Mobile Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#A_Key_Tip_for_UIUX_Design\" >A Key Tip for UI\/UX Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/#Final_Thoughts_Synergy_of_UI_and_UX_Design_Principles\" >Final Thoughts: Synergy of UI and UX Design Principles<\/a><\/li><\/ul><\/nav><\/div>\n<h2 data-sourcepos=\"1:1-1:118\"><span class=\"ez-toc-section\" id=\"What_is_UIUX_Design\"><\/span>What is UI\/UX Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"1:1-1:118\">UI\/UX design is the <strong>combined practice of designing the user interface (UI) and user experience (UX)<\/strong> of a product.<\/p>\n<p data-sourcepos=\"3:1-3:112\"><strong>UI design<\/strong> focuses on the <strong>visual elements and functionalities<\/strong> that users directly interact with, such as:<\/p>\n<ul data-sourcepos=\"5:1-11:0\">\n<li data-sourcepos=\"5:1-5:9\">Buttons<\/li>\n<li data-sourcepos=\"6:1-6:9\">Layouts<\/li>\n<li data-sourcepos=\"7:1-7:15\">Color schemes<\/li>\n<li data-sourcepos=\"8:1-8:12\">Typography<\/li>\n<li data-sourcepos=\"9:1-9:8\">Images<\/li>\n<li data-sourcepos=\"10:1-11:0\">Interactions<\/li>\n<\/ul>\n<p data-sourcepos=\"12:1-12:154\"><strong>UX design<\/strong> delves deeper, focusing on the <strong>overall user journey<\/strong> and how users <strong>feel<\/strong> as they interact with a product. It encompasses aspects like:<\/p>\n<ul data-sourcepos=\"14:1-19:0\">\n<li data-sourcepos=\"14:1-14:70\"><strong>User research:<\/strong>\u00a0Understanding user needs, goals, and pain points.<\/li>\n<li data-sourcepos=\"15:1-15:86\"><strong>Information architecture:<\/strong>\u00a0Structuring content in a logical and easy-to-find way.<\/li>\n<li data-sourcepos=\"16:1-16:69\"><strong>Usability:<\/strong>\u00a0Ensuring the interface is intuitive and easy to use.<\/li>\n<li data-sourcepos=\"17:1-17:86\"><strong>Accessibility:<\/strong>\u00a0Designing interfaces usable by everyone, regardless of abilities.<\/li>\n<li data-sourcepos=\"18:1-19:0\"><strong>Interaction design:<\/strong>\u00a0Defining how users interact with the interface for a smooth and engaging experience.<\/li>\n<\/ul>\n<p data-sourcepos=\"20:1-20:44\">Think of <a href=\"https:\/\/www.strivemindz.com\/ui-ux-design-service\" target=\"_blank\" rel=\"noopener\">UI\/UX design<\/a> like building a house:<\/p>\n<ul data-sourcepos=\"22:1-24:0\">\n<li data-sourcepos=\"22:1-22:152\"><strong>UI design<\/strong>\u00a0is like\u00a0<strong>interior decorating<\/strong>. It focuses on the aesthetics and functionality of the space, ensuring it looks good and functions well.<\/li>\n<li data-sourcepos=\"23:1-24:0\"><strong>UX design<\/strong>\u00a0is like\u00a0<strong>architectural planning<\/strong>. It focuses on the overall layout, flow, and functionality of the house, ensuring it meets the needs and expectations of those who will live in it.<\/li>\n<\/ul>\n<p data-sourcepos=\"25:1-25:340\"><strong>Effective UI\/UX design<\/strong> requires both disciplines to work together seamlessly. A visually appealing and well-designed interface (UI) is meaningless if it&#8217;s difficult to use or doesn&#8217;t meet user needs (UX). Conversely, a well-structured and user-friendly experience (UX) won&#8217;t be effective if the interface is cluttered or confusing (UI).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_Exactly_is_The_UIUX_Design_Principles\"><\/span>What Exactly is The UI\/UX Design Principles?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"1:1-1:334\">UI\/UX design principles are <strong>guiding rules<\/strong> that help designers create user interfaces (UI) and user experiences (UX) that are <strong>intuitive, efficient, and enjoyable<\/strong> for users. These principles apply to <strong>all types of digital products<\/strong>, from websites and mobile apps to software and even physical products with digital interfaces.<\/p>\n<p data-sourcepos=\"1:1-1:334\">Here are UI\/UX design principles to prepare you for designing lasting designs.<\/p>\n<h2 data-sourcepos=\"1:1-1:86\"><span class=\"ez-toc-section\" id=\"A_Comprehensive_Guide_to_UIUX_Design_Principles_Understanding_the_Key_Differences\"><\/span>A Comprehensive Guide to UI\/UX Design Principles: Understanding the Key Differences<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"5:1-5:441\">In today&#8217;s digital world, where we interact with countless applications and websites on a daily basis, the design of these interfaces plays a crucial role in shaping our experience. Two fundamental aspects come into play: User Interface (UI) and User Experience (UX) design. While often used interchangeably, understanding the distinct roles and principles of each is essential for creating truly engaging and user-friendly digital products.<\/p>\n<p data-sourcepos=\"7:1-7:348\">This comprehensive guide dives into the realm of UI\/UX design principles, exploring their definitions, core concepts, and how they differ. Additionally, real-world examples and case studies will illustrate the practical application of these principles, equipping you with a deeper understanding of their significant impact on the digital landscape.<\/p>\n<h3 data-sourcepos=\"9:1-9:24\"><span class=\"ez-toc-section\" id=\"UI_Design_Principles\"><\/span>UI Design Principles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-sourcepos=\"11:1-11:223\">UI design focuses on the visual elements and functionalities that users directly interact with. It encompasses everything from the layout and color scheme to the placement of buttons and text. Effective UI design should be:<\/p>\n<ul data-sourcepos=\"13:1-18:0\">\n<li data-sourcepos=\"13:1-13:159\"><strong>Consistent:<\/strong>\u00a0Users should encounter familiar layouts and interactions throughout the interface, ensuring a sense of predictability and ease of navigation.<\/li>\n<li data-sourcepos=\"14:1-14:117\"><strong>Clear:<\/strong>\u00a0Elements should be visually distinct and self-explanatory, minimizing user confusion and cognitive load.<\/li>\n<li data-sourcepos=\"15:1-15:142\"><strong>Familiar:<\/strong>\u00a0Leveraging familiar design patterns and conventions allows users to intuitively understand how to interact with the interface.<\/li>\n<li data-sourcepos=\"16:1-16:187\"><strong>Responsive:<\/strong>\u00a0Adapting to different screen sizes and devices is crucial in today&#8217;s diverse technological landscape. This ensures a seamless experience regardless of the platform used.<\/li>\n<li data-sourcepos=\"17:1-18:0\"><strong>Simple:<\/strong>\u00a0Prioritizing essential elements and functionalities creates a clean and uncluttered interface, fostering ease of use and focus.<\/li>\n<\/ul>\n<h4 data-sourcepos=\"19:1-19:13\"><span class=\"ez-toc-section\" id=\"Examples\"><\/span>Examples:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul data-sourcepos=\"21:1-24:0\">\n<li data-sourcepos=\"21:1-21:104\">A mobile app that maintains consistent navigation bars and button placements across different screens.<\/li>\n<li data-sourcepos=\"22:1-22:106\">An e-commerce website with clear product labels, high-quality images, and well-organized search filters.<\/li>\n<li data-sourcepos=\"23:1-24:0\">A banking app that utilizes familiar icons and intuitive gestures for actions like transfers and bill payments.<\/li>\n<\/ul>\n<h3 data-sourcepos=\"25:1-25:24\"><span class=\"ez-toc-section\" id=\"UX_Design_Principles\"><\/span>UX Design Principles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-sourcepos=\"27:1-27:156\">UX design delves deeper, focusing on the overall user journey and how users feel as they interact with a product. It encompasses various aspects, including:<\/p>\n<ul data-sourcepos=\"29:1-34:0\">\n<li data-sourcepos=\"29:1-29:160\"><strong>User-Centered Design:<\/strong>\u00a0Placing the user at the core of the design process, understanding their needs, goals, and expectations through research and testing.<\/li>\n<li data-sourcepos=\"30:1-30:138\"><strong>Usability:<\/strong>\u00a0Ensuring the interface is intuitive, easy to learn and navigate, minimizing frustration and maximizing user satisfaction.<\/li>\n<li data-sourcepos=\"31:1-31:153\"><strong>Accessibility:<\/strong>\u00a0Designing interfaces that are usable by everyone, regardless of their abilities, adhering to accessibility guidelines and standards.<\/li>\n<li data-sourcepos=\"32:1-32:178\"><strong>Information Architecture:<\/strong>\u00a0Structuring and organizing information in a logical and hierarchical manner, facilitating users in finding what they need quickly and efficiently.<\/li>\n<li data-sourcepos=\"33:1-34:0\"><strong>Interaction Design:<\/strong>\u00a0Defining how users interact with the interface, including elements like button placement and animation responses, to create a smooth and engaging experience.<\/li>\n<\/ul>\n<h4 data-sourcepos=\"35:1-35:13\"><span class=\"ez-toc-section\" id=\"Examples-2\"><\/span>Examples:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul data-sourcepos=\"37:1-40:0\">\n<li data-sourcepos=\"37:1-37:137\">A library website with a search engine optimized for natural language queries, allowing users to find books and resources effortlessly.<\/li>\n<li data-sourcepos=\"38:1-38:143\">An online learning platform with interactive tutorials, clear progress tracking, and intuitive navigation, facilitates the learning process.<\/li>\n<li data-sourcepos=\"39:1-40:0\">A mobile app that provides clear audio cues and alternative text descriptions for visually impaired users, ensuring accessibility.<\/li>\n<\/ul>\n<h2 data-sourcepos=\"41:1-41:45\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2002\" src=\"https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2020\/08\/mobils.jpg\" alt=\"Hire UX Designers in UK\" width=\"1200\" height=\"400\" title=\"\" srcset=\"https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2020\/08\/mobils.jpg 1200w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2020\/08\/mobils-300x100.jpg 300w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2020\/08\/mobils-1024x341.jpg 1024w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2020\/08\/mobils-768x256.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/h2>\n<h2 data-sourcepos=\"41:1-41:45\"><span class=\"ez-toc-section\" id=\"Comparison_of_UI_and_UX_Design_Principles\"><\/span>Comparison of UI and UX Design Principles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"43:1-43:111\">While some principles, like consistency and clarity, overlap between UI and UX, there are distinct differences:<\/p>\n<ul data-sourcepos=\"45:1-48:0\">\n<li data-sourcepos=\"45:1-45:152\"><strong>Focus:<\/strong>\u00a0UI focuses on the aesthetics and functionality of the interface, while UX focuses on the broader user journey and their overall experience.<\/li>\n<li data-sourcepos=\"46:1-46:135\"><strong>Depth:<\/strong>\u00a0UI deals with the surface elements, while UX considers the underlying structure, information hierarchy, and user emotions.<\/li>\n<li data-sourcepos=\"47:1-48:0\"><strong>Goals:<\/strong>\u00a0UI aims to create aesthetically pleasing and functional interfaces, while UX strives to create intuitive, user-centered experiences that meet user needs and goals.<\/li>\n<\/ul>\n<p data-sourcepos=\"49:1-49:372\">Despite their differences, UI and UX design principles are not isolated aspects. They work in tandem to create a seamless and engaging user experience. Effective UI design complements the principles of UX by translating them into visually appealing and functional interfaces, while strong UX design dictates the structure and flow of the interface, informing UI decisions.<\/p>\n<h2 data-sourcepos=\"51:1-51:16\"><span class=\"ez-toc-section\" id=\"Case_Studies\"><\/span>Case Studies<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 data-sourcepos=\"1:1-1:85\"><span class=\"ez-toc-section\" id=\"UI_Design_Principles_in_a_Popular_Music_Streaming_App\"><\/span>UI Design Principles in a Popular Music Streaming App<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-sourcepos=\"5:1-5:448\">A popular music streaming app, renowned for its vast music library, faces challenges in user retention and engagement due to an unintuitive and visually cluttered interface. The app features complex navigation menus, inconsistent layout elements, and unclear visual cues, leading to user frustration and difficulty in discovering and playing music. To address these issues, the app undergoes a design refresh, focusing on core UI design principles.<\/p>\n<h4 data-sourcepos=\"7:1-7:34\"><span class=\"ez-toc-section\" id=\"Applying_UI_Design_Principles\"><\/span>Applying UI Design Principles:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 data-sourcepos=\"9:3-9:18\"><span class=\"ez-toc-section\" id=\"1_Consistency\"><\/span>1. Consistency:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The app implements a consistent visual style across all screens, using the same color palette, typography, and button styles. This fosters user familiarity and reduces cognitive load while navigating the app.<\/li>\n<li>Navigation elements, such as the bottom navigation bar and search bar, maintain consistent positions across different screens, promoting predictability and ease of use.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"13:3-13:14\"><span class=\"ez-toc-section\" id=\"2_Clarity\"><\/span>2. Clarity:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The app minimizes visual clutter and prioritizes clear and concise information presentation.<\/li>\n<li>Album covers and artist names are displayed prominently, using easy-to-read fonts and contrasting colors.<\/li>\n<li>Icons representing functionalities are visually distinct and readily recognizable, ensuring users intuitively understand their purpose.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"18:3-18:18\"><span class=\"ez-toc-section\" id=\"3_Familiarity\"><\/span>3. Familiarity:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The app leverages familiar design patterns commonly found in music streaming apps.<\/li>\n<li>The &#8220;play&#8221; and &#8220;pause&#8221; buttons use universally recognized symbols, reducing the need for user learning.<\/li>\n<li>Swipe gestures for navigating playlists and adjusting volume follow established conventions, allowing users to interact intuitively without explicit instructions.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"23:3-23:21\"><span class=\"ez-toc-section\" id=\"4_Responsiveness\"><\/span>4. Responsiveness:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The app&#8217;s layout adapts seamlessly to different screen sizes and devices, ensuring a consistent and optimized experience on phones, tablets, and even smart TVs.<\/li>\n<li>The user interface elements automatically adjust their size and positioning to fit the available screen space, maintaining readability and functionality across various platforms.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"27:3-27:17\"><span class=\"ez-toc-section\" id=\"5_Simplicity\"><\/span>5. Simplicity:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The app prioritizes essential functionalities and avoids unnecessary features that might overwhelm users.<\/li>\n<li>The homepage focuses on displaying prominently accessed features like recently played songs, personalized recommendations, and curated playlists.<\/li>\n<li>Complex settings options are organized logically and categorized, allowing users to find specific settings without excessive navigation.<\/li>\n<\/ul>\n<h4 data-sourcepos=\"32:1-32:12\"><span class=\"ez-toc-section\" id=\"Results\"><\/span>Results:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul data-sourcepos=\"34:1-37:0\">\n<li data-sourcepos=\"34:1-34:285\"><strong>Improved user engagement and retention:<\/strong>\u00a0The redesigned app experiences a significant increase in user engagement, with users spending more time browsing music and creating playlists. Retention rates also improve as users find the app easier to navigate and more enjoyable to use.<\/li>\n<li data-sourcepos=\"35:1-35:214\"><strong>Increased discoverability of music:<\/strong>\u00a0The clear presentation of album covers and artist names, along with categorized browsing options, make it easier for users to discover new music based on their preferences.<\/li>\n<li data-sourcepos=\"36:1-37:0\"><strong>Enhanced brand image:<\/strong>\u00a0The modern and visually appealing interface reinforces the app&#8217;s image as a user-friendly and innovative platform, attracting new users and fostering brand loyalty.<\/li>\n<\/ul>\n<p data-sourcepos=\"40:1-40:386\">This case study illustrates the power of applying UI design principles in creating a mobile app that is not only functional but also visually appealing and user-friendly. By focusing on consistency, clarity, familiarity, responsiveness, and simplicity, the music streaming app successfully enhanced its user experience, leading to increased engagement, retention, and brand recognition.<\/p>\n<h3 data-sourcepos=\"1:1-1:82\"><a href=\"https:\/\/www.strivemindz.com\/contact-us\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6215\" src=\"https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-scaled.jpg\" alt=\"clone app development cta\" width=\"2560\" height=\"690\" title=\"\" srcset=\"https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-scaled.jpg 2048w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-300x81.jpg 300w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-1024x276.jpg 1024w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-768x207.jpg 768w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-1536x414.jpg 1536w, https:\/\/www.strivemindz.com\/blog\/wp-content\/uploads\/2024\/02\/clone-app-development-cta-1568x423.jpg 1568w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><\/h3>\n<h3 data-sourcepos=\"1:1-1:82\"><span class=\"ez-toc-section\" id=\"UX_Design_Principles_in_a_Website_Redesign_Project\"><\/span>UX Design Principles in a Website Redesign Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-sourcepos=\"5:1-5:429\">A university website, renowned for its academic excellence, struggles to attract and retain potential students due to its outdated and confusing design. The website features cluttered navigation menus, inconsistent information hierarchy, and inaccessible content formats, hindering user experience. To address these shortcomings, the university undertakes a website redesign project, focusing on the core principles of UX design.<\/p>\n<h4 data-sourcepos=\"7:1-7:34\"><span class=\"ez-toc-section\" id=\"Applying_UX_Design_Principles\"><\/span>Applying UX Design Principles:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 data-sourcepos=\"9:3-9:28\"><span class=\"ez-toc-section\" id=\"1_User-Centered_Design\"><\/span>1. User-Centered Design:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The project begins with extensive user research, including interviews, surveys, and usability testing with prospective students, current students, and faculty. This research helps identify user needs, pain points, and expectations.<\/li>\n<li>Based on the research findings, user personas are developed, representing the different groups of users and their unique needs.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"13:3-13:17\"><span class=\"ez-toc-section\" id=\"2_Usability\"><\/span>2. Usability:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The new website prioritizes a user-friendly interface with clear and concise navigation menus.<\/li>\n<li>Important information, such as admission requirements and scholarship opportunities, are easily accessible from the homepage.<\/li>\n<li>Search functionality is enhanced, allowing users to find specific information quickly and efficiently.<\/li>\n<\/ul>\n<h5 data-sourcepos=\"18:3-18:21\"><span class=\"ez-toc-section\" id=\"3_Accessibility\"><\/span>3. Accessibility:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>The website adheres to accessibility guidelines, ensuring it&#8217;s usable by individuals with disabilities. Features include:<\/p>\n<ul>\n<li>Proper use of alternative text descriptions for images<\/li>\n<li>Consistent and readable font sizes and color contrasts<\/li>\n<li>Keyboard navigation functionalities<\/li>\n<li>Compatibility with screen readers<\/li>\n<\/ul>\n<h5 data-sourcepos=\"25:3-25:32\"><span class=\"ez-toc-section\" id=\"4_Information_Architecture\"><\/span>4. Information Architecture:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul data-sourcepos=\"26:5-28:0\">\n<li data-sourcepos=\"26:5-26:157\">The website information is reorganized into a logical and hierarchical structure, making it easy for users to navigate and find the content they need.<\/li>\n<li data-sourcepos=\"27:5-28:0\">Clear category labels, breadcrumbs, and internal linking facilitate efficient navigation between different sections of the website.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5 data-sourcepos=\"29:3-29:26\"><span class=\"ez-toc-section\" id=\"5_Interaction_Design\"><\/span>5. Interaction Design:<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>The website incorporates interactive elements, such as clear calls to action (CTAs) and engaging multimedia content, to encourage user engagement and exploration.<\/li>\n<li>Animations and transitions are implemented subtly to enhance user experience without being disruptive.<\/li>\n<\/ul>\n<h4 data-sourcepos=\"33:1-33:12\"><span class=\"ez-toc-section\" id=\"Results-2\"><\/span>Results:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul data-sourcepos=\"35:1-38:0\">\n<li data-sourcepos=\"35:1-35:187\"><strong>Increased user satisfaction and engagement:<\/strong>\u00a0The redesigned website receives positive feedback from users, with improved satisfaction ratings and increased time spent on the website.<\/li>\n<li data-sourcepos=\"36:1-36:163\"><strong>Enhanced accessibility:<\/strong>\u00a0The website becomes accessible to a wider audience, fostering inclusivity and aligning with the university&#8217;s commitment to diversity.<\/li>\n<li data-sourcepos=\"37:1-38:0\"><strong>Improved brand image:<\/strong>\u00a0The modern and user-friendly website reflects the university&#8217;s commitment to innovation and student success, attracting potential students and strengthening its brand image.<\/li>\n<\/ul>\n<p data-sourcepos=\"41:1-41:380\">This case study demonstrates how effectively applying UX design principles can transform a website and achieve significant positive outcomes. By prioritizing user needs, usability, accessibility, and information architecture, the university successfully created a website that fosters a positive user experience, enhances its brand image, and contributes to its long-term success.<\/p>\n<p data-sourcepos=\"3:1-3:421\">This comprehensive guide has explored the essential principles of UI and UX design, highlighting their unique roles and how they work together to create exceptional user experiences. By understanding these principles and applying them effectively, developers and designers can create engaging digital products that not only look good but also meet the needs and expectations of users in a delightful and intuitive manner.<\/p>\n<h2 data-sourcepos=\"5:1-5:9\"><span class=\"ez-toc-section\" id=\"Recap\"><\/span>Recap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"7:1-7:66\">This guide has provided a comprehensive overview of the following:<\/p>\n<ul data-sourcepos=\"9:1-14:0\">\n<li data-sourcepos=\"9:1-9:75\">Definitions and roles of UI and UX design in digital product development.<\/li>\n<li data-sourcepos=\"10:1-10:94\">Key UI design principles: Consistency, Clarity, Familiarity, Responsiveness, and Simplicity.<\/li>\n<li data-sourcepos=\"11:1-11:125\">Key UX design principles: User-Centered Design, Usability, Accessibility, Information Architecture, and Interaction Design.<\/li>\n<li data-sourcepos=\"12:1-12:63\">Real-world examples of UI and UX design principles in action.<\/li>\n<li data-sourcepos=\"13:1-14:0\">Case studies showcasing the practical application of these principles.<\/li>\n<\/ul>\n<blockquote>\n<p data-sourcepos=\"15:1-15:61\">Read more: <a href=\"https:\/\/www.linkedin.com\/pulse\/top-benefits-outsourcing-software-development-strivemindz-9b7oc\" target=\"_blank\" rel=\"noopener\">Benefits of Outsourcing Software Development<\/a><\/p>\n<\/blockquote>\n<h2 data-sourcepos=\"15:1-15:61\"><span class=\"ez-toc-section\" id=\"Importance_of_Understanding_and_Applying_These_Principles\"><\/span>Importance of Understanding and Applying These Principles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"17:1-17:132\">By understanding and applying UI\/UX design principles, individuals involved in creating digital products can reap numerous benefits:<\/p>\n<ul data-sourcepos=\"19:1-23:0\">\n<li data-sourcepos=\"19:1-19:167\"><strong>Improved user engagement and satisfaction:<\/strong>\u00a0Well-designed interfaces lead to a smoother user journey, promoting positive interactions and fostering brand loyalty.<\/li>\n<li data-sourcepos=\"20:1-20:144\"><strong>Increased efficiency and productivity:<\/strong>\u00a0Intuitive interfaces allow users to complete tasks quickly and efficiently, saving time and effort.<\/li>\n<li data-sourcepos=\"21:1-21:169\"><strong>Reduced development costs:<\/strong>\u00a0Implementing these principles from the outset can minimize the need for costly redesigns and revisions later in the development process.<\/li>\n<li data-sourcepos=\"22:1-23:0\"><strong>Enhanced accessibility and inclusivity:<\/strong>\u00a0By adhering to accessibility guidelines, products cater to a broader user base and promote inclusivity.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"The_Building_of_a_Mobile_Application\"><\/span>The Building of a Mobile Application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started, sketch out the various functionalities your application is supposed to have, once you finalize this, we will start breathing life into them.<\/p>\n<p>The first thing we need is a simple flowchart so we can understand how the user will make their way through the application. This will also help us in getting a better understanding of how the different screens of our app interact with each other and thus we can start bringing them to life.<\/p>\n<p>The next thing we will need to do is to ensure that the user allows us to send push notifications, this is how we will inform them about the updates. You can just overlay the notification bubble on top of instructions which will explain to them why they need to enable the notifications.<\/p>\n<p>When a new user launches the app, the first thing we\u2019ll show them is a screen that explains why weed permissions to push notifications to them. Now that we have a clear idea, we\u2019ll fire up Sketch, select the Artboard tool (A), and use the iPhone 6 preset in the inspector panel to the right. To add common iOS elements like the status bar, we\u2019ll head to File &gt;&gt; New From Template &gt;&gt; <strong>iOS UI Design<\/strong>. Once you are done designing, every time a user hits enable notification, the native permission dialogue box will be triggered.<\/p>\n<p>Once you are done with the push notifications, we will now be talking about the home screen. Yes, it is essential to give the user a basic walkthrough and explain some of the mechanics of the app, but we\u2019ll save that for another day. However, if we just stick to the common user interface design principles, we may not need a walkthrough at all, the app should be intuitive enough.<\/p>\n<p>The basic features we will be needing on the home screen are:<\/p>\n<ul>\n<li>If it is a gaming app, show their stats nice and big at the top of the home screen.<\/li>\n<li>Below the stats, show their progress and levels that are yet to be unlocked, this will entice the user to unlock them every time they visit the home screen.<\/li>\n<li>Your app needs to be very visual so try and incorporate relevant and attractive photographs on each page.<\/li>\n<li>Since this is your home screen it should enable the user to access everything from here, be it user settings.<\/li>\n<\/ul>\n<p>Now like before you need to fire up Sketch and start designing the elements of our home screen. Most of the work has already been done, so it\u2019s just a matter of putting each element where it belongs and adding a splash of colour. With the home screen complete, the user will have a place to track their overall progress and tweak their user settings. Excellent!<\/p>\n<p>We\u2019ve talked about the design of the home screen and push notifications, and it will work similarly for every other screen of the application. As always you will have to start by laying out the basic idea and then by firing up Sketch to place all of these UI elements.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"A_Key_Tip_for_UIUX_Design\"><\/span>A Key Tip for UI\/UX Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"3:1-3:340\">The vast majority of mobile app interactions happen using <strong>thumbs<\/strong>, not fingers. This is due to how we naturally hold our phones, with our thumbs reaching comfortably across most of the lower half of the screen. Understanding this user behavior is crucial for designing mobile app interfaces that are both <strong>intuitive and user-friendly<\/strong>.<\/p>\n<p data-sourcepos=\"5:1-5:55\">Here&#8217;s why prioritizing the thumb zone is so important:<\/p>\n<ul data-sourcepos=\"7:1-10:0\">\n<li data-sourcepos=\"7:1-7:201\"><strong>Reachability:<\/strong>\u00a0Placing essential buttons, menus, and navigation elements within the thumb zone makes them easily accessible, minimizing awkward hand stretches and promoting one-handed interaction.<\/li>\n<li data-sourcepos=\"8:1-8:171\"><strong>Reduced cognitive load:<\/strong>\u00a0Users don&#8217;t need to contort their hands or shift their grip to reach important features, leading to a smoother and more intuitive experience.<\/li>\n<li data-sourcepos=\"9:1-10:0\"><strong>Improved usability:<\/strong>\u00a0By keeping key functionalities readily accessible, users can complete tasks efficiently and avoid frustration caused by poorly placed elements.<\/li>\n<\/ul>\n<p data-sourcepos=\"11:1-11:75\"><strong>Here&#8217;s how you can prioritize the thumb zone in your mobile app design:<\/strong><\/p>\n<ul data-sourcepos=\"13:1-17:0\">\n<li data-sourcepos=\"13:1-13:149\"><strong>Place core actions and primary buttons within the thumb zone.<\/strong>\u00a0This includes functions like &#8220;add to cart,&#8221; &#8220;search,&#8221; &#8220;submit,&#8221; and back buttons.<\/li>\n<li data-sourcepos=\"14:1-14:201\"><strong>Avoid placing critical information or interactive elements near the top or bottom edges of the screen.<\/strong>\u00a0This forces users to stretch their thumbs or shift their grip, making interaction difficult.<\/li>\n<li data-sourcepos=\"15:1-15:172\"><strong>Consider using larger touch areas for important buttons and menus.<\/strong>\u00a0This reduces the risk of accidental taps and improves user accuracy, especially on smaller screens.<\/li>\n<li data-sourcepos=\"16:1-17:0\"><strong>Utilize swipe gestures for secondary actions or navigation, but ensure they don&#8217;t conflict with primary functionalities.<\/strong><\/li>\n<\/ul>\n<p data-sourcepos=\"18:1-18:275\">By incorporating these tips and prioritizing the thumb zone in your mobile app design, you can create a more <strong>natural, intuitive, and enjoyable user experience<\/strong> for your users. Remember, it&#8217;s all about <strong>aligning your design with the way people use their phones<\/strong>.<\/p>\n<h2 data-sourcepos=\"24:1-24:58\"><span class=\"ez-toc-section\" id=\"Final_Thoughts_Synergy_of_UI_and_UX_Design_Principles\"><\/span>Final Thoughts: Synergy of UI and UX Design Principles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-sourcepos=\"26:1-26:598\">In conclusion, UI\/UX design principles are not individual entities but work in harmonious synergy. While UI focuses on the visual appeal and functionality of the interface, UX delves deeper into the user experience, ensuring intuitiveness and meeting user needs. This powerful combination enables the creation of digital products that are not only aesthetically pleasing but also user-centered, engaging, and accessible. By embracing these principles and fostering collaboration between UI and UX designers, we can continue to shape the future of user-centric and impactful digital experiences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UI\/UX Design requires creativity and is dynamic. Even with these constant changes, there are fundamental principles that every designer should understand. The principles are concepts that guide the design of software products. Creating designs that are aesthetically pleasing, easy to understand, and usable requires alignment with these principles. I know most of you want to&hellip; <a class=\"more-link\" href=\"https:\/\/www.strivemindz.com\/blog\/looking-to-create-a-mobile-application\/\">Continue reading <span class=\"screen-reader-text\">UI\/UX Design Principles: Understanding the Key Differences<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":6354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[41,43,382],"class_list":["post-1990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux-design","tag-mobile-app-ui-ux-design","tag-ui-ux-design","tag-ui-ux-design-principles","entry"],"_links":{"self":[{"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/posts\/1990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/comments?post=1990"}],"version-history":[{"count":7,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/posts\/1990\/revisions"}],"predecessor-version":[{"id":6356,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/posts\/1990\/revisions\/6356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/media\/6354"}],"wp:attachment":[{"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/media?parent=1990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/categories?post=1990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strivemindz.com\/blog\/wp-json\/wp\/v2\/tags?post=1990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}