{"id":12187,"date":"2025-05-02T11:17:48","date_gmt":"2025-05-02T09:17:48","guid":{"rendered":"https:\/\/wwwarcelona.com\/uncategorized\/guia-dux-ui-per-a-aplicacions-mobil\/"},"modified":"2025-06-18T12:30:34","modified_gmt":"2025-06-18T10:30:34","slug":"guia-dux-ui-per-a-aplicacions-mobil","status":"publish","type":"post","link":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/","title":{"rendered":"UX\/UI guide for mobile applications"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12187\" class=\"elementor elementor-12187 elementor-11420\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0279230 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0279230\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-60a3348\" data-id=\"60a3348\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-167fd9a elementor-widget elementor-widget-spacer\" data-id=\"167fd9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-701d5bb\" data-id=\"701d5bb\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d73890b elementor-widget elementor-widget-heading\" data-id=\"d73890b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">UX\/UI guide for mobile applications<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7331096 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7331096\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8013e68 elementor-widget elementor-widget-text-editor\" data-id=\"8013e68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">UX\/UI design for mobile applications ensures that a mobile application is intuitive, visually pleasing, and functional. In fact, this does not happen by accident.   <\/span><span style=\"font-weight: 400;\">Thus, user experience design (UX) and user interface design (UI) work together to achieve user-centered and efficiency-oriented digital products.<\/span><\/p><p><span style=\"font-weight: 400;\">Currently, with increasing competition in the digital world, companies need more than ever<\/span> <b>to differentiate themselves through user experience.<\/b><span style=\"font-weight: 400;\">. For this reason, platforms like wwwarcelona.com offer branding and <a href=\"https:\/\/wwwarcelona.com\/en\/web-design\/\">digital design solutions where UX\/UI<\/a> is the essential pillar for connecting brands with users.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2cbb1b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2cbb1b4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-890a704\" data-id=\"890a704\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f776167 blog-index elementor-toc--minimized-on-desktop elementor-widget elementor-widget-table-of-contents\" data-id=\"f776167\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;exclude_headings_by_selector&quot;:&quot;.post-title, .related-news, .blog-contact-form&quot;,&quot;minimized_on&quot;:&quot;desktop&quot;,&quot;headings_by_tags&quot;:[&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;h5&quot;,&quot;h6&quot;],&quot;marker_view&quot;:&quot;numbers&quot;,&quot;no_headings_message&quot;:&quot;No headings were found on this page.&quot;,&quot;minimize_box&quot;:&quot;yes&quot;,&quot;hierarchical_view&quot;:&quot;yes&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"table-of-contents.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tTable of contents\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--expand\" role=\"button\" tabindex=\"0\" aria-controls=\"elementor-toc__f776167\" aria-expanded=\"true\" aria-label=\"Open table of contents\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/div>\n\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--collapse\" role=\"button\" tabindex=\"0\" aria-controls=\"elementor-toc__f776167\" aria-expanded=\"true\" aria-label=\"Close table of contents\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<div id=\"elementor-toc__f776167\" class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<svg class=\"elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading\" aria-hidden=\"true\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37acb00 elementor-widget elementor-widget-heading\" data-id=\"37acb00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Key differences between UX and UI<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73a4555 elementor-widget elementor-widget-text-editor\" data-id=\"73a4555\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Although they are often confused, UX and UI are not the same. Specifically, the   <\/span><b>UX (User Experience)<\/b><span style=\"font-weight: 400;\">  is concerned with the structure, information architecture and user flow. In contrast, the   <\/span><b>UI (User Interface)<\/b> <span style=\"font-weight: 400;\">is responsible for the visual part: buttons, icons, colors, typography and interactive elements.<\/span><\/p><p><span style=\"font-weight: 400;\">For example, if we think about an application for reserving tables in restaurants:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>UX<\/b> <span style=\"font-weight: 400;\">determines the process for selecting the day, time, and number of people, as well as the clarity of each step.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>UI<\/b> <span style=\"font-weight: 400;\">decides the color of the \u201cBook\u201d button, the shape of the calendar, and the typography of the menu.<\/span> <\/li><\/ul><p><span style=\"font-weight: 400;\">At wwwarcelona.com, therefore, this balance is fundamental. In a comprehensive manner, each project is approached from the   <\/span><b>brand strategy to visual execution<\/b> <span style=\"font-weight: 400;\">, ensuring coherence between form and functionality.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83a7212 elementor-widget elementor-widget-heading\" data-id=\"83a7212\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Fundamental principles of mobile UX design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2171782 elementor-widget elementor-widget-text-editor\" data-id=\"2171782\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">When developing an application, there are several<\/span> <b>UX principles that cannot be ignored.<\/b><span style=\"font-weight: 400;\">. In fact, these help improve usability, reduce user frustration, and increase retention.<\/span><\/p><h3><b>Visual hierarchy<\/b><\/h3><p><span style=\"font-weight: 400;\">To begin, you need to guide the user&#8217;s gaze. Visual hierarchy helps to highlight the most important information first. This can be achieved through size, contrast, and well-used white space.  <\/span><\/p><h3><b>Intuitive navigation<\/b><\/h3><p><span style=\"font-weight: 400;\">Additionally, a mobile app should be easy to understand from the first use. Users don&#8217;t want to read manuals. That&#8217;s why navigation should be simple and consistent. Menus, buttons, and actions should be where the user expects to find them.   <\/span><\/p><h3><b>Simplicity and clarity<\/b><\/h3><p><span style=\"font-weight: 400;\">Ultimately, less is more. Good UX\/UI design for mobile apps eliminates visual noise and opts for simple solutions. As a result, this reduces errors, speeds up tasks, and improves satisfaction.  <\/span><\/p><p><span style=\"font-weight: 400;\">At <a href=\"https:\/\/wwwarcelona.com\/en\/\">wwwarcelona.com<\/a> , for this reason, a<\/span> <b>minimalist but meaningful design<\/b> approach is applied <span style=\"font-weight: 400;\">, where each element has a reason for being, based on real user behaviors.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53188ed elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"53188ed\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-212b1a4\" data-id=\"212b1a4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-16f0f92 elementor-widget elementor-widget-shortcode\" data-id=\"16f0f92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t\t<div data-elementor-type=\"section\" data-elementor-id=\"11391\" class=\"elementor elementor-11391 elementor-1884\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-092bc68 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"092bc68\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4bd6c21\" data-id=\"4bd6c21\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a5c71bc elementor-position-left elementor-vertical-align-middle elementor-widget elementor-widget-image-box\" data-id=\"a5c71bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><img decoding=\"async\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/elementor\/thumbs\/documento-qqlwpsd087odvyttjnuw7j20i5nscil7clm674gvs8.png\" title=\"documento\" alt=\"documento\" loading=\"lazy\" \/><\/figure><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">We listen to our customers<\/h3><p class=\"elementor-image-box-description\">Ask us for a meeting to discuss your project.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e30b761\" data-id=\"e30b761\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5bcb243 elementor-align-right elementor-tablet-align-center elementor-widget elementor-widget-button\" data-id=\"5bcb243\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md elementor-animation-float\" href=\"#cta-contacta\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Request the meeting<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4df30ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4df30ed\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ed05024\" data-id=\"ed05024\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-24416aa elementor-widget elementor-widget-heading\" data-id=\"24416aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">  Good practice in UI for mobile applications<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d8f987 elementor-widget elementor-widget-text-editor\" data-id=\"1d8f987\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">UI design is not just about making an application \u201cpretty\u201d. On the contrary, it is about making it understandable, attractive and functional. In this sense, multiple best practices come into play here:  <\/span><\/p><h3><b>Typography and readability<\/b><\/h3><p><span style=\"font-weight: 400;\">First of all, texts must be easy to read on small screens. The use of   <\/span><b>Clean typography, well-defined spaces and clear hierarchies<\/b> <span style=\"font-weight: 400;\">are key to improving understanding.<\/span><\/p><h3><b>Colors and accessibility<\/b><\/h3><p><span style=\"font-weight: 400;\">On the other hand, colors not only provide identity, they also help with interaction. Therefore, it is necessary to avoid combinations that make reading difficult and ensure that there is enough contrast. In addition, visual accessibility must be a priority, to reach more people.  <\/span><\/p><h3><b>Microinteractions and feedback<\/b><\/h3><p><span style=\"font-weight: 400;\">Finally, a button that changes color, a smooth animation, or a visual notification help the user understand that they have done an action correctly. In effect, these   <\/span><b>Microinteractions greatly improve the perceived experience<\/b> <span style=\"font-weight: 400;\">.<\/span><\/p><p><span style=\"font-weight: 400;\">With an agency like wwwarcelona.com, which understands visual impact as a tool for emotional connection,<\/span> <b>memorable and functional interfaces can be developed in equal parts.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9e8e79d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9e8e79d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2ac2ed8\" data-id=\"2ac2ed8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7884beb elementor-widget elementor-widget-heading\" data-id=\"7884beb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">  Step-by-step UX\/UI design process<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94af923 elementor-widget elementor-widget-text-editor\" data-id=\"94af923\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Creating an app doesn&#8217;t start with visual design, but with a deep<\/span> <b>understanding of the user and their goals.<\/b><span style=\"font-weight: 400;\">. For this reason, the ideal process is divided into several key phases:<\/span><\/p><h3><b>User research<\/b><\/h3><p><span style=\"font-weight: 400;\">First of all, this stage allows us to know the target audience, their needs and frustrations. Interviews, surveys or behavioral studies are carried out. Consequently, everything that is built later will depend on this data.  <\/span><\/p><h3><b>Wireframes and prototypes<\/b><\/h3><p><span style=\"font-weight: 400;\">Next, functional sketches (wireframes) are generated to validate flows and structures. Later, interactive prototypes are created to test the experience before programming. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7b2e13b\" data-id=\"7b2e13b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c51d7f8 elementor-widget elementor-widget-image\" data-id=\"c51d7f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2.png\" class=\"attachment-large size-large wp-image-11430\" alt=\"UX\/UI per a aplicacions m\u00f2bil\" srcset=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2.png 1024w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-300x300.png 300w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-150x150.png 150w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-768x768.png 768w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-180x180.png 180w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-360x360.png 360w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-640x640.png 640w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-600x600.png 600w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_A_young_creative_UXUI_designer_working_in_a_moder_30c5a345-63f4-496c-9f7f-9f9d67961d7e_2-100x100.png 100w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a83e1a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a83e1a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ef86334\" data-id=\"ef86334\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c85b02a elementor-widget elementor-widget-text-editor\" data-id=\"c85b02a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><b>Usability test<\/b><\/h3><p><span style=\"font-weight: 400;\">Finally, with prototypes in hand, tests are carried out with real users to detect friction, errors or doubts. This feedback is essential for iterating and improving. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff3d68a elementor-widget elementor-widget-heading\" data-id=\"ff3d68a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Essential tools for UX\/UI designers<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3e97ee elementor-widget elementor-widget-text-editor\" data-id=\"d3e97ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Tools are extensions of creative and strategic thinking. Therefore, by knowing them well, you can optimize time, collaboration and quality of work. <\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Figma<\/b> <span style=\"font-weight: 400;\">: ideal for collaborative work, prototyping and design systems.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sketch<\/b> <span style=\"font-weight: 400;\">: widely used in Mac environments, with a large community and plugins.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Adobe XD<\/b> <span style=\"font-weight: 400;\">: A powerful alternative with seamless integration with the Adobe ecosystem.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>InVision<\/b> <span style=\"font-weight: 400;\">: Very useful for presenting prototypes and generating visual feedback effectively.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maze<\/b> <span style=\"font-weight: 400;\">: also allows you to test prototypes with users and obtain qualitative and quantitative data.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hotjar<\/b> <span style=\"font-weight: 400;\">: to analyze real behavior within the app with heat maps and useful recordings.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lookback<\/b> <span style=\"font-weight: 400;\">: Finally, it is ideal for usability interviews and remote observation.<\/span> <\/li><\/ul><p><span style=\"font-weight: 400;\">These tools are common in studios like wwwarcelona.com, which integrate both<\/span> <b>technology and brand strategy into the design process.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76ae4de elementor-widget elementor-widget-heading\" data-id=\"76ae4de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Common mistakes in UX\/UI and how to avoid them<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e0c921 elementor-widget elementor-widget-text-editor\" data-id=\"9e0c921\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">No matter how <a href=\"https:\/\/www.linkedin.com\/company\/wwwarcelona\/\" target=\"_blank\" rel=\"noopener\">experienced you<\/a> are, mistakes can happen. However, recognizing them is the first step to avoiding them in future projects. <\/span><\/p><h3><b>Overdesign<\/b><\/h3><p><span style=\"font-weight: 400;\">In many cases, adding too many visual elements can overwhelm the user. Design should help, not entertain for free. So remember: each element should have a clear function.  <\/span><\/p><h3><b>Do not validate with users<\/b><\/h3><p><span style=\"font-weight: 400;\">A common mistake is<\/span> <b>to assume what the user wants or understands<\/b><span style=\"font-weight: 400;\">. For this reason, testing is essential to verify whether our intuition matches reality.<\/span><\/p><h3><b>Ignore accessibility<\/b><\/h3><p><span style=\"font-weight: 400;\">On the other hand, small fonts, low-contrast colors, or complex interactions can exclude people with visual or motor difficulties. Consequently, including accessibility criteria is not an option, it is an obligation. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bfb0d38 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bfb0d38\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6956a0f\" data-id=\"6956a0f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-84d63e4 elementor-widget elementor-widget-image\" data-id=\"84d63e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1.png\" class=\"attachment-large size-large wp-image-11427\" alt=\"UX\/UI per a aplicacions m\u00f2bil\" srcset=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1.png 1024w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-300x300.png 300w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-150x150.png 150w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-768x768.png 768w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-180x180.png 180w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-360x360.png 360w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-640x640.png 640w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-600x600.png 600w, https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_representing_UXUI_design_flo_8ad28a1c-ad7d-4668-b2ec-3ad94a30e2a4_1-100x100.png 100w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-9aa5046\" data-id=\"9aa5046\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1b3937a elementor-widget elementor-widget-heading\" data-id=\"1b3937a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Current trends in UX\/UI design for apps<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4dfebf elementor-widget elementor-widget-text-editor\" data-id=\"d4dfebf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Digital design is a living ecosystem. In this context, these are some of the most relevant current trends in UX\/UI for mobile applications: <\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dark mode<\/b> <span style=\"font-weight: 400;\">: Very popular for reducing eye strain; however, it needs to be well implemented.<\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Functional animations<\/b><span style=\"font-weight: 400;\">: small animations that explain actions, such as scrolling or loading content. They also help make the experience more fluid. <\/span> <\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Voice Interfaces (VUI)<\/b><span style=\"font-weight: 400;\">: increasingly common, especially in assistance or home automation applications. In fact, they improve accessibility and ease of use. <\/span> <br><br><\/li><\/ul><p><b>Emotional design<\/b> <span style=\"font-weight: 400;\">: Finally, evoking positive emotions with visual details can significantly increase user retention.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cdd089e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cdd089e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0a615ae\" data-id=\"0a615ae\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5a20b6f elementor-widget elementor-widget-heading\" data-id=\"5a20b6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion and final advice<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80c09dd elementor-widget elementor-widget-text-editor\" data-id=\"80c09dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX\/UI <span style=\"font-weight: 400;\">design<\/span> <b>for mobile applications<\/b><span style=\"font-weight: 400;\">  It is not just an aesthetic issue, but a strategic discipline. In effect, it is the bridge between technology and people. A well-designed application can be the tool that builds loyalty, solves problems and differentiates a brand in the market.  <\/span><\/p><p><span style=\"font-weight: 400;\">Finally, remember:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Design for people, not trends.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test everything you create, even if it seems obviously functional.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In addition, maintain consistency between image, functionality and message.<br><\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">If you need help transforming your idea into a useful and attractive application, studios like<\/span> <b>wwwarcelona.com<\/b> <span style=\"font-weight: 400;\">are key allies, as they combine<\/span> <b>strategy, digital design and UX thinking<\/b> <span style=\"font-weight: 400;\">to achieve exceptional products.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In an increasingly digital world, the figure of the web designer in Barcelona has become essential for any company that wants to stand out in the online environment. In Barcelona, \u200b\u200ba city with a strong technological and creative dynamism, web design has become a key sector. Whether for small companies, innovative startups or large corporations, the demand for experienced and creative web designers continues to grow.  <\/p>\n","protected":false},"author":2,"featured_media":11433,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[203],"tags":[],"class_list":["post-12187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-applications"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UX\/UI guide for mobile applications<\/title>\n<meta name=\"description\" content=\"UX\/UI guide for effective and modern mobile applications. Discover how to optimize and improve your app with wwwarcelona!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX\/UI guide for mobile applications\" \/>\n<meta property=\"og:description\" content=\"UX\/UI guide for effective and modern mobile applications. Discover how to optimize and improve your app with wwwarcelona!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/\" \/>\n<meta property=\"og:site_name\" content=\"wwwarcelona\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-02T09:17:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-18T10:30:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"wwwarcelona\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"wwwarcelona\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX\/UI guide for mobile applications","description":"UX\/UI guide for effective and modern mobile applications. Discover how to optimize and improve your app with wwwarcelona!","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:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/","og_locale":"en_US","og_type":"article","og_title":"UX\/UI guide for mobile applications","og_description":"UX\/UI guide for effective and modern mobile applications. Discover how to optimize and improve your app with wwwarcelona!","og_url":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/","og_site_name":"wwwarcelona","article_published_time":"2025-05-02T09:17:48+00:00","article_modified_time":"2025-06-18T10:30:34+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png","type":"image\/png"}],"author":"wwwarcelona","twitter_card":"summary_large_image","twitter_misc":{"Written by":"wwwarcelona","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#article","isPartOf":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/"},"author":{"name":"wwwarcelona","@id":"https:\/\/wwwarcelona.com\/#\/schema\/person\/0565a7c88afbbf58207bd6af8f520ef2"},"headline":"UX\/UI guide for mobile applications","datePublished":"2025-05-02T09:17:48+00:00","dateModified":"2025-06-18T10:30:34+00:00","mainEntityOfPage":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/"},"wordCount":1181,"image":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#primaryimage"},"thumbnailUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png","articleSection":["Mobile applications"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/","url":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/","name":"UX\/UI guide for mobile applications","isPartOf":{"@id":"https:\/\/wwwarcelona.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#primaryimage"},"image":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#primaryimage"},"thumbnailUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png","datePublished":"2025-05-02T09:17:48+00:00","dateModified":"2025-06-18T10:30:34+00:00","author":{"@id":"https:\/\/wwwarcelona.com\/#\/schema\/person\/0565a7c88afbbf58207bd6af8f520ef2"},"description":"UX\/UI guide for effective and modern mobile applications. Discover how to optimize and improve your app with wwwarcelona!","breadcrumb":{"@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#primaryimage","url":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png","contentUrl":"https:\/\/wwwarcelona.com\/wp-content\/uploads\/2025\/05\/u8315455948_Abstract_composition_featuring_the_word_UXUI_and__80e15f6b-6b68-43e2-bd59-507892735823_0.png","width":1024,"height":1024,"caption":"UX\/UI per a aplicacions m\u00f2bil"},{"@type":"BreadcrumbList","@id":"https:\/\/wwwarcelona.com\/en\/mobile-applications\/guia-dux-ui-per-a-aplicacions-mobil\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/wwwarcelona.com\/en\/"},{"@type":"ListItem","position":2,"name":"UX\/UI guide for mobile applications"}]},{"@type":"WebSite","@id":"https:\/\/wwwarcelona.com\/#website","url":"https:\/\/wwwarcelona.com\/","name":"wwwarcelona","description":"Apps, Software, CRM, Webs, Ecommece, Disseny i Hosting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wwwarcelona.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wwwarcelona.com\/#\/schema\/person\/0565a7c88afbbf58207bd6af8f520ef2","name":"wwwarcelona","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0c6819356538849544fe79abd31afb6f42861bbb96368a1f2151f9a226524dcd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c6819356538849544fe79abd31afb6f42861bbb96368a1f2151f9a226524dcd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c6819356538849544fe79abd31afb6f42861bbb96368a1f2151f9a226524dcd?s=96&d=mm&r=g","caption":"wwwarcelona"}}]}},"_links":{"self":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/12187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=12187"}],"version-history":[{"count":2,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/12187\/revisions"}],"predecessor-version":[{"id":12198,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/posts\/12187\/revisions\/12198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/media\/11433"}],"wp:attachment":[{"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=12187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=12187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wwwarcelona.com\/en\/wp-json\/wp\/v2\/tags?post=12187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}