{"id":7533,"date":"2026-11-08T00:15:31","date_gmt":"2026-11-08T06:15:31","guid":{"rendered":"https:\/\/royalestudios.com\/services\/ui-ux\/"},"modified":"2026-11-08T00:15:31","modified_gmt":"2026-11-08T06:15:31","slug":"ui-ux","status":"publish","type":"page","link":"https:\/\/royalestudios.com\/en\/services\/ui-ux\/","title":{"rendered":"UI\/UX"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7533\" class=\"elementor elementor-7533 elementor-7392\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-141ae88 e-con-full rs-svc e-flex e-con e-parent\" data-id=\"141ae88\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-869c141 elementor-widget elementor-widget-html\" data-id=\"869c141\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"hero\" data-screen-label=\"Hero\" style=\"position: relative; max-width: 1340px; width: 100%; margin: 0px auto; padding: 56px 40px 40px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;\">\n    <div data-r=\"shapes-l\" aria-hidden=\"true\" style=\"position: absolute; inset: 0px; pointer-events: none;\">\n    <div style=\"position: absolute; left: max(-40px, 50% - 680px); top: 20px; width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); background: rgb(55, 48, 107); border-radius: 0px 0px 96px;\"><\/div>\n    <div style=\"position: absolute; left: max(-10px, 50% - 630px); top: clamp(60px, 6vw, 84px); width: clamp(40px, 5.5vw, 76px); height: clamp(40px, 5.5vw, 76px); background: rgb(255, 200, 69); border-radius: 50%;\"><\/div>\n    <div style=\"position: absolute; left: -60px; top: 280px; width: clamp(90px, 11vw, 150px); height: clamp(90px, 11vw, 150px); background: rgb(255, 179, 154); clip-path: polygon(0px 0px, 100% 50%, 0px 100%);\"><\/div>\n    <div style=\"position: absolute; left: max(12px, 50% - 620px); top: 470px; display: grid; grid-template-columns: repeat(4, 8px); gap: 10px;\">\n      <span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(75, 63, 224);\"><\/span>\n    <\/div>\n    <\/div>\n    <div data-r=\"shapes-r\" aria-hidden=\"true\" style=\"position: absolute; inset: 0px; pointer-events: none;\">\n    <div style=\"position: absolute; right: -60px; top: 30px; width: clamp(130px, 15vw, 210px); height: clamp(76px, 9vw, 120px); background: rgb(236, 53, 67); clip-path: polygon(28% 0px, 100% 0px, 72% 100%, 0px 100%); opacity: 0.92;\"><\/div>\n    <div style=\"position: absolute; right: max(-30px, 50% - 640px); top: 220px; width: clamp(64px, 8vw, 120px); height: clamp(56px, 7vw, 104px); background: rgb(123, 134, 240); clip-path: polygon(50% 0px, 100% 100%, 0px 100%);\"><\/div>\n    <div style=\"position: absolute; right: -50px; top: 360px; width: clamp(90px, 10vw, 140px); height: clamp(45px, 5vw, 70px); background: rgb(255, 179, 154); border-radius: 0px 0px 140px 140px;\"><\/div>\n    <div style=\"position: absolute; right: -10px; top: 338px; width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); background: rgb(55, 48, 107); border-radius: 50%;\"><\/div>\n    <\/div>\n    <span style=\"position: relative; z-index: 1; font-size: 16px; font-weight: 600; color: rgb(236, 53, 67);\">UI\/UX \u2014 Interface and digital experience design<\/span>\n    <h1 data-r=\"h1\" style=\"position: relative; z-index: 1; margin: 0px; font-size: clamp(42px, 6vw, 80px); line-height: 1.02; font-weight: 500; letter-spacing: -0.055em; max-width: min(880px, 100% - 120px); text-wrap: balance;\">We design easy-to-use digital experiences<\/h1>\n    <p data-r=\"herotext\" style=\"position: relative; z-index: 1; margin: 0px; font-size: 19px; line-height: 1.55; max-width: min(640px, 100% - 140px); text-wrap: pretty;\">We turn ideas and requirements into intuitive, functional, and engaging interfaces for websites, apps, and digital platforms.<\/p>\n    <a href=\"https:\/\/royalestudios.com\/en\/contact\/\" style=\"position: relative; background: rgb(236, 53, 67); color: rgb(255, 255, 255); font-size: 15px; font-weight: 600; padding: 15px 30px; border-radius: 999px;\">Let's talk about your project<\/a>\n    <div style=\"position: relative; width: min(620px, 100%); aspect-ratio: 620 \/ 400; margin-top: 24px;\">\n      <div style=\"position: absolute; left: 4%; top: 8%; width: 34%; aspect-ratio: 1 \/ 1; background: rgb(123, 134, 240); transform: rotate(45deg);\"><\/div>\n      <div style=\"position: absolute; right: 2%; bottom: 0px; width: 44%; aspect-ratio: 1 \/ 1; background: rgb(243, 214, 208); border-radius: 50%;\"><\/div>\n      <div style=\"position: absolute; left: 12%; top: 16%; width: 62%; height: 68%; background: rgb(255, 255, 255); border: 4px solid rgb(40, 43, 66); border-radius: 14px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;\">\n        <div style=\"height: 30px; flex-shrink: 0; border-bottom: 2px solid rgb(233, 228, 224); display: flex; align-items: center; gap: 6px; padding: 0px 12px;\">\n          <span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(236, 53, 67);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 200, 69);\"><\/span><span style=\"width: 8px; height: 8px; border-radius: 50%; background: rgb(123, 134, 240);\"><\/span>\n          <span style=\"margin-left: auto; font-size: 11px; font-weight: 600; color: rgb(40, 43, 66);\">Prototype<\/span>\n        <\/div>\n        <div style=\"flex: 1 1 0%; display: grid; grid-template-columns: 1fr 1fr; min-height: 0px;\">\n          <div style=\"padding: 14px; display: flex; flex-direction: column; gap: 8px; border-right: 2px dashed rgb(217, 211, 206); text-align: left;\">\n            <div style=\"height: 12px; width: 80%; background: rgb(217, 211, 206); border-radius: 3px;\"><\/div>\n            <div style=\"height: 12px; width: 55%; background: rgb(217, 211, 206); border-radius: 3px;\"><\/div>\n            <div style=\"flex: 1 1 0%; border: 2px solid rgb(217, 211, 206); border-radius: 6px; position: relative; background: linear-gradient(to right top, transparent calc(50% - 1px), rgb(217, 211, 206), transparent calc(50% + 1px)), linear-gradient(to left top, transparent calc(50% - 1px), rgb(217, 211, 206), transparent calc(50% + 1px));\"><\/div>\n            <div style=\"height: 16px; width: 44%; border: 2px solid rgb(217, 211, 206); border-radius: 999px;\"><\/div>\n          <\/div>\n          <div style=\"padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; position: relative;\">\n            <div style=\"height: 12px; width: 80%; background: rgb(40, 43, 66); border-radius: 3px;\"><\/div>\n            <div style=\"height: 12px; width: 55%; background: rgb(40, 43, 66); border-radius: 3px; opacity: 0.5;\"><\/div>\n            <div style=\"flex: 1 1 0%; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;\">\n              <div style=\"background: rgb(55, 48, 107); position: relative;\"><div style=\"position: absolute; inset: 22% 22% 0px; background: rgb(255, 200, 69); border-radius: 999px 999px 0px 0px;\"><\/div><\/div>\n              <div style=\"background: rgb(255, 179, 154); position: relative;\"><div style=\"position: absolute; inset: 25%; background: rgb(236, 53, 67); border-radius: 50%;\"><\/div><\/div>\n            <\/div>\n            <div style=\"position: relative; align-self: flex-start; height: 20px; width: 52%; background: rgb(236, 53, 67); border-radius: 999px; outline: rgb(75, 63, 224) solid 1.5px; outline-offset: 4px;\">\n              <span style=\"position: absolute; left: -7px; top: -7px; width: 6px; height: 6px; background: rgb(255, 255, 255); border: 1.5px solid rgb(75, 63, 224);\"><\/span>\n              <span style=\"position: absolute; right: -7px; bottom: -7px; width: 6px; height: 6px; background: rgb(255, 255, 255); border: 1.5px solid rgb(75, 63, 224);\"><\/span>\n              <span style=\"position: absolute; left: -5px; top: -26px; background: rgb(75, 63, 224); color: rgb(255, 255, 255); font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap;\">Button \/ Primary<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div style=\"position: absolute; right: 10%; top: 30%; width: 22%; height: 66%; background: rgb(255, 255, 255); border: 4px solid rgb(40, 43, 66); border-radius: 18px; box-sizing: border-box; padding: 12px 9px; display: flex; flex-direction: column; gap: 7px; text-align: left;\">\n        <div style=\"width: 30%; height: 4px; background: rgb(40, 43, 66); border-radius: 2px; align-self: center; margin-bottom: 4px;\"><\/div>\n        <div style=\"height: 9px; width: 75%; background: rgb(40, 43, 66); border-radius: 2px;\"><\/div>\n        <div style=\"flex: 1 1 0%; background: rgb(123, 134, 240); border-radius: 8px; position: relative; overflow: hidden;\"><div style=\"position: absolute; left: -20%; bottom: -30%; width: 90%; aspect-ratio: 1 \/ 1; background: rgb(255, 200, 69); border-radius: 50%;\"><\/div><\/div>\n        <div style=\"height: 7px; width: 90%; background: rgb(217, 211, 206); border-radius: 2px;\"><\/div>\n        <div style=\"height: 7px; width: 60%; background: rgb(217, 211, 206); border-radius: 2px;\"><\/div>\n        <div style=\"height: 16px; background: rgb(236, 53, 67); border-radius: 999px;\"><\/div>\n      <\/div>\n      <div style=\"position: absolute; left: 2%; bottom: 6%; background: rgb(255, 255, 255); border-radius: 10px; padding: 8px; display: flex; gap: 6px; box-shadow: rgba(40, 43, 66, 0.12) 0px 10px 24px;\">\n        <span style=\"width: 18px; height: 18px; border-radius: 5px; background: rgb(236, 53, 67);\"><\/span><span style=\"width: 18px; height: 18px; border-radius: 5px; background: rgb(55, 48, 107);\"><\/span><span style=\"width: 18px; height: 18px; border-radius: 5px; background: rgb(255, 200, 69);\"><\/span><span style=\"width: 18px; height: 18px; border-radius: 5px; background: rgb(123, 134, 240);\"><\/span>\n      <\/div>\n      <div style=\"position: absolute; right: 0px; top: 6%; width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 200, 69); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: rgb(40, 43, 66);\">Aa<\/div>\n    <\/div>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-405d0c9 e-con-full e-flex e-con e-parent\" data-id=\"405d0c9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-328e763 elementor-widget elementor-widget-template\" data-id=\"328e763\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<div data-elementor-type=\"container\" data-elementor-id=\"6257\" class=\"elementor elementor-6257 elementor-2697 elementor-2697\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7682a682 e-flex e-con-boxed e-con e-parent\" data-id=\"7682a682\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-729e616b elementor-widget elementor-widget-heading\" data-id=\"729e616b\" 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\">Trusted by startups and industry leaders alike<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22b2f6c elementor-arrows-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"22b2f6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;6&quot;,&quot;slides_to_scroll&quot;:&quot;1&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:24,&quot;sizes&quot;:[]},&quot;slides_to_show_tablet&quot;:&quot;3&quot;,&quot;slides_to_show_mobile&quot;:&quot;3&quot;,&quot;navigation&quot;:&quot;arrows&quot;,&quot;autoplay_speed&quot;:1,&quot;speed&quot;:1300,&quot;slides_to_scroll_tablet&quot;:&quot;1&quot;,&quot;slides_to_scroll_mobile&quot;:&quot;1&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_bam.svg\" alt=\"logo_bam\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_url.svg\" alt=\"logo_url\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_yalo.svg\" alt=\"logo_yalo\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_saul.svg\" alt=\"logo_saul\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_klap.svg\" alt=\"logo_klap\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_abbott.svg\" alt=\"logo_abbott\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"7 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo-xouse.svg\" alt=\"logo-xouse\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"8 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_emporium.svg\" alt=\"logo_emporium\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"9 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_visa.svg\" alt=\"logo_visa\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"10 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo-el_taier_tribu_DDB.svg\" alt=\"logo-el_taier_tribu_DDB\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"11 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo-ficohsa.svg\" alt=\"logo-ficohsa\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"12 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_seguros_el_roble.svg\" alt=\"logo_seguros_el_roble\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"13 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_alianza-francesa.svg\" alt=\"logo_alianza-francesa\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"14 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_cbc.svg\" alt=\"logo_cbc\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"15 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo-bbdo.svg\" alt=\"logo-bbdo\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"16 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_alessa.svg\" alt=\"logo_alessa\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"17 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_cementos-progreso.svg\" alt=\"logo_cementos-progreso\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"18 of 18\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/logo_seguros_el_roble-1.svg\" alt=\"logo_seguros_el_roble\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"material-icons md-keyboard_arrow_left\" data-md-icon=\"keyboard_arrow_left\"><\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"material-icons md-keyboard_arrow_right\" data-md-icon=\"keyboard_arrow_right\"><\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5fa1d7c e-con-full rs-svc e-flex e-con e-parent\" data-id=\"5fa1d7c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8929a27 elementor-widget elementor-widget-html\" data-id=\"8929a27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"sec\" data-screen-label=\"Servicios\" style=\"max-width: 1340px; width: 100%; margin: 0px auto; padding: 120px 40px 0px; box-sizing: border-box; display: flex; flex-direction: column; gap: 72px;\">\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <span style=\"font-size: 15px; font-weight: 600; color: rgb(236, 53, 67);\">UI\/UX services<\/span>\n      <h2 style=\"margin: 0px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.045em;\">From concept to screen<\/h2>\n    <\/div>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px;\">\n      <article data-r=\"card\" style=\"background: rgb(75, 87, 216); color: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;\">\n          <span style=\"width: 46px; height: 18px; border-radius: 5px; background: rgb(236, 53, 67);\"><\/span>\n          <span style=\"width: 62%; height: 12px; border-width: 2px 2px 0px; border-style: solid solid none; border-color: rgb(255, 255, 255) rgb(255, 255, 255) currentcolor; border-image: none; border-radius: 4px 4px 0px 0px; box-sizing: border-box; margin-top: -12px;\"><\/span>\n          <div style=\"display: flex; gap: 16px; margin-top: -12px;\">\n            <div style=\"display: flex; flex-direction: column; align-items: center; gap: 6px;\"><span style=\"width: 38px; height: 16px; border-radius: 5px; background: rgb(255, 200, 69);\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><\/div>\n            <div style=\"display: flex; flex-direction: column; align-items: center; gap: 6px;\"><span style=\"width: 38px; height: 16px; border-radius: 5px; background: rgb(255, 179, 154);\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><\/div>\n            <div style=\"display: flex; flex-direction: column; align-items: center; gap: 6px;\"><span style=\"width: 38px; height: 16px; border-radius: 5px; background: rgb(55, 48, 107); outline: rgb(255, 255, 255) solid 2px;\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><span style=\"width: 26px; height: 8px; border-radius: 3px; background: rgb(255, 255, 255); opacity: 0.5;\"><\/span><\/div>\n          <\/div>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">Information architecture<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We organize content, navigation, and features.<\/p>\n      <\/article>\n      <article data-r=\"card\" style=\"background: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgb(245, 241, 238); display: flex; align-items: center; justify-content: center; gap: 0px;\">\n          <span style=\"width: 30px; height: 30px; border-radius: 50%; background: rgb(236, 53, 67);\"><\/span>\n          <span style=\"width: 22px; height: 2px; background: rgb(40, 43, 66);\"><\/span>\n          <span style=\"width: 52px; height: 34px; border-radius: 8px; background: rgb(255, 255, 255); border: 2px solid rgb(40, 43, 66); box-sizing: border-box;\"><\/span>\n          <span style=\"width: 22px; height: 2px; background: rgb(40, 43, 66);\"><\/span>\n          <span style=\"width: 30px; height: 30px; background: rgb(255, 200, 69); transform: rotate(45deg); margin: 0px 6px;\"><\/span>\n          <span style=\"width: 22px; height: 2px; background: rgb(40, 43, 66);\"><\/span>\n          <span style=\"width: 52px; height: 34px; border-radius: 8px; background: rgb(55, 48, 107);\"><\/span>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">User experience (UX)<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We define journeys, flows, and structures that make interaction easier.<\/p>\n      <\/article>\n      <article data-r=\"card\" style=\"background: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgb(245, 241, 238); display: flex; align-items: center; justify-content: center;\">\n          <div style=\"width: 190px; height: 112px; background: rgb(255, 255, 255); border: 3px solid rgb(40, 43, 66); border-radius: 10px; box-sizing: border-box; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;\">\n            <div style=\"display: flex; flex-direction: column; gap: 6px; justify-content: center;\"><span style=\"height: 8px; width: 90%; background: rgb(40, 43, 66); border-radius: 2px;\"><\/span><span style=\"height: 8px; width: 60%; background: rgb(40, 43, 66); border-radius: 2px; opacity: 0.4;\"><\/span><span style=\"height: 12px; width: 70%; background: rgb(236, 53, 67); border-radius: 999px; margin-top: 4px;\"><\/span><\/div>\n            <div style=\"border-radius: 6px; background: rgb(123, 134, 240); position: relative; overflow: hidden;\"><div style=\"position: absolute; left: 15%; bottom: 0px; width: 70%; height: 55%; background: rgb(255, 200, 69); border-radius: 999px 999px 0px 0px;\"><\/div><\/div>\n          <\/div>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">Interface design (UI)<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We design visually appealing, consistent, and functional screens.<\/p>\n      <\/article>\n      <article data-r=\"card\" style=\"background: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgb(245, 241, 238); display: flex; align-items: center; justify-content: center; gap: 18px;\">\n          <div style=\"position: relative; width: 54px; height: 96px; border: 3px solid rgb(40, 43, 66); border-radius: 12px; box-sizing: border-box; background: rgb(255, 255, 255); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px;\">\n            <span style=\"height: 26px; border-radius: 4px; background: rgb(255, 179, 154);\"><\/span><span style=\"height: 5px; width: 80%; background: rgb(217, 211, 206); border-radius: 2px;\"><\/span>\n            <span style=\"position: relative; height: 10px; border-radius: 999px; background: rgb(236, 53, 67); margin-top: auto;\"><span style=\"position: absolute; right: -10px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(75, 63, 224, 0.35); border: 2px solid rgb(75, 63, 224); box-sizing: border-box;\"><\/span><\/span>\n          <\/div>\n          <span style=\"font-size: 22px; font-weight: 600; color: rgb(236, 53, 67);\">\u2192<\/span>\n          <div style=\"width: 54px; height: 96px; border: 3px solid rgb(40, 43, 66); border-radius: 12px; box-sizing: border-box; background: rgb(55, 48, 107); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;\">\n            <span style=\"width: 24px; height: 24px; border-radius: 50%; background: rgb(255, 200, 69);\"><\/span><span style=\"height: 5px; width: 70%; background: rgb(255, 255, 255); border-radius: 2px;\"><\/span>\n          <\/div>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">Interactive prototypes<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We bring the browsing experience to life before development begins.<\/p>\n      <\/article>\n      <article data-r=\"card\" style=\"background: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgb(245, 241, 238); display: grid; grid-template-columns: auto auto; gap: 14px 20px; place-content: center; align-items: center;\">\n          <span style=\"width: 84px; height: 28px; border-radius: 999px; background: rgb(236, 53, 67);\"><\/span>\n          <span style=\"width: 46px; height: 26px; border-radius: 999px; background: rgb(55, 48, 107); position: relative;\"><span style=\"position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgb(255, 255, 255);\"><\/span><\/span>\n          <span style=\"width: 84px; height: 28px; border-radius: 999px; border: 2px solid rgb(40, 43, 66); box-sizing: border-box;\"><\/span>\n          <span style=\"font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;\">Aa<\/span>\n          <div style=\"grid-column: span 2; display: flex; gap: 6px; justify-content: center;\"><span style=\"width: 22px; height: 22px; border-radius: 6px; background: rgb(236, 53, 67);\"><\/span><span style=\"width: 22px; height: 22px; border-radius: 6px; background: rgb(55, 48, 107);\"><\/span><span style=\"width: 22px; height: 22px; border-radius: 6px; background: rgb(123, 134, 240);\"><\/span><span style=\"width: 22px; height: 22px; border-radius: 6px; background: rgb(255, 200, 69);\"><\/span><span style=\"width: 22px; height: 22px; border-radius: 6px; background: rgb(255, 179, 154);\"><\/span><\/div>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">Design Systems<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We create reusable components and visual guidelines.<\/p>\n      <\/article>\n      <article data-r=\"card\" style=\"background: rgb(255, 255, 255); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"height: 150px; border-radius: 12px; background: rgb(245, 241, 238); display: flex; align-items: center; justify-content: center; gap: 22px;\">\n          <div style=\"position: relative; width: 96px; height: 64px;\">\n            <div style=\"position: absolute; inset: 0px; background: rgb(123, 134, 240); border-radius: 8px;\"><\/div>\n            <div style=\"position: absolute; left: 0px; right: 0px; top: -16px; display: flex; align-items: center; gap: 4px;\"><span style=\"flex: 1 1 0%; height: 1.5px; background: rgb(236, 53, 67);\"><\/span><span style=\"font-size: 10px; font-weight: 600; color: rgb(236, 53, 67);\">96<\/span><span style=\"flex: 1 1 0%; height: 1.5px; background: rgb(236, 53, 67);\"><\/span><\/div>\n            <div style=\"position: absolute; top: 0px; bottom: 0px; right: -26px; display: flex; flex-direction: column; align-items: center; gap: 3px;\"><span style=\"flex: 1 1 0%; width: 1.5px; background: rgb(236, 53, 67);\"><\/span><span style=\"font-size: 10px; font-weight: 600; color: rgb(236, 53, 67);\">64<\/span><span style=\"flex: 1 1 0%; width: 1.5px; background: rgb(236, 53, 67);\"><\/span><\/div>\n          <\/div>\n          <span style=\"margin-left: 14px; background: rgb(40, 43, 66); color: rgb(255, 200, 69); font-size: 15px; font-weight: 600; padding: 9px 12px; border-radius: 8px; font-family: ui-monospace, Menlo, monospace;\">&lt;\/&gt;<\/span>\n        <\/div>\n        <h3 style=\"margin: 8px 0px 0px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;\">Design for development teams<\/h3>\n        <p style=\"margin: 0px; font-size: 15px; line-height: 1.6;\">We deliver designs, components, and specs so your team can implement them.<\/p>\n      <\/article>\n    <\/div>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1fed7b5 e-con-full rs-svc e-flex e-con e-parent\" data-id=\"1fed7b5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-595b324 elementor-widget elementor-widget-html\" data-id=\"595b324\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"sec\" data-screen-label=\"Tu proyecto\" style=\"max-width: 1340px; width: 100%; margin: 0px auto; padding: 160px 40px 0px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 80px 96px; align-items: center;\">\n    <div style=\"position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 520px; width: 100%; justify-self: center; padding: 24px 0px;\">\n      <div style=\"position: absolute; left: -60px; top: -30px; width: 150px; height: 150px; background: rgb(123, 134, 240); border-radius: 50%;\"><\/div>\n      <div style=\"position: absolute; right: -30px; bottom: -20px; width: 120px; height: 104px; background: rgb(255, 200, 69); clip-path: polygon(50% 0px, 100% 100%, 0px 100%);\"><\/div>\n      <div style=\"position: absolute; left: 39px; top: 48px; bottom: 48px; width: 2px; background: rgb(207, 200, 194);\"><\/div>\n        <div style=\"position: relative; display: flex; align-items: center; gap: 16px; background: rgb(255, 255, 255); border-radius: 14px; padding: 18px 22px; box-shadow: rgba(40, 43, 66, 0.06) 0px 8px 24px;\">\n          <span style=\"flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgb(154, 150, 163); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;\"><span class=\"sc-interp\">1<\/span><\/span>\n          <span style=\"font-size: 16px; font-weight: 500;\"><span class=\"sc-interp\">Conceptualization<\/span><\/span>\n          <span style=\"margin-left: auto; font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\"><span class=\"sc-interp\"><\/span><\/span>\n        <\/div>\n        <div style=\"position: relative; display: flex; align-items: center; gap: 16px; background: rgb(255, 255, 255); border-radius: 14px; padding: 18px 22px; box-shadow: rgba(40, 43, 66, 0.06) 0px 8px 24px;\">\n          <span style=\"flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgb(154, 150, 163); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;\"><span class=\"sc-interp\">2<\/span><\/span>\n          <span style=\"font-size: 16px; font-weight: 500;\"><span class=\"sc-interp\">Architecture and flows<\/span><\/span>\n          <span style=\"margin-left: auto; font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\"><span class=\"sc-interp\"><\/span><\/span>\n        <\/div>\n        <div style=\"position: relative; display: flex; align-items: center; gap: 16px; background: rgb(255, 255, 255); border-radius: 14px; padding: 18px 22px; box-shadow: rgba(40, 43, 66, 0.06) 0px 8px 24px;\">\n          <span style=\"flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgb(236, 53, 67); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;\"><span class=\"sc-interp\">3<\/span><\/span>\n          <span style=\"font-size: 16px; font-weight: 500;\"><span class=\"sc-interp\">Interface design<\/span><\/span>\n          <span style=\"margin-left: auto; font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\"><span class=\"sc-interp\">We join here<\/span><\/span>\n        <\/div>\n        <div style=\"position: relative; display: flex; align-items: center; gap: 16px; background: rgb(255, 255, 255); border-radius: 14px; padding: 18px 22px; box-shadow: rgba(40, 43, 66, 0.06) 0px 8px 24px;\">\n          <span style=\"flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgb(154, 150, 163); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;\"><span class=\"sc-interp\">4<\/span><\/span>\n          <span style=\"font-size: 16px; font-weight: 500;\"><span class=\"sc-interp\">Prototype<\/span><\/span>\n          <span style=\"margin-left: auto; font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\"><span class=\"sc-interp\"><\/span><\/span>\n        <\/div>\n        <div style=\"position: relative; display: flex; align-items: center; gap: 16px; background: rgb(255, 255, 255); border-radius: 14px; padding: 18px 22px; box-shadow: rgba(40, 43, 66, 0.06) 0px 8px 24px;\">\n          <span style=\"flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgb(154, 150, 163); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;\"><span class=\"sc-interp\">5<\/span><\/span>\n          <span style=\"font-size: 16px; font-weight: 500;\"><span class=\"sc-interp\">Development<\/span><\/span>\n          <span style=\"margin-left: auto; font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\"><span class=\"sc-interp\"><\/span><\/span>\n        <\/div>\n    <\/div>\n    <div style=\"display: flex; flex-direction: column; gap: 24px; align-items: flex-start;\">\n      <h2 style=\"margin: 0px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.045em;\">Your project, our design<\/h2>\n      <p style=\"margin: 0px; font-size: 16px; line-height: 1.65; max-width: 520px;\">We can get involved from the earliest concept stages or join a project that's already in development.<\/p>\n      <p style=\"margin: 0px; font-size: 16px; line-height: 1.65; max-width: 520px;\">Whether you need to design a complete app, improve an existing platform, or develop just certain screens, we adapt our work to your team's needs.<\/p>\n    <\/div>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5859999 e-con-full rs-svc e-flex e-con e-parent\" data-id=\"5859999\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67a73fb elementor-widget elementor-widget-html\" data-id=\"67a73fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"sec-full\" data-screen-label=\"Portafolio\" style=\"padding: 160px 0px 0px; display: flex; flex-direction: column; gap: 56px;\">\n    <div data-r=\"padx\" style=\"max-width: 1340px; width: 100%; margin: 0px auto; padding: 0px 40px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;\">\n      <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 640px;\">\n        <span style=\"font-size: 15px; font-weight: 600; color: rgb(236, 53, 67);\">UI\/UX portfolio<\/span>\n        <h2 style=\"margin: 0px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.045em; text-wrap: balance;\">Digital products we've designed<\/h2>\n        <p style=\"margin: 0px; font-size: 16px; line-height: 1.65;\">Apps, platforms, and websites where we designed the experience and interface. Explore some of the UI\/UX projects we've developed for our clients.<\/p>\n      <\/div>\n      <a href=\"https:\/\/royalestudios.com\/en\/projects\/filtro\/tipo-de-proyecto:ui-ux\/\" style=\"border: 1.5px solid rgb(40, 43, 66); color: rgb(40, 43, 66); font-size: 15px; font-weight: 600; padding: 13px 26px; border-radius: 999px; white-space: nowrap;\">View UI\/UX projects<\/a>\n    <\/div>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-988e796 e-con-full e-flex e-con e-parent\" data-id=\"988e796\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ba7c3e dce-posts-layout-default dce-carousel-effect-slide dce-align-left elementor-widget elementor-widget-dce-dynamicposts-v2\" data-id=\"5ba7c3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;carousel_autoHeight&quot;:&quot;yes&quot;,&quot;carousel_slidesPerView&quot;:2.5,&quot;carousel_slidesPerView_mobile&quot;:1.5,&quot;carousel_spaceBetween&quot;:8,&quot;carousel_useAutoplay&quot;:&quot;yes&quot;,&quot;style_items&quot;:&quot;default&quot;,&quot;carousel_speed_slider&quot;:300,&quot;carousel_effects&quot;:&quot;slide&quot;,&quot;carousel_direction_slider&quot;:&quot;horizontal&quot;,&quot;carousel_initialSlide&quot;:0,&quot;carousel_slidesPerGroup&quot;:1,&quot;carousel_slidesColumn&quot;:&quot;1&quot;,&quot;carousel_slidesOffsetBefore&quot;:0,&quot;carousel_slidesOffsetAfter&quot;:0,&quot;carousel_slidesPerColumnFill&quot;:&quot;row&quot;,&quot;carousel_centerInsufficientSlides&quot;:&quot;yes&quot;,&quot;carousel_usePagination&quot;:&quot;yes&quot;,&quot;carousel_pagination_type&quot;:&quot;bullets&quot;,&quot;carousel_dynamicBullets&quot;:&quot;yes&quot;,&quot;carousel_autoplay&quot;:&quot;4000&quot;,&quot;carousel_autoplayDisableOnInteraction&quot;:&quot;yes&quot;}\" data-widget_type=\"dce-dynamicposts-v2.carousel\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"dce-fix-background-loop dce-posts-container dce-posts dce-dynamic-posts-collection  swiper dce-skin-carousel\">\n\t\t\t\t\t\t<div class=\"dce-posts-wrapper swiper-wrapper dce-wrapper-carousel\">\n\t\t\t\n\t\t<article class=\"post-6474 portafolio type-portafolio status-publish has-post-thumbnail hentry industria-banca-y-finanzas area-apps area-ui-ux tecnologias-android tecnologias-ios clientes-bam dce-post dce-post-item swiper-slide dce-item-carousel\" data-dce-post-id=\"6474\" data-dce-post-index=\"0\">\n\t\t\t<div class=\"dce-post-block\">\n\t\t<div class=\"dce-item dce-item_image elementor-repeater-item-58ffe24\"><a class=\"dce-post-image\" href=\"https:\/\/royalestudios.com\/en\/portfolio\/bam-app\/\"><figure  class=\"dce-img\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam-1024x1024.png\" class=\"\" alt=\"BAM App\" srcset=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam-1024x1024.png 1024w, https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam-300x300.png 300w, https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam-150x150.png 150w, https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam-768x768.png 768w, https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/05\/bam.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t<\/article>\n\t\t\n\t\t<article class=\"post-6197 portafolio type-portafolio status-publish has-post-thumbnail hentry industria-educacion area-apps area-ui-ux tecnologias-figma clientes-universidad-rafael-landivar dce-post dce-post-item swiper-slide dce-item-carousel\" data-dce-post-id=\"6197\" data-dce-post-index=\"1\">\n\t\t\t<div class=\"dce-post-block\">\n\t\t<div class=\"dce-item dce-item_image elementor-repeater-item-58ffe24\"><a class=\"dce-post-image\" href=\"https:\/\/royalestudios.com\/en\/portfolio\/url-ceat-app\/\"><figure  class=\"dce-img\"><img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/06\/url_dev_app_01.avif\" class=\"\" alt=\"URL CEAT App\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t<\/article>\n\t\t\n\t\t<article class=\"post-6231 portafolio type-portafolio status-publish has-post-thumbnail hentry industria-banca-y-finanzas area-apps area-ui-ux tecnologias-android tecnologias-ios clientes-bam dce-post dce-post-item swiper-slide dce-item-carousel\" data-dce-post-id=\"6231\" data-dce-post-index=\"2\">\n\t\t\t<div class=\"dce-post-block\">\n\t\t<div class=\"dce-item dce-item_image elementor-repeater-item-58ffe24\"><a class=\"dce-post-image\" href=\"https:\/\/royalestudios.com\/en\/portfolio\/bam-app-carreras\/\"><figure  class=\"dce-img\"><img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/06\/bam_carreras.avif\" class=\"\" alt=\"BAM App &#8211; Carreras\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t<\/article>\n\t\t\n\t\t<article class=\"post-6208 portafolio type-portafolio status-publish has-post-thumbnail hentry industria-retail area-apps area-ui-ux tecnologias-android tecnologias-ios clientes-parque-las-americas dce-post dce-post-item swiper-slide dce-item-carousel\" data-dce-post-id=\"6208\" data-dce-post-index=\"3\">\n\t\t\t<div class=\"dce-post-block\">\n\t\t<div class=\"dce-item dce-item_image elementor-repeater-item-58ffe24\"><a class=\"dce-post-image\" href=\"https:\/\/royalestudios.com\/en\/portfolio\/like-app\/\"><figure  class=\"dce-img\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/06\/Like-App.avif\" class=\"\" alt=\"Like App\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t<\/article>\n\t\t\n\t\t<article class=\"post-6234 portafolio type-portafolio status-publish has-post-thumbnail hentry industria-comidas-y-bebidas area-apps area-ui-ux tecnologias-android tecnologias-ios clientes-hacienda-real dce-post dce-post-item swiper-slide dce-item-carousel\" data-dce-post-id=\"6234\" data-dce-post-index=\"4\">\n\t\t\t<div class=\"dce-post-block\">\n\t\t<div class=\"dce-item dce-item_image elementor-repeater-item-58ffe24\"><a class=\"dce-post-image\" href=\"https:\/\/royalestudios.com\/en\/portfolio\/hacienda-real-app\/\"><figure  class=\"dce-img\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/royalestudios.com\/wp-content\/uploads\/2021\/06\/hacienda_real_app.avif\" class=\"\" alt=\"Hacienda Real App\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"dce-carousel-controls\">\n\t\t\t\t\t<div class=\"dce-container-pagination swiper-container-horizontal\">\n\t\t\t<div class=\"swiper-pagination pagination-5ba7c3e nav--default\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a436028 e-con-full rs-svc e-flex e-con e-parent\" data-id=\"a436028\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-524bfc5 elementor-widget elementor-widget-html\" data-id=\"524bfc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"sec\" style=\"max-width: 1340px; width: 100%; margin: 0px auto; padding: 160px 40px 0px; box-sizing: border-box;\">\n    <p style=\"margin: 0px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; font-weight: 500; letter-spacing: -0.035em; max-width: 1000px; text-wrap: pretty;\">We work with both <span style=\"color: rgb(236, 53, 67);\">companies building a digital product<\/span> and <span style=\"color: rgb(236, 53, 67);\">technology teams<\/span> that need a specialized UI\/UX partner.<\/p>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0bd405f e-con-full rs-svc e-flex e-con e-parent\" data-id=\"0bd405f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-452d68f elementor-widget elementor-widget-html\" data-id=\"452d68f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section data-r=\"sec-last\" data-screen-label=\"Dise\u00f1amos \/ desarrollas\" style=\"max-width: 1340px; width: 100%; margin: 0px auto; padding: 96px 40px 160px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 80px 96px; align-items: center;\">\n    <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n      <span style=\"font-size: 15px; font-weight: 600; color: rgb(236, 53, 67);\">Already have a team of developers?<\/span>\n      <h2 style=\"margin: 0px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.045em; text-wrap: balance;\">We design. Your team develops.<\/h2>\n      <p style=\"margin: 0px; font-size: 16px; line-height: 1.65; max-width: 520px;\">We can join your workflow and take care of the user experience and interface design while your team focuses on development.<\/p>\n      <p style=\"margin: 0px; font-size: 16px; line-height: 1.65; max-width: 520px;\">From defining flows and organizing content to designing screens and components, we prepare the assets needed to make implementation easier.<\/p>\n    <\/div>\n    <div style=\"position: relative; aspect-ratio: 560 \/ 420; width: 100%; max-width: 580px; justify-self: center;\">\n      <div style=\"position: absolute; right: 0px; top: 0px; width: 46%; aspect-ratio: 1 \/ 1; background: rgb(255, 179, 154); border-radius: 0px 0px 0px 100%;\"><\/div>\n      <div style=\"position: absolute; left: 4%; bottom: 0px; width: 30%; aspect-ratio: 1.15 \/ 1; background: rgb(255, 200, 69); clip-path: polygon(50% 0px, 100% 100%, 0px 100%);\"><\/div>\n      <div style=\"position: absolute; left: 0px; top: 10%; width: 50%; height: 68%; background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(40, 43, 66, 0.12) 0px 18px 40px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;\">\n        <span style=\"font-size: 12px; font-weight: 600; color: rgb(236, 53, 67);\">Design<\/span>\n        <div style=\"position: relative; flex: 1 1 0%; border-radius: 10px; background: rgb(55, 48, 107); overflow: hidden;\">\n          <div style=\"position: absolute; right: -12%; top: -12%; width: 60%; aspect-ratio: 1 \/ 1; background: rgb(123, 134, 240); border-radius: 50%;\"><\/div>\n          <div style=\"position: absolute; left: 12%; bottom: 18%; width: 44%; height: 12%; background: rgb(236, 53, 67); border-radius: 999px;\"><\/div>\n          <div style=\"position: absolute; left: 12%; top: 18%; width: 50%; height: 8%; background: rgb(255, 255, 255); border-radius: 3px;\"><\/div>\n        <\/div>\n        <div style=\"display: flex; align-items: center; gap: 6px;\">\n          <span style=\"flex: 1 1 0%; height: 1.5px; background: rgb(236, 53, 67);\"><\/span>\n          <span style=\"font-size: 11px; font-weight: 600; color: rgb(236, 53, 67);\">24 px<\/span>\n          <span style=\"flex: 1 1 0%; height: 1.5px; background: rgb(236, 53, 67);\"><\/span>\n        <\/div>\n      <\/div>\n      <div style=\"position: absolute; right: 0px; bottom: 8%; width: 52%; height: 62%; background: rgb(40, 43, 66); border-radius: 16px; box-shadow: rgba(40, 43, 66, 0.2) 0px 18px 40px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px;\">\n        <span style=\"font-size: 12px; font-weight: 600; color: rgb(255, 200, 69);\">Development<\/span>\n        <div style=\"display: flex; gap: 6px;\"><span style=\"width: 18%; height: 7px; border-radius: 2px; background: rgb(123, 134, 240);\"><\/span><span style=\"width: 34%; height: 7px; border-radius: 2px; background: rgb(255, 179, 154);\"><\/span><\/div>\n        <div style=\"display: flex; gap: 6px; padding-left: 12%;\"><span style=\"width: 26%; height: 7px; border-radius: 2px; background: rgb(236, 53, 67);\"><\/span><span style=\"width: 30%; height: 7px; border-radius: 2px; background: rgb(92, 95, 122);\"><\/span><\/div>\n        <div style=\"display: flex; gap: 6px; padding-left: 12%;\"><span style=\"width: 40%; height: 7px; border-radius: 2px; background: rgb(255, 200, 69);\"><\/span><\/div>\n        <div style=\"display: flex; gap: 6px; padding-left: 24%;\"><span style=\"width: 22%; height: 7px; border-radius: 2px; background: rgb(123, 134, 240);\"><\/span><span style=\"width: 20%; height: 7px; border-radius: 2px; background: rgb(92, 95, 122);\"><\/span><\/div>\n        <div style=\"display: flex; gap: 6px; padding-left: 12%;\"><span style=\"width: 30%; height: 7px; border-radius: 2px; background: rgb(255, 179, 154);\"><\/span><\/div>\n        <div style=\"display: flex; gap: 6px;\"><span style=\"width: 14%; height: 7px; border-radius: 2px; background: rgb(123, 134, 240);\"><\/span><\/div>\n      <\/div>\n      <div style=\"position: absolute; left: 44%; top: 44%; width: 56px; height: 56px; border-radius: 50%; background: rgb(236, 53, 67); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; box-shadow: rgb(239, 234, 230) 0px 0px 0px 8px;\">\u2192<\/div>\n    <\/div>\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":6181,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-7533","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/pages\/7533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/comments?post=7533"}],"version-history":[{"count":0,"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/pages\/7533\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/pages\/6181"}],"wp:attachment":[{"href":"https:\/\/royalestudios.com\/en\/wp-json\/wp\/v2\/media?parent=7533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}